fix svelte on: for svelte:element (#1329)

* f * rl * fix * rl * rl * fix react check * fix * f * rl
BuilderIO · Jan 12, 2024 · e862056 · e862056 · vercel · Jan 12, 2024
1 parent f84e2c7
commit e862056
Show file tree

Hide file tree

Showing 14 changed files with 75 additions and 88 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": true
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit"
   },
   "typescript.format.enable": true,
   "editor.formatOnSave": true,

diff --git a/.yarn/versions/db85d6c2.yml b/.yarn/versions/db85d6c2.yml
@@ -0,0 +1,3 @@
+undecided:
+  - "@builder.io/mitosis-repo"
+  - "@builder.io/mitosis"
diff --git a/e2e/e2e-app/tests/main.spec.ts b/e2e/e2e-app/tests/main.spec.ts
@@ -49,9 +49,9 @@ test.describe('e2e', () => {
     });
 
     test('script tag', async ({ page, packageName }) => {
-      if (['e2e-solid', 'e2e-react'].includes(packageName)) {
-        test.skip();
-      }
+      test.skip(
+        packageName === 'e2e-solid' || packageName === 'e2e-react' || packageName === 'e2e-svelte',
+      );
 
       const consoleMsg: string[] = [];
       page.on('console', (msg) => consoleMsg.push(msg.text()));

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/mitosis-cli",
-  "version": "0.0.96",
+  "version": "0.0.100",
   "description": "mitosis CLI",
   "types": "build/types/types.d.ts",
   "bin": {
@@ -47,6 +47,7 @@
     "micromatch": "^4.0.4",
     "parse5": "^3.0.3",
     "prettier": "^2.6.1",
+    "rimraf": "^5.0.5",
     "ts-morph": "^19.0.0",
     "vue-template-es2015-compiler": "^1.9.1",
     "vue-template-validator": "^1.1.5"

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.0.137",
+  "version": "0.0.141",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {

diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -502,10 +502,10 @@ function Column(props) {
   }
 
   function getColumnCssWidth(index) {
-    const columns = state.getColumns();
-    const gutterSize = state.getGutterSize();
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
     const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`;
+    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
   }
 
   return (
@@ -581,7 +581,7 @@ function ContentSlotJsxCode(props) {
   const [showContent, setShowContent] = useState(() => false);
 
   function cls() {
-    return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\";
+    return props.slotContent && props.children ? \`\${name}-content\` : \\"\\";
   }
 
   function show() {
@@ -1459,9 +1459,7 @@ function SmileReviews(props) {
           <div className=\\"review\\" key={review.id}>
             <img className=\\"img\\" src={review.avatar} />
 
-            <div
-              className={state.showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}
-            >
+            <div className={showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
               <div>
                 N:
                 {index}
@@ -1542,7 +1540,7 @@ function Text(props) {
         __html:
           props.text ||
           props.content ||
-          state.name ||
+          name ||
           '<p class=\\"text-lg\\">my name</p>',
       }}
     />
@@ -3890,10 +3888,10 @@ function Column(props: ColumnProps) {
   }
 
   function getColumnCssWidth(index: number) {
-    const columns = state.getColumns();
-    const gutterSize = state.getGutterSize();
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
     const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`;
+    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
   }
 
   return (
@@ -3980,7 +3978,7 @@ function ContentSlotJsxCode(props: Props) {
   const [showContent, setShowContent] = useState(() => false);
 
   function cls() {
-    return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\";
+    return props.slotContent && props.children ? \`\${name}-content\` : \\"\\";
   }
 
   function show() {
@@ -4992,9 +4990,7 @@ function SmileReviews(props: SmileReviewsProps) {
           <div className=\\"review\\" key={review.id}>
             <img className=\\"img\\" src={review.avatar} />
 
-            <div
-              className={state.showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}
-            >
+            <div className={showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
               <div>
                 N:
                 {index}
@@ -5089,7 +5085,7 @@ function Text(props: TextProps) {
         __html:
           props.text ||
           props.content ||
-          state.name ||
+          name ||
           '<p class=\\"text-lg\\">my name</p>',
       }}
     />
@@ -7169,7 +7165,7 @@ function MyComponent(props) {
   return (
     <input
       className={\`form-input \${props.disabled ? \\"disabled\\" : \\"\\"} \${
-        state.focus ? \\"focus\\" : \\"\\"
+        focus ? \\"focus\\" : \\"\\"
       }\`}
     />
   );
@@ -7579,7 +7575,7 @@ function MyComponent(props: any) {
   return (
     <input
       className={\`form-input \${props.disabled ? \\"disabled\\" : \\"\\"} \${
-        state.focus ? \\"focus\\" : \\"\\"
+        focus ? \\"focus\\" : \\"\\"
       }\`}
     />
   );

diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -607,10 +607,10 @@ function Column(props) {
   }
 
   function getColumnCssWidth(index) {
-    const columns = state.getColumns();
-    const gutterSize = state.getGutterSize();
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
     const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`;
+    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
   }
 
   return (
@@ -682,7 +682,7 @@ function ContentSlotJsxCode(props) {
   const [showContent, setShowContent] = useState(() => false);
 
   function cls() {
-    return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\";
+    return props.slotContent && props.children ? \`\${name}-content\` : \\"\\";
   }
 
   function show() {
@@ -1716,7 +1716,7 @@ function Text(props) {
         __html:
           props.text ||
           props.content ||
-          state.name ||
+          name ||
           '<p class=\\"text-lg\\">my name</p>',
       }}
     />
@@ -4568,10 +4568,10 @@ function Column(props: ColumnProps) {
   }
 
   function getColumnCssWidth(index: number) {
-    const columns = state.getColumns();
-    const gutterSize = state.getGutterSize();
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
     const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`;
+    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
   }
 
   return (
@@ -4654,7 +4654,7 @@ function ContentSlotJsxCode(props: Props) {
   const [showContent, setShowContent] = useState(() => false);
 
   function cls() {
-    return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\";
+    return props.slotContent && props.children ? \`\${name}-content\` : \\"\\";
   }
 
   function show() {
@@ -5836,7 +5836,7 @@ function Text(props: TextProps) {
         __html:
           props.text ||
           props.content ||
-          state.name ||
+          name ||
           '<p class=\\"text-lg\\">my name</p>',
       }}
     />

diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -498,10 +498,10 @@ function Column(props) {
   }
 
   function getColumnCssWidth(index) {
-    const columns = state.getColumns();
-    const gutterSize = state.getGutterSize();
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
     const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`;
+    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
   }
 
   return (
@@ -576,7 +576,7 @@ function ContentSlotJsxCode(props) {
   const [showContent, setShowContent] = useState(() => false);
 
   function cls() {
-    return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\";
+    return props.slotContent && props.children ? \`\${name}-content\` : \\"\\";
   }
 
   function show() {
@@ -1445,9 +1445,7 @@ function SmileReviews(props) {
           <div className=\\"review\\" key={review.id}>
             <img className=\\"img\\" src={review.avatar} />
 
-            <div
-              className={state.showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}
-            >
+            <div className={showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
               <div>
                 N:
                 {index}
@@ -1527,7 +1525,7 @@ function Text(props) {
         __html:
           props.text ||
           props.content ||
-          state.name ||
+          name ||
           '<p class=\\"text-lg\\">my name</p>',
       }}
     />
@@ -3839,10 +3837,10 @@ function Column(props: ColumnProps) {
   }
 
   function getColumnCssWidth(index: number) {
-    const columns = state.getColumns();
-    const gutterSize = state.getGutterSize();
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
     const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`;
+    return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
   }
 
   return (
@@ -3928,7 +3926,7 @@ function ContentSlotJsxCode(props: Props) {
   const [showContent, setShowContent] = useState(() => false);
 
   function cls() {
-    return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\";
+    return props.slotContent && props.children ? \`\${name}-content\` : \\"\\";
   }
 
   function show() {
@@ -4931,9 +4929,7 @@ function SmileReviews(props: SmileReviewsProps) {
           <div className=\\"review\\" key={review.id}>
             <img className=\\"img\\" src={review.avatar} />
 
-            <div
-              className={state.showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}
-            >
+            <div className={showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
               <div>
                 N:
                 {index}
@@ -5027,7 +5023,7 @@ function Text(props: TextProps) {
         __html:
           props.text ||
           props.content ||
-          state.name ||
+          name ||
           '<p class=\\"text-lg\\">my name</p>',
       }}
     />
@@ -7128,9 +7124,7 @@ function SmileReviews(props) {
           <div className=\\"review-4d59d085\\" key={review.id}>
             <img className=\\"img-4d59d085\\" src={review.avatar} />
 
-            <div
-              className={state.showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}
-            >
+            <div className={showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
               <div>
                 N:
                 {index}
@@ -7289,7 +7283,7 @@ function MyComponent(props) {
   return (
     <input
       className={\`form-input \${props.disabled ? \\"disabled\\" : \\"\\"} \${
-        state.focus ? \\"focus\\" : \\"\\"
+        focus ? \\"focus\\" : \\"\\"
       }\`}
     />
   );
@@ -7697,7 +7691,7 @@ function MyComponent(props: any) {
   return (
     <input
       className={\`form-input \${props.disabled ? \\"disabled\\" : \\"\\"} \${
-        state.focus ? \\"focus\\" : \\"\\"
+        focus ? \\"focus\\" : \\"\\"
       }\`}
     />
   );