Codesandbox-client: Support publishing sandbox as npm package

[viankakrisna]

maybe it's better to work on this after https://github.com/CompuIves/codesandbox-client/issues/204

It would be nice if we can publish current sandbox as npm packages, so we can do package maintenance without ever cloning it locally. 😁

[wmhilton]

How dare you publish something to npm without unit tests! :grin: Or wait... it's been a few days since I played in the CodeSandbox, it probably has test runners built in by now. :P

On a more serious note, I think this is something that should be carefully added at the starter template level. That way you could define and follow best practices for publishing React/Vue/etc components. And so that if you export the project from CodeSandbox you still have the publishing script.

[CompuIves]

This is pretty funny, CodeSandbox was initially built for exactly this purpose. Create components and share them with others so you can easily build projects together. I still have the code lying around that publishes a sandbox to our own npm registry (even with the UI code for it!), so we're not that far from that feature as you thought 😉 . It's just disabled currently.

I've done some thinking on this already. We need to make a distinction between 'library' sandboxes and 'project' sandboxes. You can convert a project sandbox to a library, but not the other way around. Then others can easily import your library by opening a modal and searching for eg. 'Button'.

This is a really cool feature btw, you can deploy to NPM or to the registry of CodeSandbox. With this feature you can see CodeSandbox as one big library for thousands of components, easily searchable and forkable.

[wmhilton]

We need to make a distinction between 'library' sandboxes and 'project' sandboxes.

I wish that npm had made that distinction. 😢 Drives me nuts the way it mixes libraries with applications.

That's really cool. I like the idea, and I'm even OK with CodeSandbox being a separate registry... just think through the namespacing thing carefully. I'm optimistic that once import is set in stone we'll see a lot more of require("https://full-path.to/a/module") or some kind of official "module manifest" that codifies how to resolve require("a-module") but until then there's the great implicit namespace monopoly that "all modules live on npm" - which is actually incredibly convenient and productive.

[viankakrisna]

@CompuIves nice! This would be really cool when #204 done. @wmhilton idea to run unit test in codesandbox is also cool, is it possible?

This is a really cool feature btw, you can deploy to NPM or to the registry of CodeSandbox. With this feature you can see CodeSandbox as one big library for thousands of components, easily searchable and forkable.

Would it also be accessible via npm? eg @codesandbox-username/library-name. I think creating a separate registry for codesandbox wouldn't be nice for downloaded projects CMIIW

[CompuIves]

Would it also be accessible via npm? eg @codesandbox-username/library-name. I think creating a separate registry for codesandbox wouldn't be nice for downloaded projects CMIIW

Yes, it would be available for downloaded projects 😄 . We create a file that let's npm know to resolve all @codesandbox namespaces to our registry. But I wasn't yet 100% sure on this flow though.

[viankakrisna]

@CompuIves I think we can use https://github.com/insin/nwb#react-components-and-libraries as a template for npm libraries.

As for the flow for publishing it, I also not sure. Usually, my flow is like this:

• update the version in package.json and create the tags (this is usually npm version patch|minor|major)
• push it to the git repo
• publish to npm

I think this feature should only be available if the sandbox has a backing GitHub repo, also, is it possible to connect our npm user to codesandbox?

[mDibyo]

On a more serious note, I think this is something that should be carefully added at the starter template level. That way you could define and follow best practices for publishing React/Vue/etc components. And so that if you export the project from CodeSandbox you still have the publishing script.

If we are gonna make a distinction between "library" sandboxes and "project" sandboxes, we could use create-react-library for "library" sandboxes in React (https://github.com/transitive-bullshit/create-react-library). I tried it out recently and really like how easy the project makes it to work with a library and its example. It currently requires two compilation processes though, one for the library and one for the example, but seems like it could easily be just one.

EDIT: One problem with the library is that dependencies haven't been updated in a long time.

[github-actions[bot]]

This issue is stale because it has been open many days with no activity. It will be closed soon unless the stale label is removed or a comment is made.

[github-actions[bot]]

This issue has been automatically closed because there wasn't any activity after the previous notice or the stale label wasn't removed.