How do I use solid for reactivity without a build step?

I like solid as a frontend library, and I want to use it as a "vanilla" state management library for reactivity.

However, I'm confused why running this script without bundling does nothing:

import { createRoot, createSignal, createEffect } from "solid-js";

const root = createRoot(() => {
  const [counter, setCounter] = createSignal(0);
  createEffect(() => {
    console.log(counter());
  });

  return {
    counter,
    setCounter,
  };
});

root.setCounter(1);

import { createRoot, createSignal, createEffect } from "solid-js";

const root = createRoot(() => {
  const [counter, setCounter] = createSignal(0);
  createEffect(() => {
    console.log(counter());
  });

  return {
    counter,
    setCounter,
  };
});

root.setCounter(1);

import { createRoot, createSignal, createEffect } from "solid-js";

const root = createRoot(() => {
  const [counter, setCounter] = createSignal(0);
  createEffect(() => {
    console.log(counter());
  });

  return {
    counter,
    setCounter,
  };
});

root.setCounter(1);

import { createRoot, createSignal, createEffect } from "solid-js";

const root = createRoot(() => {
  const [counter, setCounter] = createSignal(0);
  createEffect(() => {
    console.log(counter());
  });

  return {
    counter,
    setCounter,
  };
});

root.setCounter(1);

After I bundle (using rollup or bun) and run the script, my effect runs and logs the value of

counter

counter

counter

counter, like I expect. How does bundling make reactivity work, even without using babel?

How do I use solid for reactivity without a build step?

Similar Threads

Similar Threads

Similar Threads