feat: 🎸 add babel transformer

Issues: Closes #108

Author: kaisermann

Diff for: package.json

@@ -49,6 +49,8 @@
     }
   },
   "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@babel/preset-env": "^7.8.4",
     "@types/jest": "^25.1.1",
     "@types/node": "^13.7.0",
     "@types/stylus": "^0.48.32",

Diff for: src/autoProcess.ts

@@ -49,6 +49,7 @@ type AutoPreprocessOptions = {
   less?: TransformerOptions<Options.Less>;
   stylus?: TransformerOptions<Options.Stylus>;
   postcss?: TransformerOptions<Options.Postcss>;
+  babel?: TransformerOptions<Options.Babel>;
   coffeescript?: TransformerOptions<Options.Coffeescript>;
   pug?: TransformerOptions<Options.Pug>;
   globalStyle?: TransformerOptions<Options.Typescript>;
@@ -197,14 +198,43 @@ export function autoPreprocess(
 
       return { code, map, dependencies };
     },
-    script: scriptTransformer,
+    async script({ content, attributes, filename }) {
+      const transformResult = await scriptTransformer({
+        content,
+        attributes,
+        filename,
+      });
+
+      if (transformResult == null) return;
+
+      let { code, map, dependencies, diagnostics } = transformResult;
+
+      if (transformers.babel) {
+        const transformed = await runTransformer('babel', transformers.babel, {
+          content: code,
+          map,
+          filename,
+        });
+
+        code = transformed.code;
+        map = transformed.map;
+        dependencies = concat(dependencies, transformed.dependencies);
+        diagnostics = concat(diagnostics, transformed.diagnostics);
+      }
+
+      return { code, map, dependencies, diagnostics };
+    },
     async style({ content, attributes, filename }) {
-      let { code, map, dependencies } = await cssTransformer({
+      const transformResult = await cssTransformer({
         content,
         attributes,
         filename,
       });
 
+      if (transformResult == null) return;
+
+      let { code, map, dependencies } = transformResult;
+
       if (transformers.postcss) {
         const transformed = await runTransformer(
           'postcss',

Diff for: src/transformers/babel.ts

@@ -0,0 +1,29 @@
+import { transformAsync } from '@babel/core';
+
+import { Transformer, Options } from '../typings';
+
+const transformer: Transformer<Options.Babel> = async ({
+  content,
+  filename,
+  options,
+  map = undefined,
+}) => {
+  const { code, map: sourcemap } = await transformAsync(content, {
+    ...options,
+    inputSourceMap: map as any,
+    sourceType: 'module',
+    // istanbul ignore next
+    sourceMaps: options.sourceMaps ? true : false,
+    filename,
+    minified: false,
+    ast: false,
+    code: true,
+  });
+
+  return {
+    code,
+    map: sourcemap,
+  };
+};
+
+export default transformer;

Diff for: src/typings/options.ts

@@ -2,6 +2,7 @@ import postcss from 'postcss';
 import { Options as SassOptions } from 'sass';
 import { Options as PugOptions } from 'pug';
 import { CompilerOptions } from 'typescript';
+import { TransformOptions as BabelOptions } from '@babel/core';
 
 export interface Coffeescript {
   inlineMap?: boolean;
@@ -16,6 +17,14 @@ export interface Postcss extends postcss.ProcessOptions {
   configFilePath?: string;
 }
 
+export interface Babel extends BabelOptions {
+  sourceType: 'module';
+  minified: false;
+  ast: false;
+  code: true;
+  sourceMaps: boolean;
+}
+
 export type Pug = PugOptions;
 export type Sass = Omit<SassOptions, 'file'>;
 // from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/less/index.d.ts#L80

Diff for: test/autoProcess/autoProcess.test.ts

@@ -1,6 +1,5 @@
 import getAutoPreprocess from '../../src';
 import { getLanguage } from '../../src/utils';
-
 import {
   preprocess,
   getFixtureContent,

Diff for: test/transformers/babel.test.ts

@@ -0,0 +1,37 @@
+import getAutoPreprocess from '../../src';
+import { preprocess } from '../utils';
+
+const BABEL_CONFIG = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        modules: false,
+        targets: {
+          esmodules: true,
+        },
+      },
+    ],
+  ],
+};
+
+describe('transformer - babel', () => {
+  it('transpile with babel', async () => {
+    const template = `<script>
+    let foo = {}
+    $: bar = foo?.b ?? 120
+    </script>`;
+    const opts = getAutoPreprocess({
+      babel: BABEL_CONFIG,
+    });
+    const preprocessed = await preprocess(template, opts);
+    expect(preprocessed.code).toMatchInlineSnapshot(`
+      "<script>var _ref;
+
+      var foo = {};
+
+      $: bar = (_ref = foo == null ? void 0 : foo.b) != null ? _ref : 120;</script>"
+    `);
+  });
+});