Marko 5 support (#24)

* feat: add support for Marko 5

package.json

@@ -5,6 +5,7 @@
   "bugs": "https://github.com/marko-js/webpack/issues",
   "dependencies": {
     "base-x": "^3.0.7",
+    "concat-with-sourcemaps": "^1.1.0",
     "lasso-modules-client": "^2.0.5",
     "loader-utils": "^1.4.0",
     "sort-keys": "^4.0.0",
@@ -53,7 +54,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "marko": "^4.18.47",
+    "marko": "^4.18.47 || ^5",
     "webpack": "^4"
   },
   "repository": {

src/__tests__/fixtures/basic-template-plugin/__snapshots__/server--main.js

@@ -43,8 +43,7 @@ http
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/basic-template-plugin/test.marko",
@@ -77,16 +76,14 @@ marko_template.meta = {
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/basic-template-plugin/test.marko",
     marko_renderer = __webpack_require__(/*! marko/dist/runtime/components/renderer */ "marko/dist/runtime/components/renderer"),
     template = __webpack_require__(/*! ./test.marko */ "./src/__tests__/fixtures/basic-template-plugin/test.marko"),
-    module_MARKOWEBPACKMANIFEST_module = __webpack_require__(/*! ./../../../../__MARKO_WEBPACK__MANIFEST.js */ "./__MARKO_WEBPACK__MANIFEST.js"),
-    MARKOWEBPACKMANIFEST_module = module_MARKOWEBPACKMANIFEST_module.default || module_MARKOWEBPACKMANIFEST_module,
-    getAssets = module_MARKOWEBPACKMANIFEST_module.getAssets,
+    module_manifest = __webpack_require__(/*! ./../../../../__MARKO_WEBPACK__MANIFEST.js */ "./__MARKO_WEBPACK__MANIFEST.js"),
+    manifest = module_manifest.default || module_manifest,
     marko_dynamicTag = __webpack_require__(/*! marko/dist/runtime/helpers/dynamic-tag */ "marko/dist/runtime/helpers/dynamic-tag"),
     marko_loadTag = __webpack_require__(/*! marko/dist/runtime/helpers/load-tag */ "marko/dist/runtime/helpers/load-tag"),
     init_components_tag = marko_loadTag(__webpack_require__(/*! marko/dist/core-tags/components/init-components-tag */ "marko/dist/core-tags/components/init-components-tag"));
@@ -139,7 +136,7 @@ function render(input, out, __component, component, state) {
 
   out.___renderAssets = renderAssets;
 
-  out.___assets = getAssets("test_uYWJ", out.global.buildName);
+  out.___assets = manifest.getAssets("test_uYWJ", out.global.buildName);
 
   out.flush = outFlushOverride;
 

src/__tests__/fixtures/basic-template/__snapshots__/main.js

@@ -8,7 +8,6 @@
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-// Compiled using [email protected] - DO NOT EDIT
 
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/vdom */ "marko/dist/vdom").t(),

src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/server--main.js

@@ -24,8 +24,7 @@ module.exports = {
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/multiple-entries-plugin/bar.marko",
@@ -66,16 +65,14 @@ marko_template.meta = {
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/multiple-entries-plugin/bar.marko",
     marko_renderer = __webpack_require__(/*! marko/dist/runtime/components/renderer */ "marko/dist/runtime/components/renderer"),
     template = __webpack_require__(/*! ./bar.marko */ "./src/__tests__/fixtures/multiple-entries-plugin/bar.marko"),
-    module_MARKOWEBPACKMANIFEST_module = __webpack_require__(/*! ./../../../../__MARKO_WEBPACK__MANIFEST.js */ "./__MARKO_WEBPACK__MANIFEST.js"),
-    MARKOWEBPACKMANIFEST_module = module_MARKOWEBPACKMANIFEST_module.default || module_MARKOWEBPACKMANIFEST_module,
-    getAssets = module_MARKOWEBPACKMANIFEST_module.getAssets,
+    module_manifest = __webpack_require__(/*! ./../../../../__MARKO_WEBPACK__MANIFEST.js */ "./__MARKO_WEBPACK__MANIFEST.js"),
+    manifest = module_manifest.default || module_manifest,
     marko_dynamicTag = __webpack_require__(/*! marko/dist/runtime/helpers/dynamic-tag */ "marko/dist/runtime/helpers/dynamic-tag"),
     marko_loadTag = __webpack_require__(/*! marko/dist/runtime/helpers/load-tag */ "marko/dist/runtime/helpers/load-tag"),
     init_components_tag = marko_loadTag(__webpack_require__(/*! marko/dist/core-tags/components/init-components-tag */ "marko/dist/core-tags/components/init-components-tag"));
@@ -128,7 +125,7 @@ function render(input, out, __component, component, state) {
 
   out.___renderAssets = renderAssets;
 
-  out.___assets = getAssets("bar_aSxt", out.global.buildName);
+  out.___assets = manifest.getAssets("bar_aSxt", out.global.buildName);
 
   out.flush = outFlushOverride;
 
@@ -166,8 +163,7 @@ marko_template.meta = {
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/multiple-entries-plugin/components/shared.marko",
@@ -200,8 +196,7 @@ marko_template.meta = {
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/multiple-entries-plugin/foo.marko",
@@ -242,16 +237,14 @@ marko_template.meta = {
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/multiple-entries-plugin/foo.marko",
     marko_renderer = __webpack_require__(/*! marko/dist/runtime/components/renderer */ "marko/dist/runtime/components/renderer"),
     template = __webpack_require__(/*! ./foo.marko */ "./src/__tests__/fixtures/multiple-entries-plugin/foo.marko"),
-    module_MARKOWEBPACKMANIFEST_module = __webpack_require__(/*! ./../../../../__MARKO_WEBPACK__MANIFEST.js */ "./__MARKO_WEBPACK__MANIFEST.js"),
-    MARKOWEBPACKMANIFEST_module = module_MARKOWEBPACKMANIFEST_module.default || module_MARKOWEBPACKMANIFEST_module,
-    getAssets = module_MARKOWEBPACKMANIFEST_module.getAssets,
+    module_manifest = __webpack_require__(/*! ./../../../../__MARKO_WEBPACK__MANIFEST.js */ "./__MARKO_WEBPACK__MANIFEST.js"),
+    manifest = module_manifest.default || module_manifest,
     marko_dynamicTag = __webpack_require__(/*! marko/dist/runtime/helpers/dynamic-tag */ "marko/dist/runtime/helpers/dynamic-tag"),
     marko_loadTag = __webpack_require__(/*! marko/dist/runtime/helpers/load-tag */ "marko/dist/runtime/helpers/load-tag"),
     init_components_tag = marko_loadTag(__webpack_require__(/*! marko/dist/core-tags/components/init-components-tag */ "marko/dist/core-tags/components/init-components-tag"));
@@ -304,7 +297,7 @@ function render(input, out, __component, component, state) {
 
   out.___renderAssets = renderAssets;
 
-  out.___assets = getAssets("foo_3XPO", out.global.buildName);
+  out.___assets = manifest.getAssets("foo_3XPO", out.global.buildName);
 
   out.flush = outFlushOverride;
 

src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-A--test_YDNP.A.js

@@ -8,7 +8,6 @@
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(/*! ./style.css */ "./src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/components/nested/style.css");
-// Compiled using [email protected] - DO NOT EDIT
 "use strict";
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/vdom */ "marko/dist/vdom").t(),

src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-B--test_YDNP.B.js

@@ -8,7 +8,6 @@
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(/*! ./style.css */ "./src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/components/nested/style.css");
-// Compiled using [email protected] - DO NOT EDIT
 "use strict";
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/vdom */ "marko/dist/vdom").t(),

src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/browser-C--test_YDNP.C.js

@@ -8,7 +8,6 @@
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(/*! ./style.css */ "./src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/components/nested/style.css");
-// Compiled using [email protected] - DO NOT EDIT
 "use strict";
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/vdom */ "marko/dist/vdom").t(),

src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/server--main.js

@@ -29,8 +29,7 @@ module.exports = {
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_component = {
@@ -90,8 +89,7 @@ http
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/with-class-component-plugin-dynamic-bundle/test.marko",
@@ -140,16 +138,14 @@ marko_template.meta = {
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/with-class-component-plugin-dynamic-bundle/test.marko",
     marko_renderer = __webpack_require__(/*! marko/dist/runtime/components/renderer */ "marko/dist/runtime/components/renderer"),
     template = __webpack_require__(/*! ./test.marko */ "./src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/test.marko"),
-    module_MARKOWEBPACKMANIFEST_module = __webpack_require__(/*! ./../../../../__MARKO_WEBPACK__MANIFEST.js */ "./__MARKO_WEBPACK__MANIFEST.js"),
-    MARKOWEBPACKMANIFEST_module = module_MARKOWEBPACKMANIFEST_module.default || module_MARKOWEBPACKMANIFEST_module,
-    getAssets = module_MARKOWEBPACKMANIFEST_module.getAssets,
+    module_manifest = __webpack_require__(/*! ./../../../../__MARKO_WEBPACK__MANIFEST.js */ "./__MARKO_WEBPACK__MANIFEST.js"),
+    manifest = module_manifest.default || module_manifest,
     marko_dynamicTag = __webpack_require__(/*! marko/dist/runtime/helpers/dynamic-tag */ "marko/dist/runtime/helpers/dynamic-tag"),
     marko_loadTag = __webpack_require__(/*! marko/dist/runtime/helpers/load-tag */ "marko/dist/runtime/helpers/load-tag"),
     init_components_tag = marko_loadTag(__webpack_require__(/*! marko/dist/core-tags/components/init-components-tag */ "marko/dist/core-tags/components/init-components-tag"));
@@ -202,7 +198,7 @@ function render(input, out, __component, component, state) {
 
   out.___renderAssets = renderAssets;
 
-  out.___assets = getAssets("test_YDNP", out.global.buildName);
+  out.___assets = manifest.getAssets("test_YDNP", out.global.buildName);
 
   out.flush = outFlushOverride;
 

src/__tests__/fixtures/with-class-component-plugin/__snapshots__/browser--test_nzzJ.js

@@ -8,7 +8,6 @@
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(/*! ./style.css */ "./src/__tests__/fixtures/with-class-component-plugin/components/nested/style.css");
-// Compiled using [email protected] - DO NOT EDIT
 "use strict";
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/vdom */ "marko/dist/vdom").t(),

src/__tests__/fixtures/with-class-component-plugin/__snapshots__/server--main.js

@@ -24,8 +24,7 @@ module.exports = {
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_component = {
@@ -83,8 +82,7 @@ http
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/with-class-component-plugin/test.marko",
@@ -133,16 +131,14 @@ marko_template.meta = {
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-/* WEBPACK VAR INJECTION */(function(__filename) {// Compiled using [email protected] - DO NOT EDIT
-
+/* WEBPACK VAR INJECTION */(function(__filename) {
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */ "marko/dist/html").t(__filename),
     marko_componentType = "/@marko/webpack-tests$x.x.x/fixtures/with-class-component-plugin/test.marko",
     marko_renderer = __webpack_require__(/*! marko/dist/runtime/components/renderer */ "marko/dist/runtime/components/renderer"),
     template = __webpack_require__(/*! ./test.marko */ "./src/__tests__/fixtures/with-class-component-plugin/test.marko"),
-    module_MARKOWEBPACKMANIFEST_module = __webpack_require__(/*! ./../../../../__MARKO_WEBPACK__MANIFEST.js */ "./__MARKO_WEBPACK__MANIFEST.js"),
-    MARKOWEBPACKMANIFEST_module = module_MARKOWEBPACKMANIFEST_module.default || module_MARKOWEBPACKMANIFEST_module,
-    getAssets = module_MARKOWEBPACKMANIFEST_module.getAssets,
+    module_manifest = __webpack_require__(/*! ./../../../../__MARKO_WEBPACK__MANIFEST.js */ "./__MARKO_WEBPACK__MANIFEST.js"),
+    manifest = module_manifest.default || module_manifest,
     marko_dynamicTag = __webpack_require__(/*! marko/dist/runtime/helpers/dynamic-tag */ "marko/dist/runtime/helpers/dynamic-tag"),
     marko_loadTag = __webpack_require__(/*! marko/dist/runtime/helpers/load-tag */ "marko/dist/runtime/helpers/load-tag"),
     init_components_tag = marko_loadTag(__webpack_require__(/*! marko/dist/core-tags/components/init-components-tag */ "marko/dist/core-tags/components/init-components-tag"));
@@ -195,7 +191,7 @@ function render(input, out, __component, component, state) {
 
   out.___renderAssets = renderAssets;
 
-  out.___assets = getAssets("test_nzzJ", out.global.buildName);
+  out.___assets = manifest.getAssets("test_nzzJ", out.global.buildName);
 
   out.flush = outFlushOverride;
 

src/__tests__/fixtures/with-css-extract/__snapshots__/main.js

@@ -8,7 +8,6 @@
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(/*! ./test.marko.css */ "./src/__tests__/fixtures/with-css-extract/test.marko.css")
-// Compiled using [email protected] - DO NOT EDIT
 "use strict";
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/vdom */ "marko/dist/vdom").t(),

src/__tests__/fixtures/with-css/__snapshots__/main.js

@@ -411,7 +411,6 @@ module.exports = function (list, options) {
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(/*! ./test.marko.css */ "./src/__tests__/fixtures/with-css/test.marko.css")
-// Compiled using [email protected] - DO NOT EDIT
 "use strict";
 
 var marko_template = module.exports = __webpack_require__(/*! marko/dist/vdom */ "marko/dist/vdom").t(),

src/loader/get-asset-code.ts

@@ -4,7 +4,7 @@ import { VIRTUAL_SERVER_MANIFEST_PATH } from "../shared/virtual";
 
 export default (resourcePath: string): string => `
 import template from ${JSON.stringify(`./${path.basename(resourcePath)}`)};
-import { getAssets } from ${JSON.stringify(
+import manifest from ${JSON.stringify(
   `./${path.relative(path.dirname(resourcePath), VIRTUAL_SERVER_MANIFEST_PATH)}`
 )};
 
@@ -50,7 +50,7 @@ static function outEndOverride(data, encoding, callback) {
 $ out.___flush = out.flush;
 $ out.___end = out.end;
 $ out.___renderAssets = renderAssets;
-$ out.___assets = getAssets(${JSON.stringify(
+$ out.___assets = manifest.getAssets(${JSON.stringify(
   moduleName(resourcePath)
 )}, out.global.buildName);
 $ out.flush = outFlushOverride;

src/loader/head-transformer.ts

@@ -1,8 +1,33 @@
-export = function transformer(el, ctx): void {
-  const { builder } = ctx;
+export = function transformer(a, b) {
+  if (a.hub) {
+    return transformerMarko5(a, b);
+  }
+
+  return transformerMarko4(a, b);
+};
+
+function transformerMarko4(el, { builder }): void {
   el.appendChild(
     builder.scriptlet({
       value: "out.___renderAssets && out.___renderAssets()"
     })
   );
-};
+}
+
+function transformerMarko5(path, t): void {
+  const renderAssetsMember = t.memberExpression(
+    t.identifier("out"),
+    t.identifier("___renderAssets")
+  );
+  path.replaceWith(
+    t.markoScriptlet([
+      t.expressionStatement(
+        t.logicalExpression(
+          "&&",
+          renderAssetsMember,
+          t.callExpression(renderAssetsMember, [])
+        )
+      )
+    ])
+  );
+}