Refine the Dot Leader list code example #1356
Conversation
|
| code: `{% embed '@cloudfour/objects/list/list.twig' only %} | ||
| {% block content %} | ||
| {% for topic in topics %} | ||
| <li> | ||
| {% include '@cloudfour/components/dot-leader/dot-leader.twig' with { | ||
| label: topic.title, | ||
| count: topic.count, | ||
| href: topic.url | ||
| } only %} | ||
| </li> | ||
| {% endfor %} | ||
| {% endblock %} | ||
| {% endembed %} | ||
| `, |
There was a problem hiding this comment.
@gerardo-rodriguez Unless I'm mistaken, this looks like it's exactly the contents of the demo/list.twig file.
In cases where you want to show the raw template source, it's possible to do so without copying and pasting code.
Near the beginning of the file, you should see the import for the demo itself:
import listDemo from './demo/list.twig';Duplicate this line, but give it a unique name and prepend !!raw-loader! to the path:
import listDemo from './demo/list.twig';
import listDemoSource from '!!raw-loader!./demo/list.twig';Then, you can use listDemoSource (or whatever you called it) as the value of docs.source.code. It should show the contents of the list.twig file as a string.
More info: https://github.com/webpack-contrib/raw-loader#examples
There was a problem hiding this comment.
What!? 🤯
Thanks, @tylersticka, I'll take a look! 🔍 👀
There was a problem hiding this comment.
Done, thanks, @tylersticka! e38b9e6
There was a problem hiding this comment.
Oh...lint failure... 🔍
There was a problem hiding this comment.
I was getting a lint error. I disabled it. Not sure if disabling this specific use case is frowned upon. Do you have any insight, @tylersticka?
There was a problem hiding this comment.
Interesting! Here's the info about the lint rule, and the relevant bit:
This syntax is non-standard, so it couples the code to Webpack. The recommended way to specify Webpack loader configuration is in a Webpack configuration file.
I get the intent here. import is a native feature that works anywhere. By using custom webpack syntax we're breaking that interoperability and tying ourselves to webpack. That said, it seems unlikely that Storybook would move away from webpack any time soon, and since we're already tied to Storybook it seems like we're already tied to webpack?
I think the worst case scenario is that a new Storybook version moves away from webpack and then we'd need to either:
- Add our own webpack config.
- Update anywhere we use this syntax to do something else.
- Not update Storybook.
That doesn't seem all that scary? I'd be more concerned about this lint rule being used in our actual components, but it seems fine for a Storybook docs page?
I'm trying to think through alternatives:
- We could update our webpack config so that you could add a query string to specify a specific loader: (e.g.
import myRawModule from 'myModule?raw'. I think this could be done using resource query rules? - Write some custom node code to grab a file's contents and spit them out? That seems like reinventing the wheel for no reason and I'm not sure how it would work with Storybook.
It seems like option 1 above might be slightly cleaner since we're not tying ourselves to webpack as directly? But we'd still be relying on webpack to handle the resource query rules. That solution doesn't seem radically better but it sounds more complicated to get working.
My gut feeling is we should leave this rule enabled globally (since we shouldn't be doing this in our component code) but not worry about disabling it in Storybook doc files.
That said I'm curious if @calebeby or @spaceninja have any other thoughts.
There was a problem hiding this comment.
Option 1 feels like we're just recreating a native Webpack feature ourselves for no reason, and option 2 does feel like reinventing the wheel for no reason.
My gut feeling is we should leave this rule enabled globally (since we shouldn't be doing this in our component code) but not worry about disabling it in Storybook doc files.
I agree with this 👍
There was a problem hiding this comment.
I agree with @Paul-Hebert — leave the rule enabled, and disable it for places where we're intentionally working around it like Storybook docs.
That said, I'd like to see a comment above the eslint-disable line explaining why we're disabling it. Just a sentence or two summarizing what we've said here.
There was a problem hiding this comment.
Thank you all! I'll add a comment shortly. 👍
There was a problem hiding this comment.
Comment added! f6178df
|
@Paul-Hebert @spaceninja I've updated this PR, can I get a final review/approval? Thanks! 😄 |
…into chore/ground-nav-source-examples * 'v-next' of github.com:cloudfour/cloudfour.com-patterns: Refine the Dot Leader list code example (#1356)
Overview
This PR refines the code example for the Dot Leader list example.
Screenshots
Testing
Preview: https://deploy-preview-1356--cloudfour-patterns.netlify.app/?path=/docs/components-dot-leader--list