@live-react-islands/core 0.1.0

package/dist/useForm.d.ts

@@ -0,0 +1,60 @@
+export interface FormProps {
+    /** Internal: prop name for event routing (set by server) */
+    __prop?: string;
+    types?: Record<string, string>;
+    required?: string[];
+    values: Record<string, any>;
+    errors: Record<string, string[]>;
+    isValid?: boolean;
+    version?: number;
+}
+export type PushEventFn = (event: string, payload: Record<string, any>) => void;
+export interface FieldProps {
+    name: string;
+    value: any;
+    checked?: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+}
+export interface UseFormReturn {
+    /** Current form field values */
+    values: Record<string, any>;
+    /** Current form errors by field name */
+    errors: Record<string, string[]>;
+    /** Field types from schema */
+    types: Record<string, string>;
+    /** Required field names */
+    required: string[];
+    /** Field names that have been modified by the user */
+    touched: string[];
+    /** Get props to spread on an input element */
+    getFieldProps: (name: string) => FieldProps;
+    /** Get the first error message for a field */
+    getError: (name: string) => string | undefined;
+    /** Check if a field is required */
+    isRequired: (name: string) => boolean;
+    /** Check if a field has been modified by the user */
+    isTouched: (name: string) => boolean;
+    /** Set a field value programmatically */
+    setField: (name: string, value: any) => void;
+    /** Handle form submission */
+    handleSubmit: (e?: React.FormEvent) => void;
+    /** Reset form to server values */
+    reset: () => void;
+    /**
+     * True when the server hasn't acknowledged the latest client changes.
+     * Use this to show a syncing indicator (e.g., spinner, "Validating...").
+     */
+    isSyncing: boolean;
+    /**
+     * True only when form is valid AND fully synced with server.
+     * Use this to enable/disable the submit button.
+     * This is the "Validation Lock" - users cannot submit until server confirms validity.
+     */
+    isValid: boolean;
+    /** Current local version counter */
+    localVersion: number;
+    /** Last acknowledged server version */
+    serverVersion: number;
+}
+export declare function useForm(form: FormProps, pushEvent?: PushEventFn): UseFormReturn;
+//# sourceMappingURL=useForm.d.ts.map

package/dist/useForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../src/useForm.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,SAAS;IACxB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;AAEhF,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CACR,CAAC,EAAE,KAAK,CAAC,WAAW,CAClB,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,CAC3D,KACE,IAAI,CAAC;CACX;AAED,MAAM,WAAW,aAAa;IAC5B,gCAAgC;IAChC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACjC,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,sDAAsD;IACtD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,8CAA8C;IAC9C,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,UAAU,CAAC;IAC5C,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAC/C,mCAAmC;IACnC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,qDAAqD;IACrD,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IACrC,yCAAyC;IACzC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,6BAA6B;IAC7B,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC5C,kCAAkC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,YAAY,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,OAAO,CACrB,IAAI,EAAE,SAAS,EACf,SAAS,CAAC,EAAE,WAAW,GACtB,aAAa,CAqLf"}

package/dist/useIslandStream.d.ts

@@ -0,0 +1,15 @@
+import type { IslandStoreAccess, StreamHandle } from "./types";
+interface IslandContext {
+    id: string;
+    storeAccess: IslandStoreAccess;
+}
+export declare const IslandContextProvider: import("react").Context<IslandContext | null>;
+export interface UseIslandStreamOptions<T> {
+    limit?: number;
+    sort?: (a: T, b: T) => number;
+}
+export declare function useIslandStream<T extends {
+    id: string | number;
+}>(handle: StreamHandle, options?: UseIslandStreamOptions<T>): T[];
+export {};
+//# sourceMappingURL=useIslandStream.d.ts.map

package/dist/useIslandStream.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIslandStream.d.ts","sourceRoot":"","sources":["../src/useIslandStream.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE/D,UAAU,aAAa;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,iBAAiB,CAAC;CAChC;AAED,eAAO,MAAM,qBAAqB,+CAA4C,CAAC;AAE/E,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;CAC/B;AAED,wBAAgB,eAAe,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAC/D,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAClC,CAAC,EAAE,CA2BL"}

package/dist/useStream.d.ts

@@ -0,0 +1,9 @@
+import type { StreamHandle } from "./types";
+export interface UseStreamOptions<T> {
+    limit?: number;
+    capper?: (items: T[]) => T[];
+}
+export declare function useStream<T extends {
+    id: string | number;
+}>(handle: StreamHandle, options?: UseStreamOptions<T>): T[];
+//# sourceMappingURL=useStream.d.ts.map

