@editframe/react 0.7.0-beta.9 → 0.8.0-beta.10

package/dist/create-component.d.ts

@@ -0,0 +1,88 @@
+import { default as React } from 'react';
+type DistributiveOmit<T, K extends string | number | symbol> = T extends any ? K extends keyof T ? Omit<T, K> : T : T;
+type PropsWithoutRef<T> = DistributiveOmit<T, "ref">;
+/**
+ * Creates a type to be used for the props of a web component used directly in
+ * React JSX.
+ *
+ * Example:
+ *
+ * ```ts
+ * declare module "react" {
+ *   namespace JSX {
+ *     interface IntrinsicElements {
+ *       'x-foo': WebComponentProps<XFoo>;
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export type WebComponentProps<I extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<I>, I> & ElementProps<I>;
+/**
+ * Type of the React component wrapping the web component. This is the return
+ * type of `createComponent`.
+ */
+export type ReactWebComponent<I extends HTMLElement, E extends EventNames = {}> = React.ForwardRefExoticComponent<PropsWithoutRef<ComponentProps<I, E>> & React.RefAttributes<I>>;
+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>;
+/**
+ * Type used to cast an event name with an event type when providing the
+ * `events` option to `createComponent` for better typing of the event handler
+ * prop.
+ *
+ * Example:
+ *
+ * ```ts
+ * const FooComponent = createComponent({
+ *   ...
+ *   events: {
+ *     onfoo: 'foo' as EventName<FooEvent>,
+ *   }
+ * });
+ * ```
+ *
+ * `onfoo` prop will have the type `(e: FooEvent) => void`.
+ */
+export type EventName<T extends Event = Event> = string & {
+    __eventType: T;
+};
+type EventNames = Record<string, EventName | string>;
+type EventListeners<R extends EventNames> = {
+    [K in keyof R]?: R[K] extends EventName ? (e: R[K]["__eventType"]) => void : (e: Event) => void;
+};
+export interface Options<I extends HTMLElement, E extends EventNames = {}> {
+    react: typeof React;
+    tagName: string;
+    elementClass: Constructor<I>;
+    events?: E;
+    displayName?: string;
+}
+type Constructor<T> = {
+    new (): T;
+};
+/**
+ * Creates a React component for a custom element. Properties are distinguished
+ * from attributes automatically, and events can be configured so they are added
+ * to the custom element as event listeners.
+ *
+ * @param options An options bag containing the parameters needed to generate a
+ * wrapped web component.
+ *
+ * @param options.react The React module, typically imported from the `react`
+ * npm package.
+ * @param options.tagName The custom element tag name registered via
+ * `customElements.define`.
+ * @param options.elementClass The custom element class registered via
+ * `customElements.define`.
+ * @param options.events An object listing events to which the component can
+ * listen. The object keys are the event property names passed in via React
+ * props and the object values are the names of the corresponding events
+ * generated by the custom element. For example, given `{onactivate:
+ * 'activate'}` an event function may be passed via the component's `onactivate`
+ * prop and will be called when the custom element fires its `activate` event.
+ * @param options.displayName A React component display name, used in debugging
+ * messages. Default value is inferred from the name of custom element class
+ * registered via `customElements.define`.
+ */
+export declare const createComponent: <I extends HTMLElement, E extends EventNames = {}>({ react: React, tagName, elementClass, events, displayName, }: Options<I, E>) => ReactWebComponent<I, E>;
+export {};

package/dist/create-component.js

