codesandbox / codesandbox-client Goto Github PK

That stuff isn't showing in my repo. Only in forks, ie regular sandboxes

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 (?).

Jupyter like preview of .md files where code blocks are actually evaluated as 'mini modules'.

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.

I've had some requests for emmet.io support. This should be possible with https://github.com/emmetio/codemirror.

Currently the DevTools defaults to the React version of CodeSandbox, it should default to the sandbox.

It's currently 30. What about 60?

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.

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?

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 :)

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."

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).

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 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:

https://github.com/faceyspacey/redux-first-router

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?

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

check it:

https://medium.com/faceyspacey/redux-first-router-lookin-sexy-on-code-sandbox-d9d9bea15053

open the sidebar. try to view a file.

I noticed that if you remove the react and react-dom deps no error message appears but the output remains frozen.

Solution:

Show error message when this happens or make these 2 packages mandatory dependencies.

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 also immediately 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).

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.

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 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!

An option to have a horizontal split over the vertical split.

Hi!
Is it possible to include .scss files in the codesandbox-client and import the styles to our jsx files?

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?

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.

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.

When in settings, the bar that resizes the file tree, and the editor, is shown above the modal. Seen here:

The modal had a z-index of 20. Bumping it up to 30 fixed it, as seen here:

I can put in a pull request on this tonight, let me know what you think!

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?"

Show tags under each title on my profile page. Allow me to filter by tag.

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?

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."

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?

to display the forks, probably a modal makes the most sense and is the easiest.

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.

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

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.

When you click the ➕ to create a new sandbox, have a popup menu appear asking: "Create: Public, Private, or Hidden".

In the list view, show if a sandbox is private, hidden, or public (default). Maybe show a lock icon for private. Hidden... not sure.

A highly visible tweet button that allows users to share the sandbox.

Perhaps near the view/heart/fork counts.

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:

• Change build system to use i18n-next
• Add a world icon to the header with a dropdown to select language, store preference in localStorage for now using preferences reducer
• Move all text to t() calls
• Move existing text to en.json

A console you can expand from the editor pane, should work both in embed view and editor view.

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.

Also allow the user to change the state without having to open the sandbox. Simular to the delete option.