feat(v2): add custom props for consumption by swizzled sidebar #3888

oriooctopus · 2020-12-06T20:14:04Z

Motivation

-I want to pass in custom props for consumption by my swizzled DocSidebar component

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

I modified a test within docusaurus-plugin-content/src/__tests__/sidebars.test.ts

Related PRs

#3868

facebook-github-bot · 2020-12-06T20:14:14Z

Hi @oriooctopus!

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file.

In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

github-actions · 2020-12-06T20:22:29Z

Size Change: +16 B (0%)

Total Size: 154 kB

ℹ️ View Unchanged

Filename	Size	Change
`website/build/blog/2017/12/14/introducing-docusaurus/index.html`	20.7 kB	-3 B (0%)
`website/build/docs/introduction/index.html`	180 B	0 B
`website/build/index.html`	5.82 kB	0 B
`website/build/main.********.js`	109 kB	+19 B (0%)
`website/build/styles.********.css`	17.5 kB	0 B

_{compressed-size-action}

netlify · 2020-12-06T20:23:59Z

✔️ Deploy preview for docusaurus-2 ready!
Built without sensitive environment variables

🔨 Explore the source changes: 708b9da

🔍 Inspect the deploy logs: https://app.netlify.com/sites/docusaurus-2/deploys/5fd264ae8c351500070b0a2a

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

facebook-github-bot · 2020-12-06T22:53:33Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

slorber

The implementation looks fine, but please avoid refactoring types unnecessarily, that's outside the scope of this feature request and should rather be decided separately

packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts

slorber · 2020-12-07T15:04:58Z

packages/docusaurus-plugin-content-docs/src/props.ts

@@ -39,6 +39,7 @@ Available document ids=
      type: 'link',
      label: sidebar_label || title,
      href: permalink,
+      extra: item.extra,


Personally, I like "data" more for the name of this attribute, but no strong opinion

@ReginaLiang what's your opinion?

@slorber,
Actually, I think any one will be fine. ^v^, a little little thought, How about customFields? It is consistent with DocusaurusConfig object, I guess customFields more meaningful. But any one is OK for me.

@slorber, @oriooctopus ,
Thanks for your guys great work! I believe docusaurus is getting better and better.

slorber · 2020-12-07T15:07:58Z

website/docs/docs.md