@@ -0,0 +1,128 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const reservedReactProperties = /* @__PURE__ */ new Set([
+  "id",
+  "children",
+  "localName",
+  "ref",
+  "style",
+  "className"
+]);
+const listenedEvents = /* @__PURE__ */ new WeakMap();
+const addOrUpdateEventListener = (node, event, listener) => {
+  let events = listenedEvents.get(node);
+  if (events === void 0) {
+    listenedEvents.set(node, events = /* @__PURE__ */ new Map());
+  }
+  let handler = events.get(event);
+  if (listener !== void 0) {
+    if (handler === void 0) {
+      events.set(event, handler = { handleEvent: listener });
+      node.addEventListener(event, handler);
+    } else {
+      handler.handleEvent = listener;
+    }
+  } else if (handler !== void 0) {
+    events.delete(event);
+    node.removeEventListener(event, handler);
+  }
+};
+const setProperty = (node, name, value, old, events) => {
+  const event = events?.[name];
+  if (event !== void 0) {
+    if (value !== old) {
+      addOrUpdateEventListener(node, event, value);
+    }
+    return;
+  }
+  node[name] = value;
+  if ((value === void 0 || value === null) && name in HTMLElement.prototype) {
+    node.removeAttribute(name);
+  }
+};
+const createComponent = ({
+  react: React,
+  tagName,
+  elementClass,
+  events,
+  displayName
+}) => {
+  const eventProps = new Set(Object.keys(events ?? {}));
+  {
+    for (const p of reservedReactProperties) {
+      if (p in elementClass.prototype && !(p in HTMLElement.prototype)) {
+        console.warn(
+          `${tagName} contains property ${p} which is a React reserved property. It will be used by React and not set on the element.`
+        );
+      }
+    }
+  }
+  const ReactComponent = React.forwardRef((props, ref) => {
+    const prevElemPropsRef = React.useRef(/* @__PURE__ */ new Map());
+    const elementRef = React.useRef(null);
+    const reactProps = {};
+    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;
+        continue;
+      }
+      reactProps[k] = v;
+    }
+    {
+      React.useLayoutEffect(() => {
+        if (elementRef.current === null) {
+          return;
+        }
+        const newElemProps = /* @__PURE__ */ new Map();
+        for (const key in elementProps) {
+          setProperty(
+            elementRef.current,
+            key,
+            props[key],
+            prevElemPropsRef.current.get(key),
+            events
+          );
+          prevElemPropsRef.current.delete(key);
+          newElemProps.set(key, props[key]);
+        }
+        for (const [key, value] of prevElemPropsRef.current) {
+          setProperty(elementRef.current, key, void 0, value, events);
+        }
+        prevElemPropsRef.current = newElemProps;
+      });
+      React.useLayoutEffect(() => {
+        elementRef.current?.removeAttribute("defer-hydration");
+      }, []);
+    }
+    {
+      reactProps.suppressHydrationWarning = true;
+    }
+    return React.createElement(tagName, {
+      ...reactProps,
+      ref: React.useCallback(
+        (node) => {
+          elementRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref !== null) {
+            ref.current = node;
+          }
+        },
+        [ref]
+      )
+    });
+  });
+  ReactComponent.displayName = displayName ?? elementClass.name;
+  return ReactComponent;
+};
+export {
+  createComponent
+};

package/dist/elements/Audio.d.ts

@@ -0,0 +1,2 @@
+import { EFAudio as EFAudioElement } from '../../../elements/src';
+export declare const Audio: import('@lit/react').ReactWebComponent<EFAudioElement, {}>;

package/dist/elements/Audio.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFAudio } from "@editframe/elements";
+const Audio = createComponent({
+  tagName: "ef-audio",
+  elementClass: EFAudio,
+  react: React
+});
+export {
+  Audio
+};

package/dist/elements/Captions.d.ts

@@ -0,0 +1,3 @@
+import { EFCaptions as EFCaptionsElement, EFCaptionsActiveWord as EFCaptionsActiveWordElement } from '../../../elements/src';
+export declare const Captions: import('@lit/react').ReactWebComponent<EFCaptionsElement, {}>;
+export declare const CaptionsActiveWord: import('@lit/react').ReactWebComponent<EFCaptionsActiveWordElement, {}>;

package/dist/elements/Captions.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFCaptions, EFCaptionsActiveWord } from "@editframe/elements";
+const Captions = createComponent({
+  tagName: "ef-captions",
+  elementClass: EFCaptions,
+  react: React
+});
+const CaptionsActiveWord = createComponent({
+  tagName: "ef-captions-active-word",
+  elementClass: EFCaptionsActiveWord,
+  react: React
+});
+export {
+  Captions,
+  CaptionsActiveWord
+};

package/dist/elements/Image.d.ts

@@ -0,0 +1,2 @@
+import { EFImage as EFImageElement } from '../../../elements/src';
+export declare const Image: import('@lit/react').ReactWebComponent<EFImageElement, {}>;

package/dist/elements/Image.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFImage } from "@editframe/elements";
+const Image = createComponent({
+  tagName: "ef-image",
+  elementClass: EFImage,
+  react: React
+});
+export {
+  Image
+};

package/dist/elements/Timegroup.d.ts

