Why does this ToggleSwitch not work?

[Mqxx]

Hey, I am really new to SolidJS and I am currently trying to design my own ToggleSwitch.

That's my code so far:

import { type JSXElement, createSignal } from '@solid-js'

import './index.css'


export function ToggleSwitch() : JSXElement {

  const [state, setState] = createSignal(false);

  const toggle = () => {
    setState((v) => !v);
    console.log('State is now:', state());
  }

  return (
    <button
      type='button'
      class={`ui toggle-switch`}
      classList={{
        'toggle-switch--active': state()
      }}
      data-checked={state()}
      onClick={toggle}
    >
      {state() ? 'ON' : 'OFF'}
    </button>
  )
}

I was expecting this to work, but for some reason the component does not "rerender" and update the values on click. The onClick does get fired correctly and als the state() does update correctly as far as I can tell from the console.log('State is now:', state());. There I am getting an alternating:

State is now: true
State is now: false
State is now: true
...

But for some reason the component does not update and I don't get it why it does not work. Did I do something wrong? Maybe it's the way I am bundling my code? Currently I am using ESBuild in combination with Deno. This is the repository

Maybe someone can help me out 😉.
Thanks

[mdynnl]

solid uses jsx as a templating language and hence requires its own compiler pipeline which is babel only atm. community maintained esbuild plugin also exists and used here.

here's a working git diff (excluded `deno.lock`)

diff --git a/build/esbuild.ts b/build/esbuild.ts
index fc6ead5..f2b7684 100644
--- a/build/esbuild.ts
+++ b/build/esbuild.ts
@@ -4,6 +4,7 @@ import { bold, green, magenta } from '@std/fmt/colors';
 import { parseArgs } from '@std/cli/parse-args';
 import { copy as esbuildPluginCopy } from './plugins/copy.ts';
 import { denoPlugin as esbuildPluginDeno } from "@deno/esbuild-plugin";
+import { solidPlugin as esbuildPluginSolid } from 'esbuild-plugin-solid';
 import { transformScriptTags as esbuildPluginTransformScriptTags } from './plugins/transform_script_tags.ts';
 
 const args = parseArgs<{
@@ -37,8 +38,7 @@ const buildConfig : esbuild.BuildOptions = {
   format: 'esm',
   target: 'esnext',
   platform: 'browser',
-  jsx: 'automatic',
-  jsxImportSource: '@solid-js/h',
+  jsx: 'preserve',
   sourcemap: args.develop ? 'linked' : false,
   sourcesContent: true,
   outdir: './dist',
@@ -48,6 +48,11 @@ const buildConfig : esbuild.BuildOptions = {
     './src/render/index.tsx'
   ],
   plugins: [
+    esbuildPluginSolid({
+      solid: {
+        moduleName: '@solid-js/web',
+      }
+    }),
     esbuildPluginTransformScriptTags(),
     esbuildPluginDeno({
       preserveJsx: true,
diff --git a/deno.json b/deno.json
index cebf340..047def1 100644
--- a/deno.json
+++ b/deno.json
@@ -109,10 +109,11 @@
   "imports": {
     "@deno/esbuild-plugin": "jsr:@deno/esbuild-plugin@^1.2.0",
     "@esbuild": "npm:esbuild@^0.25.11",
-    "@solid-js": "npm:[email protected]",
+    "@solid-js": "npm:solid-js@^1.9.10",
     "@solid-js/router": "npm:@solidjs/router@^0.15.3",
     "@std/cli": "jsr:@std/cli@^1.0.6",
     "@std/http": "jsr:@std/http@^1.0.6",
-    "@std/fmt": "jsr:@std/fmt@^1.0.2"
+    "@std/fmt": "jsr:@std/fmt@^1.0.2",
+    "esbuild-plugin-solid": "npm:esbuild-plugin-solid@^0.6.0"
   }
 }

1. moduleName: '@solid-js/web' is required because solid-js is installed as @solid-js instead of the usual solid-js which the babel preset is configured with soild-js/web by default.
2. jsx: 'preserve' is necessary in a build pipeline in case it might get transpiled before solid compiler had the chance to process.
3. usually in a ts/js setup, "jsxImportSource": "solid-js" is required to have editor recognize solid's jsx declarations but deno lsp seems to catch it with no further config.

happy hacking solid-js

[Mqxx]

Thanks for the response. Why is the transpiler Babel only? What does Babel do different from other transpilers, ESBuild for example? Is it not just "convert TSX to JS"?

[Mqxx]

Because with this plugin I am just calling Babel from inside ESBuild, so Babel will do the heavy lifting of transpiling the code and ESBuild would do nothing... Do I understand this correctly?

[Mqxx]

#2557