Add feature for useParse in myst-to-react to render mdast output Node

[GYHHAHA]

Currently, it seems that the content generated from useParse doesn't include the output cell. It's a good idea to implement the output node render feature which works like reduceOutputs in myst-cli. Or do we can any alternative for the output render? @rowanc1 Thanks!
https://github.com/executablebooks/myst-theme/blob/bd8556fc7f63e1933b01e5125e74ff2c503ed031/packages/myst-to-react/src/index.tsx#L48
https://github.com/executablebooks/mystjs/blob/bc466578af3c54341d4008755bb9d82f5ad28672/packages/myst-cli/src/transforms/outputs.ts#L66

[rowanc1]

The output renderer is brought in by the @myst-theme/jupyter package (here). We split them up as there are a lot of conflicts in packages when using this inside of jupyterlab-myst (i.e. we want to use jupyter natively in that case, not bring in a subset of the capabilities). The output renderer can be brought in directly if you are doing your own renderer using something like this and then use the theme-provider (here) or the useParse function directly to give you access to those renderers in react!

[rowanc1]

Awesome, glad that is working for you! There is also a function here that allows you to traverse a single page and dynamically update the links based on a CDN. I think that needs to likely be over in the mystjs repo in myst-common. If you look at the cdn-loader there are some other hints at how to dynamically load from a CDN (i.e. look up domain hostname --> CDN id, then load the content from a known CDN/bucket).

If your solution is even somewhat sharable, I would love to see your approach. In the next month or so we need to write up documentation for deployment. Deploying to an AWS bucket would be an awesome target!

[GYHHAHA]

Great, I will look them soon! However there is still one single step I'm still not satisfied: Since I need to import { processNotebook } from "myst-cli"; and I haven't find a correct way to do this inside the remix.js, which means I have to launch a separate child process to execute the node program on the compiled file from esbuild like your playground repo. Hope there is a nicer way in the future to do that!

[rowanc1]

Hm, generally the CLI isn't designed to be imported into remix, certainly not in the frontend code as it has file-system dependencies (and I think it might break the backend stuff as well). A quick check that might work, rename a utility to utils.server.ts (see remix docs) and do the processing in there, that forces their bundler to exclude it from client code. If that doesn't work, then we should aim to move the utility to something that can be imported in more places (e.g. myst-transforms).

[GYHHAHA]

Thanks, I will take a try for that.

[GYHHAHA]

The strategy that change file name to *.server.ts works perfectly. Thanks for let me know! @rowanc1 Now here is a quick demo for the jupyter output render.

12.04.2023_00.01.47_REC.mp4

I have another question: since the execution for notebook book is pretty slow, suppose I got 10 notebooks to render. After I click the start button, I want to know from the client side that how many notebooks are finished at the server side, should I use websocket tools like socket.io? Is there any better solution?