@@ -0,0 +1,2 @@
+import { EFTimegroup as EFTimegroupElement } from '../../../elements/src';
+export declare const Timegroup: import('../create-component.ts').ReactWebComponent<EFTimegroupElement, {}>;

package/dist/elements/Timegroup.js

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

package/dist/elements/Video.d.ts

@@ -0,0 +1,2 @@
+import { EFVideo as EFVideoElement } from '../../../elements/src';
+export declare const Video: import('@lit/react').ReactWebComponent<EFVideoElement, {}>;

package/dist/elements/Video.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFVideo } from "@editframe/elements";
+const Video = createComponent({
+  tagName: "ef-video",
+  elementClass: EFVideo,
+  react: React
+});
+export {
+  Video
+};

package/dist/elements/Waveform.d.ts

@@ -0,0 +1,2 @@
+import { EFWaveform as EFWaveformElement } from '../../../elements/src';
+export declare const Waveform: import('@lit/react').ReactWebComponent<EFWaveformElement, {}>;

package/dist/elements/Waveform.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFWaveform } from "@editframe/elements";
+const Waveform = createComponent({
+  tagName: "ef-waveform",
+  elementClass: EFWaveform,
+  react: React
+});
+export {
+  Waveform
+};

package/dist/gui/Filmstrip.d.ts

@@ -0,0 +1,2 @@
+import { EFFilmstrip as EFFilmstripElement } from '../../../elements/src';
+export declare const Filmstrip: import('@lit/react').ReactWebComponent<EFFilmstripElement, {}>;

package/dist/gui/Filmstrip.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFFilmstrip } from "@editframe/elements";
+const Filmstrip = createComponent({
+  tagName: "ef-filmstrip",
+  elementClass: EFFilmstrip,
+  react: React
+});
+export {
+  Filmstrip
+};

package/dist/gui/Preview.d.ts

@@ -0,0 +1,2 @@
+import { EFPreview as EFPreviewElement } from '../../../elements/src';
+export declare const EFPreview: import('@lit/react').ReactWebComponent<EFPreviewElement, {}>;

package/dist/gui/Preview.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFPreview as EFPreview$1 } from "@editframe/elements";
+const EFPreview = createComponent({
+  tagName: "ef-preview",
+  elementClass: EFPreview$1,
+  react: React
+});
+export {
+  EFPreview
+};

package/dist/gui/ToggleLoop.d.ts

@@ -0,0 +1,2 @@
+import { EFToggleLoop as EFToggleLoopElement } from '../../../elements/src';
+export declare const ToggleLoop: import('@lit/react').ReactWebComponent<EFToggleLoopElement, {}>;

package/dist/gui/ToggleLoop.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFToggleLoop } from "@editframe/elements";
+const ToggleLoop = createComponent({
+  tagName: "ef-toggle-loop",
+  elementClass: EFToggleLoop,
+  react: React
+});
+export {
+  ToggleLoop
+};

package/dist/gui/TogglePlay.d.ts

@@ -0,0 +1,2 @@
+import { EFTogglePlay as EFTogglePlayElement } from '../../../elements/src';
+export declare const TogglePlay: import('@lit/react').ReactWebComponent<EFTogglePlayElement, {}>;

package/dist/gui/TogglePlay.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFTogglePlay } from "@editframe/elements";
+const TogglePlay = createComponent({
+  tagName: "ef-toggle-play",
+  elementClass: EFTogglePlay,
+  react: React
+});
+export {
+  TogglePlay
+};

package/dist/gui/Workbench.d.ts

@@ -0,0 +1,2 @@
+import { EFWorkbench as EFWorkbenchElement } from '../../../elements/src';
+export declare const Workbench: import('@lit/react').ReactWebComponent<EFWorkbenchElement, {}>;

package/dist/gui/Workbench.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFWorkbench } from "@editframe/elements";
+const Workbench = createComponent({
+  tagName: "ef-workbench",
+  elementClass: EFWorkbench,
+  react: React
+});
+export {
+  Workbench
+};

package/dist/hooks/useTimingInfo.d.ts

@@ -0,0 +1,7 @@
+import { EFTimegroup } from '../../../elements/src';
+export declare const useTimingInfo: (timegroupRef?: React.RefObject<EFTimegroup>) => {
+    ref: import('react').RefObject<EFTimegroup>;
+    ownCurrentTimeMs: number;
+    durationMs: number;
+    percentComplete: number;
+};

