marko 5.29.2 → 5.30.0

package/src/node_modules/@internal/components-define-widget-legacy/index-browser.js

@@ -0,0 +1,331 @@
+"use strict";
+/* jshint newcap:false */
+
+var BaseState;
+var BaseComponent;
+var inherit;
+var loader = require("@internal/loader");
+var registry = require("@internal/components-registry");
+var jQuery = require("../../../runtime/components/legacy/jquery");
+var ready = require("../../../runtime/components/legacy/ready");
+
+var complain = "MARKO_DEBUG" && require("complain");
+var stateToJSONDef = {
+  enumerable: false,
+  value: function returnSelf() {
+    return this;
+  }
+};
+function noop() { }
+
+module.exports = function defineWidget(def, renderer) {
+  def = def.Widget || def;
+
+  if (def.___isComponent) {
+    return def;
+  }
+
+  var ComponentClass = function () { };
+  var proto;
+  var legacyInit;
+
+  if (typeof def === "function") {
+    proto = def.prototype;
+    legacyInit = def;
+  } else if (typeof def === "object") {
+    proto = def;
+    legacyInit = def.init;
+  } else {
+    throw TypeError();
+  }
+
+  ComponentClass.prototype = proto;
+
+  // We don't use the constructor provided by the user
+  // since we don't invoke their constructor until
+  // we have had a chance to do our own initialization.
+  // Instead, we store their constructor in the "initComponent"
+  // property and that method gets called later inside
+  // init-components-browser.js
+  function Component(id, doc) {
+    BaseComponent.call(this, id, doc);
+  }
+
+  if (!proto.___isComponent) {
+    // Inherit from Component if they didn't already
+    ComponentClass.prototype = Object.create(BaseComponent.prototype);
+    for (var propName in proto) {
+      if (proto.hasOwnProperty(propName)) {
+        ComponentClass.prototype[propName] = proto[propName];
+      }
+    }
+  }
+
+  // The same prototype will be used by our constructor after
+  // we he have set up the prototype chain using the inherit function
+  proto = Component.prototype = ComponentClass.prototype;
+  proto.___isLegacy = true;
+
+  proto.constructor = def.constructor = Component;
+
+  Object.defineProperty(proto, "state", {
+    get: function () {
+      var raw = this.___state && this.___state.___raw;
+
+      if (raw && !raw.toJSON) {
+        Object.defineProperty(this.___state.___raw, "toJSON", stateToJSONDef);
+      }
+
+      return raw;
+    },
+    set: function (newState) {
+      newState = newState || {};
+      // eslint-disable-next-line no-constant-condition
+      if ("MARKO_DEBUG") {
+        if (
+          Object.keys(newState).sort().join("") !==
+          Object.keys((this.___state && this.___state.___raw) || {})
+            .sort()
+            .join("")
+        )
+          complain(
+            "'widget.state = newState' has changed from merging the newState to replacing the old state."
+          );
+      }
+
+      this.setState(newState);
+    }
+  });
+
+  Object.defineProperty(proto, "__document", {
+    get: function () {
+      // eslint-disable-next-line no-constant-condition
+      if ("MARKO_DEBUG") {
+        complain("__document is deprecated");
+      }
+      return this.___host;
+    }
+  });
+
+  Object.defineProperty(proto, "el", {
+    get: function () {
+      // eslint-disable-next-line no-constant-condition
+      if ("MARKO_DEBUG") {
+        if (
+          this.___currentLegacyBindEl !==
+          (this.___rootNode && this.___rootNode.firstChild)
+        ) {
+          complain(
+            "this.el no longer returns the `w-bind` element and instead returns the first node in the template. Assign a key to the w-bind element and use getEl(key) instead."
+          );
+        }
+      }
+
+      return this.___currentLegacyBindEl;
+    }
+  });
+
+  // get legacy methods
+
+  proto.___legacyOnRender = proto.onRender;
+  Object.defineProperty(proto, "onRender", {
+    get: noop,
+    set: function (v) {
+      proto.___legacyOnRender = v;
+    }
+  });
+
+  proto.___legacyOnUpdate = proto.onUpdate;
+  Object.defineProperty(proto, "onUpdate", {
+    get: function () {
+      return modernMountOrUpdate;
+    },
+    set: function (v) {
+      proto.___legacyOnUpdate = v;
+    }
+  });
+
+  proto.___legacyOnDestroy = proto.onDestroy;
+  Object.defineProperty(proto, "onDestroy", {
+    get: function () {
+      return modernOnDestory;
+    },
+    set: function (v) {
+      proto.___legacyOnDestroy = v;
+    }
+  });
+
+  proto.getWidget = proto.getComponent;
+  proto.getWidgets = proto.getComponents;
+  proto.onMount = modernMountOrUpdate;
+
+  if (legacyInit) {
+    proto.___legacyInit = legacyInit;
+  }
+
+  // convert legacy to modern
+  proto.___modernUpdate = proto.update;
+  proto.update = function () {
+    if (this.___destroyed) {
+      // eslint-disable-next-line no-constant-condition
+      if ("MARKO_DEBUG") {
+        complain(
+          "widget was updated after it was destroyed, if this widget is migrated to a modern component this will become a noop.",
+          {
+            location: this.___type
+          }
+        );
+      }
+
+      this.destroy = modernOnDestory;
+      this.___destroyed = false;
+    }
+    this.___legacyExplicitUpdate = true;
+    if (this.___currentLegacyBindEl) {
+      this.onBeforeUpdate && this.onBeforeUpdate();
+    }
+
+    this.___modernUpdate();
+    this.___legacyExplicitUpdate = false;
+  };
+
+  function modernMountOrUpdate() {
+    var self = this;
+    var el = this.___keyedElements["@_wbind"];
+    var prevEl = this.___currentLegacyBindEl;
+
+    if (prevEl !== el) {
+      this.___currentLegacyBindEl = el;
+
+      if (prevEl) {
+        this.onBeforeDestroy && this.onBeforeDestroy();
+        this.___legacyOnDestroy && this.___legacyOnDestroy();
+        this.___legacyRender = undefined;
+        this.removeAllListeners();
+      }
+
+      if (el) {
+        this.___legacyInit && this.___legacyInit(this.widgetConfig || {});
+        this.___legacyOnRender && this.___legacyOnRender({ firstRender: true });
+        this.___legacyRender = legacyRender;
+
+        // eslint-disable-next-line no-constant-condition
+        if ("MARKO_DEBUG") {
+          Object.defineProperty(el, "__widget", {
+            configurable: true,
+            get: function () {
+              complain("__widget is deprecated");
+              return self;
+            }
+          });
+        } else {
+          el.__widget = this;
+        }
+      }
+    } else if (el) {
+      if (prevEl) {
+        this.___legacyOnUpdate && this.___legacyOnUpdate();
+      }
+
+      if (this.___didUpdate) {
+        this.___legacyOnRender &&
+          this.___legacyOnRender({ firstRender: false });
+      }
+    }
+
+    this.___widgetProps = this.___input;
+    this.___input = null;
+    this.___didUpdate = false;
+  }
+
+  function legacyRender() {
+    if (!this.___legacyExplicitUpdate) {
+      this.onBeforeUpdate && this.onBeforeUpdate();
+    }
+
+    this.___didUpdate = true;
+  }
+
+  function modernOnDestory() {
+    if (this.___currentLegacyBindEl) {
+      this.onBeforeDestroy && this.onBeforeDestroy();
+      this.___legacyOnDestroy && this.___legacyOnDestroy();
+      this.___currentLegacyBindEl = null;
+    }
+  }
+
+  // Set a flag on the constructor function to make it clear this is
+  // a component so that we can short-circuit this work later
+  Component.___isComponent = true;
+
+  function State() {
+    BaseState.apply(this, arguments);
+  }
+  inherit(State, BaseState);
+  proto.___State = State;
+
+  jQuery.patchComponent(
+    window.$,
+    proto,
+    true /* don't throw error until used if `$` is missing*/
+  );
+
+  ready.patchComponent(proto);
+
+  if (!renderer) {
+    renderer = ComponentClass.renderer || ComponentClass.prototype.renderer;
+    if (renderer) {
+      // Legacy support
+      var createOut = renderer.createOut;
+      if (typeof renderer !== "function") {
+        var rendererObject = renderer;
+        renderer = function (input, out) {
+          var rendererFunc = rendererObject.renderer || rendererObject.render;
+          rendererFunc(input, out);
+        };
+        renderer.createOut = createOut;
+      }
+
+      renderer.render = function (input) {
+        var out = createOut();
+        renderer(input, out);
+        return out.end();
+      };
+    }
+  }
+
+  if (renderer) {
+    // Add the rendering related methods as statics on the
+    // new component constructor function
+    Component.renderer = proto.___renderer = renderer;
+    Component.render = renderer.render;
+    Component.renderSync = renderer.renderSync;
+  }
+
+  // eslint-disable-next-line no-constant-condition
+  if ("MARKO_DEBUG") {
+    Object.defineProperty(Component, "_isWidget", {
+      get: function () {
+        complain("_isWidget is deprecated");
+        return true;
+      }
+    });
+  } else {
+    Component._isWidget = true;
+  }
+
+  var template = def.template;
+  if (template) {
+    if (typeof template === "string") {
+      template = loader(template);
+    }
+
+    registry.r(template.___typeName, function () { return Component });
+  }
+
+  return Component;
+};
+
+BaseState = require("../../../runtime/components/State");
+BaseComponent = require("../../../runtime/components/Component");
+inherit = require("raptor-util/inherit");

