feat: Use Babel 7 for JSX parsing to better enable tyed languages.

amiller-gh · amiller-gh · commit 97cd2e46d0c0 · 2018-04-25T09:22:47.000-07:00
diff --git a/packages/@css-blocks/jsx/package.json b/packages/@css-blocks/jsx/package.json
@@ -56,12 +56,12 @@
     "@css-blocks/core": "^0.18.0",
     "@opticss/template-api": "^0.3.0",
     "@opticss/util": "^0.3.0",
-    "babel-traverse": "^6.24.1",
-    "babel-types": "^6.24.1",
-    "babylon": "^6.17.4",
+    "babel-traverse": "7.0.0-beta.3",
+    "babel-types": "7.0.0-beta.3",
+    "babylon": "7.0.0-beta.46",
     "debug": "^2.6.8",
     "minimatch": "^3.0.4",
     "object.values": "^1.0.4",
     "opticss": "^0.3.0"
   }
-}
+}
diff --git a/packages/@css-blocks/jsx/src/Analyzer/index.ts b/packages/@css-blocks/jsx/src/Analyzer/index.ts
@@ -10,7 +10,6 @@ import * as babylon from "babylon";
 import * as debugGenerator from "debug";
 import * as fs from "fs";
 import * as path from "path";
-import * as typescript from "typescript";
 
 import { CssBlocksJSXOptions } from "../options";
 import { JSXParseError } from "../utils/Errors";
