solidjs / solid-playground Goto Github PK

Bug description

When you use console.log with a coma to have multiple args the coma is also displayed in the logs.

Possible solution

I just quickly watched the code and it seems to happen because there is no parsing done to remove ,
The args are just a string

Other related Issue

It would be a good idea to patch this together with #31

Playground link

Playground

I've been adding more and more feature in the header which eventually led to the playground not properly fitting on mobile. You can see on the screenshot below that the header is a bit jammed because there's too much content.

It'd be cool to fix these silly responsive issues. Perhaps hiding some buttons on mobile or making that area scrollable. That'd be the easy path. The harder path would be to hide those features in a dropdown or a sidebar of some sort (that would only be displayed on mobile). The tricky part is making all of this accessible which is always something that I try to keep in mind.

Describe the bug

The dark mode does not apply to result.

Steps to reproduce

Solid Playground link: https://playground.solidjs.com/?hash=-596780144&version=1.1.0

Observed behavior

The dark mode is not applied to Result.

Screenshot: Light mode

Screenshot: Dark mode

Expected behavior

Dark mode should apply to contents in the result too.

Additional context

First pointed out in Discord https://discord.com/channels/722131463138705510/722167449251741798/874957933346193469

Is your feature request related to a problem? Please describe.

If the Operating System has set up dark mode, the playground website does not enable dark mode by default.

Screenshot of first pageload with Operating System in dark theme

Describe the solution you'd like

Set up theme based on value in prefers-color-scheme media query.

If you add some code and then compile. And then edit that code and compile again it keeps adding the new results to the top but keeps the previous compilation results in the output window. I would expect the new results to replace the previous results.

Feature Request..
Allow component files to be loaded and renamed automatically in a new tab when user drags and drop file(s) into the playground editor..

Also button to import them either in json format or file format (Level.jsx) in the nav menu should be nice 🙂..

Bonus.. Allow multiple files being dragged into code playground to be treated the same.. loaded automatically and renamed by their original component file names eg(Root.jsx)..

Today I've seen this error popup in the playground, when using Array.prototype.includes().

Is the typescript setup correctly?

Is your feature request related to a problem? Please describe.

The format script is not run during build/precommit stage, so it might get missed.
For example #49

Describe the solution you'd like

• Run format as a prebuild step.
• Run prettier on precommit

At the moment the left and right pane are resizable on desktop view via a simple drag and drop mechanism base on mouseDown, mouseUp and mouseMove events. It woks by updating a CSS variable that dictate the width of the grids columns.

The logic is visible here: https://github.com/ryansolid/solid-playground/blob/master/src/app.tsx#L121-L141

On mobile the panes are stacked vertically and I manually disabled the resizing. It'd be cool to be able to apply a similar logic for vertical resize.

this could be mitigated with a run button along with an option to not automatically run on code changes (similar to codepen).

I'd love to have a refresh button above the preview pane which would essentially refresh the iframe and clear the console.

The playground stopped working for me in Firefox (both stable and beta). Earlier today I've been prototyping on the playground without any issues, but as of tonight the playground seems broken. Chromium based browsers still seem to be working correctly. This happens immediately to the default sample of the playground.

To reproduce, simply open the playground in the stable or beta release of Firefox and open the devtools console. Errors will be logged and no content is show in the result pane of the playground.

Please find attached the devtools console output:
console-export-2021-4-21_21-5-23.txt

When iframe is focused, using zoom keyboard shortcuts will use the native browser page zoom instead of the custom one.

To fix this I need to add the keyup event, which triggers the custom zoom, to the iframe content body. It needs to added every time the iframe result gets refreshed.

I was going through the tutorial and found this buggy interaction between the Reset/Solve button and Playground.

Investigated it in solidjs/solid-site but it seems like the issue might be the Playground itself. I wanted to poke around some more but was hoping for some direction of what would be causing this issue.

Right now the output is the file that is generated by rollup (with the imports having been changed to skypack and then back to regular imports). Instead, we might consider taking inspiration from the svelte repl and showing the babel compiled version of the currently active tab or actually displaying the skypack imports so that we can show the actual code that is run.

