marko 5.33.2 → 5.33.4

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

@@ -0,0 +1,278 @@
+const { ___componentLookup } = require("@internal/components-util");
+const {
+  ___getComponentsContext,
+} = require("../../components/ComponentsContext");
+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 { ___createFragmentNode } = require("../../vdom/morphdom/fragment");
+const dynamicTag = require("../dynamic-tag");
+
+exports.p = function ({
+  prepare,
+  runEffects,
+  patchConditionals,
+  createScopeWithRenderer,
+  queueEffect,
+  scopeLookup,
+  getRegisteredWithScope,
+  register,
+}) {
+  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();
+    },
+    // eslint-disable-next-line no-constant-condition
+    "MARKO_DEBUG"
+      ? {
+          t: TagsCompatId,
+          d: true,
+        }
+      : {
+          t: TagsCompatId,
+        },
+    {},
+  );
+
+  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",
+      );
+    },
+    // eslint-disable-next-line no-constant-condition
+    "MARKO_DEBUG"
+      ? {
+          t: RenderBodyComponentId,
+          i: true,
+          d: true,
+        }
+      : {
+          t: RenderBodyComponentId,
+          i: true,
+        },
+    {},
+  );
+
+  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/runtime-html.js

@@ -0,0 +1,171 @@
+const initComponentsTag = require("../../../core-tags/components/init-components-tag");
+const {
+  ___getComponentsContext,
+} = require("../../components/ComponentsContext");
+const createRenderer = require("../../components/renderer");
+const defaultCreateOut = require("../../createOut");
+const dynamicTag5 = require("../dynamic-tag");
+
+exports.p = function (tagsAPI) {
+  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;
+
+  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();
+    },
+    // eslint-disable-next-line no-constant-condition
+    "MARKO_DEBUG"
+      ? {
+          t: TagsCompatId,
+          d: true,
+        }
+      : {
+          t: TagsCompatId,
+        },
+    {},
+  );
+
+  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");
+
+  return function serialized5to6(renderer, id) {
+    const dummyRenderer = () => {};
+    register(dummyRenderer, id);
+    return makeSerializable(renderer, (s) =>
+      s
+        .value(dummyCreate5to6Renderer)
+        .code("(")
+        .value(dummyRenderer)
+        .code(",!0)"),
+    );
+  };
+};

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

@@ -1,265 +0,0 @@
-"use strict";const { _i_ } = require("@internal/components-util");
-const { R_ } = require("../components/ComponentsContext");
-
-const {
-  prepare,
-  runEffects,
-  patchConditionals,
-  createScopeWithRenderer,
-  queueEffect,
-  scopeLookup,
-  getRegisteredWithScope,
-  register
-} = require(
-  // eslint-disable-next-line no-constant-condition
-  "@marko/runtime-tags/dom"
-);
-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 { _h_ } = require("../vdom/morphdom/fragment");
-const dynamicTag = require("./dynamic-tag");
-
-dynamicTag.bk_ = function tagsToVdom(
-tagsRenderer,
-renderBody,
-args)
-{
-  if (
-  tagsRenderer ?
-  tagsRenderer.bl_ === undefined :
-  !Array.isArray(renderBody) && renderBody?.bl_ === 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 =
-    R_(out).o_._W_;
-    const input = Array.isArray(_.i) ? _.i : [_.i];
-    const tagsRenderer = resolveRegistered(_.r);
-    const args = tagsRenderer.bm_;
-
-    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.bn_) {
-          signal(component.scope, true);
-        }
-      } else {
-        args && args(component.scope, input, 1);
-        existing = true;
-      }
-      args && args(component.scope, input);
-    });
-    out.bf(out._Y_, component, existing);
-    if (!existing) {
-      out.node({
-        bo_: () =>
-        component.scope.bp_ === component.scope.bq_ ?
-        component.scope.bp_ :
-        component.scope.bp_.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.bl_ :
-    renderer.bl_;
-
-    if (typeof renderer !== "string" && !isMarko6) {
-      newRenderer = rendererCache.get(renderer);
-      if (!newRenderer) {
-        const { Component } = renderer;
-        if (Component) {
-          const setCustomEvents = Component.prototype.aB_;
-          Component.prototype.aB_ = function (
-          customEvents,
-          scopeId)
-          {
-            for (const customEvent of customEvents) {
-              customEvent[1] = resolveRegistered(customEvent[1]);
-            }
-
-            setCustomEvents.call(this, customEvents, scopeId);
-          };
-        }
-        newRenderer = {
-          br_(scope) {
-            if (!hasAttrs) {
-              renderAndMorph(scope, rendererFromAnywhere, renderer, {});
-            }
-          },
-          bl_() {
-            const realFragment = document.createDocumentFragment();
-            _h_(null, null, realFragment);
-            return realFragment;
-          },
-          bs_: 1,
-          bm_(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.bp_.fragment;
-  if (!rootNode) {
-    const component = scope.marko5Component = _i_[scope.m5c];
-    rootNode = component._A_;
-    scope.bp_ = rootNode.startNode;
-    scope.bq_ = rootNode.endNode;
-  }
-  const host = scope.bp_;
-  const existingComponent = scope.marko5Component;
-  const componentsContext = R_(out);
-  const globalComponentsContext = componentsContext.o_;
-  let customEvents;
-  globalComponentsContext.ax_ = 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.af_().ay_;
-    morphdom(rootNode, targetNode, host, componentsContext);
-    const componentDefs = componentsContext.ad_(
-      getRootNode(host)
-    );
-    const component = componentDefs[0].r_;
-    component._A_ = rootNode;
-    component.N_ = input[0];
-    component.U_ = 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);
-}