@editframe/react 0.16.8-beta.0 → 0.18.3-beta.0

package/dist/components/TimeDisplay.js

@@ -1,11 +1,9 @@
-import { EFTimeDisplay } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "@lit/react";
+import { EFTimeDisplay } from "@editframe/elements";
 const TimeDisplay = createComponent({
-  tagName: "ef-time-display",
-  elementClass: EFTimeDisplay,
-  react: React
+	tagName: "ef-time-display",
+	elementClass: EFTimeDisplay,
+	react: React
 });
-export {
-  TimeDisplay
-};
+export { TimeDisplay };

package/dist/create-component.js

@@ -1,128 +1,120 @@
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const reservedReactProperties = /* @__PURE__ */ new Set([
-  "id",
-  "children",
-  "localName",
-  "ref",
-  "style",
-  "className"
+const NODE_MODE = false;
+const DEV_MODE = true;
+const reservedReactProperties = new Set([
+	"id",
+	"children",
+	"localName",
+	"ref",
+	"style",
+	"className"
 ]);
 const listenedEvents = /* @__PURE__ */ new WeakMap();
+/**
+* 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, 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);
-  }
+	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);
+	}
 };
+/**
+* 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 = (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 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
+/**
+* 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`.
+*/
+const createComponent = ({ react: React, tagName, elementClass, events, displayName }) => {
+	const eventProps = new Set(Object.keys(events ?? {}));
+	if (DEV_MODE) {
+		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;
+		}
+		if (!NODE_MODE) {
+			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");
+			}, []);
+		}
+		if (NODE_MODE) {
+			if ((React.createElement.name === "litPatchedCreateElement" || globalThis.litSsrReactEnabled) && Object.keys(elementProps).length) reactProps._$litProps$ = elementProps;
+		} else 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.js

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

package/dist/elements/Captions.js

@@ -1,35 +1,29 @@
-import { EFCaptions, EFCaptionsActiveWord, EFCaptionsSegment, EFCaptionsBeforeActiveWord, EFCaptionsAfterActiveWord } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "@lit/react";
+import { EFCaptions, EFCaptionsActiveWord, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsSegment } from "@editframe/elements";
 const Captions = createComponent({
-  tagName: "ef-captions",
-  elementClass: EFCaptions,
-  react: React
+	tagName: "ef-captions",
+	elementClass: EFCaptions,
+	react: React
 });
 const CaptionsActiveWord = createComponent({
-  tagName: "ef-captions-active-word",
-  elementClass: EFCaptionsActiveWord,
-  react: React
+	tagName: "ef-captions-active-word",
+	elementClass: EFCaptionsActiveWord,
+	react: React
 });
 const CaptionsSegment = createComponent({
-  tagName: "ef-captions-segment",
-  elementClass: EFCaptionsSegment,
-  react: React
+	tagName: "ef-captions-segment",
+	elementClass: EFCaptionsSegment,
+	react: React
 });
 const CaptionsBeforeActiveWord = createComponent({
-  tagName: "ef-captions-before-active-word",
-  elementClass: EFCaptionsBeforeActiveWord,
-  react: React
+	tagName: "ef-captions-before-active-word",
+	elementClass: EFCaptionsBeforeActiveWord,
+	react: React
 });
 const CaptionsAfterActiveWord = createComponent({
-  tagName: "ef-captions-after-active-word",
-  elementClass: EFCaptionsAfterActiveWord,
-  react: React
+	tagName: "ef-captions-after-active-word",
+	elementClass: EFCaptionsAfterActiveWord,
+	react: React
 });
-export {
-  Captions,
-  CaptionsActiveWord,
-  CaptionsAfterActiveWord,
-  CaptionsBeforeActiveWord,
-  CaptionsSegment
-};
+export { Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment };

package/dist/elements/Image.js

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

package/dist/elements/Timegroup.js

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

package/dist/elements/Video.js

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

package/dist/elements/Waveform.js

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

package/dist/gui/Configuration.js

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

package/dist/gui/Filmstrip.js

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

package/dist/gui/FitScale.js

@@ -1,11 +1,9 @@
-import { EFFitScale } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "@lit/react";
+import { EFFitScale } from "@editframe/elements";
 const FitScale = createComponent({
-  tagName: "ef-fit-scale",
-  elementClass: EFFitScale,
-  react: React
+	tagName: "ef-fit-scale",
+	elementClass: EFFitScale,
+	react: React
 });
-export {
-  FitScale
-};
+export { FitScale };

package/dist/gui/FocusOverlay.js

@@ -1,11 +1,9 @@
-import { EFFocusOverlay } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "@lit/react";
+import { EFFocusOverlay } from "@editframe/elements";
 const FocusOverlay = createComponent({
-  tagName: "ef-focus-overlay",
-  elementClass: EFFocusOverlay,
-  react: React
+	tagName: "ef-focus-overlay",
+	elementClass: EFFocusOverlay,
+	react: React
 });
-export {
-  FocusOverlay
-};
+export { FocusOverlay };

package/dist/gui/Preview.js

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

package/dist/gui/Scrubber.js

@@ -1,11 +1,9 @@
-import { EFScrubber } from "@editframe/elements";
-import { createComponent } from "@lit/react";
 import React from "react";
+import { createComponent } from "@lit/react";
+import { EFScrubber } from "@editframe/elements";
 const Scrubber = createComponent({
-  tagName: "ef-scrubber",
-  elementClass: EFScrubber,
-  react: React
+	tagName: "ef-scrubber",
+	elementClass: EFScrubber,
+	react: React
 });
-export {
-  Scrubber
-};
+export { Scrubber };

package/dist/gui/ToggleLoop.js

@@ -2,10 +2,8 @@ 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
+	tagName: "ef-toggle-loop",
+	elementClass: EFToggleLoop,
+	react: React
 });
-export {
-  ToggleLoop
-};
+export { ToggleLoop };

package/dist/gui/TogglePlay.js

@@ -2,10 +2,8 @@ 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
+	tagName: "ef-toggle-play",
+	elementClass: EFTogglePlay,
+	react: React
 });
-export {
-  TogglePlay
-};
+export { TogglePlay };

package/dist/gui/Workbench.js

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

package/dist/hooks/useTimingInfo.js

@@ -1,35 +1,34 @@
-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 };
+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
+		});
+	}
 };
-export {
-  useTimingInfo
+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.js

@@ -15,26 +15,4 @@ import { ToggleLoop } from "./gui/ToggleLoop.js";
 import { Scrubber } from "./gui/Scrubber.js";
 import { useTimingInfo } from "./hooks/useTimingInfo.js";
 import { TimeDisplay } from "./components/TimeDisplay.js";
-export {
-  Audio,
-  Captions,
-  CaptionsActiveWord,
-  CaptionsAfterActiveWord,
-  CaptionsBeforeActiveWord,
-  CaptionsSegment,
-  Configuration,
-  Filmstrip,
-  FitScale,
-  FocusOverlay,
-  Image,
-  Preview,
-  Scrubber,
-  TimeDisplay,
-  Timegroup,
-  ToggleLoop,
-  TogglePlay,
-  Video,
-  Waveform,
-  Workbench,
-  useTimingInfo
-};
+export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Filmstrip, FitScale, FocusOverlay, Image, Preview, Scrubber, TimeDisplay, Timegroup, ToggleLoop, TogglePlay, Video, Waveform, Workbench, useTimingInfo };