Skip to content

Commit 2453c34

Browse files
authored
Merge branch 'main' into remove-empty-line-vue
2 parents 837f157 + d990c9c commit 2453c34

File tree

82 files changed

+2305
-868
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+2305
-868
lines changed

.yarn/versions/5bc0e0a1.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
undecided:
2+
- "@builder.io/mitosis-repo"
3+
- "@builder.io/mitosis"

.yarn/versions/66376ce5.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
undecided:
2+
- "@builder.io/mitosis-repo"
3+
- "@builder.io/mitosis"

.yarn/versions/6bc94a3b.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
undecided:
2+
- "@builder.io/mitosis-repo"
3+
- "@builder.io/mitosis"

.yarn/versions/ed8e0a45.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
undecided:
2+
- "@builder.io/mitosis-repo"
3+
- "@builder.io/mitosis"

e2e/e2e-app/src/component-map.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import oneComp from './one-component';
22
import showForComp from './show-for-component';
3+
import SignalParent from './signals/parent.lite';
34
import specialTags from './special-tags.lite';
45
import twoComp from './two-components';
56
import typedComp from './types';
@@ -10,4 +11,5 @@ export const COMPONENT_MAP = {
1011
'/types/': typedComp,
1112
'/show-for-component/': showForComp,
1213
'/special-tags/': specialTags,
14+
'/signals': SignalParent,
1315
};
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { onMount, Signal, useStore } from '@builder.io/mitosis';
2+
3+
interface ItemListProps {
4+
list: Signal<string[]>;
5+
}
6+
7+
export default function SignalItemList(props: ItemListProps) {
8+
const state = useStore({
9+
someFn() {
10+
console.log(props.list, props.list.value[0]);
11+
props.list.value[0] = 'hello';
12+
},
13+
});
14+
15+
onMount(() => {
16+
console.log(props.list, props.list.value[0]);
17+
});
18+
19+
return (
20+
<ul class="shadow-md rounded">
21+
{props.list.value.map((item) => (
22+
<li
23+
class="border-gray-200 border-b"
24+
css={{
25+
padding: '10px',
26+
}}
27+
>
28+
{item}
29+
<button onClick={state.someFn}>Click me</button>
30+
</li>
31+
))}
32+
</ul>
33+
);
34+
}
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { onMount, useState, useStore } from '@builder.io/mitosis';
2+
import SignalItemList from './child.lite';
3+
4+
export default function SignalParent() {
5+
const [n] = useState(['123'], { reactive: true });
6+
7+
const state = useStore({
8+
someFn() {
9+
console.log(n, n.value);
10+
n.value[0] = '123';
11+
},
12+
});
13+
14+
onMount(() => {
15+
console.log(n, n.value);
16+
});
17+
18+
return (
19+
<div>
20+
<SignalItemList list={n} />
21+
<span>{n.value}</span>
22+
<button onClick={state.someFn}>Click me</button>
23+
<div title={n.value.toString()} />
24+
</div>
25+
);
26+
}

