aylosrd / reactplayground Goto Github PK

Add loader (in button? mouse icon?) when async tasks are ongoing, (e.g. downloading project, or generating Stackblitz/CodeSandbox)

Add a button in the navbar that opens in a new tab this github issues page. Github icon.

It should be possible to add css files too (and additionally js) other than jsx.
Possible side effects to monitor in the download and export flow.

Enable fullscreen mode, using fullscreen API, with new icon.
Doc: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Index the playground on Google adding the tag

Use stackblitz's SDK to export reactplayground to stackblitz.

Doc here and here.

Will need to turn entry point name to index.js

Need to create a download button, that generates a whole folder with a vite-react initialized project, including npm packages used in the playground and file structure.

Add new console, could be:

1. eruda, although couldn't make it work last time
2. console-feed.

BONUS: find a way to run React Developers tools.

Should add a button allowing to export the code to CodeSandbox

When opening reactplayground from a link for the first time in a browser, codemirror is showing a black page for App.js, we need either refresh the page, or open another codeMirror page in the text editor, for it to re-start working.

Couldn't identify the cause of such malfunction.

Add a button on the tabs bar that, when clicked, prettifies the current file. Use webworkers if possible.

Change CDN for imports, maybe try esm.sh

Add a css normaliser, either via cdn-hosted link, or a style tag with minimal css reset.

Improve CodeMirror autocompletion allowing suggestions of file names and React snippets.
Findout if possible and if so apply it.

Add README.md to explain basic functionalities

Need to move to Monaco Editor, as it will help passing to Typescript mode.
Monaco must have autoLineWrap enabled.

It's going to be diffucult because Monaco runs best on webpack, have to figure out a way

Add react developer tools to console.
Try to use this package: react-devtools-inline .
May need to upgrade to React 18.0.0

Editor not working on mobile. Maybe related to #20 .
Maybe replacing editor component with other CodeMirror lib would make it work ?

Explore possibility to get complete error message from react minified error code by fetching it from react website.
Eg.

Uncaught Error: Minified React error #300; visit https://reactjs.org/docs/error-decoder.html?invariant=300 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

When the hash is broken, (e.g. https://reactplayground.vercel.app/#N4IglgdgJgpgHgOgFYGcQC5wFsAOB7AJwBcACAQRxxIDMC8sSByBAegp2RTkYB0IxchUgCUYAQwDGpWvSYFxU3v0HESwEhPliiMYXjykAvjToNGWqQFoo9FhIA2YGBCJK+EvBBSkPLsZBgCEgBeEhsJAFcsZyIEAHMYIgBRexholwAhAE8ASSgACnN9VwBKd09vEjoDEI0tHT0DfN8ifwhAsohq2PloQPy+EhJRSVjNcR0UtJiBiCGhkakEAGUiAjApAFk8WAAaQfmICPt7fbn5xbH6mCn0onz2TqHOkpBdkHZOOAxsfFVL3ZqEgRFAwVbaGAkYwyMwWVx8AR-UjeLKpKAmWSMFFoyweQTtFwoNwQXyVdi1fIlEIAPjUB1JpAA2h4Ii5AaCiABhPCsogAXVqILBrR0+QADJ0DvIiBECHNZvMSAAeDIRIhETwkTycxwSADWwWAlJpJA53) page doesn't load and throws this error:

Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)

handle this type of errors, maybe with a try catch ?

The user should be able to choose between a ReactJS and ReactTS project.
Need to pass to Monaco Editor

Editor not working on mobile. Maybe related to #20 .
Maybe replacing editor component with other CodeMirror lib would make it work ?