package/dist/useStream.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStream.d.ts","sourceRoot":"","sources":["../src/useStream.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EACzD,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAC5B,CAAC,EAAE,CAuBL"}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@live-react-islands/core",
+  "version": "0.1.0",
+  "description": "Core React integration for LiveReactIslands - Phoenix LiveView hook and utilities",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    },
+    "./ssr": {
+      "import": "./dist/ssr.esm.js",
+      "require": "./dist/ssr.js"
+    }
+  },
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "jest",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "phoenix",
+    "liveview",
+    "react",
+    "islands",
+    "ssr",
+    "elixir"
+  ],
+  "author": "David Czaplinski",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dcza/live-react-islands.git",
+    "directory": "packages/js/core"
+  },
+  "peerDependencies": {
+    "phoenix": "^1.7.0 || ^1.8.0",
+    "phoenix_live_view": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "rollup": "^4.24.0",
+    "ts-jest": "^29.1.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.6.3"
+  }
+}

package/src/IndividualIslandRenderer.tsx

@@ -0,0 +1,80 @@
+import React, { useSyncExternalStore, memo, useMemo } from "react";
+import type { IndividualIslandsRendererProps } from "./types";
+import { IslandContextProvider } from "./context";
+
+export const IndividualIslandRenderer: React.FC<
+  IndividualIslandsRendererProps
+> = ({ data, storeAccess }) => {
+  const { Component, ContextProvider, id, pushEvent, globalKeys } = data;
+
+  const MemoizedComponent = useMemo(() => memo(Component), [Component]);
+  const MemoizedContextProvider = useMemo(
+    () => (ContextProvider ? memo(ContextProvider) : null),
+    [ContextProvider]
+  );
+
+  const currentProps = useSyncExternalStore(
+    storeAccess.subscribeToProps,
+    () => storeAccess.getProps(id),
+    () => data.hydrationData?.props
+  );
+
+  // Check once if hydration globals version matches store version
+  const serverGlobalsSnapshot = useMemo(() => {
+    const hydrationGlobals = data.hydrationData?.globals;
+    if (!hydrationGlobals) return () => hydrationGlobals;
+    let comparedVersions = false;
+    let useStoreReference = false;
+    return () => {
+      if (!comparedVersions) {
+        comparedVersions = true;
+        const storeGlobals = storeAccess.getGlobals();
+        const hydrationVersion = hydrationGlobals.__version ?? -1;
+        const storeVersion = storeGlobals?.__version ?? -1;
+        useStoreReference = storeVersion === hydrationVersion;
+      }
+      return useStoreReference ? storeAccess.getGlobals() : hydrationGlobals;
+    };
+  }, [data.hydrationData?.globals, storeAccess]);
+
+  const globals = useSyncExternalStore(
+    storeAccess.subscribeToGlobals,
+    storeAccess.getGlobals,
+    serverGlobalsSnapshot
+  );
+
+  const filteredGlobals: Record<string, any> = {};
+  if (globals) {
+    globalKeys.forEach((key) => {
+      if (key in globals) {
+        filteredGlobals[key] = globals[key];
+      }
+    });
+  }
+
+  const contextValue = useMemo(() => ({ id, storeAccess }), [id, storeAccess]);
+
+  const islandNode = (
+    <MemoizedComponent
+      {...filteredGlobals}
+      {...currentProps}
+      id={id}
+      pushEvent={pushEvent}
+    />
+  );
+
+  const withContext = (
+    <IslandContextProvider.Provider value={contextValue}>
+      {islandNode}
+    </IslandContextProvider.Provider>
+  );
+
+  return MemoizedContextProvider ? (
+    <MemoizedContextProvider>{withContext}</MemoizedContextProvider>
+  ) : (
+    withContext
+  );
+};
+
+IndividualIslandRenderer.displayName =
+  "[ReactLiveIslands] IndividualIslandRenderer";

package/src/PortalIslandsRenderer.test.tsx

