feat: allow @nativeclass transformations within solid userland code (#13)

Author: NathanWalker

babel-plugin-native-class.js

@@ -0,0 +1,70 @@
+const ts = require('typescript');
+const parser = require('@babel/parser');
+
+module.exports = function () {
+  return {
+    name: 'babel-plugin-native-class',
+    visitor: {
+      Program(path) {
+        path.traverse({
+          ClassDeclaration(classPath) {
+            const { node } = classPath;
+
+            if (hasNativeClassDecorator(node)) {
+              const tsSource = classPath.hub.file.code;
+              const transpiledCode = transpileClassToES5(node, tsSource);
+
+              if (transpiledCode) {
+                const babelAst = parser.parse(transpiledCode, {
+                  sourceType: 'module',
+                  plugins: ['typescript', 'decorators-legacy'],
+                }).program.body;
+
+                classPath.replaceWithMultiple(babelAst);
+              }
+            }
+          },
+        });
+      },
+    },
+  };
+};
+
+function hasNativeClassDecorator(node) {
+  return (
+    node.decorators &&
+    node.decorators.some(decorator => {
+      const expression = decorator.expression;
+      return expression.name === 'NativeClass' || (expression.callee && expression.callee.name === 'NativeClass');
+    })
+  );
+}
+
+function removeNativeClassDecorator(code, className) {
+  const decoratorRegex = new RegExp(`@NativeClass(\\((.|\\n)*?\\))?\\s*class\\s+${className}`, 'gm');
+  return code.replace(decoratorRegex, `class ${className}`);
+}
+
+function transpileClassToES5(node, sourceCode) {
+  const className = node.id.name;
+  const classStart = node.start;
+  const classEnd = node.end;
+
+  const classCode = sourceCode.slice(classStart, classEnd);
+  const cleanedCode = removeNativeClassDecorator(classCode, className);
+
+  const transpiled = ts.transpileModule(cleanedCode, {
+    compilerOptions: {
+      noEmitHelpers: true,
+      module: ts.ModuleKind.ESNext,
+      target: ts.ScriptTarget.ES5,
+      experimentalDecorators: true,
+      emitDecoratorMetadata: true,
+    },
+  });
+
+  return transpiled.outputText.replace(
+    /(Object\.defineProperty\(.*?{.*?)(enumerable:\s*false)(.*?}\))/gs,
+    '$1enumerable: true$3'
+  );
+}

nativescript.webpack.js

@@ -57,6 +57,11 @@ const solid = (config, env) => {
         ],
         "@babel/typescript"
       ],
+      plugins: [
+        path.resolve(__dirname, 'babel-plugin-native-class.js'),
+        ['@babel/plugin-proposal-decorators', { legacy: true }],
+        ['@babel/plugin-proposal-class-properties', { loose: true }]
+      ],
       env: {
         development: {
           plugins: [['solid-refresh/babel', { bundler: 'webpack5' }]],

package.json

@@ -19,6 +19,10 @@
   "repository": "nativescript-community/solid-js",
   "bugs": "https://github.com/nativescript-community/solid-js/issues",
   "homepage": "https://github.com/nativescript-community/solid-js",
+  "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.25.9"
+  },
   "peerDependencies": {
     "@babel/preset-typescript": "7.23.3",
     "babel-preset-solid": "^1.8.9",