diff --git a/.changeset/big-rockets-visit.md b/.changeset/big-rockets-visit.md
new file mode 100644
index 0000000000..8747eaccb1
--- /dev/null
+++ 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
index b47b8c4713..fe3981171a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -163,7 +163,6 @@
"version": "7.16.7",
"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
"integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
- "dev": true,
"dependencies": {
"@babel/types": "^7.16.7"
},
@@ -205,7 +204,6 @@
"version": "7.17.12",
"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.12.tgz",
"integrity": "sha512-sZoOeUTkFJMyhqCei2+Z+wtH/BehW8NVKQt7IRUQlRiOARuXymJYfN/FCcI8CvVbR0XVyDM6eLFOlR7YtiXnew==",
- "dev": true,
"dependencies": {
"@babel/helper-annotate-as-pure": "^7.16.7",
"@babel/helper-environment-visitor": "^7.16.7",
@@ -307,7 +305,6 @@
"version": "7.17.7",
"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz",
"integrity": "sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==",
- "dev": true,
"dependencies": {
"@babel/types": "^7.17.0"
},
@@ -348,7 +345,6 @@
"version": "7.16.7",
"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
"integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
- "dev": true,
"dependencies": {
"@babel/types": "^7.16.7"
},
@@ -357,9 +353,9 @@
}
},
"node_modules/@babel/helper-plugin-utils": {
- "version": "7.17.12",
- "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz",
- "integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==",
+ "version": "7.18.9",
+ "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz",
+ "integrity": "sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==",
"engines": {
"node": ">=6.9.0"
}
@@ -382,7 +378,6 @@
"version": "7.16.7",
"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz",
"integrity": "sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==",
- "dev": true,
"dependencies": {
"@babel/helper-environment-visitor": "^7.16.7",
"@babel/helper-member-expression-to-functions": "^7.16.7",
@@ -953,6 +948,20 @@
"@babel/core": "^7.0.0-0"
}
},
+ "node_modules/@babel/plugin-syntax-typescript": {
+ "version": "7.18.6",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.18.6.tgz",
+ "integrity": "sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==",
+ "dependencies": {
+ "@babel/helper-plugin-utils": "^7.18.6"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0-0"
+ }
+ },
"node_modules/@babel/plugin-transform-arrow-functions": {
"version": "7.17.12",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.17.12.tgz",
@@ -1448,6 +1457,22 @@
"@babel/core": "^7.0.0-0"
}
},
+ "node_modules/@babel/plugin-transform-typescript": {
+ "version": "7.16.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.0.tgz",
+ "integrity": "sha512-dNUn7RSt1dykzFTquwm7qND+dQ8u0SRhZpPFsm1GYAad+EEAirNTjqu/fnqB0zVPwjcZQd//DYWszVKoCrQuoQ==",
+ "dependencies": {
+ "@babel/helper-create-class-features-plugin": "^7.16.0",
+ "@babel/helper-plugin-utils": "^7.14.5",
+ "@babel/plugin-syntax-typescript": "^7.16.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0-0"
+ }
+ },
"node_modules/@babel/plugin-transform-unicode-escapes": {
"version": "7.16.7",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz",
@@ -9893,7 +9918,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",
@@ -9915,6 +9942,20 @@
"@marko/translator-default": "^5.21.3"
}
},
+ "packages/compiler/node_modules/@babel/plugin-syntax-typescript": {
+ "version": "7.16.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.16.0.tgz",
+ "integrity": "sha512-Xv6mEXqVdaqCBfJFyeab0fH2DnUoMsDmhamxsSi4j8nLd4Vtw213WMJr55xxqipC/YVWyPY3K0blJncPYji+dQ==",
+ "dependencies": {
+ "@babel/helper-plugin-utils": "^7.14.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0-0"
+ }
+ },
"packages/compiler/node_modules/jsesc": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
@@ -10068,7 +10109,6 @@
"version": "7.16.7",
"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
"integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
- "dev": true,
"requires": {
"@babel/types": "^7.16.7"
}
@@ -10098,7 +10138,6 @@
"version": "7.17.12",
"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.12.tgz",
"integrity": "sha512-sZoOeUTkFJMyhqCei2+Z+wtH/BehW8NVKQt7IRUQlRiOARuXymJYfN/FCcI8CvVbR0XVyDM6eLFOlR7YtiXnew==",
- "dev": true,
"requires": {
"@babel/helper-annotate-as-pure": "^7.16.7",
"@babel/helper-environment-visitor": "^7.16.7",
@@ -10173,7 +10212,6 @@
"version": "7.17.7",
"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz",
"integrity": "sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==",
- "dev": true,
"requires": {
"@babel/types": "^7.17.0"
}
@@ -10205,15 +10243,14 @@
"version": "7.16.7",
"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
"integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
- "dev": true,
"requires": {
"@babel/types": "^7.16.7"
}
},
"@babel/helper-plugin-utils": {
- "version": "7.17.12",
- "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz",
- "integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA=="
+ "version": "7.18.9",
+ "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz",
+ "integrity": "sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w=="
},
"@babel/helper-remap-async-to-generator": {
"version": "7.16.8",
@@ -10230,7 +10267,6 @@
"version": "7.16.7",
"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz",
"integrity": "sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==",
- "dev": true,
"requires": {
"@babel/helper-environment-visitor": "^7.16.7",
"@babel/helper-member-expression-to-functions": "^7.16.7",
@@ -10615,6 +10651,14 @@
"@babel/helper-plugin-utils": "^7.14.5"
}
},
+ "@babel/plugin-syntax-typescript": {
+ "version": "7.18.6",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.18.6.tgz",
+ "integrity": "sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==",
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.18.6"
+ }
+ },
"@babel/plugin-transform-arrow-functions": {
"version": "7.17.12",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.17.12.tgz",
@@ -10924,6 +10968,16 @@
"@babel/helper-plugin-utils": "^7.17.12"
}
},
+ "@babel/plugin-transform-typescript": {
+ "version": "7.16.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.0.tgz",
+ "integrity": "sha512-dNUn7RSt1dykzFTquwm7qND+dQ8u0SRhZpPFsm1GYAad+EEAirNTjqu/fnqB0zVPwjcZQd//DYWszVKoCrQuoQ==",
+ "requires": {
+ "@babel/helper-create-class-features-plugin": "^7.16.0",
+ "@babel/helper-plugin-utils": "^7.14.5",
+ "@babel/plugin-syntax-typescript": "^7.16.0"
+ }
+ },
"@babel/plugin-transform-unicode-escapes": {
"version": "7.16.7",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz",
@@ -11575,7 +11629,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",
@@ -11595,6 +11651,14 @@
"strip-json-comments": "^3.1.1"
},
"dependencies": {
+ "@babel/plugin-syntax-typescript": {
+ "version": "7.16.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.16.0.tgz",
+ "integrity": "sha512-Xv6mEXqVdaqCBfJFyeab0fH2DnUoMsDmhamxsSi4j8nLd4Vtw213WMJr55xxqipC/YVWyPY3K0blJncPYji+dQ==",
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.14.5"
+ }
+ },
"jsesc": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
diff --git a/packages/compiler/index.d.ts b/packages/compiler/index.d.ts
index ca1eb4e05c..f0ff3400a4 100644
--- 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
index c14e9f4ff6..64bdfe5938 100644
--- 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
index 46fdcfa758..a2db7c8e1f 100644
--- 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
index fcc7d877b5..f7ac251a2d 100644
--- 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
index 3a1fb5255a..9b1f25b38a 100644
--- 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
index 6a7e87b09f..72779b318a 100644
--- 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
index c0a251b6ce..7fd942fab2 100644
--- 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`
+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`
diff --git a/packages/translator-default/test/fixtures/typescript/snapshots/cjs-expected.js b/packages/translator-default/test/fixtures/typescript/snapshots/cjs-expected.js
new file mode 100644
index 0000000000..412f51fe04
--- /dev/null
+++ b/packages/translator-default/test/fixtures/typescript/snapshots/cjs-expected.js
@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _index = require("marko/src/runtime/html/index.js");
+
+var _renderer = _interopRequireDefault(require("marko/src/runtime/components/renderer.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const _marko_componentType = "packages/translator-default/test/fixtures/typescript/template.marko",
+ _marko_template = (0, _index.t)(_marko_componentType);
+
+var _default = _marko_template;
+exports.default = _default;
+const _marko_component = {};
+_marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state) {
+ const x = "hello!";
+ out.w("