search

solidjs / solid-playground

Quickly discover what the solid compiler will generate from your JSX template
https://playground.solidjs.com
MIT License
193 stars 62 forks source link

An option to use solid-styled-jsx #69

Open trusktr opened 2 years ago

trusktr commented 2 years ago

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.

amoutonbrady commented 2 years ago

Hey! That could be an idea yeah.

I'd need to check how it works properly and see if we can run it in the browser. Right off the bat, I'm seeing that it doesn't support SSR but we do have a SSR preview... I'd need to see how those play together.

Out of curiosity, what problem does it solves for you? :)

trusktr commented 2 years ago

Out of curiosity, what problem does it solves for you? :)

About solid-styled-jsx specifically, it would let us write scoped styles in JSX in the playground, like so:

return <>
  <div ...>...</div>
  <style jsx> div {color: deeppink} </style>
</>

And this div style would apply only to the div in that markup.

As for options, that'd be handy. One problem is that Solid TypeScript is written with strict:true, but having strict:false in playground makes it inconsistent if you are trying to experience how types work (rather than trying to write plain JS).

More generally, it'd be nice if playground started with .jsx files, then an option would turn on TS mode with .tsx files and strict by default to match the environment Solid types were designed for (in strict false mode, some of Solid's types don't work as expected and always return any, which is something we recently fixed in Solid 1.3 with respect to effect APIs).

trusktr commented 2 years ago

The desire for this comes from having such features in Vue, for example, and wanting to migrate code from Vue to Solid. I would rather not use style attributes, but CSS including all it's features like selectors and the cascade.

milomg commented 2 years ago

solid-styled-jsx requires a babel plugin, but solid-styled-components might be an alternative that doesn't? https://playground.solidjs.com/?hash=1975487650&version=1.2.6

ryansolid commented 2 years ago

I think this a precursor to people wanting other babel plugins etc.. On the fence a bit since requires more work/interface and ties things to babel. It is convenient to have a style solution like this but Vue and Svelte also have official solutions.

ndrean commented 1 year ago

Thanks for the playground. Is it planed to support solid-styled-components ?