@builder.io/mitosis 0.4.0 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/constants/media-sizes.js +4 -5
- package/dist/src/generators/alpine/generate.js +114 -132
- package/dist/src/generators/alpine/render-mount-hook.js +8 -5
- package/dist/src/generators/alpine/render-update-hooks.js +13 -13
- package/dist/src/generators/angular/helpers.js +19 -9
- package/dist/src/generators/angular/index.js +599 -584
- package/dist/src/generators/builder.js +200 -165
- package/dist/src/generators/context/angular.js +32 -26
- package/dist/src/generators/context/helpers/context-with-symbol-key.js +25 -21
- package/dist/src/generators/context/qwik.js +21 -21
- package/dist/src/generators/context/react.js +22 -22
- package/dist/src/generators/context/rsc.js +20 -22
- package/dist/src/generators/context/solid.js +22 -22
- package/dist/src/generators/context/svelte.js +33 -28
- package/dist/src/generators/context/vue.js +1 -1
- package/dist/src/generators/helpers/context.js +6 -13
- package/dist/src/generators/helpers/functions.js +8 -8
- package/dist/src/generators/helpers/on-mount.js +9 -5
- package/dist/src/generators/helpers/rsc.js +7 -9
- package/dist/src/generators/html.js +995 -534
- package/dist/src/generators/liquid.js +81 -79
- package/dist/src/generators/lit/collect-class-string.js +10 -12
- package/dist/src/generators/lit/generate.js +204 -159
- package/dist/src/generators/marko/generate.js +193 -183
- package/dist/src/generators/minify.js +5 -9
- package/dist/src/generators/mitosis.js +135 -134
- package/dist/src/generators/qwik/component-generator.js +159 -154
- package/dist/src/generators/qwik/component.js +51 -81
- package/dist/src/generators/qwik/directives.js +68 -84
- package/dist/src/generators/qwik/helpers/add-prevent-default.js +6 -7
- package/dist/src/generators/qwik/helpers/convert-method-to-function.js +38 -38
- package/dist/src/generators/qwik/helpers/handlers.js +16 -25
- package/dist/src/generators/qwik/helpers/stable-inject.js +7 -8
- package/dist/src/generators/qwik/helpers/stable-serialize.js +7 -8
- package/dist/src/generators/qwik/helpers/state.js +36 -43
- package/dist/src/generators/qwik/helpers/styles.js +19 -40
- package/dist/src/generators/qwik/jsx.js +63 -75
- package/dist/src/generators/qwik/src-generator.js +134 -167
- package/dist/src/generators/react/blocks.js +122 -127
- package/dist/src/generators/react/generator.js +314 -259
- package/dist/src/generators/react/helpers.js +23 -28
- package/dist/src/generators/react/state.js +34 -51
- package/dist/src/generators/react-native/index.js +72 -84
- package/dist/src/generators/react-native/sanitize-react-native-block-styles.js +14 -26
- package/dist/src/generators/rsc.js +30 -36
- package/dist/src/generators/solid/blocks.js +46 -43
- package/dist/src/generators/solid/helpers/styles.js +11 -11
- package/dist/src/generators/solid/index.js +199 -190
- package/dist/src/generators/solid/state/helpers.js +76 -90
- package/dist/src/generators/solid/state/signals.js +30 -37
- package/dist/src/generators/solid/state/state.js +35 -48
- package/dist/src/generators/solid/state/store.js +40 -46
- package/dist/src/generators/stencil/collect-class-string.js +10 -12
- package/dist/src/generators/stencil/generate.js +158 -145
- package/dist/src/generators/svelte/blocks.js +146 -144
- package/dist/src/generators/svelte/helpers.js +10 -17
- package/dist/src/generators/svelte/svelte.js +321 -287
- package/dist/src/generators/swift-ui.js +162 -101
- package/dist/src/generators/taro.js +32 -36
- package/dist/src/generators/template.js +71 -74
- package/dist/src/generators/vue/blocks.js +116 -107
- package/dist/src/generators/vue/compositionApi.js +67 -50
- package/dist/src/generators/vue/helpers.js +71 -96
- package/dist/src/generators/vue/optionsApi.js +134 -105
- package/dist/src/generators/vue/vue.js +210 -207
- package/dist/src/helpers/babel-transform.js +40 -63
- package/dist/src/helpers/bindings.js +4 -12
- package/dist/src/helpers/camel-case.js +4 -5
- package/dist/src/helpers/capitalize.js +1 -1
- package/dist/src/helpers/component-file-extensions.js +23 -35
- package/dist/src/helpers/create-mitosis-component.js +22 -26
- package/dist/src/helpers/create-mitosis-context.js +5 -12
- package/dist/src/helpers/create-mitosis-node.js +10 -12
- package/dist/src/helpers/dash-case.js +2 -2
- package/dist/src/helpers/dedent.js +18 -22
- package/dist/src/helpers/event-handlers.js +1 -1
- package/dist/src/helpers/fast-clone.js +1 -1
- package/dist/src/helpers/filter-empty-text-nodes.js +2 -2
- package/dist/src/helpers/generic-format.js +7 -8
- package/dist/src/helpers/get-bindings.js +4 -4
- package/dist/src/helpers/get-components-used.js +3 -3
- package/dist/src/helpers/get-components.js +4 -4
- package/dist/src/helpers/get-custom-imports.js +10 -12
- package/dist/src/helpers/get-prop-functions.js +7 -8
- package/dist/src/helpers/get-props-ref.js +8 -8
- package/dist/src/helpers/get-props.js +12 -13
- package/dist/src/helpers/get-refs.js +4 -4
- package/dist/src/helpers/get-state-object-string.js +42 -61
- package/dist/src/helpers/get-state-used.js +7 -8
- package/dist/src/helpers/get-styles.js +6 -6
- package/dist/src/helpers/getters-to-functions.js +8 -12
- package/dist/src/helpers/handle-missing-state.js +3 -3
- package/dist/src/helpers/has-bindings-text.js +6 -6
- package/dist/src/helpers/has-component.js +4 -4
- package/dist/src/helpers/has-props.js +3 -3
- package/dist/src/helpers/has-stateful-dom.js +4 -4
- package/dist/src/helpers/has.js +3 -3
- package/dist/src/helpers/indent.js +2 -3
- package/dist/src/helpers/is-children.js +4 -5
- package/dist/src/helpers/is-component.js +1 -1
- package/dist/src/helpers/is-html-attribute.js +2 -11
- package/dist/src/helpers/is-mitosis-node.js +1 -1
- package/dist/src/helpers/is-root-text-node.js +1 -1
- package/dist/src/helpers/is-upper-case.js +1 -1
- package/dist/src/helpers/is-valid-attribute-name.js +1 -1
- package/dist/src/helpers/json.js +2 -2
- package/dist/src/helpers/map-refs.js +29 -40
- package/dist/src/helpers/merge-options.js +20 -31
- package/dist/src/helpers/mitosis-imports.js +5 -6
- package/dist/src/helpers/nodes/for.js +2 -3
- package/dist/src/helpers/nullable.js +1 -3
- package/dist/src/helpers/on-event.js +32 -36
- package/dist/src/helpers/output.js +4 -5
- package/dist/src/helpers/parse-node.js +13 -5
- package/dist/src/helpers/parsers.js +10 -14
- package/dist/src/helpers/patterns.js +6 -8
- package/dist/src/helpers/plugins/process-code/index.js +114 -120
- package/dist/src/helpers/plugins/process-signals.js +114 -125
- package/dist/src/helpers/plugins/process-target-blocks.js +18 -20
- package/dist/src/helpers/process-http-requests.js +8 -4
- package/dist/src/helpers/remove-surrounding-block.js +2 -2
- package/dist/src/helpers/render-imports.js +99 -111
- package/dist/src/helpers/replace-identifiers.js +40 -49
- package/dist/src/helpers/replace-new-lines-in-strings.js +3 -3
- package/dist/src/helpers/signals/signals.js +27 -35
- package/dist/src/helpers/slots.js +11 -20
- package/dist/src/helpers/state.js +1 -3
- package/dist/src/helpers/strip-meta-properties.js +6 -6
- package/dist/src/helpers/strip-state-and-props-refs.js +21 -32
- package/dist/src/helpers/styles/collect-css.js +39 -44
- package/dist/src/helpers/styles/collect-styled-components.js +30 -28
- package/dist/src/helpers/styles/helpers.js +23 -29
- package/dist/src/helpers/trace-reference-to-module-path.js +3 -4
- package/dist/src/helpers/transform-state-setters.js +16 -19
- package/dist/src/helpers/traverse-nodes.js +2 -2
- package/dist/src/helpers/try-prettier-format.js +3 -3
- package/dist/src/helpers/typescript-project.js +25 -25
- package/dist/src/helpers/typescript.js +1 -3
- package/dist/src/modules/plugins.js +20 -28
- package/dist/src/parsers/angular.js +49 -57
- package/dist/src/parsers/builder/builder.js +448 -343
- package/dist/src/parsers/builder/helpers.js +10 -10
- package/dist/src/parsers/context.js +15 -17
- package/dist/src/parsers/jsx/ast.js +11 -11
- package/dist/src/parsers/jsx/component-types.js +22 -32
- package/dist/src/parsers/jsx/context.js +12 -12
- package/dist/src/parsers/jsx/element-parser.js +43 -54
- package/dist/src/parsers/jsx/exports.js +12 -14
- package/dist/src/parsers/jsx/function-parser.js +108 -119
- package/dist/src/parsers/jsx/helpers.js +11 -13
- package/dist/src/parsers/jsx/hooks/helpers.js +14 -16
- package/dist/src/parsers/jsx/hooks/index.js +34 -44
- package/dist/src/parsers/jsx/hooks/use-target.js +27 -27
- package/dist/src/parsers/jsx/imports.js +7 -17
- package/dist/src/parsers/jsx/jsx.js +92 -91
- package/dist/src/parsers/jsx/props-types.js +8 -10
- package/dist/src/parsers/jsx/props.js +15 -23
- package/dist/src/parsers/jsx/signals.js +28 -29
- package/dist/src/parsers/jsx/state.d.ts +2 -4
- package/dist/src/parsers/jsx/state.js +59 -93
- package/dist/src/parsers/svelte/css/index.js +1 -1
- package/dist/src/parsers/svelte/helpers/bindings.js +18 -19
- package/dist/src/parsers/svelte/helpers/children.js +5 -6
- package/dist/src/parsers/svelte/helpers/expressions.js +7 -9
- package/dist/src/parsers/svelte/helpers/hooks.js +2 -2
- package/dist/src/parsers/svelte/helpers/post-process.js +49 -70
- package/dist/src/parsers/svelte/helpers/string.js +5 -5
- package/dist/src/parsers/svelte/html/actions.js +17 -10
- package/dist/src/parsers/svelte/html/each.js +11 -16
- package/dist/src/parsers/svelte/html/element.js +68 -78
- package/dist/src/parsers/svelte/html/fragment.js +3 -3
- package/dist/src/parsers/svelte/html/if-else.js +11 -18
- package/dist/src/parsers/svelte/html/index.js +14 -14
- package/dist/src/parsers/svelte/html/mustache-tag.js +5 -5
- package/dist/src/parsers/svelte/html/slot.js +5 -5
- package/dist/src/parsers/svelte/html/text.js +7 -14
- package/dist/src/parsers/svelte/index.js +23 -72
- package/dist/src/parsers/svelte/instance/context.js +17 -17
- package/dist/src/parsers/svelte/instance/expressions.js +2 -2
- package/dist/src/parsers/svelte/instance/functions.js +35 -30
- package/dist/src/parsers/svelte/instance/hooks.js +4 -5
- package/dist/src/parsers/svelte/instance/imports.js +11 -21
- package/dist/src/parsers/svelte/instance/index.js +22 -22
- package/dist/src/parsers/svelte/instance/properties.js +11 -23
- package/dist/src/parsers/svelte/instance/reactive.js +11 -11
- package/dist/src/parsers/svelte/instance/references.js +13 -13
- package/dist/src/parsers/svelte/instance/statements.js +3 -3
- package/dist/src/parsers/svelte/module/index.js +14 -26
- package/dist/src/parsers/svelte/typescript/index.js +27 -36
- package/dist/src/plugins/compile-away-builder-components.js +223 -156
- package/dist/src/plugins/compile-away-components.js +13 -21
- package/dist/src/plugins/map-styles.js +7 -7
- package/dist/src/symbols/symbol-processor.js +44 -62
- package/dist/src/targets.js +19 -19
- package/dist/src/types/mitosis-node.js +1 -1
- package/package.json +1 -1
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.mapBuilderContentStateToMitosisState = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
const lodash_1 = require("lodash");
|
|
5
|
+
const patterns_1 = require("../../helpers/patterns");
|
|
6
|
+
const __DO_NOT_USE_FUNCTION_LITERAL_PREFIX = `@builder.io/mitosis/function:`;
|
|
7
|
+
const __DO_NOT_USE_METHOD_LITERAL_PREFIX = `@builder.io/mitosis/method:`;
|
|
8
8
|
/**
|
|
9
9
|
* Maps the Builder State format to the Mitosis State format.
|
|
10
10
|
*/
|
|
11
|
-
|
|
11
|
+
const mapJsonToStateValue = (value) => {
|
|
12
12
|
if (typeof value === 'string') {
|
|
13
13
|
if (value.startsWith(__DO_NOT_USE_FUNCTION_LITERAL_PREFIX)) {
|
|
14
14
|
return { type: 'function', code: value.replace(__DO_NOT_USE_FUNCTION_LITERAL_PREFIX, '') };
|
|
15
15
|
}
|
|
16
16
|
else if (value.startsWith(__DO_NOT_USE_METHOD_LITERAL_PREFIX)) {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
return { type
|
|
17
|
+
const strippedValue = value.replace(__DO_NOT_USE_METHOD_LITERAL_PREFIX, '');
|
|
18
|
+
const isGet = Boolean(strippedValue.match(patterns_1.GETTER));
|
|
19
|
+
const type = isGet ? 'getter' : 'method';
|
|
20
|
+
return { type, code: strippedValue };
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
return { type: 'property', code: JSON.stringify(value), propertyType: 'normal' };
|
|
24
24
|
};
|
|
25
|
-
|
|
25
|
+
const mapBuilderContentStateToMitosisState = (value) => (0, lodash_1.mapValues)(value, mapJsonToStateValue);
|
|
26
26
|
exports.mapBuilderContentStateToMitosisState = mapBuilderContentStateToMitosisState;
|
|
@@ -24,40 +24,38 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.parseContext = void 0;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
const babel = __importStar(require("@babel/core"));
|
|
28
|
+
const create_mitosis_context_1 = require("../helpers/create-mitosis-context");
|
|
29
|
+
const state_1 = require("./jsx/state");
|
|
30
|
+
const { types } = babel;
|
|
31
|
+
const tsPreset = require('@babel/preset-typescript');
|
|
32
32
|
function parseContext(code, options) {
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
let found = false;
|
|
34
|
+
const context = (0, create_mitosis_context_1.createMitosisContext)({ name: options.name });
|
|
35
35
|
babel.transform(code, {
|
|
36
36
|
configFile: false,
|
|
37
37
|
babelrc: false,
|
|
38
38
|
presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
|
|
39
39
|
plugins: [
|
|
40
|
-
|
|
40
|
+
() => ({
|
|
41
41
|
visitor: {
|
|
42
|
-
Program
|
|
43
|
-
for (
|
|
44
|
-
var item = _a[_i];
|
|
42
|
+
Program(path) {
|
|
43
|
+
for (const item of path.node.body) {
|
|
45
44
|
if (types.isExportDefaultDeclaration(item)) {
|
|
46
|
-
|
|
45
|
+
const expression = item.declaration;
|
|
47
46
|
if (types.isCallExpression(expression)) {
|
|
48
47
|
if (types.isIdentifier(expression.callee) &&
|
|
49
48
|
expression.callee.name === 'createContext') {
|
|
50
|
-
|
|
49
|
+
const [firstArg, secondArg] = expression.arguments;
|
|
51
50
|
if (types.isObjectExpression(firstArg)) {
|
|
52
51
|
// TODO: support non object values by parsing any node type
|
|
53
52
|
// like the logic within each property value of parseStateObject
|
|
54
53
|
context.value = (0, state_1.parseStateObjectToMitosisState)(firstArg);
|
|
55
54
|
if (types.isObjectExpression(secondArg)) {
|
|
56
|
-
for (
|
|
57
|
-
var prop = _d[_c];
|
|
55
|
+
for (const prop of secondArg.properties) {
|
|
58
56
|
if (!types.isProperty(prop) || !types.isIdentifier(prop.key))
|
|
59
57
|
continue;
|
|
60
|
-
|
|
58
|
+
const isReactive = prop.key.name === 'reactive';
|
|
61
59
|
if (isReactive &&
|
|
62
60
|
types.isBooleanLiteral(prop.value) &&
|
|
63
61
|
prop.value.value) {
|
|
@@ -73,7 +71,7 @@ function parseContext(code, options) {
|
|
|
73
71
|
}
|
|
74
72
|
},
|
|
75
73
|
},
|
|
76
|
-
})
|
|
74
|
+
}),
|
|
77
75
|
],
|
|
78
76
|
});
|
|
79
77
|
if (!found) {
|
|
@@ -24,10 +24,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.jsonToAst = void 0;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
const babel = __importStar(require("@babel/core"));
|
|
28
|
+
const { types } = babel;
|
|
29
|
+
const arrayToAst = (array) => types.arrayExpression(array.map(exports.jsonToAst));
|
|
30
|
+
const jsonToAst = (json) => {
|
|
31
31
|
if (types.isNode(json)) {
|
|
32
32
|
if (types.isJSXText(json)) {
|
|
33
33
|
return types.stringLiteral(json.value);
|
|
@@ -54,21 +54,21 @@ var jsonToAst = function (json) {
|
|
|
54
54
|
}
|
|
55
55
|
};
|
|
56
56
|
exports.jsonToAst = jsonToAst;
|
|
57
|
-
|
|
57
|
+
const jsonObjectToAst = (json) => {
|
|
58
58
|
if (!json) {
|
|
59
59
|
// TO-DO: This looks concerning...
|
|
60
60
|
return json;
|
|
61
61
|
}
|
|
62
|
-
|
|
63
|
-
for (
|
|
64
|
-
|
|
62
|
+
const properties = [];
|
|
63
|
+
for (const key in json) {
|
|
64
|
+
const value = json[key];
|
|
65
65
|
if (value === undefined) {
|
|
66
66
|
continue;
|
|
67
67
|
}
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
const keyAst = types.stringLiteral(key);
|
|
69
|
+
const valueAst = (0, exports.jsonToAst)(value);
|
|
70
70
|
properties.push(types.objectProperty(keyAst, valueAst));
|
|
71
71
|
}
|
|
72
|
-
|
|
72
|
+
const newNode = types.objectExpression(properties);
|
|
73
73
|
return newNode;
|
|
74
74
|
};
|
|
@@ -22,41 +22,33 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
22
|
__setModuleDefault(result, mod);
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
26
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
27
|
-
if (ar || !(i in from)) {
|
|
28
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
29
|
-
ar[i] = from[i];
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
33
|
-
};
|
|
34
25
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
35
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
36
27
|
};
|
|
37
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
38
29
|
exports.collectTypes = exports.isTypeOrInterface = exports.getPropsTypeRef = void 0;
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
30
|
+
const babel = __importStar(require("@babel/core"));
|
|
31
|
+
const generator_1 = __importDefault(require("@babel/generator"));
|
|
32
|
+
const { types } = babel;
|
|
33
|
+
const getPropsTypeRef = (node, context) => {
|
|
43
34
|
var _a;
|
|
44
|
-
|
|
35
|
+
const param = node.params[0];
|
|
45
36
|
// TODO: component function params name must be props
|
|
46
37
|
if (babel.types.isIdentifier(param) &&
|
|
47
38
|
param.name === 'props' &&
|
|
48
39
|
babel.types.isTSTypeAnnotation(param.typeAnnotation)) {
|
|
49
|
-
|
|
40
|
+
const paramIdentifier = babel.types.variableDeclaration('let', [
|
|
50
41
|
babel.types.variableDeclarator(param),
|
|
51
42
|
]);
|
|
52
|
-
|
|
43
|
+
const generatedTypes = (0, generator_1.default)(paramIdentifier)
|
|
53
44
|
.code.replace(/^let\sprops:\s+/, '')
|
|
54
45
|
.replace(/;/g, '');
|
|
55
46
|
if (generatedTypes.startsWith('{')) {
|
|
56
|
-
|
|
57
|
-
context.builder.component.types =
|
|
58
|
-
|
|
59
|
-
|
|
47
|
+
const propsTypeRef = `${(_a = node.id) === null || _a === void 0 ? void 0 : _a.name}Props`;
|
|
48
|
+
context.builder.component.types = [
|
|
49
|
+
...(context.builder.component.types || []),
|
|
50
|
+
`export interface ${propsTypeRef} ${generatedTypes}`,
|
|
51
|
+
];
|
|
60
52
|
return propsTypeRef;
|
|
61
53
|
}
|
|
62
54
|
return generatedTypes;
|
|
@@ -64,28 +56,26 @@ var getPropsTypeRef = function (node, context) {
|
|
|
64
56
|
return undefined;
|
|
65
57
|
};
|
|
66
58
|
exports.getPropsTypeRef = getPropsTypeRef;
|
|
67
|
-
|
|
59
|
+
const isTypeImport = (node) => {
|
|
68
60
|
var _a;
|
|
69
61
|
return types.isImportDeclaration(node) &&
|
|
70
62
|
node.importKind === 'type' &&
|
|
71
63
|
// Babel adds an implicit JSX type import that we don't want
|
|
72
64
|
((_a = node.specifiers[0]) === null || _a === void 0 ? void 0 : _a.local.name) !== 'JSX';
|
|
73
65
|
};
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
(types.isExportNamedDeclaration(node) && types.isTSInterfaceDeclaration(node.declaration));
|
|
79
|
-
};
|
|
66
|
+
const isTypeOrInterface = (node) => types.isTSTypeAliasDeclaration(node) ||
|
|
67
|
+
types.isTSInterfaceDeclaration(node) ||
|
|
68
|
+
(types.isExportNamedDeclaration(node) && types.isTSTypeAliasDeclaration(node.declaration)) ||
|
|
69
|
+
(types.isExportNamedDeclaration(node) && types.isTSInterfaceDeclaration(node.declaration));
|
|
80
70
|
exports.isTypeOrInterface = isTypeOrInterface;
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
71
|
+
const getTypesFromNode = (node, context) => {
|
|
72
|
+
const typeStr = (0, generator_1.default)(node).code;
|
|
73
|
+
const { types = [] } = context.builder.component;
|
|
84
74
|
types.push(typeStr);
|
|
85
75
|
context.builder.component.types = types.filter(Boolean);
|
|
86
76
|
};
|
|
87
|
-
|
|
88
|
-
|
|
77
|
+
const collectTypes = (path, context) => {
|
|
78
|
+
const { node } = path;
|
|
89
79
|
getTypesFromNode(node, context);
|
|
90
80
|
path.remove();
|
|
91
81
|
};
|
|
@@ -27,14 +27,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.extractContextComponents = void 0;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
30
|
+
const babel = __importStar(require("@babel/core"));
|
|
31
|
+
const legacy_1 = __importDefault(require("neotraverse/legacy"));
|
|
32
|
+
const create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
|
|
33
|
+
const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
|
|
34
|
+
const trace_reference_to_module_path_1 = require("../../helpers/trace-reference-to-module-path");
|
|
35
|
+
const state_1 = require("./state");
|
|
36
|
+
const expressionToNode = (str) => {
|
|
37
|
+
const code = `export default ${str}`;
|
|
38
38
|
return babel.parse(code).program.body[0].declaration;
|
|
39
39
|
};
|
|
40
40
|
/**
|
|
@@ -46,11 +46,11 @@ function extractContextComponents(json) {
|
|
|
46
46
|
var _a, _b;
|
|
47
47
|
if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
|
|
48
48
|
if (item.name.endsWith('.Provider')) {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
const value = (_b = (_a = item.bindings) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.code;
|
|
50
|
+
const name = item.name.split('.')[0];
|
|
51
|
+
const refPath = (0, trace_reference_to_module_path_1.traceReferenceToModulePath)(json.imports, name);
|
|
52
52
|
json.context.set[refPath] = {
|
|
53
|
-
name
|
|
53
|
+
name,
|
|
54
54
|
value: value
|
|
55
55
|
? (0, state_1.parseStateObjectToMitosisState)(expressionToNode(value))
|
|
56
56
|
: undefined,
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
3
|
if (k2 === undefined) k2 = k;
|
|
15
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -38,29 +27,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
38
27
|
};
|
|
39
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
29
|
exports.jsxElementToJson = void 0;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
.filter(
|
|
52
|
-
.map(
|
|
53
|
-
.filter(nullable_1.checkIsDefined)
|
|
30
|
+
const babel = __importStar(require("@babel/core"));
|
|
31
|
+
const generator_1 = __importDefault(require("@babel/generator"));
|
|
32
|
+
const function_1 = require("fp-ts/lib/function");
|
|
33
|
+
const bindings_1 = require("../../helpers/bindings");
|
|
34
|
+
const create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
|
|
35
|
+
const nullable_1 = require("../../helpers/nullable");
|
|
36
|
+
const helpers_1 = require("./helpers");
|
|
37
|
+
const { types } = babel;
|
|
38
|
+
const getForArguments = (params) => {
|
|
39
|
+
const [forName, indexName, collectionName] = params
|
|
40
|
+
.filter((param) => types.isIdentifier(param))
|
|
41
|
+
.map((param) => param.name)
|
|
42
|
+
.filter(nullable_1.checkIsDefined);
|
|
54
43
|
return {
|
|
55
|
-
forName
|
|
56
|
-
collectionName
|
|
57
|
-
indexName
|
|
44
|
+
forName,
|
|
45
|
+
collectionName,
|
|
46
|
+
indexName,
|
|
58
47
|
};
|
|
59
48
|
};
|
|
60
49
|
/**
|
|
61
50
|
* Parses a JSX element into a MitosisNode.
|
|
62
51
|
*/
|
|
63
|
-
|
|
52
|
+
const jsxElementToJson = (node) => {
|
|
64
53
|
if (types.isJSXText(node)) {
|
|
65
54
|
return (0, create_mitosis_node_1.createMitosisNode)({
|
|
66
55
|
properties: {
|
|
@@ -75,10 +64,10 @@ var jsxElementToJson = function (node) {
|
|
|
75
64
|
return (0, exports.jsxElementToJson)(node.expression);
|
|
76
65
|
}
|
|
77
66
|
if (types.isCallExpression(node) || types.isOptionalCallExpression(node)) {
|
|
78
|
-
|
|
67
|
+
const callback = node.arguments[0];
|
|
79
68
|
if (types.isArrowFunctionExpression(callback)) {
|
|
80
69
|
if (types.isIdentifier(callback.params[0])) {
|
|
81
|
-
|
|
70
|
+
const forArguments = getForArguments(callback.params);
|
|
82
71
|
return (0, create_mitosis_node_1.createMitosisNode)({
|
|
83
72
|
name: 'For',
|
|
84
73
|
bindings: {
|
|
@@ -111,7 +100,7 @@ var jsxElementToJson = function (node) {
|
|
|
111
100
|
}
|
|
112
101
|
else if (types.isConditionalExpression(node)) {
|
|
113
102
|
// {foo ? <div /> : <span />} -> <Show when={foo} else={<span />}>...</Show>
|
|
114
|
-
|
|
103
|
+
const child = (0, exports.jsxElementToJson)(node.consequent);
|
|
115
104
|
return (0, create_mitosis_node_1.createMitosisNode)({
|
|
116
105
|
name: 'Show',
|
|
117
106
|
meta: {
|
|
@@ -157,14 +146,14 @@ var jsxElementToJson = function (node) {
|
|
|
157
146
|
},
|
|
158
147
|
});
|
|
159
148
|
}
|
|
160
|
-
|
|
149
|
+
const nodeName = (0, generator_1.default)(node.openingElement.name).code;
|
|
161
150
|
if (nodeName === 'Show') {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
151
|
+
const whenAttr = node.openingElement.attributes.find((item) => types.isJSXAttribute(item) && item.name.name === 'when');
|
|
152
|
+
const elseAttr = node.openingElement.attributes.find((item) => types.isJSXAttribute(item) && item.name.name === 'else');
|
|
153
|
+
const whenValue = whenAttr && types.isJSXExpressionContainer(whenAttr.value)
|
|
165
154
|
? (0, generator_1.default)(whenAttr.value.expression).code
|
|
166
155
|
: undefined;
|
|
167
|
-
|
|
156
|
+
const elseValue = elseAttr &&
|
|
168
157
|
types.isJSXExpressionContainer(elseAttr.value) &&
|
|
169
158
|
(0, exports.jsxElementToJson)(elseAttr.value.expression);
|
|
170
159
|
return (0, create_mitosis_node_1.createMitosisNode)({
|
|
@@ -172,20 +161,20 @@ var jsxElementToJson = function (node) {
|
|
|
172
161
|
meta: {
|
|
173
162
|
else: elseValue || undefined,
|
|
174
163
|
},
|
|
175
|
-
bindings:
|
|
164
|
+
bindings: {
|
|
165
|
+
...(whenValue ? { when: (0, bindings_1.createSingleBinding)({ code: whenValue }) } : {}),
|
|
166
|
+
},
|
|
176
167
|
children: node.children.map(exports.jsxElementToJson).filter(nullable_1.checkIsDefined),
|
|
177
168
|
});
|
|
178
169
|
}
|
|
179
170
|
// <For ...> control flow component
|
|
180
171
|
if (nodeName === 'For') {
|
|
181
|
-
|
|
182
|
-
return types.isJSXExpressionContainer(item);
|
|
183
|
-
});
|
|
172
|
+
const child = node.children.find((item) => types.isJSXExpressionContainer(item));
|
|
184
173
|
if ((0, nullable_1.checkIsDefined)(child)) {
|
|
185
|
-
|
|
174
|
+
const childExpression = child.expression;
|
|
186
175
|
if (types.isArrowFunctionExpression(childExpression)) {
|
|
187
|
-
|
|
188
|
-
|
|
176
|
+
const forArguments = getForArguments(childExpression === null || childExpression === void 0 ? void 0 : childExpression.params);
|
|
177
|
+
const forCode = (0, function_1.pipe)(node.openingElement.attributes[0], (attr) => {
|
|
189
178
|
if (types.isJSXAttribute(attr) && types.isJSXExpressionContainer(attr.value)) {
|
|
190
179
|
return (0, generator_1.default)(attr.value.expression).code;
|
|
191
180
|
}
|
|
@@ -210,10 +199,10 @@ var jsxElementToJson = function (node) {
|
|
|
210
199
|
// const properties: MitosisNode['properties'] = {}
|
|
211
200
|
// const bindings: MitosisNode['bindings'] = {}
|
|
212
201
|
// const slots: MitosisNode['slots'] = {}
|
|
213
|
-
|
|
202
|
+
const { bindings, properties, slots } = node.openingElement.attributes.reduce((memo, item) => {
|
|
214
203
|
if (types.isJSXAttribute(item)) {
|
|
215
|
-
|
|
216
|
-
|
|
204
|
+
const key = (0, helpers_1.transformAttributeName)(item.name.name);
|
|
205
|
+
const value = item.value;
|
|
217
206
|
// <Foo myProp />
|
|
218
207
|
if (value === null) {
|
|
219
208
|
memo.bindings[key] = (0, bindings_1.createSingleBinding)({ code: 'true' });
|
|
@@ -226,15 +215,15 @@ var jsxElementToJson = function (node) {
|
|
|
226
215
|
}
|
|
227
216
|
if (!types.isJSXExpressionContainer(value))
|
|
228
217
|
return memo;
|
|
229
|
-
|
|
218
|
+
const { expression } = value;
|
|
230
219
|
if (types.isStringLiteral(expression)) {
|
|
231
220
|
// <Foo myProp={"hello"} />
|
|
232
221
|
memo.properties[key] = expression.value;
|
|
233
222
|
}
|
|
234
223
|
else if (types.isArrowFunctionExpression(expression)) {
|
|
235
224
|
// <Foo myProp={() => {}} />
|
|
236
|
-
|
|
237
|
-
? expression.params.map(
|
|
225
|
+
const args = key.startsWith('on')
|
|
226
|
+
? expression.params.map((node) => node === null || node === void 0 ? void 0 : node.name)
|
|
238
227
|
: [];
|
|
239
228
|
memo.bindings[key] = (0, bindings_1.createSingleBinding)({
|
|
240
229
|
code: (0, generator_1.default)(expression.body).code,
|
|
@@ -243,7 +232,7 @@ var jsxElementToJson = function (node) {
|
|
|
243
232
|
}
|
|
244
233
|
else if (types.isJSXElement(expression)) {
|
|
245
234
|
// <Foo myProp={<MoreMitosisNode><div /></MoreMitosisNode>} />
|
|
246
|
-
|
|
235
|
+
const slotNode = (0, exports.jsxElementToJson)(expression);
|
|
247
236
|
if (!slotNode)
|
|
248
237
|
return memo;
|
|
249
238
|
memo.slots[key] = [slotNode];
|
|
@@ -259,7 +248,7 @@ var jsxElementToJson = function (node) {
|
|
|
259
248
|
// TODO: potentially like Vue store bindings and properties as array of key value pairs
|
|
260
249
|
// too so can do this accurately when order matters. Also tempting to not support spread,
|
|
261
250
|
// as some frameworks do not support it (e.g. Angular) tho Angular may be the only one
|
|
262
|
-
|
|
251
|
+
const { code: key } = (0, generator_1.default)(item.argument);
|
|
263
252
|
memo.bindings[key] = {
|
|
264
253
|
code: types.stringLiteral((0, generator_1.default)(item.argument).code).value,
|
|
265
254
|
type: 'spread',
|
|
@@ -271,11 +260,11 @@ var jsxElementToJson = function (node) {
|
|
|
271
260
|
bindings: {},
|
|
272
261
|
properties: {},
|
|
273
262
|
slots: {},
|
|
274
|
-
})
|
|
263
|
+
});
|
|
275
264
|
return (0, create_mitosis_node_1.createMitosisNode)({
|
|
276
265
|
name: nodeName,
|
|
277
|
-
properties
|
|
278
|
-
bindings
|
|
266
|
+
properties,
|
|
267
|
+
bindings,
|
|
279
268
|
children: node.children.map(exports.jsxElementToJson).filter(nullable_1.checkIsDefined),
|
|
280
269
|
slots: Object.keys(slots).length > 0 ? slots : undefined,
|
|
281
270
|
});
|
|
@@ -27,20 +27,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.generateExports = void 0;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
});
|
|
41
|
-
return exportsOrLocalVariables.reduce(function (pre, node) {
|
|
30
|
+
const babel = __importStar(require("@babel/core"));
|
|
31
|
+
const generator_1 = __importDefault(require("@babel/generator"));
|
|
32
|
+
const component_types_1 = require("./component-types");
|
|
33
|
+
const helpers_1 = require("./helpers");
|
|
34
|
+
const { types } = babel;
|
|
35
|
+
const generateExports = (path) => {
|
|
36
|
+
const exportsOrLocalVariables = path.node.body.filter((statement) => !(0, helpers_1.isImportOrDefaultExport)(statement) &&
|
|
37
|
+
!(0, component_types_1.isTypeOrInterface)(statement) &&
|
|
38
|
+
!types.isExpressionStatement(statement));
|
|
39
|
+
return exportsOrLocalVariables.reduce((pre, node) => {
|
|
42
40
|
var _a, _b;
|
|
43
|
-
|
|
41
|
+
let name, isFunction;
|
|
44
42
|
if (babel.types.isExportNamedDeclaration(node)) {
|
|
45
43
|
if (babel.types.isVariableDeclaration(node.declaration) &&
|
|
46
44
|
babel.types.isIdentifier(node.declaration.declarations[0].id)) {
|
|
@@ -66,7 +64,7 @@ var generateExports = function (path) {
|
|
|
66
64
|
if (name) {
|
|
67
65
|
pre[name] = {
|
|
68
66
|
code: (0, generator_1.default)(node).code,
|
|
69
|
-
isFunction
|
|
67
|
+
isFunction,
|
|
70
68
|
};
|
|
71
69
|
}
|
|
72
70
|
else {
|