use babel

compiler/plugins/vue.plugin.js

@@ -5,10 +5,17 @@
  */
 module.exports = function vueCompilerPlugin() {
   return {
+    json: {
+      // Happens after getting json
+      post: (json) => {
+        json = fixCleanupRefAst(json);
+        return json;
+      },
+    },
     code: {
       // Happens before formatting
       pre: (codeStr) => {
-        return [fixCleanupRefIssues].reduce((acc, transform) => {
+        return [fixVueClassName].reduce((acc, transform) => {
           acc = transform(codeStr);
           return acc;
         }, codeStr);
@@ -17,9 +24,75 @@ module.exports = function vueCompilerPlugin() {
   };
 };
 
-function fixCleanupRefIssues(codeStr) {
-  return codeStr.replace(
-    /if \(typeof cleanupRef\.value === "function"\) \{\s*cleanupRef\(\);\s*\}/g,
-    'if (typeof cleanupRef.value === "function") {\n    cleanupRef.value();\n  }',
-  );
+function fixCleanupRefAst(ast) {
+  if (ast.hooks && ast.hooks.onUnMount) {
+    console.log(ast.hooks);
+
+    const onUnMountCode = ast.hooks.onUnMount.code;
+
+    let updatedCode = onUnMountCode;
+
+    if (
+      onUnMountCode &&
+      /if\s*\(\s*typeof\s+cleanupRef\.value\s*===\s*["']function["']\s*\)/.test(
+        onUnMountCode,
+      )
+    ) {
+      // Case 1: With braces
+      const { parse } = require("@babel/parser");
+      const traverse = require("@babel/traverse").default;
+      const generate = require("@babel/generator").default;
+      const t = require("@babel/types");
+
+      const ast = parse(onUnMountCode, {
+        sourceType: "module",
+        plugins: ["typescript"],
+      });
+
+      traverse(ast, {
+        IfStatement(path) {
+          const { test, consequent } = path.node;
+          if (
+            t.isBinaryExpression(test) &&
+            t.isUnaryExpression(test.left) &&
+            t.isMemberExpression(test.left.argument) &&
+            t.isIdentifier(test.left.argument.object) &&
+            test.left.argument.object.name === "cleanupRef" &&
+            t.isIdentifier(test.left.argument.property) &&
+            test.left.argument.property.name === "value" &&
+            t.isStringLiteral(test.right) &&
+            test.right.value === "function"
+          ) {
+            const newConsequent = t.blockStatement([
+              t.expressionStatement(
+                t.callExpression(
+                  t.memberExpression(
+                    t.identifier("cleanupRef"),
+                    t.identifier("value"),
+                  ),
+                  [],
+                ),
+              ),
+            ]);
+            path.node.consequent = newConsequent;
+          }
+        },
+      });
+
+      updatedCode = generate(ast).code;
+    }
+
+    ast.hooks.onUnMount.code = updatedCode;
+  }
+  return ast;
+}
+
+function fixVueClassName(codeStr) {
+  return codeStr
+    .replace(/\.className/g, ".class")
+    .replace(/\bclassName\b/g, "class")
+    .replace(
+      /:class="boxStyles\.class"/g,
+      ':class="clsx(boxStyles.class, class)"',
+    );
 }

package.json

@@ -36,10 +36,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
+    "@babel/generator": "^7.25.6",
+    "@babel/parser": "^7.25.6",
     "@babel/plugin-proposal-decorators": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
+    "@babel/traverse": "^7.25.6",
+    "@babel/types": "^7.25.6",
     "@builder.io/eslint-plugin-mitosis": "^0.0.16",
     "@builder.io/mitosis": "0.3.11",
     "@builder.io/mitosis-cli": "0.3.11",

packages/vue/stories/Header.vue

@@ -13,17 +13,13 @@
       </div>
       <div>
         <span class="welcome" v-if="user">Welcome, <b>{{ user.name }}</b>!</span>
-        <my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
-        <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
-        <my-button primary size="small" @click="$emit('createAccount')" label="Sign up" v-if="!user" />
       </div>
     </div>
   </header>
 </template>
 
 <script lang="ts" setup>
 import './header.css';
-import MyButton from './Button.vue';
 
 defineProps<{ user: { name: string } | null }>();
 

packages/vue/stories/core/Box/Box.stories.ts → packages/vue/stories/core/Box.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
-import Box from "../../../src/ui/box/box.vue";
+import Box from "../../src/ui/box/box.vue";
 
 const meta = {
   title: "Core/Box",