fix: vue compiler not compiling single components (#75)

hyperweb-io · Aug 8, 2023 · 3888f9a · 3888f9a
1 parent 8008894
commit 3888f9a
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 159 deletions.
diff --git a/compiler/base.js b/compiler/base.js
@@ -63,7 +63,11 @@ async function compile(defaultOptions) {
     : glob.sync(options.elements);
   const outPath = `${options.dest}/${options.target}`;
 
-  function copyNonMitosisLiteFiles(scaffoldsExist = false) {
+  function copyNonMitosisLiteFiles(isFirstRun = false, scaffoldsExist = false) {
+    if (!isFirstRun) {
+      return;
+    }
+
     // Move src to all the package folder
     fs.copySync("src", `${outPath}/src`);
 
@@ -136,13 +140,18 @@ async function compile(defaultOptions) {
       options.extension
     }`;
 
+    let to =
+      options.target === "webcomponents" ? "webcomponent" : options.target;
+    to = to === "vue" ? "vue3" : to;
+
     await compileCommand.run({
       parameters: {
         options: {
           from: "mitosis",
-          to: options.target,
+          to: to,
           out: outFile,
           force: true,
+          api: options.api,
           state: options.state,
           styles: options.styles,
           config: "./compiler/mitosis.config.js",
@@ -212,7 +221,8 @@ async function compile(defaultOptions) {
     // Copying files
     const { inDir, outDir } = getScaffoldsDirs(outPath);
     const scaffoldsExist = fs.existsSync(inDir);
-    copyNonMitosisLiteFiles(scaffoldsExist);
+
+    copyNonMitosisLiteFiles(isFirstCompilation, scaffoldsExist);
 
     if (scaffoldsExist) {
       fs.copySync(inDir, outDir);
@@ -241,7 +251,6 @@ async function compile(defaultOptions) {
 
   if (!cache.isPopulated) {
     await cache.build(files);
-    // console.log(`[cache build]`);
   }
 
   if (options.target === "react") {

diff --git a/compiler/frameworks/vue.compile.js b/compiler/frameworks/vue.compile.js
@@ -11,124 +11,6 @@ const DEFAULT_OPTIONS = {
 };
 
 (async () => {
-  function getAllTheInterfacesFromPropsInComponent(result, pascalName) {
-    const regex1 = /interface\s+([^{]+){([^}]+)}/g;
-    const interfacesWithProps = {};
-    let match;
-
-    while ((match = regex1.exec(result)) !== null) {
-      const [interfaceDef] = match;
-      const interfaceName = interfaceDef
-        .split("{")[0]
-        .replace(/\n\s*/g, "")
-        .replace(/\{/g, "")
-        .replace(/interface/g, "")
-        .replace(/(extends)/g, " $1")
-        .replace(/(\r\n|\n|\r)/g, " ")
-        .trim();
-
-      if (interfaceName.includes("Props")) {
-        interfacesWithProps[interfaceName] = match[2].trim();
-      }
-    }
-
-    return interfacesWithProps;
-  }
-
-  function searchComponentPropsInterface(
-    result,
-    interfacesWithProps,
-    pascalName
-  ) {
-    const res = Object.entries(interfacesWithProps).find(([interfaceName]) =>
-      interfaceName.includes(pascalName)
-    );
-
-    if (!res) return result;
-
-    const [currentInterfacePropsName, currentInterfacePropsContent] = res;
-
-    const extensions = currentInterfacePropsName
-      .replace(/.*extends/, "")
-      .trim()
-      .split(",")
-      .map((e) => e.trim());
-
-    const interfacesContent = [
-      "// Original props \n",
-      currentInterfacePropsContent,
-    ];
-
-    extensions.forEach((extension) => {
-      let extensionName = extension;
-      let replacers = null;
-
-      // If the extension has generics
-      if (extension.includes("<")) {
-        extensionName = extension.replace(/<.*>/g, "<T>");
-        const generics = extension.match(/<.*>/g);
-        replacers = generics && generics[0].replace(/</g, "").replace(/>/g, "");
-      }
-
-      let content = interfacesWithProps[extensionName];
-
-      if (replacers) {
-        content = content.replace(/T/g, replacers);
-      }
-
-      interfacesContent.push(`// Props from ${extensionName}\n`);
-      interfacesContent.push(content);
-    });
-
-    return interfacesContent;
-  }
-
-  function addNewPropsInterfacesForComponent(
-    result,
-    interfacesContent,
-    pascalName
-  ) {
-    // Create the new props interface
-    const newPropsInterface = ` ${pascalName}Props {${interfacesContent.concat(
-      "\n"
-    )}}`;
-
-    // Deprecate the old props interface
-    return (
-      result
-        // Deprecate the old props interface
-        .replace(
-          `export interface ${pascalName}Props`,
-          `interface __${pascalName}Props__`
-        )
-        // Add the new props interface
-        .replace(
-          `interface __${pascalName}Props__`,
-          `// This interface is auto generated to join the interfaces \nexport interface ${newPropsInterface}\n\ninterface __${pascalName}Props__`
-        )
-    );
-  }
-
-  function mergeAllPropsInterfaceIntoNewInterface(result, pascalName) {
-    const interfacesWithProps = getAllTheInterfacesFromPropsInComponent(
-      result,
-      pascalName
-    );
-    const interfacesContent = searchComponentPropsInterface(
-      result,
-      interfacesWithProps,
-      pascalName
-    );
-
-    if (!interfacesContent) return result;
-
-    return addNewPropsInterfacesForComponent(
-      result,
-      interfacesContent,
-      pascalName
-    );
-  }
-
   function customReplace(props) {
     const { name, pascalName, outFile, outPath, isFirstCompilation } = props;
 
@@ -152,9 +34,14 @@ const DEFAULT_OPTIONS = {
 
       // Add .vue extension to all the indexes in src folder
       glob.sync(`${outPath}/src/ui/**/index.ts`).map((src) => {
-        const data = fs.readFileSync(src, "utf8");
-
-        fs.writeFileSync(src, data.replace(`";`, `.vue";`), "utf8");
+        const data = fs
+          .readFileSync(src, "utf8")
+          // add vue to index
+          .replace(/(export { default } from)(.*)(';)/g, "$1$2.vue$3")
+          // but remove from hooks
+          .replace(/\.hook\.vue/g, ".hook");
+
+        fs.writeFileSync(src, data, "utf8");
       });
     }
 
@@ -234,8 +121,6 @@ const DEFAULT_OPTIONS = {
       // TODO: Temporal meanwhile we find another why but this is stable
       .replace(/getData\(\);/g, "getData.bind(this)();");
 
-    result = mergeAllPropsInterfaceIntoNewInterface(result, pascalName);
-
     fs.writeFileSync(outFile, result, "utf8");
   }
 

diff --git a/compiler/mitosis.config.js b/compiler/mitosis.config.js
@@ -11,6 +11,7 @@ module.exports = {
     },
     vue: {
       typescript: true,
+      api: "options",
     },
   },
 };
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
     "@builder.io/eslint-plugin-mitosis": "^0.0.14",
-    "@builder.io/mitosis-cli": "0.0.67",
+    "@builder.io/mitosis-cli": "0.0.75",
     "@builder.io/qwik": "^0.100.0",
     "@custom-elements-manifest/analyzer": "^0.8.0",
     "@fastify/deepmerge": "^1.3.0",

diff --git a/src/ui/clipboard-copy-text/clipboard-copy-text.lite.tsx b/src/ui/clipboard-copy-text/clipboard-copy-text.lite.tsx
@@ -1,4 +1,10 @@
-import { useStore, onMount, onUnMount, useRef } from "@builder.io/mitosis";
+import {
+  useStore,
+  onMount,
+  onUnMount,
+  Show,
+  useRef,
+} from "@builder.io/mitosis";
 import clx from "clsx";
 import copy from "copy-to-clipboard";
 import Icon from "../icon";
@@ -18,6 +24,8 @@ export default function ClipboardCopyText(props: ClipboardCopyTextProps) {
     idle: boolean;
     theme: ThemeVariant;
     transform: (text: string) => string;
+    handleOnClick: () => void;
+    getTruncateClass: () => string;
   }>({
     idle: true,
     theme: "light",
@@ -37,6 +45,21 @@ export default function ClipboardCopyText(props: ClipboardCopyTextProps) {
 
       return text;
     },
+    handleOnClick: () => {
+      const success = copy(props.text);
+
+      if (success) {
+        props.onCopied?.();
+        state.idle = false;
+
+        setTimeout(() => {
+          state.idle = true;
+        }, 1000);
+      }
+    },
+    getTruncateClass: () => {
+      return clx(textStyle, props.truncate === "end" && truncateEndStyle);
+    },
   });
 
   let cleanupRef = useRef<() => void>(null);
@@ -56,30 +79,22 @@ export default function ClipboardCopyText(props: ClipboardCopyTextProps) {
   return (
     <div
       className={clx(containerStyle[state.theme], props.className)}
-      onClick={() => {
-        const success = copy(props.text);
-
-        if (success) {
-          props.onCopied?.();
-          state.idle = false;
+      onClick={() => state.handleOnClick()}
+    >
+      <p className={state.getTruncateClass()}>{state.transform(props.text)}</p>
 
-          setTimeout(() => {
-            state.idle = true;
-          }, 1000);
+      <Show
+        when={state.idle}
+        else={
+          <Icon
+            name={"checkboxCircle"}
+            size="$md"
+            className={iconStyle.copied[state.theme]}
+          />
         }
-      }}
-    >
-      <p
-        className={clx(textStyle, props.truncate === "end" && truncateEndStyle)}
       >
-        {state.transform(props.text)}
-      </p>
-
-      <Icon
-        name={state.idle ? "copy" : "checkboxCircle"}
-        size="$md"
-        className={state.idle ? iconStyle.idle : iconStyle.copied[state.theme]}
-      />
+        <Icon name={"copy"} size="$md" className={iconStyle.idle} />
+      </Show>
     </div>
   );
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1208,13 +1208,13 @@
     "@babel/types" "7.12.6"
     ts-pattern "^3.3.5"
 
-"@builder.io/[email protected].67":
-  version "0.0.67"
-  resolved "https://registry.yarnpkg.com/@builder.io/mitosis-cli/-/mitosis-cli-0.0.67.tgz#cd321ba446aa4a12c4d29ecb5771562d4864be27"
-  integrity sha512-a29Z4Z67R+GhlYlTaKfXVGf/pc/wZOqd27OFXD4Jtr+BCNNfUAz80j7XjC2XSnDp8noqEB6Y7a5ALVATwR2xFQ==
+"@builder.io/[email protected].75":
+  version "0.0.75"
+  resolved "https://registry.yarnpkg.com/@builder.io/mitosis-cli/-/mitosis-cli-0.0.75.tgz#3f211fcc94da194c560ef1b367523bb4e010595e"
+  integrity sha512-QzcWKPmfWO2tsCKZIkgvT07yYp0CM6p7dQUzLyP4Pa8aG44Tl/s0uOXeXhatZKAzxMlhoKvkm/dBvLK64IvtsQ==
   dependencies:
     "@babel/core" "^7.17.8"
-    "@builder.io/mitosis" "0.0.109"
+    "@builder.io/mitosis" "0.0.117"
     "@vue/compiler-sfc" "^3.1.5"
     babel-preset-solid "^1.3.13"
     chalk "^4.1.0"
@@ -1232,13 +1232,14 @@
     micromatch "^4.0.4"
     parse5 "^3.0.3"
     prettier "^2.6.1"
+    ts-morph "^19.0.0"
     vue-template-es2015-compiler "^1.9.1"
     vue-template-validator "^1.1.5"
 
-"@builder.io/[email protected].109":
-  version "0.0.109"
-  resolved "https://registry.yarnpkg.com/@builder.io/mitosis/-/mitosis-0.0.109.tgz#c7e3a77292865af64a4d8bd6ef15fd551f0abb63"
-  integrity sha512-t64SsP2HL1pY/izpqc4HNvY77FWdTpVvF/DUnTgucSBcMalAaLCdrW1es/ZqqmsTziNkq2zZZtUgXXSRkrl46g==
+"@builder.io/[email protected].117":
+  version "0.0.117"
+  resolved "https://registry.yarnpkg.com/@builder.io/mitosis/-/mitosis-0.0.117.tgz#510b9a933ee36f40c6a13650d45d55b8a9ae8bfb"
+  integrity sha512-Raizwj1oBVNfHFrAEsH4H/pkg+MxxkxacYrkJ+TDHMTiKnPwy/IaSVa9o8Okg9TDmwxFTokJMKMnKV0gmo4sgw==
   dependencies:
     "@angular/compiler" "^11.2.11"
     "@babel/core" "7.14.5"
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ module.exports = { @@
         },
         vue: {
           typescript: true,
+          api: "options",
         },
       },
     };