>({ + as: Element, + children, + ...props +}: { as: string; children?: React.ReactNode } & P) { + const ref = React.useRef(null); + useWebComponent(ref, props); + + return React.createElement(Element, { ref, ...props }, children); +} diff --git a/typescript/packages/jumble/src/hooks/use-charm.ts b/typescript/packages/jumble/src/hooks/use-charm.ts new file mode 100644 index 000000000..55635729a --- /dev/null +++ b/typescript/packages/jumble/src/hooks/use-charm.ts @@ -0,0 +1,24 @@ +import { useEffect, useState } from "react"; +import { DocImpl, effect } from "@commontools/runner"; + +export function useCell(cell: DocImpl): [T, (value: T) => void] { + const [value, setValue] = useState(cell.get()); + + useEffect(() => { + // Set up effect to update state when cell changes + const cleanup = effect(cell, (newValue) => { + setValue(newValue); + }); + + // Clean up effect when component unmounts or cell changes + return cleanup; + }, [cell]); + + // Return tuple of current value and setter function + return [ + value, + (newValue: T) => { + cell.asCell().set(newValue); + }, + ]; +} diff --git a/typescript/packages/jumble/src/hooks/use-web-component.tsx b/typescript/packages/jumble/src/hooks/use-web-component.tsx new file mode 100644 index 000000000..3b0f227bb --- /dev/null +++ b/typescript/packages/jumble/src/hooks/use-web-component.tsx @@ -0,0 +1,53 @@ +import React from "react"; + +export function useWebComponent

>( + ref: React.RefObject, + props: P, +) { + React.useEffect(() => { + if (!ref.current) return; + + const element = ref.current; + // Handle regular props + Object.entries(props).forEach(([key, value]) => { + if (!key.startsWith("on")) { + if (key === "className") { + element.setAttribute("class", value); + } else if (typeof value === "boolean") { + if (value) { + element.setAttribute(key, ""); + } else { + element.removeAttribute(key); + } + } else { + element[key] = value; + } + } + }); + + // Handle event listeners + const eventHandlers = Object.entries(props) + .filter(([key]) => key.startsWith("on")) + .map(([key, handler]) => { + // Convert onEventName to event-name + const eventName = key + .slice(2) + .split(/(?=[A-Z])/) + .map((part) => part.toLowerCase()) + .join("-"); + return { eventName, handler }; + }); + + // Add event listeners + eventHandlers.forEach(({ eventName, handler }) => { + element.addEventListener(eventName, handler); + }); + + // Cleanup + return () => { + eventHandlers.forEach(({ eventName, handler }) => { + element.removeEventListener(eventName, handler); + }); + }; + }, [ref, props]); +} diff --git a/typescript/packages/jumble/src/views/Shell.tsx b/typescript/packages/jumble/src/views/Shell.tsx index 4db67a503..b55a690e1 100644 --- a/typescript/packages/jumble/src/views/Shell.tsx +++ b/typescript/packages/jumble/src/views/Shell.tsx @@ -3,7 +3,17 @@ import "@commontools/ui"; import { setIframeContextHandler } from "@commontools/iframe-sandbox"; import { Action, ReactivityLog, addAction, removeAction } from "@commontools/runner"; import { CharmRunner } from "@/components/CharmRunner"; -import { useState } from "react"; +import { WebComponent } from "@/components/WebComponent"; +import { useEffect, useRef, useState } from "react"; + +import * as osUi from "@commontools/os-ui"; +import { OsChrome } from "@commontools/os-ui/src/components/os-chrome"; +console.log(osUi); +import "@commontools/os-ui/src/static/main.css"; +import Sidebar from "@/components/Sidebar"; +import { useCell } from "@/hooks/use-charm"; +import { sidebar } from "./state"; +import "./main.css"; // FIXME(ja): perhaps this could be in common-charm? needed to enable iframe with sandboxing setIframeContextHandler({ @@ -25,7 +35,47 @@ setIframeContextHandler({ }, }); -export default function Shell() { +interface OsChromeProps { + wide?: boolean; + locationTitle?: string; + children?: React.ReactNode; + onLocation?: () => void; +} + +function Chrome({ + wide = false, + locationTitle = "Test", + children = "test", + onLocation, +}: OsChromeProps) { + const chromeRef = useRef(null); + + useEffect(() => { + const element = chromeRef.current; + if (!element) return; + + (element as any).wide = wide; + element.locationtitle = locationTitle; + + const handleLocation = () => { + if (onLocation) { + onLocation(); + } + }; + + element.addEventListener("location", handleLocation); + + return () => { + element.removeEventListener("location", handleLocation); + }; + }, [wide, locationTitle, onLocation]); + + return {children}; +} + +// bf: probably not the best way to make a cell but it works + +function Content() { const [count, setCount] = useState(0); const incrementCount = () => { @@ -33,7 +83,7 @@ export default function Shell() { }; return ( -