Bump raisins to support React 18

.changeset/mean-books-perform.md

@@ -0,0 +1,5 @@
+---
+"@raisins/react": minor
+---
+
+Bump raisins to support React 18

packages/react/package.json

@@ -35,7 +35,8 @@
     "storybook:build": "storybook build -c .storybook -o .out"
   },
   "peerDependencies": {
-    "react": "^16.13.0 || ^17.0.0"
+    "jotai": "^2.0.0",
+    "react": "^17.0.0 || ^18.0.0"
   },
   "prettier": {
     "printWidth": 80,
@@ -61,7 +62,8 @@
     "css-tree": "^1.1.3",
     "fast-equals": "^5.0.1",
     "hotkeys-js": "^3.8.7",
-    "jotai": "^1.6.0",
+    "jotai-optics": "^0.4.0",
+    "jotai-zustand": "^0.4.0",
     "jsonpointer": "^5.0.0",
     "optics-ts": "^2.2.0",
     "penpal": "^6.2.2",
@@ -74,7 +76,7 @@
     "style-to-object": "^0.3.0",
     "throttle-debounce": "^5.0.0",
     "valtio": "^1.5.2",
-    "zustand": "^4.0.0-rc.1"
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
@@ -85,16 +87,16 @@
     "@storybook/cli": "^7.0.21",
     "@storybook/react": "^7.0.21",
     "@storybook/react-vite": "^7.5.3",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^14.1.2",
     "@types/css-tree": "^1.0.6",
     "@types/jest": "^29.1.0",
     "@types/prosemirror-commands": "^1.0.4",
     "@types/prosemirror-keymap": "^1.0.4",
     "@types/prosemirror-schema-basic": "^1.0.2",
     "@types/prosemirror-state": "^1.2.7",
     "@types/prosemirror-view": "^1.19.1",
-    "@types/react": "^17.0.24",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "18",
+    "@types/react-dom": "^18.3.0",
     "@types/resize-observer-browser": "^0.1.7",
     "@types/styled-components": "^5.1.14",
     "@types/throttle-debounce": "^5.0.0",
@@ -108,7 +110,7 @@
     "jest-environment-jsdom": "^29.1.0",
     "local-cypress": "^1.2.5",
     "react": "*",
-    "react-dom": "^16.14.0",
+    "react-dom": "^18.3.1",
     "react-hooks-testing-library": "^0.6.0",
     "react-is": "^17.0.2",
     "size-limit": "^5.0.4",

packages/react/src/attributes/AttributeMolecule.tsx

@@ -34,7 +34,7 @@ export const AttributeMolecule = molecule(getMol => {
       return get(attributesAtoms.valuesAtom)[name];
     },
     (_, set, next: SetStateAction<string | undefined>) => {
-      set(attributesAtoms.valuesAtom, prev => {
+      set(attributesAtoms.valuesAtom, (prev: { [key: string]: string }) => {
         // @ts-expect-error Not all constituents of type are callable
         const value = isFunction(next) ? next(prev[name]) : next;
         const attrbsClone = { ...prev };
@@ -116,7 +116,10 @@ function toNumber(value: string | undefined): number | undefined {
 /**
  * Provides scope for a {@link AttributeScopeMolecule} and {@link AttributeMolecule}
  */
-export const AttributeProvider: React.FC<{ attributeName: string }> = props => (
+export const AttributeProvider: React.FC<{
+  attributeName: string;
+  children: React.PropsWithChildren['children'];
+}> = props => (
   <ScopeProvider scope={AttributeScope} value={props.attributeName}>
     {props.children}
   </ScopeProvider>

packages/react/src/canvas/CanvasScopeMolecule.tsx

@@ -29,7 +29,7 @@
   SnabbdomRenderer,
 } from './util/raisinToSnabdom';
 
-type CanvasEventListener = WritableAtom<null, RichCanvasEvent>;
+type CanvasEventListener = WritableAtom<null, RichCanvasEvent[], void>;
 
 /**
  * Used to "burn down" a snabbdom view for full replacement instead of incremental replacement.
@@ -125,7 +125,7 @@
       (prev, renderer) => {
         return (c, n) => renderer(prev(c, n), n);
       },
       (c, n) => c
     );
 
     const vnode = raisinToSnabbdom(
@@ -156,7 +156,7 @@
     }
   });
 
   const EventTypesAtom = atom(get => {
     return new Set(ListenersMap.keys());
   });
 

packages/react/src/canvas/ProxySet.ts

@@ -1,4 +1,4 @@
-import { atomWithStore } from 'jotai/zustand';
+import { atomWithStore } from 'jotai-zustand';
 import { createStore } from 'zustand/vanilla';
 
 type SetStore<T> = { values: T[]; add(item: T): void };

packages/react/src/canvas/iframe/SnabbdomSanboxedIframeAtom.test.tsx

@@ -1,4 +1,3 @@
-import { act, renderHook } from '@testing-library/react-hooks/dom';
 import expect from 'expect';
 import { atom, useAtom } from 'jotai';
 import { molecule, ScopeProvider, useMolecule } from 'bunshi/react';
@@ -10,9 +9,10 @@
   SnabbdomIframeProps,
   SnabbdomIframeScope,
 } from './SnabbdomSanboxedIframeAtom';
+import { act, renderHook, waitFor } from '@testing-library/react';
 
 describe('Thing', () => {
-  const useSnabbsom = () => {
+  const useSnabbdom = () => {
     const atoms = useMolecule(SnabbdomIframeMolecule);
     const [state, setState] = useAtom(atoms);
     return { state, setState };
@@ -30,8 +30,9 @@
     };
   });
   it('Fails without a wrapper', () => {
-    const { result } = renderHook(() => useSnabbsom());
-    expect(result.error).toBeTruthy();
+    expect(() => {
+      const { result } = renderHook(() => useSnabbdom());
+    }).toThrowError();
   });
 
   // TODO: Move this testing functionality to playwright tests
@@ -41,7 +42,7 @@
         {children}
       </ScopeProvider>
     );
-    const { result, waitForNextUpdate } = renderHook(() => useSnabbsom(), {
+    const { result } = renderHook(() => useSnabbdom(), {
       wrapper: Wrapper,
     });
 
@@ -56,7 +57,7 @@
     expect((result.current.state as any).error).toBeUndefined();
     expect(result.current.state.type).toBe('initializing');
 
-    await waitForNextUpdate();
+    await waitFor(() => result.current.state.type === 'loaded');
     expect((result.current.state as any).error).toBeUndefined();
     expect(result.current.state.type).toBe('loaded');
   });

packages/react/src/canvas/iframe/SnabbdomSanboxedIframeAtom.tsx

@@ -69,8 +69,8 @@ export type SnabbdomIframeProps = {
    * Set of types that will be listened to in the canvas
    */
   eventTypes: Atom<Set<string>>;
-  onEvent: WritableAtom<null, RawCanvasEvent>;
-  onResize: WritableAtom<null, GeometryDetail>;
+  onEvent: WritableAtom<null, RawCanvasEvent[], void>;
+  onResize: WritableAtom<null, GeometryDetail[], void>;
 };
 
 export function createAtoms(props: SnabbdomIframeProps) {

packages/react/src/canvas/iframe/throttledAtom.tsx

@@ -8,7 +8,7 @@ export function throttledWriteAtom(delay: number) {
   const throttledSetAtom = atom({ current: null as null | Setter });
   const throttledOnEvent = atom(
     null,
-    (get, set, e: { atom: WritableAtom<any, any>; value: any }) => {
+    (get, set, e: { atom: WritableAtom<any, any, void>; value: any }) => {
       const throttledSetRef = get(throttledSetAtom);
       let throttledSet = throttledSetRef.current;
       if (!throttledSet) {
@@ -29,11 +29,11 @@ export function throttledWriteAtom(delay: number) {
  */
 export function throttleAtom<R, W>(
   ms: number,
-  atomToThrottle: WritableAtom<R, W>
-): WritableAtom<R, W> {
+  atomToThrottle: WritableAtom<R, W[], void>
+): WritableAtom<R, W[], void> {
   const throttleSet = throttledWriteAtom(ms);
   return atom(
-    (get) => get(atomToThrottle),
+    get => get(atomToThrottle),
     (get, set, next: W) =>
       set(throttleSet, { atom: atomToThrottle, value: next })
   );

packages/react/src/component-metamodel/ComponentModel.stories.tsx

@@ -1,8 +1,7 @@
 import { htmlParser, RaisinElementNode } from '@raisins/core';
 import { Meta } from '@storybook/react';
-import { useAtom } from 'jotai';
 import { useMolecule } from 'bunshi/react';
-import { useAtomValue, useUpdateAtom } from 'jotai/utils';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import React from 'react';
 import {
   AttributeProvider,
@@ -99,7 +98,7 @@ const BlocksController = () => {
       }}
     >
       <h2>Blocks</h2>
-      {(blocks.length ? blocks : fakeBlocks).map((block) => {
+      {(blocks.length ? blocks : fakeBlocks).map(block => {
         return (
           <div
             style={{
@@ -122,9 +121,7 @@ const BlocksController = () => {
   );
 };
 
-export const CustomAttributesController: React.FC<AttributesControllerProps> = (
-  props
-) => {
+export const CustomAttributesController: React.FC<AttributesControllerProps> = props => {
   const { keysAtom, groupedSchemaAtom } = useMolecule(AttributesMolecule);
   const keys = useAtomValue(keysAtom);
   const groupedSchema = useAtomValue(groupedSchemaAtom);
@@ -136,7 +133,7 @@ export const CustomAttributesController: React.FC<AttributesControllerProps> = (
       {Object.keys(groupedSchema).map((key, idx) => {
         return (
           <>
-            {groupedSchema[key].map((attribute) => {
+            {groupedSchema[key].map(attribute => {
               return (
                 <AttributeProvider
                   attributeName={attribute.name}
@@ -307,7 +304,7 @@ const CustomThemeTest = () => {
     <>
       <textarea
         value={html}
-        onInput={(e) => setHtml((e.target as HTMLTextAreaElement).value)}
+        onInput={e => setHtml((e.target as HTMLTextAreaElement).value)}
         rows={6}
         style={{ width: '300px' }}
       />
@@ -354,9 +351,9 @@ function usePackageEditor(): ModuleManagement {
     loadingModules: useAtomValue(ModulesLoadingAtom),
     modules: useAtomValue(ModulesAtom),
     moduleDetails: useAtomValue(ModuleDetailsAtom),
-    addModule: useUpdateAtom(AddModuleAtom),
-    removeModule: useUpdateAtom(RemoveModuleAtom),
-    removeModuleByName: useUpdateAtom(RemoveModuleByNameAtom),
+    addModule: useSetAtom(AddModuleAtom),
+    removeModule: useSetAtom(RemoveModuleAtom),
+    removeModuleByName: useSetAtom(RemoveModuleByNameAtom),
   };
 }
 
@@ -379,7 +376,7 @@ function PackageEditorView(props: ModuleManagement) {
       <div>Loading: {props.loadingModules}</div>
       Modules:
       <ul>
-        {props.modules.map((m) => (
+        {props.modules.map(m => (
           <li key={m.package + '@' + m.version + '/' + m.filePath}>
             {m.package} @ {m.version} for {m.filePath}
           </li>
@@ -411,7 +408,7 @@ function PackageEditorView(props: ModuleManagement) {
       <h2>Add</h2>
       <button
         onClick={() => {
-          setOfThings.map((m) => props.addModule(m));
+          setOfThings.map(m => props.addModule(m));
         }}
       >
         Shoelace + theme
@@ -441,11 +438,11 @@ function PackageEditorView(props: ModuleManagement) {
         Mint (alpha)
       </button>
       <ul>
-        {PACKAGES.map((m) => {
+        {PACKAGES.map(m => {
           return (
             <li key={m}>
               <button
-                onClick={(e) => {
+                onClick={e => {
                   props.addModule({
                     package: m,
                   });
@@ -459,7 +456,7 @@ function PackageEditorView(props: ModuleManagement) {
       </ul>
       <h2>Remove</h2>
       <ul>
-        {PACKAGES.map((m) => {
+        {PACKAGES.map(m => {
           return (
             <li key={m}>
               <button onClick={() => props.removeModuleByName(m)}>{m}</button>

packages/react/src/component-metamodel/ComponentModel.tsx

@@ -1,19 +1,20 @@
 import {
+  DefaultTextMarks,
   doesChildAllowParent,
   doesParentAllowChild,
   getSlots,
   HTMLComponents,
   isNodeAllowed,
   NodeWithSlots,
+  RaisinDocumentNode,
   RaisinElementNode,
   RaisinNode,
-  DefaultTextMarks,
   RaisinNodeWithChildren,
-  RaisinDocumentNode,
 } from '@raisins/core';
 import { CustomElement, Slot } from '@raisins/schema/schema';
-import { Atom, atom, PrimitiveAtom, WritableAtom } from 'jotai';
 import { molecule } from 'bunshi/react';
+import { shallowEqual } from 'fast-equals';
+import { Atom, atom, PrimitiveAtom, WritableAtom } from 'jotai';
 import { loadable } from 'jotai/utils';
 import { ConfigMolecule } from '../core';
 import { CoreMolecule } from '../core/CoreAtoms';
@@ -22,7 +23,6 @@ import {
   NPMRegistry,
   NPMRegistryAtom as RegistryAtom,
 } from '../util/NPMRegistry';
-import { shallowEqual } from 'fast-equals';
 import {
   blockFromHtml,
   moduleDetailsToBlocks,
@@ -39,9 +39,9 @@ export type ComponentModelMoleculeType = {
   ComponentsAtom: Atom<CustomElement[]>;
   LocalURLAtom: Atom<string | undefined>;
   BlocksAtom: Atom<Block[]>;
-  AddModuleAtom: WritableAtom<null, Module>;
-  RemoveModuleAtom: WritableAtom<null, Module>;
-  RemoveModuleByNameAtom: WritableAtom<null, string>;
+  AddModuleAtom: WritableAtom<null, Module[], void>;
+  RemoveModuleAtom: WritableAtom<null, Module[], void>;
+  RemoveModuleByNameAtom: WritableAtom<null, string[], void>;
   ComponentMetaAtom: Atom<ComponentMetaProvider>;
   ValidChildrenAtom: Atom<
     (node: RaisinNode, slot?: string | undefined) => Block[]
@@ -81,14 +81,19 @@ export const ComponentModelMolecule = molecule(
      * `true` while module information is being loaded from NPM
      */
     const ModulesLoadingAtom = atom(
-      get => get(ModuleDetailsStateAtom).state === 'loading'
+      get =>
+        get(ModuleDetailsStateAtom).state === 'loading' ||
+        // Only has status while details are being loaded
+        ((get(ModuleDetailsAtom) as unknown) as ModuleDetails).status ===
+          'pending'
     );
 
     /**
      * The array of {@link CustomElement} from ALL packages
      */
     const ComponentsAtom = atom(get => {
       const moduleDetails = get(ModuleDetailsAtom);
+
       return [
         ...Object.values(HTMLComponents),
         ...moduleDetails.reduce(moduleDetailsToTags, [] as CustomElement[]),

packages/react/src/component-metamodel/types.ts

@@ -10,6 +10,7 @@ export type Module = {
 export type ModuleDetails = {
   'package.json': PackageJson;
   raisins?: schema.Package;
+  status?: string;
 } & Module;
 
 export type ResolveType<T> = T extends Promise<infer V> ? V : T;

packages/react/src/core/CoreAtoms.tsx

@@ -79,7 +79,7 @@ export const CoreMolecule = molecule((getMol, getScope) => {
   );
 
   const StateListeners = new Set<
-    WritableAtom<unknown, { prev: RaisinNode; next: RaisinNode }>
+    WritableAtom<unknown, { prev: RaisinNode; next: RaisinNode }[], void>
   >([]);
 
   const InternalTransactionAtom = atom(