marko 5.32.15 → 5.33.1

package/package.json

@@ -1,85 +1,85 @@
 {
-    "name": "marko",
-    "version": "5.32.15",
-    "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
-    "keywords": [
-        "front-end",
-        "templating",
-        "template",
-        "async",
-        "streaming",
-        "components",
-        "ui",
-        "vdom",
-        "dom",
-        "morphdom",
-        "virtual",
-        "virtual-dom"
-    ],
-    "homepage": "https://markojs.com/",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/marko-js/marko.git"
-    },
-    "license": "MIT",
-    "author": "Patrick Steele-Idem <pnidem@gmail.com>",
-    "maintainers": [
-        "Patrick Steele-Idem <pnidem@gmail.com>",
-        "Michael Rawlings <ml.rawlings@gmail.com>",
-        "Phillip Gates-Idem <phillip.idem@gmail.com>",
-        "Austin Kelleher <a@alk.im>",
-        "Dylan Piercey <pierceydylan@gmail.com>",
-        "Martin Aberer"
-    ],
-    "main": "index.js",
-    "browser": {
-        "./compiler.js": "./compiler-browser.marko",
-        "./components.js": "./components-browser.marko",
-        "./legacy-components.js": "./legacy-components-browser.marko",
-        "./index.js": "./index-browser.marko"
-    },
-    "types": "index.d.ts",
-    "bin": {
-        "markoc": "bin/markoc"
-    },
-    "files": [
-        "bin",
-        "dist",
-        "docs",
-        "src",
-        "compiler-browser.marko",
-        "compiler.js",
-        "components-browser.marko",
-        "components.js",
-        "legacy-components-browser.marko",
-        "legacy-components.js",
-        "env.js",
-        "index.d.ts",
-        "index-browser.marko",
-        "index.js",
-        "node-require.js",
-        "tags-html.d.ts"
-    ],
-    "scripts": {
-        "build": "babel ./src --out-dir ./dist --delete-dir-on-start --copy-files --config-file ../../babel.config.js --env-name=production"
-    },
-    "dependencies": {
-        "@marko/compiler": "^5.34.7",
-        "@marko/translator-default": "^5.31.17",
-        "app-module-path": "^2.2.0",
-        "argly": "^1.2.0",
-        "browser-refresh-client": "1.1.4",
-        "complain": "^1.6.0",
-        "csstype": "^3.1.3",
-        "events-light": "^1.0.5",
-        "listener-tracker": "^2.0.0",
-        "minimatch": "^9.0.3",
-        "raptor-util": "^3.2.0",
-        "resolve-from": "^5.0.0",
-        "self-closing-tags": "^1.0.1",
-        "warp10": "^2.1.0"
-    },
-    "logo": {
-        "url": "https://raw.githubusercontent.com/marko-js/branding/master/marko-logo-small.png"
-    }
+  "name": "marko",
+  "version": "5.33.1",
+  "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
+  "keywords": [
+    "front-end",
+    "templating",
+    "template",
+    "async",
+    "streaming",
+    "components",
+    "ui",
+    "vdom",
+    "dom",
+    "morphdom",
+    "virtual",
+    "virtual-dom"
+  ],
+  "homepage": "https://markojs.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marko-js/marko.git"
+  },
+  "license": "MIT",
+  "author": "Patrick Steele-Idem <pnidem@gmail.com>",
+  "maintainers": [
+    "Patrick Steele-Idem <pnidem@gmail.com>",
+    "Michael Rawlings <ml.rawlings@gmail.com>",
+    "Phillip Gates-Idem <phillip.idem@gmail.com>",
+    "Austin Kelleher <a@alk.im>",
+    "Dylan Piercey <pierceydylan@gmail.com>",
+    "Martin Aberer"
+  ],
+  "main": "index.js",
+  "browser": {
+    "./compiler.js": "./compiler-browser.marko",
+    "./components.js": "./components-browser.marko",
+    "./legacy-components.js": "./legacy-components-browser.marko",
+    "./index.js": "./index-browser.marko"
+  },
+  "types": "index.d.ts",
+  "bin": {
+    "markoc": "bin/markoc"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "docs",
+    "src",
+    "compiler-browser.marko",
+    "compiler.js",
+    "components-browser.marko",
+    "components.js",
+    "legacy-components-browser.marko",
+    "legacy-components.js",
+    "env.js",
+    "index.d.ts",
+    "index-browser.marko",
+    "index.js",
+    "node-require.js",
+    "tags-html.d.ts"
+  ],
+  "scripts": {
+    "build": "babel ./src --out-dir ./dist --copy-files --config-file ../../babel.config.js --env-name=production"
+  },
+  "dependencies": {
+    "@marko/compiler": "^5.35.1",
+    "@marko/translator-default": "^5.32.1",
+    "app-module-path": "^2.2.0",
+    "argly": "^1.2.0",
+    "browser-refresh-client": "1.1.4",
+    "complain": "^1.6.0",
+    "csstype": "^3.1.3",
+    "events-light": "^1.0.5",
+    "listener-tracker": "^2.0.0",
+    "minimatch": "^9.0.3",
+    "raptor-util": "^3.2.0",
+    "resolve-from": "^5.0.0",
+    "self-closing-tags": "^1.0.1",
+    "warp10": "^2.1.0"
+  },
+  "logo": {
+    "url": "https://raw.githubusercontent.com/marko-js/branding/master/marko-logo-small.png"
+  }
 }

