feat: support declared ts class members, remove extra export in stripTypes mode

Author: DylanPiercey

.changeset/selfish-parrots-turn.md

@@ -0,0 +1,7 @@
+---
+"@marko/compiler": patch
+"marko": patch
+"@marko/translator-default": patch
+---
+
+Avoid adding `export {}` (from "@babel/plugin-transform-typescript") when outputing a template with the types stripped.

.changeset/small-donuts-sip.md

@@ -5,7 +5,7 @@
 ---
 
 Reduce script parsing restrictions added by Babel.
-This was causing Babel to error when parsing partion scripts.
+This was causing Babel to error when parsing partial scripts.
 
 ```marko
 static const x = 1;

.changeset/smooth-dingos-grow.md

@@ -0,0 +1,7 @@
+---
+"@marko/compiler": patch
+"marko": patch
+"@marko/translator-default": patch
+---
+
+Avoid outputing a `declare`'d type on a `class`.

packages/compiler/src/babel-plugin/index.js

@@ -73,7 +73,7 @@ export default (api, markoOpts) => {
       taglibConfig.fs = markoOpts.fileSystem;
       curOpts = undefined;
       try {
-        if (markoOpts.output === "source" || markoOpts.output === "migrate") {
+        if (isMarkoOutput(markoOpts.output)) {
           return file;
         }
 
@@ -114,7 +114,21 @@ export default (api, markoOpts) => {
       } finally {
         taglibConfig.fs = prevFS;
       }
-    }
+    },
+    visitor:
+      markoOpts.stripTypes && isMarkoOutput(markoOpts.output)
+        ? {
+            ExportNamedDeclaration: {
+              exit(path) {
+                // The babel typescript plugin will add an empty export declaration
+                // if there are no other imports/exports in the file.
+                // This is not needed for Marko file outputs since there is always
+                // a default export.
+                if (path.node.specifiers.length === 0) path.remove();
+              }
+            }
+          }
+        : undefined
   };
 };
 
@@ -333,3 +347,7 @@ function addPlugin(meta, arr, plugin) {
 function unique(item, i, list) {
   return list.indexOf(item) === i;
 }
+
+function isMarkoOutput(output) {
+  return output === "source" || output === "migrate";
+}

packages/compiler/src/index.js

@@ -3,7 +3,7 @@ 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 tsTransformPlugin from "@babel/plugin-transform-typescript";
 import corePlugin from "./babel-plugin";
 import defaultConfig from "./config";
 import * as taglib from "./taglib";
@@ -67,10 +67,11 @@ function loadBabelConfig(filename, config) {
   const requiredPlugins = [
     [corePlugin, markoConfig],
     [
-      markoConfig.stripTypes ? tsPlugin : tsSyntaxPlugin,
+      markoConfig.stripTypes ? tsTransformPlugin : tsSyntaxPlugin,
       {
         isTSX: false,
         allowNamespaces: true,
+        allowDeclareFields: true,
         optimizeConstEnums: true,
         onlyRemoveTypeImports: true,
         disallowAmbiguousJSXLike: false

packages/translator-default/src/class.js

@@ -25,13 +25,15 @@ export default function (path) {
         delete prop.loc;
         return prop;
       } else if (t.isClassProperty(prop) && !prop.static) {
-        classProperties.push(
-          t.assignmentExpression(
-            "=",
-            t.memberExpression(t.thisExpression(), prop.key, prop.computed),
-            prop.value || t.unaryExpression("void", t.numericLiteral(0))
-          )
-        );
+        if (!prop.declare) {
+          classProperties.push(
+            t.assignmentExpression(
+              "=",
+              t.memberExpression(t.thisExpression(), prop.key, prop.computed),
+              prop.value || t.unaryExpression("void", t.numericLiteral(0))
+            )
+          );
+        }
 
         return undefined;
       }

packages/translator-default/test/fixtures/declared-class-member/snapshots/cjs-expected.js

@@ -0,0 +1,28 @@
+"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 }; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const _marko_componentType = "packages/translator-default/test/fixtures/declared-class-member/template.marko",
+  _marko_template = (0, _index.t)(_marko_componentType);
+var _default = _marko_template;
+exports.default = _default;
+class MyClass {
+  constructor() {
+    _defineProperty(this, "y", 2);
+  }
+}
+const _marko_component = {
+  onCreate() {
+    this.y = 2
+  }
+};
+_marko_template._ = (0, _renderer.default)(function (input, out, _componentDef, _component, state, $global) {}, {
+  t: _marko_componentType,
+  d: true
+}, _marko_component);

packages/translator-default/test/fixtures/declared-class-member/snapshots/generated-expected.marko

@@ -0,0 +1,4 @@
+class {
+  declare x: string;
+  y = 2;
+}

packages/translator-default/test/fixtures/declared-class-member/snapshots/html-expected.js

@@ -0,0 +1,22 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { t as _t } from "marko/src/runtime/html/index.js";
+const _marko_componentType = "packages/translator-default/test/fixtures/declared-class-member/template.marko",
+  _marko_template = _t(_marko_componentType);
+export default _marko_template;
+class MyClass {
+  constructor() {
+    _defineProperty(this, "y", 2);
+  }
+}
+import _marko_renderer from "marko/src/runtime/components/renderer.js";
+const _marko_component = {
+  onCreate() {
+    this.y = 2
+  }
+};
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {}, {
+  t: _marko_componentType,
+  d: true
+}, _marko_component);

packages/translator-default/test/fixtures/declared-class-member/snapshots/htmlProduction-expected.js

@@ -0,0 +1,21 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { t as _t } from "marko/dist/runtime/html/index.js";
+const _marko_componentType = "xmfoovwT",
+  _marko_template = _t(_marko_componentType);
+export default _marko_template;
+class MyClass {
+  constructor() {
+    _defineProperty(this, "y", 2);
+  }
+}
+import _marko_renderer from "marko/dist/runtime/components/renderer.js";
+const _marko_component = {
+  onCreate() {
+    this.y = 2
+  }
+};
+_marko_template._ = _marko_renderer(function (input, out, _componentDef, _component, state, $global) {}, {
+  t: _marko_componentType
+}, _marko_component);