@@ -0,0 +1,304 @@
+import React from "react";
+import { render, waitFor, act, cleanup } from "@testing-library/react";
+import { PortalIslandsRenderer } from "./PortalIslandsRenderer";
+import type {
+  IslandData,
+  IslandStoreAccess,
+} from "./types";
+
+beforeEach(() => {
+  jest.spyOn(console, "log").mockImplementation(() => {});
+});
+
+afterEach(() => {
+  cleanup();
+  document.body.innerHTML = "";
+  jest.restoreAllMocks();
+});
+
+describe("PortalIslandsRenderer", () => {
+  const createMockStoreAccess = (): {
+    storeAccess: IslandStoreAccess;
+    setSharedIslands: (islands: Record<string, IslandData>) => void;
+    setProps: (islandId: string, props: Record<string, any>) => void;
+    setGlobals: (globals: Record<string, any> | null) => void;
+  } => {
+    const propsMap = new Map<string, Record<string, any>>();
+    const propsListeners = new Set<() => void>();
+    let globals: Record<string, any> | null = { __version: 1 };
+    const globalsListeners = new Set<() => void>();
+    let sharedIslands: Record<string, IslandData> = {};
+    const sharedIslandsListeners = new Set<() => void>();
+
+    const streamsStore = new Map<string, any[]>();
+    const streamsListeners = new Map<string, Set<() => void>>();
+
+    const storeAccess: IslandStoreAccess = {
+      getProps: (id: string) => propsMap.get(id) || null,
+      subscribeToProps: (cb: () => void) => {
+        propsListeners.add(cb);
+        return () => propsListeners.delete(cb);
+      },
+      getGlobals: () => globals,
+      subscribeToGlobals: (cb: () => void) => {
+        globalsListeners.add(cb);
+        return () => globalsListeners.delete(cb);
+      },
+      getSharedIslands: () => sharedIslands,
+      subscribeToSharedIslands: (cb: () => void) => {
+        sharedIslandsListeners.add(cb);
+        return () => sharedIslandsListeners.delete(cb);
+      },
+      getStreamItems: (islandId: string, streamName: string) => {
+        return streamsStore.get(`${islandId}:${streamName}`) || [];
+      },
+      subscribeToStream: (islandId: string, streamName: string, cb: () => void, _config?: any) => {
+        const key = `${islandId}:${streamName}`;
+        if (!streamsListeners.has(key)) {
+          streamsListeners.set(key, new Set());
+        }
+        streamsListeners.get(key)!.add(cb);
+        return () => streamsListeners.get(key)?.delete(cb);
+      },
+    };
+
+    return {
+      storeAccess,
+      setSharedIslands: (islands: Record<string, IslandData>) => {
+        sharedIslands = islands;
+        sharedIslandsListeners.forEach((cb) => cb());
+      },
+      setProps: (islandId: string, props: Record<string, any>) => {
+        propsMap.set(islandId, props);
+        propsListeners.forEach((cb) => cb());
+      },
+      setGlobals: (newGlobals: Record<string, any> | null) => {
+        globals = newGlobals;
+        globalsListeners.forEach((cb) => cb());
+      },
+    };
+  };
+
+  const createMockIslandData = (
+    overrides?: Partial<IslandData>
+  ): IslandData => {
+    const el = document.createElement("div");
+    el.id = overrides?.id || "test-island";
+    document.body.appendChild(el);
+
+    return {
+      id: overrides?.id || "test-island",
+      el,
+      Component: ({ count }: { count: number }) => <div>Count: {count}</div>,
+      ssrStrategy: "none",
+      pushEvent: jest.fn(),
+      hydrationData: null,
+      globalKeys: [],
+      ...overrides,
+    };
+  };
+
+  test("renders islands from shared islands store", async () => {
+    const { storeAccess, setSharedIslands, setProps } = createMockStoreAccess();
+
+    render(<PortalIslandsRenderer storeAccess={storeAccess} />);
+
+    const islandData = createMockIslandData({ id: "island-1" });
+
+    act(() => {
+      setProps("island-1", { count: 0 });
+      setSharedIslands({ "island-1": islandData });
+    });
+
+    await waitFor(() => {
+      expect(islandData.el).toHaveTextContent("Count: 0");
+    });
+  });
+
+  test("removes islands when removed from store", async () => {
+    const { storeAccess, setSharedIslands, setProps } = createMockStoreAccess();
+
+    render(<PortalIslandsRenderer storeAccess={storeAccess} />);
+
+    const islandData = createMockIslandData({ id: "island-1" });
+
+    act(() => {
+      setProps("island-1", { count: 0 });
+      setSharedIslands({ "island-1": islandData });
+    });
+
+    await waitFor(() => {
+      expect(islandData.el).toHaveTextContent("Count: 0");
+    });
+
+    act(() => {
+      setSharedIslands({});
+    });
+
+    await waitFor(() => {
+      expect(islandData.el).toHaveTextContent("");
+    });
+  });
+
+  test("subscribes to props and globals stores for each island", async () => {
+    const { storeAccess, setSharedIslands, setProps } = createMockStoreAccess();
+
+    const subscribeToProps = jest.spyOn(storeAccess, "subscribeToProps");
+    const subscribeToGlobals = jest.spyOn(storeAccess, "subscribeToGlobals");
+
+    render(<PortalIslandsRenderer storeAccess={storeAccess} />);
+
+    const islandData = createMockIslandData({ id: "island-1" });
+
+    act(() => {
+      setProps("island-1", { count: 0 });
+      setSharedIslands({ "island-1": islandData });
+    });
+
+    await waitFor(() => {
+      expect(subscribeToProps).toHaveBeenCalled();
+      expect(subscribeToGlobals).toHaveBeenCalled();
+    });
+  });
+
+  test("clears innerHTML for overwrite strategy", async () => {
+    const { storeAccess, setSharedIslands, setProps } = createMockStoreAccess();
+
+    render(<PortalIslandsRenderer storeAccess={storeAccess} />);
+
+    const el = document.createElement("div");
+    el.innerHTML = "<div>SSR content</div>";
+    document.body.appendChild(el);
+
+    const islandData: IslandData = {
+      id: "island-1",
+      el,
+      Component: ({ count }: { count: number }) => <div>Count: {count}</div>,
+      ssrStrategy: "overwrite",
+      pushEvent: jest.fn(),
+      hydrationData: null,
+      globalKeys: [],
+    };
+
+    act(() => {
+      setProps("island-1", { count: 0 });
+      setSharedIslands({ "island-1": islandData });
+    });
+
+    await waitFor(() => {
+      expect(el.innerHTML).not.toContain("SSR content");
+      expect(el).toHaveTextContent("Count: 0");
+    });
+  });
+
+  test("merges globals and props for island component", async () => {
+    const { storeAccess, setSharedIslands, setProps, setGlobals } = createMockStoreAccess();
+
+    const MockComponent = ({ count, user }: any) => (
+      <div>
+        {count}-{user}
+      </div>
+    );
+
+    render(<PortalIslandsRenderer storeAccess={storeAccess} />);
+
+    const islandData = createMockIslandData({
+      id: "island-1",
+      Component: MockComponent,
+      globalKeys: ["user"],
+    });
+
+    act(() => {
+      setGlobals({ user: "test", __version: 1 });
+      setProps("island-1", { count: 5 });
+      setSharedIslands({ "island-1": islandData });
+    });
+
+    await waitFor(() => {
+      expect(islandData.el).toHaveTextContent("5-test");
+    });
+  });
+
+  test("wraps island in ContextProvider when provided", async () => {
+    const { storeAccess, setSharedIslands, setProps } = createMockStoreAccess();
+
+    const ContextProvider: React.FC<{ children: React.ReactNode }> = ({
+      children,
+    }) => <div data-context="wrapper">{children}</div>;
+
+    render(<PortalIslandsRenderer storeAccess={storeAccess} />);
+
+    const islandData = createMockIslandData({
+      id: "island-1",
+      ContextProvider,
+    });
+
+    act(() => {
+      setProps("island-1", { count: 0 });
+      setSharedIslands({ "island-1": islandData });
+    });
+
+    await waitFor(() => {
+      const wrapper = islandData.el.querySelector('[data-context="wrapper"]');
+      expect(wrapper).toBeInTheDocument();
+      expect(islandData.el).toHaveTextContent("Count: 0");
+    });
+  });
+
+  test("updates when props change in store", async () => {
+    const { storeAccess, setSharedIslands, setProps } = createMockStoreAccess();
+
+    render(<PortalIslandsRenderer storeAccess={storeAccess} />);
+
+    const islandData = createMockIslandData({ id: "island-1" });
+
+    act(() => {
+      setProps("island-1", { count: 0 });
+      setSharedIslands({ "island-1": islandData });
+    });
+
+    await waitFor(() => {
+      expect(islandData.el).toHaveTextContent("Count: 0");
+    });
+
+    act(() => {
+      setProps("island-1", { count: 5 });
+    });
+
+    await waitFor(() => {
+      expect(islandData.el).toHaveTextContent("Count: 5");
+    });
+  });
+
+  test("updates when globals change in store", async () => {
+    const { storeAccess, setSharedIslands, setProps, setGlobals } = createMockStoreAccess();
+
+    const MockComponent = ({ user }: any) => <div>User: {user}</div>;
+
+    render(<PortalIslandsRenderer storeAccess={storeAccess} />);
+
+    const islandData = createMockIslandData({
+      id: "island-1",
+      Component: MockComponent,
+      globalKeys: ["user"],
+    });
+
+    act(() => {
+      setGlobals({ user: "Alice", __version: 1 });
+      setProps("island-1", {});
+      setSharedIslands({ "island-1": islandData });
+    });
+
+    await waitFor(() => {
+      expect(islandData.el).toHaveTextContent("User: Alice");
+    });
+
+    act(() => {
+      setGlobals({ user: "Bob", __version: 2 });
+    });
+
+    await waitFor(() => {
+      expect(islandData.el).toHaveTextContent("User: Bob");
+    });
+  });
+});

