@builder.io/mitosis 0.0.45 → 0.0.46
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/__tests__/builder.test.js +71 -68
- package/dist/src/__tests__/context.test.js +13 -10
- package/dist/src/__tests__/data/basic.raw.jsx +1 -1
- package/dist/src/__tests__/data/blocks/button-with-metadata.raw.jsx +1 -1
- package/dist/src/__tests__/data/blocks/columns.raw.jsx +2 -2
- package/dist/src/__tests__/data/blocks/custom-code.raw.jsx +3 -3
- package/dist/src/__tests__/data/blocks/embed.raw.jsx +3 -3
- package/dist/src/__tests__/data/blocks/form.raw.jsx +5 -5
- package/dist/src/__tests__/data/blocks/image.raw.jsx +4 -4
- package/dist/src/__tests__/data/blocks/stamped-io.raw.jsx +4 -4
- package/dist/src/__tests__/data/context/component-with-context.lite.jsx +2 -2
- package/dist/src/__tests__/data/context/simple.context.lite.js +1 -1
- package/dist/src/__tests__/html.test.js +2 -2
- package/dist/src/__tests__/liquid.test.js +34 -34
- package/dist/src/__tests__/parse-jsx.test.js +1 -1
- package/dist/src/__tests__/qwik.test.js +36 -36
- package/dist/src/__tests__/react-native.test.js +35 -35
- package/dist/src/__tests__/react.test.js +35 -35
- package/dist/src/__tests__/solid.test.js +32 -32
- package/dist/src/__tests__/vue.test.js +35 -34
- package/dist/src/generators/angular.d.ts +4 -7
- package/dist/src/generators/angular.js +77 -81
- package/dist/src/generators/builder.d.ts +4 -4
- package/dist/src/generators/builder.js +57 -57
- package/dist/src/generators/context/react.d.ts +3 -1
- package/dist/src/generators/context/react.js +20 -17
- package/dist/src/generators/html.d.ts +5 -9
- package/dist/src/generators/html.js +205 -199
- package/dist/src/generators/liquid.d.ts +5 -9
- package/dist/src/generators/liquid.js +62 -59
- package/dist/src/generators/mitosis.d.ts +6 -7
- package/dist/src/generators/mitosis.js +61 -63
- package/dist/src/generators/qwik/component.js +13 -13
- package/dist/src/generators/qwik/handlers.js +12 -8
- package/dist/src/generators/qwik/jsx.js +13 -9
- package/dist/src/generators/qwik/styles.js +11 -7
- package/dist/src/generators/react-native.d.ts +4 -7
- package/dist/src/generators/react-native.js +25 -22
- package/dist/src/generators/react.d.ts +4 -8
- package/dist/src/generators/react.js +103 -112
- package/dist/src/generators/solid.d.ts +4 -8
- package/dist/src/generators/solid.js +55 -54
- package/dist/src/generators/svelte.d.ts +4 -7
- package/dist/src/generators/svelte.js +120 -123
- package/dist/src/generators/swift-ui.d.ts +2 -2
- package/dist/src/generators/swift-ui.js +62 -62
- package/dist/src/generators/template.d.ts +4 -8
- package/dist/src/generators/template.js +48 -45
- package/dist/src/generators/vue.d.ts +9 -9
- package/dist/src/generators/vue.js +169 -169
- package/dist/src/helpers/babel-transform.js +9 -9
- package/dist/src/helpers/collect-styles.js +39 -39
- package/dist/src/helpers/dash-case.js +1 -1
- package/dist/src/helpers/generic-format.test.js +2 -2
- package/dist/src/helpers/get-components-used.js +2 -2
- package/dist/src/helpers/get-components.js +3 -3
- package/dist/src/helpers/get-props.js +1 -1
- package/dist/src/helpers/get-refs.js +2 -2
- package/dist/src/helpers/get-state-object-string.js +5 -5
- package/dist/src/helpers/get-state-used.js +1 -1
- package/dist/src/helpers/get-styles.js +1 -1
- package/dist/src/helpers/getters-to-functions.js +4 -4
- package/dist/src/helpers/handle-missing-state.js +1 -1
- package/dist/src/helpers/has-component.js +2 -2
- package/dist/src/helpers/has-props.js +1 -1
- package/dist/src/helpers/is-children.js +1 -1
- package/dist/src/helpers/json.d.ts +1 -0
- package/dist/src/helpers/json.js +17 -0
- package/dist/src/helpers/map-refs.js +4 -4
- package/dist/src/helpers/map-to-attributes.js +4 -4
- package/dist/src/helpers/map-to-css.js +2 -2
- package/dist/src/helpers/parse-node.js +2 -2
- package/dist/src/helpers/parse-reactive-script.js +4 -4
- package/dist/src/helpers/process-http-requests.js +1 -1
- package/dist/src/helpers/process-tag-references.js +4 -4
- package/dist/src/helpers/remove-surrounding-block.test.js +1 -1
- package/dist/src/helpers/render-imports.js +7 -7
- package/dist/src/helpers/replace-idenifiers.js +1 -1
- package/dist/src/helpers/strip-meta-properties.js +2 -2
- package/dist/src/helpers/trace-reference-to-module-path.js +1 -1
- package/dist/src/helpers/traverse-nodes.js +2 -2
- package/dist/src/helpers/try-prettier-format.js +1 -1
- package/dist/src/index.d.ts +2 -0
- package/dist/src/index.js +2 -0
- package/dist/src/modules/plugins.d.ts +2 -10
- package/dist/src/parsers/angular.js +13 -13
- package/dist/src/parsers/builder.js +54 -58
- package/dist/src/parsers/context.js +2 -2
- package/dist/src/parsers/jsx.js +59 -87
- package/dist/src/parsers/liquid.js +191 -194
- package/dist/src/plugins/compile-away-builder-components.js +49 -45
- package/dist/src/plugins/compile-away-components.js +3 -3
- package/dist/src/plugins/map-styles.js +3 -3
- package/dist/src/targets.d.ts +24 -0
- package/dist/src/targets.js +30 -0
- package/dist/src/types/config.d.ts +31 -0
- package/dist/src/types/{jsx-lite-component.js → config.js} +0 -0
- package/dist/{test/qwik/Todo/Todo.js/low.js → src/types/generators.d.ts} +0 -0
- package/dist/src/types/generators.js +1 -0
- package/dist/src/types/plugins.d.ts +11 -0
- package/dist/src/types/{jsx-lite-context.js → plugins.js} +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.cjs/high.cjs +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.cjs/low.cjs +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.cjs/med.cjs +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.js/high.js +0 -0
- package/dist/test/qwik/{qwik/todo → todo}/Todo.js/low.js +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.js/med.js +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.tsx/high.tsx +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.tsx/low.tsx +0 -0
- package/dist/test/qwik/{Todo → todo}/Todo.tsx/med.tsx +0 -0
- package/dist/test/qwik/{Todos → todos}/Todo.tsx/high.tsx +0 -0
- package/dist/test/qwik/{Todos → todos}/Todo.tsx/low.tsx +0 -0
- package/dist/test/qwik/{Todos → todos}/Todo.tsx/med.tsx +0 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/dist/src/__tests__/data/blocks/tabs.raw.d.ts +0 -11
- package/dist/src/__tests__/data/blocks/tabs.raw.jsx +0 -24
- package/dist/src/__tests__/qoot.test.d.ts +0 -1
- package/dist/src/__tests__/qoot.test.js +0 -115
- package/dist/src/generators/jsx-lite.d.ts +0 -10
- package/dist/src/generators/jsx-lite.js +0 -176
- package/dist/src/generators/qoot.d.ts +0 -21
- package/dist/src/generators/qoot.js +0 -442
- package/dist/src/generators/qwik.d.ts +0 -21
- package/dist/src/generators/qwik.js +0 -458
- package/dist/src/helpers/create-jsx-lite-component.d.ts +0 -2
- package/dist/src/helpers/create-jsx-lite-component.js +0 -16
- package/dist/src/helpers/create-jsx-lite-context.d.ts +0 -4
- package/dist/src/helpers/create-jsx-lite-context.js +0 -18
- package/dist/src/helpers/create-jsx-lite-node.d.ts +0 -2
- package/dist/src/helpers/create-jsx-lite-node.js +0 -16
- package/dist/src/helpers/is-jsx-lite-node.d.ts +0 -2
- package/dist/src/helpers/is-jsx-lite-node.js +0 -7
- package/dist/src/types/jsx-lite-component.d.ts +0 -63
- package/dist/src/types/jsx-lite-context.d.ts +0 -6
- package/dist/src/types/jsx-lite-node.d.ts +0 -13
- package/dist/src/types/jsx-lite-node.js +0 -2
- package/dist/src/types/jsx-lite-styles.d.ts +0 -1
- package/dist/src/types/jsx-lite-styles.js +0 -2
- package/dist/test/qoot/Todo/bundle.js +0 -88
- package/dist/test/qoot/Todo/component.ts +0 -17
- package/dist/test/qoot/Todo/onButtonClick.ts +0 -13
- package/dist/test/qoot/Todo/onInput2Blur.ts +0 -11
- package/dist/test/qoot/Todo/onInput2KeyUp.ts +0 -10
- package/dist/test/qoot/Todo/onInputClick.ts +0 -10
- package/dist/test/qoot/Todo/onLabelDblClick.ts +0 -11
- package/dist/test/qoot/Todo/public.ts +0 -4
- package/dist/test/qoot/Todo/template.tsx +0 -46
- package/dist/test/qoot/Todos/component.ts +0 -9
- package/dist/test/qoot/Todos/onInputClick.ts +0 -14
- package/dist/test/qoot/Todos/public.ts +0 -3
- package/dist/test/qoot/Todos/template.tsx +0 -30
- package/dist/test/qwik/Todo/bundle.js +0 -46
- package/dist/test/qwik/Todo/component.ts +0 -17
- package/dist/test/qwik/Todo/onButtonClick.ts +0 -10
- package/dist/test/qwik/Todo/onInput2Blur.ts +0 -14
- package/dist/test/qwik/Todo/onInput2KeyUp.ts +0 -10
- package/dist/test/qwik/Todo/onInputClick.ts +0 -13
- package/dist/test/qwik/Todo/onLabelDblClick.ts +0 -11
- package/dist/test/qwik/Todo/public.ts +0 -3
- package/dist/test/qwik/Todo/template.tsx +0 -46
- package/dist/test/qwik/Todo.ts +0 -4
- package/dist/test/qwik/Todo_component.ts +0 -17
- package/dist/test/qwik/Todo_onButtonClick.ts +0 -13
- package/dist/test/qwik/Todo_onInput2Blur.ts +0 -14
- package/dist/test/qwik/Todo_onInput2KeyUp.ts +0 -10
- package/dist/test/qwik/Todo_onInputClick.ts +0 -13
- package/dist/test/qwik/Todo_onLabelDblClick.ts +0 -14
- package/dist/test/qwik/Todo_template.tsx +0 -46
- package/dist/test/qwik/Todos/component.ts +0 -9
- package/dist/test/qwik/Todos/onInputClick.ts +0 -14
- package/dist/test/qwik/Todos/public.ts +0 -3
- package/dist/test/qwik/Todos/template.tsx +0 -30
- package/dist/test/qwik/Todos.ts +0 -3
- package/dist/test/qwik/Todos_component.ts +0 -9
- package/dist/test/qwik/Todos_onInputClick.ts +0 -14
- package/dist/test/qwik/Todos_template.tsx +0 -30
- package/dist/test/qwik/qwik/Image/high.js +0 -1
- package/dist/test/qwik/qwik/Image/low.js +0 -75
- package/dist/test/qwik/qwik/Image/med.js +0 -9
- package/dist/test/qwik/qwik/Image.slow/high.js +0 -1
- package/dist/test/qwik/qwik/Image.slow/low.js +0 -75
- package/dist/test/qwik/qwik/Image.slow/med.js +0 -9
- package/dist/test/qwik/qwik/button/high.js +0 -8
- package/dist/test/qwik/qwik/button/low.js +0 -34
- package/dist/test/qwik/qwik/button/med.js +0 -9
- package/dist/test/qwik/qwik/hello_world/stylesheet/high.jsx +0 -1
- package/dist/test/qwik/qwik/hello_world/stylesheet/low.jsx +0 -24
- package/dist/test/qwik/qwik/hello_world/stylesheet/med.jsx +0 -9
- package/dist/test/qwik/qwik/page-with-symbol/high.js +0 -1
- package/dist/test/qwik/qwik/page-with-symbol/low.js +0 -49
- package/dist/test/qwik/qwik/page-with-symbol/med.js +0 -9
- package/dist/test/qwik/qwik/svg/high.js +0 -1
- package/dist/test/qwik/qwik/svg/low.js +0 -30
- package/dist/test/qwik/qwik/svg/med.js +0 -9
- package/dist/test/qwik/qwik/todo/Todo.cjs/high.cjs +0 -31
- package/dist/test/qwik/qwik/todo/Todo.cjs/low.cjs +0 -1
- package/dist/test/qwik/qwik/todo/Todo.cjs/med.cjs +0 -59
- package/dist/test/qwik/qwik/todo/Todo.js/high.js +0 -5
- package/dist/test/qwik/qwik/todo/Todo.js/med.js +0 -1
- package/dist/test/qwik/qwik/todo/Todo.tsx/high.tsx +0 -30
- package/dist/test/qwik/qwik/todo/Todo.tsx/low.tsx +0 -1
- package/dist/test/qwik/qwik/todo/Todo.tsx/med.tsx +0 -34
- package/dist/test/qwik/qwik/todos/Todo.tsx/high.tsx +0 -12
- package/dist/test/qwik/qwik/todos/Todo.tsx/low.tsx +0 -24
- package/dist/test/qwik/qwik/todos/Todo.tsx/med.tsx +0 -8
|
@@ -36,22 +36,22 @@ function getContextNames(json) {
|
|
|
36
36
|
// TODO: migrate all stripStateAndPropsRefs to use this here
|
|
37
37
|
// to properly replace context refs
|
|
38
38
|
function processBinding(code, _options, json) {
|
|
39
|
-
return replace_idenifiers_1.replaceIdentifiers(strip_state_and_props_refs_1.stripStateAndPropsRefs(code, {
|
|
39
|
+
return (0, replace_idenifiers_1.replaceIdentifiers)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
|
|
40
40
|
includeState: true,
|
|
41
41
|
includeProps: true,
|
|
42
42
|
replaceWith: 'this.',
|
|
43
|
-
}), getContextNames(json), function (name) { return "this."
|
|
43
|
+
}), getContextNames(json), function (name) { return "this.".concat(name); });
|
|
44
44
|
}
|
|
45
45
|
var NODE_MAPPERS = {
|
|
46
46
|
Fragment: function (json, options) {
|
|
47
|
-
return json.children.map(function (item) { return exports.blockToVue(item, options); }).join('\n');
|
|
47
|
+
return json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n');
|
|
48
48
|
},
|
|
49
49
|
For: function (json, options) {
|
|
50
50
|
var keyValue = json.bindings.key || 'index';
|
|
51
|
-
var forValue = "("
|
|
51
|
+
var forValue = "(".concat(json.properties._forName, ", index) in ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.each));
|
|
52
52
|
if (options.vueVersion >= 3) {
|
|
53
53
|
// TODO: tmk key goes on different element (parent vs child) based on Vue 2 vs Vue 3
|
|
54
|
-
return "<template :key=\""
|
|
54
|
+
return "<template :key=\"".concat(keyValue, "\" v-for=\"").concat(forValue, "\">\n ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n </template>");
|
|
55
55
|
}
|
|
56
56
|
// Vue 2 can only handle one root element
|
|
57
57
|
var firstChild = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
|
|
@@ -60,29 +60,29 @@ var NODE_MAPPERS = {
|
|
|
60
60
|
}
|
|
61
61
|
firstChild.bindings.key = keyValue;
|
|
62
62
|
firstChild.properties['v-for'] = forValue;
|
|
63
|
-
return exports.blockToVue(firstChild, options);
|
|
63
|
+
return (0, exports.blockToVue)(firstChild, options);
|
|
64
64
|
},
|
|
65
65
|
Show: function (json, options) {
|
|
66
|
-
var ifValue = strip_state_and_props_refs_1.stripStateAndPropsRefs(json.bindings.when);
|
|
66
|
+
var ifValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.when);
|
|
67
67
|
if (options.vueVersion >= 3) {
|
|
68
|
-
return "\n <template v-if=\""
|
|
68
|
+
return "\n <template v-if=\"".concat(ifValue, "\">\n ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n </template>\n ").concat(!json.meta.else
|
|
69
69
|
? ''
|
|
70
|
-
: "\n <template v-else>\n "
|
|
70
|
+
: "\n <template v-else>\n ".concat((0, exports.blockToVue)(json.meta.else, options), "\n </template>\n "), "\n ");
|
|
71
71
|
}
|
|
72
72
|
var ifString = '';
|
|
73
73
|
// Vue 2 can only handle one root element
|
|
74
74
|
var firstChild = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
|
|
75
75
|
if (firstChild) {
|
|
76
76
|
firstChild.properties['v-if'] = ifValue;
|
|
77
|
-
ifString = exports.blockToVue(firstChild, options);
|
|
77
|
+
ifString = (0, exports.blockToVue)(firstChild, options);
|
|
78
78
|
}
|
|
79
79
|
var elseString = '';
|
|
80
80
|
var elseBlock = json.meta.else;
|
|
81
|
-
if (is_mitosis_node_1.isMitosisNode(elseBlock)) {
|
|
81
|
+
if ((0, is_mitosis_node_1.isMitosisNode)(elseBlock)) {
|
|
82
82
|
elseBlock.properties['v-else'] = '';
|
|
83
|
-
elseString = exports.blockToVue(elseBlock, options);
|
|
83
|
+
elseString = (0, exports.blockToVue)(elseBlock, options);
|
|
84
84
|
}
|
|
85
|
-
return "\n "
|
|
85
|
+
return "\n ".concat(ifString, "\n ").concat(elseString, "\n ");
|
|
86
86
|
},
|
|
87
87
|
};
|
|
88
88
|
// TODO: Maybe in the future allow defining `string | function` as values
|
|
@@ -90,9 +90,9 @@ var BINDING_MAPPERS = {
|
|
|
90
90
|
innerHTML: 'v-html',
|
|
91
91
|
};
|
|
92
92
|
// Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
|
|
93
|
-
function processDynamicComponents(json,
|
|
94
|
-
traverse_1.default(json).forEach(function (node) {
|
|
95
|
-
if (is_mitosis_node_1.isMitosisNode(node)) {
|
|
93
|
+
function processDynamicComponents(json, _options) {
|
|
94
|
+
(0, traverse_1.default)(json).forEach(function (node) {
|
|
95
|
+
if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
|
|
96
96
|
if (node.name.includes('.')) {
|
|
97
97
|
node.bindings.is = node.name;
|
|
98
98
|
node.name = 'component';
|
|
@@ -100,9 +100,9 @@ function processDynamicComponents(json, options) {
|
|
|
100
100
|
}
|
|
101
101
|
});
|
|
102
102
|
}
|
|
103
|
-
function processForKeys(json,
|
|
104
|
-
traverse_1.default(json).forEach(function (node) {
|
|
105
|
-
if (is_mitosis_node_1.isMitosisNode(node)) {
|
|
103
|
+
function processForKeys(json, _options) {
|
|
104
|
+
(0, traverse_1.default)(json).forEach(function (node) {
|
|
105
|
+
if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
|
|
106
106
|
if (node.name === 'For') {
|
|
107
107
|
var firstChild = node.children[0];
|
|
108
108
|
if (firstChild && firstChild.bindings.key) {
|
|
@@ -118,7 +118,7 @@ var blockToVue = function (node, options) {
|
|
|
118
118
|
if (nodeMapper) {
|
|
119
119
|
return nodeMapper(node, options);
|
|
120
120
|
}
|
|
121
|
-
if (is_children_1.default(node)) {
|
|
121
|
+
if ((0, is_children_1.default)(node)) {
|
|
122
122
|
return "<slot></slot>";
|
|
123
123
|
}
|
|
124
124
|
if (node.name === 'style') {
|
|
@@ -128,19 +128,19 @@ var blockToVue = function (node, options) {
|
|
|
128
128
|
node.properties.is = 'style';
|
|
129
129
|
}
|
|
130
130
|
if (node.properties._text) {
|
|
131
|
-
return ""
|
|
131
|
+
return "".concat(node.properties._text);
|
|
132
132
|
}
|
|
133
133
|
if (node.bindings._text) {
|
|
134
|
-
return "{{"
|
|
134
|
+
return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(node.bindings._text), "}}");
|
|
135
135
|
}
|
|
136
136
|
var str = '';
|
|
137
|
-
str += "<"
|
|
137
|
+
str += "<".concat(node.name, " ");
|
|
138
138
|
if (node.bindings._spread) {
|
|
139
|
-
str += "v-bind=\""
|
|
139
|
+
str += "v-bind=\"".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(node.bindings._spread), "\"");
|
|
140
140
|
}
|
|
141
141
|
for (var key in node.properties) {
|
|
142
142
|
var value = node.properties[key];
|
|
143
|
-
str += " "
|
|
143
|
+
str += " ".concat(key, "=\"").concat(value, "\" ");
|
|
144
144
|
}
|
|
145
145
|
for (var key in node.bindings) {
|
|
146
146
|
if (key === '_spread') {
|
|
@@ -148,33 +148,33 @@ var blockToVue = function (node, options) {
|
|
|
148
148
|
}
|
|
149
149
|
var value = node.bindings[key];
|
|
150
150
|
if (key === 'class') {
|
|
151
|
-
str += " :class=\"_classStringToObject("
|
|
151
|
+
str += " :class=\"_classStringToObject(".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value, {
|
|
152
152
|
replaceWith: 'this.',
|
|
153
|
-
})
|
|
153
|
+
}), ")\" ");
|
|
154
154
|
// TODO: support dynamic classes as objects somehow like Vue requires
|
|
155
155
|
// https://vuejs.org/v2/guide/class-and-style.html
|
|
156
156
|
continue;
|
|
157
157
|
}
|
|
158
158
|
// TODO: proper babel transform to replace. Util for this
|
|
159
|
-
var useValue = strip_state_and_props_refs_1.stripStateAndPropsRefs(value);
|
|
159
|
+
var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value);
|
|
160
160
|
if (key.startsWith('on')) {
|
|
161
161
|
var event_1 = key.replace('on', '').toLowerCase();
|
|
162
162
|
if (event_1 === 'change' && node.name === 'input') {
|
|
163
163
|
event_1 = 'input';
|
|
164
164
|
}
|
|
165
165
|
// TODO: proper babel transform to replace. Util for this
|
|
166
|
-
str += " @"
|
|
166
|
+
str += " @".concat(event_1, "=\"").concat((0, remove_surrounding_block_1.removeSurroundingBlock)(useValue
|
|
167
167
|
// TODO: proper reference parse and replacing
|
|
168
|
-
.replace(/event\./g, '$event.'))
|
|
168
|
+
.replace(/event\./g, '$event.')), "\" ");
|
|
169
169
|
}
|
|
170
170
|
else if (key === 'ref') {
|
|
171
|
-
str += " ref=\""
|
|
171
|
+
str += " ref=\"".concat(useValue, "\" ");
|
|
172
172
|
}
|
|
173
173
|
else if (BINDING_MAPPERS[key]) {
|
|
174
|
-
str += " "
|
|
174
|
+
str += " ".concat(BINDING_MAPPERS[key], "=\"").concat(useValue, "\" ");
|
|
175
175
|
}
|
|
176
176
|
else {
|
|
177
|
-
str += " :"
|
|
177
|
+
str += " :".concat(key, "=\"").concat(useValue, "\" ");
|
|
178
178
|
}
|
|
179
179
|
}
|
|
180
180
|
if (jsx_1.selfClosingTags.has(node.name)) {
|
|
@@ -182,15 +182,15 @@ var blockToVue = function (node, options) {
|
|
|
182
182
|
}
|
|
183
183
|
str += '>';
|
|
184
184
|
if (node.children) {
|
|
185
|
-
str += node.children.map(function (item) { return exports.blockToVue(item, options); }).join('');
|
|
185
|
+
str += node.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('');
|
|
186
186
|
}
|
|
187
|
-
return str +
|
|
187
|
+
return str + "</".concat(node.name, ">");
|
|
188
188
|
};
|
|
189
189
|
exports.blockToVue = blockToVue;
|
|
190
190
|
function getContextInjectString(component, options) {
|
|
191
191
|
var str = '{';
|
|
192
192
|
for (var key in component.context.get) {
|
|
193
|
-
str += "\n "
|
|
193
|
+
str += "\n ".concat(key, ": \"").concat(component.context.get[key].name, "\",\n ");
|
|
194
194
|
}
|
|
195
195
|
str += '}';
|
|
196
196
|
return str;
|
|
@@ -199,150 +199,150 @@ function getContextProvideString(component, options) {
|
|
|
199
199
|
var str = '{';
|
|
200
200
|
for (var key in component.context.set) {
|
|
201
201
|
var _a = component.context.set[key], value = _a.value, name_1 = _a.name;
|
|
202
|
-
str += "\n "
|
|
203
|
-
? get_state_object_string_1.getMemberObjectString(value, {
|
|
202
|
+
str += "\n ".concat(name_1, ": ").concat(value
|
|
203
|
+
? (0, get_state_object_string_1.getMemberObjectString)(value, {
|
|
204
204
|
valueMapper: function (code) {
|
|
205
|
-
return strip_state_and_props_refs_1.stripStateAndPropsRefs(code, { replaceWith: '_this.' });
|
|
205
|
+
return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: '_this.' });
|
|
206
206
|
},
|
|
207
207
|
})
|
|
208
|
-
: null
|
|
208
|
+
: null, ",\n ");
|
|
209
209
|
}
|
|
210
210
|
str += '}';
|
|
211
211
|
return str;
|
|
212
212
|
}
|
|
213
|
-
var componentToVue = function (
|
|
213
|
+
var componentToVue = function (options) {
|
|
214
214
|
if (options === void 0) { options = {}; }
|
|
215
|
-
//
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
component =
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
//
|
|
256
|
-
.
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
.filter(function (key) { return Boolean(key && blocksString.includes(key)); })
|
|
262
|
-
// Don't include component imports
|
|
263
|
-
.filter(function (key) { return !componentsUsed.includes(key); })
|
|
264
|
-
.join(',') + "}");
|
|
265
|
-
var elementProps = get_props_1.getProps(component);
|
|
266
|
-
strip_meta_properties_1.stripMetaProperties(component);
|
|
267
|
-
var template = component.children
|
|
268
|
-
.map(function (item) { return exports.blockToVue(item, options); })
|
|
269
|
-
.join('\n');
|
|
270
|
-
var includeClassMapHelper = template.includes('_classStringToObject');
|
|
271
|
-
if (includeClassMapHelper) {
|
|
272
|
-
functionsString = functionsString.replace(/}\s*$/, "_classStringToObject(str) {\n const obj = {};\n if (typeof str !== 'string') { return obj }\n const classNames = str.trim().split(/\\s+/); \n for (const name of classNames) {\n obj[name] = true;\n } \n return obj;\n } }");
|
|
273
|
-
}
|
|
274
|
-
var builderRegister = Boolean(options.builderRegister && component.meta.registerComponent);
|
|
275
|
-
var str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n <template>\n ", "\n </template>\n <script>\n ", "\n ", "\n\n export default ", "{\n ", "\n ", "\n ", "\n ", "\n\n ", "\n ", "\n\n ", "\n ", "\n\n ", "\n ", "\n }", "\n </script>\n ", "\n "], ["\n <template>\n ", "\n </template>\n <script>\n ", "\n ",
|
|
276
|
-
"\n\n export default ", "{\n ",
|
|
277
|
-
"\n ",
|
|
278
|
-
"\n ",
|
|
279
|
-
"\n ",
|
|
280
|
-
"\n\n ",
|
|
281
|
-
"\n ",
|
|
282
|
-
"\n\n ",
|
|
283
|
-
"\n ",
|
|
284
|
-
"\n\n ",
|
|
285
|
-
"\n ",
|
|
286
|
-
"\n }",
|
|
287
|
-
"\n </script>\n ",
|
|
288
|
-
"\n "])), template, render_imports_1.renderPreComponent(component), !builderRegister
|
|
289
|
-
? ''
|
|
290
|
-
: "import { registerComponent } from '@builder.io/sdk-vue'", !builderRegister ? '' : 'registerComponent(', !component.name
|
|
291
|
-
? ''
|
|
292
|
-
: "name: '" + (options.namePrefix ? options.namePrefix + '-' : '') + lodash_1.kebabCase(component.name) + "',", !componentsUsed.length
|
|
293
|
-
? ''
|
|
294
|
-
: "components: { " + componentsUsed
|
|
295
|
-
.map(function (componentName) {
|
|
296
|
-
return "'" + lodash_1.kebabCase(componentName) + "': async () => " + componentName;
|
|
215
|
+
// hack while we migrate all other transpilers to receive/handle path
|
|
216
|
+
// TO-DO: use `Transpiler` once possible
|
|
217
|
+
return function (_a) {
|
|
218
|
+
var _b, _c, _d, _e, _f;
|
|
219
|
+
var component = _a.component, path = _a.path;
|
|
220
|
+
// Make a copy we can safely mutate, similar to babel's toolchain can be used
|
|
221
|
+
component = (0, fast_clone_1.fastClone)(component);
|
|
222
|
+
(0, process_http_requests_1.processHttpRequests)(component);
|
|
223
|
+
processDynamicComponents(component, options);
|
|
224
|
+
processForKeys(component, options);
|
|
225
|
+
if (options.plugins) {
|
|
226
|
+
component = (0, plugins_1.runPreJsonPlugins)(component, options.plugins);
|
|
227
|
+
}
|
|
228
|
+
(0, map_refs_1.mapRefs)(component, function (refName) { return "this.$refs.".concat(refName); });
|
|
229
|
+
if (options.plugins) {
|
|
230
|
+
component = (0, plugins_1.runPostJsonPlugins)(component, options.plugins);
|
|
231
|
+
}
|
|
232
|
+
var css = (0, collect_styles_1.collectCss)(component, {
|
|
233
|
+
prefix: (_c = (_b = options.cssNamespace) === null || _b === void 0 ? void 0 : _b.call(options)) !== null && _c !== void 0 ? _c : undefined,
|
|
234
|
+
});
|
|
235
|
+
var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
|
|
236
|
+
data: true,
|
|
237
|
+
functions: false,
|
|
238
|
+
getters: false,
|
|
239
|
+
});
|
|
240
|
+
var getterString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
|
|
241
|
+
data: false,
|
|
242
|
+
getters: true,
|
|
243
|
+
functions: false,
|
|
244
|
+
valueMapper: function (code) {
|
|
245
|
+
return processBinding(code.replace(/^get /, ''), options, component);
|
|
246
|
+
},
|
|
247
|
+
});
|
|
248
|
+
var functionsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
|
|
249
|
+
data: false,
|
|
250
|
+
getters: false,
|
|
251
|
+
functions: true,
|
|
252
|
+
valueMapper: function (code) { return processBinding(code, options, component); },
|
|
253
|
+
});
|
|
254
|
+
var blocksString = JSON.stringify(component.children);
|
|
255
|
+
// Component references to include in `component: { YourComponent, ... }
|
|
256
|
+
var componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(component))
|
|
257
|
+
.filter(function (name) {
|
|
258
|
+
return name.length &&
|
|
259
|
+
!name.includes('.') &&
|
|
260
|
+
name[0].toUpperCase() === name[0];
|
|
297
261
|
})
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
: ", " + json5_1.default.stringify(component.meta.registerComponent || {}) + ")", !css.trim().length
|
|
317
|
-
? ''
|
|
318
|
-
: "<style scoped>\n " + css + "\n </style>");
|
|
319
|
-
if (options.plugins) {
|
|
320
|
-
str = plugins_1.runPreCodePlugins(str, options.plugins);
|
|
321
|
-
}
|
|
322
|
-
if (true || options.prettier !== false) {
|
|
323
|
-
try {
|
|
324
|
-
str = standalone_1.format(str, {
|
|
325
|
-
parser: 'vue',
|
|
326
|
-
plugins: [
|
|
327
|
-
// To support running in browsers
|
|
328
|
-
require('prettier/parser-html'),
|
|
329
|
-
require('prettier/parser-postcss'),
|
|
330
|
-
require('prettier/parser-babel'),
|
|
331
|
-
],
|
|
332
|
-
});
|
|
262
|
+
// Strip out components that compile away
|
|
263
|
+
.filter(function (name) { return !['For', 'Show', 'Fragment', component.name].includes(name); });
|
|
264
|
+
// Append refs to data as { foo, bar, etc }
|
|
265
|
+
dataString = dataString.replace(/}$/, "".concat(component.imports
|
|
266
|
+
.map(function (thisImport) { return Object.keys(thisImport.imports).join(','); })
|
|
267
|
+
// Make sure actually used in template
|
|
268
|
+
.filter(function (key) { return Boolean(key && blocksString.includes(key)); })
|
|
269
|
+
// Don't include component imports
|
|
270
|
+
.filter(function (key) { return !componentsUsed.includes(key); })
|
|
271
|
+
.join(','), "}"));
|
|
272
|
+
var elementProps = (0, get_props_1.getProps)(component);
|
|
273
|
+
(0, strip_meta_properties_1.stripMetaProperties)(component);
|
|
274
|
+
var template = component.children
|
|
275
|
+
.map(function (item) { return (0, exports.blockToVue)(item, options); })
|
|
276
|
+
.join('\n');
|
|
277
|
+
var includeClassMapHelper = template.includes('_classStringToObject');
|
|
278
|
+
if (includeClassMapHelper) {
|
|
279
|
+
functionsString = functionsString.replace(/}\s*$/, "_classStringToObject(str) {\n const obj = {};\n if (typeof str !== 'string') { return obj }\n const classNames = str.trim().split(/\\s+/); \n for (const name of classNames) {\n obj[name] = true;\n } \n return obj;\n } }");
|
|
333
280
|
}
|
|
334
|
-
|
|
335
|
-
|
|
281
|
+
var builderRegister = Boolean(options.builderRegister && component.meta.registerComponent);
|
|
282
|
+
var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n <template>\n ", "\n </template>\n <script>\n ", "\n ", "\n\n export default ", "{\n ", "\n ", "\n ", "\n ", "\n\n ", "\n ", "\n\n ", "\n ", "\n\n ", "\n ", "\n }", "\n </script>\n ", "\n "], ["\n <template>\n ", "\n </template>\n <script>\n ", "\n ", "\n\n export default ", "{\n ", "\n ", "\n ", "\n ", "\n\n ", "\n ", "\n\n ", "\n ", "\n\n ", "\n ", "\n }", "\n </script>\n ", "\n "])), template, (0, render_imports_1.renderPreComponent)(component), component.meta.registerComponent
|
|
283
|
+
? (_d = options.registerComponentPrepend) !== null && _d !== void 0 ? _d : ''
|
|
284
|
+
: '', !builderRegister ? '' : 'registerComponent(', !component.name
|
|
285
|
+
? ''
|
|
286
|
+
: "name: '".concat(((_e = options.namePrefix) === null || _e === void 0 ? void 0 : _e.call(options, path))
|
|
287
|
+
? ((_f = options.namePrefix) === null || _f === void 0 ? void 0 : _f.call(options, path)) + '-'
|
|
288
|
+
: '').concat((0, lodash_1.kebabCase)(component.name), "',"), !componentsUsed.length
|
|
289
|
+
? ''
|
|
290
|
+
: "components: { ".concat(componentsUsed
|
|
291
|
+
.map(function (componentName) {
|
|
292
|
+
return "'".concat((0, lodash_1.kebabCase)(componentName), "': async () => ").concat(componentName);
|
|
293
|
+
})
|
|
294
|
+
.join(','), " },"), elementProps.size
|
|
295
|
+
? "props: ".concat(JSON.stringify(Array.from(elementProps).filter(function (prop) { return prop !== 'children' && prop !== 'class'; })), ",")
|
|
296
|
+
: '', dataString.length < 4
|
|
297
|
+
? ''
|
|
298
|
+
: "\n data: () => (".concat(dataString, "),\n "), (0, lodash_1.size)(component.context.set)
|
|
299
|
+
? "provide() {\n const _this = this;\n return ".concat(getContextProvideString(component, options), "\n },")
|
|
300
|
+
: '', (0, lodash_1.size)(component.context.get)
|
|
301
|
+
? "inject: ".concat(getContextInjectString(component, options), ",")
|
|
302
|
+
: '', component.hooks.onMount
|
|
303
|
+
? "mounted() {\n ".concat(processBinding(component.hooks.onMount, options, component), "\n },")
|
|
304
|
+
: '', component.hooks.onUnMount
|
|
305
|
+
? "unmounted() {\n ".concat(processBinding(component.hooks.onUnMount, options, component), "\n },")
|
|
306
|
+
: '', getterString.length < 4
|
|
307
|
+
? ''
|
|
308
|
+
: "\n computed: ".concat(getterString, ",\n "), functionsString.length < 4
|
|
309
|
+
? ''
|
|
310
|
+
: "\n methods: ".concat(functionsString, ",\n "), !builderRegister
|
|
311
|
+
? ''
|
|
312
|
+
: ", ".concat(json5_1.default.stringify(component.meta.registerComponent || {}), ")"), !css.trim().length
|
|
313
|
+
? ''
|
|
314
|
+
: "<style scoped>\n ".concat(css, "\n </style>"));
|
|
315
|
+
if (options.plugins) {
|
|
316
|
+
str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
|
|
336
317
|
}
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
318
|
+
if (true || options.prettier !== false) {
|
|
319
|
+
try {
|
|
320
|
+
str = (0, standalone_1.format)(str, {
|
|
321
|
+
parser: 'vue',
|
|
322
|
+
plugins: [
|
|
323
|
+
// To support running in browsers
|
|
324
|
+
require('prettier/parser-html'),
|
|
325
|
+
require('prettier/parser-postcss'),
|
|
326
|
+
require('prettier/parser-babel'),
|
|
327
|
+
],
|
|
328
|
+
});
|
|
329
|
+
}
|
|
330
|
+
catch (err) {
|
|
331
|
+
console.warn('Could not prettify', { string: str }, err);
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
if (options.plugins) {
|
|
335
|
+
str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
|
|
336
|
+
}
|
|
337
|
+
for (var _i = 0, removePatterns_1 = removePatterns; _i < removePatterns_1.length; _i++) {
|
|
338
|
+
var pattern = removePatterns_1[_i];
|
|
339
|
+
str = str.replace(pattern, '');
|
|
340
|
+
}
|
|
341
|
+
// Transform <FooBar> to <foo-bar> as Vue2 needs
|
|
342
|
+
return str.replace(/<\/?\w+/g, function (match) {
|
|
343
|
+
return match.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
|
344
|
+
});
|
|
345
|
+
};
|
|
346
346
|
};
|
|
347
347
|
exports.componentToVue = componentToVue;
|
|
348
348
|
// Remove unused artifacts like empty script or style tags
|
|
@@ -37,7 +37,7 @@ var babelTransform = function (code, visitor) {
|
|
|
37
37
|
exports.babelTransform = babelTransform;
|
|
38
38
|
var babelTransformCode = function (code, visitor) {
|
|
39
39
|
var _a;
|
|
40
|
-
return ((_a = exports.babelTransform(code, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '';
|
|
40
|
+
return ((_a = (0, exports.babelTransform)(code, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '';
|
|
41
41
|
};
|
|
42
42
|
exports.babelTransformCode = babelTransformCode;
|
|
43
43
|
var babelTransformExpression = function (code, visitor, type) {
|
|
@@ -59,13 +59,13 @@ var babelTransformExpression = function (code, visitor, type) {
|
|
|
59
59
|
}
|
|
60
60
|
var useCode = code;
|
|
61
61
|
if (type === 'functionBody') {
|
|
62
|
-
useCode = "function(){"
|
|
62
|
+
useCode = "function(){".concat(useCode, "}");
|
|
63
63
|
}
|
|
64
64
|
var result = type === 'expression'
|
|
65
65
|
? null
|
|
66
|
-
: lodash_1.attempt(function () {
|
|
66
|
+
: (0, lodash_1.attempt)(function () {
|
|
67
67
|
var _a;
|
|
68
|
-
var result = ((_a = exports.babelTransform(useCode, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '';
|
|
68
|
+
var result = ((_a = (0, exports.babelTransform)(useCode, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '';
|
|
69
69
|
if (type === 'functionBody') {
|
|
70
70
|
return result.replace(/^function\(\)\{/, '').replace(/\};$/, '');
|
|
71
71
|
}
|
|
@@ -76,7 +76,7 @@ var babelTransformExpression = function (code, visitor, type) {
|
|
|
76
76
|
return result.replace(/;$/, '');
|
|
77
77
|
}
|
|
78
78
|
});
|
|
79
|
-
if (lodash_1.isError(result) || type === 'expression') {
|
|
79
|
+
if ((0, lodash_1.isError)(result) || type === 'expression') {
|
|
80
80
|
try {
|
|
81
81
|
// If it can't, e.g. this is an expression or code fragment, modify the code below and try again
|
|
82
82
|
// Detect method fragments. These get passed sometimes and otherwise
|
|
@@ -84,13 +84,13 @@ var babelTransformExpression = function (code, visitor, type) {
|
|
|
84
84
|
var isMethod = Boolean(!code.startsWith('function') &&
|
|
85
85
|
code.match(/^[a-z0-9]+\s*\([^\)]*\)\s*[\{:]/i));
|
|
86
86
|
if (isMethod) {
|
|
87
|
-
useCode = "function "
|
|
87
|
+
useCode = "function ".concat(useCode);
|
|
88
88
|
}
|
|
89
89
|
// Parse the code as an expression (instead of the default, a block) by giving it a fake variable assignment
|
|
90
90
|
// e.g. if the code parsed is { ... } babel will treat that as a block by deafult, unless processed as an expression
|
|
91
91
|
// that is an object
|
|
92
|
-
useCode = "let _ = "
|
|
93
|
-
result = (((_a = exports.babelTransform(useCode, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '')
|
|
92
|
+
useCode = "let _ = ".concat(useCode);
|
|
93
|
+
result = (((_a = (0, exports.babelTransform)(useCode, visitor)) === null || _a === void 0 ? void 0 : _a.code) || '')
|
|
94
94
|
// Babel addes trailing semicolons, but for expressions we need those gone
|
|
95
95
|
.replace(/;$/, '')
|
|
96
96
|
// Remove our fake variable assignment
|
|
@@ -102,7 +102,7 @@ var babelTransformExpression = function (code, visitor, type) {
|
|
|
102
102
|
catch (err) {
|
|
103
103
|
console.error('Error parsing code:\n', code, '\n', result);
|
|
104
104
|
try {
|
|
105
|
-
return exports.babelTransformExpression(code, visitor, 'functionBody');
|
|
105
|
+
return (0, exports.babelTransformExpression)(code, visitor, 'functionBody');
|
|
106
106
|
}
|
|
107
107
|
catch (err) {
|
|
108
108
|
throw err;
|