ComponentScope doesn't work in React when imported from vanilla bundle

[loganvolkers]

ComponentScope doesn't work in React when imported from the vanilla bundle.

Here is an example where each component should be getting separate count via separate molecules & atoms, but instead they are connected.

Doesn't work:

import { ComponentScope, molecule, createScope } from "bunshi";
import { atom } from "jotai/vanilla";


export const CountMolecule = molecule((_, scope) => {
  scope(ComponentScope);
  return atom(0);
});

https://codesandbox.io/s/2xckrq?file=/molecules.ts

Does work

import { ComponentScope, molecule, createScope } from "bunshi/react";
import { atom } from "jotai/vanilla";


export const CountMolecule = molecule((_, scope) => {
  scope(ComponentScope);
  return atom(0);
});

https://codesandbox.io/s/6mddg8?file=/molecules.ts

Example consumer

Each counter in this exa

import { useMolecule } from "bunshi/react";
import { useAtom } from "jotai";
import React from "react";
import { CountMolecule } from "./molecules";

export default function App() {
  return (
    <div>
      <Counter />
      <Counter />
    </div>
  );
}

function Counter() {
  const countAtom = useMolecule(CountMolecule);

  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <p>Times clicked: { count }</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  );
}

Temporary Workaround

Change imports to pull from bunshi/react instead of bunshi.

-import { ComponentScope, molecule, createScope } from "bunshi";
+import { ComponentScope, molecule, createScope } from "bunshi/react";

[loganvolkers]

Note that this only affects the React bundle and not the Vue bundle. Since ComponentScope has tests, I suspect this has to do with the bundling and/or splitting of the source files.

[loganvolkers]

Working codesandbox for proof: https://codesandbox.io/s/blazing-currying-hp6mx3?file=/molecules.ts

[loganvolkers]

Also this probably was also affecting Vue, which is why tests were added. I hadn't run into the Vue bug, though, because the problem only in CommonJS. See https://tsup.egoist.dev/#code-splitting