@maverick-js/compiler - npm Package Compare versions

Comparing version 0.21.0 to 0.22.0

dist/cli.js

 import { TS_NODE, resolvePath, resolveConfigPaths, resolveCorePkgName, camelToKebabCase } from './chunks/chunk-BIOVNH5X.js';
-import { setGlobalLogLevel, mapLogLevelStringToNumber, logStackTrace, clearTerminal, log, logTime, reportDiagnosticByNode, formatPluginName, normalizeLineBreaks, escapeQuotes } from './chunks/chunk-LHZES57P.js';
+import { setGlobalLogLevel, mapLogLevelStringToNumber, logStackTrace, clearTerminal, log, logTime, reportDiagnosticByNode, formatPluginName, normalizeLineBreaks, escapeQuotes } from './chunks/chunk-T3EEEZAO.js';
 import { isArray, isUndefined, isNull } from './chunks/chunk-3M33KLBM.js';
@@ -4,0 +4,0 @@ import yargs from 'yargs';

dist/index.d.ts

@@ -122,2 +122,4 @@ import * as _vite from 'vite';
     value: string;
+    data?: string;
+    delegate: boolean;
 };
@@ -138,2 +140,3 @@ type DirectiveNode = {
     generate: 'dom' | 'ssr' | false;
+    delegateEvents: boolean;
 };
@@ -145,3 +148,5 @@ type TransformContext = {
     runtime: Set<string>;
+    events: Set<string>;
     hydratable: boolean;
+    delegateEvents: boolean;
 };
@@ -164,2 +169,3 @@ type ASTSerializer = {
     hydratable: boolean | ((id: string) => boolean | null) | null;
+    delegateEvents: boolean;
     pretty: boolean | null;
@@ -166,0 +172,0 @@ generate: TransformOptions['generate'] | null;

dist/index.js

@@ -1,2 +0,2 @@
-import { createFunctionCall, setGlobalLogLevel, mapLogLevelStringToNumber, log, logTime, Declarations, format, createImportDeclaration, trimQuotes, trimTrailingSemicolon, createStringLiteral, escapeDoubleQuotes, createObjectLiteral, trimWhitespace } from './chunks/chunk-LHZES57P.js';
+import { createFunctionCall, setGlobalLogLevel, mapLogLevelStringToNumber, log, logTime, Declarations, format, createImportDeclaration, trimQuotes, trimTrailingSemicolon, createStringLiteral, selfInvokingFunction, escapeDoubleQuotes, createObjectLiteral, trimWhitespace } from './chunks/chunk-T3EEEZAO.js';
 import { isUndefined, isArray } from './chunks/chunk-3M33KLBM.js';
@@ -194,2 +194,26 @@ import { createFilter } from '@rollup/pluginutils';
 ]);
