@editframe/react 0.21.0-beta.0 → 0.23.6-beta.0

package/dist/hooks/create-element.js

@@ -0,0 +1,103 @@
+import React from "react";
+let isomorphicEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+const reservedReactProperties = /* @__PURE__ */ new Set([
+  "children",
+  "localName",
+  "ref",
+  "style",
+  "className"
+]);
+const listenedEvents = /* @__PURE__ */ new WeakMap();
+function addOrUpdateEventListener(node, event, listener) {
+  let events = listenedEvents.get(node);
+  if (!events) {
+    events = /* @__PURE__ */ new Map();
+    listenedEvents.set(node, events);
+  }
+  let handler = events.get(event);
+  if (listener) {
+    if (!handler) {
+      handler = { handleEvent: listener };
+      events.set(event, handler);
+      node.addEventListener(event, handler);
+    } else {
+      handler.handleEvent = listener;
+    }
+  } else if (handler) {
+    events.delete(event);
+    node.removeEventListener(event, handler);
+  }
+}
+function setProperty(node, name, value, old, events) {
+  const event = events?.[name];
+  if (event) {
+    if (value !== old)
+      addOrUpdateEventListener(node, event, value);
+    return;
+  }
+  node[name] = value;
+  if ((value === void 0 || value === null) && name in HTMLElement.prototype) {
+    node.removeAttribute(name);
+  }
+}
+function createComponent({
+  react: React2,
+  tagName,
+  elementClass,
+  events,
+  displayName
+}) {
+  const eventProps = new Set(Object.keys(events ?? {}));
+  const ReactComponent = React2.forwardRef(
+    (props, ref) => {
+      const elementRef = React2.useRef(null);
+      const prevPropsRef = React2.useRef(/* @__PURE__ */ new Map());
+      const reactProps = {
+        suppressHydrationWarning: true
+      };
+      const elementProps = {};
+      for (const [k, v] of Object.entries(props)) {
+        if (reservedReactProperties.has(k)) {
+          reactProps[k === "className" ? "class" : k] = v;
+          continue;
+        }
+        if (eventProps.has(k) || k in elementClass.prototype)
+          elementProps[k] = v;
+        reactProps[k] = v;
+      }
+      isomorphicEffect(() => {
+        if (!elementRef.current) return;
+        const newProps = /* @__PURE__ */ new Map();
+        for (const key in elementProps) {
+          setProperty(
+            elementRef.current,
+            key,
+            props[key],
+            prevPropsRef.current.get(key),
+            events
+          );
+          prevPropsRef.current.delete(key);
+          newProps.set(key, props[key]);
+        }
+        for (const [key, value] of prevPropsRef.current) {
+          setProperty(elementRef.current, key, void 0, value, events);
+        }
+        prevPropsRef.current = newProps;
+        elementRef.current.removeAttribute("defer-hydration");
+      }, [props]);
+      return React2.createElement(tagName, {
+        ...reactProps,
+        ref: (node) => {
+          elementRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        }
+      });
+    }
+  );
+  ReactComponent.displayName = displayName ?? elementClass.name;
+  return ReactComponent;
+}
+export {
+  createComponent
+};

package/dist/hooks/useTimingInfo.js

@@ -1,34 +1,35 @@
-import { useEffect, useRef, useState } from "react";
-var CurrentTimeController = class {
-	constructor(host, setCurrentTime) {
-		this.host = host;
-		this.setCurrentTime = setCurrentTime;
-		this.host.addController(this);
-	}
-	hostDisconnected() {
-		this.host.removeController(this);
-	}
-	hostUpdated() {
-		this.setCurrentTime({
-			ownCurrentTimeMs: this.host.ownCurrentTimeMs,
-			durationMs: this.host.durationMs,
-			percentComplete: this.host.ownCurrentTimeMs / this.host.durationMs
-		});
-	}
-};
+import { useRef, useState, useEffect } from "react";
+class CurrentTimeController {
+  constructor(host, setCurrentTime) {
+    this.host = host;
+    this.setCurrentTime = setCurrentTime;
+    this.host.addController(this);
+  }
+  hostDisconnected() {
+    this.host.removeController(this);
+  }
+  hostUpdated() {
+    this.setCurrentTime({
+      ownCurrentTimeMs: this.host.ownCurrentTimeMs,
+      durationMs: this.host.durationMs,
+      percentComplete: this.host.ownCurrentTimeMs / this.host.durationMs
+    });
+  }
+}
 const useTimingInfo = (timegroupRef = useRef(null)) => {
-	const [timeInfo, setTimeInfo] = useState({
-		ownCurrentTimeMs: 0,
-		durationMs: 0,
-		percentComplete: 0
-	});
-	useEffect(() => {
-		if (!timegroupRef.current) throw new Error("Timegroup ref not set");
-		new CurrentTimeController(timegroupRef.current, setTimeInfo);
-	}, [timegroupRef.current]);
-	return {
-		...timeInfo,
-		ref: timegroupRef
-	};
+  const [timeInfo, setTimeInfo] = useState({
+    ownCurrentTimeMs: 0,
+    durationMs: 0,
+    percentComplete: 0
+  });
+  useEffect(() => {
+    if (!timegroupRef.current) {
+      throw new Error("Timegroup ref not set");
+    }
+    new CurrentTimeController(timegroupRef.current, setTimeInfo);
+  }, [timegroupRef.current]);
+  return { ...timeInfo, ref: timegroupRef };
+};
+export {
+  useTimingInfo
 };
