intitial commit

Author: barelyhuman

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

.npmrc

@@ -0,0 +1 @@
+package-lock=false

.yarnrc

@@ -0,0 +1,2 @@
+--add.no-lockfile true
+--install.no-lockfile true

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "babel-transform-mutable-react-state",
+  "version": "0.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup source/index.ts --format cjs,esm --clean",
+    "watch": "npm run build -- --watch source",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@babel/core": "^7.16.5",
+    "@babel/generator": "^7.16.5",
+    "@babel/parser": "^7.16.6",
+    "@babel/preset-react": "^7.16.5",
+    "@babel/traverse": "^7.16.5",
+    "@babel/types": "^7.16.0",
+    "acorn": "^8.6.0",
+    "acorn-walk": "^8.2.0",
+    "escodegen": "^2.0.0",
+    "object-path": "^0.11.8"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.37",
+    "tsup": "^5.11.4",
+    "typescript": "^4.5.4"
+  }
+}

source/index.ts

@@ -0,0 +1,177 @@
+// TODO: remove when converting to plugin
+import { parse } from "@babel/parser";
+import traverse from "@babel/traverse";
+import * as t from "@babel/types";
+import generate from "@babel/generator";
+// ----
+
+// TODO: remove when converting to plugin
+const codeSnippet = `
+import * as React from "react";
+
+function Main(){
+    let $aBara = 1;
+
+    const handlePress = ()=>{
+        $aBara=2
+    }
+
+    return <>
+        <p>{$aBara}</p>
+        <button onPress={handlePress}>Press</button>
+    </>
+}
+`;
+// ----
+
+// TODO: remove when converting to plugin
+const ast = parse(codeSnippet, {
+  sourceType: "module",
+  plugins: ["jsx"],
+});
+// ----
+
+// TODO: move to a single functional scope with check for a react node
+const toMod = [];
+
+traverse(ast, {
+  Identifier({ node }) {
+    if (isReactiveIdentifier(node.name, toMod)) {
+      node.name = normalizeName(node.name);
+    }
+  },
+  VariableDeclaration({ node }) {
+    for (let i = 0; i < node.declarations.length; i += 1) {
+      const declaration = node.declarations[i];
+
+      if (!/^\$/.test(declaration.id.name)) {
+        continue;
+      }
+
+      const normName = normalizeName(declaration.id.name);
+      const setterName = getSetterName(normName);
+
+      toMod.push({
+        raw: declaration.id.name,
+        simplified: normName,
+      });
+
+      node.declarations[i] = {
+        type: "VariableDeclarator",
+        kind: "const",
+        id: {
+          type: "ArrayPattern",
+          elements: [t.identifier(normName), t.identifier(setterName)],
+        },
+
+        init: {
+          type: "CallExpression",
+          callee: {
+            type: "MemberExpression",
+            object: t.identifier("React"),
+            property: t.identifier("useState"),
+          },
+          arguments: [declaration.init],
+        },
+      };
+    }
+  },
+  ExpressionStatement({ node }) {
+    const expression = node.expression;
+
+    if (!t.isAssignmentExpression(node.expression)) {
+      return;
+    }
+
+    if (
+      expression.left &&
+      t.isIdentifier(expression.left) &&
+      !isReactiveIdentifier(expression.left.name, toMod)
+    ) {
+      return;
+    }
+
+    const normName = normalizeName(expression.left.name);
+    const setterName = getSetterName(normName);
+
+    let callArgs = [];
+
+    switch (expression.operator) {
+      case "=": {
+        callArgs = [{ ...expression.right }];
+        break;
+      }
+      case "+=": {
+        callArgs = [
+          t.binaryExpression("+", t.identifier(normName), expression.right),
+        ];
+        break;
+      }
+      case "-=": {
+        callArgs = [
+          t.binaryExpression("-", t.identifier(normName), expression.right),
+        ];
+        break;
+      }
+      case "/=": {
+        callArgs = [
+          t.binaryExpression("/", t.identifier(normName), expression.right),
+        ];
+        break;
+      }
+      case "*=": {
+        callArgs = [
+          t.binaryExpression("*", t.identifier(normName), expression.right),
+        ];
+        break;
+      }
+    }
+
+    node.expression = createCallExpression(setterName, callArgs);
+  },
+});
+
+function isReactiveIdentifier(idName, modMap) {
+  return (
+    modMap.findIndex((x) => x.raw === idName || x.simplified === idName) > -1
+  );
+}
+
+function getSetterName(normalizedName) {
+  return (
+    "set" + normalizedName.charAt(0).toUpperCase() + normalizedName.slice(1)
+  );
+}
+
+function normalizeName(n) {
+  return String(n).replace(/\$/, "");
+}
+
+function createCallExpression(calleeName, args) {
+  return {
+    type: "CallExpression",
+    callee: t.identifier(calleeName),
+    arguments: args,
+  };
+}
+
+// TODO: remove when converting to plugin
+const output = generate(ast, {}, codeSnippet);
+console.log(
+  `
+${codeSnippet}
+
+↓ ↓ ↓
+
+${output.code}
+`
+);
+// ----
+
+// TODO: convert to plugin
+export default function ({ types: _t }) {
+  // plugin contents
+  return {
+    visitor: {},
+  };
+}