Using a private repo with react-smooshpack? also why codemirror?

[jfmmm]

Hello!

I'm looking into eventually using this to have super awesome documentation for our SDK at work and started playing with it, but I'm facing the issue of trying to use in-house npm modules that are only available from a private npm repository (jfrog artifactory).

How could I use those modules?

I saw in the doc that there's a way to host the bundler yourself, but couldn't find anything on that anywhere. It says it's in the sandbox repo, but I only found the non react version of smooshpack there and nothing that looks like a server 🤔

Also a somewhat unrelated question. I saw that it use codemirror as an IDE. Why not Monaco like CodeSandbox does?

Thanks!

[SaraVieira]

Hey!

@garethx will come back to you about the other questions.

About the choice of editor, we use VSCode that uses Monaco, the only part we use codemirror is the embedded because it's lighter to load :)

[jfmmm]

Also is it possible to use .tgz just to play around? I saw it mentioned there for CodeSandbox, but can it work with react-smooshpack , how do you add the file to the SandpackProvider? 🤔
https://codesandbox.io/docs/custom-npm-registry#does-this-work-with-container-sandboxes

[garethx]

Ah, I see you found the custom npm registry support. That's currently only available within the CodeSandbox app, as part of the pilot, and hasn't yet been put into smooshpack although this is a possibility in the future.

[jfmmm]

So no way to load a custom module with sandpack right now? not even as a tgz or some hook that gets called with the module name when you are about to go fetch a package.json from cdnjs. If it's a package you have bundled with your app, you return its files as a [path: string]: IFile object. It parses the package.json and fetches the public dependencies it has.

I only have maybe 7-8 private packages I need. I would be fine with packaging them in a webpack bundle and use require.context() to feed them to sandpack.

[jfmmm]

Also, I found this repo -> https://github.com/codesandbox/dependency-packager

Can I just run this on a lambdas and pass the URL to the bundlerURL param of the SandpackProvider? or am I misreading the purpose of this repo? 🤔

[alexnm]

Hey @jfmmm!

Alex here, I'm working on react-smooshpack, which is in a middle of a major rewrite/reconversion and will be available as react-sandpack in a few weeks. there's an alpha version you can test (https://www.npmjs.com/package/react-smooshpack/v/1.0.0-alpha-14), but it still experimental.

To answer your questions:

• both sandpack (the bundler manager) and react-sandpack (the react components built on top) will be available in a new repository soon.
• for now, react-sandpack uses codemirror but we're looking into having monaco as an option as well
• with react-sandpack, you will be able to customize your browser bundling experience entirely, you can use the high level presets in the package, or you can built your custom sandpack component and/or your custom individual components, like your own code editor that taps into the sandpack context.

Hope I answered some of your questions

[jfmmm]

For anyone looking to use a private dependency, there seems to now be some basic support for it. Haven't tested yet if it satisfies our needs.

https://sandpack.codesandbox.io/docs/faq#how-to-load-local-or-private-dependencies