@@ -86,21 +85,6 @@ export class CSSBlocksJSXAnalyzer extends Analyzer<TEMPLATE_TYPE> {
 
     // Parse the file into an AST.
     try {
-
-      // Babylon currently has...abysmal support for typescript. We need to transpile
-      // it with the standard typescript library first.
-      // TODO: When Typescript support lands in Babylon, remove this: https://github.com/babel/babylon/issues/320
-      if (path.parse(template.identifier).ext === ".tsx") {
-        let wat = typescript.transpileModule(template.data, {
-          compilerOptions: {
-            module: typescript.ModuleKind.ES2015,
-            jsx: typescript.JsxEmit.Preserve,
-            target: typescript.ScriptTarget.Latest,
-          },
-        });
-        template.data = wat.outputText;
-      }
-
       analysis.template.ast = some(babylon.parse(template.data, this.options.parserOptions));
     } catch (e) {
       process.chdir(oldDir);
diff --git a/packages/@css-blocks/jsx/src/options.ts b/packages/@css-blocks/jsx/src/options.ts
@@ -1,34 +1,64 @@
 import { ResolvedConfiguration, resolveConfiguration } from "@css-blocks/core";
 import { ObjectDictionary } from "@opticss/util";
 
-/**
- * Default parser options.
- */
-const DEFAULT_PARSER_OPTS: object = {
-  sourceType: "module",
-  plugins: [
-    "jsx",
-    "flow",
-    "decorators",
-    "classProperties",
-    "exportExtensions",
-    "asyncGenerators",
-    "functionBind",
-    "functionSent",
-    "dynamicImport",
-  ],
-};
+import { BabylonOptions, PluginName } from "babylon";
+
+// We are only using the output Babylon AST to collect analysis data here,
+// so, we can safely enable EVERY feature possible without worrying about
+// which the consumer actually uses, or if the features needs a runtime.
+// TODO: Remove this tslint disable when types for Babylon 7 are published.
+// tslint:disable-next-line:prefer-whatever-to-any
+const BABEL_PLUGINS: any = [
+  "jsx",
+  "doExpressions",
+  "objectRestSpread",
+  "decorators",
+  "classProperties",
+  "classPrivateProperties",
+  "classPrivateMethods",
+  "exportDefaultFrom",
+  "exportNamespaceFrom",
+  "asyncGenerators",
+  "functionBind",
+  "functionSent",
+  "dynamicImport",
+  "numericSeparator",
+  "optionalChaining",
+  "importMeta",
+  "bigInt",
+  "optionalCatchBinding",
+  "throwExpressions",
+  "pipelineOperator",
+  "nullishCoalescingOperator",
+];
 
 export class CssBlocksJSXOptions {
   public baseDir: string;
-  public parserOptions: object;
+  public types: "typescript" | "flow" | "none";
   public aliases: ObjectDictionary<string>;
   public compilationOptions: ResolvedConfiguration;
+  public parserOptions: BabylonOptions;
 
   constructor(opts: Partial<CssBlocksJSXOptions>) {
     this.baseDir = opts.baseDir || ".";
-    this.parserOptions = opts.parserOptions || DEFAULT_PARSER_OPTS;
+    this.types = opts.types || "none";
     this.aliases = opts.aliases || {};
     this.compilationOptions = resolveConfiguration(opts.compilationOptions);
+    this.parserOptions = {
+      sourceType: "module",
+      allowImportExportEverywhere: true,
+      allowReturnOutsideFunction: true,
+      allowSuperOutsideMethod: true,
+      plugins: BABEL_PLUGINS.slice(0),
+    };
+
+    if (this.types === "typescript") {
+      this.parserOptions.plugins!.push("typescript" as PluginName);
+    }
+
+    else if (this.types === "flow") {
+      this.parserOptions.plugins!.push("flow" as PluginName);
+      this.parserOptions.plugins!.push("flowComments" as PluginName);
+    }
   }
 }
diff --git a/packages/@css-blocks/jsx/test/multi-file-discover/multi-file-test.ts b/packages/@css-blocks/jsx/test/multi-file-discover/multi-file-test.ts
@@ -30,7 +30,7 @@ export class Test {
 
   @test "finds dependents of dependents"() {
     let base = path.resolve(__dirname, "../../../test/fixtures/deep-multifile");
-    return parseFile("index.tsx", { baseDir: base }).then((analyzer: Analyzer) => {
+    return parseFile("index.tsx", { baseDir: base, types: "typescript" }).then((analyzer: Analyzer) => {
       assert.equal(analyzer.analysisCount(), 3);
       assert.equal(analyzer.blockPromises.size, 3);
       assert.equal(analyzer.styleCount(), 4);
diff --git a/packages/@css-blocks/website/config/webpack.config.dev.js b/packages/@css-blocks/website/config/webpack.config.dev.js
@@ -13,14 +13,15 @@ const paths = require('./paths');
 
 const jsxCompilationOptions = {
   compilationOptions: {},
+  types: "typescript",
+  aliases: {},
   optimization: {
     rewriteIdents: true,
     mergeDeclarations: true,
     removeUnusedStyles: true,
     conflictResolution: true,
     enabled: false,
   },
-  aliases: {}
 };
 
 const CssBlocks = require("@css-blocks/jsx");
@@ -100,7 +101,7 @@ module.exports = {
     // for React Native Web.
     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx', '.ts', '.tsx'],
     alias: {
-      
+
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
@@ -126,16 +127,14 @@ module.exports = {
       {
         test: /\.(js|jsx|mjs)$/,
         enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: eslintFormatter,
-              eslintPath: require.resolve('eslint'),
-              
-            },
-            loader: require.resolve('eslint-loader'),
+        use: [{
+          options: {
+            formatter: eslintFormatter,
+            eslintPath: require.resolve('eslint'),
+
           },
-        ],
+          loader: require.resolve('eslint-loader'),
+        }, ],
         include: paths.appSrc,
       },
       {
@@ -214,7 +213,13 @@ module.exports = {
                   cacheDirectory: true,
                   compact: true,
                   parserOpts: {
-                    plugins: [ "jsx" ]
+                    plugins: [
+                      "jsx",
+                      "doExpressions",
+                      "objectRestSpread",
+                      "decorators",
+                      "classProperties",
+                    ]
                   }
                 }
               },
@@ -233,8 +238,6 @@ module.exports = {
                   rewriter: CssBlockRewriter
                 }
               },
-
-
             ]
           },
 
@@ -270,7 +273,7 @@ module.exports = {
       optimization: jsxCompilationOptions.optimization
     }),
 
-    cssAssets({minify: false, inlineSourceMaps: true}),
+    cssAssets({ minify: false, inlineSourceMaps: true }),
 
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
@@ -320,4 +323,4 @@ module.exports = {
   performance: {
     hints: false,
   },
-};
+};
diff --git a/packages/@css-blocks/website/config/webpack.config.prod.js b/packages/@css-blocks/website/config/webpack.config.prod.js
@@ -17,6 +17,7 @@ const CssBlocksPlugin = require("@css-blocks/webpack").CssBlocksPlugin;
 
 const jsxCompilationOptions = {
   compilationOptions: {},
+  types: "typescript",
   optimization: {
     rewriteIdents: true,
     mergeDeclarations: true,
@@ -57,10 +58,9 @@ const cssFilename = 'static/css/[name].[contenthash:8].css';
 // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 // However, our output is structured with css, js and media folders.
 // To have this structure working with relative paths, we have to use custom options.
-const extractTextPluginOptions = shouldUseRelativeAssetPaths
-  ? // Making sure that the publicPath goes back to to build folder.
-    { publicPath: Array(cssFilename.split('/').length).join('../') }
-  : {};
+const extractTextPluginOptions = shouldUseRelativeAssetPaths ? // Making sure that the publicPath goes back to to build folder.
+  { publicPath: Array(cssFilename.split('/').length).join('../') } :
+  {};
 
 // This is the production configuration.
 // It compiles slowly and is focused on producing a fast and minimal bundle.
@@ -86,8 +86,8 @@ module.exports = {
     // Point sourcemap entries to original disk location (format as URL on Windows)
     devtoolModuleFilenameTemplate: info =>
       path
-        .relative(paths.appSrc, info.absoluteResourcePath)
-        .replace(/\\/g, '/'),
+      .relative(paths.appSrc, info.absoluteResourcePath)
+      .replace(/\\/g, '/'),
   },
   resolve: {
     // This allows you to set a fallback for where Webpack should look for modules.
@@ -106,7 +106,7 @@ module.exports = {
     // for React Native Web.
     extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx', '.tsx', '.ts'],
     alias: {
-      
+
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
@@ -132,16 +132,14 @@ module.exports = {
       {
         test: /\.(js|jsx|mjs)$/,
         enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: eslintFormatter,
-              eslintPath: require.resolve('eslint'),
-              
-            },
-            loader: require.resolve('eslint-loader'),
+        use: [{
+          options: {
+            formatter: eslintFormatter,
+            eslintPath: require.resolve('eslint'),
+
           },
-        ],
+          loader: require.resolve('eslint-loader'),
+        }, ],
         include: paths.appSrc,
       },
 
@@ -236,7 +234,13 @@ module.exports = {
                   cacheDirectory: false,
                   compact: true,
                   parserOpts: {
-                    plugins: [ "jsx" ]
+                    plugins: [
+                      "jsx",
+                      "doExpressions",
+                      "objectRestSpread",
+                      "decorators",
+                      "classProperties",
+                    ]
                   }
                 },
               },
@@ -291,7 +295,7 @@ module.exports = {
       optimization: jsxCompilationOptions.optimization
     }),
 
-    cssAssets({minify: true, inlineSourceMaps: false}),
+    cssAssets({ minify: true, inlineSourceMaps: false }),
 
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
@@ -398,4 +402,4 @@ module.exports = {
     tls: 'empty',
     child_process: 'empty',
   },
-};
+};
diff --git a/yarn.lock b/yarn.lock