-export { useTimingInfo };

package/dist/index.d.ts

@@ -9,9 +9,13 @@ export { Video } from './elements/Video.js';
 export { Waveform } from './elements/Waveform.js';
 export { Configuration } from './gui/Configuration.js';
 export { Controls } from './gui/Controls.js';
+export { Dial } from './gui/EFDial.js';
+export { ResizableBox } from './gui/EFResizableBox.js';
 export { Filmstrip } from './gui/Filmstrip.js';
 export { FitScale } from './gui/FitScale.js';
 export { FocusOverlay } from './gui/FocusOverlay.js';
+export { Pause } from './gui/Pause.js';
+export { Play } from './gui/Play.js';
 export { Preview } from './gui/Preview.js';
 export { Scrubber } from './gui/Scrubber.js';
 export { ToggleLoop } from './gui/ToggleLoop.js';

package/dist/index.js

@@ -9,13 +9,46 @@ import { Video } from "./elements/Video.js";
 import { Waveform } from "./elements/Waveform.js";
 import { Configuration } from "./gui/Configuration.js";
 import { Controls } from "./gui/Controls.js";
+import { Dial } from "./gui/EFDial.js";
+import { ResizableBox } from "./gui/EFResizableBox.js";
 import { Filmstrip } from "./gui/Filmstrip.js";
 import { FitScale } from "./gui/FitScale.js";
 import { FocusOverlay } from "./gui/FocusOverlay.js";
+import { Pause } from "./gui/Pause.js";
+import { Play } from "./gui/Play.js";
 import { Preview } from "./gui/Preview.js";
 import { Scrubber } from "./gui/Scrubber.js";
 import { ToggleLoop } from "./gui/ToggleLoop.js";
 import { TogglePlay } from "./gui/TogglePlay.js";
 import { Workbench } from "./gui/Workbench.js";
 import { useTimingInfo } from "./hooks/useTimingInfo.js";
-export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Controls, Filmstrip, FitScale, FocusOverlay, Image, Preview, Scrubber, Surface, ThumbnailStrip, TimeDisplay, Timegroup, ToggleLoop, TogglePlay, Video, Waveform, Workbench, useTimingInfo };
+export {
+  Audio,
+  Captions,
+  CaptionsActiveWord,
+  CaptionsAfterActiveWord,
+  CaptionsBeforeActiveWord,
+  CaptionsSegment,
+  Configuration,
+  Controls,
+  Dial,
+  Filmstrip,
+  FitScale,
+  FocusOverlay,
+  Image,
+  Pause,
+  Play,
+  Preview,
+  ResizableBox,
+  Scrubber,
+  Surface,
+  ThumbnailStrip,
+  TimeDisplay,
+  Timegroup,
+  ToggleLoop,
+  TogglePlay,
+  Video,
+  Waveform,
+  Workbench,
+  useTimingInfo
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/react",
-  "version": "0.21.0-beta.0",
+  "version": "0.23.6-beta.0",
   "description": "",
   "exports": {
     ".": {
@@ -25,10 +25,10 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/elements": "0.21.0-beta.0",
-    "@lit/react": "^1.0.5",
+    "@editframe/elements": "0.23.6-beta.0",
+    "@lit/react": "^1.0.8",
     "debug": "^4.3.5",
-    "lit": "^3.2.1",
+    "lit": "^3.3.1",
     "react": "^18.3.0",
     "react-dom": "^18.3.0"
   },
@@ -39,6 +39,7 @@
     "rollup-plugin-tsconfig-paths": "^1.5.2",
     "typescript": "^5.5.4",
     "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.6.0"
   }
 }

package/src/components/TimeDisplay.tsx

