marko 5.29.2 → 5.30.0

package/docs/rollup.md

@@ -102,7 +102,7 @@ const assetFileNames = "[name]-[hash][extname]";
 
 const externalDependencies = [
   ...Object.keys(pkg.dependencies),
-  ...builtinModules
+  ...builtinModules,
 ];
 
 process.env.SASS_PATH = "./:./node_modules";
@@ -114,13 +114,13 @@ export default (async () => [
       dir: "built/server/",
       assetFileNames: `../browser/${assetFileNames}`,
       format: "cjs",
-      sourcemap: true
+      sourcemap: true,
     },
-    external: id =>
+    external: (id) =>
       externalDependencies.some(
-        dependency => id === dependency || id.startsWith(dependency + "/")
+        (dependency) => id === dependency || id.startsWith(dependency + "/")
       ),
-    plugins: [isWatch && runPlugin({ execArgv: ["--enable-source-maps"] })]
+    plugins: [isWatch && runPlugin({ execArgv: ["--enable-source-maps"] })],
   }),
 
   compiler("browser", {
@@ -130,7 +130,7 @@ export default (async () => [
       entryFileNames: __PROD__ ? "[name]-[hash].js" : null,
       assetFileNames,
       sourcemap: true,
-      sourcemapExcludeSources: __PROD__
+      sourcemapExcludeSources: __PROD__,
     },
     plugins: [
       stylesPlugin({
@@ -138,13 +138,13 @@ export default (async () => [
         sourceMap: true,
         config: {
           target: "browserslist:css",
-          plugins: [autoprefixer({ env: "css" })]
+          plugins: [autoprefixer({ env: "css" })],
         },
         minimize: __PROD__,
         url: {
           publicPath,
-          hash: assetFileNames
-        }
+          hash: assetFileNames,
+        },
       }),
       __PROD__ && (await import("rollup-plugin-terser")).terser(),
       __PROD__ &&
@@ -153,8 +153,8 @@ export default (async () => [
           minSize: 1024,
           gzipOptions: {
             level: 9,
-            memLevel: 9
-          }
+            memLevel: 9,
+          },
         }),
       __PROD__ &&
         !isWatch &&
@@ -170,10 +170,10 @@ export default (async () => [
                 bundleAnalyzerFilename
               )}\x1b[0m`
             );
-          }
-        }
-    ]
-  })
+          },
+        },
+    ],
+  }),
 ])();
 
 function compiler(target, config) {
@@ -184,7 +184,7 @@ function compiler(target, config) {
     browserslistEnv,
     compact: false,
     babelrc: false,
-    caller: { target }
+    caller: { target },
   };
   if (isBrowser) {
     babelConfig.presets = [
@@ -192,9 +192,9 @@ function compiler(target, config) {
         "@babel/preset-env",
         {
           browserslistEnv,
-          bugfixes: true
-        }
-      ]
+          bugfixes: true,
+        },
+      ],
     ];
   }
 
@@ -205,16 +205,16 @@ function compiler(target, config) {
       markoPlugin[target]({ babelConfig }),
       nodeResolvePlugin({
         browser: isBrowser,
-        preferBuiltins: !isBrowser
+        preferBuiltins: !isBrowser,
       }),
       commonjsPlugin(),
       replacePlugin({
         preventAssignment: true,
-        values: { __DEV__, __PROD__ }
+        values: { __DEV__, __PROD__ },
       }),
       babelPlugin({
         babelHelpers: "bundled",
-        ...babelConfig
+        ...babelConfig,
       }),
       jsonPlugin(),
       urlPlugin({
@@ -223,10 +223,10 @@ function compiler(target, config) {
         fileName: assetFileNames,
         include: "**/*.{svg,png,jpg,jpeg}",
         limit: 0, // Never Base64 & inline
-        emitFiles: !isBrowser
+        emitFiles: !isBrowser,
       }),
-      ...config.plugins
-    ]
+      ...config.plugins,
+    ],
   };
 }
 ```
@@ -276,7 +276,7 @@ For example, if you have both `esm` and `iife` build outputs configured:
 {
   output: [
     { dir: "dist/iife", format: "iife" },
-    { dir: "dist/esm", format: "esm" }
+    { dir: "dist/esm", format: "esm" },
   ];
 }
 ```
@@ -306,8 +306,8 @@ You can manually override the builtin Babel configuration by passing a `babelCon
 ```js
 marko.browser({
   babelConfig: {
-    presets: ["@babel/preset-env"]
-  }
+    presets: ["@babel/preset-env"],
+  },
 });
 ```
 
@@ -344,9 +344,9 @@ marko.browser({
             isEntry,
             fileName,
             // only inline code chunks below 1kB
-            inline: code.trim().length < 1024 && code
+            inline: code.trim().length < 1024 && code,
           }
     );
-  }
+  },
 });
 ```

package/docs/troubleshooting-streaming.md

@@ -60,7 +60,7 @@ http
     response.writeHead(200, { "content-type": "text/html;charset=utf-8" });
     const templateStream = MarkoTemplate.stream({});
     const gzipStream = zlib.createGzip({
-      flush: zlib.constants.Z_PARTIAL_FLUSH
+      flush: zlib.constants.Z_PARTIAL_FLUSH,
     });
     templateStream.pipe(outputStream).pipe(response);
   })

package/docs/typescript.md

@@ -376,7 +376,7 @@ _components/color-rotate-button/component.js_
 export default class extends Marko.Component {
   onCreate() {
     this.state = {
-      colorIndex: 0
+      colorIndex: 0,
     };
   }
 

package/docs/vite.md

@@ -12,7 +12,7 @@ npm install @marko/vite vite
 import { defineConfig } from "vite";
 import marko from "@marko/vite";
 export default defineConfig({
-  plugins: [marko()]
+  plugins: [marko()],
 });
 ```
 
@@ -66,8 +66,8 @@ You can manually override Marko's Babel configuration by passing a `babelConfig`
 ```javascript
 marko({
   babelConfig: {
-    presets: ["@babel/preset-env"]
-  }
+    presets: ["@babel/preset-env"],
+  },
 });
 ```
 

package/docs/webpack.md

@@ -42,16 +42,16 @@ The `<webpack-assets>` tag can be used along with the plugin in a multi-compiler
 export default [
   {
     entry: "./server.js",
-    plugins: [markoPlugin.server]
+    plugins: [markoPlugin.server],
     // ...
   },
   {
     // ...
     entry: {
-      tracking: "./tracking.js"
+      tracking: "./tracking.js",
     },
-    plugins: [markoPlugin.browser]
-  }
+    plugins: [markoPlugin.browser],
+  },
 ];
 ```
 
@@ -69,26 +69,26 @@ export default [
       rules: [
         {
           test: /\.marko$/,
-          loader: "@marko/webpack/loader"
-        }
-      ]
+          loader: "@marko/webpack/loader",
+        },
+      ],
     },
-    plugins: [markoPlugin.server]
+    plugins: [markoPlugin.server],
   },
   {
     rules: [
       {
         test: /\.marko$/,
-        loader: "@marko/webpack/loader"
+        loader: "@marko/webpack/loader",
       },
       // If using `style` blocks with Marko you must use an appropriate loader
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"]
-      }
+        use: ["style-loader", "css-loader"],
+      },
     ],
-    plugins: [markoPlugin.browser]
-  }
+    plugins: [markoPlugin.browser],
+  },
 ];
 ```
 
