Misc improvements

.changeset/hip-kings-tickle.md

@@ -0,0 +1,6 @@
+---
+"@marko/translator-default": minor
+"marko": minor
+---
+
+Add compiler option to disable initializing components when outputting hydrate code.

.changeset/rude-goats-sing.md

@@ -0,0 +1,6 @@
+---
+"@marko/translator-default": patch
+"marko": patch
+---
+
+Allow skipping output of virtual dependencies by returning a falsey value from the `resolveVirtualDependency` option.

.changeset/strong-mugs-bow.md

@@ -0,0 +1,6 @@
+---
+"@marko/translator-default": patch
+"marko": patch
+---
+
+Fix issue where data (legacy alias of input) was overwritten by assignment but still being migrated.

.changeset/tiny-pandas-play.md

@@ -0,0 +1,5 @@
+---
+"@marko/compiler": minor
+---
+
+Support registering a taglib in the compiler by just passing in a module id.

packages/compiler/config.d.ts

@@ -22,6 +22,7 @@ declare const Config: {
       ) => string)
     | null;
   hydrateIncludeImports?: RegExp | ((request: string) => boolean);
+  hydrateInit?: boolean;
   optimize?: boolean;
   cache?: Map<unknown, unknown>;
   hot?: boolean;

packages/compiler/index.d.ts