package/src/PortalIslandsRenderer.tsx

@@ -0,0 +1,118 @@
+import React, { useRef, memo, useSyncExternalStore, useMemo } from "react";
+import { createPortal } from "react-dom";
+import type {
+  IslandData,
+  SharedIslandsRendererProps,
+  IslandStoreAccess,
+} from "./types";
+import { IslandContextProvider } from "./context";
+
+const PortalIsland = memo(
+  ({
+    data,
+    storeAccess,
+  }: {
+    data: IslandData;
+    storeAccess: IslandStoreAccess;
+  }) => {
+    const {
+      Component,
+      ContextProvider,
+      id,
+      pushEvent,
+      ssrStrategy,
+      el,
+      globalKeys,
+    } = data;
+
+    const MemoizedComponent = useMemo(() => memo(Component), [Component]);
+    const MemoizedContextProvider = useMemo(
+      () => (ContextProvider ? memo(ContextProvider) : null),
+      [ContextProvider]
+    );
+    const contextValue = useMemo(
+      () => ({ id, storeAccess }),
+      [id, storeAccess]
+    );
+
+    const currentProps = useSyncExternalStore(
+      storeAccess.subscribeToProps,
+      () => storeAccess.getProps(id),
+      () => null
+    );
+
+    const allGlobals = useSyncExternalStore(
+      storeAccess.subscribeToGlobals,
+      storeAccess.getGlobals,
+      () => null
+    );
+
+    const didClearRef = useRef(false);
+    if (ssrStrategy === "overwrite" && !didClearRef.current) {
+      el.innerHTML = "";
+      didClearRef.current = true;
+    }
+
+    if (!allGlobals) {
+      console.log("[PortalIsland] Waiting for globals", id);
+      return null;
+    }
+
+    console.log("[PortalIsland] Rendering", { id, allGlobals });
+
+    const relevantGlobals: Record<string, any> = {};
+    if (allGlobals) {
+      globalKeys.forEach((key) => {
+        if (key in allGlobals) {
+          relevantGlobals[key] = allGlobals[key];
+        }
+      });
+    }
+
+    const mergedProps = { ...relevantGlobals, ...currentProps };
+
+    const islandNode = (
+      <MemoizedComponent {...mergedProps} id={id} pushEvent={pushEvent} />
+    );
+
+    const withContext = (
+      <IslandContextProvider.Provider value={contextValue}>
+        {islandNode}
+      </IslandContextProvider.Provider>
+    );
+
+    const content = MemoizedContextProvider ? (
+      <MemoizedContextProvider>{withContext}</MemoizedContextProvider>
+    ) : (
+      withContext
+    );
+
+    return createPortal(content, el);
+  }
+);
+PortalIsland.displayName = "[ReactLiveIslands]PortalIsland";
+
+export const PortalIslandsRenderer: React.FC<SharedIslandsRendererProps> = ({
+  storeAccess,
+}) => {
+  const sharedIslandsObj = useSyncExternalStore(
+    storeAccess.subscribeToSharedIslands,
+    storeAccess.getSharedIslands
+  );
+
+  const islands = Object.values(sharedIslandsObj);
+
+  console.log(
+    "[PortalIslandsRenderer] Rendering islands:",
+    islands.map((d) => d.id)
+  );
+
+  return (
+    <>
+      {islands.map((data) => (
+        <PortalIsland key={data.id} data={data} storeAccess={storeAccess} />
+      ))}
+    </>
+  );
+};
+PortalIslandsRenderer.displayName = "[ReactLiveIslands]PortalIslandsRenderer";

package/src/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import type { IslandStoreAccess } from "./types";
+
+export interface IslandContext {
+  id: string;
+  storeAccess: IslandStoreAccess;
+}
+
+export const IslandContextProvider = createContext<IslandContext | null>(null);