diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap index 9cc6978299..c7daf97210 100644 --- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap @@ -2681,6 +2681,27 @@ exports[`Alpine.js > jsx > Javascript Test > useTarget 1`] = ` " `; +exports[`Alpine.js > jsx > Javascript Test > webComponent 1`] = ` +" + Slide 1 + + Slide 2 + + Slide 3 + + +" +`; + exports[`Alpine.js > jsx > Remove Internal mitosis package 1`] = ` "
Hello @@ -5370,6 +5391,27 @@ exports[`Alpine.js > jsx > Typescript Test > useTarget 1`] = ` " `; +exports[`Alpine.js > jsx > Typescript Test > webComponent 1`] = ` +" + Slide 1 + + Slide 2 + + Slide 3 + + +" +`; + exports[`Alpine.js > svelte > Javascript Test > basic 1`] = ` "
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 e0a9d3bb58..6adfc08be7 100644 --- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap @@ -4240,6 +4240,41 @@ export class UseTargetComponentModule {} " `; +exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > webComponent 1`] = ` +"import { NgModule } from \\"@angular/core\\"; +import { CommonModule } from \\"@angular/common\\"; + +import { Component } from \\"@angular/core\\"; + +import { register } from \\"swiper/element/bundle\\"; + +@Component({ + selector: \\"my-basic-web-component, MyBasicWebComponent\\", + template: \` + + Slide 1 + + Slide 2 + + Slide 3 + + \`, +}) +export class MyBasicWebComponent { + constructor() { + register(); + } +} + +@NgModule({ + declarations: [MyBasicWebComponent], + imports: [CommonModule], + exports: [MyBasicWebComponent], +}) +export class MyBasicWebComponentModule {} +" +`; + exports[`Angular with Preserve Imports and File Extensions > jsx > Remove Internal mitosis package 1`] = ` "import { NgModule } from \\"@angular/core\\"; import { CommonModule } from \\"@angular/common\\"; @@ -8907,6 +8942,41 @@ export class UseTargetComponentModule {} " `; +exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > webComponent 1`] = ` +"import { NgModule } from \\"@angular/core\\"; +import { CommonModule } from \\"@angular/common\\"; + +import { Component } from \\"@angular/core\\"; + +import { register } from \\"swiper/element/bundle\\"; + +@Component({ + selector: \\"my-basic-web-component, MyBasicWebComponent\\", + template: \` + + Slide 1 + + Slide 2 + + Slide 3 + + \`, +}) +export class MyBasicWebComponent { + constructor() { + register(); + } +} + +@NgModule({ + declarations: [MyBasicWebComponent], + imports: [CommonModule], + exports: [MyBasicWebComponent], +}) +export class MyBasicWebComponentModule {} +" +`; + exports[`Angular with Preserve Imports and File Extensions > svelte > Javascript Test > basic 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 9b45fd388a..f2173bdbba 100644 --- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap @@ -4337,6 +4337,42 @@ export class UseTargetComponentModule {} " `; +exports[`Angular with Import Mapper Tests > jsx > Javascript Test > webComponent 1`] = ` +"import { NgModule } from \\"@angular/core\\"; +import { CommonModule } from \\"@angular/common\\"; + +import { Component } from \\"@angular/core\\"; + +import { register } from \\"swiper/element/bundle\\"; + +@Component({ + selector: \\"my-basic-web-component, MyBasicWebComponent\\", + template: \` + + Slide 1 + + Slide 2 + + Slide 3 + + \`, +}) +export class MyBasicWebComponent { + constructor() { + register(); + } +} + +@NgModule({ + declarations: [MyBasicWebComponent], + imports: [CommonModule], + exports: [MyBasicWebComponent], + bootstrap: [SomeOtherComponent], +}) +export class MyBasicWebComponentModule {} +" +`; + exports[`Angular with Import Mapper Tests > jsx > Remove Internal mitosis package 1`] = ` "import { NgModule } from \\"@angular/core\\"; import { CommonModule } from \\"@angular/common\\"; @@ -9104,6 +9140,42 @@ export class UseTargetComponentModule {} " `; +exports[`Angular with Import Mapper Tests > jsx > Typescript Test > webComponent 1`] = ` +"import { NgModule } from \\"@angular/core\\"; +import { CommonModule } from \\"@angular/common\\"; + +import { Component } from \\"@angular/core\\"; + +import { register } from \\"swiper/element/bundle\\"; + +@Component({ + selector: \\"my-basic-web-component, MyBasicWebComponent\\", + template: \` + + Slide 1 + + Slide 2 + + Slide 3 + + \`, +}) +export class MyBasicWebComponent { + constructor() { + register(); + } +} + +@NgModule({ + declarations: [MyBasicWebComponent], + imports: [CommonModule], + exports: [MyBasicWebComponent], + bootstrap: [SomeOtherComponent], +}) +export class MyBasicWebComponentModule {} +" +`; + exports[`Angular with Import Mapper Tests > svelte > Javascript Test > basic 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 94d0878829..b63da09f6c 100644 --- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap @@ -7782,6 +7782,69 @@ export class UseTargetComponent { " `; +exports[`Angular > jsx > Javascript Test > webComponent 1`] = ` +"import { NgModule } from \\"@angular/core\\"; +import { CommonModule } from \\"@angular/common\\"; + +import { Component } from \\"@angular/core\\"; + +import { register } from \\"swiper/element/bundle\\"; + +@Component({ + selector: \\"my-basic-web-component, MyBasicWebComponent\\", + template: \` + + Slide 1 + + Slide 2 + + Slide 3 + + \`, +}) +export class MyBasicWebComponent { + constructor() { + register(); + } +} + +@NgModule({ + declarations: [MyBasicWebComponent], + imports: [CommonModule], + exports: [MyBasicWebComponent], +}) +export class MyBasicWebComponentModule {} +" +`; + +exports[`Angular > jsx > Javascript Test > webComponent 2`] = ` +"import { Component } from \\"@angular/core\\"; +import { CommonModule } from \\"@angular/common\\"; + +import { register } from \\"swiper/element/bundle\\"; + +@Component({ + selector: \\"my-basic-web-component, MyBasicWebComponent\\", + template: \` + + Slide 1 + + Slide 2 + + Slide 3 + + \`, + standalone: true, + imports: [CommonModule], +}) +export class MyBasicWebComponent { + constructor() { + register(); + } +} +" +`; + exports[`Angular > jsx > Remove Internal mitosis package 1`] = ` "import { NgModule } from \\"@angular/core\\"; import { CommonModule } from \\"@angular/common\\"; @@ -16409,6 +16472,69 @@ export class UseTargetComponent { " `; +exports[`Angular > jsx > Typescript Test > webComponent 1`] = ` +"import { NgModule } from \\"@angular/core\\"; +import { CommonModule } from \\"@angular/common\\"; + +import { Component } from \\"@angular/core\\"; + +import { register } from \\"swiper/element/bundle\\"; + +@Component({ + selector: \\"my-basic-web-component, MyBasicWebComponent\\", + template: \` + + Slide 1 + + Slide 2 + + Slide 3 + + \`, +}) +export class MyBasicWebComponent { + constructor() { + register(); + } +} + +@NgModule({ + declarations: [MyBasicWebComponent], + imports: [CommonModule], + exports: [MyBasicWebComponent], +}) +export class MyBasicWebComponentModule {} +" +`; + +exports[`Angular > jsx > Typescript Test > webComponent 2`] = ` +"import { Component } from \\"@angular/core\\"; +import { CommonModule } from \\"@angular/common\\"; + +import { register } from \\"swiper/element/bundle\\"; + +@Component({ + selector: \\"my-basic-web-component, MyBasicWebComponent\\", + template: \` + + Slide 1 + + Slide 2 + + Slide 3 + + \`, + standalone: true, + imports: [CommonModule], +}) +export class MyBasicWebComponent { + constructor() { + register(); + } +} +" +`; + exports[`Angular > svelte > Javascript Test > basic 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 e9fbbe13bf..da60b7ace4 100644 --- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap @@ -6208,6 +6208,17 @@ exports[`Html > jsx > Javascript Test > useTarget 1`] = ` " `; +exports[`Html > jsx > Javascript Test > webComponent 1`] = ` +" + Slide 1 + + Slide 2 + + Slide 3 + +" +`; + exports[`Html > jsx > Remove Internal mitosis package 1`] = ` "
Hello @@ -12477,6 +12488,17 @@ exports[`Html > jsx > Typescript Test > useTarget 1`] = ` " `; +exports[`Html > jsx > Typescript Test > webComponent 1`] = ` +" + Slide 1 + + Slide 2 + + Slide 3 + +" +`; + exports[`Html > svelte > Javascript Test > basic 1`] = ` "
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap index a3abd00cb4..3ee90e6b92 100644 --- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap @@ -892,6 +892,17 @@ exports[`Liquid > jsx > Javascript Test > useTarget 1`] = ` " `; +exports[`Liquid > jsx > Javascript Test > webComponent 1`] = ` +" + Slide 1 + + Slide 2 + + Slide 3 + +" +`; + exports[`Liquid > jsx > Remove Internal mitosis package 1`] = ` "
Hello {{name}} ! I can run in React, Qwik, Vue, Solid, or Liquid!
" @@ -1789,6 +1800,17 @@ exports[`Liquid > jsx > Typescript Test > useTarget 1`] = ` " `; +exports[`Liquid > jsx > Typescript Test > webComponent 1`] = ` +" + Slide 1 + + Slide 2 + + Slide 3 + +" +`; + exports[`Liquid > svelte > Javascript Test > basic 1`] = ` "
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap index 3140f0226a..213956360e 100644 --- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap @@ -4113,6 +4113,35 @@ export default class UseTargetComponent extends LitElement { " `; +exports[`Lit > jsx > Javascript Test > webComponent 1`] = ` +"import { register } from \\"swiper/element/bundle\\"; + +import { LitElement, html, css } from \\"lit\\"; +import { customElement, property, state, query } from \\"lit/decorators.js\\"; + +@customElement(\\"my-basic-web-component\\") +export default class MyBasicWebComponent extends LitElement { + createRenderRoot() { + return this; + } + + render() { + return html\` + + + Slide 1 + + Slide 2 + + Slide 3 + + + \`; + } +} +" +`; + exports[`Lit > jsx > Remove Internal mitosis package 1`] = ` "import { LitElement, html, css } from \\"lit\\"; import { customElement, property, state, query } from \\"lit/decorators.js\\"; @@ -8655,6 +8684,35 @@ export default class UseTargetComponent extends LitElement { " `; +exports[`Lit > jsx > Typescript Test > webComponent 1`] = ` +"import { register } from \\"swiper/element/bundle\\"; + +import { LitElement, html, css } from \\"lit\\"; +import { customElement, property, state, query } from \\"lit/decorators.js\\"; + +@customElement(\\"my-basic-web-component\\") +export default class MyBasicWebComponent extends LitElement { + createRenderRoot() { + return this; + } + + render() { + return html\` + + + Slide 1 + + Slide 2 + + Slide 3 + + + \`; + } +} +" +`; + exports[`Lit > svelte > Javascript Test > basic 1`] = ` "import { LitElement, html, css } from \\"lit\\"; import { customElement, property, state, query } from \\"lit/decorators.js\\"; diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap index bdf74033d7..110903965d 100644 --- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap @@ -2414,6 +2414,20 @@ exports[`Marko > jsx > Javascript Test > useTarget 1`] = `
\${component.name}
" `; +exports[`Marko > jsx > Javascript Test > webComponent 1`] = ` +"import { register } from \\"swiper/element/bundle\\"; + +class {} + + + Slide 1 + + Slide 2 + + Slide 3 +" +`; + exports[`Marko > jsx > Remove Internal mitosis package 1`] = ` "class { onCreate() { @@ -4807,6 +4821,20 @@ exports[`Marko > jsx > Typescript Test > useTarget 1`] = `
\${component.name}
" `; +exports[`Marko > jsx > Typescript Test > webComponent 1`] = ` +"import { register } from \\"swiper/element/bundle\\"; + +class {} + + + Slide 1 + + Slide 2 + + Slide 3 +" +`; + exports[`Marko > svelte > Javascript Test > basic 1`] = ` "class { onCreate() { 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 fa63ed3bbe..430ed43e32 100644 --- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap @@ -12498,6 +12498,166 @@ state.lastName = 'baz'; } `; +exports[`Parse JSX > Javascript > webComponent 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": " + ", + }, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": "Slide 1", + }, + "scope": {}, + }, + ], + "meta": {}, + "name": "swiper-slide", + "properties": {}, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": " + ", + }, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": "Slide 2", + }, + "scope": {}, + }, + ], + "meta": {}, + "name": "swiper-slide", + "properties": {}, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": " + ", + }, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": "Slide 3", + }, + "scope": {}, + }, + ], + "meta": {}, + "name": "swiper-slide", + "properties": {}, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": " + ", + }, + "scope": {}, + }, + ], + "meta": {}, + "name": "swiper-container", + "properties": { + "navigation": "true", + "pagination": "true", + "slides-per-view": "3", + }, + "scope": {}, + }, + ], + "context": { + "get": {}, + "set": {}, + }, + "exports": {}, + "hooks": { + "onEvent": [], + "onInit": { + "code": "register()", + }, + "onMount": [], + }, + "imports": [ + { + "importKind": "value", + "imports": { + "register": "register", + }, + "path": "swiper/element/bundle", + }, + ], + "inputs": [], + "meta": {}, + "name": "MyBasicWebComponent", + "refs": {}, + "state": {}, + "subComponents": [], +} +`; + exports[`Parse JSX > Remove Internal mitosis package 1`] = ` { "@type": "@builder.io/mitosis/component", @@ -25647,6 +25807,166 @@ state.lastName = 'baz'; } `; +exports[`Parse JSX > Typescript > webComponent 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": " + ", + }, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": "Slide 1", + }, + "scope": {}, + }, + ], + "meta": {}, + "name": "swiper-slide", + "properties": {}, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": " + ", + }, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": "Slide 2", + }, + "scope": {}, + }, + ], + "meta": {}, + "name": "swiper-slide", + "properties": {}, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": " + ", + }, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [ + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": "Slide 3", + }, + "scope": {}, + }, + ], + "meta": {}, + "name": "swiper-slide", + "properties": {}, + "scope": {}, + }, + { + "@type": "@builder.io/mitosis/node", + "bindings": {}, + "children": [], + "meta": {}, + "name": "div", + "properties": { + "_text": " + ", + }, + "scope": {}, + }, + ], + "meta": {}, + "name": "swiper-container", + "properties": { + "navigation": "true", + "pagination": "true", + "slides-per-view": "3", + }, + "scope": {}, + }, + ], + "context": { + "get": {}, + "set": {}, + }, + "exports": {}, + "hooks": { + "onEvent": [], + "onInit": { + "code": "register()", + }, + "onMount": [], + }, + "imports": [ + { + "importKind": "value", + "imports": { + "register": "register", + }, + "path": "swiper/element/bundle", + }, + ], + "inputs": [], + "meta": {}, + "name": "MyBasicWebComponent", + "refs": {}, + "state": {}, + "subComponents": [], +} +`; + exports[`Parse JSX > boolean attribute 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 5dcf30ff6e..5761713c24 100644 --- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap @@ -502,10 +502,10 @@ function Column(props) { } function getColumnCssWidth(index) { - const columns = getColumns(); - const gutterSize = getGutterSize(); + const columns = state.getColumns(); + const gutterSize = state.getGutterSize(); const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length; - return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`; + return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`; } return ( @@ -581,7 +581,7 @@ function ContentSlotJsxCode(props) { const [showContent, setShowContent] = useState(() => false); function cls() { - return props.slotContent && props.children ? \`\${name}-content\` : \\"\\"; + return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\"; } function show() { @@ -1459,7 +1459,9 @@ function SmileReviews(props) {
-
+
N: {index} @@ -1540,7 +1542,7 @@ function Text(props) { __html: props.text || props.content || - name || + state.name || '

my name

', }} /> @@ -3288,6 +3290,32 @@ export default UseTargetComponent; " `; +exports[`Preact > jsx > Javascript Test > webComponent 1`] = ` +"/** @jsx h */ +import { h, Fragment } from \\"preact\\"; +import { useEffect } from \\"preact/hooks\\"; +import { register } from \\"swiper/element/bundle\\"; + +function MyBasicWebComponent(props) { + useEffect(() => { + register(); + }, []); + + return ( + + Slide 1 + + Slide 2 + + Slide 3 + + ); +} + +export default MyBasicWebComponent; +" +`; + exports[`Preact > jsx > Remove Internal mitosis package 1`] = ` "/** @jsx h */ import { h, Fragment } from \\"preact\\"; @@ -3862,10 +3890,10 @@ function Column(props: ColumnProps) { } function getColumnCssWidth(index: number) { - const columns = getColumns(); - const gutterSize = getGutterSize(); + const columns = state.getColumns(); + const gutterSize = state.getGutterSize(); const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length; - return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`; + return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`; } return ( @@ -3952,7 +3980,7 @@ function ContentSlotJsxCode(props: Props) { const [showContent, setShowContent] = useState(() => false); function cls() { - return props.slotContent && props.children ? \`\${name}-content\` : \\"\\"; + return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\"; } function show() { @@ -4964,7 +4992,9 @@ function SmileReviews(props: SmileReviewsProps) {
-
+
N: {index} @@ -5059,7 +5089,7 @@ function Text(props: TextProps) { __html: props.text || props.content || - name || + state.name || '

my name

', }} /> @@ -6995,6 +7025,32 @@ export default UseTargetComponent; " `; +exports[`Preact > jsx > Typescript Test > webComponent 1`] = ` +"/** @jsx h */ +import { h, Fragment } from \\"preact\\"; +import { useEffect } from \\"preact/hooks\\"; +import { register } from \\"swiper/element/bundle\\"; + +function MyBasicWebComponent(props: any) { + useEffect(() => { + register(); + }, []); + + return ( + + Slide 1 + + Slide 2 + + Slide 3 + + ); +} + +export default MyBasicWebComponent; +" +`; + exports[`Preact > svelte > Javascript Test > basic 1`] = ` "/** @jsx h */ import { h, Fragment } from \\"preact\\"; @@ -7113,7 +7169,7 @@ function MyComponent(props) { return ( ); @@ -7523,7 +7579,7 @@ function MyComponent(props: any) { return ( ); diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap index f41400aefa..78b1b9ae76 100644 --- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap @@ -4923,6 +4923,29 @@ export default UseTargetComponent; " `; +exports[`qwik > jsx > Javascript Test > webComponent 1`] = ` +"import { Fragment, component$, h, useTask$ } from \\"@builder.io/qwik\\"; + +import { register } from \\"swiper/element/bundle\\"; + +export const MyBasicWebComponent = component$((props) => { + useTask$(() => { + register(); + }); + + return ( + + Slide 1 + Slide 2 + Slide 3 + + ); +}); + +export default MyBasicWebComponent; +" +`; + exports[`qwik > jsx > Remove Internal mitosis package 1`] = ` "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\"; @@ -8454,6 +8477,29 @@ export default UseTargetComponent; " `; +exports[`qwik > jsx > Typescript Test > webComponent 1`] = ` +"import { Fragment, component$, h, useTask$ } from \\"@builder.io/qwik\\"; + +import { register } from \\"swiper/element/bundle\\"; + +export const MyBasicWebComponent = component$((props: any) => { + useTask$(() => { + register(); + }); + + return ( + + Slide 1 + Slide 2 + Slide 3 + + ); +}); + +export default MyBasicWebComponent; +" +`; + exports[`qwik > mount 1`] = ` { "high.cjs": "const __proxyMerge__ = (exports.__proxyMerge__ = function __proxyMerge__( 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 921230750b..8ce834ea68 100644 --- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap @@ -607,10 +607,10 @@ function Column(props) { } function getColumnCssWidth(index) { - const columns = getColumns(); - const gutterSize = getGutterSize(); + const columns = state.getColumns(); + const gutterSize = state.getGutterSize(); const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length; - return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`; + return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`; } return ( @@ -682,7 +682,7 @@ function ContentSlotJsxCode(props) { const [showContent, setShowContent] = useState(() => false); function cls() { - return props.slotContent && props.children ? \`\${name}-content\` : \\"\\"; + return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\"; } function show() { @@ -1716,7 +1716,7 @@ function Text(props) { __html: props.text || props.content || - name || + state.name || '

my name

', }} /> @@ -3842,6 +3842,45 @@ export default UseTargetComponent; " `; +exports[`React Native > jsx > Javascript Test > webComponent 1`] = ` +"import * as React from \\"react\\"; +import { + FlatList, + ScrollView, + View, + StyleSheet, + Image, + Text, +} from \\"react-native\\"; +import { useEffect } from \\"react\\"; +import { register } from \\"swiper/element/bundle\\"; + +function MyBasicWebComponent(props) { + useEffect(() => { + register(); + }, []); + + return ( + + + Slide 1 + + + + Slide 2 + + + + Slide 3 + + + ); +} + +export default MyBasicWebComponent; +" +`; + exports[`React Native > jsx > Remove Internal mitosis package 1`] = ` "import * as React from \\"react\\"; import { @@ -4529,10 +4568,10 @@ function Column(props: ColumnProps) { } function getColumnCssWidth(index: number) { - const columns = getColumns(); - const gutterSize = getGutterSize(); + const columns = state.getColumns(); + const gutterSize = state.getGutterSize(); const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length; - return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`; + return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`; } return ( @@ -4615,7 +4654,7 @@ function ContentSlotJsxCode(props: Props) { const [showContent, setShowContent] = useState(() => false); function cls() { - return props.slotContent && props.children ? \`\${name}-content\` : \\"\\"; + return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\"; } function show() { @@ -5797,7 +5836,7 @@ function Text(props: TextProps) { __html: props.text || props.content || - name || + state.name || '

my name

', }} /> @@ -8111,6 +8150,45 @@ export default UseTargetComponent; " `; +exports[`React Native > jsx > Typescript Test > webComponent 1`] = ` +"import * as React from \\"react\\"; +import { + FlatList, + ScrollView, + View, + StyleSheet, + Image, + Text, +} from \\"react-native\\"; +import { useEffect } from \\"react\\"; +import { register } from \\"swiper/element/bundle\\"; + +function MyBasicWebComponent(props: any) { + useEffect(() => { + register(); + }, []); + + return ( + + + Slide 1 + + + + Slide 2 + + + + Slide 3 + + + ); +} + +export default MyBasicWebComponent; +" +`; + exports[`React Native > svelte > Javascript Test > basic 1`] = ` "import * as React from \\"react\\"; import { diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap index b5cb3227e2..18ce8e0a4a 100644 --- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap @@ -498,10 +498,10 @@ function Column(props) { } function getColumnCssWidth(index) { - const columns = getColumns(); - const gutterSize = getGutterSize(); + const columns = state.getColumns(); + const gutterSize = state.getGutterSize(); const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length; - return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`; + return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`; } return ( @@ -576,7 +576,7 @@ function ContentSlotJsxCode(props) { const [showContent, setShowContent] = useState(() => false); function cls() { - return props.slotContent && props.children ? \`\${name}-content\` : \\"\\"; + return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\"; } function show() { @@ -1445,7 +1445,9 @@ function SmileReviews(props) {
-
+
N: {index} @@ -1525,7 +1527,7 @@ function Text(props) { __html: props.text || props.content || - name || + state.name || '

my name

', }} /> @@ -3242,6 +3244,31 @@ export default UseTargetComponent; " `; +exports[`React > jsx > Javascript Test > webComponent 1`] = ` +"import * as React from \\"react\\"; +import { useEffect } from \\"react\\"; +import { register } from \\"swiper/element/bundle\\"; + +function MyBasicWebComponent(props) { + useEffect(() => { + register(); + }, []); + + return ( + + Slide 1 + + Slide 2 + + Slide 3 + + ); +} + +export default MyBasicWebComponent; +" +`; + exports[`React > jsx > Remove Internal mitosis package 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; @@ -3812,10 +3839,10 @@ function Column(props: ColumnProps) { } function getColumnCssWidth(index: number) { - const columns = getColumns(); - const gutterSize = getGutterSize(); + const columns = state.getColumns(); + const gutterSize = state.getGutterSize(); const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length; - return \`calc(\${getWidth(index)}% - \${subtractWidth}px)\`; + return \`calc(\${state.getWidth(index)}% - \${subtractWidth}px)\`; } return ( @@ -3901,7 +3928,7 @@ function ContentSlotJsxCode(props: Props) { const [showContent, setShowContent] = useState(() => false); function cls() { - return props.slotContent && props.children ? \`\${name}-content\` : \\"\\"; + return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\"; } function show() { @@ -4904,7 +4931,9 @@ function SmileReviews(props: SmileReviewsProps) {
-
+
N: {index} @@ -4998,7 +5027,7 @@ function Text(props: TextProps) { __html: props.text || props.content || - name || + state.name || '

my name

', }} /> @@ -6903,6 +6932,31 @@ export default UseTargetComponent; " `; +exports[`React > jsx > Typescript Test > webComponent 1`] = ` +"import * as React from \\"react\\"; +import { useEffect } from \\"react\\"; +import { register } from \\"swiper/element/bundle\\"; + +function MyBasicWebComponent(props: any) { + useEffect(() => { + register(); + }, []); + + return ( + + Slide 1 + + Slide 2 + + Slide 3 + + ); +} + +export default MyBasicWebComponent; +" +`; + exports[`React > stamped (mobx) 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; @@ -7074,7 +7128,9 @@ function SmileReviews(props) {
-
+
N: {index} @@ -7233,7 +7289,7 @@ function MyComponent(props) { return ( ); @@ -7641,7 +7697,7 @@ function MyComponent(props: any) { return ( ); diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap index 2c95aa1fae..215140c6c6 100644 --- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap @@ -573,7 +573,7 @@ function ContentSlotJsxCode(props) { const [showContent, setShowContent] = useState(() => false); function cls() { - return props.slotContent && props.children ? \`\${name}-content\` : \\"\\"; + return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\"; } function show() { @@ -1442,7 +1442,9 @@ function SmileReviews(props) {
-
+
N: {index} @@ -1522,7 +1524,7 @@ function Text(props) { __html: props.text || props.content || - name || + state.name || '

my name

', }} /> @@ -2980,6 +2982,31 @@ export default UseTargetComponent; " `; +exports[`RSC > jsx > Javascript Test > webComponent 1`] = ` +"import * as React from \\"react\\"; +import { useEffect } from \\"react\\"; +import { register } from \\"swiper/element/bundle\\"; + +function MyBasicWebComponent(props) { + useEffect(() => { + register(); + }, []); + + return ( + + Slide 1 + + Slide 2 + + Slide 3 + + ); +} + +export default MyBasicWebComponent; +" +`; + exports[`RSC > jsx > Remove Internal mitosis package 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; @@ -3636,7 +3663,7 @@ function ContentSlotJsxCode(props: Props) { const [showContent, setShowContent] = useState(() => false); function cls() { - return props.slotContent && props.children ? \`\${name}-content\` : \\"\\"; + return props.slotContent && props.children ? \`\${state.name}-content\` : \\"\\"; } function show() { @@ -4639,7 +4666,9 @@ function SmileReviews(props: SmileReviewsProps) {
-
+
N: {index} @@ -4733,7 +4762,7 @@ function Text(props: TextProps) { __html: props.text || props.content || - name || + state.name || '

my name

', }} /> @@ -6366,6 +6395,31 @@ export default UseTargetComponent; " `; +exports[`RSC > jsx > Typescript Test > webComponent 1`] = ` +"import * as React from \\"react\\"; +import { useEffect } from \\"react\\"; +import { register } from \\"swiper/element/bundle\\"; + +function MyBasicWebComponent(props: any) { + useEffect(() => { + register(); + }, []); + + return ( + + Slide 1 + + Slide 2 + + Slide 3 + + ); +} + +export default MyBasicWebComponent; +" +`; + exports[`RSC > svelte > Javascript Test > basic 1`] = ` "\\"use client\\"; import * as React from \\"react\\"; @@ -6484,7 +6538,7 @@ function MyComponent(props) { return ( ); @@ -6892,7 +6946,7 @@ function MyComponent(props: any) { return ( ); diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap index d8bcd981b0..05d1e44ded 100644 --- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap @@ -6283,6 +6283,44 @@ export default UseTargetComponent; " `; +exports[`Solid > jsx > Javascript Test > webComponent 1`] = ` +"import { register } from \\"swiper/element/bundle\\"; + +function MyBasicWebComponent(props) { + return ( + + Slide 1 + Slide 2 + Slide 3 + + ); +} + +export default MyBasicWebComponent; +" +`; + +exports[`Solid > jsx > Javascript Test > webComponent 2`] = ` +"import { css } from \\"solid-styled-components\\"; + +import { register } from \\"swiper/element/bundle\\"; + +function MyBasicWebComponent(props) { + return ( + <> + + Slide 1 + Slide 2 + Slide 3 + + + ); +} + +export default MyBasicWebComponent; +" +`; + exports[`Solid > jsx > Remove Internal mitosis package 1`] = ` "import { createSignal } from \\"solid-js\\"; @@ -13382,6 +13420,44 @@ export default UseTargetComponent; " `; +exports[`Solid > jsx > Typescript Test > webComponent 1`] = ` +"import { register } from \\"swiper/element/bundle\\"; + +function MyBasicWebComponent(props: any) { + return ( + + Slide 1 + Slide 2 + Slide 3 + + ); +} + +export default MyBasicWebComponent; +" +`; + +exports[`Solid > jsx > Typescript Test > webComponent 2`] = ` +"import { css } from \\"solid-styled-components\\"; + +import { register } from \\"swiper/element/bundle\\"; + +function MyBasicWebComponent(props: any) { + return ( + <> + + Slide 1 + Slide 2 + Slide 3 + + + ); +} + +export default MyBasicWebComponent; +" +`; + exports[`Solid > svelte > Javascript Test > basic 1`] = ` "import { createSignal } 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 2222ba7768..f1681f7220 100644 --- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap @@ -3022,6 +3022,30 @@ export default class UseTargetComponent { " `; +exports[`Stencil > jsx > Javascript Test > webComponent 1`] = ` +"import { register } from \\"swiper/element/bundle\\"; + +import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\"; + +@Component({ + tag: \\"my-basic-web-component\\", +}) +export default class MyBasicWebComponent { + render() { + return ( + + Slide 1 + + Slide 2 + + Slide 3 + + ); + } +} +" +`; + exports[`Stencil > jsx > Remove Internal mitosis package 1`] = ` "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\"; @@ -6080,6 +6104,30 @@ export default class UseTargetComponent { " `; +exports[`Stencil > jsx > Typescript Test > webComponent 1`] = ` +"import { register } from \\"swiper/element/bundle\\"; + +import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\"; + +@Component({ + tag: \\"my-basic-web-component\\", +}) +export default class MyBasicWebComponent { + render() { + return ( + + Slide 1 + + Slide 2 + + Slide 3 + + ); + } +} +" +`; + exports[`Stencil > svelte > Javascript Test > basic 1`] = ` "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\"; diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap index 36a6dcc965..6a8f9a34c0 100644 --- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap @@ -2672,6 +2672,25 @@ exports[`Svelte > jsx > Javascript Test > useTarget 1`] = `
{name()}
" `; +exports[`Svelte > jsx > Javascript Test > webComponent 1`] = ` +" + + + Slide 1 + Slide 2 + Slide 3 +" +`; + exports[`Svelte > jsx > Remove Internal mitosis package 1`] = ` " + + + Slide 1 + Slide 2 + Slide 3 +" +`; + exports[`Svelte > svelte > Javascript Test > basic 1`] = ` "" `; +exports[`Vue > jsx > Javascript Test > webComponent 1`] = ` +" + +" +`; + exports[`Vue > jsx > Remove Internal mitosis package 1`] = ` "