@@ -68,6 +68,7 @@ export function getRuntimeEntryFiles(
 export namespace taglib {
   export function excludeDir(dirname: string): void;
   export function excludePackage(packageName: string): void;
+  export function register(id: string): void;
   export function register(id: string, props: { [x: string]: unknown }): void;
   export function buildLookup(
     dirname: string,

packages/compiler/src/config.js

@@ -136,6 +136,12 @@ const config = {
   hydrateIncludeImports:
     /\.(css|less|s[ac]ss|styl|png|jpe?g|gif|svg|ico|webp|avif|mp4|webm|ogg|mp3|wav|flac|aac|woff2?|eot|ttf|otf)$/,
 
+  /**
+   * When compiling in hydrate mode, this option will cause the compiler to
+   * call the `marko/components.init` function to begin hydrating components.
+   */
+  hydrateInit: true,
+
   /**
    * Set to true in order to bring in the hot module replacement runtime.
    */

packages/compiler/src/taglib/index.js

@@ -1,7 +1,9 @@
+import path from "path";
 import loader from "./loader";
 import finder from "./finder";
 import Lookup from "./lookup";
 import taglibConfig from "./config";
+import markoModules from "../../modules";
 import tryLoadTranslator from "../util/try-load-translator";
 
 export const excludeDir = finder.excludeDir;
@@ -77,6 +79,22 @@
 }
 
 export function register(id, props) {
+  if (typeof props === "undefined") {
+    switch (id[0]) {
+      case ".":
+      case "/":
+      case "\\":
+        break;
+      default:
+        if (!id.endsWith(".json")) {
+          id = path.join(id, "marko.json");
+        }
+        break;
+    }
+    id = markoModules.require.resolve(id);
+    props = markoModules.require(id);
+  }
+
   registeredTaglibs.push(loadTaglib(id, props));
 }
 

packages/marko/docs/compiler.md

@@ -296,6 +296,12 @@ import "./baz.wasm";
 
 For `hydrate` output, with the default `hydrateIncludeImports`, would only cause `./foo.css` to be loaded in the browser.
 
+#### `hydrateInit`
+
+This option is only used for `output: "hydrate"`. It defaults to `true` and causes the hydrate output to include code which tells the Marko runtime to begin hydrating any registered components.
+
+Setting to false will disable that `init` call and allow you to generate code which _just_ imports any hydrate dependencies for a template.
+
 #### `cache`
 
 Type: typeof [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) (specifically, `.get()` is required)<br>

packages/translator-default/src/taglib/migrate/all-templates.js

@@ -1,10 +1,37 @@
 import { types as t } from "@marko/compiler";
 import withPreviousLocation from "../../util/with-previous-location";
 import { diagnosticDeprecate } from "@marko/babel-utils";
+const kHadAssignment = Symbol();
 
 export default {
-  ReferencedIdentifier(path) {
-    if (path.node.name === "data" && !path.scope.hasBinding("data")) {
+  AssignmentExpression(path, state) {
+    if (
+      !state[kHadAssignment] &&
+      path.node.left.type === "Identifier" &&
+      path.node.left.name === "data"
+    ) {
+      state[kHadAssignment] = true;
+
+      let root = path.parentPath;
+      while (root.parentPath.type !== "Program") {
+        root = root.parentPath;
+      }
+
+      root.insertBefore(
+        t.markoScriptlet([
+          t.variableDeclaration("var", [
+            t.variableDeclarator(t.identifier("data")),
+          ]),
+        ])
+      );
+    }
+  },
+  ReferencedIdentifier(path, state) {
+    if (
+      !state[kHadAssignment] &&
+      path.node.name === "data" &&
+      !path.scope.hasBinding("data")
+    ) {
       diagnosticDeprecate(path, {
         label: "The 'data' variable is deprecated. Use 'input' instead.",
         fix() {

packages/translator-default/src/util/add-dependencies.js

@@ -9,7 +9,7 @@
 } from "@marko/babel-utils";
 
 export default (entryFile, isHydrate) => {
-  const { resolveVirtualDependency, hydrateIncludeImports } =
+  const { resolveVirtualDependency, hydrateIncludeImports, hydrateInit } =
     entryFile.markoOpts;
   const hydratedFiles = new Set();
   const program = entryFile.path;
@@ -39,19 +39,26 @@
         t.importSpecifier(t.identifier("register"), t.identifier("register"))
       );
     }
-    markoComponentsImport.specifiers.push(t.importSpecifier(initId, initId));
+
+    if (hydrateInit) {
+      markoComponentsImport.specifiers.push(t.importSpecifier(initId, initId));
+    }
+
     program.unshiftContainer("body", markoComponentsImport);
-    program.pushContainer(
-      "body",
-      t.expressionStatement(
-        t.callExpression(
-          initId,
-          entryFile.markoOpts.runtimeId
-            ? [t.stringLiteral(entryFile.markoOpts.runtimeId)]
-            : []
+
+    if (hydrateInit) {
+      program.pushContainer(
+        "body",
+        t.expressionStatement(
+          t.callExpression(
+            initId,
+            entryFile.markoOpts.runtimeId
+              ? [t.stringLiteral(entryFile.markoOpts.runtimeId)]
+              : []
+          )
         )
-      )
-    );
+      );
+    }
   }
 
   function addHydrateDeps(file) {
@@ -159,6 +166,10 @@
           code,
           virtualPath,
         });
+
+        if (!dep) {
+          continue;
+        }
       } else if (dep.startsWith("package:")) {
         continue;
       }

packages/translator-default/test/fixtures/data-reassigned/snapshots/cjs-expected.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _index = require("marko/src/runtime/html/index.js");
+var _escapeXml = require("marko/src/runtime/html/helpers/escape-xml.js");
+var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const _marko_componentType = "packages/translator-default/test/fixtures/data-reassigned/template.marko",
+  _marko_template = (0, _index.t)(_marko_componentType);
+var _default = _marko_template;
+exports.default = _default;
+const _marko_component = {};
+_marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {
+  var data;
+  data = {
+    name: "foo"
+  };
+  out.w("<div>");
+  out.w("Hello ");
+  out.w((0, _escapeXml.x)(data.name));
+  out.w("<span>");
+  out.w("Hello ");
+  out.w((0, _escapeXml.x)(data));
+  out.w("</span>");
+  out.w("</div>");
+}, {
+  t: _marko_componentType,
+  i: true,
+  d: true
+}, _marko_component);

packages/translator-default/test/fixtures/data-reassigned/snapshots/generated-expected.marko

@@ -0,0 +1,10 @@
+$ var data;
+$ data = {
+  name: "foo"
+};
+<div>
+  Hello ${data.name}
+  <span>
+    Hello ${data}
+  </span>
+</div>

packages/translator-default/test/fixtures/data-reassigned/snapshots/html-expected.js

@@ -0,0 +1,25 @@
+import { t as _t } from "marko/src/runtime/html/index.js";
+const _marko_componentType = "packages/translator-default/test/fixtures/data-reassigned/template.marko",
+  _marko_template = _t(_marko_componentType);
+export default _marko_template;
+import { x as _marko_escapeXml } from "marko/src/runtime/html/helpers/escape-xml.js";
+import _marko_renderer from "marko/src/runtime/components/renderer.js";
+const _marko_component = {};
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
+  var data;
+  data = {
+    name: "foo"
+  };
+  out.w("<div>");
+  out.w("Hello ");
+  out.w(_marko_escapeXml(data.name));
+  out.w("<span>");
+  out.w("Hello ");
+  out.w(_marko_escapeXml(data));
+  out.w("</span>");
+  out.w("</div>");
+}, {
+  t: _marko_componentType,
+  i: true,
+  d: true
+}, _marko_component);

packages/translator-default/test/fixtures/data-reassigned/snapshots/htmlProduction-expected.js

@@ -0,0 +1,17 @@
+import { t as _t } from "marko/dist/runtime/html/index.js";
+const _marko_componentType = "aUDwECFR",
+  _marko_template = _t(_marko_componentType);
+export default _marko_template;
+import { x as _marko_escapeXml } from "marko/dist/runtime/html/helpers/escape-xml.js";
+import _marko_renderer from "marko/dist/runtime/components/renderer.js";
+const _marko_component = {};
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
+  var data;
+  data = {
+    name: "foo"
+  };
+  out.w(`<div>Hello ${_marko_escapeXml(data.name)}<span>Hello ${_marko_escapeXml(data)}</span></div>`);
+}, {
+  t: _marko_componentType,
+  i: true
+}, _marko_component);

packages/translator-default/test/fixtures/data-reassigned/snapshots/vdom-expected.js

@@ -0,0 +1,28 @@
+import { t as _t } from "marko/src/runtime/vdom/index.js";
+const _marko_componentType = "packages/translator-default/test/fixtures/data-reassigned/template.marko",
+  _marko_template = _t(_marko_componentType);
+export default _marko_template;
+import _marko_renderer from "marko/src/runtime/components/renderer.js";
+import { r as _marko_registerComponent } from "marko/src/runtime/components/registry";
+_marko_registerComponent(_marko_componentType, () => _marko_template);
+const _marko_component = {};
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
+  var data;
+  data = {
+    name: "foo"
+  };
+  out.be("div", null, "0", _component, null, 0);
+  out.t("Hello ", _component);
+  out.t(data.name, _component);
+  out.be("span", null, "1", _component, null, 0);
+  out.t("Hello ", _component);
+  out.t(data, _component);
+  out.ee();
+  out.ee();
+}, {
+  t: _marko_componentType,
+  i: true,
+  d: true
+}, _marko_component);
+import _marko_defineComponent from "marko/src/runtime/components/defineComponent.js";
+_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);