+var DELEGATED_EVENT_TYPE = /* @__PURE__ */ new Set([
+  "beforeinput",
+  "click",
+  "dblclick",
+  "contextmenu",
+  "focusin",
+  "focusout",
+  "input",
+  "keydown",
+  "keyup",
+  "mousedown",
+  "mousemove",
+  "mouseout",
+  "mouseover",
+  "mouseup",
+  "pointerdown",
+  "pointermove",
+  "pointerout",
+  "pointerover",
+  "pointerup",
+  "touchend",
+  "touchmove",
+  "touchstart"
+]);
 var SVG_ELEMENT_TAGNAME = /* @__PURE__ */ new Set([
@@ -403,2 +427,3 @@ "altGlyph",
       } else if (namespace === "$on" || namespace === "$oncapture") {
+        const data = !!initializer && ts.isJsxExpression(initializer) && !!initializer.expression && ts.isArrayLiteralExpression(initializer.expression) ? initializer.expression : null;
         ast.tree.push(
@@ -409,3 +434,5 @@ createEventNode({
             type: name,
-            value
+            value: data ? data.elements[0].getText() : value,
+            data: data ? data.elements[1].getText() : void 0,
+            delegate: namespace !== "$oncapture" && DELEGATED_EVENT_TYPE.has(name)
           })
@@ -622,2 +649,3 @@ );
   const serialized = children.map((child) => {
+    var _a;
     if (isAST(child)) {
@@ -631,3 +659,14 @@ return serializer.serialize(child, ctx);
         ast.tree.push(child);
-      return child.children ? serializeParentExpression(serializer, child, ctx) : ast ? serializer.serialize(ast, ctx) : child.value;
+      const expression = child.children ? serializeParentExpression(serializer, child, ctx) : ast ? serializer.serialize(ast, ctx) : child.value;
+      if (ctx.fragment && child.observable && ctx.hydratable && serializer.name === "dom" && ((_a = child.children) == null ? void 0 : _a.length)) {
+        ctx.runtime.add("$$_computed");
+        return selfInvokingFunction(
+          [
+            `const $$_signal = ${createFunctionCall("$$_computed", [`() => ${expression}`])};`,
+            "$$_signal();",
+            "return $$_signal;"
+          ].join("")
+        );
+      }
+      return expression;
     }
@@ -644,7 +683,12 @@ });
   let code = new MagicString(node.value), start = node.ref.getStart() + (ts.isJsxExpression(node.ref) ? 1 : 0);
+  const returnStatement = !!node.children && node.children.length === 1 && ts.isJsxExpression(node.ref) && !!node.ref.expression && ts.isArrowFunction(node.ref.expression) && ts.isBlock(node.ref.expression.body) && node.ref.expression.body.statements.find(ts.isReturnStatement);
+  const isAlreadyScoped = returnStatement && !!returnStatement.expression && (returnStatement.expression === node.children[0].root || ts.isParenthesizedExpression(returnStatement.expression) && returnStatement.expression.expression === node.children[0].root);
   for (const ast of node.children) {
-    const expression = serializer.serialize(ast, ctx);
+    const expression = serializer.serialize(ast, {
+      ...ctx,
+      scoped: returnStatement ? !isAlreadyScoped : ctx.scoped
+    }), nodeStart = isAlreadyScoped ? returnStatement.getStart() : ast.root.getStart(), nodeEnd = isAlreadyScoped ? returnStatement.getEnd() : ast.root.getEnd();
     code.overwrite(
-      ast.root.getStart() - start,
-      ast.root.getEnd() - start,
+      nodeStart - start,
+      nodeEnd - start,
       hof && expression.startsWith("(") ? `${hof}(() => ${expression})` : expression
@@ -698,3 +742,2 @@ );
   nextElement: "$$_next_element",
-  nextExpression: "$$_next_expression",
   nextCustomElement: "$$_next_custom_element",
@@ -707,3 +750,3 @@ hostElement: "$$_host_element",
   listen: "$$_listen",
-  listenDelegate: "$$_listen_delegate",
+  delegateEvents: "$$_delegate_events",
   clone: "$$_clone",
@@ -714,8 +757,8 @@ directive: "$$_directive",
   class: "$$_class",
-  prop: "$$_prop",
   style: "$$_style",
-  cssvar: "$$_cssvar",
   spread: "$$_spread",
   mergeProps: "$$_merge_props",
   innerHTML: "$$_inner_html",
+  computed: "$$_computed",
+  effect: "$$_effect",
   peek: "$$_peek"
@@ -733,2 +776,7 @@ };
   serialize(ast, ctx) {
+    var _a, _b, _c;
+    const firstNode = ast.tree[0], isFirstNodeElement = isElementNode(firstNode), isFirstNodeExpression = isExpressionNode(firstNode), isFirstNodeHostElement = isFirstNodeElement && firstNode.tagName === "HostElement", isFirstNodeComponent = isFirstNodeElement && firstNode.isComponent;
+    if (isFirstNodeExpression && !firstNode.dynamic && !((_a = firstNode.children) == null ? void 0 : _a.length) && !firstNode.observable) {
+      return firstNode.value;
+    }
     let skip = -1, initRoot = false, innerHTML = false, childrenFragment = false, currentId, component, definition, hostElement, customElement, templateId, returnId, hierarchy = [], props = [], styles = [], spreads = [], expressions = [], template = [], elements = [], locals = new Declarations(), elementChildIndex = -1, elementIds = {}, createRootId = () => {
@@ -750,3 +798,2 @@ if (!initRoot) {
         elementIds[0] = ID.root;
-        hierarchy.push(0);
         initRoot = true;
@@ -777,10 +824,19 @@ }
       return element && element.childCount > 1 ? nextSibling >= element.childElementCount ? "null" : getElementId([...hierarchy, nextSibling], elementIds, locals) : null;
-    }, addAttrExpression = (node, runtimeId) => {
-      expressions.push(
-        createFunctionCall(runtimeId, [
-          currentId,
-          createStringLiteral(node.name),
-          node.callId ?? (node.observable ? `() => ${node.value}` : node.value)
-        ])
-      );
+    }, addAttrExpression = (node, runtimeId, name = node.name) => {
+      if (node.observable) {
+        expressions.push(
+          createFunctionCall(RUNTIME.effect, [
+            `() => ${createFunctionCall(runtimeId, [
+              currentId,
+              createStringLiteral(name),
+              node.value
+            ])}`
+          ])
+        );
+        ctx.runtime.add(RUNTIME.effect);
+      } else {
+        expressions.push(
+          createFunctionCall(runtimeId, [currentId, createStringLiteral(name), node.value])
+        );
+      }
       ctx.runtime.add(runtimeId);
@@ -792,12 +848,14 @@ }, addChildren = (children) => {
       props.push(`get $children() { ${hasReturn ? `return ${serialized}` : serialized} }`);
-    }, insert = (marker, value) => {
+    }, insert = (marker, block) => {
       const beforeId = ctx.hydratable ? null : getNextElementId();
-      const parentId = ctx.hydratable ? (marker == null ? void 0 : marker()) ?? null : beforeId || elementChildIndex === -1 ? getParentElementId() : currentId ??= getCurrentElementId();
+      const parentId = ctx.hydratable ? (marker == null ? void 0 : marker()) ?? null : getParentElementId();
       const insertId = ctx.hydratable ? RUNTIME.insertAtMarker : RUNTIME.insert;
-      expressions.push(createFunctionCall(insertId, [parentId, value, beforeId]));
+      expressions.push(createFunctionCall(insertId, [parentId, block, beforeId]));
       ctx.runtime.add(insertId);
     }, isVirtualElement = () => customElement || hostElement;
-    const firstNode = ast.tree[0], isFirstNodeElement = isElementNode(firstNode), isFirstNodeExpression = isExpressionNode(firstNode), isFirstNodeHostElement = isFirstNodeElement && firstNode.tagName === "HostElement", isFirstNodeComponent = isFirstNodeElement && firstNode.isComponent;
-    if (ctx.hydratable && isFirstNodeElement && !firstNode.isComponent && firstNode.tagName !== "HostElement" && firstNode.tagName !== "CustomElement") {
-      template.push(MARKER.element);
+    if (isFirstNodeElement && !firstNode.isComponent && firstNode.tagName !== "HostElement" && firstNode.tagName !== "CustomElement") {
+      hierarchy.push(0);
+      if (ctx.hydratable) {
+        template.push(MARKER.element);
+      }
     }
@@ -993,5 +1051,4 @@ for (let i = 0; i < ast.tree.length; i++) {
           if (node.namespace === "$prop") {
-            if (node.name === "innerHTML") {
+            if (node.name === "innerHTML")
               innerHTML = true;
-            }
             if (customElement) {
@@ -1002,4 +1059,11 @@ props.push(serializeComponentProp(dom, node, ctx));
               ctx.runtime.add(RUNTIME.innerHTML);
+            } else if (node.observable) {
+              expressions.push(
+                createFunctionCall(RUNTIME.effect, [
+                  `() => void (${currentId}.${node.name} = ${node.value})`
+                ])
+              );
+              ctx.runtime.add(RUNTIME.effect);
             } else {
-              addAttrExpression(node, RUNTIME.prop);
+              expressions.push(`${currentId}.${node.name} = ${node.value};`);
             }
@@ -1018,3 +1082,3 @@ } else if (node.namespace === "$class") {
             } else {
-              addAttrExpression(node, RUNTIME.cssvar);
+              addAttrExpression(node, RUNTIME.style, `--${node.name}`);
             }
@@ -1035,7 +1099,15 @@ }
       } else if (isEventNode(node)) {
-        const args = [currentId, createStringLiteral(node.type), node.value];
-        if (node.namespace === "$oncapture")
-          args.push(`1 /* CAPTURE */`);
-        expressions.push(createFunctionCall(RUNTIME.listen, args));
-        ctx.runtime.add(RUNTIME.listen);
+        if (node.delegate && ctx.delegateEvents) {
+          ctx.events.add(createStringLiteral(node.type));
+          expressions.push(`${currentId}.$$${node.type} = ${node.value};`);
+          if (node.data) {
+            expressions.push(`${currentId}.$$${node.type}Data = ${node.data};`);
+          }
+        } else {
+          const args = [currentId, createStringLiteral(node.type), node.value];
+          if (node.namespace === "$oncapture")
+            args.push(`1 /* CAPTURE */`);
+          expressions.push(createFunctionCall(RUNTIME.listen, args));
+          ctx.runtime.add(RUNTIME.listen);
+        }
       } else if (isDirectiveNode(node)) {
@@ -1062,7 +1134,20 @@ expressions.push(createFunctionCall(RUNTIME.directive, [currentId, node.name, node.value]));
           } else if (ctx.fragment && ctx.hydratable) {
-            if (!node.observable) {
+            if (!node.observable && !((_b = node.children) == null ? void 0 : _b.length)) {
               expressions.push(expression);
+            } else if ((_c = node.children) == null ? void 0 : _c.length) {
+              expressions.push(
+                selfInvokingFunction(
+                  [
+                    `const $$_signal = ${createFunctionCall(RUNTIME.computed, [`() => ${code}`])};`,
+                    "$$_signal();",
+                    "return $$_signal;"
+                  ].join("")
+                )
+              );
+              ctx.runtime.add(RUNTIME.computed);
             } else {
-              expressions.push(createFunctionCall(RUNTIME.nextExpression, [expression]));
-              ctx.runtime.add(RUNTIME.nextExpression);
+              expressions.push(
+                node.callId ?? createFunctionCall(RUNTIME.computed, [`() => ${code}`])
+              );
+              ctx.runtime.add(RUNTIME.computed);
             }
@@ -1456,6 +1541,7 @@ } else {
         } else {
-          if (node !== firstNode || ctx.fragment && node.observable)
+          if (!ctx.fragment && (elements.length > 0 || node !== firstNode && node.observable)) {
             marker();
+          }
           const code = !node.children ? node.value : serializeParentExpression(ssr, node, ctx);
-          commit(node.callId ?? (node.observable ? `() => ${code}` : code));
+          commit(node.callId ?? code);
         }
@@ -1507,3 +1593,4 @@ } else if (isSpreadNode(node)) {
     hydratable = false,
-    logLevel = "warn"
+    logLevel = "warn",
+    delegateEvents = false
   } = options;
@@ -1523,3 +1610,5 @@ const SSR = generate === "ssr";
     runtime: /* @__PURE__ */ new Set(),
-    hydratable
+    events: /* @__PURE__ */ new Set(),
+    hydratable,
+    delegateEvents
   };
@@ -1536,2 +1625,9 @@ const serialize = (SSR ? ssr : dom).serialize;
   logTime("Serialized AST", serializeStartTime, 3 /* Info */);
+  if (!SSR && ctx.events.size > 0) {
+    code.append(`
+
+$$_delegate_events([${Array.from(ctx.events).join(", ")}]);
+`);
+    ctx.runtime.add("$$_delegate_events");
+  }
   if (ctx.runtime.size > 0) {
@@ -1577,2 +1673,3 @@ code.prepend(
     pretty: null,
+    delegateEvents: false,
     ...options
@@ -1582,3 +1679,3 @@ };
 var unplugin = createUnplugin((options = {}) => {
-  let { logLevel, include, exclude, debug, hydratable, generate, pretty } = resolveOptions(options);
+  let { logLevel, include, exclude, debug, hydratable, generate, pretty, delegateEvents } = resolveOptions(options);
   const filter = createFilter(include, exclude);
@@ -1592,2 +1689,3 @@ const debugFilter = !isUndefined(debug) ? createFilter(debug) : null;
     pretty: pretty ?? true,
+    delegateEvents,
     sourcemap: true
@@ -1594,0 +1692,0 @@ });

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "type": "module",
@@ -8,0 +8,0 @@ "module": "./dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

254592

increased by3.36%

Lines of code

6954

increased by3.04%

No dependency changes