feat: expose babelOptions for Marko 5 compiler (#25)

marko-js · Feb 27, 2020 · fb49fa9 · fb49fa9
1 parent 3bde3ce
commit fb49fa9
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -74,7 +74,7 @@ export default [
     module: {
       rules: [
         {
-          test: /\.marko?$/,
+          test: /\.marko$/,
           loader: "@marko/webpack/loader"
         }
       ]
@@ -84,7 +84,7 @@ export default [
   {
     rules: [
       {
-        test: /\.marko?$/,
+        test: /\.marko$/,
         loader: "@marko/webpack/loader"
       },
       // If using `style` blocks with Marko you must use an appropriate loader
@@ -98,6 +98,30 @@ export default [
 ];
 ```
 
+## Babel options (Marko 5+)
+
+If you are using Marko 5 with this plugin you can manually override the Babel configuration used by passing a `babelOptions` object along side the `@marko/webpack/loader`. By default Babels regular [config file resolution](https://babeljs.io/docs/en/config-files) will be used.
+
+```javascript
+export default {
+    module: {
+      rules: [
+        {
+          test: /\.marko$/,
+          loader: "@marko/webpack/loader",
+          options: {
+            babelOptions: {
+              presets: [
+                ["@babel/preset-env", { node: "current" }]
+              ]
+            }
+          }
+        }
+      ]
+    }
+  },
+```
+
 ## Multiple client side compilers
 
 Sometimes you need to have multiple compilers for your client side bundles. For example with [`i18n`](https://github.com/webpack/webpack/tree/master/examples/i18n) or [even shipping dynamic runtime bundles to the browser](https://github.com/eBay/arc/tree/master/packages/arc-webpack).
@@ -124,7 +148,7 @@ export default [
     module: {
       rules: [
         {
-          test: /\.marko?$/,
+          test: /\.marko$/,
           loader: "@marko/webpack/loader"
         }
       ]
@@ -135,7 +159,7 @@ export default [
     name: `Browser-${language}`,
     rules: [
       {
-        test: /\.marko?$/,
+        test: /\.marko$/,
         loader: "@marko/webpack/loader"
       },
       // If using `style` blocks with Marko you must use an appropriate loader

diff --git a/src/loader/index.ts b/src/loader/index.ts
@@ -67,6 +67,20 @@ export default function(source: string): string {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const markoCompiler = require((queryOptions && queryOptions.compiler) ||
     DEFAULT_COMPILER);
+  const babelOptions = Object.assign(
+    {},
+    queryOptions && queryOptions.babelOptions
+  );
+  babelOptions.caller = Object.assign(
+    {
+      target: this.target,
+      supportsStaticESM: true,
+      supportsDynamicImport: true,
+      supportsTopLevelAwait: true
+    },
+    babelOptions.caller
+  );
+
   const dependenciesOnly = this.resource.endsWith("?dependencies");
   const hydrate = this.resource.endsWith("?hydrate");
   const assets = this.resource.endsWith("?assets");
@@ -94,7 +108,8 @@ export default function(source: string): string {
       {
         writeToDisk: false,
         requireTemplates: true,
-        writeVersionComment: false
+        writeVersionComment: false,
+        babelOptions
       }
     );
   } else if (hydrate) {
@@ -116,7 +131,8 @@ export default function(source: string): string {
         sourceOnly: false,
         writeToDisk: false,
         writeVersionComment: false,
-        sourceMaps
+        sourceMaps,
+        babelOptions
       }
     );
 
@@ -198,7 +214,8 @@ export default function(source: string): string {
         writeToDisk: false,
         requireTemplates: true,
         writeVersionComment: false,
-        sourceMaps
+        sourceMaps,
+        babelOptions
       }
     );