Local sandbox

[benallfree]

Regarding discussion in #187 about keeping storybook for component dev, after some research I think we can maybe eventually move away. Here is how this PR works:

In an mdx file, you can do

[demo:HelloWorld.tsx]

This expects a ./HelloWorld.tsx in the same directory as the mdx file. This is nice because you get full VSCode support and it moves the code out of the mdx files.

In development mode, that shortcode will generate a localized demo (using the local package) and a codesandbox demo running against the public package as well. This will let you know fairly immediately if the demo you are making is compatible with the current public version. Kind of a nice bonus.

In prod mode, it will not show the local execution.

Caveats:

• Adding new components seems to require restarting the gatsby dev server. We may eventually be able to figure out what's happening and correct it.

[brianzinn]

That's great to hear - totally worth it. I don't mind restarting gatsby dev server at all 😄 Let me know when you are ready and I will merge. Thank again.

[benallfree]

Alright I think this is ready to merge or at least test out. This feels VERY NICE. You just use a shortcode like [demo:HelloWorld.tsx] and it does the work of running it inline, showing the code inline, and generating a templated codesandbox button. I'm excited to begin using this for prototyping various WebXR experiments.

To test:

yarn
cd packages/static
yarn start

Notes:

• I created a gatsby-mdx-codesandbox package that contains all the goodies for running local code in dev mode and still supporting sandbox launching. I think this package could potentially be published to npm :)

Todo:

• Fix nav indentation (I think I'm just going to use a JSON file for nav)
• Watch tsx samples and rebuild mdx if dependent files change

[brianzinn]

very cool. if you are done I will merge! thanks again. i'm looking forward to moving more docs - will get to that next week for sure! this is a massive improvement. i will move some storybook stories over to gatsby and then just remove storybook after a bit more testing.

[benallfree]

Remind me again why Storybook is undesirable? Here is what I'm experiencing:

Feature	Gatsby	Storybook
Typescript support	Good	Great
Theme customization	Great	Meh
Build time	Fair	Good
Dev mode	Bad	Great
Input tooling	Bad	Great

Before I finish this branch, I want to stand up a storybook version of the same intro content to see how it feels. After having worked in Gatsby for a few days, I think it creates a lot of code to maintain and understand without super clear benefits over Storybook. And the dev experience will continue to be bad. Gatsby is great at live updating content data in dev mode, but it's not great at updating React components.

[benallfree]

Eh that didn't take long. I think you're right about Storybook, just not a great fit for docs. I do like it for dev iteration though.

[brianzinn]

I totally agree about the dev experience in Storybook being good. For me though, a goal that I had and never made time for was great documentation and Storybook wasn't well suited for a wiki style documentation/tutorials/walkthroughs. I really like what you cooked up here and I think it will make it much easier for newcomers to get started - the docs have just been terrible so far to be honest. Really looking forward to spinning this up next week as I will have time starting on Tuesday. Much thanks.

[brianzinn]

those 2 packages you made do look useful to be published!

[brianzinn]

@benallfree what is your dev environment - can you share how to setup from a clean environment? I removed the lock files and I needed to first build the packages (gasby-mdx-codesandbox, react-sandbox-viewer and react-babylonjs) before starting up gatsby.

1. I needed to add @types/node to gatsby-mdx-codesandbox packages for that to build.
2. I am getting error from emotion css tags:

Module build failed (from ../../node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: D:\github\react-babylonjs\packages\react-codesandbox-viewer\dist\index.js: Unterminated string constant. (109:8)

  107 | function _templateObject() {
  108 |     var data = $3uCUd$swchelpers.taggedTemplateLiteral([
> 109 |         "
      |         ^
  110 | \n              padding: 2;
  111 | \n              border-radius: 5px;
  112 | \n              padding-left: 10px;
    at Object._raise (D:\github\react-babylonjs\node_modules\@babel\parser\src\parser\error.js:147:45)
    at Object.raiseWithData (D:\github\react-babylonjs\node_modules\@babel\parser\src\parser\error.js:142:17)

[benallfree]

Sorry if I made a mistake, I wasn't ready for this to be merged yet. Unless you meant to anyway :)

[brianzinn]

oh 😄 I guess I should have checked out your branch first! I was eager to give it a try.. I'm on node 14.17.0, but can switch easy as I'm on a manager. I can also drop to linux if it's not windows friendly yet.

[benallfree]

I haven't tested on Windows, I'm on OS X but here's what I'm doing:

yarn

cd packages/gatsby-mdx-codesandbox
yarn watch

cd packages/react-codesandbox-viewer
yarn watch

cd packages/static
rm -rf .cache && yarn start

That should do it for you, but I'm having some trouble with the dev mode picking up changes. I will start a new branch and PR for further updates. I'll set it to draft mode so it's clear to NOT merge :D

[brianzinn]

@benallfree I can confirm it is just parcel and swc generating javascript that won't run (if I manually edit dist/index.js then everything is working 😄 ). looks like the emotion backticks (template literal) are not generating OK. Can you share what your index.js looks like - maybe the part above how the emotion css is transpiled? thanks.

[benallfree]

That is very odd indeed. I'm working on a new PR now, let's see if the problem persists. I'm on Node v14.18.2. You said you removed the lockfiles? What was the reason for that?

[brianzinn]

I think I tried with and without deleting the lock files. I’ll try again and with your node version later today.