@@ -131,7 +131,7 @@ import germanTranslations from "./de.json";
 
 const languages = {
   en: null,
-  de: germanTranslations
+  de: germanTranslations,
 };
 
 const markoPlugin = new MarkoPlugin();
@@ -144,27 +144,27 @@ export default [
       rules: [
         {
           test: /\.marko$/,
-          loader: "@marko/webpack/loader"
-        }
-      ]
+          loader: "@marko/webpack/loader",
+        },
+      ],
     },
-    plugins: [markoPlugin.server]
+    plugins: [markoPlugin.server],
   },
-  ...Object.keys(languages).map(language => ({
+  ...Object.keys(languages).map((language) => ({
     name: `Browser-${language}`,
     rules: [
       {
         test: /\.marko$/,
-        loader: "@marko/webpack/loader"
+        loader: "@marko/webpack/loader",
       },
       // If using `style` blocks with Marko you must use an appropriate loader
       {
         test: /\.css$/,
-        use: ["style-loader", "css-loader"]
-      }
+        use: ["style-loader", "css-loader"],
+      },
     ],
-    plugins: [new I18nPlugin(languages[language]), markoPlugin.browser]
-  }))
+    plugins: [new I18nPlugin(languages[language]), markoPlugin.browser],
+  })),
 ];
 ```
 
@@ -193,7 +193,7 @@ The `runtimeId` will default to the [`uniqueName` option](https://webpack.js.org
 import MarkoPlugin from "@marko/webpack/plugin";
 
 const markoPlugin = new MarkoPlugin({
-  runtimeId: "MY_MARKO_RUNTIME_ID" // default to webpack `output.uniqueName` option.
+  runtimeId: "MY_MARKO_RUNTIME_ID", // default to webpack `output.uniqueName` option.
 });
 ```
 

