@editframe/react 0.35.0-beta → 0.36.1-beta

package/dist/components/TimelineRoot.js

@@ -1,12 +1,9 @@
-import { __toESM } from "../_virtual/rolldown_runtime.js";
-import { require_react_dom } from "../node_modules/react-dom/index.js";
-import { require_client } from "../node_modules/react-dom/client.js";
 import { useEffect, useRef } from "react";
+import * as ReactDOM from "react-dom/client";
+import { flushSync } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/TimelineRoot.tsx
-var import_client = /* @__PURE__ */ __toESM(require_client());
-var import_react_dom = /* @__PURE__ */ __toESM(require_react_dom());
 /**
 * TimelineRoot - Factory wrapper for React-based timelines.
 * 
@@ -47,8 +44,8 @@ const TimelineRoot = ({ id, component: Component, className, style, children })
 				return;
 			}
 			cloneEl.remove();
-			const root = import_client.createRoot(cloneContainer);
-			(0, import_react_dom.flushSync)(() => {
+			const root = ReactDOM.createRoot(cloneContainer);
+			flushSync(() => {
 				root.render(/* @__PURE__ */ jsx(Component, {}));
 			});
 			const newTimegroup = cloneContainer.querySelector("ef-timegroup");

package/dist/components/TimelineRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineRoot.js","names":["TimelineRoot: React.FC<TimelineRootProps>"],"sources":["../../src/components/TimelineRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { flushSync } from 'react-dom';\nimport { useEffect, useRef } from 'react';\nimport type { EFTimegroup } from '@editframe/elements';\n\ninterface TimelineRootProps {\n  /** Unique identifier for the root timegroup */\n  id: string;\n  /** React component that renders the timeline content (must include a Timegroup at root) */\n  component: React.ComponentType;\n  /** Optional CSS class name for the container */\n  className?: string;\n  /** Optional inline styles for the container */\n  style?: React.CSSProperties;\n  /** Optional children to render alongside the component (e.g., Configuration wrapper) */\n  children?: React.ReactNode;\n}\n\n/**\n * TimelineRoot - Factory wrapper for React-based timelines.\n * \n * This component enables proper clone rendering by providing a factory pattern\n * for creating fully functional timeline instances. When render clones are created\n * (for exports, thumbnails, etc.), the initializer re-renders the React component\n * tree to ensure all JavaScript state and React lifecycle methods work correctly.\n * \n * @example\n * ```tsx\n * const MyTimelineContent = () => (\n *   <Timegroup mode=\"sequence\">\n *     <MyScenes />\n *   </Timegroup>\n * );\n * \n * // Wrap with Configuration if needed\n * <Configuration apiHost=\"...\">\n *   <TimelineRoot id=\"root\" component={MyTimelineContent} />\n * </Configuration>\n * ```\n */\nexport const TimelineRoot: React.FC<TimelineRootProps> = ({\n  id,\n  component: Component,\n  className,\n  style,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  \n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    \n    // Find the root timegroup rendered by Component\n    const timegroup = container.querySelector('ef-timegroup') as EFTimegroup;\n    if (!timegroup) {\n      console.warn('[TimelineRoot] No ef-timegroup found in component. Ensure your component renders a Timegroup.');\n      return;\n    }\n    \n    // Ensure the timegroup has the specified ID\n    timegroup.id = id;\n    \n    // Register factory initializer - MUST be synchronous\n    // Uses flushSync to force React to render synchronously\n    timegroup.initializer = (cloneEl: EFTimegroup) => {\n      const cloneContainer = cloneEl.parentElement;\n      if (!cloneContainer) {\n        console.error('[TimelineRoot] No parent container for clone');\n        return;\n      }\n      \n      // Remove the cloned DOM - React will render a fresh component tree\n      // The cloned DOM doesn't have React bindings, so we need to replace it\n      cloneEl.remove();\n      \n      // Create React root for the clone container\n      const root = ReactDOM.createRoot(cloneContainer);\n      \n      // Use flushSync to render synchronously (required by initializer contract)\n      // This ensures the component tree is fully rendered before initializer returns\n      flushSync(() => {\n        root.render(<Component />);\n      });\n      \n      // Find the new timegroup rendered by React and store the React root on it\n      // This is needed for cleanup in createRenderClone\n      const newTimegroup = cloneContainer.querySelector('ef-timegroup');\n      if (newTimegroup) {\n        (newTimegroup as any)._reactRoot = root;\n      } else {\n        // Store root on container so we can still clean up\n        (cloneContainer as any)._reactRoot = root;\n        console.error('[TimelineRoot] No ef-timegroup found after React render');\n      }\n    };\n    \n    // Cleanup: remove initializer when component unmounts\n    return () => {\n      timegroup.initializer = undefined;\n    };\n  }, [id, Component]);\n  \n  return (\n    <div \n      ref={containerRef} \n      className={className} \n      style={{ display: 'contents', ...style }}\n    >\n      {children}\n      <Component />\n    </div>\n  );\n};\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAaA,gBAA6C,EACxD,IACA,WAAW,WACX,WACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;AAEjD,iBAAgB;EACd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAGhB,MAAM,YAAY,UAAU,cAAc,eAAe;AACzD,MAAI,CAAC,WAAW;AACd,WAAQ,KAAK,gGAAgG;AAC7G;;AAIF,YAAU,KAAK;AAIf,YAAU,eAAe,YAAyB;GAChD,MAAM,iBAAiB,QAAQ;AAC/B,OAAI,CAAC,gBAAgB;AACnB,YAAQ,MAAM,+CAA+C;AAC7D;;AAKF,WAAQ,QAAQ;GAGhB,MAAM,qBAAgB,WAAW,eAAe;AAIhD,yCAAgB;AACd,SAAK,OAAO,oBAAC,cAAY,CAAC;KAC1B;GAIF,MAAM,eAAe,eAAe,cAAc,eAAe;AACjE,OAAI,aACF,CAAC,aAAqB,aAAa;QAC9B;AAEL,IAAC,eAAuB,aAAa;AACrC,YAAQ,MAAM,0DAA0D;;;AAK5E,eAAa;AACX,aAAU,cAAc;;IAEzB,CAAC,IAAI,UAAU,CAAC;AAEnB,QACE,qBAAC;EACC,KAAK;EACM;EACX,OAAO;GAAE,SAAS;GAAY,GAAG;GAAO;aAEvC,UACD,oBAAC,cAAY;GACT"}
+{"version":3,"file":"TimelineRoot.js","names":["TimelineRoot: React.FC<TimelineRootProps>"],"sources":["../../src/components/TimelineRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { flushSync } from 'react-dom';\nimport { useEffect, useRef } from 'react';\nimport type { EFTimegroup } from '@editframe/elements';\n\ninterface TimelineRootProps {\n  /** Unique identifier for the root timegroup */\n  id: string;\n  /** React component that renders the timeline content (must include a Timegroup at root) */\n  component: React.ComponentType;\n  /** Optional CSS class name for the container */\n  className?: string;\n  /** Optional inline styles for the container */\n  style?: React.CSSProperties;\n  /** Optional children to render alongside the component (e.g., Configuration wrapper) */\n  children?: React.ReactNode;\n}\n\n/**\n * TimelineRoot - Factory wrapper for React-based timelines.\n * \n * This component enables proper clone rendering by providing a factory pattern\n * for creating fully functional timeline instances. When render clones are created\n * (for exports, thumbnails, etc.), the initializer re-renders the React component\n * tree to ensure all JavaScript state and React lifecycle methods work correctly.\n * \n * @example\n * ```tsx\n * const MyTimelineContent = () => (\n *   <Timegroup mode=\"sequence\">\n *     <MyScenes />\n *   </Timegroup>\n * );\n * \n * // Wrap with Configuration if needed\n * <Configuration apiHost=\"...\">\n *   <TimelineRoot id=\"root\" component={MyTimelineContent} />\n * </Configuration>\n * ```\n */\nexport const TimelineRoot: React.FC<TimelineRootProps> = ({\n  id,\n  component: Component,\n  className,\n  style,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  \n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    \n    // Find the root timegroup rendered by Component\n    const timegroup = container.querySelector('ef-timegroup') as EFTimegroup;\n    if (!timegroup) {\n      console.warn('[TimelineRoot] No ef-timegroup found in component. Ensure your component renders a Timegroup.');\n      return;\n    }\n    \n    // Ensure the timegroup has the specified ID\n    timegroup.id = id;\n    \n    // Register factory initializer - MUST be synchronous\n    // Uses flushSync to force React to render synchronously\n    timegroup.initializer = (cloneEl: EFTimegroup) => {\n      const cloneContainer = cloneEl.parentElement;\n      if (!cloneContainer) {\n        console.error('[TimelineRoot] No parent container for clone');\n        return;\n      }\n      \n      // Remove the cloned DOM - React will render a fresh component tree\n      // The cloned DOM doesn't have React bindings, so we need to replace it\n      cloneEl.remove();\n      \n      // Create React root for the clone container\n      const root = ReactDOM.createRoot(cloneContainer);\n      \n      // Use flushSync to render synchronously (required by initializer contract)\n      // This ensures the component tree is fully rendered before initializer returns\n      flushSync(() => {\n        root.render(<Component />);\n      });\n      \n      // Find the new timegroup rendered by React and store the React root on it\n      // This is needed for cleanup in createRenderClone\n      const newTimegroup = cloneContainer.querySelector('ef-timegroup');\n      if (newTimegroup) {\n        (newTimegroup as any)._reactRoot = root;\n      } else {\n        // Store root on container so we can still clean up\n        (cloneContainer as any)._reactRoot = root;\n        console.error('[TimelineRoot] No ef-timegroup found after React render');\n      }\n    };\n    \n    // Cleanup: remove initializer when component unmounts\n    return () => {\n      timegroup.initializer = undefined;\n    };\n  }, [id, Component]);\n  \n  return (\n    <div \n      ref={containerRef} \n      className={className} \n      style={{ display: 'contents', ...style }}\n    >\n      {children}\n      <Component />\n    </div>\n  );\n};\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAaA,gBAA6C,EACxD,IACA,WAAW,WACX,WACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;AAEjD,iBAAgB;EACd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAGhB,MAAM,YAAY,UAAU,cAAc,eAAe;AACzD,MAAI,CAAC,WAAW;AACd,WAAQ,KAAK,gGAAgG;AAC7G;;AAIF,YAAU,KAAK;AAIf,YAAU,eAAe,YAAyB;GAChD,MAAM,iBAAiB,QAAQ;AAC/B,OAAI,CAAC,gBAAgB;AACnB,YAAQ,MAAM,+CAA+C;AAC7D;;AAKF,WAAQ,QAAQ;GAGhB,MAAM,OAAO,SAAS,WAAW,eAAe;AAIhD,mBAAgB;AACd,SAAK,OAAO,oBAAC,cAAY,CAAC;KAC1B;GAIF,MAAM,eAAe,eAAe,cAAc,eAAe;AACjE,OAAI,aACF,CAAC,aAAqB,aAAa;QAC9B;AAEL,IAAC,eAAuB,aAAa;AACrC,YAAQ,MAAM,0DAA0D;;;AAK5E,eAAa;AACX,aAAU,cAAc;;IAEzB,CAAC,IAAI,UAAU,CAAC;AAEnB,QACE,qBAAC;EACC,KAAK;EACM;EACX,OAAO;GAAE,SAAS;GAAY,GAAG;GAAO;aAEvC,UACD,oBAAC,cAAY;GACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/react",
-  "version": "0.35.0-beta",
+  "version": "0.36.1-beta",
   "description": "",
   "exports": {
     ".": {
@@ -22,7 +22,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/elements": "0.35.0-beta",
+    "@editframe/elements": "0.36.1-beta",
     "@lit/task": "^1.0.1",
     "lit": "^3.3.1",
     "react": "^18.3.0"

package/tsdown.config.ts

@@ -47,7 +47,13 @@ const inlineCssPlugin = (): Plugin => ({
 export default defineConfig(
   createTsdownConfig({
     plugins: [inlineCssPlugin()],
-    external: [/@editframe\/(elements|assets)/],
+    external: [
+      /@editframe\/(elements|assets)/,
+      "react",
+      "react-dom",
+      "react-dom/client",
+      "react/jsx-runtime",
+    ],
     additionalExports: {
       "./types.json": "./types.json",
     },

package/dist/_virtual/rolldown_runtime.js

@@ -1,31 +0,0 @@
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function() {
-	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
-	if (typeof require !== "undefined") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function.");
-});
-
-//#endregion
-export { __commonJS, __require, __toESM };