fix react build

hyperweb-io · Sep 14, 2024 · 7badaff · 7badaff
1 parent e427f83
commit 7badaff
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 117 deletions.
diff --git a/packages/compiler/package.json b/packages/compiler/package.json
@@ -45,7 +45,8 @@
     "gluegun": "^5.1.6",
     "listr2": "^8.2.4",
     "lodash": "^4.17.21",
-    "ora": "^5.4.1"
+    "ora": "^5.4.1",
+    "@interchain-ui/vue-codemod": "link:../vue-codemod"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",

diff --git a/packages/compiler/src/base.ts b/packages/compiler/src/base.ts
@@ -22,6 +22,14 @@ const { scaffoldConfig, compileAllowList } = scaffolds;
 
 type ValidTarget = "react" | "vue";
 
+export type CustomReplaceProps = {
+  name: string;
+  pascalName: string;
+  outFile: string;
+  outPath: string;
+  isFirstCompilation: boolean;
+};
+
 interface CompileOptions {
   elements: string | string[];
   dest: string;
@@ -30,8 +38,8 @@ interface CompileOptions {
   extension: string;
   state: string;
   styles: string;
-  customReplace: (outFile: string, isFirstCompilation: boolean) => void | null;
   isDev?: boolean;
+  customReplace?: (props: CustomReplaceProps) => void;
 }
 
 const DEFAULT_OPTIONS: CompileOptions = {
@@ -42,7 +50,6 @@ const DEFAULT_OPTIONS: CompileOptions = {
   extension: "",
   state: "",
   styles: "",
-  customReplace: (_outFile: string, _isFirstCompilation: boolean) => null,
 };
 
 const optionDefinitions = [
@@ -203,7 +210,7 @@ export async function compile(rawOptions: CompileParams): Promise<void> {
         .map((fileName: string) => {
           const file = path.parse(fileName);
           const name = file.name.replace(".lite", "");
-          return `export { default as ${pascalName(
+          return `export { default as ${toPascalName(
             name,
           )} } from './${file.dir.replace("src/", "")}';`;
         })
@@ -218,13 +225,13 @@ export async function compile(rawOptions: CompileParams): Promise<void> {
         /(\/\/ Init Components)(.+?)(\/\/ End Components)/s,
         `$1\n${fileExports}\n$3`,
       )
-      .replace(/Platform.Default/g, `Platform.${pascalName(options.target)}`);
+      .replace(/Platform.Default/g, `Platform.${toPascalName(options.target)}`);
 
     // Adding scaffolds imports to index.ts
     if (scaffoldsExist) {
       const scaffoldNames = Object.keys(scaffoldConfig).map((name) => ({
         name,
-        Comp: pascalName(name),
+        Comp: toPascalName(name),
       }));
 
       const scaffoldImports = scaffoldNames
@@ -303,21 +310,6 @@ export async function compile(rawOptions: CompileParams): Promise<void> {
     const to =
       options.target === "webcomponents" ? "webcomponent" : options.target;
 
-    // console.log("compileMitosisComponent()", {
-    //   parameters: {
-    //     options: {
-    //       from: "mitosis",
-    //       to: to,
-    //       out: outFile,
-    //       state: options.state,
-    //     },
-    //     array: [filepath],
-    //   },
-    //   strings: Object.keys(strings),
-    //   filesystem: filesystem,
-    //   print: print,
-    // });
-
     await compileCommand.run({
       parameters: {
         options: {
@@ -328,7 +320,7 @@ export async function compile(rawOptions: CompileParams): Promise<void> {
           state: options.state,
           styles: options.styles,
           outFile: outPath,
-          config: path.resolve(__dirname, "./mitosis.config.js"),
+          config: "./mitosis.config.js",
         },
         array: [filepath],
       },
@@ -425,8 +417,18 @@ export async function compile(rawOptions: CompileParams): Promise<void> {
 
     // Compile using Mitosis CLI
     const { outFile } = await compileMitosisComponent(fileName);
+
     replacePropertiesFromCompiledFiles(outFile);
-    options.customReplace(outFile, isFirstCompilation);
+
+    if (typeof options.customReplace === "function") {
+      options.customReplace({
+        outFile,
+        isFirstCompilation,
+        name,
+        pascalName: toPascalName(name),
+        outPath,
+      });
+    }
 
     spinner.text = `[Done] ${fileName}`;
   }
@@ -447,7 +449,7 @@ export async function compile(rawOptions: CompileParams): Promise<void> {
   spinner.stop();
 }
 
-function pascalName(str: string): string {
+function toPascalName(str: string): string {
   return startCase(str).replace(/\s/g, "");
 }
 

diff --git a/packages/compiler/src/frameworks/react.compile.ts b/packages/compiler/src/frameworks/react.compile.ts
@@ -3,6 +3,7 @@ import { Event } from "@parcel/watcher";
 import * as compiler from "../base";
 import { fixReactTypeIssues } from "../utils/react.utils";
 import log from "../log";
+import type { CustomReplaceProps } from "../base";
 
 const DEFAULT_OPTIONS = {
   target: "react" as const,
@@ -11,14 +12,6 @@ const DEFAULT_OPTIONS = {
   styles: "style-tag" as const,
 };
 
-interface CustomReplaceProps {
-  name: string;
-  pascalName: string;
-  outFile: string;
-  _outPath: string;
-  _isFirstCompilation: boolean;
-}
-
 function customReplaceReact(props: CustomReplaceProps): void {
   const { name, pascalName, outFile } = props;
   log.info(`\nCompiling ${name} [${pascalName}] for React...`);

diff --git a/packages/compiler/src/frameworks/vue.compile.ts b/packages/compiler/src/frameworks/vue.compile.ts
@@ -2,6 +2,7 @@ import fs from "fs-extra";
 import { globSync } from "glob";
 import * as compiler from "../base";
 import log from "../log";
+import type { CustomReplaceProps } from "../base";
 
 const DEFAULT_OPTIONS = {
   target: "vue",
@@ -11,14 +12,6 @@ const DEFAULT_OPTIONS = {
   styles: "",
 };
 
-interface CustomReplaceProps {
-  name: string;
-  pascalName: string;
-  outFile: string;
-  outPath: string;
-  isFirstCompilation: boolean;
-}
-
 function customReplaceVue(props: CustomReplaceProps): void {
   const { name, pascalName, outFile, outPath, isFirstCompilation } = props;
 

diff --git a/packages/compiler/src/mitosis.config.js b/packages/compiler/src/mitosis.config.js
@@ -16,7 +16,6 @@ module.exports = {
     vue: {
       typescript: true,
       defineComponent: true,
-      namePrefix: "interchain",
       api: "composition",
       plugins: [vuePlugin],
     },

diff --git a/packages/compiler/src/plugins/vue.plugin.js b/packages/compiler/src/plugins/vue.plugin.js
@@ -3,7 +3,7 @@ const { parse } = require("@babel/parser");
 const traverse = require("@babel/traverse").default;
 const generate = require("@babel/generator").default;
 const t = require("@babel/types");
-const { vueCodemod } = require("../../packages/vue-codemod");
+const vueCodemod = require("@interchain-ui/vue-codemod");
 
 /**
  * @type {import('@builder.io/mitosis').Plugin}
@@ -20,10 +20,13 @@ module.exports = function vueCompilerPlugin() {
     code: {
       // Happens before formatting
       pre: (codeStr) => {
-        return [fixVueClassName, vueCodemod].reduce((acc, transform) => {
-          acc = transform(acc);
-          return acc;
-        }, codeStr);
+        return [fixVueClassName, vueCodemod.default].reduce(
+          (acc, transform) => {
+            acc = transform(acc);
+            return acc;
+          },
+          codeStr,
+        );
       },
     },
   };