package/dist/hooks/useTimingInfo.js

@@ -0,0 +1,35 @@
+import { useState, useEffect, useRef } 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 };
+};
+export {
+  useTimingInfo
+};

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+export { 
+/** @deprecated Use `Audio` instead of `EFAudio`. Exports starting `EF*` wil be removed in a future release. */
+Audio as EFAudio, Audio, } from './elements/Audio.ts';
+export { 
+/** @deprecated Use `Captions` instead of `EFCaptions`. Exports starting `EF*` wil be removed in a future release. */
+Captions as EFCaptions, Captions, 
+/** @deprecated Use `CaptionsActiveWord` instead of `EFCaptionsActiveWord`. Exports starting `EF*` wil be removed in a future release. */
+CaptionsActiveWord as EFCaptionsActiveWord, CaptionsActiveWord, } from './elements/Captions.ts';
+export { Image as EFImage, Image, } from './elements/Image.ts';
+export { 
+/** @deprecated Use `Timegroup` instead of `EFTimegroup`. Exports starting `EF*` wil be removed in a future release. */
+Timegroup as EFTimegroup, Timegroup, } from './elements/Timegroup.ts';
+export { 
+/** @deprecated Use `Video` instead of `EFVideo`. Exports starting `EF*` wil be removed in a future release. */
+Video as EFVideo, Video, } from './elements/Video.ts';
+export { 
+/** @deprecated Use `Waveform` instead of `EFWaveform`. Exports starting `EF*` wil be removed in a future release. */
+Waveform as EFWaveform, Waveform, } from './elements/Waveform.ts';
+export { 
+/** @deprecated Use `Workbench` instead of `EFWorkbench`. Exports starting `EF*` wil be removed in a future release. */
+Workbench as EFWorkbench, Workbench, } from './gui/Workbench.ts';
+export { 
+/** @deprecated Use `Filmstrip` instead of `EFFilmstrip`. Exports starting `EF*` wil be removed in a future release. */
+Filmstrip as EFFilmstrip, Filmstrip, } from './gui/Filmstrip.ts';
+export { 
+/** @deprecated Use `Preview` instead of `EFPreview`. Exports starting `EF*` wil be removed in a future release. */
+EFPreview, EFPreview as Preview, } from './gui/Preview.ts';
+export { TogglePlay } from './gui/TogglePlay.ts';
+export { ToggleLoop } from './gui/ToggleLoop.ts';
+export { useTimingInfo } from './hooks/useTimingInfo.ts';

package/dist/index.js

@@ -0,0 +1,37 @@
+import { Audio, Audio as Audio2 } from "./elements/Audio.js";
+import { Captions, CaptionsActiveWord, Captions as Captions2, CaptionsActiveWord as CaptionsActiveWord2 } from "./elements/Captions.js";
+import { Image, Image as Image2 } from "./elements/Image.js";
+import { Timegroup, Timegroup as Timegroup2 } from "./elements/Timegroup.js";
+import { Video, Video as Video2 } from "./elements/Video.js";
+import { Waveform, Waveform as Waveform2 } from "./elements/Waveform.js";
+import { Workbench, Workbench as Workbench2 } from "./gui/Workbench.js";
+import { Filmstrip, Filmstrip as Filmstrip2 } from "./gui/Filmstrip.js";
+import { EFPreview, EFPreview as EFPreview2 } from "./gui/Preview.js";
+import { TogglePlay } from "./gui/TogglePlay.js";
+import { ToggleLoop } from "./gui/ToggleLoop.js";
+import { useTimingInfo } from "./hooks/useTimingInfo.js";
+export {
+  Audio,
+  Captions,
+  CaptionsActiveWord,
+  Audio2 as EFAudio,
+  Captions2 as EFCaptions,
+  CaptionsActiveWord2 as EFCaptionsActiveWord,
+  Filmstrip as EFFilmstrip,
+  Image as EFImage,
+  EFPreview,
+  Timegroup as EFTimegroup,
+  Video as EFVideo,
+  Waveform as EFWaveform,
+  Workbench as EFWorkbench,
+  Filmstrip2 as Filmstrip,
+  Image2 as Image,
+  EFPreview2 as Preview,
+  Timegroup2 as Timegroup,
+  ToggleLoop,
+  TogglePlay,
+  Video2 as Video,
+  Waveform2 as Waveform,
+  Workbench2 as Workbench,
+  useTimingInfo
+};

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "@editframe/react",
-  "version": "0.7.0-beta.9",
+  "version": "0.8.0-beta.10",
   "description": "",
   "exports": {
     ".": {
       "import": {
-        "default": "./dist/index.js",
-        "types": "./dist/packages/react/src/index.d.ts"
-      },
-      "require": {
-        "default": "./dist/index.cjs",
-        "types": "./dist/packages/react/src/index.d.ts"
+        "types": "./dist/packages/react/src/index.d.ts",
+        "default": "./dist/index.js"
       }
     }
   },