package/src/node_modules/@internal/components-define-widget-legacy/index.js

@@ -0,0 +1,18 @@
+module.exports = function defineWidget(def, renderer) {
+  if (def.___isComponent) {
+    return def;
+  }
+
+  if (renderer) {
+    return {
+      ___isComponent: true,
+      _isWidget: true,
+      renderer: renderer,
+      render: renderer.render,
+      renderSync: renderer.renderSync,
+      template: renderer.template
+    };
+  } else {
+    return { ___isComponent: true, _isWidget: true };
+  }
+};

package/src/node_modules/@internal/components-define-widget-legacy/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "./index.js",
+  "browser": "./index-browser.js",
+  "exports": {
+    ".": {
+      "worker": "./index.js",
+      "browser": "./index-browser.js",
+      "default": "./index.js"
+    }
+  }
+}

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

@@ -7,6 +7,8 @@ var DEFAULT_RUNTIME_ID = "M";
 
 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;
 
 function safeJSONReplacer(match) {
   if (match === "</") {
@@ -65,66 +67,92 @@ function addComponentsFromContext(componentsContext, componentsToHydrate) {
     var id = componentDef.id;
     var component = componentDef.___component;
     var flags = componentDef.___flags;
+    var isLegacy = componentDef.___isLegacy;
+
+    var state = component.state;
     var input = component.input || 0;
     var typeName = component.typeName;
     var customEvents = component.___customEvents;
     var scope = component.___scope;
     var bubblingDomEvents = component.___bubblingDomEvents;
 
-    var state;
+    var needsState;
     var serializedProps;
-    var undefinedPropNames;
+    var renderBody;
 
-    if (flags & FLAG_WILL_RERENDER_IN_BROWSER) {
-      if (typeof input.renderBody === "function") {
-        flags |= FLAG_HAS_RENDER_BODY;
-        input.renderBody = undefined;
+    if (isLegacy) {
+      flags |= FLAG_IS_LEGACY;
+      renderBody = component.___widgetBody;
+
+      if (component.widgetConfig && isNotEmpty(component.widgetConfig)) {
+        serializedProps = component.widgetConfig;
       }
+
+      needsState = true;
     } else {
-      if (component.state) {
-        state = component.state;
-        // Update state properties with an `undefined` value to have a `null`
-        // value so that the property name will be serialized down to the browser.
-        // This ensures that we add the proper getter/setter for the state property.
-        const stateKeys = Object.keys(state);
-        for (let i = stateKeys.length; i--; ) {
-          const stateKey = stateKeys[i];
-
-          if (state[stateKey] === undefined) {
-            if (undefinedPropNames) {
-              undefinedPropNames.push(stateKey);
-            } else {
-              undefinedPropNames = [stateKey];
-            }
-          }
+      if (input && input.renderBody) {
+        renderBody = input.renderBody;
+        input.renderBody = undefined;
+      }
+
+      if (
+        !(flags & FLAG_WILL_RERENDER_IN_BROWSER) ||
+        flags & FLAG_OLD_HYDRATE_NO_CREATE
+      ) {
+        component.___state = undefined; // We don't use `delete` to avoid V8 deoptimization
+        component.___input = undefined; // We don't use `delete` to avoid V8 deoptimization
+        component.typeName = undefined;
+        component.id = undefined;
+        component.___customEvents = undefined;
+        component.___scope = undefined;
+        component.___bubblingDomEvents = undefined;
+        component.___bubblingDomEventsExtraArgsCount = undefined;
+        component.___updatedInput = undefined;
+        component.___updateQueued = undefined;
+
+        needsState = true;
+
+        if (isNotEmpty(component)) {
+          serializedProps = component;
         }
       }
+    }
 
-      component.___state = undefined; // We don't use `delete` to avoid V8 deoptimization
-      component.___input = undefined; // We don't use `delete` to avoid V8 deoptimization
-      component.typeName = undefined;
-      component.id = undefined;
-      component.___customEvents = undefined;
-      component.___scope = undefined;
-      component.___bubblingDomEvents = undefined;
-      component.___bubblingDomEventsExtraArgsCount = undefined;
-      component.___updatedInput = undefined;
-      component.___updateQueued = undefined;
-
-      if (isNotEmpty(component)) {
-        serializedProps = component;
+    var undefinedPropNames = undefined;
+
+    if (needsState && state) {
+      // Update state properties with an `undefined` value to have a `null`
+      // value so that the property name will be serialized down to the browser.
+      // This ensures that we add the proper getter/setter for the state property.
+      const stateKeys = Object.keys(state);
+      for (let i = stateKeys.length; i--; ) {
+        const stateKey = stateKeys[i];
+
+        if (state[stateKey] === undefined) {
+          if (undefinedPropNames) {
+            undefinedPropNames.push(stateKey);
+          } else {
+            undefinedPropNames = [stateKey];
+          }
+        }
       }
     }
 
+    if (typeof renderBody === "function") {
+      flags |= FLAG_HAS_RENDER_BODY;
+      renderBody = undefined;
+    }
+
     var extra = {
       b: bubblingDomEvents,
       d: componentDef.___domEvents,
       e: customEvents,
       f: flags || undefined,
       p: customEvents && scope, // Only serialize scope if we need to attach custom events
-      s: state,
+      s: needsState && state,
       u: undefinedPropNames,
-      w: serializedProps
+      w: serializedProps,
+      r: renderBody
     };
 
     var parts = [id, typeName];

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

@@ -0,0 +1,74 @@
+var Component = require("../../../runtime/components/Component");
+var loader = require("@internal/loader");
+var getComponentForEl =
+  require("@internal/components-util").___getComponentForEl;
+
+var complain = "MARKO_DEBUG" && require("complain");
+
+// expose legacy
+require("@internal/components-registry").___legacy = exports;
+exports.load = function (typeName) {
+  return exports.defineWidget(loader(typeName));
+};
+
+// legacy api
+exports.defineComponent = require("../../../runtime/components/legacy/defineComponent-legacy");
+exports.defineWidget = require("@internal/components-define-widget-legacy");
+exports.defineRenderer = require("../../../runtime/components/legacy/defineRenderer-legacy");
+exports.makeRenderable = exports.renderable = require("../../../runtime/renderable");
+
+// browser only
+var Widget = (exports.Widget = Component);
+exports.getWidgetForEl = exports.get = function (elOrId) {
+  var el = elOrId;
+
+  if (typeof elOrId === "string") {
+    el = document.getElementById(elOrId);
+  }
+
+  if (el && el.__widget) {
+    return el.__widget;
+  }
+
+  return getComponentForEl(el);
+};
+exports.initWidgets =
+  require("@internal/components-registry").___initServerRendered;
+
+// monkey patch Widget
+if (Widget) {
+  var WidgetProto = Widget.prototype;
+  WidgetProto.setProps = function (newInput) {
+    this.___isReceivingNewInput = true;
+    this.___setInput(newInput);
+  };
+  WidgetProto.rerender = function (newInput) {
+    if (newInput) {
+      this.setProps(newInput);
+    }
+
+    this.forceUpdate();
+    this.update();
+  };
+}
+
+var RenderResult = require("../../../runtime/RenderResult");
+
+RenderResult.prototype.getWidget = function () {
+  // eslint-disable-next-line no-constant-condition
+  if ("MARKO_DEBUG") {
+    complain("getWidget is deprecated. use getComponent instead.");
+  }
+  return this.getWidgets()[0];
+};
+RenderResult.prototype.getWidgets = function () {
+  // eslint-disable-next-line no-constant-condition
+  if ("MARKO_DEBUG") {
+    complain("getWidgets is deprecated. use getComponents instead.");
+  }
+  return RenderResult.prototype.getComponents
+    .apply(this, arguments)
+    .filter(function (component) {
+      return component.___isLegacy;
+    });
+};

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

@@ -0,0 +1,15 @@
+var modernMarko = require("@internal/components-entry");
+
+// legacy api
+exports.defineComponent = require("../../../runtime/components/legacy/defineComponent-legacy");
+exports.defineWidget = require("@internal/components-define-widget-legacy");
+exports.defineRenderer = require("../../../runtime/components/legacy/defineRenderer-legacy");
+exports.makeRenderable = exports.renderable = require("../../../runtime/renderable");
+
+// server only
+exports.writeInitWidgetsCode = modernMarko.writeInitComponentsCode;
+exports.getRenderedWidgets = exports.getRenderedWidgetIds =
+  modernMarko.getRenderedComponents;
+exports.getInitWidgetsCode = function (out) {
+  return modernMarko.___getInitComponentsCode(out);
+};

package/src/node_modules/@internal/components-entry-legacy/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "./index.js",
+  "browser": "./index-browser.js",
+  "exports": {
+    ".": {
+      "worker": "./index.js",
+      "browser": "./index-browser.js",
+      "default": "./index.js"
+    }
+  }
+}