packages/cli/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@builder.io/mitosis-cli",
3-
"version": "0.0.64",
3+
"version": "0.0.67",
44
"description": "mitosis CLI",
55
"types": "build/types/types.d.ts",
66
"bin": {

packages/cli/src/build/build.ts

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import {
2020
componentToTemplate,
2121
componentToVue2,
2222
componentToVue3,
23+
createTypescriptProject,
24+
mapSignalTypeInTSFile,
2325
MitosisComponent,
2426
MitosisConfig,
2527
parseJsx,
@@ -128,25 +130,33 @@ const parseJsxComponent = async ({
128130
options,
129131
path,
130132
file,
133+
tsProject,
131134
}: {
132135
options: MitosisConfig;
133136
path: string;
134137
file: string;
138+
tsProject: Parameters<typeof parseJsx>[1]['tsProject'];
135139
}) => {
136140
const requiredParses = getRequiredParsers(options);
137141
let typescriptMitosisJson: ParsedMitosisJson['typescriptMitosisJson'];
138142
let javascriptMitosisJson: ParsedMitosisJson['javascriptMitosisJson'];
143+
144+
const jsxArgs: Parameters<typeof parseJsx>[1] = {
145+
...options.parserOptions?.jsx,
146+
tsProject,
147+
filePath: path,
148+
};
139149
if (requiredParses.typescript && requiredParses.javascript) {
140150
typescriptMitosisJson = options.parser
141151
? await options.parser(file, path)
142-
: parseJsx(file, { typescript: true });
152+
: parseJsx(file, { ...jsxArgs, typescript: true });
143153
javascriptMitosisJson = options.parser
144154
? await options.parser(file, path)
145-
: parseJsx(file, { typescript: false });
155+
: parseJsx(file, { ...jsxArgs, typescript: false });
146156
} else {
147157
const singleParse = options.parser
148158
? await options.parser(file, path)
149-
: parseJsx(file, { typescript: requiredParses.typescript });
159+
: parseJsx(file, { ...jsxArgs, typescript: requiredParses.typescript });
150160

151161
// technically only one of these will be used, but we set both to simplify things types-wise.
152162
typescriptMitosisJson = singleParse;
@@ -173,18 +183,39 @@ const parseSvelteComponent = async ({ path, file }: { path: string; file: string
173183
return output;
174184
};
175185

186+
const findTsConfigFile = (options: MitosisConfig) => {
187+
const optionPath = options.parserOptions?.jsx?.tsConfigFilePath;
188+
189+
if (optionPath && pathExists(optionPath)) {
190+
return optionPath;
191+
}
192+
193+
const defaultPath = [cwd, 'tsconfig.json'].join('/');
194+
195+
if (pathExists(defaultPath)) {
196+
return defaultPath;
197+
}
198+
199+
return undefined;
200+
};
201+
176202
const getMitosisComponentJSONs = async (options: MitosisConfig): Promise<ParsedMitosisJson[]> => {
177203
const paths = getFiles({ files: options.files, exclude: options.exclude }).filter(
178204
checkIsMitosisComponentFilePath,
179205
);
206+
207+
const tsConfigFilePath = findTsConfigFile(options);
208+
209+
const tsProject = tsConfigFilePath ? createTypescriptProject(tsConfigFilePath) : undefined;
210+
180211
return Promise.all(
181-
paths.map(async (path): Promise<ParsedMitosisJson> => {
212+
paths.map(async (path) => {
182213
try {
183214
const file = await readFile(path, 'utf8');
184215
if (INPUT_EXTENSIONS.svelte.some((x) => path.endsWith(x))) {
185216
return await parseSvelteComponent({ path, file });
186217
} else {
187-
return await parseJsxComponent({ options, path, file });
218+
return await parseJsxComponent({ options, path, file, tsProject });
188219
}
189220
} catch (err) {
190221
console.error('Could not parse file:', path);
@@ -393,9 +424,10 @@ const outputNonComponentFiles = async ({
393424
const extension = getNonComponentFileExtension({ target, options });
394425
const folderPath = `${options.dest}/${outputPath}`;
395426
return await Promise.all(
396-
files.map(({ path, output }) =>
397-
outputFile(`${folderPath}/${path.replace(/\.tsx?$/, extension)}`, output),
398-
),
427+
files.map(async ({ path, output }) => {
428+
const filePath = `${folderPath}/${path.replace(/\.tsx?$/, extension)}`;
429+
await outputFile(filePath, output);
430+
}),
399431
);
400432
};
401433

@@ -466,6 +498,7 @@ async function buildNonComponentFiles(args: TargetContextWithConfig) {
466498
const output = pipe(
467499
await transpileIfNecessary({ path, target, options, content: file }),
468500
transformImports({ target, options }),
501+
(code) => mapSignalTypeInTSFile({ code, target }),
469502
);
470503

471504
return { output, path };

packages/core/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"name": "Builder.io",
2323
"url": "https://www.builder.io"
2424
},
25-
"version": "0.0.106",
25+
"version": "0.0.109",
2626
"homepage": "https://github.com/BuilderIO/mitosis",
2727
"main": "./dist/src/index.js",
2828
"exports": {
@@ -93,6 +93,7 @@
9393
"svelte": "^3.30.0",
9494
"svelte-preprocess": "^4.10.7",
9595
"traverse": "^0.6.6",
96+
"ts-morph": "^19.0.0",
9697
"typescript": "^4.8.4",
9798
"vue": "~2.6"
9899
},

packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -980,7 +980,7 @@ exports[`Alpine.js > jsx > Javascript Test > Image 1`] = `
980980

981981
useLazyLoading() {
982982
// TODO: Add more checks here, like testing for real web browsers
983-
return !!props.lazy && isBrowser();
983+
return !!props.lazy && this.isBrowser();
984984
},
985985

986986
isBrowser: function isBrowser() {
@@ -1000,7 +1000,7 @@ exports[`Alpine.js > jsx > Javascript Test > Image 1`] = `
10001000
const buffer = window.innerHeight / 2;
10011001

10021002
if (rect.top < window.innerHeight + buffer) {
1003-
setLoad(true);
1003+
this.load = true;
10041004
this.scrollListener = null;
10051005
window.removeEventListener(\\"scroll\\", listener);
10061006
}
@@ -1751,8 +1751,8 @@ exports[`Alpine.js > jsx > Javascript Test > multipleOnUpdate 1`] = `
17511751
> 2 | Alpine.data('multipleOnUpdate', () => ({,
17521752
| ^
17531753
3 | onUpdate() {
1754-
4 | console.log('Runs on every update/rerender');
1755-
5 | console.log('Runs on every update/rerender as well');"
1754+
4 | console.log('Runs on every update/rerender')
1755+
5 | console.log('Runs on every update/rerender as well')"
17561756
`;
17571757

17581758
exports[`Alpine.js > jsx > Javascript Test > multipleOnUpdateWithDeps 1`] = `
@@ -1873,7 +1873,7 @@ exports[`Alpine.js > jsx > Javascript Test > onInit & onMount 1`] = `
18731873
> 2 | Alpine.data('onInit', () => ({, init() {
18741874
| ^
18751875
3 |
1876-
4 | console.log('onMount');
1876+
4 | console.log('onMount')
18771877
5 | }}))"
18781878
`;
18791879

@@ -1899,7 +1899,7 @@ exports[`Alpine.js > jsx > Javascript Test > onMount 1`] = `
18991899
> 2 | Alpine.data('comp', () => ({, init() {
19001900
| ^
19011901
3 |
1902-
4 | console.log('Runs on mount');
1902+
4 | console.log('Runs on mount')
19031903
5 | }}))"
19041904
`;
19051905

@@ -1910,7 +1910,7 @@ exports[`Alpine.js > jsx > Javascript Test > onUpdate 1`] = `
19101910
> 2 | Alpine.data('onUpdate', () => ({,
19111911
| ^
19121912
3 | onUpdate() {
1913-
4 | console.log('Runs on every update/rerender');
1913+
4 | console.log('Runs on every update/rerender')
19141914
5 | }}))"
19151915
`;
19161916

@@ -2027,8 +2027,8 @@ exports[`Alpine.js > jsx > Javascript Test > referencingFunInsideHook 1`] = `
20272027
},
20282028

20292029
onUpdate() {
2030-
foo({
2031-
someOption: bar,
2030+
this.foo({
2031+
someOption: this.bar,
20322032
});
20332033
},
20342034
}));
@@ -2278,7 +2278,7 @@ exports[`Alpine.js > jsx > Javascript Test > renderContentExample 1`] = `
22782278
> 2 | Alpine.data('renderContent', () => ({, init() {
22792279
| ^
22802280
3 |
2281-
4 | sendComponentsToVisualEditor(props.customComponents);
2281+
4 | sendComponentsToVisualEditor(props.customComponents)
22822282
5 | }}))"
22832283
`;
22842284

@@ -3544,7 +3544,7 @@ exports[`Alpine.js > jsx > Typescript Test > Image 1`] = `
35443544

35453545
useLazyLoading() {
35463546
// TODO: Add more checks here, like testing for real web browsers
3547-
return !!props.lazy && isBrowser();
3547+
return !!props.lazy && this.isBrowser();
35483548
},
35493549

35503550
isBrowser: function isBrowser() {
@@ -3564,7 +3564,7 @@ exports[`Alpine.js > jsx > Typescript Test > Image 1`] = `
35643564
const buffer = window.innerHeight / 2;
35653565

35663566
if (rect.top < window.innerHeight + buffer) {
3567-
setLoad(true);
3567+
this.load = true;
35683568
this.scrollListener = null;
35693569
window.removeEventListener(\\"scroll\\", listener);
35703570
}
@@ -4315,8 +4315,8 @@ exports[`Alpine.js > jsx > Typescript Test > multipleOnUpdate 1`] = `
43154315
> 2 | Alpine.data('multipleOnUpdate', () => ({,
43164316
| ^
43174317
3 | onUpdate() {
4318-
4 | console.log('Runs on every update/rerender');
4319-
5 | console.log('Runs on every update/rerender as well');"
4318+
4 | console.log('Runs on every update/rerender')
4319+
5 | console.log('Runs on every update/rerender as well')"
43204320
`;
43214321

43224322
exports[`Alpine.js > jsx > Typescript Test > multipleOnUpdateWithDeps 1`] = `
@@ -4437,7 +4437,7 @@ exports[`Alpine.js > jsx > Typescript Test > onInit & onMount 1`] = `
44374437
> 2 | Alpine.data('onInit', () => ({, init() {
44384438
| ^
44394439
3 |
4440-
4 | console.log('onMount');
4440+
4 | console.log('onMount')
44414441
5 | }}))"
44424442
`;
44434443

@@ -4463,7 +4463,7 @@ exports[`Alpine.js > jsx > Typescript Test > onMount 1`] = `
44634463
> 2 | Alpine.data('comp', () => ({, init() {
44644464
| ^
44654465
3 |
4466-
4 | console.log('Runs on mount');
4466+
4 | console.log('Runs on mount')
44674467
5 | }}))"
44684468
`;
44694469

@@ -4474,7 +4474,7 @@ exports[`Alpine.js > jsx > Typescript Test > onUpdate 1`] = `
44744474
> 2 | Alpine.data('onUpdate', () => ({,
44754475
| ^
44764476
3 | onUpdate() {
4477-
4 | console.log('Runs on every update/rerender');
4477+
4 | console.log('Runs on every update/rerender')
44784478
5 | }}))"
44794479
`;
44804480

@@ -4591,8 +4591,8 @@ exports[`Alpine.js > jsx > Typescript Test > referencingFunInsideHook 1`] = `
45914591
},
45924592

45934593
onUpdate() {
4594-
foo({
4595-
someOption: bar,
4594+
this.foo({
4595+
someOption: this.bar,
45964596
});
45974597
},
45984598
}));
@@ -4845,7 +4845,7 @@ exports[`Alpine.js > jsx > Typescript Test > renderContentExample 1`] = `
48454845
> 2 | Alpine.data('renderContent', () => ({, init() {
48464846
| ^
48474847
3 |
4848-
4 | sendComponentsToVisualEditor(props.customComponents);
4848+
4 | sendComponentsToVisualEditor(props.customComponents)
48494849
5 | }}))"
48504850
`;
48514851

packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1383,7 +1383,7 @@ export class Image {
13831383
const buffer = window.innerHeight / 2;
13841384

13851385
if (rect.top < window.innerHeight + buffer) {
1386-
setLoad(true);
1386+
this.load = true;
13871387
this.scrollListener = null;
13881388
window.removeEventListener(\\"scroll\\", listener);
13891389
}
@@ -5624,7 +5624,7 @@ export class Image {
56245624
const buffer = window.innerHeight / 2;
56255625

56265626
if (rect.top < window.innerHeight + buffer) {
5627-
setLoad(true);
5627+
this.load = true;
56285628
this.scrollListener = null;
56295629
window.removeEventListener(\\"scroll\\", listener);
56305630
}

0 commit comments

Comments
 (0)