feat: add new hydrateIncludeImports option (#1686)

packages/compiler/src/config.js

@@ -132,7 +132,12 @@ if (globalThis[MARKO_CONFIG_KEY]) {
      * If the default cache is overwritten it is up to the user to determine when the
      * cache is cleared.
      */
-    cache: new Map()
+    cache: new Map(),
+
+    /**
+     * A regexp or function that receives an import path that matches file types known to be client side assets.
+     */
+    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)$/
   };
 
   if (process.env.MARKO_CONFIG) {

packages/marko/docs/compiler.md

@@ -220,6 +220,30 @@ export default function markoLoader(source) {
 }
 ```
 
+#### `hydrateIncludeImports`
+
+This option is only used for `output: "hydrate"`. By default any `import`'s in server only files are not included in the hydrate output. However for some assets, for example stylesheets, it is useful to have them still be included in hydrate mode.
+
+The `hydrateIncludeImports` option allows you to provide a function which receives an import path, or a regexp to match against that path which tells Marko to include that import in the hydrate mode output.
+
+The default regexp includes a list of common known asset file extensions and is as follows:
+
+```js
+/\.(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)$/;
+```
+
+Looking at a partial Marko file such as:
+
+```marko
+import "./bar"
+import "./foo.css";
+import "./baz.wasm";
+
+<div/>
+```
+
+In the `hydrate` output, with the default `hydrateIncludeImports`, would only cause `./foo.css` to be loaded in the browser.
+
 #### `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/index.js

@@ -68,6 +68,10 @@ export const analyze = {
           ? resolveRelativePath(file, filename)
           : filename
       );
+
+      meta.imports = program.node.body
+        .filter(child => t.isImportDeclaration(child))
+        .map(child => child.source.value);
     }
   },
   MarkoTag(tag) {

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

@@ -3,8 +3,13 @@ import MagicString from "magic-string";
 import { types as t } from "@marko/compiler";
 import { loadFileForImport, resolveRelativePath } from "@marko/babel-utils";
 export default (entryFile, isHydrate) => {
-  const { modules, resolveVirtualDependency } = entryFile.markoOpts;
+  const {
+    modules,
+    resolveVirtualDependency,
+    hydrateIncludeImports
+  } = entryFile.markoOpts;
   const program = entryFile.path;
+  const shouldIncludeImport = toTestFn(hydrateIncludeImports);
 
   if (!isHydrate) {
     addBrowserDeps(entryFile);
@@ -69,6 +74,12 @@ export default (entryFile, isHydrate) => {
 
     addBrowserDeps(file);
 
+    for (const imported of meta.imports) {
+      if (shouldIncludeImport(imported)) {
+        program.pushContainer("body", importPath(file, imported));
+      }
+    }
+
     for (const tag of meta.tags) {
       if (tag.endsWith(".marko")) {
         addHydrateDeps(loadFileForImport(file, tag));
@@ -156,3 +167,11 @@ export default (entryFile, isHydrate) => {
     return t.importDeclaration([], t.stringLiteral(resolved));
   }
 };
+
+function toTestFn(val) {
+  if (typeof val === "function") {
+    return val;
+  }
+
+  return val.test.bind(val);
+}

packages/translator-default/test/fixtures/import-hydrate-include/bar.js

@@ -0,0 +1 @@
+module.exports.f = "bar";

packages/translator-default/test/fixtures/import-hydrate-include/snapshots/cjs-expected.js

@@ -0,0 +1,30 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _html = require("marko/src/runtime/html");
+
+var _bar = _interopRequireWildcard(require("./bar"));
+
+require("./foo.css");
+
+var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const _marko_template = (0, _html.t)();
+
+var _default = _marko_template;
+exports.default = _default;
+const _marko_componentType = "packages/translator-default/test/fixtures/import-hydrate-include/template.marko",
+      _marko_component = {};
+_marko_template._ = (0, _renderer.default)(function (input, out, _component, component, state) {}, {
+  t: _marko_componentType,
+  i: true,
+  d: true
+}, _marko_component);

packages/translator-default/test/fixtures/import-hydrate-include/snapshots/generated-expected.marko

@@ -0,0 +1,2 @@
+import bar, { f as foo } from "./bar";
+import "./foo.css";

packages/translator-default/test/fixtures/import-hydrate-include/snapshots/html-expected.js

@@ -0,0 +1,15 @@
+import { t as _t } from "marko/src/runtime/html";
+
+const _marko_template = _t();
+
+export default _marko_template;
+import bar, { f as foo } from "./bar";
+import "./foo.css";
+import _marko_renderer from "marko/src/runtime/components/renderer";
+const _marko_componentType = "packages/translator-default/test/fixtures/import-hydrate-include/template.marko",
+      _marko_component = {};
+_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {}, {
+  t: _marko_componentType,
+  i: true,
+  d: true
+}, _marko_component);

packages/translator-default/test/fixtures/import-hydrate-include/snapshots/htmlProduction-expected.js

@@ -0,0 +1,14 @@
+import { t as _t } from "marko/dist/runtime/html";
+
+const _marko_template = _t();
+
+export default _marko_template;
+import bar, { f as foo } from "./bar";
+import "./foo.css";
+import _marko_renderer from "marko/dist/runtime/components/renderer";
+const _marko_componentType = "9FdWS4tF",
+      _marko_component = {};
+_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {}, {
+  t: _marko_componentType,
+  i: true
+}, _marko_component);

packages/translator-default/test/fixtures/import-hydrate-include/snapshots/hydrate-expected.js

@@ -0,0 +1 @@
+import "./foo.css";

packages/translator-default/test/fixtures/import-hydrate-include/snapshots/vdom-expected.js

@@ -0,0 +1,20 @@
+import { t as _t } from "marko/src/runtime/vdom";
+
+const _marko_template = _t();
+
+export default _marko_template;
+import bar, { f as foo } from "./bar";
+import "./foo.css";
+import _marko_renderer from "marko/src/runtime/components/renderer";
+import { r as _marko_registerComponent } from "marko/src/runtime/components/registry";
+
+const _marko_componentType = _marko_registerComponent("packages/translator-default/test/fixtures/import-hydrate-include/template.marko", () => _marko_template),
+      _marko_component = {};
+
+_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {}, {
+  t: _marko_componentType,
+  i: true,
+  d: true
+}, _marko_component);
+import _marko_defineComponent from "marko/src/runtime/components/defineComponent";
+_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);

packages/translator-default/test/fixtures/import-hydrate-include/snapshots/vdomProduction-expected.js

@@ -0,0 +1,19 @@
+import { t as _t } from "marko/dist/runtime/vdom";
+
+const _marko_template = _t();
+
+export default _marko_template;
+import bar, { f as foo } from "./bar";
+import "./foo.css";
+import _marko_renderer from "marko/dist/runtime/components/renderer";
+import { r as _marko_registerComponent } from "marko/dist/runtime/components/registry";
+
+const _marko_componentType = _marko_registerComponent("9FdWS4tF", () => _marko_template),
+      _marko_component = {};
+
+_marko_template._ = _marko_renderer(function (input, out, _component, component, state) {}, {
+  t: _marko_componentType,
+  i: true
+}, _marko_component);
+import _marko_defineComponent from "marko/dist/runtime/components/defineComponent";
+_marko_template.Component = _marko_defineComponent(_marko_component, _marko_template._);

packages/translator-default/test/fixtures/import-hydrate-include/template.marko

@@ -0,0 +1,2 @@
+import bar, { f as foo } from "./bar";
+import "./foo.css";