@builder.io/mitosis 0.3.9 → 0.3.10
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.
|
@@ -416,9 +416,9 @@ var _componentToReact = function (json, options, isSubComponent) {
|
|
|
416
416
|
? "<style>{`".concat(css, "`}</style>")
|
|
417
417
|
: '', shouldInjectCustomStyles ? "<style>{`".concat(json.style, "`}</style>") : '', wrap ? (0, helpers_2.closeFrag)(options) : '');
|
|
418
418
|
var shouldAddUseClientDirective = checkShouldAddUseClientDirective(json, options);
|
|
419
|
-
var str = (0, dedent_1.dedent)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "function ", "(", ") {\n ", "\n }", "\n\n ", "\n\n ", "\n\n ", "\n ", "\n\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "function ", "(", ") {\n ", "\n }", "\n\n ", "\n\n ", "\n\n ", "\n ", "\n\n "])), shouldAddUseClientDirective ? "'use client';" : '', getDefaultImport(json, options), styledComponentsCode ? "import styled from 'styled-components';\n" : '', reactLibImports.size
|
|
419
|
+
var str = (0, dedent_1.dedent)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "function ", "(", ") {\n ", "\n }", "\n\n ", "\n\n ", "\n\n ", "\n ", "\n\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "function ", "(", ") {\n ", "\n }", "\n\n ", "\n\n ", "\n\n ", "\n ", "\n\n "])), shouldAddUseClientDirective ? "'use client';" : '', getDefaultImport(json, options), styledComponentsCode ? "import styled from 'styled-components';\n" : '', reactLibImports.size
|
|
420
420
|
? "import { ".concat(Array.from(reactLibImports).join(', '), " } from '").concat(options.preact ? 'preact/hooks' : 'react', "'")
|
|
421
|
-
: '', componentHasStyles && options.stylesType === 'emotion' && options.format !== 'lite'
|
|
421
|
+
: '', options.stylesType === 'twrnc' ? "import tw from 'twrnc';\n" : '', componentHasStyles && options.stylesType === 'emotion' && options.format !== 'lite'
|
|
422
422
|
? "/** @jsx jsx */\n import { jsx } from '@emotion/react'".trim()
|
|
423
423
|
: '', !hasState
|
|
424
424
|
? ''
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BaseTranspilerOptions } from '../../types/transpiler';
|
|
2
2
|
export interface ToReactOptions extends BaseTranspilerOptions {
|
|
3
|
-
stylesType: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native' | 'style-tag';
|
|
3
|
+
stylesType: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native' | 'style-tag' | 'twrnc' | 'native-wind';
|
|
4
4
|
stateType: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder' | 'variables';
|
|
5
5
|
format?: 'lite' | 'safe';
|
|
6
6
|
type: 'dom' | 'native' | 'taro';
|
|
@@ -2,7 +2,7 @@ import { ClassStyleMap } from '../../helpers/styles/helpers';
|
|
|
2
2
|
import { MitosisComponent } from '../../types/mitosis-component';
|
|
3
3
|
import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
|
|
4
4
|
export interface ToReactNativeOptions extends BaseTranspilerOptions {
|
|
5
|
-
stylesType: 'emotion' | 'react-native';
|
|
5
|
+
stylesType: 'emotion' | 'react-native' | 'twrnc' | 'native-wind';
|
|
6
6
|
stateType: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
|
|
7
7
|
}
|
|
8
8
|
export declare const collectReactNativeStyles: (json: MitosisComponent) => ClassStyleMap;
|
|
@@ -103,7 +103,6 @@ exports.collectReactNativeStyles = collectReactNativeStyles;
|
|
|
103
103
|
/**
|
|
104
104
|
* Plugin that handles necessary transformations from React to React Native:
|
|
105
105
|
* - Converts DOM tags to <View /> and <Text />
|
|
106
|
-
* - Removes redundant `class`/`className` attributes
|
|
107
106
|
*/
|
|
108
107
|
var PROCESS_REACT_NATIVE_PLUGIN = function () { return ({
|
|
109
108
|
json: {
|
|
@@ -130,6 +129,89 @@ var PROCESS_REACT_NATIVE_PLUGIN = function () { return ({
|
|
|
130
129
|
((_d = (_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.trim()) === null || _d === void 0 ? void 0 : _d.length)) {
|
|
131
130
|
node.name = 'Text';
|
|
132
131
|
}
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
}); };
|
|
137
|
+
/**
|
|
138
|
+
* Removes React Native className and class properties from the JSON
|
|
139
|
+
*/
|
|
140
|
+
var REMOVE_REACT_NATIVE_CLASSES_PLUGIN = function () { return ({
|
|
141
|
+
json: {
|
|
142
|
+
pre: function (json) {
|
|
143
|
+
(0, traverse_1.default)(json).forEach(function (node) {
|
|
144
|
+
if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
|
|
145
|
+
if (node.properties.class) {
|
|
146
|
+
delete node.properties.class;
|
|
147
|
+
}
|
|
148
|
+
if (node.properties.className) {
|
|
149
|
+
delete node.properties.className;
|
|
150
|
+
}
|
|
151
|
+
if (node.bindings.class) {
|
|
152
|
+
delete node.bindings.class;
|
|
153
|
+
}
|
|
154
|
+
if (node.bindings.className) {
|
|
155
|
+
delete node.bindings.className;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
},
|
|
160
|
+
},
|
|
161
|
+
}); };
|
|
162
|
+
/**
|
|
163
|
+
* Converts class and className properties to twrnc style syntax
|
|
164
|
+
*/
|
|
165
|
+
var TWRNC_STYLES_PLUGIN = function () { return ({
|
|
166
|
+
json: {
|
|
167
|
+
post: function (json) {
|
|
168
|
+
(0, traverse_1.default)(json).forEach(function (node) {
|
|
169
|
+
if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
|
|
170
|
+
var combinedClasses = [
|
|
171
|
+
node.properties.class,
|
|
172
|
+
node.properties.className,
|
|
173
|
+
node.bindings.class,
|
|
174
|
+
node.bindings.className,
|
|
175
|
+
]
|
|
176
|
+
.filter(Boolean)
|
|
177
|
+
.join(' ');
|
|
178
|
+
if (combinedClasses) {
|
|
179
|
+
node.properties.style = "{tw`".concat(combinedClasses, "`}");
|
|
180
|
+
}
|
|
181
|
+
if (node.properties.class) {
|
|
182
|
+
delete node.properties.class;
|
|
183
|
+
}
|
|
184
|
+
if (node.properties.className) {
|
|
185
|
+
delete node.properties.className;
|
|
186
|
+
}
|
|
187
|
+
if (node.bindings.class) {
|
|
188
|
+
delete node.bindings.class;
|
|
189
|
+
}
|
|
190
|
+
if (node.bindings.className) {
|
|
191
|
+
delete node.bindings.className;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
});
|
|
195
|
+
},
|
|
196
|
+
},
|
|
197
|
+
}); };
|
|
198
|
+
/**
|
|
199
|
+
* Converts class and className properties to native-wind style syntax
|
|
200
|
+
* Note: We only support the "with babel" setup: https://www.nativewind.dev/guides/babel
|
|
201
|
+
*/
|
|
202
|
+
var NATIVE_WIND_STYLES_PLUGIN = function () { return ({
|
|
203
|
+
json: {
|
|
204
|
+
post: function (json) {
|
|
205
|
+
(0, traverse_1.default)(json).forEach(function (node) {
|
|
206
|
+
if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
|
|
207
|
+
var combinedClasses = [
|
|
208
|
+
node.properties.class,
|
|
209
|
+
node.properties.className,
|
|
210
|
+
node.bindings.class,
|
|
211
|
+
node.bindings.className,
|
|
212
|
+
]
|
|
213
|
+
.filter(Boolean)
|
|
214
|
+
.join(' ');
|
|
133
215
|
if (node.properties.class) {
|
|
134
216
|
delete node.properties.class;
|
|
135
217
|
}
|
|
@@ -142,6 +224,9 @@ var PROCESS_REACT_NATIVE_PLUGIN = function () { return ({
|
|
|
142
224
|
if (node.bindings.className) {
|
|
143
225
|
delete node.bindings.className;
|
|
144
226
|
}
|
|
227
|
+
if (combinedClasses) {
|
|
228
|
+
node.properties.className = combinedClasses;
|
|
229
|
+
}
|
|
145
230
|
}
|
|
146
231
|
});
|
|
147
232
|
},
|
|
@@ -158,6 +243,15 @@ var componentToReactNative = function (_options) {
|
|
|
158
243
|
var component = _a.component, path = _a.path;
|
|
159
244
|
var json = (0, fast_clone_1.fastClone)(component);
|
|
160
245
|
var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, _options);
|
|
246
|
+
if (options.stylesType === 'twrnc') {
|
|
247
|
+
options.plugins.push(TWRNC_STYLES_PLUGIN);
|
|
248
|
+
}
|
|
249
|
+
else if (options.stylesType === 'native-wind') {
|
|
250
|
+
options.plugins.push(NATIVE_WIND_STYLES_PLUGIN);
|
|
251
|
+
}
|
|
252
|
+
else {
|
|
253
|
+
options.plugins.push(REMOVE_REACT_NATIVE_CLASSES_PLUGIN);
|
|
254
|
+
}
|
|
161
255
|
return (0, react_1.componentToReact)(__assign(__assign({}, options), { type: 'native' }))({ component: json, path: path });
|
|
162
256
|
};
|
|
163
257
|
};
|
|
@@ -128,7 +128,7 @@ function addProviderComponents(json, options) {
|
|
|
128
128
|
}
|
|
129
129
|
var DEFAULT_OPTIONS = {
|
|
130
130
|
state: 'signals',
|
|
131
|
-
stylesType: '
|
|
131
|
+
stylesType: 'style-tag',
|
|
132
132
|
};
|
|
133
133
|
var componentToSolid = function (passedOptions) {
|
|
134
134
|
return function (_a) {
|
|
@@ -229,8 +229,7 @@ var componentToSolid = function (passedOptions) {
|
|
|
229
229
|
.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
|
|
230
230
|
.map(function (item) { return (0, blocks_1.blockToSolid)({ component: component, json: item, options: options }); })
|
|
231
231
|
.join('\n'), options.stylesType === 'style-tag' && css && css.trim().length > 4
|
|
232
|
-
?
|
|
233
|
-
"<style jsx>{`".concat(css, "`}</style>")
|
|
232
|
+
? "<style>{`".concat(css, "`}</style>")
|
|
234
233
|
: '', shouldInjectCustomStyles ? "<style>{`".concat(json.style, "`}</style>") : '', addWrapper ? '</>' : '', json.name);
|
|
235
234
|
if (options.plugins) {
|
|
236
235
|
str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
|