Update script to support current tailwindui.com #11
Conversation
| @@ -0,0 +1,10 @@ | |||
| const fs = require("fs"); | |||
|
|
|||
| function writeToFile(outputDir, componentType, sections, error = false) { | |||
| @@ -0,0 +1,12 @@ | |||
| [ | |||
There was a problem hiding this comment.
Sample output of getSections.js (added here for reference)
| if (!toggleCode) { | ||
| return | ||
| } |
There was a problem hiding this comment.
Allow the script to keep going when the code block is locked (user has no access to it).
Example component ("Get the code" indicates the code block is locked):
| // Change the type of code snippet to HTML/React/Vue (hint: ../docs/hints/toggle-code-format.png) | ||
| const toggleSnippetType = el.querySelector('select.form-select') | ||
| toggleSnippetType.value = type; | ||
| toggleSnippetType.dispatchEvent(new Event('change', { bubbles: true })); |
There was a problem hiding this comment.
bubbles: true is needed otherwise the onChange event won't be propagated to React and it won't rerender (SO).
wzulfikar
changed the title
| @@ -52,12 +47,15 @@ async function run() { | |||
| components.forEach((component) => { | |||
| const componentName = pascalCase(component.title); | |||
|
|
|||
| // Add `Component_` prefix for import name if component name starts with number | |||
| const importName = componentName.match(/^\d/) ? `Component_${componentName}` : componentName; | |||
There was a problem hiding this comment.
JS variable can't start with number and so is JSX tag. So I added custom prefix Component_ when the imported component starts with number.
Before / after:
The component will still show up as "4X2GridOnBrand" in storybook:
|
@wzulfikar This is cool! Worked for me. |
What
Update scraper to make it work for the new tailwindui.com site. This PR also tries to improve the codebase so it's easier to maintain.
Checklist:
.env.sampleas a template for environment variables required by the scriptyarn start react,yarn create-mdx react)Why
The previous code no longer work due to changes in tailwindui.com.
Test plan
yarn start reactand it should create a json file at./output/tailwindui.react.jsonyarn create-mdx reactand it should create the Storybook stories at./output/tailwindui-react/Preview:
twui-storybook.mp4.mp4
I also tested the generated code in Stackblitz to ensure that it works with current latest Storybook. Screenshot: