SolidJS Support

[softmarshmallow]

Solid JS frameworks support

https://www.solidjs.com/

Codegen

https://www.solidjs.com/tutorial/bindings_style

Styling

inline-style

unlike react, solidjs uses the default css property name (kebab-case) with "" - "font-size" (react: fontSize)

<div style={{
  color: `rgb(${num()}, 180, ${num()})`,
  "font-weight": 800,
  "font-size": `${num()}px`}}
>
  Some Text
</div>

styled-components
Solid offers an official wrap of styled-components implementation of its own. - solid-styled-components

differences from react: styled-compoents are..

• use named imports (not default import)
• use call signature instead of property signature styled.div -> styled("div")
• has built-in css obj support -> import { css } from "solid-styled-components";

import { styled } from "solid-styled-components";

const Btn = styled("button")`
  border-radius: 4px;
`;

styled-jsx (by vercel) unofficial wrapper

https://github.com/solidjs/solid-styled-jsx

function Button() {
  const [isLoggedIn, login] = createSignal(false);
  return (
    <>
      <button className="button" onClick={() => login(!isLoggedIn())}>
        {isLoggedIn() ? "Log Out" : "Log In"}
      </button>
      <style jsx dynamic>
        {`
          .button {
            background-color: ${isLoggedIn() ? "blue" : "green"};
            color: white;
            padding: 20px;
            margin: 10px;
          }
        `}
      </style>
    </>
  );
}

States & Events

• creaeSignal (like useStaet in react)
• createEffect (like useEffect in react)

Lifecycles

• onmount
• oncleanup

Testing

• solid-jest (official) - https://github.com/solidjs/solid-jest

Unique Elements

• <For>
• <Show>
• <Switch>/<Match>
• <Index>
• <ErrorBoundary>
• <Suspense>
• <Dynamic>
• <Protal>

Special Attributes

• ref
• classList
• style
• on:x
• use:x
• prop:x
• attr:x
• /* @once */

Runtime & Env / Editor

WIP

• esbuild (use existing react compiler)
  • https://github.com/amoutonbrady/esbuild-plugin-solid
• vite for web (wasm)
  • https://github.com/solidjs/vite-plugin-solid
  • previewjs solidjs support - https://github.com/fwouts/previewjs
• remote compiler (custom)
• csb
• webpack
  • https://github.com/ryansolid/solid-ts-webpack
• solidjs polayground - https://github.com/solidjs/solid-playground
• eslint
  • https://github.com/joshwilsonvu/eslint-plugin-solid

tsx/jsx
https://www.solidjs.com/guides/typescript#configuring-typescript

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

Examples

• working examples
• realworld app examples (human written)

References

• solidjs api docs - https://www.solidjs.com/docs/latest/api
• solidjs official guides - https://www.solidjs.com/tutorial
• solidjs official playground repo (compiler) - https://github.com/solidjs/solid-playground
• previewjs supports solidjs - https://github.com/fwouts/previewjs

Resources

• emotion for solid (unofficial) - https://github.com/tqwewe/emotion-solid
• ui pack (unofficial) - https://github.com/pheggeseth/solid-ui
• icons
  • https://github.com/x64Bits/solid-icons
  • https://github.com/amoutonbrady/solid-heroicons

Note: Differences from react

• style object's key referencing - uses default kebab-case name
• uses default class attribute (no className) - to specify multiple, we can use classList (not found in react)
• ecosystem & libraries are premature, not external 3rd party libraries will be supported for styling capabilities
• styled-components only work with styled("div") like sytax (Why not support property access style usage? styled.div instead of styled("div") solidjs/solid-styled-components#28)