feat: support removing typescript types (#1826)

marko-js · Jul 26, 2022 · e285cbb · e285cbb
1 parent bfd155f
commit e285cbb
Show file tree

Hide file tree

Showing 17 changed files with 263 additions and 22 deletions.
diff --git a/.changeset/big-rockets-visit.md b/.changeset/big-rockets-visit.md
@@ -0,0 +1,5 @@
+---
+"@marko/compiler": minor
+---
+
+Support removing typescript types.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compiler/index.d.ts b/packages/compiler/index.d.ts
@@ -16,6 +16,7 @@ type Dep = {
 
 export type Config = {
   output?: "html" | "dom" | "hydrate" | "migrate" | "source";
+  stripTypes?: boolean;
   runtimeId?: string | null;
   ast?: boolean;
   code?: boolean;

diff --git a/packages/compiler/package.json b/packages/compiler/package.json
@@ -9,7 +9,9 @@
     "@babel/core": "^7.16.0",
     "@babel/generator": "^7.16.0",
     "@babel/parser": "^7.16.0",
+    "@babel/plugin-syntax-typescript": "^7.16.0",
     "@babel/plugin-transform-modules-commonjs": "^7.16.0",
+    "@babel/plugin-transform-typescript": "^7.16.0",
     "@babel/runtime": "^7.16.0",
     "@babel/traverse": "^7.16.0",
     "@babel/types": "^7.16.0",

diff --git a/packages/compiler/src/babel-plugin/index.js b/packages/compiler/src/babel-plugin/index.js
@@ -102,6 +102,7 @@ export default (api, markoOpts) => {
             undefined;
 
         metadata.marko.watchFiles = metadata.marko.watchFiles.filter(unique);
+        file.path.scope.crawl(); // Ensure all scopes are accurate for subsequent babel plugins
       } finally {
         setFS(prevFS);
       }

diff --git a/packages/compiler/src/config.js b/packages/compiler/src/config.js
@@ -15,6 +15,13 @@ if (globalThis[MARKO_CONFIG_KEY]) {
     // Override the runtimeid used when calling `marko/components.init` in the `hydrate` output.
     runtimeId: null,
 
+    /**
+     * Remove all typescript types from the output.
+     * By default, the compiler will remove types from the output if the
+     * `output` option is not `source` or `migrate`.
+     */
+    stripTypes: undefined,
+
     // Have Marko provide the final AST in the compile result.
     ast: false,
 

diff --git a/packages/compiler/src/index.js b/packages/compiler/src/index.js
@@ -1,6 +1,9 @@
 export * as types from "./babel-types";
 import path from "path";
 import * as babel from "@babel/core";
+import cjsPlugin from "@babel/plugin-transform-modules-commonjs";
+import tsSyntaxPlugin from "@babel/plugin-syntax-typescript";
+import tsPlugin from "@babel/plugin-transform-typescript";
 import corePlugin from "./babel-plugin";
 import defaultConfig from "./config";
 import * as taglib from "./taglib";
@@ -55,7 +58,25 @@ export function getRuntimeEntryFiles(output, requestedTranslator) {
 
 function loadBabelConfig(filename, config) {
   const markoConfig = { ...globalConfig, ...config, babelConfig: undefined };
-  const requiredPlugins = [[corePlugin, markoConfig]];
+
+  if (markoConfig.stripTypes === undefined) {
+    markoConfig.stripTypes =
+      markoConfig.output !== "source" && markoConfig.output !== "migrate";
+  }
+
+  const requiredPlugins = [
+    [corePlugin, markoConfig],
+    [
+      markoConfig.stripTypes ? tsPlugin : tsSyntaxPlugin,
+      {
+        isTSX: false,
+        allowNamespaces: true,
+        optimizeConstEnums: true,
+        onlyRemoveTypeImports: true,
+        disallowAmbiguousJSXLike: false
+      }
+    ]
+  ];
   const baseBabelConfig = {
     filenameRelative: filename
       ? path.relative(process.cwd(), filename)
@@ -70,10 +91,7 @@ function loadBabelConfig(filename, config) {
   };
 
   if (markoConfig.modules === "cjs") {
-    requiredPlugins.push([
-      require.resolve("@babel/plugin-transform-modules-commonjs"),
-      { loose: true }
-    ]);
+    requiredPlugins.push([cjsPlugin, { loose: true }]);
   }
 
   baseBabelConfig.plugins = requiredPlugins.concat(

diff --git a/packages/marko/bin/markoc.js b/packages/marko/bin/markoc.js
@@ -65,6 +65,15 @@ var args = require("argly")
       type: "boolean",
       description: "Only print warnings and errors"
     },
+    "--migrate -m": {
+      type: "boolean",
+      description:
+        "Run any migrations that exist for the provided template and write changes to disk"
+    },
+    "--strip-types -t": {
+      type: "boolean",
+      description: "Strip all type information from the compiled template"
+    },
     "--browser -b": {
       type: "boolean",
       description: "Browser output"
@@ -123,12 +132,15 @@ var isForBrowser = false;
 if (args.browser) {
   output = "dom";
   isForBrowser = true;
+} else if (args.migrate) {
+  output = "migrate";
 }
 
 var compileOptions = {
   output: output,
   browser: isForBrowser,
   sourceOnly: false,
+  stripTypes: args.stripTypes,
   sourceMaps: args.sourceMaps || false,
   compilerType: "markoc",
   compilerVersion: markoPkgVersion || markocPkgVersion
@@ -325,7 +337,7 @@ if (args.clean) {
     }
 
     found[path] = true;
-    var outPath = path + ".js";
+    var outPath = args.migrate ? path : path + ".js";
 
     if (!args.quiet)
       console.log(

diff --git a/packages/marko/docs/compiler.md b/packages/marko/docs/compiler.md
@@ -89,6 +89,17 @@ Default: false
 
 Set to true to have the compiler provide the `ast` in it's output.
 
+#### `stripTypes`
+
+Type: `boolean|undefined`<br>
+Default: undefined
+
+Remove all typescript types from the output when `true`.
+If the value is `undefined`, the default, the compiler will remove types if
+the `output` option is not `source` or `migrate`.
+
+For example to run migrations _and_ strip types you can set both `output: "migrate"` and `stripTypes: true`.
+
 #### `runtimeId`
 
 Type: `string`<br>