Context

At the moment 100% of the shared playground are store in a Cloudflare KV store.
We would like to slowly transition away from that and store it on our own infrastructure based on Supabase.
The first part to do that is to implement authentication which would allow to save the REPL.

User Stories

• As an unauthenticated user, I load the playground page and click the "Sign In" button. I then proceed to authorize Github to communicate my information and I'm redirected to the playground. I see my username, indicating that the connexion is indeed made between the playground and my Solid account.

Functional rules

Technical details

• We can largely inspire ourselves from the work that's been done over on the solid-hack repository: https://github.com/solidjs/solidhack/blob/main/src/pages/Submissions.tsx#L375-L380
• The API repository with the documentation that comes with it is located here: https://github.com/solidjs/solid-service-api
• The API is hosted here: https://api.solidjs.com

Title: Double increment upon version change
Note: Possible bug in playground (not sure)

Steps:

1. On Solid JS - Playground, goto counter Example,
2. as soon as the HTML button is visible, change the version of Solid JS,
3. Click the Counter Button to observe double increments (increment by 2)

Expected:
After changing the version of SolidJS on Playground, the button should increment by 1

It'd be nice to be able to use solid-styled-jsx in the editor.

Maybe there can be an option for it. More generally (merits a new issue) there could be an option system.

Shifting compilation from online to client side is very crucial..
Otherwise it makes the PWA app useless...

Please allow the Service worker to handle compilation offline on the Client side once the resources are loaded..

Bottom header bar got removed or not visible. It contained formatter icon, when clicking it formatted/prettied code. Also I can't seem find it in the source code, did it get removed? I looked through all imports of solid-heroicons and only see icons that are found at top header and right panel.

As of today the compilation of the JSX to JS happens as you type it with a debounced function of 250ms.

Watching people code in real time, this can be annoying because it yells errors all around before you are done typing.
One thing I'd like to see is an option to toggle automatic compilation and have a button to manually compile it.

Additionally what would be good is if we'd have a customized delay for the debounce function if automatic compilation is on.

• Download as zip (@modderme123)
• Export to Github
• Export to Stackblitz

The log console in the REPL scrolls as expected in the playground, but does not scroll on the website (tutorial), instead it overflows hidden offscreen.

I tried to update the monaco-editor dependency to the latest (0.31.1) but it seems to break the custom typings we setup in the setupSolid.tsx file.

I did check their CHANGELOG.md but couldn't really pin point.

If anyone is willing to investigate, I'd be more than grateful, this stuff is way beyond me.

(cc @modderme123)

Congrats on version 1.0.0 release.

I would like to present two scenarios:

1. On Solid JS - Playground, the button text does not get updated until mouse is moved. This happens once every couple of button clicks.
2. I tried the same code on CSB using the link on Playground itself, used TAB key on keyboard to focus on the HTML button object in ouput window, pressed SPACEBAR few times (while mouse pointer was outside the button), and observed the same behaviour as on playground.

Is this behaviour by design or bug in implementation code?

Is your feature request related to a problem? Please describe.

While working on the dark mode in the following PRs, I noticed that lot of props are passed around.

• #54
• #56

Should there be a central store for these signals, so that they're not required to be passed between components?
PR for an attempt to create a store for dark signal in #57

Describe the solution you'd like

A better project structure where all TypeScript code is under src folder, and there's a central store from which values can be read.

Describe alternatives you've considered

Keep passing values of signals between components as props.

In order to make the playground as easy as possible for people to share bug repro, we early on made sure TSX was supported (although everything is stripped away via @babel/preset-typescript).

Later on we switched from codemirror to monaco editor which added real time feedback related to typescript.

The issue is, due to the fact we use a virtual file system, some types doesn't work properly and may come in as annoying. Unfortunately, as of today there's no way to disable that at the monaco editor level.

That being said, adding a // @ts-nocheck at the top of the file do exactly that. Types still work as intended but they do not yell an error if there's some missing types.

