@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,46 +1,35 @@
|
|
|
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
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
14
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
15
|
-
if (ar || !(i in from)) {
|
|
16
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
17
|
-
ar[i] = from[i];
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
21
|
-
};
|
|
22
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
23
3
|
exports.initializeOptions = exports.mergeOptions = void 0;
|
|
24
|
-
|
|
25
|
-
|
|
4
|
+
const process_signals_1 = require("./plugins/process-signals");
|
|
5
|
+
const process_target_blocks_1 = require("./plugins/process-target-blocks");
|
|
26
6
|
/**
|
|
27
7
|
* Merges options while combining the `plugins` array, and adds any default plugins.
|
|
28
8
|
*/
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
9
|
+
const mergeOptions = (a, b = {}, c, d) => {
|
|
10
|
+
return {
|
|
11
|
+
...a,
|
|
12
|
+
...b,
|
|
13
|
+
...c,
|
|
14
|
+
...d,
|
|
15
|
+
plugins: [
|
|
16
|
+
...(a.plugins || []),
|
|
17
|
+
...(b.plugins || []),
|
|
18
|
+
...((c === null || c === void 0 ? void 0 : c.plugins) || []),
|
|
19
|
+
...((d === null || d === void 0 ? void 0 : d.plugins) || []),
|
|
20
|
+
],
|
|
21
|
+
};
|
|
32
22
|
};
|
|
33
23
|
exports.mergeOptions = mergeOptions;
|
|
34
24
|
/**
|
|
35
25
|
* Merges options while combining the `plugins` array, and adds any default plugins.
|
|
36
26
|
*/
|
|
37
|
-
|
|
38
|
-
var _b, _c
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
var options = (0, exports.mergeOptions)(defaults, userOptions, extra, metadataOverrides);
|
|
27
|
+
const initializeOptions = ({ target, component, defaults, userOptions, extra, }) => {
|
|
28
|
+
var _a, _b, _c;
|
|
29
|
+
const metadataOverrides = (_c = (_b = (_a = component.meta) === null || _a === void 0 ? void 0 : _a.useMetadata) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c[target];
|
|
30
|
+
const options = (0, exports.mergeOptions)(defaults, userOptions, extra, metadataOverrides);
|
|
42
31
|
// we want this plugin to run first in every case, as it replaces magic strings with the correct code.
|
|
43
|
-
options.plugins.unshift((0, process_target_blocks_1.processTargetBlocks)(target), (0, process_signals_1.getSignalTypePlugin)({ target
|
|
32
|
+
options.plugins.unshift((0, process_target_blocks_1.processTargetBlocks)(target), (0, process_signals_1.getSignalTypePlugin)({ target }), (0, process_signals_1.getSignalAccessPlugin)({ target }));
|
|
44
33
|
return options;
|
|
45
34
|
};
|
|
46
35
|
exports.initializeOptions = initializeOptions;
|
|
@@ -24,16 +24,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.mapImportDeclarationToMitosisImport = void 0;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
const babel = __importStar(require("@babel/core"));
|
|
28
|
+
const { types } = babel;
|
|
29
|
+
const mapImportDeclarationToMitosisImport = (node) => {
|
|
30
|
+
const importObject = {
|
|
31
31
|
imports: {},
|
|
32
32
|
path: node.source.value,
|
|
33
33
|
importKind: node.importKind,
|
|
34
34
|
};
|
|
35
|
-
for (
|
|
36
|
-
var specifier = _a[_i];
|
|
35
|
+
for (const specifier of node.specifiers) {
|
|
37
36
|
if (types.isImportSpecifier(specifier)) {
|
|
38
37
|
importObject.imports[specifier.local.name] = specifier.imported.name;
|
|
39
38
|
}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getForArguments = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var _b = _a === void 0 ? { excludeCollectionName: false } : _a, excludeCollectionName = _b.excludeCollectionName;
|
|
4
|
+
const nullable_1 = require("../nullable");
|
|
5
|
+
const getForArguments = (node, { excludeCollectionName } = { excludeCollectionName: false }) => {
|
|
7
6
|
return [
|
|
8
7
|
node.scope.forName || 'item',
|
|
9
8
|
node.scope.indexName,
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.checkIsDefined = void 0;
|
|
4
|
-
|
|
5
|
-
return value !== null && value !== undefined;
|
|
6
|
-
};
|
|
4
|
+
const checkIsDefined = (value) => value !== null && value !== undefined;
|
|
7
5
|
exports.checkIsDefined = checkIsDefined;
|
|
@@ -1,55 +1,51 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.processOnEventHooksPlugin = exports.getOnEventHooksForNode = exports.getOnEventHandlerName = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
const capitalize_1 = require("./capitalize");
|
|
5
|
+
const traverse_nodes_1 = require("./traverse-nodes");
|
|
6
|
+
const checkIsEventHandlerNode = (node, hook) => {
|
|
7
7
|
var _a;
|
|
8
8
|
return hook.refName === ((_a = node.bindings.ref) === null || _a === void 0 ? void 0 : _a.code);
|
|
9
9
|
};
|
|
10
|
-
|
|
11
|
-
return
|
|
10
|
+
const getBindingName = (hook) => {
|
|
11
|
+
return `on${(0, capitalize_1.capitalize)(hook.eventName)}`;
|
|
12
12
|
};
|
|
13
|
-
|
|
14
|
-
return
|
|
13
|
+
const getOnEventHandlerName = (hook) => {
|
|
14
|
+
return `${hook.refName}_${getBindingName(hook)}`;
|
|
15
15
|
};
|
|
16
16
|
exports.getOnEventHandlerName = getOnEventHandlerName;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
return component.hooks.onEvent.filter(function (hook) { return checkIsEventHandlerNode(node, hook); });
|
|
17
|
+
const getOnEventHooksForNode = ({ node, component, }) => {
|
|
18
|
+
return component.hooks.onEvent.filter((hook) => checkIsEventHandlerNode(node, hook));
|
|
20
19
|
};
|
|
21
20
|
exports.getOnEventHooksForNode = getOnEventHooksForNode;
|
|
22
21
|
/**
|
|
23
22
|
* Adds event handlers from `onEvent` hooks to the appropriate node's bindings.
|
|
24
23
|
* Only works with frameworks that support custom events in their templates.
|
|
25
24
|
*/
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
25
|
+
const processOnEventHooksPlugin = (args = {}) => () => ({
|
|
26
|
+
json: {
|
|
27
|
+
pre: (component) => {
|
|
28
|
+
const { setBindings = true, includeRootEvents = true } = args;
|
|
29
|
+
(0, traverse_nodes_1.traverseNodes)(component, (node) => {
|
|
30
|
+
(0, exports.getOnEventHooksForNode)({ node, component }).forEach((hook) => {
|
|
31
|
+
if (!includeRootEvents && hook.isRoot)
|
|
32
|
+
return;
|
|
33
|
+
const handlerName = getBindingName(hook);
|
|
34
|
+
const fnName = (0, exports.getOnEventHandlerName)(hook);
|
|
35
|
+
component.state[fnName] = {
|
|
36
|
+
code: `${fnName}(${hook.eventArgName}) { ${hook.code} }`,
|
|
37
|
+
type: 'method',
|
|
38
|
+
};
|
|
39
|
+
if (setBindings) {
|
|
40
|
+
node.bindings[handlerName] = {
|
|
41
|
+
code: `state.${fnName}(${hook.eventArgName})`,
|
|
42
|
+
arguments: [hook.eventArgName],
|
|
43
|
+
type: 'single',
|
|
41
44
|
};
|
|
42
|
-
|
|
43
|
-
node.bindings[handlerName] = {
|
|
44
|
-
code: "state.".concat(fnName, "(").concat(hook.eventArgName, ")"),
|
|
45
|
-
arguments: [hook.eventArgName],
|
|
46
|
-
type: 'single',
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
});
|
|
45
|
+
}
|
|
50
46
|
});
|
|
51
|
-
}
|
|
47
|
+
});
|
|
52
48
|
},
|
|
53
|
-
}
|
|
54
|
-
};
|
|
49
|
+
},
|
|
50
|
+
});
|
|
55
51
|
exports.processOnEventHooksPlugin = processOnEventHooksPlugin;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.checkShouldOutputTypeScript = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
var targetTsConfig = (_b = options.options[target]) === null || _b === void 0 ? void 0 : _b.typescript;
|
|
4
|
+
const nullable_1 = require("./nullable");
|
|
5
|
+
const checkShouldOutputTypeScript = ({ target, options, }) => {
|
|
6
|
+
var _a;
|
|
7
|
+
const targetTsConfig = (_a = options.options[target]) === null || _a === void 0 ? void 0 : _a.typescript;
|
|
9
8
|
return (0, nullable_1.checkIsDefined)(targetTsConfig) ? targetTsConfig : false;
|
|
10
9
|
};
|
|
11
10
|
exports.checkShouldOutputTypeScript = checkShouldOutputTypeScript;
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.parseNodes = exports.parseNode = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
return (0, jsx_1.parseJsx)(
|
|
4
|
+
const jsx_1 = require("../parsers/jsx");
|
|
5
|
+
const parseNode = (str) => {
|
|
6
|
+
return (0, jsx_1.parseJsx)(`
|
|
7
|
+
export default function MyComponent() {
|
|
8
|
+
return (${str})
|
|
9
|
+
}
|
|
10
|
+
`).children[0];
|
|
7
11
|
};
|
|
8
12
|
exports.parseNode = parseNode;
|
|
9
|
-
|
|
10
|
-
return (0, jsx_1.parseJsx)(
|
|
13
|
+
const parseNodes = (str) => {
|
|
14
|
+
return (0, jsx_1.parseJsx)(`
|
|
15
|
+
export default function MyComponent() {
|
|
16
|
+
return (<>${str}</>)
|
|
17
|
+
}
|
|
18
|
+
`).children[0].children;
|
|
11
19
|
};
|
|
12
20
|
exports.parseNodes = parseNodes;
|
|
@@ -27,19 +27,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.isCodeBodyIdentifier = exports.isExpression = exports.isCodeBodyExpression = exports.parseCode = void 0;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
const babel = __importStar(require("@babel/core"));
|
|
31
|
+
const plugin_syntax_decorators_1 = __importDefault(require("@babel/plugin-syntax-decorators"));
|
|
32
|
+
const plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
|
|
33
|
+
const preset_typescript_1 = __importDefault(require("@babel/preset-typescript"));
|
|
34
34
|
function parseCode(code) {
|
|
35
|
-
|
|
35
|
+
const ast = babel.parse(code, {
|
|
36
36
|
presets: [[preset_typescript_1.default, { isTSX: true, allExtensions: true }]],
|
|
37
37
|
plugins: [
|
|
38
38
|
[plugin_syntax_typescript_1.default, { isTSX: true }],
|
|
39
39
|
[plugin_syntax_decorators_1.default, { legacy: true }],
|
|
40
40
|
],
|
|
41
41
|
});
|
|
42
|
-
|
|
42
|
+
const body = babel.types.isFile(ast)
|
|
43
43
|
? ast.program.body
|
|
44
44
|
: babel.types.isProgram(ast)
|
|
45
45
|
? ast.body
|
|
@@ -47,17 +47,15 @@ function parseCode(code) {
|
|
|
47
47
|
return body;
|
|
48
48
|
}
|
|
49
49
|
exports.parseCode = parseCode;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
(babel.types.isExpression(body[0]) || babel.types.isExpressionStatement(body[0]));
|
|
53
|
-
};
|
|
50
|
+
const isCodeBodyExpression = (body) => body.length == 1 &&
|
|
51
|
+
(babel.types.isExpression(body[0]) || babel.types.isExpressionStatement(body[0]));
|
|
54
52
|
exports.isCodeBodyExpression = isCodeBodyExpression;
|
|
55
53
|
/**
|
|
56
54
|
* Returns `true` if the `code` is a valid expression. (vs a statement)
|
|
57
55
|
*/
|
|
58
56
|
function isExpression(code) {
|
|
59
57
|
try {
|
|
60
|
-
|
|
58
|
+
const body = parseCode(code);
|
|
61
59
|
return (0, exports.isCodeBodyExpression)(body);
|
|
62
60
|
}
|
|
63
61
|
catch (e) {
|
|
@@ -65,7 +63,5 @@ function isExpression(code) {
|
|
|
65
63
|
}
|
|
66
64
|
}
|
|
67
65
|
exports.isExpression = isExpression;
|
|
68
|
-
|
|
69
|
-
return body.length == 1 && babel.types.isIdentifier(body[0]);
|
|
70
|
-
};
|
|
66
|
+
const isCodeBodyIdentifier = (body) => body.length == 1 && babel.types.isIdentifier(body[0]);
|
|
71
67
|
exports.isCodeBodyIdentifier = isCodeBodyIdentifier;
|
|
@@ -3,17 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.prefixWithFunction = exports.extractGetterCodeBlock = exports.replaceFunctionWithGetter = exports.replaceGetterWithFunction = exports.stripGetter = exports.checkIsGetter = exports.SETTER = exports.GETTER = void 0;
|
|
4
4
|
exports.GETTER = /^\s*get /;
|
|
5
5
|
exports.SETTER = /^\s*set /;
|
|
6
|
-
|
|
6
|
+
const checkIsGetter = (code) => code.match(exports.GETTER);
|
|
7
7
|
exports.checkIsGetter = checkIsGetter;
|
|
8
|
-
|
|
8
|
+
const stripGetter = (str) => str.replace(exports.GETTER, '');
|
|
9
9
|
exports.stripGetter = stripGetter;
|
|
10
|
-
|
|
10
|
+
const replaceGetterWithFunction = (str) => str.replace(/^(get )?/, 'function ');
|
|
11
11
|
exports.replaceGetterWithFunction = replaceGetterWithFunction;
|
|
12
|
-
|
|
12
|
+
const replaceFunctionWithGetter = (str) => str.replace(/^(function )?/, 'get ');
|
|
13
13
|
exports.replaceFunctionWithGetter = replaceFunctionWithGetter;
|
|
14
|
-
|
|
15
|
-
return getter.replace(/[\S\s]*\(\) \{([\S\s]*)\}[\S\s]*/, '$1').trim();
|
|
16
|
-
};
|
|
14
|
+
const extractGetterCodeBlock = (getter) => getter.replace(/[\S\s]*\(\) \{([\S\s]*)\}[\S\s]*/, '$1').trim();
|
|
17
15
|
exports.extractGetterCodeBlock = extractGetterCodeBlock;
|
|
18
|
-
|
|
16
|
+
const prefixWithFunction = (str) => `function ${str}`;
|
|
19
17
|
exports.prefixWithFunction = prefixWithFunction;
|
|
@@ -1,161 +1,155 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.CODE_PROCESSOR_PLUGIN = exports.createCodeProcessorPlugin = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
const function_1 = require("fp-ts/lib/function");
|
|
5
|
+
const nullable_1 = require("../../nullable");
|
|
6
|
+
const traverse_nodes_1 = require("../../traverse-nodes");
|
|
7
|
+
const createCodeProcessorPlugin = (codeProcessor, { processProperties } = { processProperties: false }) => (json) => {
|
|
8
|
+
var _a;
|
|
9
|
+
function processHook(key, hook) {
|
|
10
|
+
const result = codeProcessor('hooks', json)(hook.code, key);
|
|
11
|
+
if (typeof result === 'string') {
|
|
12
|
+
hook.code = result;
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
result();
|
|
16
|
+
}
|
|
17
|
+
if (hook.deps) {
|
|
18
|
+
const result = codeProcessor('hooks-deps', json)(hook.deps, key);
|
|
13
19
|
if (typeof result === 'string') {
|
|
14
|
-
hook.
|
|
20
|
+
hook.deps = result;
|
|
15
21
|
}
|
|
16
22
|
else {
|
|
17
23
|
result();
|
|
18
24
|
}
|
|
19
|
-
if (hook.deps) {
|
|
20
|
-
var result_1 = codeProcessor('hooks-deps', json)(hook.deps, key);
|
|
21
|
-
if (typeof result_1 === 'string') {
|
|
22
|
-
hook.deps = result_1;
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
result_1();
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
25
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
else {
|
|
43
|
-
processHook(typedKey, hooks);
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* process code in hooks
|
|
29
|
+
*/
|
|
30
|
+
for (const key in json.hooks) {
|
|
31
|
+
const typedKey = key;
|
|
32
|
+
const hooks = json.hooks[typedKey];
|
|
33
|
+
if ((0, nullable_1.checkIsDefined)(hooks)) {
|
|
34
|
+
if (Array.isArray(hooks)) {
|
|
35
|
+
for (const hook of hooks) {
|
|
36
|
+
processHook(typedKey, hook);
|
|
44
37
|
}
|
|
45
38
|
}
|
|
39
|
+
else {
|
|
40
|
+
processHook(typedKey, hooks);
|
|
41
|
+
}
|
|
46
42
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
43
|
+
}
|
|
44
|
+
for (const key in json.state) {
|
|
45
|
+
const state = json.state[key];
|
|
46
|
+
if (state) {
|
|
47
|
+
const result = codeProcessor('state', json)(state.code, key);
|
|
48
|
+
if (typeof result === 'string') {
|
|
49
|
+
state.code = result;
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
result();
|
|
53
|
+
}
|
|
54
|
+
if (state.typeParameter) {
|
|
55
|
+
const result = codeProcessor('types', json)(state.typeParameter, key);
|
|
51
56
|
if (typeof result === 'string') {
|
|
52
|
-
state.
|
|
57
|
+
state.typeParameter = result;
|
|
53
58
|
}
|
|
54
59
|
else {
|
|
55
60
|
result();
|
|
56
61
|
}
|
|
57
|
-
if (state.typeParameter) {
|
|
58
|
-
var result_2 = codeProcessor('types', json)(state.typeParameter, key);
|
|
59
|
-
if (typeof result_2 === 'string') {
|
|
60
|
-
state.typeParameter = result_2;
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
63
|
-
result_2();
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
62
|
}
|
|
67
63
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
else {
|
|
76
|
-
result();
|
|
77
|
-
}
|
|
64
|
+
}
|
|
65
|
+
for (const key in json.context.set) {
|
|
66
|
+
const set = json.context.set[key];
|
|
67
|
+
if (set.ref) {
|
|
68
|
+
const result = codeProcessor('context-set', json)(set.ref, key);
|
|
69
|
+
if (typeof result === 'string') {
|
|
70
|
+
set.ref = result;
|
|
78
71
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
var value = set.value[key_1];
|
|
82
|
-
if (value) {
|
|
83
|
-
var result = codeProcessor('context-set', json)(value.code, key_1);
|
|
84
|
-
if (typeof result === 'string') {
|
|
85
|
-
value.code = result;
|
|
86
|
-
}
|
|
87
|
-
else {
|
|
88
|
-
result();
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
}
|
|
72
|
+
else {
|
|
73
|
+
result();
|
|
92
74
|
}
|
|
93
75
|
}
|
|
94
|
-
(
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
result_3();
|
|
105
|
-
}
|
|
76
|
+
if (set.value) {
|
|
77
|
+
for (const key in set.value) {
|
|
78
|
+
const value = set.value[key];
|
|
79
|
+
if (value) {
|
|
80
|
+
const result = codeProcessor('context-set', json)(value.code, key);
|
|
81
|
+
if (typeof result === 'string') {
|
|
82
|
+
value.code = result;
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
result();
|
|
106
86
|
}
|
|
107
87
|
}
|
|
108
88
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
(0, traverse_nodes_1.traverseNodes)(json, (node) => {
|
|
92
|
+
if (processProperties) {
|
|
93
|
+
for (const key in node.properties) {
|
|
94
|
+
const value = node.properties[key];
|
|
95
|
+
if (key !== '_text' && value) {
|
|
96
|
+
const result = codeProcessor('properties', json, node)(value, key);
|
|
97
|
+
if (typeof result === 'string') {
|
|
98
|
+
node.properties[key] = result;
|
|
115
99
|
}
|
|
116
100
|
else {
|
|
117
|
-
|
|
101
|
+
result();
|
|
118
102
|
}
|
|
119
103
|
}
|
|
120
104
|
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
: codeProcessor('dynamic-jsx-elements', json)(node.name, '');
|
|
127
|
-
if (typeof result === 'string') {
|
|
128
|
-
node.name = result;
|
|
129
|
-
}
|
|
130
|
-
else {
|
|
131
|
-
result();
|
|
132
|
-
}
|
|
133
|
-
});
|
|
134
|
-
if (json.types) {
|
|
135
|
-
json.types = (_a = json.types) === null || _a === void 0 ? void 0 : _a.map(function (type) {
|
|
136
|
-
var result = codeProcessor('types', json)(type, '');
|
|
105
|
+
}
|
|
106
|
+
for (const key in node.bindings) {
|
|
107
|
+
const value = node.bindings[key];
|
|
108
|
+
if (value === null || value === void 0 ? void 0 : value.code) {
|
|
109
|
+
const result = codeProcessor('bindings', json, node)(value.code, key);
|
|
137
110
|
if (typeof result === 'string') {
|
|
138
|
-
|
|
111
|
+
value.code = result;
|
|
139
112
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
113
|
+
else {
|
|
114
|
+
result();
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
// Fix web component tag issue due to the babel transform
|
|
119
|
+
// For exmaple: we pass a tag called "swiper-container", and it will be renamed as "swiper - container" after babel transforming,
|
|
120
|
+
// because babel will automatically identify the "-" as an operator, and add a space before and after it.
|
|
121
|
+
const result = node.name.includes('-')
|
|
122
|
+
? node.name
|
|
123
|
+
: codeProcessor('dynamic-jsx-elements', json)(node.name, '');
|
|
124
|
+
if (typeof result === 'string') {
|
|
125
|
+
node.name = result;
|
|
143
126
|
}
|
|
144
|
-
|
|
145
|
-
|
|
127
|
+
else {
|
|
128
|
+
result();
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
if (json.types) {
|
|
132
|
+
json.types = (_a = json.types) === null || _a === void 0 ? void 0 : _a.map((type) => {
|
|
133
|
+
const result = codeProcessor('types', json)(type, '');
|
|
146
134
|
if (typeof result === 'string') {
|
|
147
|
-
|
|
148
|
-
}
|
|
149
|
-
else {
|
|
150
|
-
result();
|
|
135
|
+
return result;
|
|
151
136
|
}
|
|
137
|
+
result();
|
|
138
|
+
return type;
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
if (json.propsTypeRef) {
|
|
142
|
+
const result = codeProcessor('types', json)(json.propsTypeRef, '');
|
|
143
|
+
if (typeof result === 'string') {
|
|
144
|
+
json.propsTypeRef = result;
|
|
145
|
+
}
|
|
146
|
+
else {
|
|
147
|
+
result();
|
|
152
148
|
}
|
|
153
|
-
}
|
|
149
|
+
}
|
|
154
150
|
};
|
|
155
151
|
exports.createCodeProcessorPlugin = createCodeProcessorPlugin;
|
|
156
152
|
/**
|
|
157
153
|
* Given a `codeProcessor` function, processes all code expressions within a Mitosis component.
|
|
158
154
|
*/
|
|
159
|
-
exports.CODE_PROCESSOR_PLUGIN = (0, function_1.flow)(exports.createCodeProcessorPlugin,
|
|
160
|
-
return function () { return ({ json: { post: plugin } }); };
|
|
161
|
-
});
|
|
155
|
+
exports.CODE_PROCESSOR_PLUGIN = (0, function_1.flow)(exports.createCodeProcessorPlugin, (plugin) => () => ({ json: { post: plugin } }));
|