marko 5.29.2 → 5.30.0

package/src/node_modules/@internal/components-registry/index-browser.js

@@ -8,6 +8,7 @@ var createFragmentNode =
 var ComponentDef = require("../../../runtime/components/ComponentDef");
 var domData = require("../../../runtime/components/dom-data");
 var componentsUtil = require("@internal/components-util");
+var loader = require("@internal/loader");
 var componentLookup = componentsUtil.___componentLookup;
 var addComponentRootToKeyedElements =
   componentsUtil.___addComponentRootToKeyedElements;
@@ -72,13 +73,23 @@ function addPendingDef(def, type, meta, host, runtimeId) {
   ]);
 }
 
-function load(typeName) {
+function load(typeName, isLegacy) {
   var target = loaded[typeName];
   if (!target) {
     target = registered[typeName];
 
     if (target) {
       target = target();
+    } else if (isLegacy) {
+      target = exports.___legacy.load(typeName);
+    } else {
+      target = loader(typeName);
+      // eslint-disable-next-line no-constant-condition
+      if ("MARKO_DEBUG") {
+        complain(
+          "Looks like you used `require:` in your browser.json to load a component.  This requires that Marko has knowledge of how lasso generates paths and will be removed in a future version.  `marko-dependencies:/path/to/template.marko` should be used instead."
+        );
+      }
     }
 
     if (!target) {
@@ -91,14 +102,14 @@ function load(typeName) {
   return target;
 }
 
-function getComponentClass(typeName) {
+function getComponentClass(typeName, isLegacy) {
   var ComponentClass = componentTypes[typeName];
 
   if (ComponentClass) {
     return ComponentClass;
   }
 
-  ComponentClass = load(typeName);
+  ComponentClass = load(typeName, isLegacy);
 
   ComponentClass = ComponentClass.Component || ComponentClass;
 
@@ -124,6 +135,7 @@ function getComponentClass(typeName) {
       .replace(/^[^a-z$_]/i, "_$&")
       .replace(/[^0-9a-z$_]+/gi, "_");
     className = className[0].toUpperCase() + className.slice(1);
+    // eslint-disable-next-line no-unused-vars
     var OldComponentClass = ComponentClass;
     ComponentClass = {
       [className]: function (id, doc) {
@@ -138,8 +150,8 @@ function getComponentClass(typeName) {
   return ComponentClass;
 }
 
-function createComponent(typeName, id) {
-  var ComponentClass = getComponentClass(typeName);
+function createComponent(typeName, id, isLegacy) {
+  var ComponentClass = getComponentClass(typeName, isLegacy);
   return new ComponentClass(id);
 }
 
@@ -290,6 +302,10 @@ function addDOMEventListeners(
 function initComponent(componentDef, host) {
   var component = componentDef.___component;
 
+  if (!component || !component.___isComponent) {
+    return; // legacy
+  }
+
   component.___reset();
   component.___host = host;
 
@@ -479,7 +495,18 @@ function initServerRendered(renderedComponents, host) {
     .map(function (componentDef) {
       var typeName = meta.___types[componentDef[1]];
 
-      return registered[typeName]
+      return (
+        registered[typeName] ||
+        document.readyState === "complete" ||
+        (
+          // loader.runtime is only going to exist for lasso apps
+          // this code is used to detect if a module was registered
+          // via a browser.json but not executed.
+          loader.runtime &&
+          loader.runtime.resolve &&
+          loader.runtime.resolve(typeName)
+        )
+      )
         ? tryHydrateComponent(componentDef, meta, host, runtimeId)
         : addPendingDef(componentDef, typeName, meta, host, runtimeId);
     })

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

@@ -5,6 +5,16 @@ function nextComponentIdProvider(out) {
   var prefix = out.global.componentIdPrefix || out.global.widgetIdPrefix || "s"; // "s" is for server (we use "b" for the browser)
   var nextId = 0;
 
+  // eslint-disable-next-line no-constant-condition
+  if ("MARKO_DEBUG") {
+    if (out.global.widgetIdPrefix) {
+      require("complain")(
+        "$global.widgetIdPrefix is deprecated. use $global.componentIdPrefix instead.",
+        { location: false }
+      );
+    }
+  }
+
   return function nextComponentId() {
     return prefix + nextId++;
   };

package/src/runtime/RenderResult.js

@@ -66,7 +66,7 @@ var proto = (RenderResult.prototype = {
   toString: function () {
     return this.___out.toString();
   },
-  document: typeof document === "object" && document
+  document: typeof document === "object" && document,
 });
 
 Object.defineProperty(proto, "html", {
@@ -78,7 +78,7 @@ Object.defineProperty(proto, "html", {
       );
     }
     return this.toString();
-  }
+  },
 });
 
 Object.defineProperty(proto, "context", {
@@ -90,7 +90,7 @@ Object.defineProperty(proto, "context", {
       );
     }
     return this.___out;
-  }
+  },
 });
 
 // Add all of the following DOM methods to Component.prototype:

package/src/runtime/components/Component.js

@@ -27,7 +27,7 @@ var slice = Array.prototype.slice;
 
 var COMPONENT_SUBSCRIBE_TO_OPTIONS;
 var NON_COMPONENT_SUBSCRIBE_TO_OPTIONS = {
-  addDestroyListener: false
+  addDestroyListener: false,
 };
 
 var emit = EventEmitter.prototype.emit;
@@ -247,19 +247,17 @@ Component.prototype = componentProto = {
   },
   getEl: function (key, index) {
     if (key) {
-      var keyedElement =
-        this.___keyedElements["@" + resolveKeyHelper(key, index)];
-
-      // eslint-disable-next-line no-constant-condition
-      if ("MARKO_DEBUG") {
-        if (
-          keyedElement &&
-          keyedElement.nodeType !== 1 /* Node.ELEMENT_NODE */
-        ) {
-          throw new Error(
-            "Using 'getEl(key)' to get a component instance is not supported, did you mean 'getComponent(key)'?"
+      var resolvedKey = resolveKeyHelper(key, index);
+      var keyedElement = this.___keyedElements["@" + resolvedKey];
+      if (keyedElement && keyedElement.nodeType === 12 /** FRAGMENT_NODE */) {
+        // eslint-disable-next-line no-constant-condition
+        if ("MARKO_DEBUG") {
+          complain(
+            "Accessing the elements of a child component using 'component.getEl' is deprecated."
           );
         }
+
+        return walkFragments(keyedElement);
       }
 
       return keyedElement;
@@ -281,15 +279,15 @@ Component.prototype = componentProto = {
   },
   getComponent: function (key, index) {
     var rootNode = this.___keyedElements["@" + resolveKeyHelper(key, index)];
-    // eslint-disable-next-line no-constant-condition
-    if ("MARKO_DEBUG") {
-      if (/\[\]$/.test(key)) {
-        throw new Error(
+    if (/\[\]$/.test(key)) {
+      // eslint-disable-next-line no-constant-condition
+      if ("MARKO_DEBUG") {
+        complain(
           "A repeated key[] was passed to getComponent. Use a non-repeating key if there is only one of these components."
         );
       }
+      rootNode = rootNode && rootNode[Object.keys(rootNode)[0]];
     }
-
     return rootNode && componentsByDOMNode.get(rootNode);
   },
   getComponents: function (key) {
@@ -636,7 +634,7 @@ Component.prototype = componentProto = {
   ___emitDestroy() {
     this.onDestroy && this.onDestroy();
     this.___emit("destroy");
-  }
+  },
 };
 
 componentProto.elId = componentProto.getElId;

package/src/runtime/components/ComponentDef.js

@@ -11,6 +11,8 @@ var EMPTY_OBJECT = {};
 
 var FLAG_WILL_RERENDER_IN_BROWSER = 1;
 var FLAG_HAS_RENDER_BODY = 2;
+var FLAG_IS_LEGACY = 4;
+var FLAG_OLD_HYDRATE_NO_CREATE = 8;
 
 /**
  * A ComponentDef is used to hold the metadata collected at runtime for
@@ -81,7 +83,7 @@ ComponentDef.prototype = {
 
   get ___type() {
     return this.___component.___type;
-  }
+  },
 };
 
 ComponentDef.prototype.nk = ComponentDef.prototype.___nextKey;
@@ -93,19 +95,31 @@ ComponentDef.___deserialize = function (o, types, global, registry) {
   var extra = o[3] || EMPTY_OBJECT;
 
   var state = extra.s;
-  var componentProps = extra.w;
+  var componentProps = extra.w || EMPTY_OBJECT;
   var flags = extra.f;
-  var component = registry.___createComponent(typeName, id);
+  var isLegacy = flags & FLAG_IS_LEGACY;
+  var renderBody = flags & FLAG_HAS_RENDER_BODY ? w10Noop : extra.r;
+
+  var component =
+    typeName /* legacy */ &&
+    registry.___createComponent(typeName, id, isLegacy);
 
   // Prevent newly created component from being queued for update since we area
   // just building it from the server info
   component.___updateQueued = true;
 
-  if (flags & FLAG_HAS_RENDER_BODY) {
-    (input || (input = {})).renderBody = w10Noop;
+  if (isLegacy) {
+    component.widgetConfig = componentProps;
+    component.___widgetBody = renderBody;
+  } else if (renderBody) {
+    (input || (input = {})).renderBody = renderBody;
   }
 
-  if (flags & FLAG_WILL_RERENDER_IN_BROWSER) {
+  if (
+    !isLegacy &&
+    flags & FLAG_WILL_RERENDER_IN_BROWSER &&
+    !(flags & FLAG_OLD_HYDRATE_NO_CREATE)
+  ) {
     if (component.onCreate) {
       component.onCreate(input, { global: global });
     }
@@ -125,7 +139,7 @@ ComponentDef.___deserialize = function (o, types, global, registry) {
       component.state = state;
     }
 
-    if (componentProps) {
+    if (!isLegacy && componentProps) {
       extend(component, componentProps);
     }
   }
@@ -148,7 +162,7 @@ ComponentDef.___deserialize = function (o, types, global, registry) {
     id: id,
     ___component: component,
     ___domEvents: extra.d,
-    ___flags: extra.f || 0
+    ___flags: extra.f || 0,
   };
 };
 

package/src/runtime/components/ComponentsContext.js

@@ -47,7 +47,7 @@ ComponentsContext.prototype = {
     this.___out.global.___components = undefined;
 
     return componentDefs;
-  }
+  },
 };
 
 function getComponentsContext(out) {

package/src/runtime/components/State.js

@@ -9,7 +9,7 @@ function ensure(state, propertyName) {
       },
       set: function (value) {
         this.___set(propertyName, value, false /* ensure:false */);
-      }
+      },
     });
   }
 }
@@ -99,7 +99,7 @@ State.prototype = {
   },
   toJSON: function () {
     return this.___raw;
-  }
+  },
 };
 
 module.exports = State;

package/src/runtime/components/attach-detach.js

@@ -48,7 +48,7 @@ function handleNodeDetach(node) {
           if (parentNode) {
             parentNode.removeChild(node);
           }
-        }
+        },
       });
 
       return allowDetach;

package/src/runtime/components/dom-data.js

@@ -4,5 +4,5 @@ module.exports = {
   ___componentByDOMNode: new WeakMap(),
   ___detachedByDOMNode: new WeakMap(),
   ___keyByDOMNode: new WeakMap(),
-  ___ssrKeyedElementsByComponentId: {}
+  ___ssrKeyedElementsByComponentId: {},
 };

package/src/runtime/components/legacy/browser.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": [
+    {
+      "type": "require",
+      "path": "./index",
+      "run": true
+    }
+  ]
+}

package/src/runtime/components/legacy/defineComponent-legacy.js

@@ -0,0 +1,32 @@
+/**
+ * Define a new UI component that includes component and renderer.
+ *
+ * @param  {Object} def The definition of the UI component (component methods, component constructor, rendering methods, etc.)
+ * @return {Component} The resulting Component with renderer
+ */
+var defineRenderer;
+var defineWidget;
+
+module.exports = function defineComponent(def) {
+  // eslint-disable-next-line no-constant-condition
+  if ("MARKO_DEBUG") {
+    require("complain")("defineComponent is deprecated");
+  }
+
+  if (def.___isComponent) {
+    return def;
+  }
+
+  var renderer;
+
+  if (def.template || def.renderer) {
+    renderer = defineRenderer(def);
+  } else {
+    throw new Error('Expected "template" or "renderer"');
+  }
+
+  return defineWidget(def, renderer);
+};
+
+defineRenderer = require("./defineRenderer-legacy");
+defineWidget = require("./defineWidget-legacy");

package/src/runtime/components/legacy/defineRenderer-legacy.js

@@ -0,0 +1,171 @@
+var complain = "MARKO_DEBUG" && require("complain");
+var makeRenderable = require("../../renderable");
+var getComponentsContext =
+  require("../ComponentsContext").___getComponentsContext;
+var componentLookup = require("@internal/components-util").___componentLookup;
+var modernRenderer = require("../renderer");
+var loader = require("@internal/loader");
+var resolveComponentKey = modernRenderer.___resolveComponentKey;
+
+module.exports = function defineRenderer(renderingLogic) {
+  var renderer = renderingLogic.renderer;
+
+  // eslint-disable-next-line no-constant-condition
+  if ("MARKO_DEBUG") {
+    require("complain")("defineRenderer is deprecated");
+  }
+
+  if (renderer && renderer.___isRenderer) {
+    return renderer;
+  }
+
+  var template = renderingLogic.template;
+
+  if (typeof template === "string") {
+    template = loader(template);
+  }
+
+  if (!renderer) {
+    var getInitialProps;
+    var getTemplateData;
+    var getInitialState;
+    var getWidgetConfig;
+    var getInitialBody;
+
+    if (renderingLogic) {
+      getInitialProps = renderingLogic.getInitialProps;
+      getTemplateData = renderingLogic.getTemplateData;
+      getInitialState = renderingLogic.getInitialState;
+      getWidgetConfig = renderingLogic.getWidgetConfig;
+      getInitialBody = renderingLogic.getInitialBody;
+    }
+
+    // Create a renderer function that takes care of translating
+    // the input properties to a view state. Also, this renderer
+    // takes care of re-using existing components.
+    renderer = function renderer(input, out) {
+      var componentsContext = getComponentsContext(out);
+      var globalComponentsContext = componentsContext.___globalContext;
+      var component = globalComponentsContext.___rerenderComponent;
+      var isReceivingNewInput = !component || component.___isReceivingNewInput;
+      var parentComponentDef;
+
+      if (component) {
+        component.___isReceivingNewInput = false;
+      }
+
+      // Render the template associated with the component using the final template
+      // data that we constructed
+      var newProps = input;
+      var widgetConfig;
+      var widgetState;
+      var widgetBody;
+      var id;
+
+      if (!component && componentLookup) {
+        var key = out.___assignedKey;
+
+        if (
+          (parentComponentDef = componentsContext.___componentDef) &&
+          key != null
+        ) {
+          id = resolveComponentKey(key.toString(), parentComponentDef);
+        } else if (parentComponentDef) {
+          id = parentComponentDef.___nextComponentId();
+        } else {
+          id = globalComponentsContext.___nextComponentId();
+        }
+
+        component = componentLookup[id];
+      }
+
+      if (isReceivingNewInput) {
+        // If we do not have state then we need to go through the process
+        // of converting the input to a widget state, or simply normalizing
+        // the input using getInitialProps
+
+        if (getInitialProps) {
+          // This optional method is used to normalize input state
+          newProps = getInitialProps(newProps, out) || {};
+        }
+
+        if (getInitialState) {
+          // This optional method is used to derive the widget state
+          // from the input properties
+          widgetState = getInitialState(newProps, out);
+        }
+
+        if (getInitialBody) {
+          // If we have widget a widget body then pass it to the template
+          // so that it is available to the widget tag and can be inserted
+          // at the w-body marker
+          widgetBody = getInitialBody(newProps, out);
+        } else {
+          // Default to using the nested content as the widget body
+          // getInitialBody was not implemented
+          widgetBody = newProps.renderBody;
+        }
+      } else if (component) {
+        newProps = newProps || component.___widgetProps;
+        widgetBody = component.___widgetBody;
+        widgetState = component.___rawState;
+        widgetConfig = component.widgetConfig;
+      }
+
+      // Use getTemplateData(state, props, out) to get the template
+      // data. If that method is not provided then just use the
+      // the state (if provided) or the input data.
+      var templateData = clone(
+        getTemplateData
+          ? getTemplateData(widgetState, newProps, out)
+          : widgetState || newProps
+      );
+
+      if (isReceivingNewInput && getWidgetConfig) {
+        // If getWidgetConfig() was implemented then use that to
+        // get the widget config. The widget config will be passed
+        // to the widget constructor. If rendered on the server the
+        // widget config will be serialized.
+        widgetConfig = getWidgetConfig(newProps, out);
+      }
+      // eslint-disable-next-line no-constant-condition
+      if ("MARKO_DEBUG") {
+        if (widgetState && "widgetState" in templateData) {
+          complain("Passing widgetState as input is deprecated.");
+        }
+
+        if (widgetConfig && "widgetConfig" in templateData) {
+          complain("Passing widgetConfig as input is deprecated.");
+        }
+      }
+
+      templateData.widgetProps = newProps;
+      widgetBody && (templateData.renderBody = widgetBody);
+      widgetState && (templateData.widgetState = widgetState);
+      widgetConfig && (templateData.widgetConfig = widgetConfig);
+
+      template._(templateData, out, id, renderingLogic);
+    };
+  }
+
+  renderer.___isRenderer = true;
+  renderer.createOut = template ? template.createOut : renderingLogic.createOut;
+  renderer.template = template;
+
+  makeRenderable(renderer, renderer);
+  renderer.render = renderer.render.bind(this);
+
+  return renderer;
+};
+
+function clone(src) {
+  var result = {};
+
+  if (src) {
+    for (var key in src) {
+      result[key] = src[key];
+    }
+  }
+
+  return result;
+}

package/src/runtime/components/legacy/defineWidget-legacy.js

@@ -0,0 +1 @@
+module.exports = require("@internal/components-define-widget-legacy");

package/src/runtime/components/legacy/dependencies/html.js

@@ -0,0 +1,3 @@
+var patch = require("./").patch;
+var Template = require("../../../html").Template;
+patch(Template);