@editframe/react 0.6.0-beta.22 → 0.7.0-beta.4

package/dist/create-component.cjs

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/**
+ * @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;
+};
+exports.createComponent = createComponent;

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/EFTimegroup.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const react = require("@lit/react");
+const createComponent = require("../create-component.cjs");
 const elements = require("@editframe/elements");
-const EFTimegroup = react.createComponent({
+const EFTimegroup = createComponent.createComponent({
   tagName: "ef-timegroup",
   elementClass: elements.EFTimegroup,
   react: React

package/dist/elements/EFTimegroup.js

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

package/dist/packages/react/src/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/packages/react/src/elements/EFTimegroup.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/react",
-  "version": "0.6.0-beta.22",
+  "version": "0.7.0-beta.4",
   "description": "",
   "exports": {
     ".": {
@@ -23,8 +23,9 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/elements": "0.6.0-beta.22",
+    "@editframe/elements": "0.7.0-beta.4",
     "@lit/react": "^1.0.5",
+    "debug": "^4.3.5",
     "react": "^18.3.0",
     "react-dom": "^18.3.0"
   },

package/src/elements/EFTimegroup.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { createComponent } from "@lit/react";
+import { createComponent } from "../create-component";
 import { EFTimegroup as EFTimegroupElement } from "@editframe/elements";
 
 export const EFTimegroup = createComponent({