wip

compiler/base.js

@@ -43,6 +43,17 @@ function applyFixReactTypeIssues(content, filePath, target) {
   return content;
 }
 
+function stripVueJsxExtension(filePath) {
+  // .lite.tsx file is processed by Mitosis compiler
+  if (filePath.endsWith(".lite.tsx")) {
+    return filePath;
+  }
+
+  return filePath.endsWith(".tsx")
+    ? filePath.replace(/\.tsx$/, ".ts")
+    : filePath;
+}
+
 async function compile(rawOptions) {
   const { watcherEvents, ...defaultOptions } = rawOptions;
 
@@ -96,7 +107,7 @@ async function compile(rawOptions) {
 
     srcFiles.forEach((file) => {
       const relativePath = path.relative("src", file);
-      const destPath = path.join(outPath, "src", relativePath);
+      let destPath = path.join(outPath, "src", relativePath);
 
       if (doesTargetHaveAllowList && !file.startsWith("src/ui/shared")) {
         const isAllowed = allowList.some(
@@ -109,6 +120,9 @@ async function compile(rawOptions) {
       if (fs.lstatSync(file).isDirectory()) {
         fs.ensureDirSync(destPath);
       } else {
+        if (options.target === "vue") {
+          destPath = stripVueJsxExtension(destPath);
+        }
         fs.copySync(file, destPath);
       }
     });
@@ -225,12 +239,16 @@ async function compile(rawOptions) {
       parsedPath.ext === ".tsx" && parsedPath.name.includes(".lite");
     const isScaffold = parsedPath.dir.includes("scaffolds");
 
-    const targetPath = path.join(
+    let targetPath = path.join(
       outPath,
       parsedPath.dir.slice(parsedPath.dir.indexOf("src")),
       parsedPath.base,
     );
 
+    if (options.target === "vue") {
+      targetPath = stripVueJsxExtension(targetPath);
+    }
+
     if (event.type === "create" || event.type === "update") {
       // Only process non lite jsx files in this handler
       if (isLiteJSXComponent || isScaffold) return;
@@ -262,7 +280,7 @@ async function compile(rawOptions) {
 
   async function compileMitosisComponent(filepath) {
     const file = path.parse(filepath);
-    const outFile = `${outPath}/${file.dir}/${file.name.replace(".lite", "")}.${
+    let outFile = `${outPath}/${file.dir}/${file.name.replace(".lite", "")}.${
       options.extension
     }`;
 

package.json

@@ -99,6 +99,7 @@
   "dependencies": {
     "@floating-ui/core": "^1.6.4",
     "@floating-ui/dom": "^1.6.7",
+    "@types/lodash": "^4.17.7",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/recipes": "^0.5.3",

packages/vue/tsconfig.json

@@ -1,21 +1,30 @@
 {
   "compilerOptions": {
-    "declaration": true,
-    "declarationDir": "dist",
-    "moduleResolution": "node",
-    "outDir": "dist",
-    "target": "es2015",
-    "module": "es2015",
-    "lib": ["es2015", "es2016", "es2017", "dom"],
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
     "strict": true,
-    "sourceMap": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noPropertyAccessFromIndexSignature": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "customConditions": ["source"],
+    "types": ["vite/client"],
+
     "jsx": "preserve",
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "declarationMap": true,
-    "types": ["vite/client"]
+    "jsxImportSource": "vue"
   },
   "include": ["src"],
   "exclude": ["node_modules", "dist"]

packages/vue/vite.config.mts

@@ -28,6 +28,7 @@ export default defineConfig({
         });
       },
     }),
+    // @ts-ignore
     VueComplexTypes({
       tsconfigPath: path.resolve(__dirname, "./tsconfig.json"),
     }),

src/ui/add-liquidity/add-liquidity.lite.tsx

@@ -1,7 +1,6 @@
 import { useStore, onUpdate, useRef, useMetadata } from "@builder.io/mitosis";
 import BigNumber from "bignumber.js";
-import isEqual from "lodash/isEqual";
-import cloneDeep from "lodash/cloneDeep";
+import { isEqual, cloneDeep } from "lodash";
 import Stack from "../stack";
 import Text from "../text";
 import Button from "../button";
@@ -64,10 +63,10 @@ export default function AddLiquidity(props: AddLiquidityProps) {
     },
     get isInsufficient() {
       const amount1Invalid = new BigNumber(state.amount1 || 0).gt(
-        props?.poolAssets[0]?.available
+        props?.poolAssets[0]?.available,
       );
       const amount2Invalid = new BigNumber(state.amount2 || 0).gt(
-        props?.poolAssets[1]?.available
+        props?.poolAssets[1]?.available,
       );
       if (state.progress1 === 100) {
         return amount1Invalid;

src/ui/box/box.lite.tsx

@@ -1,6 +1,6 @@
 import { useMetadata, useStore } from "@builder.io/mitosis";
 import clsx from "clsx";
-import omit from "lodash/omit";
+import { omit } from "lodash";
 import { rainbowSprinkles } from "../../styles/rainbow-sprinkles.css";
 import type { BoxProps } from "./box.types";
 import { DEFAULT_VALUES } from "./box.types";

src/ui/governance/governance-vote-form.lite.tsx

@@ -1,5 +1,5 @@
 import { For, useStore, useMetadata } from "@builder.io/mitosis";
-import noop from "lodash/noop";
+import { noop } from "lodash";
 import Box from "../box";
 import Text from "../text";
 import Stack from "../stack";

src/ui/nft-detail-info/nft-detail-info.lite.tsx

@@ -5,7 +5,7 @@ import Text from "../text";
 import Icon from "../icon";
 import StarText from "../star-text";
 import type { NftDetailInfoProps } from "./nft-detail-info.type";
-import isNumber from "lodash/isNumber";
+import { isNumber } from "lodash";
 
 useMetadata({
   rsc: {

src/ui/nft-fees/nft-fees.lite.tsx

@@ -1,6 +1,5 @@
 import { useMetadata, useStore, onUpdate, For } from "@builder.io/mitosis";
-import isNil from "lodash/isNil";
-import cloneDeep from "lodash/cloneDeep";
+import { isNil, cloneDeep } from "lodash";
 import Stack from "../stack";
 import Text from "../text";
 import Tooltip from "../tooltip";

src/ui/noble/noble-tx-progress-bar.lite.tsx

@@ -7,7 +7,7 @@ import {
   onUpdate,
   onUnMount,
 } from "@builder.io/mitosis";
-import debounce from "lodash/debounce";
+import { debounce } from "lodash";
 
 import Box from "../box";
 import { NobleTxProgressBarProps } from "./noble.types";

src/ui/reveal/reveal.lite.tsx

@@ -9,7 +9,7 @@ import {
 import clsx from "clsx";
 import anime from "animejs";
 import type { AnimeInstance } from "animejs";
-import debounce from "lodash/debounce";
+import { debounce } from "lodash";
 import Stack from "../stack";
 import Box from "../box";
 import Text from "../text";

src/ui/theme-provider/theme-provider.lite.tsx

@@ -6,7 +6,7 @@ import {
   useRef,
   useMetadata,
 } from "@builder.io/mitosis";
-import isEqual from "lodash/isEqual";
+import { isEqual } from "lodash";
 import {
   mediaQueryColorScheme,
   resolveThemeMode,

src/ui/token-input/token-input.lite.tsx

@@ -7,8 +7,7 @@ import {
 } from "@builder.io/mitosis";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
-import isNil from "lodash/isNil";
-import uniqueId from "lodash/uniqueId";
+import { uniqueId, isNil } from "lodash";
 import Stack from "../stack";
 import Text from "../text";
 import Box from "../box";