Need help: Get website build working with latest ocular-gatsby

[chrisirhc]

Note: I have no bandwidth to finish this PR. If anyone is able to take over it, you're welcome to. Or feel free to start afresh. I'm hoping this can get you pretty far along.

Update 5/30:
Examples are now working. Added one working example and have MDX plugin working.

First stab at this:

• Rebase this PR after Revert "docs(readme): add depreaction message (#1302)" #1334 is merged
• Prototype using MDX for documentation and inject components from Showcase (example)
• Gatsby issue where it's not allowing imports with import not in the top. I'm guessing it's because our es build is configured incorrectly to output some helper functions before the import calls? See example here.

  /packages/react-vis/es/plot/series/horizontal-rect-series-canvas.js
    1:127  warning  '_typeof' is a function                                                         no-func-assign
    1:192  warning  '_typeof' is a function                                                         no-func-assign
    5:185  warning  Function declared in a loop contains unsafe references to variable(s) 'source'  no-loop-func
    5:412  warning  Function declared in a loop contains unsafe references to variable(s) 'source'  no-loop-func
    17:34   warning  '_setPrototypeOf' is a function                                                 no-func-assign
    27:31   warning  '_getPrototypeOf' is a function                                                 no-func-assign
    48:1    error    Import in body of module; reorder to top                                        import/first
    49:1    error    Import in body of module; reorder to top

• Check if there's any remaining references from showcase that refers to components instead of es export.
• Add remaining examples
• Update to ocular-gatsby-plugin of https://github.com/uber-web/ocular
• Update files with INJECT'ed components to MDX

Request for help

If anyone's an expert on gatsby/es exports: would love thoughts on any of these issues. Especially Gatsby issue mentioned above.

[Xiot]

Gatsby issue where it's now allowing imports with import not in the top:
The issue looks like its not transpiling the gatsby code.
Also, I would think that code from gatsby shouldn't end up in the "compiled bundle" (es and dist folder)

Other than that this looks like a good path forward.

[chrisirhc]

Gatsby issue where it's now allowing imports with import not in the top:
The issue looks like its not transpiling the gatsby code.
Also, I would think that code from gatsby shouldn't end up in the "compiled bundle" (es and dist folder)

Other than that this looks like a good path forward.

It's actually reading from the compiled bundle, es folder. It's not ending up in that folder.

[ibgreen]

Examples are now working. Added one working example and have MDX plugin working

@chrisirhc Very happy to see ocular being used here, and very interested in the MDX integration - we need it in other places as well.

A quick note - ocular has now been repackaged as a gatsby-theme (gatsby-theme-ocular) which is a considerably cleaner solution, as ocular is now just another plugin in the config, see e.g: https://github.com/visgl/loaders.gl/blob/master/website/gatsby-config.js

If react-vis moved to use the new theme, we'd be able to share ocular and gatsby config improvements more easily across projects. It would also make react-vis feel more like a visgl project, allow visgl maintainers to (potentially) assist here.

[chrisirhc]

Examples are now working. Added one working example and have MDX plugin working

@chrisirhc Very happy to see ocular being used here, and very interested in the MDX integration - we need it in other places as well.

A quick note - ocular has now been repackaged as a gatsby-theme (gatsby-theme-ocular) which is a considerably cleaner solution, as ocular is now just another plugin in the config, see e.g: https://github.com/visgl/loaders.gl/blob/master/website/gatsby-config.js

If react-vis moved to use the new theme, we'd be able to share ocular and gatsby config improvements more easily across projects. It would also make react-vis feel more like a visgl project, allow visgl maintainers to (potentially) assist here.

I updated the PR to leverage the ocular theme and also updated this with the new MDX approach.

See:
https://github.com/chrisirhc/react-vis/blame/website-v0/docs/scales-and-data.mdx#L12-L14

There's still quite a bit of remaining work to clean up integration with the ocular theme. I needed to copy-paste the logic from on-create-node, and create-pages (making some changes) in order to get this into a half-working state.

---

I won't have bandwidth to look at this any further in the near future. but I'm hoping this has enough context for someone else to look into.