@maverick-js/compiler - npm Package Compare versions

Comparing version 0.35.3 to 0.36.0

dist/index.js

@@ -8,3 +8,2 @@ import { createFunctionCall, setGlobalLogLevel, mapLogLevelStringToNumber, log, logTime, Declarations, format, createImportDeclaration, trimQuotes, trimTrailingSemicolon, createStringLiteral, selfInvokingFunction, escapeDoubleQuotes, createObjectLiteral, trimWhitespace } from './chunks/chunk-SEGPSIF6.js';
 import { encode, decode } from 'html-entities';
-import kleur from 'kleur';
 import ts from 'typescript';
@@ -350,3 +349,3 @@
 function parseElement(node, ast, meta) {
-  const tagName = getTagName(node), isComponent = isComponentTagName(tagName), isHostElement = tagName === "HostElement", isCustomElement = tagName === "CustomElement", isVoid = !isComponent && VOID_ELEMENT_TAGNAME.has(tagName), isSVG = !isComponent && (tagName === "svg" || SVG_ELEMENT_TAGNAME.has(tagName)), isSelfClosing = ts.isJsxSelfClosingElement(node), supportsChildren = isSelfClosing || isVoid;
+  const tagName = getTagName(node), isComponent = isComponentTagName(tagName), isCustomElement = tagName.includes("-"), isVoid = !isComponent && VOID_ELEMENT_TAGNAME.has(tagName), isSVG = !isComponent && (tagName === "svg" || SVG_ELEMENT_TAGNAME.has(tagName)), isSelfClosing = ts.isJsxSelfClosingElement(node), supportsChildren = isSelfClosing || isVoid;
   let children = !supportsChildren ? filterEmptyJSXChildNodes(Array.from(node.children)) : [];
@@ -358,3 +357,3 @@ const firstChild = children[0];
   const childCount = children.length, childElementCount = filterDOMElements(children).length, hasChildren = childCount > 0;
-  let isDynamic = isComponent || isCustomElement || isHostElement;
+  let isDynamic = isComponent || isCustomElement;
   const dynamic = onceFn(() => {
@@ -385,3 +384,3 @@ isDynamic = true;
   if (hasChildren) {
-    if (isComponent || isCustomElement || isHostElement) {
+    if (isComponent || isCustomElement) {
       const childNodes = [];
@@ -594,3 +593,3 @@ for (const child of children) {
 function isComponentTagName(tagName) {
-  return tagName !== "CustomElement" && tagName !== "HostElement" && (tagName[0] && tagName[0].toLowerCase() !== tagName[0] || tagName.includes(".") || /[^a-zA-Z]/.test(tagName[0]));
+  return !tagName.includes("-") && (tagName[0] && tagName[0].toLowerCase() !== tagName[0] || tagName.includes(".") || /[^a-zA-Z]/.test(tagName[0]));
 }
@@ -732,3 +731,2 @@ function getTagName(node) {
   element: "$$_el",
-  host: "$$_host",
   component: "$$_comp",
@@ -744,4 +742,2 @@ expression: "$$_expr"
   nextElement: "$$_next_element",
-  nextCustomElement: "$$_next_custom_element",
-  hostElement: "$$_host_element",
   createElement: "$$_create_element",
@@ -764,6 +760,6 @@ setupCustomElement: "$$_setup_custom_element",
   mergeProps: "$$_merge_props",
-  innerHTML: "$$_inner_html",
   computed: "$$_computed",
   effect: "$$_effect",
-  peek: "$$_peek"
+  peek: "$$_peek",
+  hydrating: "$$_hydrating"
 };
@@ -781,7 +777,7 @@ var MARKER = {
     var _a, _b, _c;
-    const firstNode = ast.tree[0], isFirstNodeElement = isElementNode(firstNode), isFirstNodeExpression = isExpressionNode(firstNode), isFirstNodeHostElement = isFirstNodeElement && firstNode.tagName === "HostElement", isFirstNodeComponent = isFirstNodeElement && firstNode.isComponent;
+    const firstNode = ast.tree[0], isFirstNodeElement = isElementNode(firstNode), isFirstNodeExpression = isExpressionNode(firstNode), 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, textContent = false, childrenFragment = false, currentId, component, definition, hostElement, customElement, templateId, returnId, hierarchy = [], props = [], styles = [], spreads = [], expressions = [], groupedEffects = [], template = [], elements = [], locals = new Declarations(), elementChildIndex = -1, elementIds = {}, createRootId = () => {
+    let skip = -1, initRoot = false, innerHTML = false, textContent = false, childrenFragment = false, currentId, component, customElement, templateId, hierarchy = [], props = [], styles = [], spreads = [], expressions = [], groupedEffects = [], template = [], elements = [], locals = new Declarations(), elementChildIndex = -1, elementIds = {}, createRootId = () => {
       if (!initRoot) {
@@ -860,4 +856,4 @@ if (!templateId)
       ctx.runtime.add(insertId);
-    }, isVirtualElement = () => customElement || hostElement;
-    if (isFirstNodeElement && !firstNode.isComponent && firstNode.tagName !== "HostElement" && firstNode.tagName !== "CustomElement") {
+    };
+    if (isFirstNodeElement && !firstNode.isComponent) {
       hierarchy.push(0);
@@ -902,7 +898,6 @@ if (ctx.hydratable) {
         if (isAttributesEnd(node)) {
-          if (hostElement)
-            continue;
-          if (customElement) {
-            if (!innerHTML && customElement.children) {
-              addChildren(customElement.children);
+          const element = elements.at(-1);
+          if (element && element.tagName.includes("-")) {
+            if (!innerHTML && element.children) {
+              addChildren(element.children);
             }
@@ -912,6 +907,7 @@ expressions.push(
                 currentId,
-                definition.value,
                 props.length > 0 ? `{ ${props.join(", ")} }` : null
               ])
             );
+            props = [];
+            template.push(` mk-d`);
             ctx.runtime.add(RUNTIME.setupCustomElement);
@@ -923,4 +919,3 @@ }
           }
-          const element = elements.at(-1);
-          if (element && !element.isVoid && !customElement)
+          if (element && !element.isVoid)
             template.push(">");
@@ -957,36 +952,10 @@ } else if (isChildrenStart(node)) {
         } else if (isElementEnd(node)) {
-          if (hostElement) {
-            if (expressions.length === 0)
-              locals.delete(ID.host);
-            if (hostElement.children) {
-              expressions.push(
-                serializeChildren(dom, hostElement.children, { ...ctx, scoped: true })
-              );
-              childrenFragment = true;
+          const element = elements.pop();
+          if (element) {
+            if (textContent) {
+              template.push(" ");
+              textContent = false;
             }
-            hostElement = void 0;
-            continue;
+            template.push(element.isVoid ? ` />` : `</${element.tagName}>`);
           }
-          if (customElement) {
-            if (!ctx.hydratable) {
-              if (initRoot) {
-                insert(null, currentId);
-              } else {
-                returnId = currentId;
-              }
-            } else if (elements.length === 0) {
-              returnId = currentId;
-            }
-            definition = void 0;
-            customElement = void 0;
-          } else {
-            const element = elements.pop();
-            if (element) {
-              if (textContent) {
-                template.push(" ");
-                textContent = false;
-              }
-              template.push(element.isVoid ? ` />` : `</${element.tagName}>`);
-            }
-          }
           innerHTML = false;
@@ -1008,8 +977,2 @@ }
       } else if (isElementNode(node)) {
-        if (node.tagName === "HostElement") {
-          currentId = locals.create(ID.host, createFunctionCall(RUNTIME.hostElement));
-          ctx.runtime.add(RUNTIME.hostElement);
-          hostElement = node;
-          continue;
-        }
         if (isFirstNodeComponent && node == firstNode) {
@@ -1021,26 +984,11 @@ component = node;
           component = node;
-        if (node.tagName === "CustomElement")
+        const isCustomElement = node.tagName.includes("-");
+        if (isCustomElement)
           customElement = node;
-        const isElement = !component && !customElement;
+        const isElement = !component;
         if (i > 0 && isElement)
           elementChildIndex++;
         const dynamic = node.dynamic();
-        if (customElement) {
-          if (elements.length > 0)
-            createRootId();
-          definition = findCustomElementDefinition(ast, node, i);
-          currentId = locals.create(
-            ID.element,
-            ctx.hydratable ? createFunctionCall(RUNTIME.nextCustomElement, [
-              definition.value,
-              elements.length > 0 ? ID.walker : null
-            ]) : createFunctionCall(RUNTIME.createElement, [`${definition.value}.tagName`])
-          );
+        if (dynamic) {
           if (ctx.hydratable) {
-            ctx.runtime.add(RUNTIME.nextCustomElement);
-          } else {
-            ctx.runtime.add(RUNTIME.createElement);
-          }
-        } else if (dynamic) {
-          if (ctx.hydratable) {
             if (node.isComponent) {
@@ -1067,9 +1015,27 @@ currentId = locals.create(ID.component, nextMarker());
           if (node.namespace === "$prop") {
-            if (node.name === "innerHTML")
+            if (node.name === "innerHTML") {
               innerHTML = true;
-            if (customElement) {
-              props.push(serializeComponentProp(dom, node, ctx));
-            } else if (node.name === "innerHTML") {
-              expressions.push(createFunctionCall(RUNTIME.innerHTML, [currentId, node.value]));
-              ctx.runtime.add(RUNTIME.innerHTML);
+              if (customElement) {
+                props.push(`innerHTML: true`);
+              }
+              if (node.observable) {
+                expressions.push(
+                  createFunctionCall(RUNTIME.effect, [
+                    ctx.hydratable ? `() => { if (!${RUNTIME.hydrating}) (${currentId}.innerHTML = ${node.value}) }` : `() => void (${currentId}.innerHTML = ${node.value})`
+                  ])
+                );
+                ctx.runtime.add(RUNTIME.effect);
+              } else {
+                expressions.push(
+                  ctx.hydratable ? `if (!${RUNTIME.hydrating}) ${currentId}.innerHTML = ${node.value}` : `${currentId}.innerHTML = ${node.value}`
+                );
+              }
+              if (ctx.hydratable)
+                ctx.runtime.add(RUNTIME.hydrating);
+            } else if (customElement) {
+              if (!node.children && node.observable) {
+                props.push(`${node.name}: ${node.callId ?? `() => ${node.value}`}`);
+              } else {
+                props.push(serializeComponentProp(dom, node, ctx));
+              }
             } else if (node.observable) {
@@ -1099,3 +1065,3 @@ if (ctx.groupDOMEffects) {
           } else if (node.namespace === "$style") {
-            if (!node.dynamic && !isVirtualElement()) {
+            if (!node.dynamic) {
               styles.push(`${node.name}: ${trimQuotes(node.value)}`);
@@ -1106,3 +1072,3 @@ } else {
           } else if (node.namespace === "$cssvar") {
-            if (!node.dynamic && !isVirtualElement()) {
+            if (!node.dynamic) {
               styles.push(`--${node.name}: ${trimQuotes(node.value)}`);
@@ -1113,3 +1079,3 @@ } else {
           }
-        } else if (!node.dynamic && !isVirtualElement()) {
+        } else if (!node.dynamic) {
           if (node.name === "style") {
@@ -1120,3 +1086,3 @@ styles.push(trimTrailingSemicolon(trimQuotes(node.value)));
           }
-        } else if (!isVirtualElement() || node.name !== "$this") {
+        } else {
           addAttrExpression(node, RUNTIME.attr);
@@ -1149,3 +1115,3 @@ }
       } else if (isExpressionNode(node)) {
-        if (!node.dynamic && !isVirtualElement()) {
+        if (!node.dynamic) {
           template.push(encode(trimQuotes(node.value)));
@@ -1219,3 +1185,3 @@ } else {
         "\n",
-        `return ${isFirstNodeHostElement ? childrenFragment ? expressions[expressions.length - 1] : ID.host : returnId ?? createRootId()}`,
+        `return ${createRootId()}`,
         ctx.scoped && "})()"
@@ -1257,18 +1223,2 @@ ].filter(Boolean).join("");
 }
-function findCustomElementDefinition(ast, node, start) {
-  for (let j = start; j < ast.tree.length; j++) {
-    const attr = ast.tree[j];
-    if (isAttributeNode(attr) && attr.name === "$this") {
-      return attr;
-    } else if (isStructuralNode(attr)) {
-      break;
-    }
-  }
-  const loc = kleur.bold(
-    `${node.ref.getSourceFile().fileName} ${kleur.cyan(
-      `${node.ref.getStart()}:${node.ref.getEnd()}`
-    )}`
-  );
-  throw Error(`[maverick] \`element\` prop was not provided for \`CustomElement\` at ${loc}`);
-}
 var HYDRATION_MARKER = "<!$>";
@@ -1281,3 +1231,2 @@ var ID2 = {
   customElement: "$$_custom_element",
-  hostElement: "$$_host_element",
   ssr: "$$_ssr",
@@ -1294,3 +1243,3 @@ attr: "$$_attr",
   serialize(ast, ctx) {
-    let template = "", skip = -1, merging = false, childrenFragment = false, templates = [], parts = [], innerHTML, classes = [], styles = [], props = [], merger = [], spreads = [], elements = [], component, hostElement, customElement, commit = (part) => {
+    let template = "", skip = -1, merging = false, childrenFragment = false, templates = [], parts = [], innerHTML, classes = [], styles = [], props = [], merger = [], spreads = [], elements = [], component, customElement, commit = (part) => {
       parts.push(part);
@@ -1325,3 +1274,3 @@ templates.push(template);
     const firstNode = ast.tree[0], isFirstNodeElement = isElementNode(firstNode), isFirstNodeComponent = isFirstNodeElement && firstNode.isComponent;
-    if (isFirstNodeElement && !firstNode.isComponent && firstNode.tagName !== "HostElement") {
+    if (isFirstNodeElement && !firstNode.isComponent) {
       template += HYDRATION_MARKER;
@@ -1363,3 +1312,3 @@ }
           if (merging) {
-            let definition, $spread = [], $attrs = {}, $$class = {}, $$style = {};
+            let $spread = [], $attrs = {}, $$class = {}, $$style = {};
             const commitAttrs = () => {
@@ -1384,4 +1333,2 @@ if (Object.keys($$class).length) {
                   props.push(serializeComponentProp(ssr, prop, ctx));
-                } else if (prop.name === "$this") {
-                  definition = prop.value;
                 } else {
@@ -1397,23 +1344,3 @@ let group = prop.namespace ? prop.namespace === "$class" ? $$class : prop.namespace === "$style" || prop.namespace === "$cssvar" ? $$style : $attrs : $attrs;
             commitAttrs();
-            if (hostElement) {
-              if ($spread.length > 0) {
-                commit(
-                  createFunctionCall(RUNTIME2.hostElement, [
-                    $spread.length > 0 ? `[${$spread.join(", ")}]` : null
-                  ])
-                );
-                ctx.runtime.add(RUNTIME2.hostElement);
-              }
-            } else if (customElement) {
-              if (!definition) {
-                const ref = customElement.ref;
-                const loc = kleur.bold(
-                  `${ref.getSourceFile().fileName} ${kleur.cyan(
-                    `${ref.getStart()}:${ref.getEnd()}`
-                  )}`
-                );
-                throw Error(
-                  `[maverick] \`element\` prop was not provided for \`CustomElement\` at ${loc}`
-                );
-              }
+            if (customElement) {
               if (customElement.children) {
@@ -1424,4 +1351,4 @@ props.push(serializeComponentChildrenProp(ssr, customElement.children, ctx));
                 createFunctionCall(RUNTIME2.customElement, [
-                  definition,
-                  props.length > 0 || $spread.length > 0 ? `{ ${props.join(", ")} }` : null,
+                  `'${customElement.tagName}'`,
+                  props.length > 0 ? `{ ${props.join(", ")} }` : $spread.length > 0 ? "undefined" : null,
                   $spread.length > 0 ? `[${$spread.join(", ")}]` : null
@@ -1476,3 +1403,3 @@ ])
           merging = false;
-          if (!customElement && !hostElement && element && !element.isVoid) {
+          if (!customElement && element && !element.isVoid) {
             template += ">";
@@ -1488,17 +1415,9 @@ }
         } else if (isElementEnd(node)) {
-          if (hostElement) {
-            if (hostElement.children) {
-              commit(serializeChildren(ssr, hostElement.children, ctx));
-              childrenFragment = true;
-            }
-            hostElement = void 0;
-          } else {
-            const element = elements.pop();
-            if ((element == null ? void 0 : element.childCount) === 0)
-              commitInnerHTML(i);
-            if (customElement) {
-              customElement = void 0;
-            } else if (element) {
-              template += element.isVoid ? ` />` : `</${element.tagName}>`;
-            }
+          const element = elements.pop();
+          if ((element == null ? void 0 : element.childCount) === 0)
+            commitInnerHTML(i);
+          if (customElement) {
+            customElement = void 0;
+          } else if (element) {
+            template += element.isVoid ? ` />` : `</${element.tagName}>`;
           }
@@ -1522,8 +1441,6 @@ }
         } else {
-          const isCustomElement = node.tagName === "CustomElement", isHostElement = node.tagName === "HostElement", isVirtualElement = isCustomElement || isHostElement;
-          if (i > 0 && !isVirtualElement && node.dynamic())
+          const isCustomElement = node.tagName.includes("-");
+          if (i > 0 && node.dynamic())
             marker();
-          if (isHostElement) {
-            hostElement = node;
-          } else if (isCustomElement) {
+          if (isCustomElement) {
             customElement = node;
@@ -1535,3 +1452,3 @@ elements.push(node);
           }
-          merging = isVirtualElement || node.spread();
+          merging = isCustomElement || node.spread();
         }
@@ -1538,0 +1455,0 @@ } else if (isAttributeNode(node)) {

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "0.35.3",
+  "version": "0.36.0",
   "type": "module",
@@ -8,0 +8,0 @@ "types": "dist/types/index.d.ts",

No alert changes

Worsened metrics

Total package byte prevSize

266993

decreased by-2.73%

Lines of code

7165

decreased by-2.3%

No dependency changes