[docs-infra] Add CodeHighlighter component for loading demos and codeblocks #379
Conversation
github-actions
bot
added
the
PR: out-of-date
github-actions
bot
added
PR: out-of-date
github-actions
bot
removed
the
PR: out-of-date
This reverts commit 4a91028.
I added When I added |
…ed usages in CodeHighlighterClient
…oved readability and prop handling
…dd support for sourceParser and sourceTransformers in loader checks
oliviertassinari
temporarily deployed
to
davis/add-code-highlighter-loader - mui-tools-public PR #379
Render
Destroyed
Is that a bug in Next.js? If so, can you open a ticket with them? |
| // Set hash in URL and state | ||
| const setHash = React.useCallback( | ||
| (value: string | null, replace: boolean = true) => { | ||
| if (typeof window === 'undefined') { |
There was a problem hiding this comment.
I don't believe this will ever be called in a server context
| if (typeof window === 'undefined') { |
| /** | ||
| * Hook for managing URL hash state with SSR support | ||
| */ | ||
| export function useUrlHashState(options: UseUrlHashStateOptions = {}): UseUrlHashStateResult { |
There was a problem hiding this comment.
Let's keep these publicly exported hooks simple and to the point. The options are unnecessary, and same for anything else than hash and setHash. What's the point of hasUserInteraction? It's doing nothing beyond wrapping React.useState
| filename = 'file.ts', | ||
| prettierConfig: PrettierOptions | boolean = true, | ||
| ): Promise<string> { | ||
| // Babel collapses newlines all over the place, which messes with the formatting of almost any |
There was a problem hiding this comment.
Why care about preserving formatting at all cost if we're going to run prettier over it anyway?
There was a problem hiding this comment.
This is largely the code from the original https://github.com/ember-cli/babel-remove-types/blob/main/src/index.ts
I think the idea was that it would remove extra newlines?
There was a problem hiding this comment.
Ok, advocate of the devil here, why are we forking this code then?
Adds an isomorphic (server and client loading/parsing) and build-optimizable (via a loader) code highlighting component.
Notable Features
init(no defer),stream,hydration, andidle.jsfile in the repo.Adds 947 unit tests, covering 70% of statements, 85% of branches, runs in 3 seconds on my machine
Note
The docs are added in a separate PR: #431
Install instructions with variants (remembers preference in local storage)
A demo of a codeblock
A demo within a demo
A demo of a demo with multiple variants
Linking to Demo Title Consistent with File Linking
Note
See the address bar
Read the docs for this component
Precompute Loader Docs
Read the rest of the added docs
Notes
We use ESM only packages for some things (https://www.npmjs.com/package/unified, https://www.npmjs.com/package/jsondiffpatch, etc) so CJS publishing is disabled (at least for now)