package/docs/why-is-marko-fast.md

@@ -109,8 +109,8 @@ function render(input, out) {
     "DIV",
     {
       style: marko_styleAttr({
-        backgroundColor: color
-      })
+        backgroundColor: color,
+      }),
     },
     0,
     4

package/index.d.ts

@@ -216,6 +216,7 @@ declare global {
     }
 
     /** The top level api for a Marko Template. */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     export abstract class Template<Input = unknown, Return = unknown> {
       /** Creates a Marko compatible output stream. */
       createOut(): Out;

package/legacy-components-browser.marko

@@ -0,0 +1,15 @@
+<module-code(function(require, opts) {
+    var file = `"./${opts.optimize ? "dist" : "src"}/runtime/components/legacy"`;
+
+    if (opts.modules === "cjs") {
+        return `module.exports = require(${file});\n`;
+    } else {
+        return `export { default } from ${file};\nexport * from ${file};\n`;
+    }
+})/>
+
+// What's going on here? We are using Marko to do JavaScript code generation
+// during the module bundling phase to conditionally export either the
+// "src" or the "dist" folder based on whether or not we are doing a
+// debug or non-debug build. We are using Marko since we know the Marko compiler
+// is enabled already (no extra babel transform required).

package/legacy-components.js

@@ -0,0 +1,7 @@
+var isDebug = require("./env").isDebug;
+
+if (isDebug) {
+  module.exports = require("./src/runtime/components/legacy");
+} else {
+  module.exports = require("./dist/runtime/components/legacy");
+}

package/package.json

@@ -1,50 +1,7 @@
 {
     "name": "marko",
-    "version": "5.29.2",
-    "license": "MIT",
+    "version": "5.30.0",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
-    "dependencies": {
-        "@marko/compiler": "^5.31.1",
-        "@marko/translator-default": "^5.29.2",
-        "app-module-path": "^2.2.0",
-        "argly": "^1.2.0",
-        "browser-refresh-client": "1.1.4",
-        "complain": "^1.6.0",
-        "csstype": "^3.1.2",
-        "events-light": "^1.0.5",
-        "listener-tracker": "^2.0.0",
-        "minimatch": "^3.0.4",
-        "raptor-util": "^3.2.0",
-        "resolve-from": "^5.0.0",
-        "self-closing-tags": "^1.0.1",
-        "warp10": "^2.0.1"
-    },
-    "main": "index.js",
-    "browser": {
-        "./compiler.js": "./compiler-browser.marko",
-        "./components.js": "./components-browser.marko",
-        "./index.js": "./index-browser.marko"
-    },
-    "bin": {
-        "markoc": "bin/markoc"
-    },
-    "homepage": "https://markojs.com/",
-    "logo": {
-        "url": "https://raw.githubusercontent.com/marko-js/branding/master/marko-logo-small.png"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/marko-js/marko.git"
-    },
-    "author": "Patrick Steele-Idem <pnidem@gmail.com>",
-    "maintainers": [
-        "Patrick Steele-Idem <pnidem@gmail.com>",
-        "Michael Rawlings <ml.rawlings@gmail.com>",
-        "Phillip Gates-Idem <phillip.idem@gmail.com>",
-        "Austin Kelleher <a@alk.im>",
-        "Dylan Piercey <pierceydylan@gmail.com>",
-        "Martin Aberer"
-    ],
     "keywords": [
         "front-end",
         "templating",
@@ -59,6 +16,32 @@
         "virtual",
         "virtual-dom"
     ],
+    "homepage": "https://markojs.com/",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/marko-js/marko.git"
+    },
+    "license": "MIT",
+    "author": "Patrick Steele-Idem <pnidem@gmail.com>",
+    "maintainers": [
+        "Patrick Steele-Idem <pnidem@gmail.com>",
+        "Michael Rawlings <ml.rawlings@gmail.com>",
+        "Phillip Gates-Idem <phillip.idem@gmail.com>",
+        "Austin Kelleher <a@alk.im>",
+        "Dylan Piercey <pierceydylan@gmail.com>",
+        "Martin Aberer"
+    ],
+    "main": "index.js",
+    "browser": {
+        "./compiler.js": "./compiler-browser.marko",
+        "./components.js": "./components-browser.marko",
+        "./legacy-components.js": "./legacy-components-browser.marko",
+        "./index.js": "./index-browser.marko"
+    },
+    "types": "index.d.ts",
+    "bin": {
+        "markoc": "bin/markoc"
+    },
     "files": [
         "bin",
         "dist",
@@ -68,6 +51,8 @@
         "compiler.js",
         "components-browser.marko",
         "components.js",
+        "legacy-components-browser.marko",
+        "legacy-components.js",
         "env.js",
         "index.d.ts",
         "index-browser.marko",
@@ -75,5 +60,26 @@
         "node-require.js",
         "tags-html.d.ts"
     ],
-    "types": "index.d.ts"
+    "scripts": {
+        "build": "babel ./src --out-dir ./dist --delete-dir-on-start --copy-files --config-file ../../babel.config.js --env-name=production"
+    },
+    "dependencies": {
+        "@marko/compiler": "^5.32.0",
+        "@marko/translator-default": "^5.30.0",
+        "app-module-path": "^2.2.0",
+        "argly": "^1.2.0",
+        "browser-refresh-client": "1.1.4",
+        "complain": "^1.6.0",
+        "csstype": "^3.1.2",
+        "events-light": "^1.0.5",
+        "listener-tracker": "^2.0.0",
+        "minimatch": "^3.0.4",
+        "raptor-util": "^3.2.0",
+        "resolve-from": "^5.0.0",
+        "self-closing-tags": "^1.0.1",
+        "warp10": "^2.0.1"
+    },
+    "logo": {
+        "url": "https://raw.githubusercontent.com/marko-js/branding/master/marko-logo-small.png"
+    }
 }

