@editframe/react 0.26.3-beta.0 → 0.30.0-beta.13

package/src/components/TimeDisplay.tsx

@@ -1,13 +0,0 @@
-import { EFTimeDisplay } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const TimeDisplay = createComponent({
-  tagName: "ef-time-display",
-  elementClass: EFTimeDisplay,
-  react: React,
-});
-
-export type TimeDisplayProps = {
-  className?: string;
-};

package/src/elements/Audio.ts

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

package/src/elements/Captions.ts

@@ -1,39 +0,0 @@
-import {
-  EFCaptionsActiveWord as EFCaptionsActiveWordElement,
-  EFCaptionsAfterActiveWord as EFCaptionsAfterActiveWordElement,
-  EFCaptionsBeforeActiveWord as EFCaptionsBeforeActiveWordElement,
-  EFCaptions as EFCaptionsElement,
-  EFCaptionsSegment as EFCaptionsSegmentElement,
-} from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Captions = createComponent({
-  tagName: "ef-captions",
-  elementClass: EFCaptionsElement,
-  react: React,
-});
-
-export const CaptionsActiveWord = createComponent({
-  tagName: "ef-captions-active-word",
-  elementClass: EFCaptionsActiveWordElement,
-  react: React,
-});
-
-export const CaptionsSegment = createComponent({
-  tagName: "ef-captions-segment",
-  elementClass: EFCaptionsSegmentElement,
-  react: React,
-});
-
-export const CaptionsBeforeActiveWord = createComponent({
-  tagName: "ef-captions-before-active-word",
-  elementClass: EFCaptionsBeforeActiveWordElement,
-  react: React,
-});
-
-export const CaptionsAfterActiveWord = createComponent({
-  tagName: "ef-captions-after-active-word",
-  elementClass: EFCaptionsAfterActiveWordElement,
-  react: React,
-});

package/src/elements/Image.ts

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

package/src/elements/Surface.ts

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

package/src/elements/ThumbnailStrip.ts

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

package/src/elements/Timegroup.ts

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

package/src/elements/Video.ts

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

package/src/elements/Waveform.ts

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

package/src/gui/Configuration.ts

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

package/src/gui/Controls.browsertest.tsx

@@ -1,112 +0,0 @@
-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,9 +0,0 @@
-import { EFControls as EFControlsElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Controls = createComponent({
-  tagName: "ef-controls",
-  elementClass: EFControlsElement,
-  react: React,
-});

package/src/gui/EFDial.ts

@@ -1,12 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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,9 +0,0 @@
-import { EFFilmstrip as EFFilmstripElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Filmstrip = createComponent({
-  tagName: "ef-filmstrip",
-  elementClass: EFFilmstripElement,
-  react: React,
-});

package/src/gui/FitScale.ts

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

package/src/gui/FocusOverlay.ts

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

package/src/gui/Pause.ts

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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,9 +0,0 @@
-import { EFPreview as EFPreviewElement } from "@editframe/elements";
-import React from "react";
-import { createComponent } from "../hooks/create-element";
-
-export const Preview = createComponent({
-  tagName: "ef-preview",
-  elementClass: EFPreviewElement,
-  react: React,
-});

package/src/gui/Scrubber.ts

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

package/src/gui/ToggleLoop.ts

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

package/src/gui/TogglePlay.ts

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

package/src/gui/Workbench.ts

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

package/src/hooks/create-element.ts

@@ -1,167 +0,0 @@
-import React from "react";
-
-let isomorphicEffect =
-  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-
-export function setIsomorphicEffect(
-  effect: typeof React.useLayoutEffect | typeof React.useEffect,
-) {
-  isomorphicEffect = effect;
-}
-
-const reservedReactProperties = new Set([
-  "children",
-  "localName",
-  "ref",
-  "style",
-  "className",
-]);
-const listenedEvents = new WeakMap<Element, Map<string, EventListenerObject>>();
-
-type Constructor<T> = { new (): T };
-type EventNames = Record<string, string>;
-
-type EventListeners<E extends EventNames> = {
-  [K in keyof E]?: (e: Event) => void;
-};
-
-type ElementProps<I> = Partial<Omit<I, keyof HTMLElement>>;
-type ComponentProps<I, E extends EventNames = {}> = Omit<
-  React.HTMLAttributes<I>,
-  keyof E | keyof ElementProps<I>
-> &
-  EventListeners<E> &
-  ElementProps<I>;
-
-export type ReactWebComponent<
-  I extends HTMLElement,
-  E extends EventNames = {},
-> = React.ForwardRefExoticComponent<
-  ComponentProps<I, E> & React.RefAttributes<I>
->;
-
-export interface Options<I extends HTMLElement, E extends EventNames = {}> {
-  react: typeof React;
-  tagName: string;
-  elementClass: Constructor<I>;
-  events?: E;
-  displayName?: string;
-}
-
-function addOrUpdateEventListener(
-  node: Element,
-  event: string,
-  listener?: (e?: Event) => void,
-) {
-  let events = listenedEvents.get(node);
-  if (!events) {
-    events = 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<E extends Element>(
-  node: E,
-  name: string,
-  value: unknown,
-  old: unknown,
-  events?: EventNames,
-) {
-  const event = events?.[name];
-  if (event) {
-    if (value !== old)
-      addOrUpdateEventListener(node, event, value as (e?: Event) => void);
-    return;
-  }
-  node[name as keyof E] = value as E[keyof E];
-  if (
-    (value === undefined || value === null) &&
-    name in HTMLElement.prototype
-  ) {
-    node.removeAttribute(name);
-  }
-}
-
-export function createComponent<
-  I extends HTMLElement,
-  E extends EventNames = {},
->({
-  react: React,
-  tagName,
-  elementClass,
-  events,
-  displayName,
-}: Options<I, E>): ReactWebComponent<I, E> {
-  const eventProps = new Set(Object.keys(events ?? {}));
-
-  const ReactComponent = React.forwardRef<I, ComponentProps<I, E>>(
-    (props, ref) => {
-      const elementRef = React.useRef<I | null>(null);
-      const prevPropsRef = React.useRef(new Map<string, unknown>());
-
-      const reactProps: Record<string, unknown> = {
-        suppressHydrationWarning: true,
-      };
-      const elementProps: Record<string, unknown> = {};
-
-      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 = new Map<string, unknown>();
-        for (const key in elementProps) {
-          setProperty(
-            elementRef.current,
-            key,
-            props[key as keyof typeof props],
-            prevPropsRef.current.get(key),
-            events,
-          );
-          prevPropsRef.current.delete(key);
-          newProps.set(key, props[key as keyof typeof props]);
-        }
-        for (const [key, value] of prevPropsRef.current) {
-          setProperty(elementRef.current, key, undefined, value, events);
-        }
-        prevPropsRef.current = newProps;
-
-        // Remove defer-hydration if present
-        elementRef.current.removeAttribute("defer-hydration");
-      }, [props]);
-
-      return React.createElement(tagName, {
-        ...reactProps,
-        ref: (node: I) => {
-          elementRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        },
-      });
-    },
-  );
-
-  ReactComponent.displayName = displayName ?? elementClass.name;
-  return ReactComponent as ReactWebComponent<I, E>;
-}