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

package/dist/create-component.d.ts

@@ -0,0 +1,89 @@
+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/EFAudio.d.ts

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

package/dist/elements/EFAudio.js

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

package/dist/elements/EFCaptions.d.ts

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

package/dist/elements/EFCaptions.js

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

package/dist/elements/EFImage.d.ts

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

package/dist/elements/EFImage.js

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

package/dist/elements/EFTimegroup.d.ts

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

package/dist/elements/EFTimegroup.js

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

package/dist/elements/EFVideo.d.ts

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

package/dist/elements/EFVideo.js

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

package/dist/elements/EFWaveform.d.ts

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

package/dist/elements/EFWaveform.js

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

package/dist/gui/EFFilmstrip.d.ts

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

package/dist/gui/EFFilmstrip.js

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

package/dist/gui/EFPreview.d.ts

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

package/dist/gui/EFPreview.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/EFWorkbench.d.ts

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

package/dist/gui/EFWorkbench.js

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

package/dist/hooks/useTimingInfo.d.ts

@@ -0,0 +1,8 @@
+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,10 @@
+export { EFAudio } from './elements/EFAudio.ts';
+export { EFCaptions, EFCaptionsActiveWord } from './elements/EFCaptions.ts';
+export { EFImage } from './elements/EFImage.ts';
+export { EFTimegroup } from './elements/EFTimegroup.ts';
+export { EFVideo } from './elements/EFVideo.ts';
+export { EFWaveform } from './elements/EFWaveform.ts';
+export { EFWorkbench } from './gui/EFWorkbench.ts';
+export { EFFilmstrip } from './gui/EFFilmstrip.ts';
+export { EFPreview } from './gui/EFPreview.ts';
+export { useTimingInfo } from './hooks/useTimingInfo.ts';

package/dist/index.js

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

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "@editframe/react",
-  "version": "0.7.0-beta.9",
+  "version": "0.8.0-beta.2",
   "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,16 +19,18 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/elements": "0.7.0-beta.9",
+    "@editframe/elements": "0.8.0-beta.2",
     "@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",
+    "typescript": "^5.5.4",
     "vite-plugin-dts": "^3.9.1",
     "vite-tsconfig-paths": "^4.3.2"
   }

package/src/elements/EFTimegroup.ts

@@ -1,5 +1,5 @@
 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({

package/src/gui/EFPreview.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/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",
-});