feat(web): add web generator #285
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
✅ All tests successful. No failed tests found. Additional details and impacted files@@ Coverage Diff @@
## main #285 +/- ##
==========================================
+ Coverage 90.58% 91.87% +1.28%
==========================================
Files 63 63
Lines 4767 4613 -154
Branches 191 187 -4
==========================================
- Hits 4318 4238 -80
+ Misses 446 373 -73
+ Partials 3 2 -1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| const language = matches?.groups?.language ?? ''; | ||
| const [copyText, setCopyText] = useState('Copy to clipboard'); | ||
|
|
||
| const handleCopy = async text => { |
There was a problem hiding this comment.
Why not including useCopyToClipord in ui lib ?
| "estree-util-value-to-estree": "^3.4.0", | ||
| "estree-util-visit": "^2.0.0", | ||
| "github-slugger": "^2.0.0", | ||
| "glob": "^11.0.2", | ||
| "hast-util-to-string": "^3.0.1", | ||
| "hastscript": "^9.0.1", | ||
| "html-minifier-terser": "^7.2.0", | ||
| "mustache": "^4.2.0", |
There was a problem hiding this comment.
I tried to use __<VARIABLE>__ like in the other generators, however, the JavaScript I was trying to add to the HTML broke the structure of the file. Using a library like Mustache properly escapes anything injected.
There was a problem hiding this comment.
export const TEMPLATE = ({...props}) => dedent`
<html>
${props.foo}
</html>
`; this can work
There was a problem hiding this comment.
Sorry if I wasn’t clear, the compiled JavaScript broke the HTML structure because it contained characters that need to be escaped to be in an HTML script.
For example, in your scenario, if props.foo contains a </html>, it’ll escape the sandbox.
Mustache performs all the needed escaping.
There was a problem hiding this comment.
I don't like that we're using yet another layer of whatever freakery here. Mustache is great, but it feels like you're throing a nuke at an ant's sized problem. Not to mention adding yet another engine here will make things even more complex and costly-performance wise. Let's try to avoid throwing npm packages to any problem we encounter, shall we?
There was a problem hiding this comment.
Babel has jsesc builtin, so I'll try to use that instead. babel/babel#8124
|
🎉 The code now dehydrates to the client so it can render without JavaScript! |
Wow 😵💫 and what about codetab |
|
It rehydrates and runs with JS, but if you don't have JS, you can still view the docs. I used React's SSRing |
|
@AugustinMauroy and I got search to finally work 🎉 |
Fixes #7.
This PR adds the web generator, and some of its components. Many of these components still need to be implemented.
TODO List
ChangeHistoryCircularIconSideBarMetaBar,AlertBox