+ Hello
+
+ !
+
+
+"
+`;
+
exports[`Alpine.js > jsx > Typescript Test > typeExternalStore 1`] = `
"
Hello
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index fd29d4e5e0..b5a14b03dd 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -7140,6 +7140,38 @@ export class TypeDependencyModule {}
"
`;
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"type-external-props\\",
+ template: \`
+
Hello {{name}} !
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class TypeExternalProps {
+ @Input() name;
+}
+
+@NgModule({
+ declarations: [TypeExternalProps],
+ imports: [CommonModule],
+ exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > typeExternalStore 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
@@ -15133,6 +15165,40 @@ export class TypeDependencyModule {}
"
`;
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+ selector: \\"type-external-props\\",
+ template: \`
+ Hello {{name}} !
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class TypeExternalProps {
+ @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+ declarations: [TypeExternalProps],
+ imports: [CommonModule],
+ exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > typeExternalStore 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
index 678825f373..35aedeeab1 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -7259,6 +7259,39 @@ export class TypeDependencyModule {}
"
`;
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"type-external-props\\",
+ template: \`
+ Hello {{name}} !
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class TypeExternalProps {
+ @Input() name;
+}
+
+@NgModule({
+ declarations: [TypeExternalProps],
+ imports: [CommonModule],
+ exports: [TypeExternalProps],
+ bootstrap: [SomeOtherComponent],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
exports[`Angular with Import Mapper Tests > jsx > Javascript Test > typeExternalStore 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
@@ -15382,6 +15415,41 @@ export class TypeDependencyModule {}
"
`;
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+ selector: \\"type-external-props\\",
+ template: \`
+ Hello {{name}} !
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class TypeExternalProps {
+ @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+ declarations: [TypeExternalProps],
+ imports: [CommonModule],
+ exports: [TypeExternalProps],
+ bootstrap: [SomeOtherComponent],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
exports[`Angular with Import Mapper Tests > jsx > Typescript Test > typeExternalStore 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index df0e55ee93..d2343e27fc 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -7357,6 +7357,38 @@ export class TypeDependencyModule {}
"
`;
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"type-external-props\\",
+ template: \`
+ Hello {{name}} !
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class TypeExternalProps {
+ @Input() name;
+}
+
+@NgModule({
+ declarations: [TypeExternalProps],
+ imports: [CommonModule],
+ exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > typeExternalStore 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
@@ -15626,6 +15658,40 @@ export class TypeDependencyModule {}
"
`;
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+ selector: \\"type-external-props\\",
+ template: \`
+ Hello {{name}} !
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class TypeExternalProps {
+ @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+ declarations: [TypeExternalProps],
+ imports: [CommonModule],
+ exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > typeExternalStore 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index dfef1606d6..3383a69abc 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -6371,6 +6371,31 @@ export class TypeDependencyModule {}
"
`;
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"type-external-props\\",
+ template: \`
+ Hello {{name}} !
+ \`,
+})
+export default class TypeExternalProps {
+ @Input() name;
+}
+
+@NgModule({
+ declarations: [TypeExternalProps],
+ imports: [CommonModule],
+ exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > typeExternalStore 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
@@ -13542,6 +13567,33 @@ export class TypeDependencyModule {}
"
`;
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+ selector: \\"type-external-props\\",
+ template: \`
+ Hello {{name}} !
+ \`,
+})
+export default class TypeExternalProps {
+ @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+ declarations: [TypeExternalProps],
+ imports: [CommonModule],
+ exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > typeExternalStore 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 7da64dcada..35a9c9694e 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -13415,6 +13415,63 @@ export default class TypeDependency {
"
`;
+exports[`Angular > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"type-external-props\\",
+ template: \`
+ Hello {{name}} !
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class TypeExternalProps {
+ @Input() name;
+}
+
+@NgModule({
+ declarations: [TypeExternalProps],
+ imports: [CommonModule],
+ exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > typeExternalProps 2`] = `
+"import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+ selector: \\"type-external-props\\",
+ template: \`
+ Hello {{name}} !
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+ standalone: true,
+ imports: [CommonModule],
+})
+export default class TypeExternalProps {
+ @Input() name;
+}
+"
+`;
+
exports[`Angular > jsx > Javascript Test > typeExternalStore 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
@@ -28471,6 +28528,67 @@ export default class TypeDependency {
"
`;
+exports[`Angular > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+ selector: \\"type-external-props\\",
+ template: \`
+ Hello {{name}} !
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class TypeExternalProps {
+ @Input() name!: FooProps[\\"name\\"];
+}
+
+@NgModule({
+ declarations: [TypeExternalProps],
+ imports: [CommonModule],
+ exports: [TypeExternalProps],
+})
+export class TypeExternalPropsModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > typeExternalProps 2`] = `
+"import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { FooProps } from \\"./foo-props\\";
+
+@Component({
+ selector: \\"type-external-props\\",
+ template: \`
+ Hello {{name}} !
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+ standalone: true,
+ imports: [CommonModule],
+})
+export default class TypeExternalProps {
+ @Input() name!: FooProps[\\"name\\"];
+}
+"
+`;
+
exports[`Angular > jsx > Typescript Test > typeExternalStore 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 8d57f9a86c..077c1bb386 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -7540,6 +7540,64 @@ exports[`Html > jsx > Javascript Test > typeDependency 1`] = `
"
`;
+exports[`Html > jsx > Javascript Test > typeExternalProps 1`] = `
+"
+ Hello
+
+ !
+
+
+"
+`;
+
exports[`Html > jsx > Javascript Test > typeExternalStore 1`] = `
"
Hello
@@ -15388,6 +15446,64 @@ exports[`Html > jsx > Typescript Test > typeDependency 1`] = `
"
`;
+exports[`Html > jsx > Typescript Test > typeExternalProps 1`] = `
+"
+ Hello
+
+ !
+
+
+"
+`;
+
exports[`Html > jsx > Typescript Test > typeExternalStore 1`] = `
"
Hello
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index a34f841bd7..0e4bd98731 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -943,6 +943,11 @@ exports[`Liquid > jsx > Javascript Test > typeDependency 1`] = `
"
`;
+exports[`Liquid > jsx > Javascript Test > typeExternalProps 1`] = `
+"
Hello {{name}} !
+"
+`;
+
exports[`Liquid > jsx > Javascript Test > typeExternalStore 1`] = `
"Hello {{_name}} !
"
@@ -1957,6 +1962,11 @@ exports[`Liquid > jsx > Typescript Test > typeDependency 1`] = `
"
`;
+exports[`Liquid > jsx > Typescript Test > typeExternalProps 1`] = `
+"Hello {{name}} !
+"
+`;
+
exports[`Liquid > jsx > Typescript Test > typeExternalStore 1`] = `
"Hello {{_name}} !
"
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index c7b341db53..119bbd88df 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -4448,6 +4448,29 @@ export default class TypeDependency extends LitElement {
"
`;
+exports[`Lit > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"type-external-props\\")
+export default class TypeExternalProps extends LitElement {
+ createRenderRoot() {
+ return this;
+ }
+
+ @property() name: any;
+
+ render() {
+ return html\`
+
+ Hello \${this.name} !
+
+ \`;
+ }
+}
+"
+`;
+
exports[`Lit > jsx > Javascript Test > typeExternalStore 1`] = `
"import { LitElement, html, css } from \\"lit\\";
import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -9563,6 +9586,31 @@ export default class TypeDependency extends LitElement {
"
`;
+exports[`Lit > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"type-external-props\\")
+export default class TypeExternalProps extends LitElement {
+ createRenderRoot() {
+ return this;
+ }
+
+ @property() name: any;
+
+ render() {
+ return html\`
+
+ Hello \${this.name} !
+
+ \`;
+ }
+}
+"
+`;
+
exports[`Lit > jsx > Typescript Test > typeExternalStore 1`] = `
"import { FooStore } from \\"./foo-store\\";
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index 2a786b2d27..644897dbf9 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -2678,6 +2678,12 @@ exports[`Marko > jsx > Javascript Test > typeDependency 1`] = `
\${input.foo}
"
`;
+exports[`Marko > jsx > Javascript Test > typeExternalProps 1`] = `
+"class {}
+
+Hello \${input.name} !
"
+`;
+
exports[`Marko > jsx > Javascript Test > typeExternalStore 1`] = `
"class {
onCreate() {
@@ -5440,6 +5446,14 @@ class {}
\${input.foo}
"
`;
+exports[`Marko > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+class {}
+
+Hello \${input.name} !
"
+`;
+
exports[`Marko > jsx > Typescript Test > typeExternalStore 1`] = `
"import { FooStore } from \\"./foo-store\\";
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index 8b2e56b818..3b825855cf 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -2979,6 +2979,18 @@ exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascr
"
`;
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > typeExternalProps 1`] = `
+"export default function TypeExternalProps(props) {
+ return [
+
+ Hello
+ {props.name}!{\\" \\"}
+
,
+ ];
+}
+"
+`;
+
exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > typeExternalStore 1`] = `
"import { useStore } from \\"@builder.io/mitosis\\";
@@ -6504,6 +6516,20 @@ export default function TypeDependency(props) {
"
`;
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+export default function TypeExternalProps(props) {
+ return [
+
+ Hello
+ {props.name}!{\\" \\"}
+
,
+ ];
+}
+"
+`;
+
exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > typeExternalStore 1`] = `
"import { useStore } from \\"@builder.io/mitosis\\";
@@ -10365,6 +10391,18 @@ exports[`Mitosis, format: legacy > jsx > Javascript Test > typeDependency 1`] =
"
`;
+exports[`Mitosis, format: legacy > jsx > Javascript Test > typeExternalProps 1`] = `
+"export default function TypeExternalProps(props) {
+ return (
+
+ Hello
+ {props.name}!{\\" \\"}
+
+ );
+}
+"
+`;
+
exports[`Mitosis, format: legacy > jsx > Javascript Test > typeExternalStore 1`] = `
"import { useStore } from \\"@builder.io/mitosis\\";
@@ -13959,6 +13997,20 @@ export default function TypeDependency(props) {
"
`;
+exports[`Mitosis, format: legacy > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+export default function TypeExternalProps(props) {
+ return (
+
+ Hello
+ {props.name}!{\\" \\"}
+
+ );
+}
+"
+`;
+
exports[`Mitosis, format: legacy > jsx > Typescript Test > typeExternalStore 1`] = `
"import { useStore } from \\"@builder.io/mitosis\\";
@@ -15417,6 +15469,12 @@ import * as React from \\"react\\";
import { useState } from \\"react\\";
function ContentSlotJsxCode(props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const [name, setName] = useState(() => \\"king\\");
const [showContent, setShowContent] = useState(() => false);
@@ -15454,12 +15512,6 @@ function ContentSlotJsxCode(props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -16938,6 +16990,15 @@ exports[`Mitosis, format: react > jsx > Javascript Test > defaultProps 1`] = `
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -16962,15 +17023,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -16980,6 +17032,13 @@ exports[`Mitosis, format: react > jsx > Javascript Test > defaultPropsOutsideCom
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -17004,13 +17063,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -17857,7 +17909,6 @@ function RenderContent(props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -18293,6 +18344,17 @@ export default TypeDependency;
"
`;
+exports[`Mitosis, format: react > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+ return
Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`Mitosis, format: react > jsx > Javascript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -19125,6 +19187,12 @@ import { useState } from \\"react\\";
import type { JSX } from \\"../../../../jsx-runtime\\";
function ContentSlotJsxCode(props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const [name, setName] = useState(() => \\"king\\");
const [showContent, setShowContent] = useState(() => false);
@@ -19162,12 +19230,6 @@ function ContentSlotJsxCode(props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -20654,6 +20716,15 @@ exports[`Mitosis, format: react > jsx > Typescript Test > defaultProps 1`] = `
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -20678,15 +20749,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -20696,6 +20758,13 @@ exports[`Mitosis, format: react > jsx > Typescript Test > defaultPropsOutsideCom
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -20720,13 +20789,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -21582,7 +21644,6 @@ function RenderContent(props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -22020,6 +22081,18 @@ export default TypeDependency;
"
`;
+exports[`Mitosis, format: react > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props) {
+ return
Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`Mitosis, format: react > jsx > Typescript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -22315,21 +22388,19 @@ function MyComponent(props) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`Mitosis, format: react > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={activeTab}>{activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={activeTab}>{activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`Mitosis, format: react > svelte > Javascript Test > each 1`] = `
@@ -22450,11 +22521,9 @@ function MyComponent(props) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
@@ -22718,21 +22787,19 @@ function MyComponent(props) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`Mitosis, format: react > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={activeTab}>{activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={activeTab}>{activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`Mitosis, format: react > svelte > Typescript Test > each 1`] = `
@@ -22853,11 +22920,9 @@ function MyComponent(props) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
index 57e1f1b0a7..97b2f26fe0 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -12288,6 +12288,77 @@ exports[`Parse JSX > Javascript > typeDependency 1`] = `
}
`;
+exports[`Parse JSX > Javascript > typeExternalProps 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "Hello ",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "_text": {
+ "bindingType": "expression",
+ "code": "props.name",
+ "type": "single",
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "! ",
+ },
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "exports": {},
+ "hooks": {
+ "onEvent": [],
+ "onMount": [],
+ },
+ "imports": [],
+ "inputs": [],
+ "meta": {},
+ "name": "TypeExternalProps",
+ "refs": {},
+ "state": {},
+ "subComponents": [],
+}
+`;
+
exports[`Parse JSX > Javascript > typeExternalStore 1`] = `
{
"@type": "@builder.io/mitosis/component",
@@ -25904,6 +25975,86 @@ exports[`Parse JSX > Typescript > typeDependency 1`] = `
}
`;
+exports[`Parse JSX > Typescript > typeExternalProps 1`] = `
+{
+ "@type": "@builder.io/mitosis/component",
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "Hello ",
+ },
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {
+ "_text": {
+ "bindingType": "expression",
+ "code": "props.name",
+ "type": "single",
+ },
+ },
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ {
+ "@type": "@builder.io/mitosis/node",
+ "bindings": {},
+ "children": [],
+ "meta": {},
+ "name": "div",
+ "properties": {
+ "_text": "! ",
+ },
+ "scope": {},
+ },
+ ],
+ "meta": {},
+ "name": "div",
+ "properties": {},
+ "scope": {},
+ },
+ ],
+ "context": {
+ "get": {},
+ "set": {},
+ },
+ "exports": {},
+ "hooks": {
+ "onEvent": [],
+ "onMount": [],
+ },
+ "imports": [
+ {
+ "importKind": "value",
+ "imports": {
+ "FooProps": "FooProps",
+ },
+ "path": "./foo-props",
+ },
+ ],
+ "inputs": [],
+ "meta": {},
+ "name": "TypeExternalProps",
+ "propsTypeRef": "FooProps",
+ "refs": {},
+ "state": {},
+ "subComponents": [],
+}
+`;
+
exports[`Parse JSX > Typescript > typeExternalStore 1`] = `
{
"@type": "@builder.io/mitosis/component",
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 3e5fc770be..804db2d1eb 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -561,6 +561,12 @@ import { h, Fragment } from \\"preact\\";
import { useState } from \\"preact/hooks\\";
function ContentSlotJsxCode(props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const [name, setName] = useState(() => \\"king\\");
const [showContent, setShowContent] = useState(() => false);
@@ -598,12 +604,6 @@ function ContentSlotJsxCode(props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -2104,6 +2104,15 @@ exports[`Preact > jsx > Javascript Test > defaultProps 1`] = `
import { h, Fragment } from \\"preact\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -2128,15 +2137,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -2146,6 +2146,13 @@ exports[`Preact > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
import { h, Fragment } from \\"preact\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -2170,13 +2177,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -3047,7 +3047,6 @@ function RenderContent(props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -3572,6 +3571,18 @@ export default TypeDependency;
"
`;
+exports[`Preact > jsx > Javascript Test > typeExternalProps 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function TypeExternalProps(props) {
+ return
Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`Preact > jsx > Javascript Test > typeExternalStore 1`] = `
"/** @jsx h */
import { h, Fragment } from \\"preact\\";
@@ -4385,6 +4396,12 @@ type Props = {
import type { JSX } from \\"../../../../jsx-runtime\\";
function ContentSlotJsxCode(props: Props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const [name, setName] = useState(() => \\"king\\");
const [showContent, setShowContent] = useState(() => false);
@@ -4422,12 +4439,6 @@ function ContentSlotJsxCode(props: Props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -6162,6 +6173,15 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -6186,15 +6206,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -6212,6 +6223,13 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -6236,13 +6254,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -7200,7 +7211,6 @@ function RenderContent(props: Props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -7770,6 +7780,19 @@ export default TypeDependency;
"
`;
+exports[`Preact > jsx > Typescript Test > typeExternalProps 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+ return
{props.link ? (
@@ -2866,15 +2875,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -2896,6 +2896,13 @@ import {
} from \\"react-native\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -2919,13 +2926,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -4206,7 +4206,6 @@ function RenderContent(props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -5075,6 +5074,36 @@ export default TypeDependency;
"
`;
+exports[`React Native > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import {
+ FlatList,
+ ScrollView,
+ View,
+ StyleSheet,
+ Image,
+ Text,
+ Pressable,
+ TextInput,
+ TouchableOpacity,
+ Button,
+ Linking,
+} from \\"react-native\\";
+
+function TypeExternalProps(props) {
+ return (
+
+ Hello
+ {props.name}
+ !
+
+ );
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`React Native > jsx > Javascript Test > typeExternalStore 1`] = `
"import * as React from \\"react\\";
import {
@@ -6181,6 +6210,12 @@ type Props = {
import type { JSX } from \\"../../../../jsx-runtime\\";
function ContentSlotJsxCode(props: Props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const [name, setName] = useState(() => \\"king\\");
const [showContent, setShowContent] = useState(() => false);
@@ -6217,12 +6252,6 @@ function ContentSlotJsxCode(props: Props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -8434,6 +8463,15 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -8457,15 +8495,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -8495,6 +8524,13 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -8518,13 +8554,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -9892,7 +9921,6 @@ function RenderContent(props: Props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -10806,6 +10834,37 @@ export default TypeDependency;
"
`;
+exports[`React Native > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import {
+ FlatList,
+ ScrollView,
+ View,
+ StyleSheet,
+ Image,
+ Text,
+ Pressable,
+ TextInput,
+ TouchableOpacity,
+ Button,
+ Linking,
+} from \\"react-native\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+ return (
+
+ Hello
+ {props.name}
+ !
+
+ );
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`React Native > jsx > Typescript Test > typeExternalStore 1`] = `
"import * as React from \\"react\\";
import {
@@ -11269,21 +11328,19 @@ function MyComponent(props) {
return {activeTab} {activeTab} {activeTab} {activeTab}
Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`Preact > jsx > Typescript Test > typeExternalStore 1`] = `
"/** @jsx h */
import { h, Fragment } from \\"preact\\";
@@ -8067,21 +8090,19 @@ function MyComponent(props) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`Preact > svelte > Javascript Test > context 1`] = `
-"'>' expected. (36:13)
- 34 | return (
- 35 |
-> 36 | <'activeTab'.Provider value={activeTab}>{activeTab}
+"'>' expected. (33:13)
+ 31 | return (
+ 32 |
+> 33 | <'activeTab'.Provider value={activeTab}>{activeTab}
| ^
- 37 |
- 38 |
- 39 |"
+ 34 |
+ 35 |
+ 36 |"
`;
exports[`Preact > svelte > Javascript Test > each 1`] = `
@@ -8202,11 +8223,9 @@ function MyComponent(props) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
@@ -8471,21 +8490,19 @@ function MyComponent(props: any) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`Preact > svelte > Typescript Test > context 1`] = `
-"'>' expected. (36:13)
- 34 | return (
- 35 |
-> 36 | <'activeTab'.Provider value={activeTab}>{activeTab}
+"'>' expected. (33:13)
+ 31 | return (
+ 32 |
+> 33 | <'activeTab'.Provider value={activeTab}>{activeTab}
| ^
- 37 |
- 38 |
- 39 |"
+ 34 |
+ 35 |
+ 36 |"
`;
exports[`Preact > svelte > Typescript Test > each 1`] = `
@@ -8606,11 +8623,9 @@ function MyComponent(props: any) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index 4d49a89339..3acf9bf294 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -5266,6 +5266,17 @@ export default TypeDependency;
"
`;
+exports[`qwik > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const TypeExternalProps = component$((props) => {
+ return Hello {props.name}!
;
+});
+
+export default TypeExternalProps;
+"
+`;
+
exports[`qwik > jsx > Javascript Test > typeExternalStore 1`] = `
"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
@@ -9383,6 +9394,19 @@ export default TypeDependency;
"
`;
+exports[`qwik > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const TypeExternalProps = component$((props: FooProps) => {
+ return Hello {props.name}!
;
+});
+
+export default TypeExternalProps;
+"
+`;
+
exports[`qwik > jsx > Typescript Test > typeExternalStore 1`] = `
"import { FooStore } from \\"./foo-store\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index 7cd91475be..48fb395a75 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -824,6 +824,12 @@ import {
import { useState } from \\"react\\";
function ContentSlotJsxCode(props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const [name, setName] = useState(() => \\"king\\");
const [showContent, setShowContent] = useState(() => false);
@@ -860,12 +866,6 @@ function ContentSlotJsxCode(props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -2843,6 +2843,15 @@ import {
} from \\"react-native\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`React - stateType: builder > jsx > Javascript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -4374,6 +4386,12 @@ type Props = {
import type { JSX } from \\"../../../../jsx-runtime\\";
function ContentSlotJsxCode(props: Props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const state = useBuilderState({
name: \\"king\\",
showContent: false,
@@ -4410,12 +4428,6 @@ function ContentSlotJsxCode(props: Props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -6164,6 +6176,15 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
const state = useBuilderState({});
return (
@@ -6190,15 +6211,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -6216,6 +6228,13 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
const state = useBuilderState({});
return (
@@ -6242,13 +6261,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -7205,7 +7217,6 @@ function RenderContent(props: Props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -7731,6 +7742,20 @@ export default TypeDependency;
"
`;
+exports[`React - stateType: builder > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+ const state = useBuilderState({});
+
+ return Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`React - stateType: builder > jsx > Typescript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -8031,21 +8056,19 @@ function MyComponent(props) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`React - stateType: builder > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`React - stateType: builder > svelte > Javascript Test > each 1`] = `
@@ -8167,11 +8190,9 @@ function MyComponent(props) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
@@ -8431,21 +8452,19 @@ function MyComponent(props: any) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`React - stateType: builder > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`React - stateType: builder > svelte > Typescript Test > each 1`] = `
@@ -8567,11 +8586,9 @@ function MyComponent(props: any) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
index e7ddbc2ad6..359c297ab9 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -590,6 +590,12 @@ import * as React from \\"react\\";
import { useLocalObservable, observer } from \\"mobx-react-lite\\";
function ContentSlotJsxCode(props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const state = useLocalObservable(() => ({
name: \\"king\\",
showContent: false,
@@ -626,12 +632,6 @@ function ContentSlotJsxCode(props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
const observedContentSlotJsxCode = observer(ContentSlotJsxCode);
export default observedContentSlotJsxCode;
"
@@ -2176,6 +2176,15 @@ exports[`React - stateType: mobx > jsx > Javascript Test > defaultProps 1`] = `
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -2200,15 +2209,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
const observedButton = observer(Button);
export default observedButton;
"
@@ -2219,6 +2219,13 @@ exports[`React - stateType: mobx > jsx > Javascript Test > defaultPropsOutsideCo
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -2243,13 +2250,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
const observedButton = observer(Button);
export default observedButton;
"
@@ -3128,7 +3128,6 @@ function RenderContent(props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -3599,6 +3598,18 @@ export default observedTypeDependency;
"
`;
+exports[`React - stateType: mobx > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+ return
Hello {props.name}!
;
+}
+
+const observedTypeExternalProps = observer(TypeExternalProps);
+export default observedTypeExternalProps;
+"
+`;
+
exports[`React - stateType: mobx > jsx > Javascript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -4444,6 +4455,12 @@ type Props = {
import type { JSX } from \\"../../../../jsx-runtime\\";
function ContentSlotJsxCode(props: Props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const state = useLocalObservable(() => ({
name: \\"king\\",
showContent: false,
@@ -4480,12 +4497,6 @@ function ContentSlotJsxCode(props: Props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
const observedContentSlotJsxCode = observer(ContentSlotJsxCode);
export default observedContentSlotJsxCode;
"
@@ -6251,6 +6262,15 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -6275,15 +6295,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
const observedButton = observer(Button);
export default observedButton;
"
@@ -6302,6 +6313,13 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -6326,13 +6344,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
const observedButton = observer(Button);
export default observedButton;
"
@@ -7292,7 +7303,6 @@ function RenderContent(props: Props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -7808,6 +7818,19 @@ export default observedTypeDependency;
"
`;
+exports[`React - stateType: mobx > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+ return
Hello {props.name}!
;
+}
+
+const observedTypeExternalProps = observer(TypeExternalProps);
+export default observedTypeExternalProps;
+"
+`;
+
exports[`React - stateType: mobx > jsx > Typescript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -8116,22 +8139,20 @@ function MyComponent(props) {
);
}
-MyComponent.defaultProps = {};
-
const observedMyComponent = observer(MyComponent);
export default observedMyComponent;
"
`;
exports[`React - stateType: mobx > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`React - stateType: mobx > svelte > Javascript Test > each 1`] = `
@@ -8263,11 +8284,9 @@ function MyComponent(props) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
@@ -8539,22 +8558,20 @@ function MyComponent(props: any) {
);
}
-MyComponent.defaultProps = {};
-
const observedMyComponent = observer(MyComponent);
export default observedMyComponent;
"
`;
exports[`React - stateType: mobx > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`React - stateType: mobx > svelte > Typescript Test > each 1`] = `
@@ -8686,11 +8703,9 @@ function MyComponent(props: any) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
index c183b05b58..bc0ea33ded 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -570,6 +570,12 @@ import * as React from \\"react\\";
import { useMutable } from \\"react-solid-state\\";
function ContentSlotJsxCode(props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const state = useMutable({
name: \\"king\\",
showContent: false,
@@ -606,12 +612,6 @@ function ContentSlotJsxCode(props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -2108,6 +2108,15 @@ exports[`React - stateType: solid > jsx > Javascript Test > defaultProps 1`] = `
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -2132,15 +2141,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -2150,6 +2150,13 @@ exports[`React - stateType: solid > jsx > Javascript Test > defaultPropsOutsideC
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -2174,13 +2181,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -3032,7 +3032,6 @@ function RenderContent(props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -3482,6 +3481,17 @@ export default TypeDependency;
"
`;
+exports[`React - stateType: solid > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+ return
Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`React - stateType: solid > jsx > Javascript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -4299,6 +4309,12 @@ type Props = {
import type { JSX } from \\"../../../../jsx-runtime\\";
function ContentSlotJsxCode(props: Props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const state = useMutable({
name: \\"king\\",
showContent: false,
@@ -4335,12 +4351,6 @@ function ContentSlotJsxCode(props: Props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -6058,6 +6068,15 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -6082,15 +6101,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -6108,6 +6118,13 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -6132,13 +6149,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -7071,7 +7081,6 @@ function RenderContent(props: Props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -7566,6 +7575,18 @@ export default TypeDependency;
"
`;
+exports[`React - stateType: solid > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+ return
Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`React - stateType: solid > jsx > Typescript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -7864,21 +7885,19 @@ function MyComponent(props) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`React - stateType: solid > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`React - stateType: solid > svelte > Javascript Test > each 1`] = `
@@ -8003,11 +8022,9 @@ function MyComponent(props) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
@@ -8270,21 +8287,19 @@ function MyComponent(props: any) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`React - stateType: solid > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`React - stateType: solid > svelte > Typescript Test > each 1`] = `
@@ -8409,11 +8424,9 @@ function MyComponent(props: any) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
index e7c9ed47cf..83ce3c332e 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -570,6 +570,12 @@ import * as React from \\"react\\";
import { useLocalProxy } from \\"valtio/utils\\";
function ContentSlotJsxCode(props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const state = useLocalProxy({
name: \\"king\\",
showContent: false,
@@ -606,12 +612,6 @@ function ContentSlotJsxCode(props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -2111,6 +2111,15 @@ exports[`React - stateType: valtio > jsx > Javascript Test > defaultProps 1`] =
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -2135,15 +2144,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -2153,6 +2153,13 @@ exports[`React - stateType: valtio > jsx > Javascript Test > defaultPropsOutside
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -2177,13 +2184,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -3035,7 +3035,6 @@ function RenderContent(props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -3485,6 +3484,17 @@ export default TypeDependency;
"
`;
+exports[`React - stateType: valtio > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+ return
Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`React - stateType: valtio > jsx > Javascript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -4302,6 +4312,12 @@ type Props = {
import type { JSX } from \\"../../../../jsx-runtime\\";
function ContentSlotJsxCode(props: Props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const state = useLocalProxy({
name: \\"king\\",
showContent: false,
@@ -4338,12 +4354,6 @@ function ContentSlotJsxCode(props: Props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -6064,6 +6074,15 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -6088,15 +6107,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -6114,6 +6124,13 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -6138,13 +6155,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -7077,7 +7087,6 @@ function RenderContent(props: Props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -7572,6 +7581,18 @@ export default TypeDependency;
"
`;
+exports[`React - stateType: valtio > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+ return
Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`React - stateType: valtio > jsx > Typescript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -7870,21 +7891,19 @@ function MyComponent(props) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`React - stateType: valtio > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`React - stateType: valtio > svelte > Javascript Test > each 1`] = `
@@ -8009,11 +8028,9 @@ function MyComponent(props) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
@@ -8276,21 +8293,19 @@ function MyComponent(props: any) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`React - stateType: valtio > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={state.activeTab}>{state.activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`React - stateType: valtio > svelte > Typescript Test > each 1`] = `
@@ -8415,11 +8430,9 @@ function MyComponent(props: any) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index b3f4293bd6..95dac71280 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -1,63 +1,115 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`React - stateType: variables > jsx > Javascript Test > AdvancedRef 1`] = `
-"'(' expected. (18:34)
- 16 | const inputNoArgRef = useRef(null);
- 17 | const name= 'PatrickJS'
-> 18 | const onBlur = onBlur = function function onBlur() {
- | ^
- 19 | // Maintain focus
- 20 | inputRef.current.focus();
- 21 | }"
-`;
-
-exports[`React - stateType: variables > jsx > Javascript Test > Basic 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
-export const DEFAULT_VALUES = {
- name: \\"Steve\\",
-};
-
-function MyBasicComponent(props) {
- const name = \\"Steve\\";
- const underscore_fn_name = function underscore_fn_name() {
- return \\"bar\\";
+function MyBasicRefComponent(props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const name = \\"PatrickJS\\";
+ const onBlur = function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ };
+ const lowerCaseName = function lowerCaseName() {
+ return name.toLowerCase();
};
- const age = 1;
- const sports = [\\"\\"];
+
+ useEffect(() => {
+ console.log(\\"Received an update\\");
+ }, [inputRef.current, inputNoArgRef.current]);
return (
<>
-
- (name = myEvent.target.value)}
- />
- Hello! I can run in React, Vue, Solid, or Liquid! >
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
`;
exports[`React - stateType: variables > jsx > Javascript Test > Basic OnMount Update 1`] = `
@@ -227,25 +279,82 @@ export default MyBasicForComponent;
`;
exports[`React - stateType: variables > jsx > Javascript Test > BasicRef 1`] = `
-"'(' expected. (18:34)
- 16 | const inputNoArgRef = useRef(null);
- 17 | const name= 'PatrickJS'
-> 18 | const onBlur = onBlur = function function onBlur() {
- | ^
- 19 | // Maintain focus
- 20 | inputRef.current?.focus();
- 21 | }"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function MyBasicRefComponent(props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const name = \\"PatrickJS\\";
+ const onBlur = function onBlur() {
+ // Maintain focus
+ inputRef.current?.focus();
+ };
+ const lowerCaseName = function lowerCaseName() {
+ return name.toLowerCase();
+ };
+
+ return (
+ <>
+ handleChange(value)}
- />
- );
-}
-
-export default Stepper;
-"
+"'function' is not allowed as a variable declaration name. (15:9)
+ 13 | function Stepper(props) {
+ 14 |
+> 15 | const function handleChange(value) {
+ | ^
+ 16 | console.log(value);
+ 17 | }
+ 18 |"
`;
exports[`React - stateType: variables > jsx > Javascript Test > NestedStore 1`] = `
@@ -862,154 +755,51 @@ export default SlotCode;
`;
exports[`React - stateType: variables > jsx > Javascript Test > Stamped.io 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useEffect } from \\"react\\";
-import { kebabCase, snakeCase } from \\"lodash\\";
-
-function SmileReviews(props) {
- const reviews = [];
- const name = \\"test\\";
- const showReviewPrompt = false;
- const kebabCaseValue = function kebabCaseValue() {
- return kebabCase(\\"testThat\\");
- };
- const snakeCaseValue = function snakeCaseValue() {
- return snakeCase(\\"testThis\\");
- };
+"'function' is not allowed as a variable declaration name. (19:7)
+ 17 | const name= 'test'
+ 18 | const showReviewPrompt= false
+> 19 | const function kebabCaseValue() {
+ | ^
+ 20 | return kebabCase('testThat');
+ 21 | }
+ 22 | const function snakeCaseValue() {"
+`;
- useEffect(() => {
- fetch(
- \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
- props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
- }&productId=\${props.productId || \\"2410511106127\\"}\`
- )
- .then((res) => res.json())
- .then((data) => {
- reviews = data.data;
- });
- }, []);
+exports[`React - stateType: variables > jsx > Javascript Test > StoreComment 1`] = `
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const foo= true
+> 17 | const function bar() {}
+ | ^
+ 18 |
+ 19 |
+ 20 |"
+`;
- return (
- <>
-
- | ^
- 40 | Hello {name} {props.actions?.map((action) => (
- 41 | "
+"'function' is not allowed as a variable declaration name. (19:7)
+ 17 | const TagName= 'div'
+ 18 | const tag= 'span'
+> 19 | const function TagNameGetter() {
+ | ^
+ 20 | return 'span';
+ 21 | }
+ 22 |"
`;
exports[`React - stateType: variables > jsx > Javascript Test > basicForwardRef 1`] = `
@@ -1536,6 +1299,15 @@ exports[`React - stateType: variables > jsx > Javascript Test > defaultProps 1`]
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
+ {props.showInput ? (
+ <>
+ onBlur()}
+ onChange={(event) => (name = event.target.value)}
+ />
+
+
+
+ ) : null}
+ Hello
+ {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+ Component!
);
}
-export default MyBasicComponent;
+export default MyBasicRefComponent;
"
`;
+exports[`React - stateType: variables > jsx > Javascript Test > Basic 1`] = `
+"'function' is not allowed as a variable declaration name. (19:7)
+ 17 |
+ 18 | const name= 'Steve'
+> 19 | const function underscore_fn_name() {
+ | ^
+ 20 | return 'bar';
+ 21 | }
+ 22 | const age= 1"
+`;
+
exports[`React - stateType: variables > jsx > Javascript Test > Basic Context 1`] = `
-"'(' expected. (16:38)
- 14 | function MyBasicComponent(props) {
- 15 | const name= 'PatrickJS'
-> 16 | const onChange = onChange = function function onChange() {
- | ^
- 17 | const change = myService.method('change');
- 18 | console.log(change);
- 19 | }"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext, useRef, useEffect } from \\"react\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props) {
+ const name = \\"PatrickJS\\";
+ const onChange = function onChange() {
+ const change = myService.method(\\"change\\");
+ console.log(change);
+ };
+
+ const myService = useContext(MyService);
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ const hi = myService.method(\\"hi\\");
+ console.log(hi);
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ const bye = myService.method(\\"hi\\");
+ console.log(bye);
+ }, []);
+
+ return (
+
+ {myService.method(\\"hello\\") + name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ onChange} />
+
+
+ {props.showInput ? (
+ <>
+ onBlur()}
+ onChange={(event) => (name = event.target.value)}
+ />
+
+
+
+ ) : null}
+ Hello
+ {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+ Component!
+
+
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
`;
exports[`React - stateType: variables > jsx > Javascript Test > BasicRefAssignment 1`] = `
-"'(' expected. (16:46)
- 14 | function MyBasicRefAssignmentComponent(props) {
- 15 | const holdValueRef = useRef('Patrick');
-> 16 | const handlerClick = handlerClick = function function handlerClick(event) {
- | ^
- 17 | event.preventDefault();
- 18 | console.log('current value', holdValueRef.current);
- 19 | holdValueRef.current = holdValueRef.current + 'JS';"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+function MyBasicRefAssignmentComponent(props) {
+ const holdValueRef = useRef(\\"Patrick\\");
+ const handlerClick = function handlerClick(event) {
+ event.preventDefault();
+ console.log(\\"current value\\", holdValueRef.current);
+ holdValueRef.current = holdValueRef.current + \\"JS\\";
+ };
+
+ return (
+
+
+
+ );
+}
+
+export default MyBasicRefAssignmentComponent;
+"
`;
exports[`React - stateType: variables > jsx > Javascript Test > BasicRefPrevious 1`] = `
@@ -318,63 +427,14 @@ export default Button;
`;
exports[`React - stateType: variables > jsx > Javascript Test > Columns 1`] = `
-"import * as React from \\"react\\";
-
-function Column(props) {
- const getColumns = function getColumns() {
- return props.columns || [];
- };
- const getGutterSize = function getGutterSize() {
- return typeof props.space === \\"number\\" ? props.space || 0 : 20;
- };
- const getWidth = function getWidth(index) {
- const columns = getColumns();
- return (columns[index] && columns[index].width) || 100 / columns.length;
- };
- const getColumnCssWidth = function getColumnCssWidth(index) {
- const columns = getColumns();
- const gutterSize = getGutterSize();
- const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
- return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
- };
-
- return (
- <>
-
- {props.columns?.map((column, index) => (
-
-
-
- );
-}
-
-export default Column;
-"
+"'function' is not allowed as a variable declaration name. (15:9)
+ 13 | function Column(props) {
+ 14 |
+> 15 | const function getColumns() {
+ | ^
+ 16 | return props.columns || [];
+ 17 | }
+ 18 | const function getGutterSize() {"
`;
exports[`React - stateType: variables > jsx > Javascript Test > ContentSlotHtml 1`] = `
@@ -399,214 +459,58 @@ export default ContentSlotCode;
`;
exports[`React - stateType: variables > jsx > Javascript Test > ContentSlotJSX 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function ContentSlotJsxCode(props) {
- const name = \\"king\\";
- const showContent = false;
- const cls = function cls() {
- return props.slotContent && props.children ? \`\${name}-content\` : \\"\\";
- };
- const show = function show() {
- props.slotContent ? 1 : \\"\\";
- };
-
- return (
- <>
- {props.slotReference ? (
- <>
-
- {column.content}
- {index}
-
- ))}
- show()}
- className={cls()}
- >
- {showContent && props.slotContent ? (
- <>{props.content || \\"{props.content}\\"}
- ) : null}
-
-
- ) : null}
-
- );
-}
-
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
-export default ContentSlotJsxCode;
-"
+"'function' is not allowed as a variable declaration name. (18:7)
+ 16 | const name= 'king'
+ 17 | const showContent= false
+> 18 | const function cls() {
+ | ^
+ 19 | return props.slotContent && props.children ? \`\${name}-content\` : '';
+ 20 | }
+ 21 | const function show() {"
`;
exports[`React - stateType: variables > jsx > Javascript Test > CustomCode 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
-
-function CustomCode(props) {
- const elem = useRef(null);
- const scriptsInserted = [];
- const scriptsRun = [];
- const findAndRunScripts = function findAndRunScripts() {
- // TODO: Move this function to standalone one in '@builder.io/utils'
- if (elem.current && typeof window !== \\"undefined\\") {
- /** @type {HTMLScriptElement[]} */
- const scripts = elem.current.getElementsByTagName(\\"script\\");
-
- for (let i = 0; i < scripts.length; i++) {
- const script = scripts[i];
-
- if (script.src) {
- if (scriptsInserted.includes(script.src)) {
- continue;
- }
-
- scriptsInserted.push(script.src);
- const newScript = document.createElement(\\"script\\");
- newScript.async = true;
- newScript.src = script.src;
- document.head.appendChild(newScript);
- } else if (
- !script.type ||
- [
- \\"text/javascript\\",
- \\"application/javascript\\",
- \\"application/ecmascript\\",
- ].includes(script.type)
- ) {
- if (scriptsRun.includes(script.innerText)) {
- continue;
- }
-
- try {
- scriptsRun.push(script.innerText);
- new Function(script.innerText)();
- } catch (error) {
- console.warn(\\"\`CustomCode\`: Error running script:\\", error);
- }
- }
- }
- }
- };
-
- useEffect(() => {
- findAndRunScripts();
- }, []);
-
- return (
-
- );
-}
-
-export default CustomCode;
-"
+"'function' is not allowed as a variable declaration name. (19:7)
+ 17 | const scriptsInserted= []
+ 18 | const scriptsRun= []
+> 19 | const function findAndRunScripts() {
+ | ^
+ 20 | // TODO: Move this function to standalone one in '@builder.io/utils'
+ 21 | if (elem.current && typeof window !== 'undefined') {
+ 22 | /** @type {HTMLScriptElement[]} */"
`;
exports[`React - stateType: variables > jsx > Javascript Test > Embed 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
-
-function CustomCode(props) {
- const elem = useRef(null);
- const scriptsInserted = [];
- const scriptsRun = [];
- const findAndRunScripts = function findAndRunScripts() {
- // TODO: Move this function to standalone one in '@builder.io/utils'
- if (elem.current && typeof window !== \\"undefined\\") {
- /** @type {HTMLScriptElement[]} */
- const scripts = elem.current.getElementsByTagName(\\"script\\");
-
- for (let i = 0; i < scripts.length; i++) {
- const script = scripts[i];
-
- if (script.src) {
- if (scriptsInserted.includes(script.src)) {
- continue;
- }
-
- scriptsInserted.push(script.src);
- const newScript = document.createElement(\\"script\\");
- newScript.async = true;
- newScript.src = script.src;
- document.head.appendChild(newScript);
- } else if (
- !script.type ||
- [
- \\"text/javascript\\",
- \\"application/javascript\\",
- \\"application/ecmascript\\",
- ].includes(script.type)
- ) {
- if (scriptsRun.includes(script.innerText)) {
- continue;
- }
-
- try {
- scriptsRun.push(script.innerText);
- new Function(script.innerText)();
- } catch (error) {
- console.warn(\\"\`CustomCode\`: Error running script:\\", error);
- }
- }
- }
- }
- };
-
- useEffect(() => {
- findAndRunScripts();
- }, []);
-
- return (
-
- );
-}
-
-export default CustomCode;
-"
+"'function' is not allowed as a variable declaration name. (19:7)
+ 17 | const scriptsInserted= []
+ 18 | const scriptsRun= []
+> 19 | const function findAndRunScripts() {
+ | ^
+ 20 | // TODO: Move this function to standalone one in '@builder.io/utils'
+ 21 | if (elem.current && typeof window !== 'undefined') {
+ 22 | /** @type {HTMLScriptElement[]} */"
`;
exports[`React - stateType: variables > jsx > Javascript Test > Form 1`] = `
-"',' expected. (108:2796)
- 106 | if (contentType && contentType !== 'multipart/form-data') {
- 107 | if (
-> 108 | /* Zapier doesn't allow content-type header to be sent from browsers */ !(sendWithJs && props.action?.includes('zapier.com'))) { headers['content-type'] = contentType; } } const presubmitEvent = new CustomEvent('presubmit', { detail: { body } }); if (formRef.current) { formRef.current.dispatchEvent(presubmitEvent); if (presubmitEvent.defaultPrevented) { return; } } formState = 'sending'; const formUrl = \`\${builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io'}/api/v1/form-submit?apiKey=\${builder.apiKey}&to=\${btoa(props.sendSubmissionsToEmail || '')}&name=\${encodeURIComponent(props.name || '')}\`; fetch(props.sendSubmissionsTo === 'email' ? formUrl : props.action /* TODO: throw error if no action URL */ , { body, headers, method: props.method || 'post' }).then(async res => { let body; const contentType = res.headers.get('content-type'); if (contentType && contentType.indexOf('application/json') !== -1) { body = await res.json(); } else { body = await res.text(); } if (!res.ok && props.errorMessagePath) { /* TODO: allow supplying an error formatter function */ let message = get(body, props.errorMessagePath); if (message) { if (typeof message !== 'string') { /* TODO: ideally convert json to yaml so it woul dbe like error: - email has been taken */ message = JSON.stringify(message); } formErrorMessage = message; } } responseData = body; formState = res.ok ? 'success' : 'error'; if (res.ok) { const submitSuccessEvent = new CustomEvent('submit:success', { detail: { res, body } }); if (formRef.current) { formRef.current.dispatchEvent(submitSuccessEvent); if (submitSuccessEvent.defaultPrevented) { return; } /* TODO: option to turn this on/off? */ if (props.resetFormOnSubmit !== false) { formRef.current.reset(); } } /* TODO: client side route event first that can be preventDefaulted */ if (props.successUrl) { if (formRef.current) { const event = new CustomEvent('route', { detail: { url: props.successUrl } }); formRef.current.dispatchEvent(event); if (!event.defaultPrevented) { location.href = props.successUrl; } } else { location.href = props.successUrl; } } } }, err => { const submitErrorEvent = new CustomEvent('submit:error', { detail: { error: err } }); if (formRef.current) { formRef.current.dispatchEvent(submitErrorEvent); if (submitErrorEvent.defaultPrevented) { return; } } responseData = err; formState = 'error'; }); } } return ( <> ); } export default FormComponent;
- | ^
- 109 |
- 110 |
- 111 |"
+"'function' is not allowed as a variable declaration name. (21:7)
+ 19 | const responseData= null
+ 20 | const formErrorMessage= ''
+> 21 | const function submissionState() {
+ | ^
+ 22 | return Builder.isEditing && props.previewState || formState;
+ 23 | }
+ 24 | const function onSubmit(event) {"
`;
exports[`React - stateType: variables > jsx > Javascript Test > Image 1`] = `
-"'(' expected. (25:40)
- 23 | return !!props.lazy && isBrowser();
- 24 | }
-> 25 | const isBrowser = isBrowser = function function isBrowser() {
- | ^
- 26 | return typeof window !== 'undefined' && window.navigator.product != 'ReactNative';
- 27 | }
- 28 | const load= false"
+"'function' is not allowed as a variable declaration name. (19:7)
+ 17 | const scrollListener= null
+ 18 | const imageLoaded= false
+> 19 | const function setLoaded() {
+ | ^
+ 20 | imageLoaded = true;
+ 21 | }
+ 22 | const function useLazyLoading() {"
`;
exports[`React - stateType: variables > jsx > Javascript Test > Image State 1`] = `
@@ -683,25 +587,14 @@ export default FormInputComponent;
`;
exports[`React - stateType: variables > jsx > Javascript Test > InputParent 1`] = `
-"import * as React from \\"react\\";
-import FormInputComponent from \\"./input.raw\\";
-
-function Stepper(props) {
- const handleChange = function handleChange(value) {
- console.log(value);
- };
-
- return (
-
-
-
- -
{props.children}
-
-
- {showReviewPrompt || \\"asdf\\" ? (
- <>
-
-
-
-
-
- ) : null}
- {reviews?.map((review, index) => (
-
-
-
- );
-}
+exports[`React - stateType: variables > jsx > Javascript Test > StoreShadowVars 1`] = `
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const errors= {}
+> 17 | const function foo(errors) {
+ | ^
+ 18 | return errors;
+ 19 | }
+ 20 |"
+`;
-export default SmileReviews;
-"
+exports[`React - stateType: variables > jsx > Javascript Test > StoreWithState 1`] = `
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const foo= false
+> 17 | const function bar() {
+ | ^
+ 18 | return foo;
+ 19 | }
+ 20 |"
`;
-exports[`React - stateType: variables > jsx > Javascript Test > StoreComment 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function StringLiteralStore(props) {
- const foo = true;
- const bar = function bar() {};
-
- return <>{foo};
-}
-
-export default StringLiteralStore;
-"
-`;
-
-exports[`React - stateType: variables > jsx > Javascript Test > StoreShadowVars 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function MyComponent(props) {
- const errors = {};
- const foo = function foo(errors) {
- return errors;
- };
-
- return <>{foo(errors)};
-}
-
-export default MyComponent;
-"
-`;
-
-exports[`React - stateType: variables > jsx > Javascript Test > StoreWithState 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function MyComponent(props) {
- const foo = false;
- const bar = function bar() {
- return foo;
- };
-
- return <>{bar()};
-}
-
-export default MyComponent;
-"
-`;
-
-exports[`React - stateType: variables > jsx > Javascript Test > Submit 1`] = `
-"import * as React from \\"react\\";
+exports[`React - stateType: variables > jsx > Javascript Test > Submit 1`] = `
+"import * as React from \\"react\\";
function SubmitButton(props) {
return (
@@ -1072,32 +862,14 @@ export default Textarea;
`;
exports[`React - stateType: variables > jsx > Javascript Test > UseValueAndFnFromStore 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useEffect } from \\"react\\";
-
-function UseValueAndFnFromStore(props) {
- const _id = \\"abc\\";
- const _active = false;
- const _do = function _do(id) {
- _active = !!id;
-
- if (props.onChange) {
- props.onChange(_active);
- }
- };
-
- useEffect(() => {
- if (_do) {
- _do(_id);
- }
- });
-
- return
- 
-
- ))}
-
-
- N: {index}
- {review.author}
- {review.reviewMessage}
- Test
;
-}
-
-export default UseValueAndFnFromStore;
-"
+"'function' is not allowed as a variable declaration name. (18:7)
+ 16 | const _id= 'abc'
+ 17 | const _active= false
+> 18 | const function _do(id) {
+ | ^
+ 19 | _active = !!id;
+ 20 |
+ 21 | if (props.onChange) {"
`;
exports[`React - stateType: variables > jsx > Javascript Test > Video 1`] = `
@@ -1133,23 +905,14 @@ export default Video;
`;
exports[`React - stateType: variables > jsx > Javascript Test > arrowFunctionInUseStore 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function MyComponent(props) {
- const name = \\"steve\\";
- const setName = function setName(value) {
- name = value;
- };
- const updateNameWithArrowFn = function updateNameWithArrowFn(value) {
- name = value;
- };
-
- return Hello {name}
;
-}
-
-export default MyComponent;
-"
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const name= 'steve'
+> 17 | const function setName(value) {
+ | ^
+ 18 | name = value;
+ 19 | }
+ 20 | const function updateNameWithArrowFn(value) {"
`;
exports[`React - stateType: variables > jsx > Javascript Test > basicForFragment 1`] = `
@@ -1187,14 +950,14 @@ export default BasicForFragment;
`;
exports[`React - stateType: variables > jsx > Javascript Test > basicForNoTagReference 1`] = `
-"Identifier expected. (39:17)
- 37 | return (
- 38 |
-> 39 |
{props.link ? (
@@ -1560,15 +1332,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -1578,6 +1341,13 @@ exports[`React - stateType: variables > jsx > Javascript Test > defaultPropsOuts
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -1602,13 +1372,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -1701,53 +1464,25 @@ export default FigmaButton;
`;
exports[`React - stateType: variables > jsx > Javascript Test > getterState 1`] = `
-"import * as React from \\"react\\";
-
-function Button(props) {
- const foo2 = function foo2() {
- return props.foo + \\"foo\\";
- };
- const bar = function bar() {
- return \\"bar\\";
- };
- const baz = function baz(i) {
- return i + foo2().length;
- };
-
- return (
- (null);
- 19 | const name= 'PatrickJS'
-> 20 | const onBlur = onBlur = function function onBlur() {
- | ^
- 21 | // Maintain focus
- 22 | inputRef.current.focus();
- 23 | }"
-`;
-
-exports[`React - stateType: variables > jsx > Typescript Test > Basic 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
-export interface MyBasicComponentProps {
- id: string;
+export interface Props {
+ showInput: boolean;
}
-export const DEFAULT_VALUES = {
- name: \\"Steve\\",
-};
-
-function MyBasicComponent(props: MyBasicComponentProps) {
- const name = \\"Steve\\";
- const underscore_fn_name = function underscore_fn_name() {
- return \\"bar\\";
+function MyBasicRefComponent(props: Props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const name = \\"PatrickJS\\";
+ const onBlur = function onBlur() {
+ // Maintain focus
+ inputRef.current.focus();
+ };
+ const lowerCaseName = function lowerCaseName() {
+ return name.toLowerCase();
};
- const age = 1;
- const sports = [\\"\\"];
+
+ useEffect(() => {
+ console.log(\\"Received an update\\");
+ }, [inputRef.current, inputNoArgRef.current]);
return (
<>
-
-
- );
-}
-
-export default Button;
-"
+"'function' is not allowed as a variable declaration name. (15:9)
+ 13 | function Button(props) {
+ 14 |
+> 15 | const function foo2() {
+ | ^
+ 16 | return props.foo + 'foo';
+ 17 | }
+ 18 | const function bar() {"
`;
exports[`React - stateType: variables > jsx > Javascript Test > import types 1`] = `
-"import * as React from \\"react\\";
-import RenderBlock from \\"./builder-render-block.raw\\";
-
-function RenderContent(props) {
- const getRenderContentProps = function getRenderContentProps(block, index) {
- return {
- block: block,
- index: index,
- };
- };
-
- return (
- {foo2()}
-{bar()}
-{baz(1)}
-
-
- );
-}
-
-export default Embed;
-"
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const elem = useRef(null);
+> 17 | const function foo(event) {
+ | ^
+ 18 | console.log('test2');
+ 19 | }
+ 20 | const function elem_onInitEditingBldr(event) {"
`;
exports[`React - stateType: variables > jsx > Javascript Test > onInit & onMount 1`] = `
@@ -2152,25 +1859,41 @@ export default MyBasicComponent;
`;
exports[`React - stateType: variables > jsx > Javascript Test > referencingFunInsideHook 1`] = `
-"'(' expected. (15:30)
- 13 |
- 14 | function OnUpdate(props) {
-> 15 | const foo = foo = function function foo(params) {}
- | ^
- 16 | const bar = bar = function function bar() {}
- 17 | const zoo = zoo = function function zoo() {
- 18 | const params = {"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props) {
+ const foo = function foo(params) {};
+ const bar = function bar() {};
+ const zoo = function zoo() {
+ const params = {
+ cb: bar,
+ };
+ };
+
+ useEffect(() => {
+ foo({
+ someOption: bar,
+ });
+ });
+
+ return ;
+}
+
+export default OnUpdate;
+"
`;
exports[`React - stateType: variables > jsx > Javascript Test > renderBlock 1`] = `
-"Identifier expected. (214:8)
- 212 | {shouldWrap() ? (
- 213 | <>{isEmptyHtmlElement(tag()) ? (
-> 214 | Test
-
-
-
- );
-}
-
-export default SetState;
-"
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const n= ['123']
+> 17 | const function someFn() {
+ | ^
+ 18 | n[0] = '123';
+ 19 | }
+ 20 |"
`;
exports[`React - stateType: variables > jsx > Javascript Test > showExpressions 1`] = `
@@ -2632,6 +2344,17 @@ export default TypeDependency;
"
`;
+exports[`React - stateType: variables > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+ return Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`React - stateType: variables > jsx > Javascript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -2647,27 +2370,14 @@ export default TypeExternalStore;
`;
exports[`React - stateType: variables > jsx > Javascript Test > typeGetterStore 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function TypeGetterStore(props) {
- const name = \\"test\\";
- const getName = function getName() {
- if (name === \\"a\\") {
- return \\"b\\";
- }
-
- return name;
- };
- const test = function test() {
- return \\"test\\";
- };
-
- return Hello {name}!
;
-}
-
-export default TypeGetterStore;
-"
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const name= 'test'
+> 17 | const function getName() {
+ | ^
+ 18 | if (name === 'a') {
+ 19 | return 'b';
+ 20 | }"
`;
exports[`React - stateType: variables > jsx > Javascript Test > use-style 1`] = `
@@ -2745,32 +2455,14 @@ export default MyComponent;
`;
exports[`React - stateType: variables > jsx > Javascript Test > useTarget 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useEffect } from \\"react\\";
-
-function UseTargetComponent(props) {
- const name = function name() {
- const prefix = 123;
- return prefix + \\"foo\\";
- };
- const lastName = \\"bar\\";
- const foo = \\"bar\\";
-
- useEffect(() => {
- console.log(foo);
- foo = \\"bar\\";
- console.log(\\"react\\");
- lastName = \\"baz\\";
- console.log(foo);
- foo = \\"baz\\";
- }, []);
-
- return {name()}
;
-}
-
-export default UseTargetComponent;
-"
+"'function' is not allowed as a variable declaration name. (16:9)
+ 14 | function UseTargetComponent(props) {
+ 15 |
+> 16 | const function name() {
+ | ^
+ 17 | const prefix = 123;
+ 18 | return prefix + 'foo';
+ 19 | }"
`;
exports[`React - stateType: variables > jsx > Javascript Test > webComponent 1`] = `
@@ -2815,67 +2507,119 @@ export default MyBasicComponent;
`;
exports[`React - stateType: variables > jsx > Typescript Test > AdvancedRef 1`] = `
-"'(' expected. (20:34)
- 18 | const inputNoArgRef = useRef
- (name = myEvent.target.value)}
- />
- Hello! I can run in React, Vue, Solid, or Liquid! >
+
+
+ );
+}
+
+export default MyBasicComponent;
+"
`;
exports[`React - stateType: variables > jsx > Typescript Test > Basic OnMount Update 1`] = `
@@ -3055,42 +2799,107 @@ export default MyBasicForComponent;
`;
exports[`React - stateType: variables > jsx > Typescript Test > BasicRef 1`] = `
-"'(' expected. (20:34)
- 18 | const inputNoArgRef = useRef(null);
- 19 | const name= 'PatrickJS'
-> 20 | const onBlur = onBlur = function function onBlur() {
- | ^
- 21 | // Maintain focus
- 22 | inputRef.current?.focus();
- 23 | }"
-`;
-
-exports[`React - stateType: variables > jsx > Typescript Test > BasicRefAssignment 1`] = `
-"'(' expected. (18:46)
- 16 | function MyBasicRefAssignmentComponent(props:Props) {
- 17 | const holdValueRef = useRef('Patrick');
-> 18 | const handlerClick = handlerClick = function function handlerClick(event: Event) {
- | ^
- 19 | event.preventDefault();
- 20 | console.log('current value', holdValueRef.current);
- 21 | holdValueRef.current = holdValueRef.current + 'JS';"
-`;
-
-exports[`React - stateType: variables > jsx > Typescript Test > BasicRefPrevious 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
+import { useRef } from \\"react\\";
export interface Props {
showInput: boolean;
}
-export function usePrevious(value: T) {
- // The ref object is a generic container whose current property is mutable ...
- // ... and can hold any value, similar to an instance property on a class
- let ref = useRef(null); // Store current value in ref
+function MyBasicRefComponent(props: Props) {
+ const inputRef = useRef(null);
+ const inputNoArgRef = useRef(null);
+ const name = \\"PatrickJS\\";
+ const onBlur = function onBlur() {
+ // Maintain focus
+ inputRef.current?.focus();
+ };
+ const lowerCaseName = function lowerCaseName() {
+ return name.toLowerCase();
+ };
- onUpdate(() => {
+ return (
+ <>
+ (value: T) {
+ // The ref object is a generic container whose current property is mutable ...
+ // ... and can hold any value, similar to an instance property on a class
+ let ref = useRef(null); // Store current value in ref
+
+ onUpdate(() => {
ref = value;
}, [value]); // Only re-run if value changes
// Return previous value (happens before update in useEffect above)
@@ -3157,78 +2966,14 @@ export default Button;
`;
exports[`React - stateType: variables > jsx > Typescript Test > Columns 1`] = `
-"import * as React from \\"react\\";
-
-type Column = {
- content: any; // TODO: Implement this when support for dynamic CSS lands
-
- width?: number;
-};
-export interface ColumnProps {
- columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
-
- space?: number; // TODO: Implement this when support for dynamic CSS lands
-
- stackColumnsAt?: \\"tablet\\" | \\"mobile\\" | \\"never\\"; // TODO: Implement this when support for dynamic CSS lands
-
- reverseColumnsWhenStacked?: boolean;
-}
-
-function Column(props: ColumnProps) {
- const getColumns = function getColumns() {
- return props.columns || [];
- };
- const getGutterSize = function getGutterSize() {
- return typeof props.space === \\"number\\" ? props.space || 0 : 20;
- };
- const getWidth = function getWidth(index: number) {
- const columns = getColumns();
- return (columns[index] && columns[index].width) || 100 / columns.length;
- };
- const getColumnCssWidth = function getColumnCssWidth(index: number) {
- const columns = getColumns();
- const gutterSize = getGutterSize();
- const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
- return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
- };
-
- return (
- <>
- (null);
- const scriptsInserted = [];
- const scriptsRun = [];
- const findAndRunScripts = function findAndRunScripts() {
- // TODO: Move this function to standalone one in '@builder.io/utils'
- if (elem.current && typeof window !== \\"undefined\\") {
- /** @type {HTMLScriptElement[]} */
- const scripts = elem.current.getElementsByTagName(\\"script\\");
-
- for (let i = 0; i < scripts.length; i++) {
- const script = scripts[i];
-
- if (script.src) {
- if (scriptsInserted.includes(script.src)) {
- continue;
- }
-
- scriptsInserted.push(script.src);
- const newScript = document.createElement(\\"script\\");
- newScript.async = true;
- newScript.src = script.src;
- document.head.appendChild(newScript);
- } else if (
- !script.type ||
- [
- \\"text/javascript\\",
- \\"application/javascript\\",
- \\"application/ecmascript\\",
- ].includes(script.type)
- ) {
- if (scriptsRun.includes(script.innerText)) {
- continue;
- }
-
- try {
- scriptsRun.push(script.innerText);
- new Function(script.innerText)();
- } catch (error) {
- console.warn(\\"\`CustomCode\`: Error running script:\\", error);
- }
- }
- }
- }
- };
-
- useEffect(() => {
- findAndRunScripts();
- }, []);
-
- return (
-
- );
-}
-
-export default CustomCode;
-"
+"'function' is not allowed as a variable declaration name. (22:7)
+ 20 | const scriptsInserted= []
+ 21 | const scriptsRun= []
+> 22 | const function findAndRunScripts() {
+ | ^
+ 23 | // TODO: Move this function to standalone one in '@builder.io/utils'
+ 24 | if (elem.current && typeof window !== 'undefined') {
+ 25 | /** @type {HTMLScriptElement[]} */"
`;
exports[`React - stateType: variables > jsx > Typescript Test > Embed 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
-
-export interface CustomCodeProps {
- code: string;
- replaceNodes?: boolean;
-}
-
-function CustomCode(props: CustomCodeProps) {
- const elem = useRef(null);
- const scriptsInserted = [];
- const scriptsRun = [];
- const findAndRunScripts = function findAndRunScripts() {
- // TODO: Move this function to standalone one in '@builder.io/utils'
- if (elem.current && typeof window !== \\"undefined\\") {
- /** @type {HTMLScriptElement[]} */
- const scripts = elem.current.getElementsByTagName(\\"script\\");
-
- for (let i = 0; i < scripts.length; i++) {
- const script = scripts[i];
-
- if (script.src) {
- if (scriptsInserted.includes(script.src)) {
- continue;
- }
-
- scriptsInserted.push(script.src);
- const newScript = document.createElement(\\"script\\");
- newScript.async = true;
- newScript.src = script.src;
- document.head.appendChild(newScript);
- } else if (
- !script.type ||
- [
- \\"text/javascript\\",
- \\"application/javascript\\",
- \\"application/ecmascript\\",
- ].includes(script.type)
- ) {
- if (scriptsRun.includes(script.innerText)) {
- continue;
- }
-
- try {
- scriptsRun.push(script.innerText);
- new Function(script.innerText)();
- } catch (error) {
- console.warn(\\"\`CustomCode\`: Error running script:\\", error);
- }
- }
- }
- }
- };
-
- useEffect(() => {
- findAndRunScripts();
- }, []);
-
- return (
-
- );
-}
-
-export default CustomCode;
-"
+"'function' is not allowed as a variable declaration name. (22:7)
+ 20 | const scriptsInserted= []
+ 21 | const scriptsRun= []
+> 22 | const function findAndRunScripts() {
+ | ^
+ 23 | // TODO: Move this function to standalone one in '@builder.io/utils'
+ 24 | if (elem.current && typeof window !== 'undefined') {
+ 25 | /** @type {HTMLScriptElement[]} */"
`;
exports[`React - stateType: variables > jsx > Typescript Test > Form 1`] = `
-"',' expected. (135:2797)
- 133 | if (contentType && contentType !== 'multipart/form-data') {
- 134 | if (
-> 135 | /* Zapier doesn't allow content-type header to be sent from browsers */ !(sendWithJs && props.action?.includes('zapier.com'))) { headers['content-type'] = contentType; } } const presubmitEvent = new CustomEvent('presubmit', { detail: { body } }); if (formRef.current) { formRef.current.dispatchEvent(presubmitEvent); if (presubmitEvent.defaultPrevented) { return; } } formState = 'sending'; const formUrl = \`\${builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io'}/api/v1/form-submit?apiKey=\${builder.apiKey}&to=\${btoa(props.sendSubmissionsToEmail || '')}&name=\${encodeURIComponent(props.name || '')}\`; fetch(props.sendSubmissionsTo === 'email' ? formUrl : props.action! /* TODO: throw error if no action URL */ , { body, headers, method: props.method || 'post' }).then(async res => { let body; const contentType = res.headers.get('content-type'); if (contentType && contentType.indexOf('application/json') !== -1) { body = await res.json(); } else { body = await res.text(); } if (!res.ok && props.errorMessagePath) { /* TODO: allow supplying an error formatter function */ let message = get(body, props.errorMessagePath); if (message) { if (typeof message !== 'string') { /* TODO: ideally convert json to yaml so it woul dbe like error: - email has been taken */ message = JSON.stringify(message); } formErrorMessage = message; } } responseData = body; formState = res.ok ? 'success' : 'error'; if (res.ok) { const submitSuccessEvent = new CustomEvent('submit:success', { detail: { res, body } }); if (formRef.current) { formRef.current.dispatchEvent(submitSuccessEvent); if (submitSuccessEvent.defaultPrevented) { return; } /* TODO: option to turn this on/off? */ if (props.resetFormOnSubmit !== false) { formRef.current.reset(); } } /* TODO: client side route event first that can be preventDefaulted */ if (props.successUrl) { if (formRef.current) { const event = new CustomEvent('route', { detail: { url: props.successUrl } }); formRef.current.dispatchEvent(event); if (!event.defaultPrevented) { location.href = props.successUrl; } } else { location.href = props.successUrl; } } } }, err => { const submitErrorEvent = new CustomEvent('submit:error', { detail: { error: err } }); if (formRef.current) { formRef.current.dispatchEvent(submitErrorEvent); if (submitErrorEvent.defaultPrevented) { return; } } responseData = err; formState = 'error'; }); } } return ( <> ); } export default FormComponent;
- | ^
- 136 |
- 137 |
- 138 |"
+"'function' is not allowed as a variable declaration name. (43:7)
+ 41 | const responseData= null
+ 42 | const formErrorMessage= ''
+> 43 | const function submissionState() {
+ | ^
+ 44 | return Builder.isEditing && props.previewState || formState;
+ 45 | }
+ 46 | const function onSubmit(event: Event & {"
`;
exports[`React - stateType: variables > jsx > Typescript Test > Image 1`] = `
-"'(' expected. (42:40)
- 40 | return !!props.lazy && isBrowser();
- 41 | }
-> 42 | const isBrowser = isBrowser = function function isBrowser() {
- | ^
- 43 | return typeof window !== 'undefined' && window.navigator.product != 'ReactNative';
- 44 | }
- 45 | const load= false"
+"'function' is not allowed as a variable declaration name. (36:7)
+ 34 | const scrollListener= null
+ 35 | const imageLoaded= false
+> 36 | const function setLoaded() {
+ | ^
+ 37 | imageLoaded = true;
+ 38 | }
+ 39 | const function useLazyLoading() {"
`;
exports[`React - stateType: variables > jsx > Typescript Test > Image State 1`] = `
@@ -3588,25 +3162,14 @@ export default FormInputComponent;
`;
exports[`React - stateType: variables > jsx > Typescript Test > InputParent 1`] = `
-"import * as React from \\"react\\";
-import FormInputComponent from \\"./input.raw\\";
-
-function Stepper(props: any) {
- const handleChange = function handleChange(value: string) {
- console.log(value);
- };
-
- return (
- handleChange(value)}
- />
- );
-}
-
-export default Stepper;
-"
+"'function' is not allowed as a variable declaration name. (15:9)
+ 13 | function Stepper(props:any) {
+ 14 |
+> 15 | const function handleChange(value: string) {
+ | ^
+ 16 | console.log(value);
+ 17 | }
+ 18 |"
`;
exports[`React - stateType: variables > jsx > Typescript Test > NestedStore 1`] = `
@@ -3811,155 +3374,47 @@ export default SlotCode;
`;
exports[`React - stateType: variables > jsx > Typescript Test > Stamped.io 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useEffect } from \\"react\\";
-
-type SmileReviewsProps = {
- productId: string;
- apiKey: string;
-};
-import { kebabCase, snakeCase } from \\"lodash\\";
-
-function SmileReviews(props: SmileReviewsProps) {
- const reviews = [];
- const name = \\"test\\";
- const showReviewPrompt = false;
- const kebabCaseValue = function kebabCaseValue() {
- return kebabCase(\\"testThat\\");
- };
- const snakeCaseValue = function snakeCaseValue() {
- return snakeCase(\\"testThis\\");
- };
-
- useEffect(() => {
- fetch(
- \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
- props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
- }&productId=\${props.productId || \\"2410511106127\\"}\`
- )
- .then((res) => res.json())
- .then((data) => {
- reviews = data.data;
- });
- }, []);
-
- return (
- <>
-
- | ^
- 40 | Hello {name} {props.actions?.map((action) => (
- 41 | "
+"'function' is not allowed as a variable declaration name. (19:7)
+ 17 | const TagName= 'div'
+ 18 | const tag= 'span'
+> 19 | const function TagNameGetter() {
+ | ^
+ 20 | return 'span';
+ 21 | }
+ 22 |"
`;
exports[`React - stateType: variables > jsx > Typescript Test > basicForwardRef 1`] = `
@@ -4583,6 +4002,15 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
+ {props.showInput ? (
+ <>
+ onBlur()}
+ onChange={(event) => (name = event.target.value)}
+ />
+
+
+
+ ) : null}
+ Hello
+ {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+ Component!
);
}
-export default MyBasicComponent;
+export default MyBasicRefComponent;
"
`;
+exports[`React - stateType: variables > jsx > Typescript Test > Basic 1`] = `
+"'function' is not allowed as a variable declaration name. (21:7)
+ 19 |
+ 20 | const name= 'Steve'
+> 21 | const function underscore_fn_name() {
+ | ^
+ 22 | return 'bar';
+ 23 | }
+ 24 | const age= 1"
+`;
+
exports[`React - stateType: variables > jsx > Typescript Test > Basic Context 1`] = `
-"'(' expected. (16:38)
- 14 | function MyBasicComponent(props:any) {
- 15 | const name= 'PatrickJS'
-> 16 | const onChange = onChange = function function onChange() {
- | ^
- 17 | const change = myService.method('change');
- 18 | console.log(change);
- 19 | }"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useContext, useRef, useEffect } from \\"react\\";
+import { Injector, MyService, createInjector } from \\"@dummy/injection-js\\";
+
+function MyBasicComponent(props: any) {
+ const name = \\"PatrickJS\\";
+ const onChange = function onChange() {
+ const change = myService.method(\\"change\\");
+ console.log(change);
+ };
+
+ const myService = useContext(MyService);
+
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ const hi = myService.method(\\"hi\\");
+ console.log(hi);
+ hasInitialized.current = true;
+ }
+
+ useEffect(() => {
+ const bye = myService.method(\\"hi\\");
+ console.log(bye);
+ }, []);
+
+ return (
+
+ {myService.method(\\"hello\\") + name}
+ Hello! I can run in React, Vue, Solid, or Liquid!
+ onChange} />
+
+
+ {props.showInput ? (
+ <>
+ onBlur()}
+ onChange={(event) => (name = event.target.value)}
+ />
+
+
+
+ ) : null}
+ Hello
+ {lowerCaseName()}! I can run in React, Qwik, Vue, Solid, or Web
+ Component!
+
+
+
+ );
+}
+
+export default MyBasicRefComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > BasicRefAssignment 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef } from \\"react\\";
+
+export interface Props {
+ showInput: boolean;
+}
+
+function MyBasicRefAssignmentComponent(props: Props) {
+ const holdValueRef = useRef(\\"Patrick\\");
+ const handlerClick = function handlerClick(event: Event) {
+ event.preventDefault();
+ console.log(\\"current value\\", holdValueRef.current);
+ holdValueRef.current = holdValueRef.current + \\"JS\\";
+ };
+
+ return (
+
+
+
+ );
+}
+
+export default MyBasicRefAssignmentComponent;
+"
+`;
+
+exports[`React - stateType: variables > jsx > Typescript Test > BasicRefPrevious 1`] = `
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useRef, useEffect } from \\"react\\";
+
+export interface Props {
+ showInput: boolean;
+}
+
+export function usePrevious
- {props.columns?.map((column, index) => (
-
-
-
- );
-}
-
-export default Column;
-"
+"'function' is not allowed as a variable declaration name. (28:9)
+ 26 | function Column(props:ColumnProps) {
+ 27 |
+> 28 | const function getColumns() {
+ | ^
+ 29 | return props.columns || [];
+ 30 | }
+ 31 | const function getGutterSize() {"
`;
exports[`React - stateType: variables > jsx > Typescript Test > ContentSlotHtml 1`] = `
@@ -3259,229 +3004,58 @@ export default ContentSlotCode;
`;
exports[`React - stateType: variables > jsx > Typescript Test > ContentSlotJSX 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-type Props = {
- [key: string]: string | JSX.Element;
-};
-import type { JSX } from \\"../../../../jsx-runtime\\";
-
-function ContentSlotJsxCode(props: Props) {
- const name = \\"king\\";
- const showContent = false;
- const cls = function cls() {
- return props.slotContent && props.children ? \`\${name}-content\` : \\"\\";
- };
- const show = function show() {
- props.slotContent ? 1 : \\"\\";
- };
-
- return (
- <>
- {props.slotReference ? (
- <>
-
- {column.content}
- {index}
-
- ))}
- show()}
- className={cls()}
- >
- {showContent && props.slotContent ? (
- <>{props.content || \\"{props.content}\\"}
- ) : null}
-
-
- ) : null}
-
- );
-}
-
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
-export default ContentSlotJsxCode;
-"
+"'function' is not allowed as a variable declaration name. (20:7)
+ 18 | const name= 'king'
+ 19 | const showContent= false
+> 20 | const function cls() {
+ | ^
+ 21 | return props.slotContent && props.children ? \`\${name}-content\` : '';
+ 22 | }
+ 23 | const function show() {"
`;
exports[`React - stateType: variables > jsx > Typescript Test > CustomCode 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useRef, useEffect } from \\"react\\";
-
-export interface CustomCodeProps {
- code: string;
- replaceNodes?: boolean;
-}
-
-function CustomCode(props: CustomCodeProps) {
- const elem = useRef
-
-
- -
{props.children}
-
-
- {showReviewPrompt || \\"asdf\\" ? (
- <>
-
-
-
-
-
- ) : null}
- {reviews?.map((review, index) => (
-
-
-
- );
-}
-
-export default SmileReviews;
-"
+"'function' is not allowed as a variable declaration name. (22:7)
+ 20 | const name= 'test'
+ 21 | const showReviewPrompt= false
+> 22 | const function kebabCaseValue() {
+ | ^
+ 23 | return kebabCase('testThat');
+ 24 | }
+ 25 | const function snakeCaseValue() {"
`;
exports[`React - stateType: variables > jsx > Typescript Test > StoreComment 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function StringLiteralStore(props: any) {
- const foo = true;
- const bar = function bar() {};
-
- return <>{foo};
-}
-
-export default StringLiteralStore;
-"
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const foo= true
+> 17 | const function bar() {}
+ | ^
+ 18 |
+ 19 |
+ 20 |"
`;
exports[`React - stateType: variables > jsx > Typescript Test > StoreShadowVars 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function MyComponent(props: any) {
- const errors = {};
- const foo = function foo(errors) {
- return errors;
- };
-
- return <>{foo(errors)};
-}
-
-export default MyComponent;
-"
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const errors= {}
+> 17 | const function foo(errors) {
+ | ^
+ 18 | return errors;
+ 19 | }
+ 20 |"
`;
exports[`React - stateType: variables > jsx > Typescript Test > StoreWithState 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function MyComponent(props: any) {
- const foo = false;
- const bar = function bar() {
- return foo;
- };
-
- return <>{bar()};
-}
-
-export default MyComponent;
-"
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const foo= false
+> 17 | const function bar() {
+ | ^
+ 18 | return foo;
+ 19 | }
+ 20 |"
`;
exports[`React - stateType: variables > jsx > Typescript Test > Submit 1`] = `
@@ -4034,57 +3489,30 @@ export interface TextareaProps {
function Textarea(props: TextareaProps) {
return (
- );
-}
-
-export default Textarea;
-"
-`;
-
-exports[`React - stateType: variables > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useEffect } from \\"react\\";
-
-type MyProps = {
- onChange?: (active: boolean) => void;
-};
-type MyStore = {
- _id?: string;
- _active?: boolean;
- _do?: (id?: string) => void;
-};
-
-function UseValueAndFnFromStore(props: MyProps) {
- const _id = \\"abc\\";
- const _active = false;
- const _do = function _do(id?: string) {
- _active = !!id;
-
- if (props.onChange) {
- props.onChange(_active);
- }
- };
-
- useEffect(() => {
- if (_do) {
- _do(_id);
- }
- });
-
- return
-
-
- ))}
-
-
- N: {index}
- {review.author}
- {review.reviewMessage}
- Test
;
+ {...props.attributes}
+ placeholder={props.placeholder}
+ name={props.name}
+ value={props.value}
+ defaultValue={props.defaultValue}
+ />
+ );
}
-export default UseValueAndFnFromStore;
+export default Textarea;
"
`;
+exports[`React - stateType: variables > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
+"'function' is not allowed as a variable declaration name. (25:7)
+ 23 | const _id= 'abc'
+ 24 | const _active= false
+> 25 | const function _do(id?: string) {
+ | ^
+ 26 | _active = !!id;
+ 27 |
+ 28 | if (props.onChange) {"
+`;
+
exports[`React - stateType: variables > jsx > Typescript Test > Video 1`] = `
"import * as React from \\"react\\";
@@ -4144,23 +3572,14 @@ export default Video;
`;
exports[`React - stateType: variables > jsx > Typescript Test > arrowFunctionInUseStore 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-function MyComponent(props: any) {
- const name = \\"steve\\";
- const setName = function setName(value) {
- name = value;
- };
- const updateNameWithArrowFn = function updateNameWithArrowFn(value) {
- name = value;
- };
-
- return Hello {name}
;
-}
-
-export default MyComponent;
-"
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const name= 'steve'
+> 17 | const function setName(value) {
+ | ^
+ 18 | name = value;
+ 19 | }
+ 20 | const function updateNameWithArrowFn(value) {"
`;
exports[`React - stateType: variables > jsx > Typescript Test > basicForFragment 1`] = `
@@ -4198,14 +3617,14 @@ export default BasicForFragment;
`;
exports[`React - stateType: variables > jsx > Typescript Test > basicForNoTagReference 1`] = `
-"Identifier expected. (39:17)
- 37 | return (
- 38 |
-> 39 |
{props.link ? (
@@ -4607,15 +4035,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -4633,6 +4052,13 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -4657,13 +4083,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -4760,64 +4179,25 @@ export default FigmaButton;
`;
exports[`React - stateType: variables > jsx > Typescript Test > getterState 1`] = `
-"import * as React from \\"react\\";
-
-export interface ButtonProps {
- foo: string;
-}
-
-function Button(props: ButtonProps) {
- const foo2 = function foo2() {
- return props.foo + \\"foo\\";
- };
- const bar = function bar() {
- return \\"bar\\";
- };
- const baz = function baz(i: number) {
- return i + foo2().length;
- };
-
- return (
- (null);
- const foo = function foo(event) {
- console.log(\\"test2\\");
- };
- const elem_onInitEditingBldr = function elem_onInitEditingBldr(event) {
- console.log(\\"test\\");
- foo(event);
- };
-
- useEffect(() => {
- elem.current?.addEventListener(\\"initEditingBldr\\", elem_onInitEditingBldr);
- return () =>
- elem.current?.removeEventListener(
- \\"initEditingBldr\\",
- elem_onInitEditingBldr
- );
- }, []);
-
- useEffect(() => {
- elem.current.dispatchEvent(new CustomEvent(\\"initEditingBldr\\"));
- }, []);
-
- return (
- (null);
+> 17 | const function foo(event) {
+ | ^
+ 18 | console.log('test2');
+ 19 | }
+ 20 | const function elem_onInitEditingBldr(event) {"
`;
exports[`React - stateType: variables > jsx > Typescript Test > onInit & onMount 1`] = `
@@ -5273,25 +4625,41 @@ export default MyBasicComponent;
`;
exports[`React - stateType: variables > jsx > Typescript Test > referencingFunInsideHook 1`] = `
-"'(' expected. (15:30)
- 13 |
- 14 | function OnUpdate(props:any) {
-> 15 | const foo = foo = function function foo(params) {}
- | ^
- 16 | const bar = bar = function function bar() {}
- 17 | const zoo = zoo = function function zoo() {
- 18 | const params = {"
+"\\"use client\\";
+import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
+
+function OnUpdate(props: any) {
+ const foo = function foo(params) {};
+ const bar = function bar() {};
+ const zoo = function zoo() {
+ const params = {
+ cb: bar,
+ };
+ };
+
+ useEffect(() => {
+ foo({
+ someOption: bar,
+ });
+ });
+
+ return ;
+}
+
+export default OnUpdate;
+"
`;
exports[`React - stateType: variables > jsx > Typescript Test > renderBlock 1`] = `
-"Identifier expected. (222:8)
- 220 | {shouldWrap() ? (
- 221 | <>{isEmptyHtmlElement(tag()) ? (
-> 222 |
-
- );
-}
-
-export default Button;
-"
+"'function' is not allowed as a variable declaration name. (17:9)
+ 15 | function Button(props:ButtonProps) {
+ 16 |
+> 17 | const function foo2() {
+ | ^
+ 18 | return props.foo + 'foo';
+ 19 | }
+ 20 | const function bar() {"
`;
exports[`React - stateType: variables > jsx > Typescript Test > import types 1`] = `
-"import * as React from \\"react\\";
-
-type RenderContentProps = {
- options?: GetContentOptions;
- content: BuilderContent;
- renderContentProps: RenderBlockProps;
-};
-import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
-import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
-
-function RenderContent(props: RenderContentProps) {
- const getRenderContentProps = function getRenderContentProps(block, index) {
- return {
- block: block,
- index: index,
- };
- };
-
- return (
- {foo2()}
-{bar()}
-{baz(1)}
-
-
- );
-}
-
-export default Embed;
-"
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const elem = useRefTest
-
-
-
- );
-}
-
-export default SetState;
-"
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const n= ['123']
+> 17 | const function someFn() {
+ | ^
+ 18 | n[0] = '123';
+ 19 | }
+ 20 |"
`;
exports[`React - stateType: variables > jsx > Typescript Test > showExpressions 1`] = `
@@ -5806,6 +5163,18 @@ export default TypeDependency;
"
`;
+exports[`React - stateType: variables > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+ return Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`React - stateType: variables > jsx > Typescript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -5822,33 +5191,14 @@ export default TypeExternalStore;
`;
exports[`React - stateType: variables > jsx > Typescript Test > typeGetterStore 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-
-type GetterStore = {
- getName: () => string;
- name: string;
- get test(): string;
-};
-
-function TypeGetterStore(props: any) {
- const name = \\"test\\";
- const getName = function getName() {
- if (name === \\"a\\") {
- return \\"b\\";
- }
-
- return name;
- };
- const test = function test() {
- return \\"test\\";
- };
-
- return Hello {name}!
;
-}
-
-export default TypeGetterStore;
-"
+"'function' is not allowed as a variable declaration name. (21:7)
+ 19 |
+ 20 | const name= 'test'
+> 21 | const function getName() {
+ | ^
+ 22 | if (name === 'a') {
+ 23 | return 'b';
+ 24 | }"
`;
exports[`React - stateType: variables > jsx > Typescript Test > use-style 1`] = `
@@ -5926,32 +5276,14 @@ export default MyComponent;
`;
exports[`React - stateType: variables > jsx > Typescript Test > useTarget 1`] = `
-"\\"use client\\";
-import * as React from \\"react\\";
-import { useEffect } from \\"react\\";
-
-function UseTargetComponent(props: any) {
- const name = function name() {
- const prefix = 123;
- return prefix + \\"foo\\";
- };
- const lastName = \\"bar\\";
- const foo = \\"bar\\";
-
- useEffect(() => {
- console.log(foo);
- foo = \\"bar\\";
- console.log(\\"react\\");
- lastName = \\"baz\\";
- console.log(foo);
- foo = \\"baz\\";
- }, []);
-
- return {name()}
;
-}
-
-export default UseTargetComponent;
-"
+"'function' is not allowed as a variable declaration name. (16:9)
+ 14 | function UseTargetComponent(props:any) {
+ 15 |
+> 16 | const function name() {
+ | ^
+ 17 | const prefix = 123;
+ 18 | return prefix + 'foo';
+ 19 | }"
`;
exports[`React - stateType: variables > jsx > Typescript Test > webComponent 1`] = `
@@ -6092,21 +5424,19 @@ function MyComponent(props) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`React - stateType: variables > svelte > Javascript Test > context 1`] = `
-"'>' expected. (36:13)
- 34 | return (
- 35 |
-> 36 | <'activeTab'.Provider value={activeTab}>{activeTab}
+"'>' expected. (33:13)
+ 31 | return (
+ 32 |
+> 33 | <'activeTab'.Provider value={activeTab}>{activeTab}
| ^
- 37 |
- 38 |
- 39 |"
+ 34 |
+ 35 |
+ 36 |"
`;
exports[`React - stateType: variables > svelte > Javascript Test > each 1`] = `
@@ -6130,14 +5460,25 @@ export default MyComponent;
`;
exports[`React - stateType: variables > svelte > Javascript Test > eventHandlers 1`] = `
-"'(' expected. (15:30)
- 13 |
- 14 | function MyComponent(props) {
-> 15 | const log = log = function function log(msg = 'hello') {
- | ^
- 16 | console.log(msg);
- 17 | }
- 18 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const log = function log(msg = \\"hello\\") {
+ console.log(msg);
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+export default MyComponent;
+"
`;
exports[`React - stateType: variables > svelte > Javascript Test > html 1`] = `
@@ -6155,14 +5496,30 @@ export default MyComponent;
`;
exports[`React - stateType: variables > svelte > Javascript Test > ifElse 1`] = `
-"'(' expected. (16:34)
- 14 | function MyComponent(props) {
- 15 | const show= true
-> 16 | const toggle = toggle = function function toggle() {
- | ^
- 17 | show = !show;
- 18 | }
- 19 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props) {
+ const show = true;
+ const toggle = function toggle() {
+ show = !show;
+ };
+
+ return (
+ <>
+ {show ? (
+ <>
+
+
+ ) : (
+
+ )}
+
+ );
+}
+
+export default MyComponent;
+"
`;
exports[`React - stateType: variables > svelte > Javascript Test > imports 1`] = `
@@ -6195,11 +5552,9 @@ function MyComponent(props) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
@@ -6214,19 +5569,46 @@ export default MyComponent;
`;
exports[`React - stateType: variables > svelte > Javascript Test > reactive 1`] = `
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const name= \\"Steve\\"
+> 17 | const function lowercaseName() {
+ | ^
+ 18 | return name.toLowerCase();
+ 19 | }
+ 20 |"
+`;
+
+exports[`React - stateType: variables > svelte > Javascript Test > reactiveWithFn 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
function MyComponent(props) {
- const name = \\"Steve\\";
- const lowercaseName = function lowercaseName() {
- return name.toLowerCase();
+ const a = 2;
+ const b = 5;
+ const result = null;
+ const calculateResult = function calculateResult(a_, b_) {
+ result = a_ * b_;
};
+ useEffect(() => {
+ calculateResult(a, b);
+ }, [a, b]);
+
return (
-
- Lowercase: {lowercaseName()}
+ (a = event.target.value)}
+ value={a}
+ />
+ (b = event.target.value)}
+ value={b}
+ />
+ Result: {result}
);
}
@@ -6235,17 +5617,6 @@ export default MyComponent;
"
`;
-exports[`React - stateType: variables > svelte > Javascript Test > reactiveWithFn 1`] = `
-"'(' expected. (18:52)
- 16 | const b= 5
- 17 | const result= null
-> 18 | const calculateResult = calculateResult = function function calculateResult(a_, b_) {
- | ^
- 19 | result = a_ * b_;
- 20 | }
- 21 |"
-`;
-
exports[`React - stateType: variables > svelte > Javascript Test > slots 1`] = `
"import * as React from \\"react\\";
@@ -6423,21 +5794,19 @@ function MyComponent(props: any) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`React - stateType: variables > svelte > Typescript Test > context 1`] = `
-"'>' expected. (36:13)
- 34 | return (
- 35 |
-> 36 | <'activeTab'.Provider value={activeTab}>{activeTab}
+"'>' expected. (33:13)
+ 31 | return (
+ 32 |
+> 33 | <'activeTab'.Provider value={activeTab}>{activeTab}
| ^
- 37 |
- 38 |
- 39 |"
+ 34 |
+ 35 |
+ 36 |"
`;
exports[`React - stateType: variables > svelte > Typescript Test > each 1`] = `
@@ -6461,14 +5830,25 @@ export default MyComponent;
`;
exports[`React - stateType: variables > svelte > Typescript Test > eventHandlers 1`] = `
-"'(' expected. (15:30)
- 13 |
- 14 | function MyComponent(props:any) {
-> 15 | const log = log = function function log(msg = 'hello') {
- | ^
- 16 | console.log(msg);
- 17 | }
- 18 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const log = function log(msg = \\"hello\\") {
+ console.log(msg);
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+export default MyComponent;
+"
`;
exports[`React - stateType: variables > svelte > Typescript Test > html 1`] = `
@@ -6486,14 +5866,30 @@ export default MyComponent;
`;
exports[`React - stateType: variables > svelte > Typescript Test > ifElse 1`] = `
-"'(' expected. (16:34)
- 14 | function MyComponent(props:any) {
- 15 | const show= true
-> 16 | const toggle = toggle = function function toggle() {
- | ^
- 17 | show = !show;
- 18 | }
- 19 |"
+"\\"use client\\";
+import * as React from \\"react\\";
+
+function MyComponent(props: any) {
+ const show = true;
+ const toggle = function toggle() {
+ show = !show;
+ };
+
+ return (
+ <>
+ {show ? (
+ <>
+
+
+ ) : (
+
+ )}
+
+ );
+}
+
+export default MyComponent;
+"
`;
exports[`React - stateType: variables > svelte > Typescript Test > imports 1`] = `
@@ -6526,11 +5922,9 @@ function MyComponent(props: any) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
@@ -6545,19 +5939,46 @@ export default MyComponent;
`;
exports[`React - stateType: variables > svelte > Typescript Test > reactive 1`] = `
+"'function' is not allowed as a variable declaration name. (17:7)
+ 15 |
+ 16 | const name= \\"Steve\\"
+> 17 | const function lowercaseName() {
+ | ^
+ 18 | return name.toLowerCase();
+ 19 | }
+ 20 |"
+`;
+
+exports[`React - stateType: variables > svelte > Typescript Test > reactiveWithFn 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
+import { useEffect } from \\"react\\";
function MyComponent(props: any) {
- const name = \\"Steve\\";
- const lowercaseName = function lowercaseName() {
- return name.toLowerCase();
+ const a = 2;
+ const b = 5;
+ const result = null;
+ const calculateResult = function calculateResult(a_, b_) {
+ result = a_ * b_;
};
+ useEffect(() => {
+ calculateResult(a, b);
+ }, [a, b]);
+
return (
-
- Lowercase: {lowercaseName()}
+ (a = event.target.value)}
+ value={a}
+ />
+ (b = event.target.value)}
+ value={b}
+ />
+ Result: {result}
);
}
@@ -6566,17 +5987,6 @@ export default MyComponent;
"
`;
-exports[`React - stateType: variables > svelte > Typescript Test > reactiveWithFn 1`] = `
-"'(' expected. (18:52)
- 16 | const b= 5
- 17 | const result= null
-> 18 | const calculateResult = calculateResult = function function calculateResult(a_, b_) {
- | ^
- 19 | result = a_ * b_;
- 20 | }
- 21 |"
-`;
-
exports[`React - stateType: variables > svelte > Typescript Test > slots 1`] = `
"import * as React from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 98120ce9d2..e9d00eaa2b 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -556,6 +556,12 @@ import * as React from \\"react\\";
import { useState } from \\"react\\";
function ContentSlotJsxCode(props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const [name, setName] = useState(() => \\"king\\");
const [showContent, setShowContent] = useState(() => false);
@@ -593,12 +599,6 @@ function ContentSlotJsxCode(props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -2087,6 +2087,15 @@ exports[`React - stateType: useState > jsx > Javascript Test > defaultProps 1`]
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -2111,15 +2120,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -2129,6 +2129,13 @@ exports[`React - stateType: useState > jsx > Javascript Test > defaultPropsOutsi
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -2153,13 +2160,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -3019,7 +3019,6 @@ function RenderContent(props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -3467,6 +3466,17 @@ export default TypeDependency;
"
`;
+exports[`React - stateType: useState > jsx > Javascript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+
+function TypeExternalProps(props) {
+ return
Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`React - stateType: useState > jsx > Javascript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -4275,6 +4285,12 @@ type Props = {
import type { JSX } from \\"../../../../jsx-runtime\\";
function ContentSlotJsxCode(props: Props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const [name, setName] = useState(() => \\"king\\");
const [showContent, setShowContent] = useState(() => false);
@@ -4312,12 +4328,6 @@ function ContentSlotJsxCode(props: Props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -6040,6 +6050,15 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
{props.link ? (
@@ -6064,15 +6083,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -6090,6 +6100,13 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -6114,13 +6131,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -7067,7 +7077,6 @@ function RenderContent(props: Props) {
useEffect(() => {
sendComponentsToVisualEditor(props.customComponents);
}, []);
-
useEffect(() => {
dispatchNewContentToVisualEditor(props.content);
}, [props.content]);
@@ -7560,6 +7569,18 @@ export default TypeDependency;
"
`;
+exports[`React - stateType: useState > jsx > Typescript Test > typeExternalProps 1`] = `
+"import * as React from \\"react\\";
+import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+ return handleChange(value)}
- />
- );
-}
-
-export default Stepper;
-"
+"'function' is not allowed as a variable declaration name. (21:9)
+ 19 | function Stepper(props) {
+ 20 |
+> 21 | const function handleChange(value) {
+ | ^
+ 22 | console.log(value);
+ 23 | }
+ 24 |"
`;
exports[`RSC > jsx > Javascript Test > NestedStore 1`] = `
@@ -2184,6 +2114,15 @@ exports[`RSC > jsx > Javascript Test > defaultProps 1`] = `
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`React - stateType: useState > jsx > Typescript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -8053,21 +8074,19 @@ function MyComponent(props) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`React - stateType: useState > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={activeTab}>{activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={activeTab}>{activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`React - stateType: useState > svelte > Javascript Test > each 1`] = `
@@ -8188,11 +8207,9 @@ function MyComponent(props) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
@@ -8455,21 +8472,19 @@ function MyComponent(props: any) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`React - stateType: useState > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={activeTab}>{activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={activeTab}>{activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`React - stateType: useState > svelte > Typescript Test > each 1`] = `
@@ -8590,11 +8605,9 @@ function MyComponent(props: any) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index cfd4fdd68a..9bc84bdc36 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -482,68 +482,14 @@ export default Button;
`;
exports[`RSC > jsx > Javascript Test > Columns 1`] = `
-"/**
- useMetadata:
- {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
- */
-
-import * as React from \\"react\\";
-
-function Column(props) {
- const getColumns = function getColumns() {
- return props.columns || [];
- };
- const getGutterSize = function getGutterSize() {
- return typeof props.space === \\"number\\" ? props.space || 0 : 20;
- };
- const getWidth = function getWidth(index) {
- const columns = getColumns();
- return (columns[index] && columns[index].width) || 100 / columns.length;
- };
- const getColumnCssWidth = function getColumnCssWidth(index) {
- const columns = getColumns();
- const gutterSize = getGutterSize();
- const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
- return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
- };
-
- return (
- <>
-
- {props.columns?.map((column, index) => (
-
-
-
- );
-}
-
-export default Column;
-"
+"'function' is not allowed as a variable declaration name. (21:9)
+ 19 | function Column(props) {
+ 20 |
+> 21 | const function getColumns() {
+ | ^
+ 22 | return props.columns || [];
+ 23 | }
+ 24 | const function getGutterSize() {"
`;
exports[`RSC > jsx > Javascript Test > ContentSlotHtml 1`] = `
@@ -578,6 +524,12 @@ import * as React from \\"react\\";
import { useState } from \\"react\\";
function ContentSlotJsxCode(props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const [name, setName] = useState(() => \\"king\\");
const [showContent, setShowContent] = useState(() => false);
@@ -615,12 +567,6 @@ function ContentSlotJsxCode(props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -1215,30 +1161,14 @@ export default FormInputComponent;
`;
exports[`RSC > jsx > Javascript Test > InputParent 1`] = `
-"/**
- useMetadata:
- {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
- */
-
-import * as React from \\"react\\";
-import FormInputComponent from \\"./input.raw\\";
-
-function Stepper(props) {
- const handleChange = function handleChange(value) {
- console.log(value);
- };
-
- return (
-
- {column.content}
- {index}
-
- ))}
-
{props.link ? (
@@ -2208,15 +2147,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -2226,6 +2156,13 @@ exports[`RSC > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
import * as React from \\"react\\";
function Button(props) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -2250,13 +2187,6 @@ function Button(props) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -2356,63 +2286,25 @@ export default FigmaButton;
`;
exports[`RSC > jsx > Javascript Test > getterState 1`] = `
-"/**
- useMetadata:
- {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
- */
-
-import * as React from \\"react\\";
-
-function Button(props) {
- const foo2 = function foo2() {
- return props.foo + \\"foo\\";
- };
- const bar = function bar() {
- return \\"bar\\";
- };
- const baz = function baz(i) {
- return i + foo2().length;
- };
-
- return (
- handleChange(value)}
- />
- );
-}
-
-export default Stepper;
-"
+"'function' is not allowed as a variable declaration name. (21:9)
+ 19 | function Stepper(props:any) {
+ 20 |
+> 21 | const function handleChange(value: string) {
+ | ^
+ 22 | console.log(value);
+ 23 | }
+ 24 |"
`;
exports[`RSC > jsx > Typescript Test > NestedStore 1`] = `
@@ -6121,6 +5943,15 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {
+ console.log(\\"hi\\");
+ },
+ ...props,
+ };
return (
-
- );
-}
-
-export default Button;
-"
+"'function' is not allowed as a variable declaration name. (21:9)
+ 19 | function Button(props) {
+ 20 |
+> 21 | const function foo2() {
+ | ^
+ 22 | return props.foo + 'foo';
+ 23 | }
+ 24 | const function bar() {"
`;
exports[`RSC > jsx > Javascript Test > import types 1`] = `
-"/**
- useMetadata:
- {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
- */
-
-import * as React from \\"react\\";
-import RenderBlock from \\"./builder-render-block.raw\\";
-
-function RenderContent(props) {
- const getRenderContentProps = function getRenderContentProps(block, index) {
- return {
- block: block,
- index: index,
- };
- };
-
- return (
- {foo2()}
-{bar()}
-{baz(1)}
-Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`RSC > jsx > Javascript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -4159,83 +4066,14 @@ export default Button;
`;
exports[`RSC > jsx > Typescript Test > Columns 1`] = `
-"/**
- useMetadata:
- {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
- */
-
-import * as React from \\"react\\";
-
-type Column = {
- content: any; // TODO: Implement this when support for dynamic CSS lands
-
- width?: number;
-};
-export interface ColumnProps {
- columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
-
- space?: number; // TODO: Implement this when support for dynamic CSS lands
-
- stackColumnsAt?: \\"tablet\\" | \\"mobile\\" | \\"never\\"; // TODO: Implement this when support for dynamic CSS lands
-
- reverseColumnsWhenStacked?: boolean;
-}
-
-function Column(props: ColumnProps) {
- const getColumns = function getColumns() {
- return props.columns || [];
- };
- const getGutterSize = function getGutterSize() {
- return typeof props.space === \\"number\\" ? props.space || 0 : 20;
- };
- const getWidth = function getWidth(index: number) {
- const columns = getColumns();
- return (columns[index] && columns[index].width) || 100 / columns.length;
- };
- const getColumnCssWidth = function getColumnCssWidth(index: number) {
- const columns = getColumns();
- const gutterSize = getGutterSize();
- const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
- return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`;
- };
-
- return (
- <>
-
- {props.columns?.map((column, index) => (
-
-
-
- );
-}
-
-export default Column;
-"
+"'function' is not allowed as a variable declaration name. (34:9)
+ 32 | function Column(props:ColumnProps) {
+ 33 |
+> 34 | const function getColumns() {
+ | ^
+ 35 | return props.columns || [];
+ 36 | }
+ 37 | const function getGutterSize() {"
`;
exports[`RSC > jsx > Typescript Test > ContentSlotHtml 1`] = `
@@ -4281,6 +4119,12 @@ type Props = {
import type { JSX } from \\"../../../../jsx-runtime\\";
function ContentSlotJsxCode(props: Props) {
+ props = {
+ content: \\"\\",
+ slotReference: undefined,
+ slotContent: undefined,
+ ...props,
+ };
const [name, setName] = useState(() => \\"king\\");
const [showContent, setShowContent] = useState(() => false);
@@ -4318,12 +4162,6 @@ function ContentSlotJsxCode(props: Props) {
);
}
-ContentSlotJsxCode.defaultProps = {
- content: \\"\\",
- slotReference: undefined,
- slotContent: undefined,
-};
-
export default ContentSlotJsxCode;
"
`;
@@ -5008,30 +4846,14 @@ export default FormInputComponent;
`;
exports[`RSC > jsx > Typescript Test > InputParent 1`] = `
-"/**
- useMetadata:
- {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
- */
-
-import * as React from \\"react\\";
-import FormInputComponent from \\"./input.raw\\";
-
-function Stepper(props: any) {
- const handleChange = function handleChange(value: string) {
- console.log(value);
- };
-
- return (
-
- {column.content}
- {index}
-
- ))}
-
{props.link ? (
@@ -6145,15 +5976,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {
- console.log(\\"hi\\");
- },
-};
-
export default Button;
"
`;
@@ -6171,6 +5993,13 @@ export interface ButtonProps {
}
function Button(props: ButtonProps) {
+ props = {
+ text: \\"default text\\",
+ link: \\"https://builder.io/\\",
+ openLinkInNewTab: false,
+ onClick: () => {},
+ ...props,
+ };
return (
{props.link ? (
@@ -6195,13 +6024,6 @@ function Button(props: ButtonProps) {
);
}
-Button.defaultProps = {
- text: \\"default text\\",
- link: \\"https://builder.io/\\",
- openLinkInNewTab: false,
- onClick: () => {},
-};
-
export default Button;
"
`;
@@ -6305,74 +6127,25 @@ export default FigmaButton;
`;
exports[`RSC > jsx > Typescript Test > getterState 1`] = `
-"/**
- useMetadata:
- {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
- */
-
-import * as React from \\"react\\";
-
-export interface ButtonProps {
- foo: string;
-}
-
-function Button(props: ButtonProps) {
- const foo2 = function foo2() {
- return props.foo + \\"foo\\";
- };
- const bar = function bar() {
- return \\"bar\\";
- };
- const baz = function baz(i: number) {
- return i + foo2().length;
- };
-
- return (
-
-
- );
-}
-
-export default Button;
-"
+"'function' is not allowed as a variable declaration name. (23:9)
+ 21 | function Button(props:ButtonProps) {
+ 22 |
+> 23 | const function foo2() {
+ | ^
+ 24 | return props.foo + 'foo';
+ 25 | }
+ 26 | const function bar() {"
`;
exports[`RSC > jsx > Typescript Test > import types 1`] = `
-"/**
- useMetadata:
- {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
- */
-
-import * as React from \\"react\\";
-
-type RenderContentProps = {
- options?: GetContentOptions;
- content: BuilderContent;
- renderContentProps: RenderBlockProps;
-};
-import { BuilderContent, GetContentOptions } from \\"@builder.io/sdk\\";
-import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
-
-function RenderContent(props: RenderContentProps) {
- const getRenderContentProps = function getRenderContentProps(block, index) {
- return {
- block: block,
- index: index,
- };
- };
-
- return (
- {foo2()}
-{bar()}
-{baz(1)}
-Hello {props.name}!
;
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`RSC > jsx > Typescript Test > typeExternalStore 1`] = `
"\\"use client\\";
import * as React from \\"react\\";
@@ -7812,21 +7601,19 @@ function MyComponent(props) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`RSC > svelte > Javascript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={activeTab}>{activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={activeTab}>{activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`RSC > svelte > Javascript Test > each 1`] = `
@@ -7947,11 +7734,9 @@ function MyComponent(props) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
@@ -8224,21 +8009,19 @@ function MyComponent(props: any) {
);
}
-MyComponent.defaultProps = {};
-
export default MyComponent;
"
`;
exports[`RSC > svelte > Typescript Test > context 1`] = `
-"'>' expected. (35:13)
- 33 | return (
- 34 |
-> 35 | <'activeTab'.Provider value={activeTab}>{activeTab}
+"'>' expected. (32:13)
+ 30 | return (
+ 31 |
+> 32 | <'activeTab'.Provider value={activeTab}>{activeTab}
| ^
- 36 |
- 37 |
- 38 |"
+ 33 |
+ 34 |
+ 35 |"
`;
exports[`RSC > svelte > Typescript Test > each 1`] = `
@@ -8359,11 +8142,9 @@ function MyComponent(props: any) {
useEffect(() => {
console.log(\\"onMount\\");
}, []);
-
useEffect(() => {
console.log(\\"onAfterUpdate\\");
});
-
useEffect(() => {
return () => {
console.log(\\"onDestroy\\");
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index cf97f5963c..b6b12106b4 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -7574,6 +7574,38 @@ export default TypeDependency;
"
`;
+exports[`Solid > jsx > Javascript Test > typeExternalProps 1`] = `
+"function TypeExternalProps(props) {
+ return (
+ <>
+
+ Hello
+ {props.name}!{\\" \\"}
+
+
+ );
+}
+
+export default TypeExternalProps;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > typeExternalProps 2`] = `
+"function TypeExternalProps(props) {
+ return (
+ <>
+
+ Hello
+ {props.name}!{\\" \\"}
+
+
+ );
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`Solid > jsx > Javascript Test > typeExternalStore 1`] = `
"import { createSignal, createMemo } from \\"solid-js\\";
@@ -16404,6 +16436,42 @@ export default TypeDependency;
"
`;
+exports[`Solid > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+ return (
+ <>
+
+ Hello
+ {props.name}!{\\" \\"}
+
+
+ );
+}
+
+export default TypeExternalProps;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > typeExternalProps 2`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+function TypeExternalProps(props: FooProps) {
+ return (
+ <>
+
+ Hello
+ {props.name}!{\\" \\"}
+
+
+ );
+}
+
+export default TypeExternalProps;
+"
+`;
+
exports[`Solid > jsx > Typescript Test > typeExternalStore 1`] = `
"import { createSignal, createMemo } from \\"solid-js\\";
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 7958c9a80c..1285c09e5c 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -131,11 +131,7 @@ export class MyBasicRefComponent {
`;
exports[`Stencil > jsx > Javascript Test > Basic 1`] = `
-"export const DEFAULT_VALUES = {
- name: \\"Steve\\",
-};
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
@Component({
tag: \\"my-basic-component\\",
@@ -155,11 +151,15 @@ export class MyBasicComponent {
return \\"bar\\";
}
+ DEFAULT_VALUES = {
+ name: \\"Steve\\",
+ };
+
render() {
return (
(this.name = myEvent.target.value)}
/>
Hello! I can run in React, Vue, Solid, or Liquid! >
@@ -524,20 +524,7 @@ export class MyBasicRefAssignmentComponent {
`;
exports[`Stencil > jsx > Javascript Test > BasicRefPrevious 1`] = `
-"export function usePrevious(value) {
- // The ref object is a generic container whose current property is mutable ...
- // ... and can hold any value, similar to an instance property on a class
- let ref = useRef(null); // Store current value in ref
-
- onUpdate(() => {
- ref = value;
- }, [value]); // Only re-run if value changes
- // Return previous value (happens before update in useEffect above)
-
- return ref;
-}
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
@Component({
tag: \\"my-previous-component\\",
@@ -2490,11 +2477,7 @@ export class Button {
`;
exports[`Stencil > jsx > Javascript Test > defaultValsWithTypes 1`] = `
-"const DEFAULT_VALUES = {
- name: \\"Sami\\",
-};
-
-import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
@Component({
tag: \\"component-with-types\\",
@@ -2502,12 +2485,16 @@ import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
export class ComponentWithTypes {
@Prop() name: any;
+ DEFAULT_VALUES = {
+ name: \\"Sami\\",
+ };
+
render() {
return (
{\\" \\"}
Hello
- {this.name || DEFAULT_VALUES.name}
+ {this.name || this.DEFAULT_VALUES.name}
);
}
@@ -2819,11 +2806,7 @@ export class OnInit {
`;
exports[`Stencil > jsx > Javascript Test > onInit 1`] = `
-"export const defaultValues = {
- name: \\"PatrickJS\\",
-};
-
-import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
+"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
@Component({
tag: \\"on-init\\",
@@ -2949,13 +2932,7 @@ export class OnUpdateWithDeps {
`;
exports[`Stencil > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
-"const b = 3;
-const foo = () => {};
-export const a = 3;
-export const bar = () => {};
-export function run(value) {}
-
-import { Component, h, Fragment } from \\"@stencil/core\\";
+"import { Component, h, Fragment } from \\"@stencil/core\\";
@Component({
tag: \\"my-basic-component\\",
@@ -3730,6 +3707,27 @@ export class TypeDependency {
"
`;
+exports[`Stencil > jsx > Javascript Test > typeExternalProps 1`] = `
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+
+@Component({
+ tag: \\"type-external-props\\",
+})
+export class TypeExternalProps {
+ @Prop() name: any;
+
+ render() {
+ return (
+
+ Hello
+ {this.name}!{\\" \\"}
+
+ );
+ }
+}
+"
+`;
+
exports[`Stencil > jsx > Javascript Test > typeExternalStore 1`] = `
"import { Component, h, Fragment, State } from \\"@stencil/core\\";
@@ -4001,10 +3999,6 @@ export class MyBasicForShowComponent {
exports[`Stencil > jsx > Typescript Test > AdvancedRef 1`] = `
"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-export interface Props {
- showInput: boolean;
-}
-
@Component({
tag: \\"my-basic-ref-component\\",
@@ -4017,7 +4011,7 @@ export interface Props {
export class MyBasicRefComponent {
private inputRef!: HTMLInputElement;
private inputNoArgRef!: HTMLLabelElement;
- @Prop() showInput: Props[\\"showInput\\"];
+ @Prop() showInput: any;
@State() name = \\"PatrickJS\\";
onBlur = function onBlur() {
@@ -4064,15 +4058,7 @@ export class MyBasicRefComponent {
`;
exports[`Stencil > jsx > Typescript Test > Basic 1`] = `
-"export const DEFAULT_VALUES = {
- name: \\"Steve\\",
-};
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
-
-export interface MyBasicComponentProps {
- id: string;
-}
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
@Component({
tag: \\"my-basic-component\\",
@@ -4092,11 +4078,15 @@ export class MyBasicComponent {
return \\"bar\\";
}
+ DEFAULT_VALUES = {
+ name: \\"Steve\\",
+ };
+
render() {
return (
(this.name = myEvent.target.value)}
/>
Hello! I can run in React, Vue, Solid, or Liquid! >
@@ -4179,17 +4169,12 @@ export class MyBasicComponent {
exports[`Stencil > jsx > Typescript Test > Basic OnMount Update 1`] = `
"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-export interface Props {
- hi: string;
- bye: string;
-}
-
@Component({
tag: \\"my-basic-on-mount-update-component\\",
})
export class MyBasicOnMountUpdateComponent {
- @Prop() bye: Props[\\"bye\\"];
- @Prop() hi: Props[\\"hi\\"];
+ @Prop() bye: any;
+ @Prop() hi: any;
@State() name = \\"PatrickJS\\";
@State() names = [\\"Steve\\", \\"PatrickJS\\"];
@@ -4281,17 +4266,12 @@ exports[`Stencil > jsx > Typescript Test > BasicBooleanAttribute 1`] = `
import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-type Props = {
- children: any;
- type: string;
-};
-
@Component({
tag: \\"my-boolean-attribute\\",
})
export class MyBooleanAttribute {
- @Prop() children: Props[\\"children\\"];
- @Prop() type: Props[\\"type\\"];
+ @Prop() children: any;
+ @Prop() type: any;
render() {
return (
@@ -4388,10 +4368,6 @@ export class MyBasicForComponent {
exports[`Stencil > jsx > Typescript Test > BasicRef 1`] = `
"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-export interface Props {
- showInput: boolean;
-}
-
@Component({
tag: \\"my-basic-ref-component\\",
@@ -4404,7 +4380,7 @@ export interface Props {
export class MyBasicRefComponent {
private inputRef!: HTMLInputElement | null;
private inputNoArgRef!: HTMLLabelElement | null;
- @Prop() showInput: Props[\\"showInput\\"];
+ @Prop() showInput: any;
@State() name = \\"PatrickJS\\";
onBlur = function onBlur() {
@@ -4449,10 +4425,6 @@ export class MyBasicRefComponent {
exports[`Stencil > jsx > Typescript Test > BasicRefAssignment 1`] = `
"import { Component, h, Fragment } from \\"@stencil/core\\";
-export interface Props {
- showInput: boolean;
-}
-
@Component({
tag: \\"my-basic-ref-assignment-component\\",
})
@@ -4479,24 +4451,7 @@ export class MyBasicRefAssignmentComponent {
`;
exports[`Stencil > jsx > Typescript Test > BasicRefPrevious 1`] = `
-"export function usePrevious(value: T) {
- // The ref object is a generic container whose current property is mutable ...
- // ... and can hold any value, similar to an instance property on a class
- let ref = useRef(null); // Store current value in ref
-
- onUpdate(() => {
- ref = value;
- }, [value]); // Only re-run if value changes
- // Return previous value (happens before update in useEffect above)
-
- return ref;
-}
-
-import { Component, h, Fragment, State } from \\"@stencil/core\\";
-
-export interface Props {
- showInput: boolean;
-}
+"import { Component, h, Fragment, State } from \\"@stencil/core\\";
@Component({
tag: \\"my-previous-component\\",
@@ -4529,21 +4484,14 @@ export class MyPreviousComponent {
exports[`Stencil > jsx > Typescript Test > Button 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export interface ButtonProps {
- attributes?: any;
- text?: string;
- link?: string;
- openLinkInNewTab?: boolean;
-}
-
@Component({
tag: \\"button\\",
})
export class Button {
- @Prop() link: ButtonProps[\\"link\\"];
- @Prop() attributes: ButtonProps[\\"attributes\\"];
- @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"];
- @Prop() text: ButtonProps[\\"text\\"];
+ @Prop() link: any;
+ @Prop() attributes: any;
+ @Prop() openLinkInNewTab: any;
+ @Prop() text: any;
render() {
return (
@@ -4572,21 +4520,6 @@ export class Button {
exports[`Stencil > jsx > Typescript Test > Columns 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-type Column = {
- content: any; // TODO: Implement this when support for dynamic CSS lands
-
- width?: number;
-};
-export interface ColumnProps {
- columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
-
- space?: number; // TODO: Implement this when support for dynamic CSS lands
-
- stackColumnsAt?: \\"tablet\\" | \\"mobile\\" | \\"never\\"; // TODO: Implement this when support for dynamic CSS lands
-
- reverseColumnsWhenStacked?: boolean;
-}
-
@Component({
tag: \\"column\\",
@@ -4613,8 +4546,8 @@ export interface ColumnProps {
\`,
})
export class Column {
- @Prop() columns: ColumnProps[\\"columns\\"];
- @Prop() space: ColumnProps[\\"space\\"];
+ @Prop() columns: any;
+ @Prop() space: any;
getColumns() {
return this.columns || [];
@@ -4654,16 +4587,11 @@ exports[`Stencil > jsx > Typescript Test > ContentSlotHtml 1`] = `
import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-type Props = {
- [key: string]: string | JSX.Element;
- slotTesting: JSX.Element;
-};
-
@Component({
tag: \\"content-slot-code\\",
})
export class ContentSlotCode {
- @Prop() slotTesting: Props[\\"slotTesting\\"];
+ @Prop() slotTesting: any;
render() {
return (
@@ -4687,19 +4615,15 @@ exports[`Stencil > jsx > Typescript Test > ContentSlotJSX 1`] = `
import { Component, h, Fragment, Host, Prop, State } from \\"@stencil/core\\";
-type Props = {
- [key: string]: string | JSX.Element;
-};
-
@Component({
tag: \\"content-slot-jsx-code\\",
})
export class ContentSlotJsxCode {
- @Prop() slotContent: Props[\\"slotContent\\"] = undefined;
- @Prop() children: Props[\\"children\\"];
- @Prop() slotReference: Props[\\"slotReference\\"] = undefined;
- @Prop() attributes: Props[\\"attributes\\"];
- @Prop() content: Props[\\"content\\"] = \\"\\";
+ @Prop() slotContent: any = undefined;
+ @Prop() children: any;
+ @Prop() slotReference: any = undefined;
+ @Prop() attributes: any;
+ @Prop() content: any = \\"\\";
@State() name = \\"king\\";
@State() showContent = false;
@@ -4742,18 +4666,13 @@ export class ContentSlotJsxCode {
exports[`Stencil > jsx > Typescript Test > CustomCode 1`] = `
"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-export interface CustomCodeProps {
- code: string;
- replaceNodes?: boolean;
-}
-
@Component({
tag: \\"custom-code\\",
})
export class CustomCode {
private elem!: HTMLDivElement;
- @Prop() replaceNodes: CustomCodeProps[\\"replaceNodes\\"];
- @Prop() code: CustomCodeProps[\\"code\\"];
+ @Prop() replaceNodes: any;
+ @Prop() code: any;
@State() scriptsInserted = [];
@State() scriptsRun = [];
@@ -4821,18 +4740,13 @@ export class CustomCode {
exports[`Stencil > jsx > Typescript Test > Embed 1`] = `
"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-export interface CustomCodeProps {
- code: string;
- replaceNodes?: boolean;
-}
-
@Component({
tag: \\"custom-code\\",
})
export class CustomCode {
private elem!: HTMLDivElement;
- @Prop() replaceNodes: CustomCodeProps[\\"replaceNodes\\"];
- @Prop() code: CustomCodeProps[\\"code\\"];
+ @Prop() replaceNodes: any;
+ @Prop() code: any;
@State() scriptsInserted = [];
@State() scriptsRun = [];
@@ -4908,30 +4822,6 @@ import {
import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-export interface FormProps {
- attributes?: any;
- name?: string;
- action?: string;
- validate?: boolean;
- method?: string;
- builderBlock?: BuilderElement;
- sendSubmissionsTo?: string;
- sendSubmissionsToEmail?: string;
- sendWithJs?: boolean;
- contentType?: string;
- customHeaders?: {
- [key: string]: string;
- };
- successUrl?: string;
- previewState?: FormState;
- successMessage?: BuilderElement[];
- errorMessage?: BuilderElement[];
- sendingMessage?: BuilderElement[];
- resetFormOnSubmit?: boolean;
- errorMessagePath?: string;
-}
-export type FormState = \\"unsubmitted\\" | \\"sending\\" | \\"success\\" | \\"error\\";
-
@Component({
tag: \\"form-component\\",
@@ -4945,24 +4835,24 @@ export type FormState = \\"unsubmitted\\" | \\"sending\\" | \\"success\\" | \\"e
})
export class FormComponent {
private formRef!: HTMLFormElement;
- @Prop() previewState: FormProps[\\"previewState\\"];
- @Prop() sendWithJs: FormProps[\\"sendWithJs\\"];
- @Prop() sendSubmissionsTo: FormProps[\\"sendSubmissionsTo\\"];
- @Prop() action: FormProps[\\"action\\"];
- @Prop() customHeaders: FormProps[\\"customHeaders\\"];
- @Prop() contentType: FormProps[\\"contentType\\"];
- @Prop() sendSubmissionsToEmail: FormProps[\\"sendSubmissionsToEmail\\"];
- @Prop() name: FormProps[\\"name\\"];
- @Prop() method: FormProps[\\"method\\"];
- @Prop() errorMessagePath: FormProps[\\"errorMessagePath\\"];
- @Prop() resetFormOnSubmit: FormProps[\\"resetFormOnSubmit\\"];
- @Prop() successUrl: FormProps[\\"successUrl\\"];
- @Prop() validate: FormProps[\\"validate\\"];
- @Prop() attributes: FormProps[\\"attributes\\"];
- @Prop() builderBlock: FormProps[\\"builderBlock\\"];
- @Prop() errorMessage: FormProps[\\"errorMessage\\"];
- @Prop() sendingMessage: FormProps[\\"sendingMessage\\"];
- @Prop() successMessage: FormProps[\\"successMessage\\"];
+ @Prop() previewState: any;
+ @Prop() sendWithJs: any;
+ @Prop() sendSubmissionsTo: any;
+ @Prop() action: any;
+ @Prop() customHeaders: any;
+ @Prop() contentType: any;
+ @Prop() sendSubmissionsToEmail: any;
+ @Prop() name: any;
+ @Prop() method: any;
+ @Prop() errorMessagePath: any;
+ @Prop() resetFormOnSubmit: any;
+ @Prop() successUrl: any;
+ @Prop() validate: any;
+ @Prop() attributes: any;
+ @Prop() builderBlock: any;
+ @Prop() errorMessage: any;
+ @Prop() sendingMessage: any;
+ @Prop() successMessage: any;
@State() formState = \\"unsubmitted\\";
@State() responseData = null;
@State() formErrorMessage = \\"\\";
@@ -5244,25 +5134,6 @@ export class FormComponent {
exports[`Stencil > jsx > Typescript Test > Image 1`] = `
"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-// TODO: AMP Support?
-export interface ImageProps {
- _class?: string;
- image: string;
- sizes?: string;
- lazy?: boolean;
- height?: number;
- width?: number;
- altText?: string;
- backgroundSize?: string;
- backgroundPosition?: string; // TODO: Support generating Builder.io and or Shopify \`srcset\`s when needed
-
- srcset?: string; // TODO: Implement support for custom aspect ratios
-
- aspectRatio?: number; // TODO: This might not work as expected in terms of positioning
-
- children?: any;
-}
-
@Component({
tag: \\"image\\",
@@ -5277,13 +5148,13 @@ export interface ImageProps {
})
export class Image {
private pictureRef!: HTMLElement;
- @Prop() lazy: ImageProps[\\"lazy\\"];
- @Prop() altText: ImageProps[\\"altText\\"];
- @Prop() _class: ImageProps[\\"_class\\"];
- @Prop() image: ImageProps[\\"image\\"];
- @Prop() srcset: ImageProps[\\"srcset\\"];
- @Prop() sizes: ImageProps[\\"sizes\\"];
- @Prop() children: ImageProps[\\"children\\"];
+ @Prop() lazy: any;
+ @Prop() altText: any;
+ @Prop() _class: any;
+ @Prop() image: any;
+ @Prop() srcset: any;
+ @Prop() sizes: any;
+ @Prop() children: any;
@State() scrollListener = null;
@State() imageLoaded = false;
@State() load = false;
@@ -5390,32 +5261,15 @@ exports[`Stencil > jsx > Typescript Test > Img 1`] = `
import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export interface ImgProps {
- attributes?: any;
- imgSrc?: string;
- altText?: string;
- backgroundSize?: \\"cover\\" | \\"contain\\";
- backgroundPosition?:
- | \\"center\\"
- | \\"top\\"
- | \\"left\\"
- | \\"right\\"
- | \\"bottom\\"
- | \\"top left\\"
- | \\"top right\\"
- | \\"bottom left\\"
- | \\"bottom right\\";
-}
-
@Component({
tag: \\"img-component\\",
})
export class ImgComponent {
- @Prop() backgroundSize: ImgProps[\\"backgroundSize\\"];
- @Prop() backgroundPosition: ImgProps[\\"backgroundPosition\\"];
- @Prop() attributes: ImgProps[\\"attributes\\"];
- @Prop() imgSrc: ImgProps[\\"imgSrc\\"];
- @Prop() altText: ImgProps[\\"altText\\"];
+ @Prop() backgroundSize: any;
+ @Prop() backgroundPosition: any;
+ @Prop() attributes: any;
+ @Prop() imgSrc: any;
+ @Prop() altText: any;
render() {
return (
@@ -5440,28 +5294,17 @@ exports[`Stencil > jsx > Typescript Test > Input 1`] = `
import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
-export interface FormInputProps {
- type?: string;
- attributes?: any;
- name?: string;
- value?: string;
- placeholder?: string;
- defaultValue?: string;
- required?: boolean;
- onChange?: (value: string) => void;
-}
-
@Component({
tag: \\"form-input-component\\",
})
export class FormInputComponent {
- @Prop() attributes: FormInputProps[\\"attributes\\"];
- @Prop() defaultValue: FormInputProps[\\"defaultValue\\"];
- @Prop() placeholder: FormInputProps[\\"placeholder\\"];
- @Prop() type: FormInputProps[\\"type\\"];
- @Prop() name: FormInputProps[\\"name\\"];
- @Prop() value: FormInputProps[\\"value\\"];
- @Prop() required: FormInputProps[\\"required\\"];
+ @Prop() attributes: any;
+ @Prop() defaultValue: any;
+ @Prop() placeholder: any;
+ @Prop() type: any;
+ @Prop() name: any;
+ @Prop() value: any;
+ @Prop() required: any;
@Event() onChange: any;
render() {
@@ -5516,11 +5359,6 @@ export class Stepper {
exports[`Stencil > jsx > Typescript Test > NestedStore 1`] = `
"import { Component, h, Fragment, State } from \\"@stencil/core\\";
-type MyStore = {
- _id?: string;
- _messageId?: string;
-};
-
@Component({
tag: \\"nested-store\\",
})
@@ -5543,17 +5381,12 @@ export class NestedStore {
exports[`Stencil > jsx > Typescript Test > RawText 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export interface RawTextProps {
- attributes?: any;
- text?: string; // builderBlock?: any;
-}
-
@Component({
tag: \\"raw-text\\",
})
export class RawText {
- @Prop() attributes: RawTextProps[\\"attributes\\"];
- @Prop() text: RawTextProps[\\"text\\"];
+ @Prop() attributes: any;
+ @Prop() text: any;
render() {
return (
@@ -5570,19 +5403,13 @@ export class RawText {
exports[`Stencil > jsx > Typescript Test > Section 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export interface SectionProps {
- maxWidth?: number;
- attributes?: any;
- children?: any;
-}
-
@Component({
tag: \\"section-component\\",
})
export class SectionComponent {
- @Prop() attributes: SectionProps[\\"attributes\\"];
- @Prop() maxWidth: SectionProps[\\"maxWidth\\"];
- @Prop() children: SectionProps[\\"children\\"];
+ @Prop() attributes: any;
+ @Prop() maxWidth: any;
+ @Prop() children: any;
render() {
return (
@@ -5607,18 +5434,12 @@ export class SectionComponent {
exports[`Stencil > jsx > Typescript Test > Section 2`] = `
"import { Component, h, Fragment, Host, Prop, State } from \\"@stencil/core\\";
-export interface SectionProps {
- maxWidth?: number;
- attributes?: any;
- children?: any;
-}
-
@Component({
tag: \\"section-state-component\\",
})
export class SectionStateComponent {
- @Prop() attributes: SectionProps[\\"attributes\\"];
- @Prop() children: SectionProps[\\"children\\"];
+ @Prop() attributes: any;
+ @Prop() children: any;
@State() max = 42;
@State() items = [42];
@@ -5649,26 +5470,15 @@ exports[`Stencil > jsx > Typescript Test > Select 1`] = `
import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export interface FormSelectProps {
- options?: {
- name?: string;
- value: string;
- }[];
- attributes?: any;
- name?: string;
- value?: string;
- defaultValue?: string;
-}
-
@Component({
tag: \\"select-component\\",
})
export class SelectComponent {
- @Prop() attributes: FormSelectProps[\\"attributes\\"];
- @Prop() value: FormSelectProps[\\"value\\"];
- @Prop() defaultValue: FormSelectProps[\\"defaultValue\\"];
- @Prop() name: FormSelectProps[\\"name\\"];
- @Prop() options: FormSelectProps[\\"options\\"];
+ @Prop() attributes: any;
+ @Prop() value: any;
+ @Prop() defaultValue: any;
+ @Prop() name: any;
+ @Prop() options: any;
render() {
return (
@@ -5698,10 +5508,6 @@ export class SelectComponent {
exports[`Stencil > jsx > Typescript Test > SlotDefault 1`] = `
"import { Component, h, Fragment } from \\"@stencil/core\\";
-type Props = {
- [key: string]: string;
-};
-
@Component({
tag: \\"slot-code\\",
})
@@ -5724,10 +5530,6 @@ exports[`Stencil > jsx > Typescript Test > SlotHtml 1`] = `
import { Component, h, Fragment } from \\"@stencil/core\\";
-type Props = {
- [key: string]: string;
-};
-
@Component({
tag: \\"slot-code\\",
})
@@ -5750,10 +5552,6 @@ exports[`Stencil > jsx > Typescript Test > SlotJsx 1`] = `
import { Component, h, Fragment } from \\"@stencil/core\\";
-type Props = {
- [key: string]: string;
-};
-
@Component({
tag: \\"slot-code\\",
})
@@ -5772,10 +5570,6 @@ export class SlotCode {
exports[`Stencil > jsx > Typescript Test > SlotNamed 1`] = `
"import { Component, h, Fragment } from \\"@stencil/core\\";
-type Props = {
- [key: string]: string;
-};
-
@Component({
tag: \\"slot-code\\",
})
@@ -5799,11 +5593,6 @@ exports[`Stencil > jsx > Typescript Test > Stamped.io 1`] = `
import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-type SmileReviewsProps = {
- productId: string;
- apiKey: string;
-};
-
@Component({
tag: \\"smile-reviews\\",
@@ -5834,8 +5623,8 @@ type SmileReviewsProps = {
\`,
})
export class SmileReviews {
- @Prop() apiKey: SmileReviewsProps[\\"apiKey\\"];
- @Prop() productId: SmileReviewsProps[\\"productId\\"];
+ @Prop() apiKey: any;
+ @Prop() productId: any;
@State() reviews = [];
@State() name = \\"test\\";
@State() showReviewPrompt = false;
@@ -5965,17 +5754,12 @@ export class MyComponent {
exports[`Stencil > jsx > Typescript Test > Submit 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export interface ButtonProps {
- attributes?: any;
- text?: string;
-}
-
@Component({
tag: \\"submit-button\\",
})
export class SubmitButton {
- @Prop() attributes: ButtonProps[\\"attributes\\"];
- @Prop() text: ButtonProps[\\"text\\"];
+ @Prop() attributes: any;
+ @Prop() text: any;
render() {
return (
@@ -5993,20 +5777,12 @@ exports[`Stencil > jsx > Typescript Test > Text 1`] = `
import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-export interface TextProps {
- attributes?: any;
- rtlMode: boolean;
- text?: string;
- content?: string;
- builderBlock?: any;
-}
-
@Component({
tag: \\"text\\",
})
export class Text {
- @Prop() text: TextProps[\\"text\\"];
- @Prop() content: TextProps[\\"content\\"];
+ @Prop() text: any;
+ @Prop() content: any;
@State() name = \\"Decadef20\\";
render() {
@@ -6032,23 +5808,15 @@ export class Text {
exports[`Stencil > jsx > Typescript Test > Textarea 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export interface TextareaProps {
- attributes?: any;
- name?: string;
- value?: string;
- defaultValue?: string;
- placeholder?: string;
-}
-
@Component({
tag: \\"textarea\\",
})
export class Textarea {
- @Prop() attributes: TextareaProps[\\"attributes\\"];
- @Prop() placeholder: TextareaProps[\\"placeholder\\"];
- @Prop() name: TextareaProps[\\"name\\"];
- @Prop() value: TextareaProps[\\"value\\"];
- @Prop() defaultValue: TextareaProps[\\"defaultValue\\"];
+ @Prop() attributes: any;
+ @Prop() placeholder: any;
+ @Prop() name: any;
+ @Prop() value: any;
+ @Prop() defaultValue: any;
render() {
return (
@@ -6068,15 +5836,6 @@ export class Textarea {
exports[`Stencil > jsx > Typescript Test > UseValueAndFnFromStore 1`] = `
"import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
-type MyProps = {
- onChange?: (active: boolean) => void;
-};
-type MyStore = {
- _id?: string;
- _active?: boolean;
- _do?: (id?: string) => void;
-};
-
@Component({
tag: \\"use-value-and-fn-from-store\\",
})
@@ -6109,45 +5868,19 @@ export class UseValueAndFnFromStore {
exports[`Stencil > jsx > Typescript Test > Video 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export interface VideoProps {
- attributes?: any;
- video?: string;
- autoPlay?: boolean;
- controls?: boolean;
- muted?: boolean;
- loop?: boolean;
- playsInline?: boolean;
- aspectRatio?: number;
- width?: number;
- height?: number;
- fit?: \\"contain\\" | \\"cover\\" | \\"fill\\";
- position?:
- | \\"center\\"
- | \\"top\\"
- | \\"left\\"
- | \\"right\\"
- | \\"bottom\\"
- | \\"top left\\"
- | \\"top right\\"
- | \\"bottom left\\"
- | \\"bottom right\\";
- posterImage?: string;
- lazyLoad?: boolean;
-}
-
@Component({
tag: \\"video\\",
})
export class Video {
- @Prop() attributes: VideoProps[\\"attributes\\"];
- @Prop() fit: VideoProps[\\"fit\\"];
- @Prop() position: VideoProps[\\"position\\"];
- @Prop() video: VideoProps[\\"video\\"];
- @Prop() posterImage: VideoProps[\\"posterImage\\"];
- @Prop() autoPlay: VideoProps[\\"autoPlay\\"];
- @Prop() muted: VideoProps[\\"muted\\"];
- @Prop() controls: VideoProps[\\"controls\\"];
- @Prop() loop: VideoProps[\\"loop\\"];
+ @Prop() attributes: any;
+ @Prop() fit: any;
+ @Prop() position: any;
+ @Prop() video: any;
+ @Prop() posterImage: any;
+ @Prop() autoPlay: any;
+ @Prop() muted: any;
+ @Prop() controls: any;
+ @Prop() loop: any;
render() {
return (
@@ -6278,11 +6011,6 @@ export class MyBasicForNoTagRefComponent {
exports[`Stencil > jsx > Typescript Test > basicForwardRef 1`] = `
"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-export interface Props {
- showInput: boolean;
- inputRef: HTMLInputElement;
-}
-
@Component({
tag: \\"my-basic-forward-ref-component\\",
@@ -6293,7 +6021,7 @@ export interface Props {
\`,
})
export class MyBasicForwardRefComponent {
- @Prop() inputRef: Props[\\"inputRef\\"];
+ @Prop() inputRef: any;
@State() name = \\"PatrickJS\\";
render() {
@@ -6320,11 +6048,6 @@ exports[`Stencil > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-export interface Props {
- showInput: boolean;
- inputRef: HTMLInputElement;
-}
-
@Component({
tag: \\"my-basic-forward-ref-component\\",
@@ -6335,7 +6058,7 @@ export interface Props {
\`,
})
export class MyBasicForwardRefComponent {
- @Prop() inputRef: Props[\\"inputRef\\"];
+ @Prop() inputRef: any;
@State() name = \\"PatrickJS\\";
render() {
@@ -6476,11 +6199,6 @@ exports[`Stencil > jsx > Typescript Test > className 1`] = `
import { Component, h, Fragment, State } from \\"@stencil/core\\";
-type Props = {
- [key: string]: string | JSX.Element;
- slotTesting: JSX.Element;
-};
-
@Component({
tag: \\"class-name-code\\",
})
@@ -6553,15 +6271,11 @@ import Context2 from \\"@dummy/2\\";
import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export interface ComponentWithContextProps {
- content: string;
-}
-
@Component({
tag: \\"component-with-context\\",
})
export class ComponentWithContext {
- @Prop() content: ComponentWithContextProps[\\"content\\"];
+ @Prop() content: any;
render() {
return (
@@ -6580,15 +6294,11 @@ import Context2 from \\"@dummy/2\\";
import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export interface ComponentWithContextProps {
- content: string;
-}
-
@Component({
tag: \\"component-with-context\\",
})
export class ComponentWithContext {
- @Prop() content: ComponentWithContextProps[\\"content\\"];
+ @Prop() content: any;
render() {
return (
@@ -6624,28 +6334,18 @@ export class RenderContent {
exports[`Stencil > jsx > Typescript Test > defaultProps 1`] = `
"import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
-export interface ButtonProps {
- attributes?: any;
- text?: string;
- buttonText?: string; // no default value
-
- link?: string;
- openLinkInNewTab?: boolean;
- onClick?: () => void;
-}
-
@Component({
tag: \\"button\\",
})
export class Button {
- @Prop() link: ButtonProps[\\"link\\"] = \\"https://builder.io/\\";
- @Prop() attributes: ButtonProps[\\"attributes\\"];
- @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] = false;
- @Prop() text: ButtonProps[\\"text\\"] = \\"default text\\";
+ @Prop() link: any = \\"https://builder.io/\\";
+ @Prop() attributes: any;
+ @Prop() openLinkInNewTab: any = false;
+ @Prop() text: any = \\"default text\\";
@Event() onClick: any = () => {
console.log(\\"hi\\");
};
- @Prop() buttonText: ButtonProps[\\"buttonText\\"];
+ @Prop() buttonText: any;
render() {
return (
@@ -6678,22 +6378,14 @@ export class Button {
exports[`Stencil > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
"import { Component, h, Fragment, Event, Prop } from \\"@stencil/core\\";
-export interface ButtonProps {
- attributes?: any;
- text?: string;
- link?: string;
- openLinkInNewTab?: boolean;
- onClick: () => void;
-}
-
@Component({
tag: \\"button\\",
})
export class Button {
- @Prop() link: ButtonProps[\\"link\\"] = \\"https://builder.io/\\";
- @Prop() attributes: ButtonProps[\\"attributes\\"];
- @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"] = false;
- @Prop() text: ButtonProps[\\"text\\"] = \\"default text\\";
+ @Prop() link: any = \\"https://builder.io/\\";
+ @Prop() attributes: any;
+ @Prop() openLinkInNewTab: any = false;
+ @Prop() text: any = \\"default text\\";
@Event() onClick: any = () => {};
render() {
@@ -6725,28 +6417,24 @@ export class Button {
`;
exports[`Stencil > jsx > Typescript Test > defaultValsWithTypes 1`] = `
-"const DEFAULT_VALUES: Props = {
- name: \\"Sami\\",
-};
-
-import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-
-type Props = {
- name: string;
-};
+"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
@Component({
tag: \\"component-with-types\\",
})
export class ComponentWithTypes {
- @Prop() name: Props[\\"name\\"];
+ @Prop() name: any;
+
+ DEFAULT_VALUES = {
+ name: \\"Sami\\",
+ };
render() {
return (
(value: T) {}
-
-import { Component, h, Fragment } from \\"@stencil/core\\";
-
-type Types = {
- s: any[];
-};
-interface IPost {
- len: number;
-}
-export interface MyBasicComponentProps {
- id: string;
-}
+"import { Component, h, Fragment } from \\"@stencil/core\\";
@Component({
tag: \\"my-basic-component\\",
@@ -7239,24 +6889,11 @@ export class MyBasicComponent {
exports[`Stencil > jsx > Typescript Test > preserveTyping 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export type A = \\"test\\";
-export interface C {
- n: \\"test\\";
-}
-type B = \\"test2\\";
-interface D {
- n: \\"test\\";
-}
-export interface MyBasicComponentProps {
- name: string;
- age?: number;
-}
-
@Component({
tag: \\"my-basic-component\\",
})
export class MyBasicComponent {
- @Prop() name: MyBasicComponentProps[\\"name\\"];
+ @Prop() name: any;
render() {
return (
@@ -7273,17 +6910,12 @@ export class MyBasicComponent {
exports[`Stencil > jsx > Typescript Test > propsDestructure 1`] = `
"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-type Props = {
- children: any;
- type: string;
-};
-
@Component({
tag: \\"my-basic-component\\",
})
export class MyBasicComponent {
- @Prop() children: Props[\\"children\\"];
- @Prop() type: Props[\\"type\\"];
+ @Prop() children: any;
+ @Prop() type: any;
@State() name = \\"Decadef20\\";
render() {
@@ -7302,11 +6934,6 @@ export class MyBasicComponent {
exports[`Stencil > jsx > Typescript Test > propsInterface 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-interface Person {
- name: string;
- age?: number;
-}
-
@Component({
tag: \\"my-basic-component\\",
})
@@ -7328,16 +6955,11 @@ export class MyBasicComponent {
exports[`Stencil > jsx > Typescript Test > propsType 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-type Person = {
- name: string;
- age?: number;
-};
-
@Component({
tag: \\"my-basic-component\\",
})
export class MyBasicComponent {
- @Prop() name: Person[\\"name\\"];
+ @Prop() name: any;
render() {
return (
@@ -7405,17 +7027,12 @@ import type { RepeatData } from \\"./types.js\\";
import { Component, h, Fragment, Host, Prop } from \\"@stencil/core\\";
-export type RenderBlockProps = {
- block: BuilderBlock;
- context: BuilderContextInterface;
-};
-
@Component({
tag: \\"render-block\\",
})
export class RenderBlock {
- @Prop() block: RenderBlockProps[\\"block\\"];
- @Prop() context: RenderBlockProps[\\"context\\"];
+ @Prop() block: any;
+ @Prop() context: any;
get component() {
const componentName = getProcessedBlock({
@@ -7652,14 +7269,6 @@ import { RenderBlocks } from \\"@dummy/RenderBlocks.lite.tsx\\";
import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-type Props = {
- customComponents: string[];
- content: {
- blocks: any[];
- id: string;
- };
-};
-
@Component({
tag: \\"render-content\\",
@@ -7671,8 +7280,8 @@ type Props = {
\`,
})
export class RenderContent {
- @Prop() customComponents: Props[\\"customComponents\\"];
- @Prop() content: Props[\\"content\\"];
+ @Prop() customComponents: any;
+ @Prop() content: any;
componentDidLoad() {
sendComponentsToVisualEditor(this.customComponents);
@@ -7696,21 +7305,14 @@ export class RenderContent {
exports[`Stencil > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export interface ButtonProps {
- attributes?: any;
- text?: string;
- link?: string;
- openLinkInNewTab?: boolean;
-}
-
@Component({
tag: \\"button\\",
})
export class Button {
- @Prop() link: ButtonProps[\\"link\\"];
- @Prop() attributes: ButtonProps[\\"attributes\\"];
- @Prop() openLinkInNewTab: ButtonProps[\\"openLinkInNewTab\\"];
- @Prop() text: ButtonProps[\\"text\\"];
+ @Prop() link: any;
+ @Prop() attributes: any;
+ @Prop() openLinkInNewTab: any;
+ @Prop() text: any;
render() {
return (
@@ -7813,15 +7415,6 @@ export class SetState {
exports[`Stencil > jsx > Typescript Test > signalsOnUpdate 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-type Props = {
- id: string;
- foo: {
- bar: {
- baz: number;
- };
- };
-};
-
@Component({
tag: \\"my-basic-component\\",
@@ -7832,8 +7425,8 @@ type Props = {
\`,
})
export class MyBasicComponent {
- @Prop() id: Props[\\"id\\"];
- @Prop() foo: Props[\\"foo\\"];
+ @Prop() id: any;
+ @Prop() foo: any;
componentDidUpdate() {
console.log(\\"props.id changed\\", this.id);
@@ -8053,16 +7646,11 @@ import type { Foo as Foo2 } from \\"./type-export\\";
import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export type TypeDependencyProps = {
- foo: Foo;
- foo2: Foo2;
-};
-
@Component({
tag: \\"type-dependency\\",
})
export class TypeDependency {
- @Prop() foo: TypeDependencyProps[\\"foo\\"];
+ @Prop() foo: any;
render() {
return ();
"
`;
+exports[`Vue > jsx > Typescript Test > typeExternalProps 1`] = `
+"
+ > =
return str;
};
-// TODO: import target components when they are required
-const getDefaultImport = (json: MitosisComponent, options: ToReactOptions): string => {
- const { preact, type } = options;
- if (preact) {
- return `
- /** @jsx h */
- import { h, Fragment } from 'preact';
- `;
- }
- if (type === 'native') {
- return `
- import * as React from 'react';
- import { FlatList, ScrollView, View, StyleSheet, Image, Text, Pressable, TextInput, TouchableOpacity, Button, Linking } from 'react-native';
- `;
- }
- if (type === 'taro') {
- return `
- import * as React from 'react';
- `;
- }
-
- return "import * as React from 'react';";
-};
-
-const getPropsDefinition = ({ json }: { json: MitosisComponent }) => {
- if (!json.defaultProps) return '';
- const defaultPropsString = Object.keys(json.defaultProps)
- .map((prop) => {
- const value = json.defaultProps!.hasOwnProperty(prop)
- ? json.defaultProps![prop]?.code
- : 'undefined';
- return `${prop}: ${value}`;
- })
- .join(',');
- return `${json.name}.defaultProps = {${defaultPropsString}};`;
-};
-
const isRSC = (json: MitosisComponent, options: ToReactOptions) => {
// When using RSC generator, we check `componentType` field in metadata to determine if it's a server component
const componentType = json.meta.useMetadata?.rsc?.componentType;
@@ -335,14 +316,9 @@ const _componentToReact = (
const hasState = options.stateType === 'builder' || checkHasState(json);
const [forwardRef, hasPropRef] = getPropsRef(json);
- const isForwardRef =
- !options.preact &&
- Boolean(
- json.meta.useMetadata?.forwardRef || json.meta.useMetadata?.react?.forwardRef || hasPropRef,
- );
+ const isForwardRef = !options.preact && Boolean(isReactForwardRef(json) || hasPropRef);
if (isForwardRef) {
- const meta = (json.meta.useMetadata?.forwardRef ||
- json.meta.useMetadata?.react?.forwardRef) as string;
+ const meta = isReactForwardRef(json) as string;
options.forwardRef = meta || forwardRef;
}
const forwardRefType =
@@ -431,100 +407,17 @@ const _componentToReact = (
: ''
}
${hasStateArgument ? '' : refsString}
- ${
- hasState
- ? options.stateType === 'mobx'
- ? `const state = useLocalObservable(() => (${getStateObjectStringFromComponent(json)}));`
- : options.stateType === 'useState'
- ? useStateCode
- : options.stateType === 'solid'
- ? `const state = useMutable(${getStateObjectStringFromComponent(json)});`
- : options.stateType === 'builder'
- ? `const state = useBuilderState(${getStateObjectStringFromComponent(json)});`
- : options.stateType === 'variables'
- ? getStateObjectStringFromComponent(json, {
- format: 'variables',
- keyPrefix: 'const',
- valueMapper: (code, type, _, key) => {
- if (type === 'getter') return `${key} = function ${code.replace('get ', '')}`;
- if (type === 'function')
- return code.startsWith('async') ? code : `${key} = function ${code}`;
- return code;
- },
- })
- : `const state = useLocalProxy(${getStateObjectStringFromComponent(json)});`
- : ''
- }
+ ${getReactVariantStateString({ hasState, useStateCode, json, options })}
${hasStateArgument ? refsString : ''}
${getContextString(json, options)}
${json.hooks.init?.code ? processHookCode({ str: json.hooks.init?.code, options }) : ''}
${contextStr || ''}
- ${
- json.hooks.onInit?.code
- ? shouldInlineOnInitHook
- ? processHookCode({ str: json.hooks.onInit.code, options })
- : `
- const hasInitialized = useRef(false);
- if (!hasInitialized.current) {
- ${processHookCode({
- str: json.hooks.onInit.code,
- options,
- })}
- hasInitialized.current = true;
- }
- `
- : ''
- }
-
- ${json.hooks.onEvent
- .map((hook) => {
- const eventName = `"${hook.eventName}"`;
- const handlerName = getOnEventHandlerName(hook);
- return `
- useEffect(() => {
- ${hook.refName}.current?.addEventListener(${eventName}, ${handlerName});
- return () => ${hook.refName}.current?.removeEventListener(${eventName}, ${handlerName});
- }, []);
- `;
- })
- .join('\n')}
-
- ${json.hooks.onMount
- .map(
- (hook) =>
- `useEffect(() => {
- ${processHookCode({
- str: hook.code,
- options,
- })}
- }, [])`,
- )
- .join('\n')}
-
- ${
- json.hooks.onUpdate
- ?.map(
- (hook) => `useEffect(() => {
- ${processHookCode({ str: hook.code, options })}
- },
- ${hook.deps ? processHookCode({ str: hook.deps, options }) : ''})`,
- )
- .join(';') ?? ''
- }
-
- ${
- json.hooks.onUnMount?.code
- ? `useEffect(() => {
- return () => {
- ${processHookCode({
- str: json.hooks.onUnMount.code,
- options,
- })}
- }
- }, [])`
- : ''
- }
+ ${getOnInitHookComponentBody({ shouldInlineOnInitHook, json, options })}
+ ${getOnEventHookComponentBody(json)}
+ ${getOnMountComponentBody({ json, options })}
+ ${getOnUpdateComponentBody({ json, options })}
+ ${getOnUnMountComponentBody({ json, options })}
return (
${wrap ? openFrag(options) : ''}
@@ -546,7 +439,7 @@ const _componentToReact = (
const str = dedent`
${shouldAddUseClientDirective ? `'use client';` : ''}
- ${getDefaultImport(json, options)}
+ ${getDefaultImport(options)}
${styledComponentsCode ? `import styled from 'styled-components';\n` : ''}
${
reactLibImports.size
@@ -562,17 +455,7 @@ const _componentToReact = (
import { jsx } from '@emotion/react'`.trim()
: ''
}
- ${
- !hasState
- ? ''
- : options.stateType === 'valtio'
- ? `import { useLocalProxy } from 'valtio/utils';`
- : options.stateType === 'solid'
- ? `import { useMutable } from 'react-solid-state';`
- : options.stateType === 'mobx'
- ? `import { useLocalObservable, observer } from 'mobx-react-lite';`
- : ''
- }
+ ${getReactVariantStateImportString(hasState, options)}
${json.types && options.typescript ? json.types.join('\n') : ''}
${renderPreComponent({
explicitImportFileExtension: options.explicitImportFileExtension,
@@ -582,11 +465,10 @@ const _componentToReact = (
${isForwardRef ? `const ${json.name} = forwardRef${forwardRefType}(` : ''}function ${
json.name
}(${componentArgs}) {
+ ${getDefaultProps(json)}
${componentBody}
}${isForwardRef ? ')' : ''}
- ${getPropsDefinition({ json })}
-
${
reactNativeStyles
? `const styles = StyleSheet.create(${json5.stringify(reactNativeStyles)});`
diff --git a/packages/core/src/generators/react/helpers/default-props.ts b/packages/core/src/generators/react/helpers/default-props.ts
new file mode 100644
index 0000000000..20ece596e9
--- /dev/null
+++ b/packages/core/src/generators/react/helpers/default-props.ts
@@ -0,0 +1,17 @@
+import { MitosisComponent } from '@/types/mitosis-component';
+
+export const getDefaultProps = (json: MitosisComponent) => {
+ if (!json.defaultProps) return '';
+ const defaultPropsString = Object.keys(json.defaultProps)
+ .map((prop) => {
+ const value = json.defaultProps!.hasOwnProperty(prop)
+ ? json.defaultProps![prop]?.code
+ : 'undefined';
+ return `${prop}: ${value}`;
+ })
+ .join(',');
+ if (defaultPropsString) {
+ return `props = {${defaultPropsString}, ...props}`;
+ }
+ return '';
+};
diff --git a/packages/core/src/generators/react/helpers/hooks.ts b/packages/core/src/generators/react/helpers/hooks.ts
new file mode 100644
index 0000000000..ca6a0242c9
--- /dev/null
+++ b/packages/core/src/generators/react/helpers/hooks.ts
@@ -0,0 +1,95 @@
+import { ToReactOptions } from '@/generators/react';
+import { processHookCode } from '@/generators/react/helpers/state';
+import { getOnEventHandlerName } from '@/helpers/on-event';
+import { MitosisComponent } from '@/types/mitosis-component';
+
+export const getOnInitHookComponentBody = ({
+ shouldInlineOnInitHook,
+ options,
+ json,
+}: {
+ json: MitosisComponent;
+ options: ToReactOptions;
+ shouldInlineOnInitHook?: boolean;
+}) =>
+ json.hooks.onInit?.code
+ ? shouldInlineOnInitHook
+ ? processHookCode({ str: json.hooks.onInit.code, options })
+ : `
+ const hasInitialized = useRef(false);
+ if (!hasInitialized.current) {
+ ${processHookCode({
+ str: json.hooks.onInit.code,
+ options,
+ })}
+ hasInitialized.current = true;
+ }
+ `
+ : '';
+
+export const getOnEventHookComponentBody = (json: MitosisComponent) =>
+ json.hooks.onEvent
+ .map((hook) => {
+ const eventName = `"${hook.eventName}"`;
+ const handlerName = getOnEventHandlerName(hook);
+ return `
+ useEffect(() => {
+ ${hook.refName}.current?.addEventListener(${eventName}, ${handlerName});
+ return () => ${hook.refName}.current?.removeEventListener(${eventName}, ${handlerName});
+ }, []);
+ `;
+ })
+ .join('\n');
+
+export const getOnMountComponentBody = ({
+ options,
+ json,
+}: {
+ json: MitosisComponent;
+ options: ToReactOptions;
+}) =>
+ json.hooks.onMount
+ .map(
+ (hook) =>
+ `useEffect(() => {
+ ${processHookCode({
+ str: hook.code,
+ options,
+ })}
+ }, [])`,
+ )
+ .join('\n');
+
+export const getOnUpdateComponentBody = ({
+ options,
+ json,
+}: {
+ json: MitosisComponent;
+ options: ToReactOptions;
+}) =>
+ json.hooks.onUpdate
+ ?.map(
+ (hook) => `useEffect(() => {
+ ${processHookCode({ str: hook.code, options })}
+ },
+ ${hook.deps ? processHookCode({ str: hook.deps, options }) : ''})`,
+ )
+ .join(';') ?? '';
+
+export const getOnUnMountComponentBody = ({
+ options,
+ json,
+}: {
+ json: MitosisComponent;
+ options: ToReactOptions;
+}) =>
+ json.hooks.onUnMount?.code
+ ? `useEffect(() => {
+ return () => {
+ ${processHookCode({
+ str: json.hooks.onUnMount.code,
+ options,
+ })}
+ }
+ }, [])`
+ : '';
diff --git a/packages/core/src/generators/react/helpers.ts b/packages/core/src/generators/react/helpers/index.ts
similarity index 93%
rename from packages/core/src/generators/react/helpers.ts
rename to packages/core/src/generators/react/helpers/index.ts
index b4ba8e9292..062baac243 100644
--- a/packages/core/src/generators/react/helpers.ts
+++ b/packages/core/src/generators/react/helpers/index.ts
@@ -5,7 +5,7 @@ import { MitosisNode } from '@/types/mitosis-node';
import { upperFirst } from 'lodash';
import traverse from 'neotraverse/legacy';
-import { ToReactOptions } from './types';
+import { ToReactOptions } from '../types';
export const processBinding = (str: string, options: ToReactOptions) => {
// fix web-component tag transform issue with dashes by not transforming it
@@ -94,3 +94,6 @@ export function processTagReferences(json: MitosisComponent, options: ToReactOpt
}
});
}
+
+export const isReactForwardRef = (json: MitosisComponent): string | undefined =>
+ json.meta.useMetadata?.forwardRef || json.meta.useMetadata?.react?.forwardRef;
diff --git a/packages/core/src/generators/react/state.ts b/packages/core/src/generators/react/helpers/state.ts
similarity index 57%
rename from packages/core/src/generators/react/state.ts
rename to packages/core/src/generators/react/helpers/state.ts
index a3866bff65..f7522fbd5c 100644
--- a/packages/core/src/generators/react/state.ts
+++ b/packages/core/src/generators/react/helpers/state.ts
@@ -1,4 +1,6 @@
import { capitalize } from '@/helpers/capitalize';
+import { getFunctionString } from '@/helpers/get-function-string';
+import { getStateObjectStringFromComponent } from '@/helpers/get-state-object-string';
import { getTypedFunction } from '@/helpers/get-typed-function';
import { isMitosisNode } from '@/helpers/is-mitosis-node';
import { prefixWithFunction, replaceGetterWithFunction } from '@/helpers/patterns';
@@ -7,8 +9,8 @@ import { MitosisComponent, StateValue } from '@/types/mitosis-component';
import { types } from '@babel/core';
import { pipe } from 'fp-ts/lib/function';
import traverse from 'neotraverse/legacy';
-import { processBinding } from './helpers';
-import { ToReactOptions } from './types';
+import { processBinding } from '../helpers';
+import { ToReactOptions } from '../types';
/**
* Removes all `this.` references.
@@ -98,3 +100,74 @@ export const updateStateSettersInCode = (value: string, options: ToReactOptions)
types.callExpression(types.identifier(getSetStateFnName(propertyName)), [path.node.right]),
});
};
+
+export const getReactVariantStateImportString = (hasState: boolean, options: ToReactOptions) => {
+ return !hasState
+ ? ''
+ : options.stateType === 'valtio'
+ ? `import { useLocalProxy } from 'valtio/utils';`
+ : options.stateType === 'solid'
+ ? `import { useMutable } from 'react-solid-state';`
+ : options.stateType === 'mobx'
+ ? `import { useLocalObservable, observer } from 'mobx-react-lite';`
+ : '';
+};
+
+export const getReactVariantStateString = ({
+ hasState,
+ options,
+ json,
+ useStateCode,
+}: {
+ useStateCode: string;
+ hasState: boolean;
+ json: MitosisComponent;
+ options: ToReactOptions;
+}) =>
+ hasState
+ ? options.stateType === 'mobx'
+ ? `const state = useLocalObservable(() => (${getStateObjectStringFromComponent(json)}));`
+ : options.stateType === 'useState'
+ ? useStateCode
+ : options.stateType === 'solid'
+ ? `const state = useMutable(${getStateObjectStringFromComponent(json)});`
+ : options.stateType === 'builder'
+ ? `const state = useBuilderState(${getStateObjectStringFromComponent(json)});`
+ : options.stateType === 'variables'
+ ? getStateObjectStringFromComponent(json, {
+ format: 'variables',
+ keyPrefix: 'const',
+ valueMapper: (code, type, _, key) => {
+ if (key) {
+ if (type === 'getter') return getFunctionString(code.replace('get ', ''));
+ if (type === 'function')
+ return code.startsWith('async') ? code : getFunctionString(code);
+ }
+ return code;
+ },
+ })
+ : `const state = useLocalProxy(${getStateObjectStringFromComponent(json)});`
+ : '';
+
+export const getDefaultImport = (options: ToReactOptions): string => {
+ const { preact, type } = options;
+ if (preact) {
+ return `
+ /** @jsx h */
+ import { h, Fragment } from 'preact';
+ `;
+ }
+ if (type === 'native') {
+ return `
+ import * as React from 'react';
+ import { FlatList, ScrollView, View, StyleSheet, Image, Text, Pressable, TextInput, TouchableOpacity, Button, Linking } from 'react-native';
+ `;
+ }
+ if (type === 'taro') {
+ return `
+ import * as React from 'react';
+ `;
+ }
+
+ return "import * as React from 'react';";
+};
diff --git a/packages/core/src/generators/stencil/component.ts b/packages/core/src/generators/stencil/component.ts
index e9609de63e..66206bce61 100644
--- a/packages/core/src/generators/stencil/component.ts
+++ b/packages/core/src/generators/stencil/component.ts
@@ -1,6 +1,7 @@
import { stringifySingleScopeOnMount } from '@/generators/helpers/on-mount';
import { blockToStencil } from '@/generators/stencil/blocks';
import {
+ getExportsAndLocal,
getImports,
getPropsAsCode,
getStencilCoreImportsAsString,
@@ -57,7 +58,7 @@ export const componentToStencil: TranspilerGenerator =
const childComponents: string[] = getChildComponents(json);
const processBindingOptions: ProcessBindingOptions = { events };
- options.plugins = getCodeProcessorPlugins(options, processBindingOptions);
+ options.plugins = getCodeProcessorPlugins(json, options, processBindingOptions);
if (options.plugins) {
json = runPostJsonPlugins({ json, plugins: options.plugins });
@@ -112,8 +113,6 @@ export const componentToStencil: TranspilerGenerator =
${getImports(json, options, childComponents)}
import { ${coreImports} } from '@stencil/core';
-
- ${json.types ? json.types.join('\n') : ''}
@Component({
tag: '${tagName}',
@@ -127,9 +126,11 @@ export const componentToStencil: TranspilerGenerator =
})
export class ${json.name} {
${refs}
- ${getPropsAsCode(props, defaultProps, json.propsTypeRef)}
+ ${getPropsAsCode(props, json, defaultProps)}
${dataString}
${methodsString}
+
+ ${getExportsAndLocal(json)}
${
!json.hooks.onMount.length
diff --git a/packages/core/src/generators/stencil/helpers/index.ts b/packages/core/src/generators/stencil/helpers/index.ts
index f4dd441239..f13607dc5d 100644
--- a/packages/core/src/generators/stencil/helpers/index.ts
+++ b/packages/core/src/generators/stencil/helpers/index.ts
@@ -23,8 +23,21 @@ const appendEmits = (str: string, events: string[]): string => {
export type ProcessBindingOptions = { events: string[] };
-export const processBinding = (code: string, { events }: ProcessBindingOptions) => {
- return stripStateAndPropsRefs(appendEmits(code, events), { replaceWith: 'this.' });
+export const processBinding = (
+ json: MitosisComponent,
+ code: string,
+ { events }: ProcessBindingOptions,
+) => {
+ let resolvedCode = stripStateAndPropsRefs(appendEmits(code, events), { replaceWith: 'this.' });
+ if (json.exports) {
+ // We need to use local exports with `this.` in stencil
+ Object.entries(json.exports)
+ .filter(([, value]) => value.usedInLocal)
+ .forEach(([key]) => {
+ resolvedCode = resolvedCode.replaceAll(key, `this.${key}`);
+ });
+ }
+ return resolvedCode;
};
export const getTagName = (name: string, { prefix }: ToStencilOptions): string => {
@@ -42,9 +55,14 @@ export const getTagName = (name: string, { prefix }: ToStencilOptions): string =
export const getPropsAsCode = (
props: string[],
+ json: MitosisComponent,
defaultProps?: MitosisState | undefined,
- propsTypeRef?: string,
): string => {
+ const propsTypeRef: string | undefined = json.propsTypeRef;
+ const internalTypes: string[] | undefined = json.types;
+ const isInternalType =
+ propsTypeRef && internalTypes && internalTypes.find((iType) => iType.includes(propsTypeRef));
+
return props
.map((item: string) => {
const defaultProp: string | undefined = defaultProps ? defaultProps[item]?.code : undefined;
@@ -58,7 +76,8 @@ export const getPropsAsCode = (
propsTypeRef &&
propsTypeRef !== 'any' &&
propsTypeRef !== 'unknown' &&
- propsTypeRef !== 'never'
+ propsTypeRef !== 'never' &&
+ !isInternalType
? `${propsTypeRef}["${item}"]`
: 'any';
return `@Prop() ${item}: ${type}${defaultPropString}`;
@@ -120,6 +139,7 @@ export const getImports = (
explicitImportFileExtension: options.explicitImportFileExtension,
component: json,
target: 'stencil',
+ excludeExportAndLocal: true,
importMapper: (_: any, theImport: any, importedValues: any) => {
const childImport = importedValues.defaultImport;
if (childImport && childComponents.includes(childImport)) {
@@ -130,3 +150,15 @@ export const getImports = (
},
});
};
+
+export const getExportsAndLocal = (json: MitosisComponent) => {
+ return Object.entries(json.exports || {})
+ .map(([key, { usedInLocal, code }]) => {
+ if (usedInLocal) {
+ return `${key} = ${code.substring(code.indexOf('=') + 1)}`;
+ }
+
+ return '';
+ })
+ .join('\n');
+};
diff --git a/packages/core/src/generators/stencil/plugins/get-code-processor-plugins.ts b/packages/core/src/generators/stencil/plugins/get-code-processor-plugins.ts
index 6ac1d2233d..37df7b91c8 100644
--- a/packages/core/src/generators/stencil/plugins/get-code-processor-plugins.ts
+++ b/packages/core/src/generators/stencil/plugins/get-code-processor-plugins.ts
@@ -1,8 +1,10 @@
import { processBinding, ProcessBindingOptions } from '@/generators/stencil/helpers/index';
import { ToStencilOptions } from '@/generators/stencil/types';
import { CODE_PROCESSOR_PLUGIN } from '@/helpers/plugins/process-code';
+import { MitosisComponent } from '@/types/mitosis-component';
export const getCodeProcessorPlugins = (
+ json: MitosisComponent,
options: ToStencilOptions,
processBindingOptions: ProcessBindingOptions,
) => {
@@ -18,7 +20,7 @@ export const getCodeProcessorPlugins = (
case 'context-set':
case 'dynamic-jsx-elements':
case 'types':
- return (code) => processBinding(code, processBindingOptions);
+ return (code) => processBinding(json, code, processBindingOptions);
}
}),
];
diff --git a/packages/core/src/generators/svelte/svelte.ts b/packages/core/src/generators/svelte/svelte.ts
index 4afeeb6fb0..b2b846eab5 100644
--- a/packages/core/src/generators/svelte/svelte.ts
+++ b/packages/core/src/generators/svelte/svelte.ts
@@ -324,12 +324,10 @@ export const componentToSvelte: TranspilerGenerator =
propDeclaration += `: ${json.propsTypeRef.split(' |')[0]}['${name}']`;
}
- if (json.props?.[name]?.optional) {
- propDeclaration += `= undefined`;
- }
-
if (json.defaultProps && json.defaultProps.hasOwnProperty(name)) {
propDeclaration += `=${json.defaultProps[name]?.code}`;
+ } else if (json.props?.[name]?.optional) {
+ propDeclaration += `= undefined`;
}
propDeclaration += ';';
diff --git a/packages/core/src/generators/vue/compositionApi.ts b/packages/core/src/generators/vue/compositionApi.ts
index 26dbc97d6e..5c784d1750 100644
--- a/packages/core/src/generators/vue/compositionApi.ts
+++ b/packages/core/src/generators/vue/compositionApi.ts
@@ -20,7 +20,7 @@ const getCompositionPropDefinition = ({
let str = 'const props = ';
if (component.defaultProps) {
- const generic = isTs ? `<${component.propsTypeRef}>` : '';
+ const generic = isTs && component.propsTypeRef !== 'any' ? `<${component.propsTypeRef}>` : '';
const defalutPropsString = props
.map((prop) => {
const value = component.defaultProps!.hasOwnProperty(prop)
diff --git a/packages/core/src/helpers/get-function-string.ts b/packages/core/src/helpers/get-function-string.ts
new file mode 100644
index 0000000000..6e72f1320e
--- /dev/null
+++ b/packages/core/src/helpers/get-function-string.ts
@@ -0,0 +1,2 @@
+export const getFunctionString = (code: string): string =>
+ code.startsWith('function') ? code : `function ${code}`;
diff --git a/packages/core/src/helpers/render-imports.ts b/packages/core/src/helpers/render-imports.ts
index 66e4a6afc6..599769d0a9 100644
--- a/packages/core/src/helpers/render-imports.ts
+++ b/packages/core/src/helpers/render-imports.ts
@@ -237,11 +237,13 @@ export const renderPreComponent = ({
componentsUsed = [],
importMapper,
explicitImportFileExtension = false,
+ excludeExportAndLocal = false,
}: Omit &
Partial> & {
component: MitosisComponent;
target: Target;
excludeMitosisComponents?: boolean;
+ excludeExportAndLocal?: boolean;
}): string => `
${renderImports({
imports: component.imports,
@@ -254,7 +256,7 @@ export const renderPreComponent = ({
importMapper,
explicitImportFileExtension,
})}
- ${renderExportAndLocal(component)}
+ ${excludeExportAndLocal ? '' : renderExportAndLocal(component)}
${component.hooks.preComponent?.code || ''}
`;
{\\" \\"}
Hello
- {this.name || DEFAULT_VALUES.name}
+ {this.name || this.DEFAULT_VALUES.name}
);
}
@@ -6842,15 +6530,11 @@ export class FigmaButton {
exports[`Stencil > jsx > Typescript Test > getterState 1`] = `
"import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-export interface ButtonProps {
- foo: string;
-}
-
@Component({
tag: \\"button\\",
})
export class Button {
- @Prop() foo: ButtonProps[\\"foo\\"];
+ @Prop() foo: any;
get foo2() {
return this.foo + \\"foo\\";
@@ -6881,17 +6565,11 @@ import { RenderBlock } from \\"./builder-render-block.raw\\";
import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
-type RenderContentProps = {
- options?: GetContentOptions;
- content: BuilderContent;
- renderContentProps: RenderBlockProps;
-};
-
@Component({
tag: \\"render-content\\",
})
export class RenderContent {
- @Prop() renderContentProps: RenderContentProps[\\"renderContentProps\\"];
+ @Prop() renderContentProps: any;
getRenderContentProps(block, index) {
return {
@@ -7069,21 +6747,13 @@ export class OnInit {
`;
exports[`Stencil > jsx > Typescript Test > onInit 1`] = `
-"export const defaultValues = {
- name: \\"PatrickJS\\",
-};
-
-import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-
-type Props = {
- name: string;
-};
+"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
@Component({
tag: \\"on-init\\",
})
export class OnInit {
- @Prop() name: Props[\\"name\\"];
+ @Prop() name: any;
@State() name = \\"\\";
render() {
@@ -7183,15 +6853,11 @@ export class OnUpdate {
exports[`Stencil > jsx > Typescript Test > onUpdateWithDeps 1`] = `
"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
-type Props = {
- size: string;
-};
-
@Component({
tag: \\"on-update-with-deps\\",
})
export class OnUpdateWithDeps {
- @Prop() size: Props[\\"size\\"];
+ @Prop() size: any;
@State() a = \\"a\\";
@State() b = \\"b\\";
@@ -7207,23 +6873,7 @@ export class OnUpdateWithDeps {
`;
exports[`Stencil > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
-"const b = 3;
-const foo = () => {};
-export const a = 3;
-export const bar = () => {};
-export function run{this.foo}
;
@@ -8071,6 +7659,29 @@ export class TypeDependency {
"
`;
+exports[`Stencil > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+
+@Component({
+ tag: \\"type-external-props\\",
+})
+export class TypeExternalProps {
+ @Prop() name: FooProps[\\"name\\"];
+
+ render() {
+ return (
+
+ Hello
+ {this.name}!{\\" \\"}
+
+ );
+ }
+}
+"
+`;
+
exports[`Stencil > jsx > Typescript Test > typeExternalStore 1`] = `
"import { FooStore } from \\"./foo-store\\";
@@ -8097,12 +7708,6 @@ export class TypeExternalStore {
exports[`Stencil > jsx > Typescript Test > typeGetterStore 1`] = `
"import { Component, h, Fragment, State } from \\"@stencil/core\\";
-type GetterStore = {
- getName: () => string;
- name: string;
- get test(): string;
-};
-
@Component({
tag: \\"type-getter-store\\",
})
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index b9aa7e2401..c362e35d4e 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -3101,6 +3101,14 @@ exports[`Svelte > jsx > Javascript Test > typeDependency 1`] = `
{foo}
"
`;
+exports[`Svelte > jsx > Javascript Test > typeExternalProps 1`] = `
+"
+
+Hello {name}!
"
+`;
+
exports[`Svelte > jsx > Javascript Test > typeExternalStore 1`] = `
"
@@ -5589,11 +5596,10 @@ exports[`Svelte > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
@@ -6935,6 +6941,16 @@ exports[`Svelte > jsx > Typescript Test > typeDependency 1`] = `
{foo}
"
`;
+exports[`Svelte > jsx > Typescript Test > typeExternalProps 1`] = `
+"
+
+Hello {name}!
"
+`;
+
exports[`Svelte > jsx > Typescript Test > typeExternalStore 1`] = `
""
`;
+exports[`Vue > jsx > Javascript Test > typeExternalProps 1`] = `
+"
+ Hello {{ name }}!
+
+
+"
+`;
+
exports[`Vue > jsx > Javascript Test > typeExternalStore 1`] = `
"
Hello {{ _name }}!
@@ -7057,6 +7067,18 @@ const props = definePropsHello {{ name }}!
+
+
+"
+`;
+
exports[`Vue > jsx > Typescript Test > typeExternalStore 1`] = `
"
Hello {{ _name }}!
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 05c3a9c3ca..ae57c55487 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -4071,6 +4071,22 @@ export default defineComponent({
"
`;
+exports[`Vue > jsx > Javascript Test > typeExternalProps 1`] = `
+"
+ Hello {{ name }}!
+
+
+"
+`;
+
exports[`Vue > jsx > Javascript Test > typeExternalStore 1`] = `
"
Hello {{ _name }}!
@@ -8776,6 +8792,24 @@ export default defineComponent({
"
`;
+exports[`Vue > jsx > Typescript Test > typeExternalProps 1`] = `
+"
+ Hello {{ name }}!
+
+
+"
+`;
+
exports[`Vue > jsx > Typescript Test > typeExternalStore 1`] = `
"
Hello {{ _name }}!
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 1e28e23eff..98b9be17a3 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -16338,6 +16338,119 @@ customElements.define(\\"type-dependency\\", TypeDependency);
"
`;
+exports[`webcomponent > jsx > Javascript Test > typeExternalProps 1`] = `
+"/**
+ * Usage:
+ *
+ *
+ Hello
+
+ !
+
\`;
+ this.pendingUpdate = true;
+
+ this.render();
+ this.onMount();
+ this.pendingUpdate = false;
+ this.update();
+ }
+
+ onMount() {}
+
+ onUpdate() {}
+
+ update() {
+ if (this.pendingUpdate === true) {
+ return;
+ }
+ this.pendingUpdate = true;
+ this.render();
+ this.onUpdate();
+ this.pendingUpdate = false;
+ }
+
+ render() {
+ // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+ this.destroyAnyNodes();
+ this.updateBindings();
+ }
+
+ updateBindings() {
+ this._root
+ .querySelectorAll(\\"[data-el='div-type-external-props-1']\\")
+ .forEach((el) => {
+ this.renderTextNode(el, this.props.name);
+ });
+ }
+
+ // Helper to render content
+ renderTextNode(el, text) {
+ const textNode = document.createTextNode(text);
+ if (el?.scope) {
+ textNode.scope = el.scope;
+ }
+ if (el?.context) {
+ textNode.context = el.context;
+ }
+ el.after(textNode);
+ this.nodesToDestroy.push(el.nextSibling);
+ }
+}
+
+customElements.define(\\"type-external-props\\", TypeExternalProps);
+"
+`;
+
exports[`webcomponent > jsx > Javascript Test > typeExternalStore 1`] = `
"/**
* Usage:
@@ -33505,6 +33618,121 @@ customElements.define(\\"type-dependency\\", TypeDependency);
"
`;
+exports[`webcomponent > jsx > Typescript Test > typeExternalProps 1`] = `
+"import { FooProps } from \\"./foo-props\\";
+
+/**
+ * Usage:
+ *
+ *
+ Hello
+
+ !
+
\`;
+ this.pendingUpdate = true;
+
+ this.render();
+ this.onMount();
+ this.pendingUpdate = false;
+ this.update();
+ }
+
+ onMount() {}
+
+ onUpdate() {}
+
+ update() {
+ if (this.pendingUpdate === true) {
+ return;
+ }
+ this.pendingUpdate = true;
+ this.render();
+ this.onUpdate();
+ this.pendingUpdate = false;
+ }
+
+ render() {
+ // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+ this.destroyAnyNodes();
+ this.updateBindings();
+ }
+
+ updateBindings() {
+ this._root
+ .querySelectorAll(\\"[data-el='div-type-external-props-1']\\")
+ .forEach((el) => {
+ this.renderTextNode(el, this.props.name);
+ });
+ }
+
+ // Helper to render content
+ renderTextNode(el, text) {
+ const textNode = document.createTextNode(text);
+ if (el?.scope) {
+ textNode.scope = el.scope;
+ }
+ if (el?.context) {
+ textNode.context = el.context;
+ }
+ el.after(textNode);
+ this.nodesToDestroy.push(el.nextSibling);
+ }
+}
+
+customElements.define(\\"type-external-props\\", TypeExternalProps);
+"
+`;
+
exports[`webcomponent > jsx > Typescript Test > typeExternalStore 1`] = `
"import { FooStore } from \\"./foo-store\\";
diff --git a/packages/core/src/__tests__/data/types/foo-props.ts b/packages/core/src/__tests__/data/types/foo-props.ts
new file mode 100644
index 0000000000..b86124e556
--- /dev/null
+++ b/packages/core/src/__tests__/data/types/foo-props.ts
@@ -0,0 +1 @@
+export type FooProps = { name?: string };
diff --git a/packages/core/src/__tests__/data/types/type-external-props.raw.tsx b/packages/core/src/__tests__/data/types/type-external-props.raw.tsx
new file mode 100644
index 0000000000..8b62a50ad1
--- /dev/null
+++ b/packages/core/src/__tests__/data/types/type-external-props.raw.tsx
@@ -0,0 +1,5 @@
+import { FooProps } from './foo-props';
+
+export default function TypeExternalProps(props: FooProps) {
+ return Hello {props.name}!
;
+}
diff --git a/packages/core/src/__tests__/react.test.ts b/packages/core/src/__tests__/react.test.ts
index 6aa214b422..f296802077 100644
--- a/packages/core/src/__tests__/react.test.ts
+++ b/packages/core/src/__tests__/react.test.ts
@@ -30,3 +30,15 @@ describe('React - stateType: useState', () => {
expect(output).toMatchSnapshot();
});
});
+
+/*describe('React - test', () => {
+ runTestsForTarget({
+ options: {
+ stateType: 'useState',
+ },
+ target: 'react',
+ generator: componentToReact,
+ only: ['defaultProps'],
+ logOutput: true,
+ });
+});*/
diff --git a/packages/core/src/__tests__/stencil.test.ts b/packages/core/src/__tests__/stencil.test.ts
index bdd6e36ca6..d96130d6b9 100644
--- a/packages/core/src/__tests__/stencil.test.ts
+++ b/packages/core/src/__tests__/stencil.test.ts
@@ -8,13 +8,12 @@ describe('Stencil', () => {
options: {},
});
});
-/*
-describe('Stencil local', () => {
+/*describe('Stencil local', () => {
runTestsForTarget({
target: 'stencil',
generator: componentToStencil,
options: {},
logOutput: true,
- only: ['subComponent'],
+ only: ['defaultValsWithTypes'],
});
});*/
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index d3b759a6fe..f37a5cd074 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -53,6 +53,7 @@ const propsInterface = getRawFile('./data/types/component-props-interface.raw.ts
const preserveTyping = getRawFile('./data/types/preserve-typing.raw.tsx');
const typeDependency = getRawFile('./data/types/type-dependency.raw.tsx');
const typeExternalStore = getRawFile('./data/types/type-external-store.raw.tsx');
+const typeExternalProps = getRawFile('./data/types/type-external-props.raw.tsx');
const typeGetterStore = getRawFile('./data/types/type-getter-store.raw.tsx');
const defaultProps = getRawFile('./data/default-props/default-props.raw.tsx');
@@ -217,9 +218,10 @@ const BASIC_TESTS: Tests = {
propsInterface: propsInterface,
defaultProps: defaultProps,
defaultPropsOutsideComponent,
- preserveTyping: preserveTyping,
+ preserveTyping,
typeDependency,
typeExternalStore,
+ typeExternalProps,
typeGetterStore,
defaultValsWithTypes: getRawFile('./data/types/component-with-default-values-types.raw.tsx'),
'import types': builderRenderContent,
diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index 40dc24b97d..26dfb85c42 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -16,7 +16,7 @@ import {
processBinding,
wrapInFragment,
} from './helpers';
-import { updateStateSettersInCode } from './state';
+import { updateStateSettersInCode } from './helpers/state';
import { ToReactOptions } from './types';
const NODE_MAPPERS: {
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index b4ea1a5065..1b24840562 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -1,20 +1,25 @@
+import { getDefaultProps } from '@/generators/react/helpers/default-props';
+import {
+ getOnEventHookComponentBody,
+ getOnInitHookComponentBody,
+ getOnMountComponentBody,
+ getOnUnMountComponentBody,
+ getOnUpdateComponentBody,
+} from '@/generators/react/helpers/hooks';
import { createSingleBinding } from '@/helpers/bindings';
import { createMitosisNode } from '@/helpers/create-mitosis-node';
import { dedent } from '@/helpers/dedent';
import { fastClone } from '@/helpers/fast-clone';
import { getPropsRef } from '@/helpers/get-props-ref';
import { getRefs } from '@/helpers/get-refs';
-import {
- getStateObjectStringFromComponent,
- stringifyContextValue,
-} from '@/helpers/get-state-object-string';
+import { stringifyContextValue } from '@/helpers/get-state-object-string';
import { gettersToFunctions } from '@/helpers/getters-to-functions';
import { handleMissingState } from '@/helpers/handle-missing-state';
import { isRootTextNode } from '@/helpers/is-root-text-node';
import { mapRefs } from '@/helpers/map-refs';
import { initializeOptions } from '@/helpers/merge-options';
import { checkIsDefined } from '@/helpers/nullable';
-import { getOnEventHandlerName, processOnEventHooksPlugin } from '@/helpers/on-event';
+import { processOnEventHooksPlugin } from '@/helpers/on-event';
import { CODE_PROCESSOR_PLUGIN } from '@/helpers/plugins/process-code';
import { processHttpRequests } from '@/helpers/process-http-requests';
import { renderPreComponent } from '@/helpers/render-imports';
@@ -25,24 +30,37 @@ import { stripMetaProperties } from '@/helpers/strip-meta-properties';
import { collectCss } from '@/helpers/styles/collect-css';
import { collectStyledComponents } from '@/helpers/styles/collect-styled-components';
import { hasCss } from '@/helpers/styles/helpers';
+import {
+ runPostCodePlugins,
+ runPostJsonPlugins,
+ runPreCodePlugins,
+ runPreJsonPlugins,
+} from '@/modules/plugins';
import { MitosisComponent } from '@/types/mitosis-component';
import { TranspilerGenerator } from '@/types/transpiler';
import { types } from '@babel/core';
import hash from 'hash-sum';
import json5 from 'json5';
import { format } from 'prettier/standalone';
-import {
- runPostCodePlugins,
- runPostJsonPlugins,
- runPreCodePlugins,
- runPreJsonPlugins,
-} from '../../modules/plugins';
import { hasContext } from '../helpers/context';
import { checkIfIsClientComponent } from '../helpers/rsc';
import { collectReactNativeStyles } from '../react-native';
import { blockToReact } from './blocks';
-import { closeFrag, openFrag, processTagReferences, wrapInFragment } from './helpers';
-import { getUseStateCode, processHookCode, updateStateSetters } from './state';
+import {
+ closeFrag,
+ isReactForwardRef,
+ openFrag,
+ processTagReferences,
+ wrapInFragment,
+} from './helpers';
+import {
+ getDefaultImport,
+ getReactVariantStateImportString,
+ getReactVariantStateString,
+ getUseStateCode,
+ processHookCode,
+ updateStateSetters,
+} from './helpers/state';
import { ToReactOptions } from './types';
export const contextPropDrillingKey = '_context';
@@ -254,43 +272,6 @@ export const componentToReact: TranspilerGenerator