Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 15 commits into
base: master
Choose a base branch
from

Conversation

chrisirhc
Copy link
Contributor

@chrisirhc chrisirhc commented May 25, 2020

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.
image

First stab at this:
image

  • 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
Copy link
Contributor

Xiot commented May 25, 2020

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
Copy link
Contributor Author

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.

@chrisirhc chrisirhc changed the title WIP Website v0 working with latest ocular-gatsby WIP Get website build working with latest ocular-gatsby May 30, 2020
@ibgreen
Copy link
Contributor

ibgreen commented May 31, 2020

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
Copy link
Contributor Author

chrisirhc commented May 31, 2020

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.

@chrisirhc chrisirhc changed the title WIP Get website build working with latest ocular-gatsby Need help: Get website build working with latest ocular-gatsby May 31, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants