@lvce-editor/preview-worker 2.0.0 → 2.2.0

package/dist/previewWorkerMain.js

@@ -514,7 +514,7 @@ const IpcParentWithMessagePort$1 = {
 
 const Two$1 = '2.0';
 const callbacks$1 = Object.create(null);
-const get$2 = id => {
+const get$3 = id => {
   return callbacks$1[id];
 };
 const remove$1 = id => {
@@ -663,7 +663,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$2(id);
+  const fn = get$3(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -1131,8 +1131,6 @@ const Style = 72;
 const Html = 73;
 const Reference = 100;
 
-const TargetName = 'event.target.name';
-
 const EditorWorker = 99;
 const RendererWorker = 1;
 
@@ -1140,10 +1138,10 @@ const SetDom2 = 'Viewlet.setDom2';
 const SetPatches = 'Viewlet.setPatches';
 
 const rpcs = Object.create(null);
-const set$3 = (id, rpc) => {
+const set$4 = (id, rpc) => {
   rpcs[id] = rpc;
 };
-const get$1 = id => {
+const get$2 = id => {
   return rpcs[id];
 };
 const remove = id => {
@@ -1154,18 +1152,18 @@ const remove = id => {
 const create$2 = rpcId => {
   return {
     async dispose() {
-      const rpc = get$1(rpcId);
+      const rpc = get$2(rpcId);
       await rpc.dispose();
     },
     // @ts-ignore
     invoke(method, ...params) {
-      const rpc = get$1(rpcId);
+      const rpc = get$2(rpcId);
       // @ts-ignore
       return rpc.invoke(method, ...params);
     },
     // @ts-ignore
     invokeAndTransfer(method, ...params) {
-      const rpc = get$1(rpcId);
+      const rpc = get$2(rpcId);
       // @ts-ignore
       return rpc.invokeAndTransfer(method, ...params);
     },
@@ -1173,7 +1171,7 @@ const create$2 = rpcId => {
       const mockRpc = createMockRpc({
         commandMap
       });
-      set$3(rpcId, mockRpc);
+      set$4(rpcId, mockRpc);
       // @ts-ignore
       mockRpc[Symbol.dispose] = () => {
         remove(rpcId);
@@ -1182,20 +1180,20 @@ const create$2 = rpcId => {
       return mockRpc;
     },
     set(rpc) {
-      set$3(rpcId, rpc);
+      set$4(rpcId, rpc);
     }
   };
 };
 
 const {
   invoke: invoke$1,
-  set: set$2
+  set: set$3
 } = create$2(EditorWorker);
 
 const {
   invoke,
   invokeAndTransfer,
-  set: set$1
+  set: set$2
 } = create$2(RendererWorker);
 const sendMessagePortToEditorWorker = async (port, rpcId) => {
   const command = 'HandleMessagePort.handleMessagePort';
@@ -1295,11 +1293,11 @@ const terminate = () => {
 };
 
 const {
-  get,
+  get: get$1,
   getCommandIds,
   getKeys: getKeys$1,
   registerCommands,
-  set,
+  set: set$1,
   wrapCommand,
   wrapGetter
 } = create$1();
@@ -1320,7 +1318,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     uri,
     warningCount: 0
   };
-  set(uid, state, state);
+  set$1(uid, state, state);
 };
 
 const iEqual = (oldState, newState) => {
@@ -1361,11 +1359,73 @@ const diff2 = uid => {
   const {
     newState,
     oldState
-  } = get(uid);
+  } = get$1(uid);
   const result = diff(oldState, newState);
   return result;
 };
 
+const dispatchEvent = (element, event) => {
+  element.dispatchEvent(event);
+
+  // Also invoke direct on* handler if set (e.g. element.onclick = function(){})
+  const handlerName = `on${event.type}`;
+  const handler = element[handlerName];
+  if (typeof handler === 'function') {
+    handler.call(element, event);
+  } else if (handler === null || handler === undefined) {
+    // Check if there's an inline HTML attribute that wasn't converted to a property
+    const attrValue = element.getAttribute(handlerName);
+    if (attrValue && typeof attrValue === 'string' && element.ownerDocument && element.ownerDocument.defaultView) {
+      const window = element.ownerDocument.defaultView;
+      // Handle inline event handlers like onclick="someFunction(2)"
+      // Evaluate in the context of the window so functions are in scope
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
+      const fn = new Function('event', `with(this) { ${attrValue} }`);
+      fn.call(window, event);
+    }
+  }
+};
+
+const dispatchClickEvent = (element, window) => {
+  const clickEvent = new window.MouseEvent('click', {
+    bubbles: true
+  });
+  dispatchEvent(element, clickEvent);
+};
+
+const getParsedNodesChildNodeCount = parsedDom => {
+  array(parsedDom);
+  const rootCountFromParse = parsedDom.rootChildCount;
+  if (typeof rootCountFromParse === 'number') {
+    return rootCountFromParse;
+  }
+  let rootChildCount = 0;
+  let i = 0;
+  while (i < parsedDom.length) {
+    rootChildCount++;
+
+    // skip the entire subtree of the current node
+    let toSkip = parsedDom[i].childCount;
+    i++;
+    while (toSkip > 0 && i < parsedDom.length) {
+      toSkip -= 1;
+      toSkip += parsedDom[i].childCount;
+      i++;
+    }
+  }
+  return rootChildCount;
+};
+
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
+
+const states = new Map();
+const get = uid => {
+  return states.get(uid);
+};
+const set = (uid, instance) => {
+  states.set(uid, instance);
+};
+
 const text = data => {
   return {
     childCount: 0,
@@ -1824,29 +1884,6 @@ const getVirtualDomTag = text => {
   }
 };
 
-const None = 0;
-const OpeningAngleBracket = 1;
-const ClosingAngleBracket = 2;
-const TagNameStart = 3;
-const TagNameEnd = 4;
-const Content = 5;
-const ClosingTagSlash = 6;
-const WhitespaceInsideOpeningTag = 7;
-const AttributeName = 8;
-const AttributeEqualSign = 9;
-const AttributeQuoteStart = 10;
-const AttributeValue = 11;
-const AttributeQuoteEnd = 12;
-const WhitespaceAfterClosingTagSlash = 13;
-const WhitespaceAfterOpeningTagOpenAngleBracket = 14;
-const ExclamationMark = 15;
-const Doctype = 16;
-const StartCommentDashes = 17;
-const Comment = 18;
-const EndCommentTag = 19;
-const Text = 20;
-const CommentStart = 21;
-
 /* eslint-disable @cspell/spellchecker */
 // Common HTML attributes that are safe to allow by default
 const commonAllowedAttributes = new Set([
@@ -1885,6 +1922,211 @@ const isDefaultAllowedAttribute = (attributeName, defaultAllowedAttributes) => {
   return defaultAllowedAttributes.includes(attributeName);
 };
 
+// Tags to skip entirely during serialization
+const TAGS_TO_SKIP = new Set(['script', 'meta', 'title']);
+
+// Tags to skip but process children
+const TAGS_TO_SKIP_TAG_ONLY$1 = new Set(['html', 'body', 'head']);
+
+// Tags where we extract content as CSS
+const CSS_TAGS = new Set(['style']);
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+const serializeNode = (node, dom, css, context) => {
+  const {
+    nodeType
+  } = node;
+
+  // Text node
+  if (nodeType === 3) {
+    const textContent = node.textContent || '';
+    if (textContent) {
+      dom.push(text(textContent));
+      return 1;
+    }
+    return 0;
+  }
+
+  // Not an element node — skip
+  if (nodeType !== 1) {
+    return 0;
+  }
+  const tagName = (node.tagName || '').toLowerCase();
+
+  // Extract CSS from style elements
+  if (CSS_TAGS.has(tagName)) {
+    const styleContent = node.textContent || '';
+    if (styleContent.trim()) {
+      css.push(styleContent);
+    }
+    return 0;
+  }
+
+  // Skip certain tags entirely
+  if (TAGS_TO_SKIP.has(tagName)) {
+    return 0;
+  }
+
+  // For html/body tags, serialize children only
+  if (TAGS_TO_SKIP_TAG_ONLY$1.has(tagName)) {
+    let childCount = 0;
+    const {
+      childNodes
+    } = node;
+    for (let i = 0; i < childNodes.length; i++) {
+      childCount += serializeNode(childNodes[i], dom, css, context);
+    }
+    return childCount;
+  }
+
+  // Normal element - create a VirtualDomNode
+  const newNode = {
+    childCount: 0,
+    type: getVirtualDomTag(tagName)
+  };
+
+  // Copy allowed attributes
+  const {
+    attributes
+  } = node;
+  if (attributes) {
+    for (let i = 0; i < attributes.length; i++) {
+      const attr = attributes[i];
+      const attrName = attr.name;
+      if (isDefaultAllowedAttribute(attrName, [])) {
+        let finalName = attrName;
+        if (attrName === 'class') {
+          finalName = 'className';
+        } else if (attrName === 'type') {
+          finalName = 'inputType';
+        }
+        newNode[finalName] = attr.value;
+      }
+    }
+  }
+
+  // Assign element tracking ID for interactivity
+  if (context.elementMap) {
+    const hdId = String(context.nextId++);
+    newNode['data-id'] = hdId;
+    context.elementMap.set(hdId, node);
+  }
+  dom.push(newNode);
+
+  // Serialize children
+  let childCount = 0;
+  const {
+    childNodes
+  } = node;
+  for (let i = 0; i < childNodes.length; i++) {
+    childCount += serializeNode(childNodes[i], dom, css, context);
+  }
+  newNode.childCount = childCount;
+  return 1;
+};
+
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+const serialize = (document, elementMap) => {
+  const dom = [];
+  const css = [];
+  const context = {
+    elementMap,
+    nextId: 0
+  };
+
+  // Start from document.documentElement (the <html> element)
+  const root = document.documentElement || document.body;
+  if (!root) {
+    return {
+      css,
+      dom
+    };
+  }
+  let rootChildCount = 0;
+  const {
+    childNodes
+  } = root;
+  for (let i = 0; i < childNodes.length; i++) {
+    rootChildCount += serializeNode(childNodes[i], dom, css, context);
+  }
+  try {
+    Object.defineProperty(dom, 'rootChildCount', {
+      configurable: true,
+      enumerable: false,
+      value: rootChildCount
+    });
+  } catch {
+    dom.rootChildCount = rootChildCount;
+  }
+  return {
+    css,
+    dom
+  };
+};
+
+const handleClick = (state, hdId) => {
+  // console.log('click,', hdId)
+  if (!hdId) {
+    return state;
+  }
+  const happyDomInstance = get(state.uid);
+  if (!happyDomInstance) {
+    return state;
+  }
+  const element = happyDomInstance.elementMap.get(hdId);
+  if (!element) {
+    return state;
+  }
+
+  // console.log({ element })
+  // Dispatch click event in happy-dom so event listeners fire
+  dispatchClickEvent(element, happyDomInstance.window);
+
+  // Re-serialize the (potentially mutated) DOM
+  const elementMap = new Map();
+  const serialized = serialize(happyDomInstance.document, elementMap);
+
+  // Update happy-dom state with new element map
+  set(state.uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+
+const None = 0;
+const OpeningAngleBracket = 1;
+const ClosingAngleBracket = 2;
+const TagNameStart = 3;
+const TagNameEnd = 4;
+const Content = 5;
+const ClosingTagSlash = 6;
+const WhitespaceInsideOpeningTag = 7;
+const AttributeName = 8;
+const AttributeEqualSign = 9;
+const AttributeQuoteStart = 10;
+const AttributeValue = 11;
+const AttributeQuoteEnd = 12;
+const WhitespaceAfterClosingTagSlash = 13;
+const WhitespaceAfterOpeningTagOpenAngleBracket = 14;
+const ExclamationMark = 15;
+const Doctype = 16;
+const StartCommentDashes = 17;
+const Comment = 18;
+const EndCommentTag = 19;
+const Text = 20;
+const CommentStart = 21;
+
 const isSelfClosingTag = tag => {
   switch (tag.toLowerCase()) {
     case 'area':
@@ -2237,7 +2479,7 @@ const tokenizeHtml = text => {
 const TAGS_TO_SKIP_COMPLETELY = new Set(['meta', 'title']);
 
 // Tags that should have their opening/closing tags skipped but content processed
-const TAGS_TO_SKIP_TAG_ONLY$1 = new Set(['html', 'head']);
+const TAGS_TO_SKIP_TAG_ONLY = new Set(['html', 'head']);
 
 // Tags where we capture content as CSS
 const TAGS_TO_CAPTURE_AS_CSS = new Set(['style']);
@@ -2334,7 +2576,7 @@ const parseHtml = (html, allowedAttributes = [], defaultAllowedAttributes = [])
         } else if (TAGS_TO_SKIP_COMPLETELY.has(tagNameToClose)) {
           // We were skipping this content, so decrement skipDepth
           skipDepth--;
-        } else if (TAGS_TO_SKIP_TAG_ONLY$1.has(tagNameToClose)) ; else {
+        } else if (TAGS_TO_SKIP_TAG_ONLY.has(tagNameToClose)) ; else {
           // Normal tag - pop from stack
           if (stack.length > 1) {
             stack.pop();
@@ -2368,7 +2610,7 @@ const parseHtml = (html, allowedAttributes = [], defaultAllowedAttributes = [])
           // For self-closing tags like meta, we just skip them without tracking
         }
         // Check if this tag should have its opening/closing tags skipped (html, head)
-        else if (TAGS_TO_SKIP_TAG_ONLY$1.has(tagNameLower)) {
+        else if (TAGS_TO_SKIP_TAG_ONLY.has(tagNameLower)) {
           if (!lastTagWasSelfClosing) {
             // Track the tag name for matching the closing tag
             tagStack.push(token.text);
@@ -2428,7 +2670,7 @@ const handleEditorChanged = async () => {
   for (const previewUid of previewKeys) {
     const {
       newState: state
-    } = get(previewUid);
+    } = get$1(previewUid);
 
     // Skip if no URI is set
     if (!state.uri) {
@@ -2459,7 +2701,7 @@ const handleEditorChanged = async () => {
           parsedDom: parseResult.dom,
           scripts: parseResult.scripts
         };
-        set(previewUid, state, updatedState);
+        set$1(previewUid, state, updatedState);
       } catch (error) {
         // If getting text fails, update with error message
         const errorMessage = error instanceof Error ? error.message : 'Unknown error';
@@ -2471,7 +2713,7 @@ const handleEditorChanged = async () => {
           parsedDom: [],
           scripts: []
         };
-        set(previewUid, state, updatedState);
+        set$1(previewUid, state, updatedState);
       }
     }
   }
@@ -90049,8 +90291,7 @@ class Window extends BrowserWindow {
   }
 }
 
-/* eslint-disable @typescript-eslint/no-implied-eval */
-const executeScripts = (rawHtml, scripts) => {
+const createWindow = rawHtml => {
   const window = new Window({
     url: 'https://localhost:3000'
   });
@@ -90060,167 +90301,45 @@ const executeScripts = (rawHtml, scripts) => {
 
   // Parse the raw HTML into the happy-dom document
   document.documentElement.innerHTML = rawHtml;
+  return {
+    document,
+    window
+  };
+};
 
+const alert = message => {
+  void invoke('ConfirmPrompt.prompt', message);
+};
+
+const getTopLevelFunctionNames = script => {
+  const names = [];
+  const regex = /(?:^|[\n;])\s*function\s+([a-zA-Z_$][\w$]*)/g;
+  let match;
+  while ((match = regex.exec(script)) !== null) {
+    names.push(match[1]);
+  }
+  return names;
+};
+
+/* eslint-disable @typescript-eslint/no-implied-eval */
+const executeScripts = (window, document, scripts) => {
+  window.alert = alert;
+  // @ts-ignore
+  globalThis.alert = alert;
   // Execute each script with the happy-dom window and document as context
   for (const scriptContent of scripts) {
     try {
-      const fn = new Function('window', 'document', 'console', scriptContent);
+      // In a browser, top-level function declarations in <script> tags become
+      // properties on window. Since new Function() creates a local scope, we
+      // extract function names and explicitly assign them to window after execution.
+      const functionNames = getTopLevelFunctionNames(scriptContent);
+      const suffix = functionNames.map(name => `\nwindow['${name}'] = ${name};`).join('');
+      const fn = new Function('window', 'document', 'console', scriptContent + suffix);
       fn(window, document, console);
     } catch (error) {
       console.warn('[preview-worker] Script execution error:', error);
     }
   }
-  return document;
-};
-
-const getParsedNodesChildNodeCount = parsedDom => {
-  array(parsedDom);
-  const rootCountFromParse = parsedDom.rootChildCount;
-  if (typeof rootCountFromParse === 'number') {
-    return rootCountFromParse;
-  }
-  let rootChildCount = 0;
-  let i = 0;
-  while (i < parsedDom.length) {
-    rootChildCount++;
-
-    // skip the entire subtree of the current node
-    let toSkip = parsedDom[i].childCount;
-    i++;
-    while (toSkip > 0 && i < parsedDom.length) {
-      toSkip -= 1;
-      toSkip += parsedDom[i].childCount;
-      i++;
-    }
-  }
-  return rootChildCount;
-};
-
-// Tags to skip entirely during serialization
-const TAGS_TO_SKIP = new Set(['script', 'meta', 'title']);
-
-// Tags to skip but process children
-const TAGS_TO_SKIP_TAG_ONLY = new Set(['html', 'body', 'head']);
-
-// Tags where we extract content as CSS
-const CSS_TAGS = new Set(['style']);
-const serializeNode = (node, dom, css) => {
-  const {
-    nodeType
-  } = node;
-
-  // Text node
-  if (nodeType === 3) {
-    const textContent = node.textContent || '';
-    if (textContent) {
-      dom.push(text(textContent));
-      return 1;
-    }
-    return 0;
-  }
-
-  // Not an element node — skip
-  if (nodeType !== 1) {
-    return 0;
-  }
-  const tagName = (node.tagName || '').toLowerCase();
-
-  // Extract CSS from style elements
-  if (CSS_TAGS.has(tagName)) {
-    const styleContent = node.textContent || '';
-    if (styleContent.trim()) {
-      css.push(styleContent);
-    }
-    return 0;
-  }
-
-  // Skip certain tags entirely
-  if (TAGS_TO_SKIP.has(tagName)) {
-    return 0;
-  }
-
-  // For html/body tags, serialize children only
-  if (TAGS_TO_SKIP_TAG_ONLY.has(tagName)) {
-    let childCount = 0;
-    const {
-      childNodes
-    } = node;
-    for (let i = 0; i < childNodes.length; i++) {
-      childCount += serializeNode(childNodes[i], dom, css);
-    }
-    return childCount;
-  }
-
-  // Normal element - create a VirtualDomNode
-  const newNode = {
-    childCount: 0,
-    type: getVirtualDomTag(tagName)
-  };
-
-  // Copy allowed attributes
-  const {
-    attributes
-  } = node;
-  if (attributes) {
-    for (let i = 0; i < attributes.length; i++) {
-      const attr = attributes[i];
-      const attrName = attr.name;
-      if (isDefaultAllowedAttribute(attrName, [])) {
-        let finalName = attrName;
-        if (attrName === 'class') {
-          finalName = 'className';
-        } else if (attrName === 'type') {
-          finalName = 'inputType';
-        }
-        newNode[finalName] = attr.value;
-      }
-    }
-  }
-  dom.push(newNode);
-
-  // Serialize children
-  let childCount = 0;
-  const {
-    childNodes
-  } = node;
-  for (let i = 0; i < childNodes.length; i++) {
-    childCount += serializeNode(childNodes[i], dom, css);
-  }
-  newNode.childCount = childCount;
-  return 1;
-};
-const serialize = document => {
-  const dom = [];
-  const css = [];
-
-  // Start from document.documentElement (the <html> element)
-  const root = document.documentElement || document.body;
-  if (!root) {
-    return {
-      css,
-      dom
-    };
-  }
-  let rootChildCount = 0;
-  const {
-    childNodes
-  } = root;
-  for (let i = 0; i < childNodes.length; i++) {
-    rootChildCount += serializeNode(childNodes[i], dom, css);
-  }
-  try {
-    Object.defineProperty(dom, 'rootChildCount', {
-      configurable: true,
-      enumerable: false,
-      value: rootChildCount
-    });
-  } catch {
-    dom.rootChildCount = rootChildCount;
-  }
-  return {
-    css,
-    dom
-  };
 };
 
 /* eslint-disable prefer-destructuring */
@@ -90244,10 +90363,20 @@ const updateContent = async (state, uri) => {
     // If scripts are present, execute them via happy-dom and re-serialize the DOM
     if (scripts.length > 0) {
       try {
-        const happyDomDocument = executeScripts(content, scripts);
-        const serialized = serialize(happyDomDocument);
+        const {
+          document: happyDomDocument,
+          window: happyDomWindow
+        } = createWindow(content);
+        executeScripts(happyDomWindow, happyDomDocument, scripts);
+        const elementMap = new Map();
+        const serialized = serialize(happyDomDocument, elementMap);
         parsedDom = serialized.dom;
         css = serialized.css;
+        set(state.uid, {
+          document: happyDomDocument,
+          elementMap,
+          window: happyDomWindow
+        });
       } catch {
         // If script execution fails, fall back to static HTML parsing
       }
@@ -90295,6 +90424,56 @@ const handleFileEdited = async state => {
   };
 };
 
+const dispatchInputEvent = (element, window) => {
+  const inputEvent = new window.Event('input', {
+    bubbles: true
+  });
+  dispatchEvent(element, inputEvent);
+};
+
+const handleInput = (state, hdId, value) => {
+  // console.log('input,', hdId, value)
+  if (!hdId) {
+    return state;
+  }
+  const happyDomInstance = get(state.uid);
+  if (!happyDomInstance) {
+    return state;
+  }
+  const element = happyDomInstance.elementMap.get(hdId);
+  if (!element) {
+    return state;
+  }
+
+  // console.log({ element })
+  // Update the element's value from the preview
+  element.value = value;
+  // Dispatch input event in happy-dom so event listeners fire
+  dispatchInputEvent(element, happyDomInstance.window);
+
+  // Re-serialize the (potentially mutated) DOM
+  const elementMap = new Map();
+  const serialized = serialize(happyDomInstance.document, elementMap);
+
+  // Update happy-dom state with new element map
+  set(state.uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+
 const loadContent = async state => {
   // Try to register to receive editor change notifications from the editor worker.
   // Use dynamic access and ignore errors so this is safe in environments where
@@ -90382,6 +90561,9 @@ const renderCss = (oldState, newState) => {
   return ['Viewlet.setCss', uid, cssString];
 };
 
+const HandleInput = 4;
+const HandleClick = 11;
+
 const getEmptyPreviewDom = () => {
   return [{
     childCount: 1,
@@ -90411,12 +90593,16 @@ const getPreviewDom = state => {
     return [{
       childCount: parsedNodesChildNodeCount,
       className: 'Viewlet Preview',
+      onClick: HandleClick,
+      onInput: HandleInput,
       type: Div$1
     }, ...parsedDom];
   }
   return [{
     childCount: 1,
     className: 'Viewlet Preview',
+    onClick: HandleClick,
+    onInput: HandleInput,
     type: Div$1
   }, {
     childCount: 1,
@@ -90475,18 +90661,21 @@ const render2 = (uid, diffResult) => {
   const {
     newState,
     oldState
-  } = get(uid);
-  set(uid, newState, newState);
+  } = get$1(uid);
+  set$1(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
   return commands;
 };
 
-const HandleClick = 11;
-
 const renderEventListeners = () => {
   return [{
+    capture: true,
     name: HandleClick,
-    params: ['handleClick', TargetName]
+    params: ['handleClick', 'event.target.dataset.id']
+  }, {
+    capture: true,
+    name: HandleInput,
+    params: ['handleInput', 'event.target.dataset.id', 'event.target.value']
   }];
 };
 
@@ -90541,7 +90730,9 @@ const commandMap = {
   'Preview.create': create,
   'Preview.diff2': diff2,
   'Preview.getCommandIds': getCommandIds,
+  'Preview.handleClick': wrapCommand(handleClick),
   'Preview.handleFileEdited': wrapCommand(handleFileEdited),
+  'Preview.handleInput': wrapCommand(handleInput),
   'Preview.loadContent': wrapCommand(loadContent),
   'Preview.render2': render2,
   'Preview.renderEventListeners': renderEventListeners,
@@ -90557,12 +90748,12 @@ const listen = async () => {
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set$1(rpc);
+  set$2(rpc);
   const editorRpc = await LazyTransferMessagePortRpcParent.create({
     commandMap: {},
     send: port => sendMessagePortToEditorWorker(port, 9112)
   });
-  set$2(editorRpc);
+  set$3(editorRpc);
 };
 
 const main = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/preview-worker",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Preview Worker",
   "repository": {
     "type": "git",