feat(web): add web generator #285
Conversation
Codecov ReportAttention: Patch coverage is
✅ All tests successful. No failed tests found. Additional details and impacted files@@ Coverage Diff @@
## main #285 +/- ##
==========================================
+ Coverage 71.51% 72.15% +0.64%
==========================================
Files 117 131 +14
Lines 9721 10969 +1248
Branches 590 676 +86
==========================================
+ Hits 6952 7915 +963
- Misses 2766 3047 +281
- Partials 3 7 +4 ☔ 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 ?
There was a problem hiding this comment.
IIRC I didn't include it since it didn't fall under the "UI Component" category, it's a hook, however, if you disagree, I won't block.
| "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?
|
🎉 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 🎉 |
avivkeller
force-pushed
the
feat/web/gen
branch
2 times, most recently
from
024bbea to
dbfe55d
Compare
|
@nodejs/nodejs-website @nodejs/web-infra |
|
To be honest, I like this design:
But it doesn't speak our design language and it is a bit complex visually speaking. The one from the example of Next.js docs is simple and easy to visualize. With variation we can adopt many different paths and experiment. |
|
Okay, I'll program the table, and we'll see how it looks. |
|
@ovflowd (Note: This is a first draft to show what a table would look it more-or-less, i.e.
|
|
Nice, I still think we need to add that snippet of method signature that I mentioned. This would allow us to rename the header section to be simply the method name or class name. It also helps on Search Indexing |
Yes, the draft was just for the table, but I plan to use |
|
Tables: Combined signatures: |
|
|
|
With the speed improvements we've made, this generator takes roughly a minute and a half. It's not amazing, but it's better than the 2 minutes we were seeing earlier. The hottest code path is PostCSS, so once we preprocess the CSS/JSX on the ui-components side, it'll speed up more. All-in-all, the slowest code, in order of speed (slowest 1, fastest 4):
|
|
Let's prioritze the publishing of ui-components; Is @Harkunwar working on it? Regarding Terser, let's see what we can move to ESBuild or Rollup. |
|
Terser is specifically for HTML minification, everything else (CSS/JS) is minified by ESBuild. I wonder if we can configure preact to minify during generation 🤔? |
EDIT:
|
Hm? How? |
|
Ah and some stuff seems to not be using the new table yet:
|
|
For Orama DB generation:
I feel we need to add "tags" labels or something; as it upsets me so much "write file" and none ofn the fs: write file methods are even showing up on these results. |
|
Another example of tables not being generated:
|
|
Also regarding header It'd be great if we could also have a navbar 🤔 but maybe not (and not a blocker can be a folow-up) |
|
Select shows major + minor; But options show major with .x; Shouldn't select options label show the full version? |
That specifically is an issue with the table being generated, but the original content not being removed (which is it's own bug) |
|
I also need to fix several edge cases with table generation like: |
Is it just me or is the font size changing for code tags within the table? And yes, feels like the styling is a bit broken not gonna lie. |
|
How should we render it in this case? Should the functions' properties be a sub-table in |
Fixes #7.
This PR adds the web generator.
Tasks / Issues
P1 – Must Complete Before Merge
P2 – Must complete before migration
ChangeHistorycomponent doesn’t render Markdown correctly. (Seeentry.changesaren't converted to HTML #326)P3 – Can Be Done in a Follow-up
mustachedependencyGet a preview
Footnotes
Add things as they appear, or leave review comments. ↩ ↩2 ↩3