codesandbox / codesandbox-client Goto Github PK
View Code? Open in Web Editor NEWAn online IDE for rapid web development
Home Page: https://codesandbox.io
License: Other
An online IDE for rapid web development
Home Page: https://codesandbox.io
License: Other
I'd love to share this platform with people I know (some of whom are not native English speakers). Any thoughts on using react-intl or a platform like transifex (free for OSS) for translations?
I noticed that if you remove the react
and react-dom
deps no error message appears but the output remains frozen.
Show error message when this happens or make these 2 packages mandatory dependencies.
I can't see a way to do this currently. Example:
I want to directly link /topics/props-v-state
for the react-router example https://codesandbox.io/s/r0wXp0Njw
Same thing for URL parameters, I want to pass external data to a sandbox via an URL parameter, but that doesn't seem possible currently.
I'm assuming this is not implemented right now because getSandboxOptions seems to be used to pass external data to the sandbox, and that doesn't contain a parameter for the initial path.
Adding this would make this project very useful for me, right now I have to use codepen.io which allows reading external URL parameters (and thus passing data to a snippet) but has many other limitations. Thanks!
In the list view, show if a sandbox is private, hidden, or public (default). Maybe show a lock icon for private. Hidden... not sure.
Suggestion by jschr:
"Actually I do have one suggestion. It would be awesome to be able to link to a specific file and even line number so I can direct the reader to the appropriate spot when clicking on the "Edit on CodeSandbox" from an embed. You could take a page from Gist and do something like https://codesandbox.io/s/[id]#file-[filename]-L[linenumber].
This would allow me to link to specific areas of the code as I'm writing up a tutorial or post."
A highly visible tweet button that allows users to share the sandbox.
Perhaps near the view/heart/fork counts.
I am getting the below error when I try to start a local instance
Error in ./~/prettier/src/parser-typescript.js
Module not found: Error: Can't resolve 'fs' in '/home/varunkumar/tmp/codesandbox-client/node_modules/prettier/src'
@ ./~/prettier/src/parser-typescript.js 1:17303-17316
@ ./~/prettier/index.js
@ ./src/app/utils/codemirror/prettify.js
@ ./src/app/components/sandbox/CodeEditor/index.js
@ ./src/embed/components/Content.js
@ ./src/embed/App.js
@ ./src/embed/index.js
@ multi react-hot-loader/patch webpack-dev-server/client?/ webpack/hot/only-dev-server ./config/polyfills.js ./src/embed/index.js
Error in ./~/prettier/src/parser-typescript.js
Module not found: Error: Can't resolve 'module' in '/home/varunkumar/tmp/codesandbox-client/node_modules/prettier/src'
@ ./~/prettier/src/parser-typescript.js 1:17457-17474
@ ./~/prettier/index.js
@ ./src/app/utils/codemirror/prettify.js
@ ./src/app/components/sandbox/CodeEditor/index.js
@ ./src/embed/components/Content.js
@ ./src/embed/App.js
@ ./src/embed/index.js
@ multi react-hot-loader/patch webpack-dev-server/client?/ webpack/hot/only-dev-server ./config/polyfills.js ./src/embed/index.js
The instance is coming up fine though. Issue seems to be similar to prettier/prettier#986
Something is wrong trying to access this url
https://codesandbox.io/s/new
Error:
bootstrap f260dcf…:54 Uncaught TypeError: Cannot read property 'call' of undefined
at t (bootstrap f260dcf…:54)
at Object.0 (app.f260dcff.js:29627)
at t (bootstrap f260dcf…:54)
at window.webpackJsonp (bootstrap f260dcf…:25)
at app.f260dcff.js:1
Google Chrome Version 59.0.3071.115
The application gets freezed on this screen
when i was first trying to figure out how to paste a full on iframe embed to Medium, I couldn't get it to work. Try it:
https://codesandbox.io/s/github/faceyspacey/redux-first-router-codesandbox
Then i realized only forks with proper IDs have this feature working.
Also, links to this sort of URL with module IDs you want opened in the editor do not open with that file.
An option to have a horizontal split over the vertical split.
Ideally module IDs stay the same once created. Not sure how they are determined, but if it's based on file-content, that shouldn't be the case either. It seems every single module ID name changes whenever you update the sandbox.
For example, the 2 links on the homepage (and all my articles) don't correctly deep-link anymore after making some updates.
When you click the ➕ to create a new sandbox, have a popup menu appear asking: "Create: Public, Private, or Hidden".
I would like to incorporate sandboxes as live examples in redux-saga, but as those were not generated by CRA, I'm not 100% sure what are the exact requirements.
Would be great if the list of requirements would be listed in the main README.
When a sandbox has an endless loop it won't stop executing until the tab kills the editor. This means that users can lose their sandbox.
Maybe there is a way to limit execution time of a sandbox, or maybe we should add a 'Run' button when you're editing your own sandbox. Would love to hear some thoughts.
Would be nice to have a small badge image, so we can use it to link from the readme on the repo to its sandbox.
I've had some requests for emmet.io support. This should be possible with https://github.com/emmetio/codemirror.
This one should be easy to do, I found out that create-react-app does support the jsx
extension. We should update the sandbox to handle these cases.
All the code for this resides in src/sandbox/
, if you'd search for js
you'll find where we check for the extension.
I believe all logic is in src/sandbox/eval/js/index.js
and src/sandbox/utils/resolve-module.js
.
I think it would be incredibly useful and save you from having to build lots of features if, for example, users could embed their own chatbox iframe in a sidebar WorkspaceItem.
I'd like to put chat in, and perhaps other things like a youtube video iframe, and wouldn't have to request these features if I could embed things somewhere.
Another place is your own modal where you can do all sorts of things, like provide pretty documentation, videos, etc.
I'm not sure which is the better/higher_priority of the 2 options. I'm leaning toward the drawer item, and an ability to specify which item is opened by default in the URL params--this way you can guarantee users see it, whereas a modal requires clicking something and many users might never see it. To me, that's the driving factor, and perhaps why the drawer item is the better place to start.
But from an implementation point of view, a modal is easier to develop. So you could just put a "more info" link in the sidebar for users that have decided to create such a page. It pops up in a modal and has 2 tabs: "Write" and "Preview" just like a github comment/issue. It's basically the "Talk" section of a wikipedia article.
If this stuff is done correctly, it will become a highly used feature of Sandboxes, just like readmes on github. I think the trick is to make it feel like a readme, so it's familiar, and therefore likely to be used more. ...but it needs to be better than a readme. Iframe embeds need to be allowed basically. And support for more custom styles. And you should be able to develop it in React, not markdown! ...by the way, i think u should rename to React Sandbox or similar. Do you support Vue and Angular. Rename again once u have those areas tamed. Better to do one thing really well. Explode in popularity because of it, and then expand. But I'm sure u have other plans, especially if u already put the work to support Vue etc.
Wanna know something funny, both our repos are at exactly 274 stars as of this writing:
to display the forks, probably a modal makes the most sense and is the easiest.
It's currently 30. What about 60?
all these apps are just starting on the entry point. i think the app should run based on the entry point (index.js) even if u deep link into a module u want showing in the editor. my 2 cents.
Clicking on the title of a column in my profile page will sort the list of sandboxes by that column. Currently, they are sorted by creation date (?).
check it:
https://medium.com/faceyspacey/redux-first-router-lookin-sexy-on-code-sandbox-d9d9bea15053
open the sidebar. try to view a file.
Show tags under each title on my profile page. Allow me to filter by tag.
Allow the user to delete one of their sandboxes from their Profile/Sandboxes page. Either on hover, hamburger menu, or static icon. We probably want a confirmation as well, warning the user that: "This action is permanent and can not be undone! Are you sure?"
Also allow the user to change the state without having to open the sandbox. Simular to the delete option.
My project at https://codesandbox.io/s/Q5AE9vG0 works fine in Chrome, but shows this error in Firefox:
Error in index.js: TypeError: CSS2Properties doesn't have an indexed property setter for '0'
.
I removed the inline styling of the App's root-div element. Maybe it has something to do with that?
First off, excellent stuff. I think I've written this to you in like 4 places now.
I'm going to create a sandbox for Redux-First Router. There's just one problem, and I'm sure you know it: the store resets again when you type anything.
I'd be interested to know how you built "instant preview." It's fantastic. Let's figure out how to make it support more use-cases. Do we need a module.hot
api?
Jupyter like preview of .md
files where code blocks are actually evaluated as 'mini modules'.
Hi!
Is it possible to include .scss files in the codesandbox-client and import the styles to our jsx files?
For example, go here:
https://codesandbox.io/u/faceyspacey/likes
You will see my main codesandbox there, but it does not appear here:
https://codesandbox.io/u/faceyspacey/sandboxes
and also it cannot be selected as for "showcase."
Hello Ives,
First of all, thanks for the great work, I love how easy is to create React live samples with this app.
More than an issue is an enhancement request actually. Right now if I create a new sandbox and then go back to it later that day, I have to set up all the preferences again, such as autocomplete, line height, prettier settings, etc. It would be nice to either saver those for each sandbox or create a general preferences for the account that could be fetched whenever the user creates/loads a sandbox.
Although I'm in no hurry about it, I can live with setting everything by hand for now.
Best,
Rodrigo.
Currently the DevTools defaults to the React version of CodeSandbox, it should default to the sandbox.
I'm seeing this issue for all embedded sandboxes, as an example you can checkout Formik Example.
Editing the sandbox results in the changes being reflected in the Preview view but not in the Editor view.
I guess this isn't supported. Is it something that can be supported. You'd figure if it works in CRA it works here. Thoughts?
CodeSandbox is used by a lot of users in China and Russia, I think it'll be very valuable to have an i18n system in place that people could contribute to.
This will make CodeSandbox much more accessible.
Thinks that need to happen:
localStorage
for now using preferences reducert()
callsen.json
What I'm doing is deleting a dependency, and then adding it right back @next
. You can do things to try trigger it to be used like flipping our favorite module/project switch, but you have to refresh.
In general, the loading dependencies
UI elements are not quite in sync with when it's really ready.
It's a small edge case, but at some point deleting/editing/re-adding deps is something you're gonna wanna polish.
Basically I suggest that when this shows:
this will show if you do various things such as toggle the module/project view switch.
And then when it's truly done loading, it refreshes the iframe. There is also an issue with the package appearing in the dll
bundle. So even if you just refresh a package (instead of doing the fancy thing I do where I'm switching dist-tag
), it won't work, and you'll need to refresh the page.
Refreshing the page automatically for the user (provided there is complete loading indicators) may be a fine stop-gap solution to get this done quicker. Although obviously the ideal solution, is just the inner iframe refreshes (while keeping the same URL it was on).
First of all, really cool stuff. I first learned about codesandbox from styled-components
issue template. I'm impressed with it, great job @CompuIves!
I want to replace Grommet base codepen with codesandbox. I like that I can use imports and have a structure that is very close to my local environment.
Our codepen today is used to test things in a branch called "stable" that is updated multiple times a day after CI passes in the master branch. I understand that I can use "External Resources" and add the minified css and js available here.
But I wondering if there is a way to specify the branch in the version for the" Dependency" section. Something similar to this package.json here.
When I add https://github.com/grommet/grommet/tarball/stable
as the version for a package, I get an error in codesandbox.
Thoughts?
Currently, CodeSandbox fails to import the history
package even if it is an imported dependency.
Demo: https://codesandbox.io/s/wpRWxgNxz
This is not an issue for projects that have implicit history
dependencies, such as React Router v4 (https://codesandbox.io/s/r0wXp0Njw).
If I go to https://codesandbox.io/s/github and enter http://github.com/test/123
it output a sandbox URL of https://codesandbox.iohttp://github.com/test/123
(or https://www.github.com/test/123
) it outputs something like https://codesandbox.iohttps://www.github.com/test/123
.
Should be a relatively uncommon edge case if people are copy + pasting GH URLs directly from their browser into the page.
I'm happy to take a look at fixing this :)
We're moving more and more to touch devices, CodeSandbox is in the unique position that it already works on any device.
Let's make CodeSandbox responsive and start brainstorming on React Native support.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.