package/src/compiler/config.js

@@ -34,7 +34,7 @@ if (g.__MARKO_CONFIG) {
      * You can also access this metadata via `compile(...).meta`.
      * This API is sticking around for compatibility purposes.
      */
-    meta: true
+    meta: true,
   };
 
   if (process.env.MARKO_CONFIG) {

package/src/compiler/index.js

@@ -26,12 +26,12 @@ var defaultOptionsExportDefinition = {
     return globalConfig;
   },
   enumerable: true,
-  configurable: false
+  configurable: false,
 };
 
 Object.defineProperties(exports, {
   defaultOptions: defaultOptionsExportDefinition,
-  config: defaultOptionsExportDefinition
+  config: defaultOptionsExportDefinition,
 });
 
 function configure(newConfig) {
@@ -66,8 +66,8 @@ function _compile(src, filename, userConfig, callback) {
 
   if (callback) {
     compiler.compile(src, filename, options).then(
-      result => callback(null, resultCompat(result, options)),
-      error => callback(error)
+      (result) => callback(null, resultCompat(result, options)),
+      (error) => callback(error)
     );
   } else {
     return resultCompat(compiler.compileSync(src, filename, options), options);
@@ -96,7 +96,7 @@ function compileForBrowser(src, filename, options, callback) {
     {
       output: "dom",
       meta: false,
-      sourceOnly: false
+      sourceOnly: false,
     },
     options
   );

package/src/core-tags/core/__flush_here_and_after__.js

@@ -16,7 +16,7 @@ module.exports = function __flushHereAndAfter__(input, out) {
     const asyncOut = out.beginAsync({ last: true });
     const nextWriter = out.writer;
 
-    out.on("___toString", writer => {
+    out.on("___toString", (writer) => {
       if (writer instanceof BufferedWriter) {
         if (flushed) {
           const detachedOut = out.createOut();

package/src/core-tags/core/await/AsyncValue.js

@@ -114,7 +114,7 @@ AsyncValue.prototype = {
       // notify callbacks
       notifyCallbacks(this, null, value);
     }
-  }
+  },
 };
 
 module.exports = AsyncValue;

package/src/core-tags/core/await/renderer.js

@@ -102,7 +102,7 @@ module.exports = function awaitTag(input, out) {
   var awaitInfo = {
     name: name,
     clientReorder: clientReorder,
-    dataProvider: provider
+    dataProvider: provider,
   };
 
   if (clientReorder) {
@@ -112,7 +112,7 @@ module.exports = function awaitTag(input, out) {
       out.global.___clientReorderContext ||
       (out.global.___clientReorderContext = {
         instances: [],
-        nextId: 0
+        nextId: 0,
       });
 
     var id = (awaitInfo.id = input.name || clientReorderContext.nextId++);
@@ -159,7 +159,7 @@ module.exports = function awaitTag(input, out) {
     out.flush(); // Flush everything up to this await instance
     asyncOut = awaitInfo.out = out.beginAsync({
       timeout: 0, // We will use our code for controlling timeout
-      name: name
+      name: name,
     });
   }
 
@@ -220,7 +220,11 @@ function renderContents(err, data, input, out) {
   if (err) {
     if (input.catch) {
       if (errorRenderer) {
-        errorRenderer(out, err);
+        try {
+          errorRenderer(out, err);
+        } catch (err2) {
+          out.error(err2);
+        }
       }
     } else {
       out.error(err);

package/src/core-tags/core/await/reorderer-renderer.js

@@ -27,7 +27,7 @@ module.exports = function (input, out) {
   var asyncOut = out.beginAsync({
     last: true,
     timeout: -1,
-    name: "await-reorderer"
+    name: "await-reorderer",
   });
 
   out.onLast(function (next) {

package/src/node-require/browser-refresh.js

@@ -8,10 +8,10 @@ if ("MARKO_DEBUG") {
     browserRefreshClient
       .enableSpecialReload(
         `${extensions
-          .map(ext => `*${ext}`)
+          .map((ext) => `*${ext}`)
           .join(" ")} marko.json marko-tag.json`
       )
-      .onFileModified(path => {
+      .onFileModified((path) => {
         hotReload.handleFileModified(path);
       });
   }

package/src/node-require/index.js

@@ -7,7 +7,7 @@ const requiredCompilerOptions = { modules: "cjs" };
 const defaultCompilerOptions = {
   // eslint-disable-next-line no-constant-condition
   sourceMaps: "MARKO_DEBUG" ? "inline" : false,
-  meta: true
+  meta: true,
 };
 const MARKO_EXTENSIONS = Symbol("MARKO_EXTENSIONS");
 
@@ -80,7 +80,7 @@ function install(options) {
     requireExtensions[MARKO_EXTENSIONS] ||
     (requireExtensions[MARKO_EXTENSIONS] = []);
 
-  extensions.forEach(extension => {
+  extensions.forEach((extension) => {
     extension = normalizeExtension(extension);
     requireExtensions[extension] = markoRequireExtension;
     requireExtensions[MARKO_EXTENSIONS].push(extension);

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

@@ -4,6 +4,7 @@ const ComponentDef = require("../../../runtime/components/ComponentDef");
 
 var FLAG_WILL_RERENDER_IN_BROWSER = 1;
 // var FLAG_HAS_RENDER_BODY = 2;
+var FLAG_OLD_HYDRATE_NO_CREATE = 8;
 
 module.exports = function beginComponent(
   componentsContext,
@@ -11,15 +12,20 @@ module.exports = function beginComponent(
   key,
   ownerComponentDef,
   isSplitComponent,
-  isImplicitComponent
+  isImplicitComponent,
+  existingComponentDef
 ) {
   var componentId = component.id;
 
-  var componentDef = (componentsContext.___componentDef = new ComponentDef(
-    component,
-    componentId,
-    componentsContext
-  ));
+  // existingComponentDef is only here to allow binding a conditional
+  // widget.  It should be removed when the legacy compat layer is removed.
+  var componentDef =
+    existingComponentDef ||
+    (componentsContext.___componentDef = new ComponentDef(
+      component,
+      componentId,
+      componentsContext
+    ));
 
   var ownerIsRenderBoundary =
     ownerComponentDef && ownerComponentDef.___renderBoundary;
@@ -54,6 +60,10 @@ module.exports = function beginComponent(
     componentsContext.___isPreserved = false;
   }
 
+  if (out.global.oldHydrateNoCreate === true) {
+    componentDef.___flags |= FLAG_OLD_HYDRATE_NO_CREATE;
+  }
+
   if ((ownerIsRenderBoundary || ownerWillRerender) && key != null) {
     out.w(
       "<!--" +