#Basic store example is not reactive

5 messages · Page 1 of 1 (latest)

ember ore
#

I'm struggling to understand why this code isn't reactive

import { createEffect, createMemo, createRoot } from "solid-js/dist/solid.js";
import {
  createStore,
  type Store,
  type SetStoreFunction,
} from "solid-js/store/dist/store.js";

interface FooWorld {
  readonly store: {
    foo: Store<FooWorldState>;
    setFoo: SetStoreFunction<FooWorldState>;
  };
}

/**
 * Bar state for a foo world.
 */
interface FooWorldState {
  bar: number;
}

namespace World {
  export function create(): FooWorld {
    return createRoot(() => {
      const [fooStore, setFooStore] = createStore<FooWorldState>({
        bar: 0,
      });

      const getBar = createMemo(() => fooStore.bar);

      createEffect(() => {
        console.log(`why don't I see this twice?`, getBar());
      });

      return {
        store: {
          foo: fooStore,
          setFoo: setFooStore,
        },
      };
    });
  }
}

const world = World.create();

setTimeout(() => {
  world.store.setFoo("bar", 1);
  console.log(`I see this!`, world.store.foo.bar);
}, 1000);

I expect the createEffect to run twice, but it only runs once. What am I missing here?

vernal summit
ember ore
#

That seems to be the case, but it's unclear to me why those imports are "still" resolving to the server versions of solid, despite being explicit

#

Okay, I see the problem: solid-js/store/dist/store.js imports solid-js which then resolves to the server version because of conditional exports.

vernal summit
# ember ore Okay, I see the problem: solid-js/store/dist/store.js imports solid-js which the... 
// file: index.ts
import { createEffect, createMemo, createRoot } from 'solid-js';
import {
  createStore,
  type Store,
  type SetStoreFunction,
} from 'solid-js/store';
// …

package.json:

{
  "name": "rt-cli",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "bundle": "esbuild index.ts --bundle --packages=external --platform=node --format=cjs --outfile=./index.cjs",
    "exec": "node --require solid-register ./index.cjs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "esbuild": "^0.21.5",
    "solid-js": "^1.8.17",
    "solid-register": "^0.2.5"
  }
}

$ pnpm run bundle

> [email protected] bundle /rt-cli
> esbuild index.ts --bundle --packages=external --platform=node --format=cjs --outfile=./index.cjs

  index.cjs  814b 

:zap: Done in 2ms

rt-cli$ pnpm run exec

> [email protected] exec /rt-cli
> node --require solid-register ./index.cjs

why don't I see this twice? 0
why don't I see this twice? 1
I see this! 1