@@ -23,17 +19,19 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/elements": "0.7.0-beta.9",
+    "@editframe/elements": "0.8.0-beta.10",
     "@lit/react": "^1.0.5",
     "debug": "^4.3.5",
     "react": "^18.3.0",
     "react-dom": "^18.3.0"
   },
   "devDependencies": {
+    "@types/node": "^22.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
-    "vite-plugin-dts": "^3.9.1",
+    "typescript": "^5.5.4",
+    "vite-plugin-dts": "^4.0.3",
     "vite-tsconfig-paths": "^4.3.2"
   }
 }

package/src/elements/{EFAudio.ts → Audio.ts}

@@ -2,7 +2,7 @@ import React from "react";
 import { createComponent } from "@lit/react";
 import { EFAudio as EFAudioElement } from "@editframe/elements";
 
-export const EFAudio = createComponent({
+export const Audio = createComponent({
   tagName: "ef-audio",
   elementClass: EFAudioElement,
   react: React,

package/src/elements/{EFCaptions.ts → Captions.ts}

@@ -5,13 +5,13 @@ import {
   EFCaptionsActiveWord as EFCaptionsActiveWordElement,
 } from "@editframe/elements";
 
-export const EFCaptions = createComponent({
+export const Captions = createComponent({
   tagName: "ef-captions",
   elementClass: EFCaptionsElement,
   react: React,
 });
 
-export const EFCaptionsActiveWord = createComponent({
+export const CaptionsActiveWord = createComponent({
   tagName: "ef-captions-active-word",
   elementClass: EFCaptionsActiveWordElement,
   react: React,

package/src/elements/{EFImage.ts → Image.ts}

@@ -2,7 +2,7 @@ import React from "react";
 import { createComponent } from "@lit/react";
 import { EFImage as EFImageElement } from "@editframe/elements";
 
-export const EFImage = createComponent({
+export const Image = createComponent({
   tagName: "ef-image",
   elementClass: EFImageElement,
   react: React,

package/src/elements/{EFTimegroup.ts → Timegroup.ts}

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

package/src/elements/{EFVideo.ts → Video.ts}

@@ -2,7 +2,7 @@ import React from "react";
 import { createComponent } from "@lit/react";
 import { EFVideo as EFVideoElement } from "@editframe/elements";
 
-export const EFVideo = createComponent({
+export const Video = createComponent({
   tagName: "ef-video",
   elementClass: EFVideoElement,
   react: React,

package/src/elements/{EFWaveform.ts → Waveform.ts}

@@ -2,7 +2,7 @@ import React from "react";
 import { createComponent } from "@lit/react";
 import { EFWaveform as EFWaveformElement } from "@editframe/elements";
 
-export const EFWaveform = createComponent({
+export const Waveform = createComponent({
   tagName: "ef-waveform",
   elementClass: EFWaveformElement,
   react: React,

package/src/gui/{EFFilmstrip.ts → Filmstrip.ts}

@@ -2,7 +2,7 @@ import React from "react";
 import { createComponent } from "@lit/react";
 import { EFFilmstrip as EFFilmstripElement } from "@editframe/elements";
 
-export const EFFilmstrip = createComponent({
+export const Filmstrip = createComponent({
   tagName: "ef-filmstrip",
   elementClass: EFFilmstripElement,
   react: React,

package/src/gui/Preview.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { EFPreview as EFPreviewElement } from "@editframe/elements";
+
+export const EFPreview = createComponent({
+  tagName: "ef-preview",
+  elementClass: EFPreviewElement,
+  react: React,
+});

package/src/gui/ToggleLoop.ts

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

package/src/gui/TogglePlay.ts

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

package/src/gui/{EFWorkbench.ts → Workbench.ts}

@@ -2,7 +2,7 @@ import React from "react";
 import { createComponent } from "@lit/react";
 import { EFWorkbench as EFWorkbenchElement } from "@editframe/elements";
 
-export const EFWorkbench = createComponent({
+export const Workbench = createComponent({
   tagName: "ef-workbench",
   elementClass: EFWorkbenchElement,
   react: React,

package/CHANGELOG.md

@@ -1,8 +0,0 @@
-# @editframe/react
-
-## 0.7.0-beta.9
-
-### Patch Changes
-
-- Updated dependencies [[`17c4452`](https://github.com/editframe/elements/commit/17c4452f679b042ac0accd9bf520728455e8cc2c)]:
-  - @editframe/elements@0.7.0-beta.9

package/postcss.config.cjs

@@ -1,6 +0,0 @@
-const path = require("node:path");
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-  },
-};

package/src/create-component.ts

@@ -1,347 +0,0 @@
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-import type React from "react";
-
-const NODE_MODE = false;
-const DEV_MODE = true;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type DistributiveOmit<T, K extends string | number | symbol> = T extends any
-  ? K extends keyof T
-    ? Omit<T, K>
-    : T
-  : T;
-type PropsWithoutRef<T> = DistributiveOmit<T, "ref">;
-
-/**
- * Creates a type to be used for the props of a web component used directly in
- * React JSX.
- *
- * Example:
- *
- * ```ts
- * declare module "react" {
- *   namespace JSX {
- *     interface IntrinsicElements {
- *       'x-foo': WebComponentProps<XFoo>;
- *     }
- *   }
- * }
- * ```
- */
-export type WebComponentProps<I extends HTMLElement> = React.DetailedHTMLProps<
-  React.HTMLAttributes<I>,
-  I
-> &
-  ElementProps<I>;
-
-/**
- * Type of the React component wrapping the web component. This is the return
- * type of `createComponent`.
- */
-export type ReactWebComponent<
-  I extends HTMLElement,
-  E extends EventNames = {},
-> = React.ForwardRefExoticComponent<
-  // TODO(augustjk): Remove and use `React.PropsWithoutRef` when
-  // https://github.com/preactjs/preact/issues/4124 is fixed.
-  PropsWithoutRef<ComponentProps<I, E>> & React.RefAttributes<I>
->;
-
-// Props derived from custom element class. Currently has limitations of making
-// all properties optional and also surfaces life cycle methods in autocomplete.
-// TODO(augustjk) Consider omitting keyof LitElement to remove "internal"
-// lifecycle methods or allow user to explicitly provide props.
-type ElementProps<I> = Partial<Omit<I, keyof HTMLElement>>;
-
-// Acceptable props to the React component.
-type ComponentProps<I, E extends EventNames = {}> = Omit<
-  React.HTMLAttributes<I>,
-  // Prefer type of provided event handler props or those on element over
-  // built-in HTMLAttributes
-  keyof E | keyof ElementProps<I>
-> &
-  EventListeners<E> &
-  ElementProps<I>;
-
-/**
- * Type used to cast an event name with an event type when providing the
- * `events` option to `createComponent` for better typing of the event handler
- * prop.
- *
- * Example:
- *
- * ```ts
- * const FooComponent = createComponent({
- *   ...
- *   events: {
- *     onfoo: 'foo' as EventName<FooEvent>,
- *   }
- * });
- * ```
- *
- * `onfoo` prop will have the type `(e: FooEvent) => void`.
- */
-export type EventName<T extends Event = Event> = string & {
-  __eventType: T;
-};
-
-// A key value map matching React prop names to event names.
-type EventNames = Record<string, EventName | string>;
-
-// A map of expected event listener types based on EventNames.
-type EventListeners<R extends EventNames> = {
-  [K in keyof R]?: R[K] extends EventName
-    ? (e: R[K]["__eventType"]) => void
-    : (e: Event) => void;
-};
-
-export interface Options<I extends HTMLElement, E extends EventNames = {}> {
-  react: typeof React;
-  tagName: string;
-  elementClass: Constructor<I>;
-  events?: E;
-  displayName?: string;
-}
-
-type Constructor<T> = { new (): T };
-
-const reservedReactProperties = new Set([
-  "id",
-  "children",
-  "localName",
-  "ref",
-  "style",
-  "className",
-]);
-
-const listenedEvents = new WeakMap<Element, Map<string, EventListenerObject>>();
-
-/**
- * Adds an event listener for the specified event to the given node. In the
- * React setup, there should only ever be one event listener. Thus, for
- * efficiency only one listener is added and the handler for that listener is
- * updated to point to the given listener function.
- */
-const addOrUpdateEventListener = (
-  node: Element,
-  event: string,
-  listener: (event?: Event) => void,
-) => {
-  let events = listenedEvents.get(node);
-  if (events === undefined) {
-    // biome-ignore lint/suspicious/noAssignInExpressions: copied from @lit
-    listenedEvents.set(node, (events = new Map()));
-  }
-  let handler = events.get(event);
-  if (listener !== undefined) {
-    // If necessary, add listener and track handler
-    if (handler === undefined) {
-      // biome-ignore lint/suspicious/noAssignInExpressions: copied from @lit
-      events.set(event, (handler = { handleEvent: listener }));
-      node.addEventListener(event, handler);
-      // Otherwise just update the listener with new value
-    } else {
-      handler.handleEvent = listener;
-    }
-    // Remove listener if one exists and value is undefined
-  } else if (handler !== undefined) {
-    events.delete(event);
-    node.removeEventListener(event, handler);
-  }
-};
-
-/**
- * Sets properties and events on custom elements. These properties and events
- * have been pre-filtered so we know they should apply to the custom element.
- */
-const setProperty = <E extends Element>(
-  node: E,
-  name: string,
-  value: unknown,
-  old: unknown,
-  events?: EventNames,
-) => {
-  const event = events?.[name];
-  // Dirty check event value.
-  if (event !== undefined) {
-    if (value !== old) {
-      addOrUpdateEventListener(node, event, value as (e?: Event) => void);
-    }
-    return;
-  }
-  // But don't dirty check properties; elements are assumed to do this.
-  node[name as keyof E] = value as E[keyof E];
-
-  // This block is to replicate React's behavior for attributes of native
-  // elements where `undefined` or `null` values result in attributes being
-  // removed.
-  // https://github.com/facebook/react/blob/899cb95f52cc83ab5ca1eb1e268c909d3f0961e7/packages/react-dom-bindings/src/client/DOMPropertyOperations.js#L107-L141
-  //
-  // It's only needed here for native HTMLElement properties that reflect
-  // attributes of the same name but don't have that behavior like "id" or
-  // "draggable".
-  if (
-    (value === undefined || value === null) &&
-    name in HTMLElement.prototype
-  ) {
-    node.removeAttribute(name);
-  }
-};
-
-/**
- * Creates a React component for a custom element. Properties are distinguished
- * from attributes automatically, and events can be configured so they are added
- * to the custom element as event listeners.
- *
- * @param options An options bag containing the parameters needed to generate a
- * wrapped web component.
- *
- * @param options.react The React module, typically imported from the `react`
- * npm package.
- * @param options.tagName The custom element tag name registered via
- * `customElements.define`.
- * @param options.elementClass The custom element class registered via
- * `customElements.define`.
- * @param options.events An object listing events to which the component can
- * listen. The object keys are the event property names passed in via React
- * props and the object values are the names of the corresponding events
- * generated by the custom element. For example, given `{onactivate:
- * 'activate'}` an event function may be passed via the component's `onactivate`
- * prop and will be called when the custom element fires its `activate` event.
- * @param options.displayName A React component display name, used in debugging
- * messages. Default value is inferred from the name of custom element class
- * registered via `customElements.define`.
- */
-export const 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 ?? {}));
-
-  if (DEV_MODE) {
-    for (const p of reservedReactProperties) {
-      if (p in elementClass.prototype && !(p in HTMLElement.prototype)) {
-        // Note, this effectively warns only for `ref` since the other
-        // reserved props are on HTMLElement.prototype. To address this
-        // would require crawling down the prototype, which doesn't feel worth
-        // it since implementing these properties on an element is extremely
-        // rare.
-        console.warn(
-          `${tagName} contains property ${p} which is a React reserved property. It will be used by React and not set on the element.`,
-        );
-      }
-    }
-  }
-
-  type Props = ComponentProps<I, E>;
-
-  const ReactComponent = React.forwardRef<I, Props>((props, ref) => {
-    const prevElemPropsRef = React.useRef(new Map());
-    const elementRef = React.useRef<I | null>(null);
-
-    // Props to be passed to React.createElement
-    const reactProps: Record<string, unknown> = {};
-    // Props to be set on element with setProperty
-    const elementProps: Record<string, unknown> = {};
-
-    for (const [k, v] of Object.entries(props)) {
-      if (reservedReactProperties.has(k)) {
-        // React does *not* handle `className` for custom elements so
-        // coerce it to `class` so it's handled correctly.
-        reactProps[k === "className" ? "class" : k] = v;
-        continue;
-      }
-
-      if (eventProps.has(k) || k in elementClass.prototype) {
-        elementProps[k] = v;
-        continue;
-      }
-
-      reactProps[k] = v;
-    }
-
-    // useLayoutEffect produces warnings during server rendering.
-    if (!NODE_MODE) {
-      // This one has no dependency array so it'll run on every re-render.
-      React.useLayoutEffect(() => {
-        if (elementRef.current === null) {
-          return;
-        }
-        const newElemProps = new Map();
-        for (const key in elementProps) {
-          setProperty(
-            elementRef.current,
-            key,
-            props[key],
-            prevElemPropsRef.current.get(key),
-            events,
-          );
-          prevElemPropsRef.current.delete(key);
-          newElemProps.set(key, props[key]);
-        }
-        // "Unset" any props from previous render that no longer exist.
-        // Setting to `undefined` seems like the correct thing to "unset"
-        // but currently React will set it as `null`.
-        // See https://github.com/facebook/react/issues/28203
-        for (const [key, value] of prevElemPropsRef.current) {
-          setProperty(elementRef.current, key, undefined, value, events);
-        }
-        prevElemPropsRef.current = newElemProps;
-      });
-
-      // Empty dependency array so this will only run once after first render.
-      React.useLayoutEffect(() => {
-        elementRef.current?.removeAttribute("defer-hydration");
-      }, []);
-    }
-
-    if (NODE_MODE) {
-      // If component is to be server rendered with `@lit/ssr-react`, pass
-      // element properties in a special bag to be set by the server-side
-      // element renderer.
-      if (
-        (React.createElement.name === "litPatchedCreateElement" ||
-          // @ts-expect-error globalThis is any
-          globalThis.litSsrReactEnabled) &&
-        Object.keys(elementProps).length
-      ) {
-        // This property needs to remain unminified.
-        reactProps._$litProps$ = elementProps;
-      }
-    } else {
-      // Suppress hydration warning for server-rendered attributes.
-      // This property needs to remain unminified.
-      reactProps.suppressHydrationWarning = true;
-    }
-
-    return React.createElement(tagName, {
-      ...reactProps,
-      ref: React.useCallback(
-        (node: I) => {
-          elementRef.current = node;
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref !== null) {
-            ref.current = node;
-          }
-        },
-        [ref],
-      ),
-    });
-  });
-
-  ReactComponent.displayName = displayName ?? elementClass.name;
-
-  return ReactComponent;
-};

package/src/index.ts

@@ -1,11 +0,0 @@
-export { EFAudio } from "./elements/EFAudio";
-export { EFCaptions, EFCaptionsActiveWord } from "./elements/EFCaptions";
-export { EFImage } from "./elements/EFImage";
-export { EFTimegroup } from "./elements/EFTimegroup";
-export { EFVideo } from "./elements/EFVideo";
-export { EFWaveform } from "./elements/EFWaveform";
-
-export { EFWorkbench } from "./gui/EFWorkbench";
-export { EFFilmstrip } from "./gui/EFFilmstrip";
-
-export { useTimingInfo } from "./hooks/useTimingInfo";

package/tailwind.config.ts

@@ -1,10 +0,0 @@
-import type { Config } from "tailwindcss";
-
-module.exports = {
-  content: ["./src/**/*.ts"],
-
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-} satisfies Config;

package/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "include": ["src/**/*.ts"],
-  "extends": "../../tsconfig.json"
-}

package/vite.config.ts

@@ -1,8 +0,0 @@
-import path from "node:path";
-
-import { defineViteBuildConfig } from "../defineViteBuildConfig";
-
-export default defineViteBuildConfig({
-  root: path.dirname(new URL(import.meta.url).pathname),
-  name: "editframe-react",
-});