packages/translator-default/test/fixtures/data-reassigned/snapshots/vdomProduction-expected.js

@@ -0,0 +1,27 @@
+import { t as _t } from "marko/dist/runtime/vdom/index.js";
+const _marko_componentType = "aUDwECFR",
+  _marko_template = _t(_marko_componentType);
+export default _marko_template;
+import _marko_renderer from "marko/dist/runtime/components/renderer.js";
+import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry";
+_marko_registerComponent(_marko_componentType, () => _marko_template);
+const _marko_component = {};
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {
+  var data;
+  data = {
+    name: "foo"
+  };
+  out.be("div", null, "0", _component, null, 0);
+  out.t("Hello ", _component);
+  out.t(data.name, _component);
+  out.be("span", null, "1", _component, null, 0);
+  out.t("Hello ", _component);
+  out.t(data, _component);
+  out.ee();
+  out.ee();
+}, {
+  t: _marko_componentType,
+  i: true
+}, _marko_component);
+import _marko_defineComponent from "marko/dist/runtime/components/defineComponent.js";
+_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);

packages/translator-default/test/fixtures/data-reassigned/template.marko

@@ -0,0 +1,9 @@
+$ data = { name: "foo" };
+<div>
+  Hello ${data.name}
+  <span>
+    Hello ${data}
+  </span>
+</div>
+
+