Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/BuilderIO/mitosis into feat…
Browse files Browse the repository at this point in the history 
…ure/alpinejs
  • Loading branch information
@sbrow
sbrow committed Nov 2, 2022
2 parents 3f6da2e + 345852b commit 108299d
Show file tree
Hide file tree
Showing 42 changed files with 2,838 additions and 258 deletions.
4 changes: 2 additions & 2 deletions packages/cli/src/build/helpers/transpile.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ export const transformImports = (target: Target, options: MitosisConfig) => (cod
// we start by replacing all `context.lite` imports with `context`
// This Context replace is only needed for non-mitosis components, i.e. plain `.js`/`.ts` files.
// Mitosis components have logic that transform context import paths correctly.
/\.context\.lite(['"][;\)])/g,
/\.context\.lite['"]/g,
`.context.js$1`,
)
.replace(
// afterwards, we replace all `.lite` imports with the correct file extension
/\.lite(['"][;\)])/g,
/\.lite['"]/g,
`${getFileExtensionForTarget({ type: 'import', target, options })}$1`,
)
.replace(
Expand Down
2 changes: 2 additions & 0 deletions packages/core/jsx-runtime.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1006,6 +1006,7 @@ export declare namespace JSX {

interface ContainerElementSVGAttributes<T>
extends CoreSVGAttributes<T>,
ShapeElementSVGAttributes<T>,
Pick<
PresentationSVGAttributes,
| 'clip-path'
Expand Down Expand Up @@ -1078,6 +1079,7 @@ export declare namespace JSX {

interface ShapeElementSVGAttributes<T>
extends CoreSVGAttributes<T>,
ShapeElementSVGAttributes<T>,
Pick<
PresentationSVGAttributes,
| 'color'
Expand Down
176 changes: 150 additions & 26 deletions packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export interface Props {
template: \`
<div>
<ng-container *ngIf=\\"showInput\\">
<div>
<ng-container>
<input
class=\\"input\\"
#inputRef
Expand All @@ -31,7 +31,7 @@ export interface Props {
<option value=\\"86\\">GR 86</option>
</select>
</div>
</ng-container>
</ng-container>
Hello {{lowerCaseName()}} ! I can run in React, Qwik, Vue, Solid, or Web
Expand Down Expand Up @@ -449,7 +449,7 @@ import { Component } from \\"@angular/core\\";
template: \`
<div>
<ng-container *ngFor=\\"let person of names\\">
<div>
<ng-container>
<input
[attr.value]=\\"name\\"
(input)=\\"
Expand All @@ -459,7 +459,7 @@ import { Component } from \\"@angular/core\\";
Hello {{person}} ! I can run in Qwik, Web Component, React, Vue,
Solid, or Liquid!
</div>
</ng-container>
</ng-container>
</div>
\`,
Expand Down Expand Up @@ -497,7 +497,7 @@ export interface Props {
template: \`
<div>
<ng-container *ngIf=\\"showInput\\">
<div>
<ng-container>
<input
class=\\"input\\"
#inputRef
Expand All @@ -513,7 +513,7 @@ export interface Props {
<option value=\\"86\\">GR 86</option>
</select>
</div>
</ng-container>
</ng-container>
Hello {{lowerCaseName()}} ! I can run in React, Qwik, Vue, Solid, or Web
Expand Down Expand Up @@ -1511,9 +1511,9 @@ import { Component } from \\"@angular/core\\";
template: \`
<div>
<ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
<div>
<ng-container>
<img class=\\"custom-class\\" [attr.src]=\\"item\\" [attr.key]=\\"itemIndex\\" />
</div>
</ng-container>
</ng-container>
</div>
\`,
Expand Down Expand Up @@ -2495,9 +2495,9 @@ import Context2 from \\"@dummy/2\\";
@Component({
selector: \\"component-with-context, ComponentWithContext\\",
template: \`
<div>
<div>{{foo.value}}</div>
</div>
<ng-container>
<ng-container>{{foo.value}}</ng-container>
</ng-container>
\`,
})
export class ComponentWithContext {
Expand Down Expand Up @@ -3235,6 +3235,68 @@ export class MyBasicComponentModule {}
"
`;
exports[`Angular with Preserve Imports and File Extensions Javascript Test renderContentExample 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { BrowserModule } from \\"@angular/platform-browser\\";
import { Component, Input } from \\"@angular/core\\";
type Props = {
customComponents: string[];
content: {
blocks: any[];
id: string;
};
};
import {
sendComponentsToVisualEditor,
dispatchNewContentToVisualEditor,
trackClick,
} from \\"@dummy/injection-js\\";
import BuilderContext from \\"@dummy/context.lite\\";
import RenderBlocks from \\"@dummy/RenderBlocks.lite.tsx\\";
@Component({
selector: \\"render-content, RenderContent\\",
template: \`
<div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
<render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
</div>
\`,
styles: [
\`
.div {
display: flex;
flex-direction: columns;
}
\`,
],
})
export class RenderContent {
trackClick = trackClick;
@Input() content: Props[\\"content\\"];
@Input() customComponents: Props[\\"customComponents\\"];
ngOnInit() {
sendComponentsToVisualEditor(this.customComponents);
}
ngAfterContentChecked() {
dispatchNewContentToVisualEditor(this.content);
}
}
@NgModule({
declarations: [RenderContent],
imports: [BrowserModule, RenderBlocksModule],
exports: [RenderContent],
})
export class RenderContentModule {}
"
`;
exports[`Angular with Preserve Imports and File Extensions Javascript Test rootFragmentMultiNode 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { BrowserModule } from \\"@angular/platform-browser\\";
Expand All @@ -3251,7 +3313,7 @@ export interface ButtonProps {
@Component({
selector: \\"button, Button\\",
template: \`
<div>
<ng-container>
<ng-container *ngIf=\\"link\\">
<a
[attr.href]=\\"link\\"
Expand All @@ -3264,7 +3326,7 @@ export interface ButtonProps {
<ng-container *ngIf=\\"!link\\">
<button type=\\"button\\">{{text}}</button>
</ng-container>
</div>
</ng-container>
\`,
})
export class Button {
Expand Down Expand Up @@ -3685,7 +3747,7 @@ export interface Props {
template: \`
<div>
<ng-container *ngIf=\\"showInput\\">
<div>
<ng-container>
<input
class=\\"input\\"
#inputRef
Expand All @@ -3701,7 +3763,7 @@ export interface Props {
<option value=\\"86\\">GR 86</option>
</select>
</div>
</ng-container>
</ng-container>
Hello {{lowerCaseName()}} ! I can run in React, Qwik, Vue, Solid, or Web
Expand Down Expand Up @@ -4119,7 +4181,7 @@ import { Component } from \\"@angular/core\\";
template: \`
<div>
<ng-container *ngFor=\\"let person of names\\">
<div>
<ng-container>
<input
[attr.value]=\\"name\\"
(input)=\\"
Expand All @@ -4129,7 +4191,7 @@ import { Component } from \\"@angular/core\\";
Hello {{person}} ! I can run in Qwik, Web Component, React, Vue,
Solid, or Liquid!
</div>
</ng-container>
</ng-container>
</div>
\`,
Expand Down Expand Up @@ -4167,7 +4229,7 @@ export interface Props {
template: \`
<div>
<ng-container *ngIf=\\"showInput\\">
<div>
<ng-container>
<input
class=\\"input\\"
#inputRef
Expand All @@ -4183,7 +4245,7 @@ export interface Props {
<option value=\\"86\\">GR 86</option>
</select>
</div>
</ng-container>
</ng-container>
Hello {{lowerCaseName()}} ! I can run in React, Qwik, Vue, Solid, or Web
Expand Down Expand Up @@ -5181,9 +5243,9 @@ import { Component } from \\"@angular/core\\";
template: \`
<div>
<ng-container *ngFor=\\"let item of images; let itemIndex = index\\">
<div>
<ng-container>
<img class=\\"custom-class\\" [attr.src]=\\"item\\" [attr.key]=\\"itemIndex\\" />
</div>
</ng-container>
</ng-container>
</div>
\`,
Expand Down Expand Up @@ -6165,9 +6227,9 @@ import Context2 from \\"@dummy/2\\";
@Component({
selector: \\"component-with-context, ComponentWithContext\\",
template: \`
<div>
<div>{{foo.value}}</div>
</div>
<ng-container>
<ng-container>{{foo.value}}</ng-container>
</ng-container>
\`,
})
export class ComponentWithContext {
Expand Down Expand Up @@ -6911,6 +6973,68 @@ export class MyBasicComponentModule {}
"
`;
exports[`Angular with Preserve Imports and File Extensions Typescript Test renderContentExample 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { BrowserModule } from \\"@angular/platform-browser\\";
import { Component, Input } from \\"@angular/core\\";
type Props = {
customComponents: string[];
content: {
blocks: any[];
id: string;
};
};
import {
sendComponentsToVisualEditor,
dispatchNewContentToVisualEditor,
trackClick,
} from \\"@dummy/injection-js\\";
import BuilderContext from \\"@dummy/context.lite\\";
import RenderBlocks from \\"@dummy/RenderBlocks.lite.tsx\\";
@Component({
selector: \\"render-content, RenderContent\\",
template: \`
<div class=\\"div\\" (click)=\\"trackClick(content.id)\\">
<render-blocks [blocks]=\\"content.blocks\\"></render-blocks>
</div>
\`,
styles: [
\`
.div {
display: flex;
flex-direction: columns;
}
\`,
],
})
export class RenderContent {
trackClick = trackClick;
@Input() content: Props[\\"content\\"];
@Input() customComponents: Props[\\"customComponents\\"];
ngOnInit() {
sendComponentsToVisualEditor(this.customComponents);
}
ngAfterContentChecked() {
dispatchNewContentToVisualEditor(this.content);
}
}
@NgModule({
declarations: [RenderContent],
imports: [BrowserModule, RenderBlocksModule],
exports: [RenderContent],
})
export class RenderContentModule {}
"
`;
exports[`Angular with Preserve Imports and File Extensions Typescript Test rootFragmentMultiNode 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { BrowserModule } from \\"@angular/platform-browser\\";
Expand All @@ -6927,7 +7051,7 @@ export interface ButtonProps {
@Component({
selector: \\"button, Button\\",
template: \`
<div>
<ng-container>
<ng-container *ngIf=\\"link\\">
<a
[attr.href]=\\"link\\"
Expand All @@ -6940,7 +7064,7 @@ export interface ButtonProps {
<ng-container *ngIf=\\"!link\\">
<button type=\\"button\\">{{text}}</button>
</ng-container>
</div>
</ng-container>
\`,
})
export class Button {
Expand Down
Loading

0 comments on commit 108299d

Please sign in to comment.