I'd like to see a button to toggle that comment automatically while we look for a better solution.

Seems the playground is behind the latest tagged version (1.3.14).

Is the upgrade here manual?

I'd really love the ability to include Solid REPL in Solid Site's SSR process. Unfortunately Monaco introduces side-effects when I attempt to do so. You can experience this on https://github.com/solidjs/solid-site/tree/solid-start-migration. A solution discussed on Discord is to lazy load Monaco itself but that might apparently pose some trouble for the top-level await.

Either way it would be really nice to get support for this. I'm hoping someone has some spare time to sink their teeth into it.

Thanks!

I just cloned the repository, and it took a while because it weighs close to 300MB.
I realise that this is due to yarn v2 zero-installs. The tradeoff is that, for a larger repo, we don't waste time installing dependencies.
However, since the switch to pnpm, we are now getting the downside of yarn v2 zero-installs without the upside.

Would you be keen on scrubbing the git history for the .yarn folder in order to reduce the size of the repository?
This is likely to affect the whole history and will require a push --force, so currently cloned repositories won't mesh well.
However, if this is to be done at some point, then the earlier the better.

I can provide a script to perform the operation if you welcome it.

It'd be nice if the playground intercepted console.count/time/timeEnd calls too.

The issue can be observed when user picks one of the examples that have a css file included, switches to tab with CSS, and then picks another example which also has a css file in it. The tab changes to main.tsx for the second example, but in it are the contents of css file of that example.

Context

At the moment 100% of the shared playground are store in a Cloudflare KV store.
That means that every REPL that's being shared are anonymous.
The issue is that people can't get a list of all of their REPL.
Implementing the Solid account strategy would allow us and our users to bypass this limitation.

User Stories

• As an authenticated user, when I load the playground, a modal with a list of all of my REPL is displayed, I can either pick one which loads the code or create a new one.

Functional rules

Technical details

• We could totally inspire ourselves from existing sandbox websites: codesandbox, codepen, stackblitz, etc.
• We can list the REPL of a user via the following endpoint: https://github.com/solidjs/solid-service-api#list-get-repllimitoffsetasc
• The API repository with the documentation that comes with it is located here: https://github.com/solidjs/solid-service-api
• The API is hosted here: https://api.solidjs.com

Often time you want to have a simple setup that's already made, especially for the style. Or you want to reproduce a very specific case with weird metadata.

Maybe this could be part of the settings page mentioned in #15 but I'd like to have stupid simple way of just writing links, metadata and script to the iframe.

This would probably be just a text area for head and one for footer than we would then read and inject in the iframe code.

In order to showcase Solid's output and capabilities, it's often interesting to log stuff in the console.

One thing that'd be really nice is that the virtual console would be able to show a bit more complex types such as dom elements, proxies, deep object, etc..

At the moment, the styles are custom made (and to be totally transparent, mostly copied from svelte REPL) in combination with the tailwind typography plugin, but doesn't always play nice I feel like. Especially when it comes to dark theme.

The default can be viewed here: https://github.com/solidui/solid-playground/blob/master/src/components/preview.tsx#L52-L94

We could either craft our own stuff completely or we could just rely on some sort of reset css. Or maybe both. I don't have a strong opinion other than the fact that I really enjoy tailwind styles.

I'm open for any feedback or even PR to improve on what already exists.

Describe the bug
Custom directives (use:something) work in the playground, but exporting this to codesanbox produces compilation errors

To Reproduce
Create a custom directive in the playground
export to codesanbox with button in toolbar

Expected behavior
Playground should behave the same once exported to codesandbox.
Custom directives should work in codesandbox

Reproduction
Playground reproduction
Codesandbox reproduction

Context

At the moment 100% of the shared playground are store in a Cloudflare KV store.
That means that every REPL that's being shared are anonymous.
The issue is that people can't get a list of all of their REPL.
Implementing the Solid account strategy would allow us and our users to bypass this limitation.

User Stories

