feat(core,theme): useRouteContext + HtmlClassNameProvider #6933

slorber · 2022-03-17T18:34:20Z

Motivation

Add plugin name + plugin id + docs version + doc id to HTML classes, fixes #4280

Partial implementation for assigning a context to a route (#6885)

For now only plugins add basic data to this context, and it can be used through useRouteContext(). For now I keep this API undocumented until we have a full clean implementation.

This partial implementation was necessary because there was no other easy way to assign pluginId/name to a given route apart from doing more annoying things like adding data to the generated route file.

Had to create a HtmlClassNameProvider wrapper because react-helmet does not "merge" classNames and deeply nested class override parent classes (see staylor/react-helmet-async#161). Another option would be to use data-attributes instead of classes for parent selectors? 🤷‍♂️

Note that some things are unpolished, but I plan to do more cleanup/merge as part of #6925 (2 smaller PRs instead of one bigger) so I'll merge this one asap to unlock the other reactors. Now is the best time to review.

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

Not so easy to test 😅

Preview builds and applies correct classNames

Related PRs

#6925

slorber · 2022-03-17T18:42:04Z

packages/docusaurus-theme-common/src/utils/metadataUtilsTemp.tsx

@@ -0,0 +1,59 @@
+/**


temp because the other PR also have created a similarly named file

slorber · 2022-03-17T18:43:47Z

Not sure why it doesn't build 🤔 any idea?

Josh-Cena · 2022-03-17T23:44:16Z

I've seen this error in the past, when I was trying to switch the JS loader from esbuild to SWC. Has something to do with CJS/ESM. Haven't had time to debug this, since the stack tracing in SSR is horrible

Josh-Cena · 2022-03-18T01:35:58Z

Removed the calls to logger in serverEntry.tsx because it seems like logger was not called correctly. The error is:

Docusaurus server-side rendering could not render static page with path path=/404.html.


Error: Unexpected: no Docusaurus parent/current route context found

Which seems reasonable

Josh-Cena · 2022-03-18T02:06:05Z

The reason that there's now this CJS/ESM interop problem is because I removed the format: 'cjs' in #6752 (diff). I removed that because of evanw/esbuild#2037 which made our site not able to build at all 😅

Non-babel loaders always have this or that kinds of failures...

netlify · 2022-03-18T02:06:37Z

✔️ [V2]

🔨 Explore the source changes: 89978ea

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/6233e75a1e054400080098bf

😎 Browse the preview: https://deploy-preview-6933--docusaurus-2.netlify.app

github-actions · 2022-03-18T02:07:00Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	55
🟢 Accessibility	100
🟢 Best practices	92
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-6933--docusaurus-2.netlify.app/

github-actions · 2022-03-18T02:09:08Z

Size Change: +9.49 kB (+1%)

Total Size: 802 kB

Filename	Size	Change
`website/build/assets/css/styles.********.css`	105 kB	-247 B (0%)
`website/build/assets/js/main.********.js`	608 kB	+9.7 kB (+2%)
`website/build/index.html`	38.8 kB	+40 B (0%)

ℹ️ View Unchanged

Filename	Size
`website/.docusaurus/globalData.json`	49.9 kB

_{compressed-size-action}

Josh-Cena

LGTM!

slorber

thanks 👍

slorber · 2022-03-18T09:36:55Z

packages/docusaurus/src/client/exports/ComponentCreator.tsx

+      loader: async () => {
+        const NotFound = (await import('@theme/NotFound')).default;
+        return (props) => (
+          // Is there a better API for this?


🤪 good catch

There's also a native "Loading" screen but afaik it's never displayed so 🤷‍♂️

Yeah, the "native" name isn't the best, but I don't think this will be targeted anyways...

slorber · 2022-03-18T09:37:49Z

packages/docusaurus/src/client/routeContext.tsx

@@ -30,6 +30,7 @@ function mergeContexts({
    return value;
  }

+  // TODO deep merge this


not sure we really want to deep merge

In case there are multiple layers I'd rather ensure that laters do not override each others, there's no good use-case to do so that I can think of
We can keep the comment for now and figure this out later anyway

I don't think it would be immediately useful for content plugins, but maybe in userland? Deep merging sounds more natural about how these stores should behave

Co-authored-by: Joshua Chen <sidachen2003@gmail.com> # Conflicts: # packages/docusaurus-theme-common/src/index.ts

slorber added 3 commits March 17, 2022 18:40

add useRouteContext

ee9a213

add HtmlClassNameProvider component + make it work for docs versions

840237c

create html className for doc id

032516e

slorber added the pr: new feature This PR adds a new API or behavior. label Mar 17, 2022

slorber requested review from lex111 and Josh-Cena as code owners March 17, 2022 18:34

facebook-github-bot added the CLA Signed Signed Facebook CLA label Mar 17, 2022

slorber mentioned this pull request Mar 17, 2022

Add a unique CSS class to body tag which uses the docs ID #4280

Closed

slorber commented Mar 17, 2022

View reviewed changes

Josh-Cena changed the title ~~feat(core,theme): add useRouteContext + HtmlClassNameProvider~~ feat(core,theme): useRouteContext + HtmlClassNameProvider Mar 18, 2022

Josh-Cena added 3 commits March 18, 2022 09:18

refactors

fb5d766

remove generic

a52601e

refactor...

ef38c6c

fix build failure

89978ea

Josh-Cena approved these changes Mar 18, 2022

View reviewed changes

slorber commented Mar 18, 2022

View reviewed changes

slorber merged commit 8a1421a into main Mar 18, 2022

slorber deleted the slorber/useRouteContext branch March 18, 2022 09:57

slorber added a commit that referenced this pull request Mar 18, 2022

feat(core,theme): useRouteContext + HtmlClassNameProvider (#6933)

6b9726b

Co-authored-by: Joshua Chen <sidachen2003@gmail.com> # Conflicts: # packages/docusaurus-theme-common/src/index.ts

Josh-Cena mentioned this pull request Apr 8, 2022

feat(core): allow plugins to declare custom route context #7082

Merged

Josh-Cena mentioned this pull request Jun 10, 2022

Allow CSS to target layout of a single page (for docs, blog, pages) #7592

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(core,theme): useRouteContext + HtmlClassNameProvider #6933

feat(core,theme): useRouteContext + HtmlClassNameProvider #6933

slorber commented Mar 17, 2022 •

edited

slorber Mar 17, 2022

slorber commented Mar 17, 2022

Josh-Cena commented Mar 17, 2022

Josh-Cena commented Mar 18, 2022

Josh-Cena commented Mar 18, 2022

netlify bot commented Mar 18, 2022

github-actions bot commented Mar 18, 2022

github-actions bot commented Mar 18, 2022

Josh-Cena left a comment

slorber left a comment

slorber Mar 18, 2022

Josh-Cena Mar 18, 2022

slorber Mar 18, 2022

Josh-Cena Mar 18, 2022

feat(core,theme): useRouteContext + HtmlClassNameProvider #6933

feat(core,theme): useRouteContext + HtmlClassNameProvider #6933

Conversation

slorber commented Mar 17, 2022 • edited

Motivation

Have you read the Contributing Guidelines on pull requests?

Test Plan

Related PRs

slorber Mar 17, 2022

Choose a reason for hiding this comment

slorber commented Mar 17, 2022

Josh-Cena commented Mar 17, 2022

Josh-Cena commented Mar 18, 2022

Josh-Cena commented Mar 18, 2022

netlify bot commented Mar 18, 2022

github-actions bot commented Mar 18, 2022

github-actions bot commented Mar 18, 2022

Josh-Cena left a comment

Choose a reason for hiding this comment

slorber left a comment

Choose a reason for hiding this comment

slorber Mar 18, 2022

Choose a reason for hiding this comment

Josh-Cena Mar 18, 2022

Choose a reason for hiding this comment

slorber Mar 18, 2022

Choose a reason for hiding this comment

Josh-Cena Mar 18, 2022

Choose a reason for hiding this comment

slorber commented Mar 17, 2022 •

edited