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\\" : \\"\\"
  }\`}
  />
  );