• As an authenticated user, when I'm done with my REPL, I can click on the save button which saves the REPL and copy the URL of this REPL in my clipboard.

Functional rules

Technical details

We'll need to detect whether the REPL is a new one or an existing one.

• We can save a new REPL of a user via the following endpoint: https://github.com/solidjs/solid-service-api#create-post-repl
• We can update a REPL of a user via the following endpoint: https://github.com/solidjs/solid-service-api#update-put-replid
• The API repository with the documentation that comes with it is located here: https://github.com/solidjs/solid-service-api
• The API is hosted here: https://api.solidjs.com

When using the JSON data loading via URL, specifying a CSS file and content are interpreted as typescript files.

This should be a really trivial change here:

Currently, console.log(x) gets mapped console.log(JSON.stringify(x)). This has completely different reactive behavior in Solid if x is a Store or Mutable; it tracks all of x's contents instead of nothing at all. It's come up a couple of times on Discord as making code hard to debug/reproduce errors, as it doesn't match native console.log.

This should be easy to fix by wrapping formatArgs (or the call to JSON.stringify) in untrack. The only potentially tricky part is making sure you have the same SolidJS that's the code itself is using; but maybe you've solved that problem already?

Would it be possible to activate TypeScript strict mode on the Solid Playground?
It's completely confusing to work with TypeScript in non-strict mode (especially if you do not notice that you ARE in non-strict mode 😉). Thanks a lot in advance.

I wanted to play and learn with solidjs, and the first thing was like "what does an App do, it routes. Yeah SPAs, they route". So I found this lib but to my chagrin the playground doesn't have anything like what some others do by giving an interface to install. I can just play locally tho. I guess I could just switch to codesandbox... Why don't we just use a pre configured/forkable codesandbox with solidjs in it? Then this would be moot!

Very interested in solidjs.... keep it up friend.

When writing code in the REPL/playground, it seems that the result panel is not always updated properly. In particular, when following this tutorial, the effect never runs. Switching to the output tab, and then back to the result tab causes the repl to refresh, and the effect runs as expected. There is probably some issue with the repl refreshing, perhaps when it hits an error during an intermediate compilation phase.

A stopgap would be to provide a button to rerun the REPL. This would also be of general utility, in case someone wishes to reset the state in the REPL.

Discord report/discussion.

Codemirror has better mobile support than the Monaco editor with v6 now..

Consider Testing it out and switch from Monaco to Codemirror if all works out good ..

I'm among those people that prefer larger coding fonts but that would feel selfish to impose that to every user as I feel like this is not so common.

What I'd like to see is a gear icon somewhere that would introduce a setting page that would be store locally (either via localstorage or indexdb with idb-keyval for example).

I'm sure this feature could also introduce a lot more personalisation without going full crazy and produce a poor man version of codesandbox.

Here are a couple of things that I have in mind as I write this:

• font size
• coding font
• dark/light mode (already exists, just need to move the location)
• minimap or not (easily switchable today)
• default vue (code or output), I know some people like Ryan tends to look a lot at the output tab rather than the iframe.

If Possible, after running code in the playground, users should be given the export(download) button and be given the flexibility to choose whether they prefer their code in json format or a zip file containing the project's structured file and dependencies (in package.json file). This is installed easily with npm install..

Eg. After downloading the zip format of the code. Within the zip file should contain a similar project file/folder structure:

./node_modules
./public/
|
-favicon.ico
-index.html
-bundle.css
-index.js
./src/
|
-App.jsx
./package.json
./Readme.md

etc

Vite recently made a new release which handles workers import differently.

https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#workers-using-standard-syntax

I'd like to migrate to it so that we don't fall behind too much with direct dependency.

In testing Solid Bootstrap, it'd be really nice to be able to include the Bootstrap CSS in the output. Two natural interfaces:

• Button for adding CSS by URL
• import the CSS URL in main.ts. Several build processes support this, and the CSS is already available from NPM and via skypack so this would be especially convenient.

Happy to discuss/brainstorm further, here or in Discord, but wanted to write down this request, having needed it a couple times this week.