package/src/node_modules/@internal/components-entry/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var warp10 = require("warp10");
+var w10NOOP = require("warp10/constants").NOOP;
 var safeJSONRegExp = /<\/|\u2028|\u2029/g;
 var IGNORE_GLOBAL_TYPES = new Set(["undefined", "function", "symbol"]);
 var DEFAULT_RUNTIME_ID = "M";
@@ -90,11 +91,6 @@ function addComponentsFromContext(componentsContext, componentsToHydrate) {
 
       needsState = true;
     } else {
-      if (input && input.renderBody) {
-        renderBody = input.renderBody;
-        input.renderBody = undefined;
-      }
-
       if (
         !(flags & FLAG_WILL_RERENDER_IN_BROWSER) ||
         flags & FLAG_OLD_HYDRATE_NO_CREATE
@@ -115,6 +111,8 @@ function addComponentsFromContext(componentsContext, componentsToHydrate) {
         if (isNotEmpty(component)) {
           serializedProps = component;
         }
+      } else {
+        renderBody = input.renderBody;
       }
     }
 
@@ -138,9 +136,9 @@ function addComponentsFromContext(componentsContext, componentsToHydrate) {
       }
     }
 
-    if (typeof renderBody === "function") {
+    if (typeof renderBody === "function" && renderBody.toJSON && renderBody.toJSON() === w10NOOP) {
       flags |= FLAG_HAS_RENDER_BODY;
-      renderBody = undefined;
+      renderBody = input.renderBody = undefined;
     }
 
     var extra = {

package/src/runtime/helpers/dynamic-tag.js

@@ -68,6 +68,7 @@ module.exports = function dynamicTag(
       var renderer =
         tag._ ||
         (tag.renderer ? tag.renderer.renderer || tag.renderer : tag.render);
+      var render = (tag && tag.renderBody) || tag;
 
       // eslint-disable-next-line no-constant-condition
       if ("MARKO_DEBUG") {
@@ -78,12 +79,15 @@ module.exports = function dynamicTag(
         }
       }
 
+      if (dynamicTag.___runtimeCompat) {
+        renderer = dynamicTag.___runtimeCompat(renderer, render, args);
+      }
+
       if (renderer) {
         out.c(componentDef, key, customEvents);
         renderer(attrs, out);
         out.___assignedComponentDef = null;
       } else {
-        var render = (tag && tag.renderBody) || tag;
         var isFn = typeof render === "function";
 
         // eslint-disable-next-line no-constant-condition

package/src/runtime/helpers/tags-compat-dom.js

@@ -0,0 +1,265 @@
+import { ___getComponentsContext } from "../components/ComponentsContext";
+import { ___createFragmentNode } from "../vdom/morphdom/fragment";
+
+const {
+  prepare,
+  runEffects,
+  patchConditionals,
+  createScopeWithRenderer,
+  queueEffect,
+  scopeLookup,
+  getRegisteredWithScope,
+  register,
+} = require(
+  // eslint-disable-next-line no-constant-condition
+  "MARKO_DEBUG" ? "@marko/runtime-tags/debug/dom" : "@marko/runtime-tags/dom",
+);
+const { ___componentLookup } = require("@internal/components-util");
+const defineComponent = require("../components/defineComponent");
+const { r: registerComponent } = require("../components/registry");
+const createRenderer = require("../components/renderer");
+const defaultCreateOut = require("../createOut");
+const morphdom = require("../vdom/morphdom");
+const dynamicTag = require("./dynamic-tag");
+
+export default dynamicTag.___runtimeCompat = function tagsToVdom(
+  tagsRenderer,
+  renderBody,
+  args,
+) {
+  if (
+    tagsRenderer
+      ? tagsRenderer.___clone === undefined
+      : !Array.isArray(renderBody) && renderBody?.___clone === undefined
+  )
+    return tagsRenderer;
+
+  return (input, out) =>
+    TagsCompat({ i: args ? args : input, r: tagsRenderer || renderBody }, out);
+};
+
+const TagsCompatId = "tags-compat";
+const TagsCompat = createRenderer(
+  function (_, out, componentDef, component) {
+    let existing = false;
+    const isHydrate =
+      ___getComponentsContext(out).___globalContext.___isHydrate;
+    const input = Array.isArray(_.i) ? _.i : [_.i];
+    const tagsRenderer = resolveRegistered(_.r);
+    const args = tagsRenderer.___args;
+
+    component.effects = prepare(() => {
+      if (isHydrate) {
+        const scopeId = out.global.componentIdToScopeId[component.id];
+        component.scope = scopeLookup[scopeId];
+      }
+      if (!component.scope) {
+        component.scope = createScopeWithRenderer(
+          tagsRenderer /* out.global as context */,
+        );
+        for (const signal of tagsRenderer.___closureSignals) {
+          signal(component.scope, true);
+        }
+      } else {
+        args && args(component.scope, input, 1);
+        existing = true;
+      }
+      args && args(component.scope, input);
+    });
+    out.bf(out.___assignedKey, component, existing);
+    if (!existing) {
+      out.node({
+        ___actualize: () =>
+          component.scope.___startNode === component.scope.___endNode
+            ? component.scope.___startNode
+            : component.scope.___startNode.parentNode,
+      });
+    }
+    out.ef();
+  },
+  {
+    t: TagsCompatId,
+    d: "MARKO_DEBUG",
+  },
+  {},
+);
+
+registerComponent(TagsCompatId, () => ({
+  _: TagsCompat,
+  Component: defineComponent(
+    {
+      onMount() {
+        runEffects(this.effects);
+      },
+      onUpdate() {
+        runEffects(this.effects);
+      },
+    },
+    TagsCompat,
+  ),
+}));
+
+// (
+//   nodeAccessor: Accessor,
+//   dynamicTagAttrs?: IntersectionSignal,
+//   intersection?: IntersectionSignal,
+//   valueWithIntersection?: ValueSignal
+// )
+
+const rendererCache = new WeakMap();
+
+patchConditionals((conditional) => (...args) => {
+  const signal = conditional(...args);
+  const hasAttrs = args.length > 1;
+  return (scope, renderer, clean) => {
+    return signal(scope, create5to6Renderer(renderer, hasAttrs), clean);
+  };
+});
+
+function create5to6Renderer(renderer, hasAttrs) {
+  let newRenderer = renderer;
+  if (renderer) {
+    const rendererFromAnywhere =
+      renderer._ ||
+      renderer.render ||
+      (renderer.renderer && renderer.renderer.renderer) ||
+      renderer.renderer;
+    const isMarko6 = rendererFromAnywhere
+      ? rendererFromAnywhere.___clone
+      : renderer.___clone;
+
+    if (typeof renderer !== "string" && !isMarko6) {
+      newRenderer = rendererCache.get(renderer);
+      if (!newRenderer) {
+        const { Component } = renderer;
+        if (Component) {
+          const setCustomEvents = Component.prototype.___setCustomEvents;
+          Component.prototype.___setCustomEvents = function (
+            customEvents,
+            scopeId,
+          ) {
+            for (const customEvent of customEvents) {
+              customEvent[1] = resolveRegistered(customEvent[1]);
+            }
+
+            setCustomEvents.call(this, customEvents, scopeId);
+          };
+        }
+        newRenderer = {
+          ___setup(scope) {
+            if (!hasAttrs) {
+              renderAndMorph(scope, rendererFromAnywhere, renderer, {});
+            }
+          },
+          ___clone() {
+            const realFragment = document.createDocumentFragment();
+            ___createFragmentNode(null, null, realFragment);
+            return realFragment;
+          },
+          ___hasUserEffects: 1,
+          ___args(scope, input, clean) {
+            if (clean) return;
+            renderAndMorph(scope, rendererFromAnywhere, renderer, input);
+          },
+        };
+        rendererCache.set(renderer, newRenderer);
+      }
+    }
+  }
+  return newRenderer;
+}
+
+register("@marko/tags-compat-5-to-6", create5to6Renderer);
+
+function renderAndMorph(scope, renderer, renderBody, input) {
+  const out = defaultCreateOut();
+  let rootNode = scope.___startNode.fragment;
+  if (!rootNode) {
+    const component = (scope.marko5Component = ___componentLookup[scope.m5c]);
+    rootNode = component.___rootNode;
+    scope.___startNode = rootNode.startNode;
+    scope.___endNode = rootNode.endNode;
+  }
+  const host = scope.___startNode;
+  const existingComponent = scope.marko5Component;
+  const componentsContext = ___getComponentsContext(out);
+  const globalComponentsContext = componentsContext.___globalContext;
+  let customEvents;
+  globalComponentsContext.___rerenderComponent = existingComponent;
+  out.sync();
+  if (renderer) {
+    const [rawInput] = input;
+    const normalizedInput = {};
+
+    for (const key in rawInput) {
+      let value = rawInput[key];
+      if (key.startsWith("on")) {
+        const c = key[2];
+        customEvents = customEvents || {};
+        customEvents[(c === "-" ? "" : c.toLowerCase()) + key.slice(3)] = [
+          value,
+        ];
+      } else {
+        normalizedInput[key] = rawInput[key];
+      }
+    }
+
+    renderer(normalizedInput, out);
+  } else {
+    RenderBodyComponent({ renderBody, args: input }, out);
+  }
+
+  queueEffect(scope, () => {
+    const targetNode = out.___getOutput().___firstChild;
+    morphdom(rootNode, targetNode, host, componentsContext);
+    const componentDefs = componentsContext.___initComponents(
+      getRootNode(host),
+    );
+    const component = componentDefs[0].___component;
+    component.___rootNode = rootNode;
+    component.___input = input[0];
+    component.___customEvents = customEvents;
+    scope.marko5Component = component;
+  });
+}
+
+function getRootNode(el) {
+  var cur = el;
+  while (cur.parentNode) cur = cur.parentNode;
+  return cur;
+}
+
+const RenderBodyComponentId = "renderbody-renderer";
+const RenderBodyComponent = createRenderer(
+  function (input, out, _componentDef) {
+    dynamicTag(
+      out,
+      input.renderBody,
+      null,
+      null,
+      input.args,
+      null,
+      _componentDef,
+      "0",
+    );
+  },
+  {
+    t: RenderBodyComponentId,
+    i: true,
+    d: "MARKO_DEBUG",
+  },
+  {},
+);
+
+registerComponent(RenderBodyComponentId, () => ({
+  _: RenderBodyComponent,
+  Component: defineComponent({}, RenderBodyComponent),
+}));
+
+function resolveRegistered(renderer) {
+  if (!Array.isArray(renderer)) return renderer;
+
+  const [registerId, scopeId] = renderer;
+  const scope = scopeLookup[scopeId];
+  return getRegisteredWithScope(registerId, scope);
+}

package/src/runtime/helpers/tags-compat-html.js

@@ -0,0 +1,167 @@
+import initComponentsTag from "../../core-tags/components/init-components-tag";
+import { ___getComponentsContext } from "../components/ComponentsContext";
+
+const tagsAPI = require(
+  // eslint-disable-next-line no-constant-condition
+  "MARKO_DEBUG" ? "@marko/runtime-tags/debug/html" : "@marko/runtime-tags/html",
+);
+const createRenderer = require("../components/renderer");
+const defaultCreateOut = require("../createOut");
+const dynamicTag5 = require("./dynamic-tag");
+const {
+  patchDynamicTag,
+  createRenderFn,
+  fork,
+  write,
+  makeSerializable,
+  register,
+  writeScope,
+  nextScopeId,
+  getRegistryInfo,
+} = tagsAPI;
+
+const FN_TO_JSON = function () {
+  // TODO: this should instead return an object that contains getRegistryInfo
+  // then in the dom-compat, handle that object to lookup the function in the registry
+  // (we also need to do this for events)
+  return getRegistryInfo(this);
+};
+
+const isMarko6 = (fn) => !!fn.___isTagsAPI;
+const isMarko5 = (fn) => !fn.___isTagsAPI;
+
+export default dynamicTag5.___runtimeCompat = function tagsToVdom(
+  tagsRenderer,
+  renderBody,
+  args,
+) {
+  if (tagsRenderer ? isMarko5(tagsRenderer) : isMarko5(renderBody))
+    return tagsRenderer;
+
+  if (!tagsRenderer && renderBody) {
+    renderBody.toJSON = FN_TO_JSON;
+  }
+
+  return (input, out) =>
+    TagsCompat(
+      args
+        ? { i: args, r: (args) => (tagsRenderer || renderBody)(...args) }
+        : { i: input, r: tagsRenderer || renderBody },
+      out,
+    );
+};
+
+const TagsCompatId = "tags-compat";
+const TagsCompat = createRenderer(
+  function (_, out, componentDef, component) {
+    const input = _.i;
+    const tagsRenderer = _.r;
+    const renderFn = createRenderFn(tagsRenderer);
+    const $global = out.global;
+    const streamData = ($global.streamData = $global.streamData || {});
+
+    $global.serializedGlobals = $global.serializedGlobals || {};
+    $global.serializedGlobals.componentIdToScopeId = true;
+    $global.componentIdToScopeId = $global.componentIdToScopeId || {};
+    $global.componentIdToScopeId[component.id] = streamData.scopeId || 0;
+    out.bf(out.___assignedKey, component, true);
+    renderFn(out.beginAsync(), input, {}, streamData);
+    out.ef();
+  },
+  {
+    t: TagsCompatId,
+    d: "MARKO_DEBUG",
+  },
+  {},
+);
+
+patchDynamicTag(
+  function getRenderer(tag) {
+    const renderer = tag._ || tag.renderBody || tag;
+    if (isMarko6(renderer)) return renderer;
+
+    const renderer5 =
+      tag._ ||
+      tag.render ||
+      (tag.renderer && tag.renderer.renderer) ||
+      tag.renderer;
+    const renderBody5 = tag.renderBody || tag;
+
+    return (input, ...args) => {
+      const out = defaultCreateOut();
+      let customEvents;
+
+      out.global.streamData = tagsAPI.$_streamData;
+
+      if (renderer5) {
+        const normalizedInput = {};
+
+        for (const key in input) {
+          let value = input[key];
+          if (key.startsWith("on") && typeof value === "function") {
+            const c = key[2];
+            customEvents = customEvents || [];
+            customEvents.push([
+              (c === "-" ? "" : c.toLowerCase()) + key.slice(3),
+              value,
+            ]);
+            value.toJSON = FN_TO_JSON;
+          } else {
+            normalizedInput[key] = input[key];
+          }
+        }
+        renderer5(normalizedInput, out);
+      } else {
+        renderBody5(out, input, ...args);
+      }
+
+      const componentsContext = ___getComponentsContext(out);
+      const component = componentsContext.___components[0];
+      if (component) {
+        component.___component.___customEvents = customEvents;
+        writeScope(nextScopeId(), {
+          m5c: component.id,
+        });
+      }
+
+      initComponentsTag({}, out);
+
+      let async;
+      out.once("finish", (result) => {
+        if (!async) {
+          async = false;
+          write(result.toString());
+        }
+      });
+
+      out.end();
+
+      if (async !== false) {
+        async = true;
+        fork(out, (result) => {
+          write(result.toString());
+        });
+      }
+    };
+  },
+  function createRenderer(renderFn) {
+    renderFn.___isTagsAPI = true;
+    return renderFn;
+  },
+);
+
+function dummyCreate5to6Renderer() {}
+
+register(dummyCreate5to6Renderer, "@marko/tags-compat-5-to-6");
+
+export function serialized5to6(renderer, id) {
+  const dummyRenderer = () => {};
+  register(dummyRenderer, id);
+  return makeSerializable(renderer, (s) =>
+    s
+      .value(dummyCreate5to6Renderer)
+      .code("(")
+      .value(dummyRenderer)
+      .code(",!0)"),
+  );
+}