@@ -1,6 +1,6 @@
 import { EFTimeDisplay } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const TimeDisplay = createComponent({
   tagName: "ef-time-display",

package/src/elements/Audio.ts

@@ -1,6 +1,6 @@
 import { EFAudio as EFAudioElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Audio = createComponent({
   tagName: "ef-audio",

package/src/elements/Captions.ts

@@ -5,8 +5,8 @@ import {
   EFCaptions as EFCaptionsElement,
   EFCaptionsSegment as EFCaptionsSegmentElement,
 } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Captions = createComponent({
   tagName: "ef-captions",

package/src/elements/Image.ts

@@ -1,6 +1,6 @@
 import { EFImage as EFImageElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Image = createComponent({
   tagName: "ef-image",

package/src/elements/Surface.ts

@@ -1,6 +1,6 @@
 import { EFSurface as EFSurfaceElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Surface = createComponent({
   tagName: "ef-surface",

package/src/elements/ThumbnailStrip.ts

@@ -1,6 +1,6 @@
 import { EFThumbnailStrip as EFThumbnailStripElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const ThumbnailStrip = createComponent({
   tagName: "ef-thumbnail-strip",

package/src/elements/Timegroup.ts

@@ -1,6 +1,6 @@
 import { EFTimegroup as EFTimegroupElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Timegroup = createComponent({
   tagName: "ef-timegroup",

package/src/elements/Video.ts

@@ -1,6 +1,6 @@
 import { EFVideo as EFVideoElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Video = createComponent({
   tagName: "ef-video",

package/src/elements/Waveform.ts

@@ -1,6 +1,6 @@
 import { EFWaveform as EFWaveformElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Waveform = createComponent({
   tagName: "ef-waveform",

package/src/gui/Configuration.ts

@@ -1,6 +1,6 @@
 import { EFConfiguration } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Configuration = createComponent({
   tagName: "ef-configuration",

package/src/gui/Controls.browsertest.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import { createRoot, hydrateRoot, type Root } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { test as baseTest, describe, vi } from "vitest";
+import { Timegroup } from "../elements/Timegroup";
+import { setIsomorphicEffect } from "../hooks/create-element";
+import { Configuration } from "./Configuration";
+import { Controls } from "./Controls";
+import { Preview } from "./Preview";
+import { TogglePlay } from "./TogglePlay";
+
+const test = baseTest.extend<{
+  root: Root;
+  markup: JSX.Element;
+  stringMarkup: string;
+  hydratedContainer: HTMLElement;
+  renderedContainer: HTMLElement;
+}>({
+  // biome-ignore lint/correctness/noEmptyPattern: Required by Vitest fixture syntax
+  markup: async ({}, use) => {
+    const markup = (
+      <>
+        <Configuration>
+          {/* biome-ignore lint/correctness/useUniqueElementIds: OK for test fixture with single instance */}
+          <Preview id="test-preview">
+            <Timegroup mode="fixed" duration="10s" />
+          </Preview>
+          <Controls target="test-preview">
+            <TogglePlay />
+          </Controls>
+        </Configuration>
+      </>
+    );
+    await use(markup);
+  },
+  stringMarkup: async ({ markup }, use) => {
+    setIsomorphicEffect(React.useEffect);
+    const stringMarkup = renderToString(markup);
+    setIsomorphicEffect(React.useLayoutEffect);
+    await use(stringMarkup);
+  },
+  hydratedContainer: async ({ stringMarkup, markup }, use) => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    container.innerHTML = stringMarkup;
+    hydrateRoot(container, markup);
+    await use(container);
+    container.remove();
+  },
+  // biome-ignore lint/correctness/noEmptyPattern: Required by Vitest fixture syntax
+  renderedContainer: async ({}, use) => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    await use(container);
+    container.remove();
+  },
+  root: async ({ renderedContainer, markup }, use) => {
+    const root = createRoot(renderedContainer);
+    root.render(markup);
+    await use(root);
+    root.unmount();
+  },
+});
+
+describe("Controls", () => {
+  describe("renderedContainer", () => {
+    test.skip("works", async ({ renderedContainer, expect }) => {
+      await vi.waitUntil(
+        () => {
+          return renderedContainer.innerHTML.includes("ef-controls");
+        },
+        { timeout: 5000 },
+      );
+      const controls =
+        // biome-ignore lint/style/noNonNullAssertion: Safe in tests where elements are guaranteed to exist
+        renderedContainer.getElementsByTagName("ef-controls")[0]!;
+      const preview =
+        // biome-ignore lint/style/noNonNullAssertion: Safe in tests where elements are guaranteed to exist
+        renderedContainer.getElementsByTagName("ef-preview")[0]!;
+      const togglePlay =
+        // biome-ignore lint/style/noNonNullAssertion: Safe in tests where elements are guaranteed to exist
+        renderedContainer.getElementsByTagName("ef-toggle-play")[0]!;
+
+      expect(controls.targetElement).toBe(preview);
+      expect(togglePlay.efContext).toBe(preview);
+    }, 5000);
+  });
+
+  describe("hydratedContainer", () => {
+    test("proxies contexts following hydration", async ({
+      hydratedContainer,
+      expect,
+    }) => {
+      await vi.waitUntil(
+        () => hydratedContainer.innerHTML.includes("ef-controls"),
+        { timeout: 5000 },
+      );
+      const controls =
+        // biome-ignore lint/style/noNonNullAssertion: Safe in tests where elements are guaranteed to exist
+        hydratedContainer.getElementsByTagName("ef-controls")[0]!;
+      const preview =
+        // biome-ignore lint/style/noNonNullAssertion: Safe in tests where elements are guaranteed to exist
+        hydratedContainer.getElementsByTagName("ef-preview")[0]!;
+      const togglePlay =
+        // biome-ignore lint/style/noNonNullAssertion: Safe in tests where elements are guaranteed to exist
+        hydratedContainer.getElementsByTagName("ef-toggle-play")[0]!;
+
+      expect(controls.targetElement).toBe(preview);
+      expect(togglePlay.efContext).toBe(preview);
+    }, 5000);
+  });
+});

package/src/gui/Controls.ts

@@ -1,6 +1,6 @@
 import { EFControls as EFControlsElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Controls = createComponent({
   tagName: "ef-controls",

package/src/gui/EFDial.ts

@@ -0,0 +1,12 @@
+import { EFDial as EFDialElement } from "@editframe/elements";
+import React from "react";
+import { createComponent } from "../hooks/create-element";
+
+export const Dial = createComponent({
+  tagName: "ef-dial",
+  elementClass: EFDialElement,
+  react: React,
+  events: {
+    onChange: "change",
+  },
+});

package/src/gui/EFResizableBox.ts

@@ -0,0 +1,12 @@
+import { EFResizableBox as EFResizableBoxElement } from "@editframe/elements";
+import React from "react";
+import { createComponent } from "../hooks/create-element";
+
+export const ResizableBox = createComponent({
+  tagName: "ef-resizable-box",
+  elementClass: EFResizableBoxElement,
+  react: React,
+  events: {
+    onBoundsChange: "bounds-change",
+  },
+});

package/src/gui/Filmstrip.ts

@@ -1,6 +1,6 @@
 import { EFFilmstrip as EFFilmstripElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Filmstrip = createComponent({
   tagName: "ef-filmstrip",

package/src/gui/FitScale.ts

@@ -1,6 +1,6 @@
 import { EFFitScale as EFFitScaleElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const FitScale = createComponent({
   tagName: "ef-fit-scale",

package/src/gui/FocusOverlay.ts

@@ -1,6 +1,6 @@
 import { EFFocusOverlay as EFFocusOverlayElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const FocusOverlay = createComponent({
   tagName: "ef-focus-overlay",

package/src/gui/Pause.ts

@@ -0,0 +1,9 @@
+import { EFPause as EFPauseElement } from "@editframe/elements";
+import React from "react";
+import { createComponent } from "../hooks/create-element";
+
+export const Pause = createComponent({
+  tagName: "ef-pause",
+  elementClass: EFPauseElement,
+  react: React,
+});

package/src/gui/Play.ts

@@ -0,0 +1,9 @@
+import { EFPlay as EFPlayElement } from "@editframe/elements";
+import React from "react";
+import { createComponent } from "../hooks/create-element";
+
+export const Play = createComponent({
+  tagName: "ef-play",
+  elementClass: EFPlayElement,
+  react: React,
+});

package/src/gui/Preview.ts

@@ -1,6 +1,6 @@
 import { EFPreview as EFPreviewElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Preview = createComponent({
   tagName: "ef-preview",

package/src/gui/Scrubber.ts

@@ -1,6 +1,6 @@
 import { EFScrubber as EFScrubberElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Scrubber = createComponent({
   tagName: "ef-scrubber",

package/src/gui/ToggleLoop.ts

@@ -1,6 +1,6 @@
 import { EFToggleLoop as EFToggleLoopElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const ToggleLoop = createComponent({
   tagName: "ef-toggle-loop",

package/src/gui/TogglePlay.ts

@@ -1,6 +1,6 @@
 import { EFTogglePlay as EFTogglePlayElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const TogglePlay = createComponent({
   tagName: "ef-toggle-play",

package/src/gui/Workbench.ts

@@ -1,6 +1,6 @@
 import { EFWorkbench as EFWorkbenchElement } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "../hooks/create-element";
 
 export const Workbench = createComponent({
   tagName: "ef-workbench",