@@ -165,6 +165,8 @@ As the name implies, `SidebarItem` is an item defined in a Sidebar. There are a
 - [Ref](#ref)
 - [Category](#category)

+**Note**: If you would like to pass in custom props to a swizzled sidebar, an optional object called `extra` can be added to any of the items:


That does not seem good enough to me, it looks like you forgot to add an example after the : ?

oriooctopus · 2020-12-08T19:02:16Z

@slorber would you like an additional commit with the changes or would you prefer them squashed/amended?

slorber · 2020-12-08T20:20:06Z

@oriooctopus it's not needed to squash because we squash all prs when merging, so we don't care about your local history 😉

github-actions · 2020-12-08T22:31:12Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	59
🟢 Accessibility	99
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

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

oriooctopus · 2020-12-10T17:26:18Z

@slorber does this look good to you?

slorber

Still some type->interface refactorings

"extra" still there after the renaming.

Otherwise LGTM.
Not sure customProps is the best name, but let's merge this. We'll see later if anyone can come with a better name 😅

slorber · 2020-12-10T17:27:30Z

packages/docusaurus-plugin-content-docs/src/sidebars.ts

@@ -20,7 +21,7 @@ import {
 import {mapValues, flatten, difference} from 'lodash';
 import {getElementsAround} from '@docusaurus/utils';

-type SidebarItemCategoryJSON = {
+export type SidebarItemCategoryJSON = SidebarItemBase & {


does it need an export? I don't see it imported anywhere, why this change?

slorber · 2020-12-10T17:28:28Z

packages/docusaurus-plugin-content-docs/src/types.ts


-export type SidebarItemLink = {
+export interface SidebarItemLink extends SidebarItemBase {


same as before: use type aliases instead of refactoring to interface

slorber · 2020-12-10T17:29:05Z

packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts

@@ -21,13 +21,17 @@ declare module '@docusaurus/plugin-content-docs-types' {
    permalinkToSidebar: PermalinkToSidebar;
  };

-  export type PropSidebarItemLink = {
+  export type PropsSidebarItemBase = {
+    extra?: object;


now renamed to customProps?

oriooctopus · 2020-12-10T18:17:26Z

Just updated it, sorry about the changes I missed last time.
Question: what's the reason for not importing types in plugin-content-docs.d.ts but importing them in sidebars.ts? Excuse me if this is a simple question, I'm new to typescript

slorber · 2020-12-10T18:49:13Z

thanks, LGTM 👍

@oriooctopus the TS setup is a bit messy currently, not sure to have a good answer for that, but we'll try to improve it over time :)
Initially the codebase was mostly JS so it's an incremental upgrade

oriooctopus requested review from lex111 and slorber as code owners December 6, 2020 20:14

facebook-github-bot added the CLA Signed Signed Facebook CLA label Dec 6, 2020

slorber added the pr: new feature This PR adds a new API or behavior. label Dec 7, 2020

slorber requested changes Dec 7, 2020

View reviewed changes

oriooctopus requested a review from slorber December 8, 2020 22:30

Kampoz18 mentioned this pull request Dec 8, 2020

That does not seem good enough to me, t looks like you forgot to add an example after the : ? #3897

Closed

slorber requested changes Dec 10, 2020

View reviewed changes

feat(v2): add custom props for consumption by swizzled sidebar

708b9da

oriooctopus force-pushed the sidebar-custom-props branch from 2ee80a3 to 708b9da Compare December 10, 2020 18:10

slorber merged commit b11c24b into facebook:master Dec 10, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(v2): add custom props for consumption by swizzled sidebar #3888

feat(v2): add custom props for consumption by swizzled sidebar #3888

oriooctopus commented Dec 6, 2020 •

edited

Loading

facebook-github-bot commented Dec 6, 2020

github-actions bot commented Dec 6, 2020 •

edited

Loading

netlify bot commented Dec 6, 2020 •

edited

Loading

facebook-github-bot commented Dec 6, 2020

slorber left a comment •

edited

Loading

slorber Dec 7, 2020

ReginaLiang Dec 8, 2020

slorber Dec 7, 2020

oriooctopus commented Dec 8, 2020

slorber commented Dec 8, 2020

github-actions bot commented Dec 8, 2020 •

edited

Loading

oriooctopus commented Dec 10, 2020

slorber left a comment

slorber Dec 10, 2020

slorber Dec 10, 2020

slorber Dec 10, 2020

oriooctopus commented Dec 10, 2020

slorber commented Dec 10, 2020


		export type SidebarItemLink = {
		export interface SidebarItemLink extends SidebarItemBase {

feat(v2): add custom props for consumption by swizzled sidebar #3888

feat(v2): add custom props for consumption by swizzled sidebar #3888

Conversation

oriooctopus commented Dec 6, 2020 • edited Loading

Motivation

Have you read the Contributing Guidelines on pull requests?

Test Plan

Related PRs

facebook-github-bot commented Dec 6, 2020

github-actions bot commented Dec 6, 2020 • edited Loading

netlify bot commented Dec 6, 2020 • edited Loading

facebook-github-bot commented Dec 6, 2020

slorber left a comment • edited Loading

Choose a reason for hiding this comment

slorber Dec 7, 2020

Choose a reason for hiding this comment

ReginaLiang Dec 8, 2020

Choose a reason for hiding this comment

slorber Dec 7, 2020

Choose a reason for hiding this comment

oriooctopus commented Dec 8, 2020

slorber commented Dec 8, 2020

github-actions bot commented Dec 8, 2020 • edited Loading

oriooctopus commented Dec 10, 2020

slorber left a comment

Choose a reason for hiding this comment

slorber Dec 10, 2020

Choose a reason for hiding this comment

slorber Dec 10, 2020

Choose a reason for hiding this comment

slorber Dec 10, 2020

Choose a reason for hiding this comment

oriooctopus commented Dec 10, 2020

slorber commented Dec 10, 2020

oriooctopus commented Dec 6, 2020 •

edited

Loading

github-actions bot commented Dec 6, 2020 •

edited

Loading

netlify bot commented Dec 6, 2020 •

edited

Loading

slorber left a comment •

edited

Loading

github-actions bot commented Dec 8, 2020 •

edited

Loading