@builder.io/mitosis 0.0.56-76 → 0.0.56-79
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__/data/nested-styles.lite.d.ts +1 -0
- package/dist/src/__tests__/data/nested-styles.lite.jsx +20 -0
- package/dist/src/__tests__/shared.js +2 -0
- package/dist/src/generators/angular.js +9 -9
- package/dist/src/generators/html.js +24 -24
- package/dist/src/generators/lit/generate.js +1 -2
- package/dist/src/generators/mitosis.js +4 -4
- package/dist/src/generators/qwik/component-generator.js +1 -2
- package/dist/src/generators/react.d.ts +1 -1
- package/dist/src/generators/react.js +22 -11
- package/dist/src/generators/svelte.js +8 -8
- package/dist/src/helpers/styles/helpers.d.ts +2 -3
- package/dist/src/parsers/builder.d.ts +0 -2
- package/dist/src/parsers/jsx/component-types.d.ts +0 -1
- package/dist/src/parsers/jsx/component-types.js +2 -9
- package/dist/src/parsers/jsx/jsx.js +3 -6
- package/dist/src/parsers/jsx/state.js +0 -2
- package/dist/src/types/mitosis-component.d.ts +0 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function NestedStyles(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
function NestedStyles() {
|
|
4
|
+
return (<div css={{
|
|
5
|
+
display: 'flex',
|
|
6
|
+
foo: 'var(--bar)',
|
|
7
|
+
'@media (max-width: env(--mobile))': {
|
|
8
|
+
display: 'block',
|
|
9
|
+
},
|
|
10
|
+
'&:hover': {
|
|
11
|
+
display: 'flex',
|
|
12
|
+
},
|
|
13
|
+
'.nested-selector': {
|
|
14
|
+
display: 'grid',
|
|
15
|
+
},
|
|
16
|
+
}}>
|
|
17
|
+
Hello world
|
|
18
|
+
</div>);
|
|
19
|
+
}
|
|
20
|
+
exports.default = NestedStyles;
|
|
@@ -18,6 +18,7 @@ var basicForwardRefMetadata = require('./data/basic-forwardRef-metadata.raw');
|
|
|
18
18
|
var basicRefPrevious = require('./data/basic-ref-usePrevious.raw');
|
|
19
19
|
var basicRefAssignment = require('./data/basic-ref-assignment.raw');
|
|
20
20
|
var propsDestructure = require('./data/basic-props-destructure.raw');
|
|
21
|
+
var nestedStyles = require('./data/nested-styles.lite');
|
|
21
22
|
var preserveExportOrLocalStatement = require('./data/basic-preserve-export-or-local-statement.raw');
|
|
22
23
|
var propsType = require('./data/types/component-props-type.raw');
|
|
23
24
|
var propsInterface = require('./data/types/component-props-interface.raw');
|
|
@@ -90,6 +91,7 @@ var BASIC_TESTS = {
|
|
|
90
91
|
preserveTyping: preserveTyping,
|
|
91
92
|
typeDependency: typeDependency,
|
|
92
93
|
subComponent: subComponent,
|
|
94
|
+
nestedStyles: nestedStyles,
|
|
93
95
|
propsDestructure: propsDestructure,
|
|
94
96
|
'onInit & onMount': onInitonMount,
|
|
95
97
|
'Basic Context': basicContext,
|
|
@@ -193,14 +193,14 @@ exports.blockToAngular = blockToAngular;
|
|
|
193
193
|
var componentToAngular = function (options) {
|
|
194
194
|
if (options === void 0) { options = {}; }
|
|
195
195
|
return function (_a) {
|
|
196
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m
|
|
196
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
197
197
|
var component = _a.component;
|
|
198
198
|
// Make a copy we can safely mutate, similar to babel's toolchain
|
|
199
199
|
var json = (0, fast_clone_1.fastClone)(component);
|
|
200
200
|
if (options.plugins) {
|
|
201
201
|
json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
|
|
202
202
|
}
|
|
203
|
-
var
|
|
203
|
+
var _o = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _o[0], hasPropRef = _o[1];
|
|
204
204
|
var childComponents = [];
|
|
205
205
|
var propsTypeRef = json.propsTypeRef !== 'any' ? json.propsTypeRef : undefined;
|
|
206
206
|
json.imports.forEach(function (_a) {
|
|
@@ -212,7 +212,7 @@ var componentToAngular = function (options) {
|
|
|
212
212
|
});
|
|
213
213
|
});
|
|
214
214
|
var customImports = (0, get_custom_imports_1.getCustomImports)(json);
|
|
215
|
-
var
|
|
215
|
+
var _p = component.exports, localExports = _p === void 0 ? {} : _p;
|
|
216
216
|
var localExportVars = Object.keys(localExports)
|
|
217
217
|
.filter(function (key) { return localExports[key].usedInLocal; })
|
|
218
218
|
.map(function (key) { return "".concat(key, " = ").concat(key, ";"); });
|
|
@@ -289,7 +289,7 @@ var componentToAngular = function (options) {
|
|
|
289
289
|
});
|
|
290
290
|
},
|
|
291
291
|
});
|
|
292
|
-
var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n import { ", " ", " Component ", "", " } from '@angular/core';\n ", "\n\n ", "\n ", "\n
|
|
292
|
+
var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n import { ", " ", " Component ", "", " } from '@angular/core';\n ", "\n\n ", "\n ", "\n\n @Component({\n ", "\n selector: '", "',\n template: `\n ", "\n `,\n ", "\n })\n export default class ", " {\n ", "\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", "\n\n ", "\n\n ", "\n\n }\n "], ["\n import { ", " ", " Component ", "", " } from '@angular/core';\n ", "\n\n ", "\n ", "\n\n @Component({\n ", "\n selector: '", "',\n template: \\`\n ", "\n \\`,\n ", "\n })\n export default class ", " {\n ", "\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", "\n\n ", "\n\n ", "\n\n }\n "])), outputs.length ? 'Output, EventEmitter, \n' : '', ((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? 'Inject, forwardRef,' : '', domRefs.size ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
|
|
293
293
|
component: json,
|
|
294
294
|
target: 'angular',
|
|
295
295
|
excludeMitosisComponents: !options.standalone,
|
|
@@ -322,23 +322,23 @@ var componentToAngular = function (options) {
|
|
|
322
322
|
})
|
|
323
323
|
.join('\n'), !hasConstructor
|
|
324
324
|
? ''
|
|
325
|
-
: "constructor(\n".concat(injectables.join(',\n'), ") {\n ").concat(!((
|
|
325
|
+
: "constructor(\n".concat(injectables.join(',\n'), ") {\n ").concat(!((_h = component.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
|
|
326
326
|
? ''
|
|
327
|
-
: "\n ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((
|
|
327
|
+
: "\n ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_j = component.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code, {
|
|
328
328
|
replaceWith: 'this.',
|
|
329
329
|
contextVars: contextVars,
|
|
330
330
|
outputVars: outputVars,
|
|
331
331
|
}), "\n "), "\n }\n "), !hasOnMount
|
|
332
332
|
? ''
|
|
333
|
-
: "ngOnInit() {\n \n ".concat(!((
|
|
333
|
+
: "ngOnInit() {\n \n ".concat(!((_k = component.hooks) === null || _k === void 0 ? void 0 : _k.onMount)
|
|
334
334
|
? ''
|
|
335
|
-
: "\n ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((
|
|
335
|
+
: "\n ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_l = component.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code, {
|
|
336
336
|
replaceWith: 'this.',
|
|
337
337
|
contextVars: contextVars,
|
|
338
338
|
outputVars: outputVars,
|
|
339
339
|
domRefs: Array.from(domRefs),
|
|
340
340
|
stateVars: stateVars,
|
|
341
|
-
}), "\n "), "\n }"), !((
|
|
341
|
+
}), "\n "), "\n }"), !((_m = component.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.length)
|
|
342
342
|
? ''
|
|
343
343
|
: "ngAfterContentChecked() {\n ".concat(component.hooks.onUpdate.reduce(function (code, hook) {
|
|
344
344
|
code += (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.code, {
|
|
@@ -485,7 +485,7 @@ exports.componentToHtml = componentToHtml;
|
|
|
485
485
|
var componentToCustomElement = function (options) {
|
|
486
486
|
if (options === void 0) { options = {}; }
|
|
487
487
|
return function (_a) {
|
|
488
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14
|
|
488
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
|
|
489
489
|
var component = _a.component;
|
|
490
490
|
var ComponentName = component.name;
|
|
491
491
|
var kebabName = (0, lodash_2.kebabCase)(ComponentName);
|
|
@@ -494,7 +494,7 @@ var componentToCustomElement = function (options) {
|
|
|
494
494
|
if (options.plugins) {
|
|
495
495
|
json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
|
|
496
496
|
}
|
|
497
|
-
var
|
|
497
|
+
var _15 = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _15[0], hasPropRef = _15[1];
|
|
498
498
|
var contextVars = Object.keys(((_b = json === null || json === void 0 ? void 0 : json.context) === null || _b === void 0 ? void 0 : _b.get) || {});
|
|
499
499
|
var childComponents = getChildComponents(json, useOptions);
|
|
500
500
|
var componentHasProps = (0, has_props_1.hasProps)(json);
|
|
@@ -518,7 +518,7 @@ var componentToCustomElement = function (options) {
|
|
|
518
518
|
});
|
|
519
519
|
var setContext = [];
|
|
520
520
|
for (var key in json.context.set) {
|
|
521
|
-
var
|
|
521
|
+
var _16 = json.context.set[key], name_1 = _16.name, value = _16.value, ref = _16.ref;
|
|
522
522
|
setContext.push({ name: name_1, value: value, ref: ref });
|
|
523
523
|
}
|
|
524
524
|
addUpdateAfterSet(json, useOptions);
|
|
@@ -581,17 +581,17 @@ var componentToCustomElement = function (options) {
|
|
|
581
581
|
console.warn('Could not prettify', { string: html }, err);
|
|
582
582
|
}
|
|
583
583
|
}
|
|
584
|
-
var str = "\n ".concat(json.types ? json.types.join('\n') : '', "\n ").concat(
|
|
585
|
-
? (
|
|
584
|
+
var str = "\n ".concat(json.types ? json.types.join('\n') : '', "\n ").concat((0, render_imports_1.renderPreComponent)({ component: json, target: 'customElement' }), "\n /**\n * Usage:\n * \n * <").concat(kebabName, "></").concat(kebabName, ">\n * \n */\n class ").concat(ComponentName, " extends ").concat(((_j = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _j === void 0 ? void 0 : _j.classExtends)
|
|
585
|
+
? (_k = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _k === void 0 ? void 0 : _k.classExtends(json, useOptions)
|
|
586
586
|
: 'HTMLElement', " {\n ").concat(Array.from(domRefs)
|
|
587
587
|
.map(function (ref) {
|
|
588
588
|
return "\n get _".concat(ref, "() {\n return this._root.querySelector(\"[data-ref='").concat(ComponentName, "-").concat(ref, "']\")\n }\n ");
|
|
589
589
|
})
|
|
590
590
|
.join('\n'), "\n\n get _root() {\n return this.shadowRoot || this;\n }\n\n constructor() {\n super();\n const self = this;\n ").concat(
|
|
591
591
|
// TODO: more than one context not injector
|
|
592
|
-
setContext.length === 1 && ((
|
|
592
|
+
setContext.length === 1 && ((_l = setContext === null || setContext === void 0 ? void 0 : setContext[0]) === null || _l === void 0 ? void 0 : _l.ref)
|
|
593
593
|
? "this.context = ".concat(setContext[0].ref)
|
|
594
|
-
: '', "\n\n ").concat(!((
|
|
594
|
+
: '', "\n\n ").concat(!((_o = (_m = json.hooks) === null || _m === void 0 ? void 0 : _m.onInit) === null || _o === void 0 ? void 0 : _o.code) ? '' : 'this.onInitOnce = false;', "\n\n this.state = ").concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
|
|
595
595
|
valueMapper: function (value) {
|
|
596
596
|
return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(addUpdateAfterSetInCode(value, useOptions, 'self.update'), {
|
|
597
597
|
includeProps: false,
|
|
@@ -612,10 +612,10 @@ var componentToCustomElement = function (options) {
|
|
|
612
612
|
? ''
|
|
613
613
|
: "\n this.componentProps = [".concat(Array.from(props)
|
|
614
614
|
.map(function (prop) { return "\"".concat(prop, "\""); })
|
|
615
|
-
.join(','), "];\n "), "\n\n ").concat(!((
|
|
615
|
+
.join(','), "];\n "), "\n\n ").concat(!((_p = json.hooks.onUpdate) === null || _p === void 0 ? void 0 : _p.length)
|
|
616
616
|
? ''
|
|
617
|
-
: "\n this.updateDeps = [".concat((
|
|
618
|
-
? (
|
|
617
|
+
: "\n this.updateDeps = [".concat((_q = json.hooks.onUpdate) === null || _q === void 0 ? void 0 : _q.map(function (hook) { return updateReferencesInCode((hook === null || hook === void 0 ? void 0 : hook.deps) || '[]', useOptions); }).join(','), "];\n "), "\n\n // used to keep track of all nodes created by show/for\n this.nodesToDestroy = [];\n // batch updates\n this.pendingUpdate = false;\n ").concat(((_r = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _r === void 0 ? void 0 : _r.componentConstructor)
|
|
618
|
+
? (_s = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _s === void 0 ? void 0 : _s.componentConstructor(json, useOptions)
|
|
619
619
|
: '', "\n\n ").concat(useOptions.js, "\n\n ").concat(jsRefs
|
|
620
620
|
.map(function (ref) {
|
|
621
621
|
var _a;
|
|
@@ -623,32 +623,32 @@ var componentToCustomElement = function (options) {
|
|
|
623
623
|
var argument = ((_a = json['refs'][ref]) === null || _a === void 0 ? void 0 : _a.argument) || 'null';
|
|
624
624
|
return "this._".concat(ref, " = ").concat(argument);
|
|
625
625
|
})
|
|
626
|
-
.join('\n'), "\n\n if (").concat((
|
|
626
|
+
.join('\n'), "\n\n if (").concat((_t = json.meta.useMetadata) === null || _t === void 0 ? void 0 : _t.isAttachedToShadowDom, ") {\n this.attachShadow({ mode: 'open' })\n }\n }\n\n\n ").concat(!((_u = json.hooks.onUnMount) === null || _u === void 0 ? void 0 : _u.code)
|
|
627
627
|
? ''
|
|
628
|
-
: "\n disconnectedCallback() {\n ".concat(((
|
|
629
|
-
? (
|
|
628
|
+
: "\n disconnectedCallback() {\n ".concat(((_v = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _v === void 0 ? void 0 : _v.disconnectedCallback)
|
|
629
|
+
? (_w = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _w === void 0 ? void 0 : _w.disconnectedCallback(json, useOptions)
|
|
630
630
|
: "\n // onUnMount\n ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount.code, useOptions), useOptions, {
|
|
631
631
|
contextVars: contextVars,
|
|
632
|
-
}), "\n this.destroyAnyNodes(); // clean up nodes when component is destroyed\n ").concat(!((
|
|
632
|
+
}), "\n this.destroyAnyNodes(); // clean up nodes when component is destroyed\n ").concat(!((_y = (_x = json.hooks) === null || _x === void 0 ? void 0 : _x.onInit) === null || _y === void 0 ? void 0 : _y.code) ? '' : 'this.onInitOnce = false;', "\n "), "\n }\n "), "\n\n destroyAnyNodes() {\n // destroy current view template refs before rendering again\n this.nodesToDestroy.forEach(el => el.remove());\n this.nodesToDestroy = [];\n }\n\n connectedCallback() {\n ").concat(context.join('\n'), "\n ").concat(!componentHasProps
|
|
633
633
|
? ''
|
|
634
|
-
: "\n this.getAttributeNames().forEach((attr) => {\n const jsVar = attr.replace(/-/g, '');\n const regexp = new RegExp(jsVar, 'i');\n this.componentProps.forEach(prop => {\n if (regexp.test(prop)) {\n const attrValue = this.getAttribute(attr);\n if (this.props[prop] !== attrValue) {\n this.props[prop] = attrValue;\n }\n }\n });\n });\n ", "\n ").concat(((
|
|
635
|
-
? (
|
|
636
|
-
: "\n this._root.innerHTML = `\n ".concat(html, "`;\n this.pendingUpdate = true;\n ").concat(!((
|
|
634
|
+
: "\n this.getAttributeNames().forEach((attr) => {\n const jsVar = attr.replace(/-/g, '');\n const regexp = new RegExp(jsVar, 'i');\n this.componentProps.forEach(prop => {\n if (regexp.test(prop)) {\n const attrValue = this.getAttribute(attr);\n if (this.props[prop] !== attrValue) {\n this.props[prop] = attrValue;\n }\n }\n });\n });\n ", "\n ").concat(((_z = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _z === void 0 ? void 0 : _z.connectedCallbackUpdate)
|
|
635
|
+
? (_0 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _0 === void 0 ? void 0 : _0.connectedCallbackUpdate(json, html, useOptions)
|
|
636
|
+
: "\n this._root.innerHTML = `\n ".concat(html, "`;\n this.pendingUpdate = true;\n ").concat(!((_2 = (_1 = json.hooks) === null || _1 === void 0 ? void 0 : _1.onInit) === null || _2 === void 0 ? void 0 : _2.code) ? '' : 'this.onInit();', "\n this.render();\n this.onMount();\n this.pendingUpdate = false;\n this.update();\n "), "\n }\n ").concat(!((_4 = (_3 = json.hooks) === null || _3 === void 0 ? void 0 : _3.onInit) === null || _4 === void 0 ? void 0 : _4.code)
|
|
637
637
|
? ''
|
|
638
|
-
: "\n onInit() {\n ".concat(!((
|
|
638
|
+
: "\n onInit() {\n ".concat(!((_6 = (_5 = json.hooks) === null || _5 === void 0 ? void 0 : _5.onInit) === null || _6 === void 0 ? void 0 : _6.code)
|
|
639
639
|
? ''
|
|
640
|
-
: "\n if (!this.onInitOnce) {\n ".concat(updateReferencesInCode(addUpdateAfterSetInCode((
|
|
640
|
+
: "\n if (!this.onInitOnce) {\n ".concat(updateReferencesInCode(addUpdateAfterSetInCode((_8 = (_7 = json.hooks) === null || _7 === void 0 ? void 0 : _7.onInit) === null || _8 === void 0 ? void 0 : _8.code, useOptions), useOptions, {
|
|
641
641
|
contextVars: contextVars,
|
|
642
642
|
}), "\n this.onInitOnce = true;\n }"), "\n }\n "), "\n\n ").concat(!hasShow
|
|
643
643
|
? ''
|
|
644
|
-
: "\n showContent(el) {\n // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content\n // grabs the content of a node that is between <template> tags\n // iterates through child nodes to register all content including text elements\n // attaches the content after the template\n \n \n const elementFragment = el.content.cloneNode(true);\n const children = Array.from(elementFragment.childNodes)\n children.forEach(child => {\n if (el?.scope) {\n child.scope = el.scope;\n }\n if (el?.context) {\n child.context = el.context;\n }\n this.nodesToDestroy.push(child);\n });\n el.after(elementFragment);\n }", "\n ").concat(!((
|
|
644
|
+
: "\n showContent(el) {\n // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content\n // grabs the content of a node that is between <template> tags\n // iterates through child nodes to register all content including text elements\n // attaches the content after the template\n \n \n const elementFragment = el.content.cloneNode(true);\n const children = Array.from(elementFragment.childNodes)\n children.forEach(child => {\n if (el?.scope) {\n child.scope = el.scope;\n }\n if (el?.context) {\n child.context = el.context;\n }\n this.nodesToDestroy.push(child);\n });\n el.after(elementFragment);\n }", "\n ").concat(!((_9 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _9 === void 0 ? void 0 : _9.attributeChangedCallback)
|
|
645
645
|
? ''
|
|
646
|
-
: "\n attributeChangedCallback(name, oldValue, newValue) {\n ".concat((
|
|
646
|
+
: "\n attributeChangedCallback(name, oldValue, newValue) {\n ".concat((_10 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _10 === void 0 ? void 0 : _10.attributeChangedCallback(['name', 'oldValue', 'newValue'], json, useOptions), "\n }\n "), "\n\n onMount() {\n ").concat(!((_11 = json.hooks.onMount) === null || _11 === void 0 ? void 0 : _11.code)
|
|
647
647
|
? ''
|
|
648
648
|
: // TODO: make prettier by grabbing only the function body
|
|
649
649
|
"\n // onMount\n ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions, {
|
|
650
650
|
contextVars: contextVars,
|
|
651
|
-
}), "\n "), "\n }\n\n onUpdate() {\n ").concat(!((
|
|
651
|
+
}), "\n "), "\n }\n\n onUpdate() {\n ").concat(!((_12 = json.hooks.onUpdate) === null || _12 === void 0 ? void 0 : _12.length)
|
|
652
652
|
? ''
|
|
653
653
|
: "\n const self = this;\n ".concat(json.hooks.onUpdate.reduce(function (code, hook, index) {
|
|
654
654
|
// create check update
|
|
@@ -701,8 +701,8 @@ var componentToCustomElement = function (options) {
|
|
|
701
701
|
? ''
|
|
702
702
|
: "\n // scope helper\n getScope(el, name) {\n do {\n let value = el?.scope?.[name]\n if (value !== undefined) {\n return value\n }\n } while ((el = el.parentNode));\n }\n ", "\n\n ").concat(!hasLoop
|
|
703
703
|
? ''
|
|
704
|
-
: "\n\n // Helper to render loops\n renderLoop(template, array, itemName, itemIndex, collectionName) {\n const collection = [];\n for (let [index, value] of array.entries()) {\n const elementFragment = template.content.cloneNode(true);\n const children = Array.from(elementFragment.childNodes)\n const localScope = {};\n let scope = localScope;\n if (template?.scope) {\n const getParent = {\n get(target, prop, receiver) {\n if (prop in target) {\n return target[prop];\n }\n if (prop in template.scope) {\n return template.scope[prop];\n }\n return target[prop];\n }\n };\n scope = new Proxy(localScope, getParent);\n }\n children.forEach((child) => {\n if (itemName !== undefined) {\n scope[itemName] = value;\n }\n if (itemIndex !== undefined) {\n scope[itemIndex] = index;\n }\n if (collectionName !== undefined) {\n scope[collectionName] = array;\n }\n child.scope = scope;\n if (template.context) {\n child.context = context;\n }\n this.nodesToDestroy.push(child);\n collection.unshift(child)\n });\n }\n collection.forEach(child => template.after(child));\n }\n ", "\n }\n\n ").concat(((
|
|
705
|
-
? (
|
|
704
|
+
: "\n\n // Helper to render loops\n renderLoop(template, array, itemName, itemIndex, collectionName) {\n const collection = [];\n for (let [index, value] of array.entries()) {\n const elementFragment = template.content.cloneNode(true);\n const children = Array.from(elementFragment.childNodes)\n const localScope = {};\n let scope = localScope;\n if (template?.scope) {\n const getParent = {\n get(target, prop, receiver) {\n if (prop in target) {\n return target[prop];\n }\n if (prop in template.scope) {\n return template.scope[prop];\n }\n return target[prop];\n }\n };\n scope = new Proxy(localScope, getParent);\n }\n children.forEach((child) => {\n if (itemName !== undefined) {\n scope[itemName] = value;\n }\n if (itemIndex !== undefined) {\n scope[itemIndex] = index;\n }\n if (collectionName !== undefined) {\n scope[collectionName] = array;\n }\n child.scope = scope;\n if (template.context) {\n child.context = context;\n }\n this.nodesToDestroy.push(child);\n collection.unshift(child)\n });\n }\n collection.forEach(child => template.after(child));\n }\n ", "\n }\n\n ").concat(((_13 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _13 === void 0 ? void 0 : _13.customElementsDefine)
|
|
705
|
+
? (_14 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _14 === void 0 ? void 0 : _14.customElementsDefine(kebabName, component, useOptions)
|
|
706
706
|
: "customElements.define('".concat(kebabName, "', ").concat(ComponentName, ");"), "\n ");
|
|
707
707
|
if (options.plugins) {
|
|
708
708
|
str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
|
|
@@ -159,7 +159,6 @@ var componentToLit = function (options) {
|
|
|
159
159
|
});
|
|
160
160
|
}
|
|
161
161
|
catch (err) {
|
|
162
|
-
console.warn('Could not format html', err);
|
|
163
162
|
// If can't format HTML (this can happen with lit given it is tagged template strings),
|
|
164
163
|
// at least remove excess space
|
|
165
164
|
html = html.replace(/\n{3,}/g, '\n\n');
|
|
@@ -179,7 +178,7 @@ var componentToLit = function (options) {
|
|
|
179
178
|
? ''
|
|
180
179
|
: "disconnectedCallback() { ".concat(processBinding(json.hooks.onUnMount.code), " }"), !((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
|
|
181
180
|
? ''
|
|
182
|
-
: json.hooks.onUpdate.map(function (hook) { return
|
|
181
|
+
: "updated() { \n ".concat(json.hooks.onUpdate.map(function (hook) { return processBinding(hook.code); }).join('\n\n'), " \n }"), (0, indent_1.indent)(html, 8));
|
|
183
182
|
if (options.plugins) {
|
|
184
183
|
str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
|
|
185
184
|
}
|
|
@@ -130,7 +130,7 @@ var mitosisCoreComponents = ['Show', 'For'];
|
|
|
130
130
|
var componentToMitosis = function (toMitosisOptions) {
|
|
131
131
|
if (toMitosisOptions === void 0) { toMitosisOptions = {}; }
|
|
132
132
|
return function (_a) {
|
|
133
|
-
var _b, _c
|
|
133
|
+
var _b, _c;
|
|
134
134
|
var component = _a.component;
|
|
135
135
|
var options = __assign({ format: exports.DEFAULT_FORMAT }, toMitosisOptions);
|
|
136
136
|
if (options.format === 'react') {
|
|
@@ -157,11 +157,11 @@ var componentToMitosis = function (toMitosisOptions) {
|
|
|
157
157
|
var needsMitosisCoreImport = Boolean(hasState || refs.length || mitosisComponents.length);
|
|
158
158
|
var stringifiedUseMetadata = json5_1.default.stringify(component.meta.useMetadata);
|
|
159
159
|
// TODO: smart only pull in imports as needed
|
|
160
|
-
var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n
|
|
160
|
+
var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n\n ", "\n\n ", "\n\n export default function ", "(props) {\n ", "\n ", "\n\n ", "\n\n ", "\n\n return (", "\n ", "\n ", ")\n }\n\n "], ["\n ", "\n ", "\n ", "\n\n ", "\n\n ", "\n\n export default function ", "(props) {\n ", "\n ", "\n\n ", "\n\n ", "\n\n return (", "\n ", "\n ", ")\n }\n\n "])), !needsMitosisCoreImport
|
|
161
161
|
? ''
|
|
162
|
-
: "import { ".concat(!hasState ? '' : 'useStore, ', " ").concat(!refs.length ? '' : 'useRef, ', " ").concat(mitosisComponents.join(', '), " } from '@builder.io/mitosis';"), !otherComponents.length ? '' : "import { ".concat(otherComponents.join(','), " } from '@components';"), json.types ? json.types.join('\n') : '',
|
|
162
|
+
: "import { ".concat(!hasState ? '' : 'useStore, ', " ").concat(!refs.length ? '' : 'useRef, ', " ").concat(mitosisComponents.join(', '), " } from '@builder.io/mitosis';"), !otherComponents.length ? '' : "import { ".concat(otherComponents.join(','), " } from '@components';"), json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'mitosis' }), stringifiedUseMetadata && stringifiedUseMetadata !== '{}'
|
|
163
163
|
? "".concat(jsx_1.METADATA_HOOK_NAME, "(").concat(stringifiedUseMetadata, ")")
|
|
164
|
-
: '', component.name, !hasState ? '' : "const state = useStore(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json, refs), !((
|
|
164
|
+
: '', component.name, !hasState ? '' : "const state = useStore(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");"), getRefsString(json, refs), !((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), !((_c = json.hooks.onUnMount) === null || _c === void 0 ? void 0 : _c.code) ? '' : "onUnMount(() => { ".concat(json.hooks.onUnMount.code, " })"), addWrapper ? '<>' : '', json.children.map(function (item) { return (0, exports.blockToMitosis)(item, options); }).join('\n'), addWrapper ? '</>' : '');
|
|
165
165
|
if (options.prettier !== false) {
|
|
166
166
|
try {
|
|
167
167
|
str = (0, standalone_1.format)(str, {
|
|
@@ -188,10 +188,9 @@ function emitUseStore(file, stateInit) {
|
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
190
|
function emitTypes(file, component) {
|
|
191
|
-
var _a
|
|
191
|
+
var _a;
|
|
192
192
|
if (file.options.isTypeScript) {
|
|
193
193
|
(_a = component.types) === null || _a === void 0 ? void 0 : _a.forEach(function (t) { return file.src.emit(t, '\n'); });
|
|
194
|
-
(_b = component.interfaces) === null || _b === void 0 ? void 0 : _b.forEach(function (i) { return file.src.emit(i); });
|
|
195
194
|
}
|
|
196
195
|
}
|
|
197
196
|
function emitStateMethodsAndRewriteBindings(file, component, metadata) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BaseTranspilerOptions, Transpiler } from '../types/transpiler';
|
|
2
2
|
import { MitosisNode } from '../types/mitosis-node';
|
|
3
3
|
export interface ToReactOptions extends BaseTranspilerOptions {
|
|
4
|
-
stylesType?: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native';
|
|
4
|
+
stylesType?: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native' | 'style-tag';
|
|
5
5
|
stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
|
|
6
6
|
format?: 'lite' | 'safe';
|
|
7
7
|
type?: 'dom' | 'native';
|
|
@@ -55,6 +55,7 @@ var collect_styled_components_1 = require("../helpers/styles/collect-styled-comp
|
|
|
55
55
|
var helpers_1 = require("../helpers/styles/helpers");
|
|
56
56
|
var slots_1 = require("../helpers/slots");
|
|
57
57
|
var state_1 = require("../helpers/state");
|
|
58
|
+
var hash_sum_1 = __importDefault(require("hash-sum"));
|
|
58
59
|
var openFrag = function (options) { return getFragment('open', options); };
|
|
59
60
|
var closeFrag = function (options) { return getFragment('close', options); };
|
|
60
61
|
function getFragment(type, options) {
|
|
@@ -429,7 +430,7 @@ var componentToReact = function (reactOptions) {
|
|
|
429
430
|
};
|
|
430
431
|
exports.componentToReact = componentToReact;
|
|
431
432
|
var _componentToReact = function (json, options, isSubComponent) {
|
|
432
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l
|
|
433
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
433
434
|
if (isSubComponent === void 0) { isSubComponent = false; }
|
|
434
435
|
(0, process_http_requests_1.processHttpRequests)(json);
|
|
435
436
|
(0, handle_missing_state_1.handleMissingState)(json);
|
|
@@ -444,7 +445,7 @@ var _componentToReact = function (json, options, isSubComponent) {
|
|
|
444
445
|
var allRefs = Object.keys(json.refs);
|
|
445
446
|
(0, map_refs_1.mapRefs)(json, function (refName) { return "".concat(refName, ".current"); });
|
|
446
447
|
var hasState = (0, state_1.checkHasState)(json);
|
|
447
|
-
var
|
|
448
|
+
var _m = (0, get_props_ref_1.getPropsRef)(json), forwardRef = _m[0], hasPropRef = _m[1];
|
|
448
449
|
var isForwardRef = Boolean(((_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.forwardRef) || hasPropRef);
|
|
449
450
|
if (isForwardRef) {
|
|
450
451
|
var meta = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.forwardRef;
|
|
@@ -463,7 +464,13 @@ var _componentToReact = function (json, options, isSubComponent) {
|
|
|
463
464
|
if (options.plugins) {
|
|
464
465
|
json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
|
|
465
466
|
}
|
|
466
|
-
var css = stylesType === 'styled-jsx'
|
|
467
|
+
var css = stylesType === 'styled-jsx'
|
|
468
|
+
? (0, collect_css_1.collectCss)(json)
|
|
469
|
+
: stylesType === 'style-tag'
|
|
470
|
+
? (0, collect_css_1.collectCss)(json, {
|
|
471
|
+
prefix: (0, hash_sum_1.default)(json),
|
|
472
|
+
})
|
|
473
|
+
: null;
|
|
467
474
|
var styledComponentsCode = stylesType === 'styled-components' && componentHasStyles && (0, collect_styled_components_1.collectStyledComponents)(json);
|
|
468
475
|
if (options.format !== 'lite') {
|
|
469
476
|
(0, strip_meta_properties_1.stripMetaProperties)(json);
|
|
@@ -488,15 +495,15 @@ var _componentToReact = function (json, options, isSubComponent) {
|
|
|
488
495
|
reactLibImports.add('useEffect');
|
|
489
496
|
}
|
|
490
497
|
var wrap = wrapInFragment(json) ||
|
|
491
|
-
(componentHasStyles && stylesType === 'styled-jsx') ||
|
|
498
|
+
(componentHasStyles && (stylesType === 'styled-jsx' || stylesType === 'style-tag')) ||
|
|
492
499
|
isRootSpecialNode(json);
|
|
493
|
-
var
|
|
500
|
+
var _o = getRefsString(json, allRefs, options), hasStateArgument = _o[0], refsString = _o[1];
|
|
494
501
|
var nativeStyles = stylesType === 'react-native' && componentHasStyles && (0, react_native_1.collectReactNativeStyles)(json);
|
|
495
502
|
var propsArgs = 'props';
|
|
496
503
|
if (json.propsTypeRef) {
|
|
497
504
|
propsArgs = "props: ".concat(json.propsTypeRef);
|
|
498
505
|
}
|
|
499
|
-
var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "
|
|
506
|
+
var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __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 return (\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\n ", "\n\n return (\n ", "\n ", "\n ", "\n ", "\n );\n }", "\n\n ", "\n\n ", "\n "])), options.preact
|
|
500
507
|
? "\n /** @jsx h */\n import { h, Fragment } from 'preact';\n "
|
|
501
508
|
: options.type !== 'native'
|
|
502
509
|
? "import * as React from 'react';"
|
|
@@ -506,7 +513,7 @@ var _componentToReact = function (json, options, isSubComponent) {
|
|
|
506
513
|
? "/** @jsx jsx */\n import { jsx } from '@emotion/react'".trim()
|
|
507
514
|
: '', hasState && stateType === 'valtio' ? "import { useLocalProxy } from 'valtio/utils';" : '', hasState && stateType === 'solid' ? "import { useMutable } from 'react-solid-state';" : '', stateType === 'mobx' && hasState
|
|
508
515
|
? "import { useLocalObservable } from 'mobx-react-lite';"
|
|
509
|
-
: '', json.types ? json.types.join('\n') : '',
|
|
516
|
+
: '', json.types ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({ component: json, target: 'react' }), isSubComponent ? '' : 'export default ', isForwardRef ? "forwardRef".concat(forwardRefType ? "<".concat(forwardRefType, ">") : '', "(") : '', json.name || 'MyComponent', propsArgs, isForwardRef ? ", ".concat(options.forwardRef) : '', hasStateArgument ? '' : refsString, hasState
|
|
510
517
|
? stateType === 'mobx'
|
|
511
518
|
? "const state = useLocalObservable(() => (".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), "));")
|
|
512
519
|
: stateType === 'useState'
|
|
@@ -516,13 +523,17 @@ var _componentToReact = function (json, options, isSubComponent) {
|
|
|
516
523
|
: stateType === 'builder'
|
|
517
524
|
? "var state = useBuilderState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
|
|
518
525
|
: "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
|
|
519
|
-
: '', hasStateArgument ? refsString : '', getContextString(json, options), getInitCode(json, options), ((
|
|
526
|
+
: '', hasStateArgument ? refsString : '', getContextString(json, options), getInitCode(json, options), ((_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code)
|
|
520
527
|
? "\n useEffect(() => {\n ".concat(processBinding(updateStateSettersInCode(json.hooks.onInit.code, options), options), "\n })\n ")
|
|
521
|
-
: '', ((
|
|
528
|
+
: '', ((_h = json.hooks.onMount) === null || _h === void 0 ? void 0 : _h.code)
|
|
522
529
|
? "useEffect(() => {\n ".concat(processBinding(updateStateSettersInCode(json.hooks.onMount.code, options), options), "\n }, [])")
|
|
523
|
-
: '', (
|
|
530
|
+
: '', (_k = (_j = json.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.map(function (hook) { return "useEffect(() => {\n ".concat(processBinding(updateStateSettersInCode(hook.code, options), options), "\n }, \n ").concat(hook.deps ? processBinding(updateStateSettersInCode(hook.deps, options), options) : '', ")"); }).join(';')) !== null && _k !== void 0 ? _k : '', ((_l = json.hooks.onUnMount) === null || _l === void 0 ? void 0 : _l.code)
|
|
524
531
|
? "useEffect(() => {\n return () => {\n ".concat(processBinding(updateStateSettersInCode(json.hooks.onUnMount.code, options), options), "\n }\n }, [])")
|
|
525
|
-
: '', wrap ? openFrag(options) : '', json.children.map(function (item) { return (0, exports.blockToReact)(item, options); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
|
|
532
|
+
: '', wrap ? openFrag(options) : '', json.children.map(function (item) { return (0, exports.blockToReact)(item, options); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
|
|
533
|
+
? "<style jsx>{`".concat(css, "`}</style>")
|
|
534
|
+
: componentHasStyles && stylesType === 'style-tag'
|
|
535
|
+
? "<style>{`".concat(css, "`}</style>")
|
|
536
|
+
: '', wrap ? closeFrag(options) : '', isForwardRef ? ')' : '', !nativeStyles
|
|
526
537
|
? ''
|
|
527
538
|
: "\n const styles = StyleSheet.create(".concat(json5_1.default.stringify(nativeStyles), ");\n "), styledComponentsCode ? styledComponentsCode : '');
|
|
528
539
|
str = (0, replace_new_lines_in_strings_1.stripNewlinesInStrings)(str);
|
|
@@ -288,7 +288,7 @@ var componentToSvelte = function (_a) {
|
|
|
288
288
|
if (_a === void 0) { _a = {}; }
|
|
289
289
|
var _b = _a.plugins, plugins = _b === void 0 ? [] : _b, userProvidedOptions = __rest(_a, ["plugins"]);
|
|
290
290
|
return function (_a) {
|
|
291
|
-
var _b, _c, _d, _e, _f, _g;
|
|
291
|
+
var _b, _c, _d, _e, _f, _g, _h;
|
|
292
292
|
var component = _a.component;
|
|
293
293
|
var options = __assign({ stateType: 'variables', prettier: true, plugins: __spreadArray([FUNCTION_HACK_PLUGIN], plugins, true) }, userProvidedOptions);
|
|
294
294
|
// Make a copy we can safely mutate, similar to babel's toolchain
|
|
@@ -336,10 +336,10 @@ var componentToSvelte = function (_a) {
|
|
|
336
336
|
return (0, function_1.pipe)(stripStateAndProps(hookCode, options), babel_transform_1.babelTransformCode);
|
|
337
337
|
};
|
|
338
338
|
var str = '';
|
|
339
|
-
if (json.
|
|
340
|
-
str += (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n <script context='module' lang='ts'>\n ", "\n
|
|
339
|
+
if ((_b = json.types) === null || _b === void 0 ? void 0 : _b.length) {
|
|
340
|
+
str += (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n <script context='module' lang='ts'>\n ", "\n </script>\n \n\n \n\n "], ["\n <script context='module' lang='ts'>\n ", "\n </script>\n \\n\n \\n\n "])), json.types ? json.types.join('\n\n') + '\n' : '');
|
|
341
341
|
}
|
|
342
|
-
str += (0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n <script>\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n ", "\n ", "\n\n ", "\n\n ", "\n\n ", "\n </script>\n\n ", "\n\n ", "\n "], ["\n <script>\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n ", "\n ", "\n\n ", "\n\n ", "\n\n ", "\n </script>\n\n ", "\n\n ", "\n "])), !((
|
|
342
|
+
str += (0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n <script lang='ts'>\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n </script>\n\n ", "\n\n ", "\n "], ["\n <script lang='ts'>\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n\n ", "\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n </script>\n\n ", "\n\n ", "\n "])), !((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code) ? '' : "import { onMount } from 'svelte'", !((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.length) ? '' : "import { afterUpdate } from 'svelte'", !((_e = json.hooks.onUnMount) === null || _e === void 0 ? void 0 : _e.code) ? '' : "import { onDestroy } from 'svelte'", (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), (0, context_1.hasContext)(component) ? 'import { getContext, setContext } from "svelte";' : '', !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", (0, lodash_1.uniq)(refs.map(function (ref) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref); }).concat(props))
|
|
343
343
|
.map(function (name) {
|
|
344
344
|
if (name === 'children') {
|
|
345
345
|
return '';
|
|
@@ -353,13 +353,13 @@ var componentToSvelte = function (_a) {
|
|
|
353
353
|
})
|
|
354
354
|
.join('\n'), (0, helpers_1.hasStyle)(json)
|
|
355
355
|
? "\n function mitosis_styling (node, vars) {\n Object.entries(vars).forEach(([ p, v ]) => { node.style[p] = v })\n }\n "
|
|
356
|
-
: '', functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString,
|
|
356
|
+
: '', getContextCode(json), setContextCode(json), functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString, options.stateType === 'proxies'
|
|
357
357
|
? dataString.length < 4
|
|
358
358
|
? ''
|
|
359
359
|
: "let state = onChange(".concat(dataString, ", () => state = state)")
|
|
360
|
-
: dataString, !((
|
|
360
|
+
: dataString, !((_f = json.hooks.onMount) === null || _f === void 0 ? void 0 : _f.code)
|
|
361
361
|
? ''
|
|
362
|
-
: "onMount(() => { ".concat(transformHookCode(json.hooks.onMount.code), " });"), !((
|
|
362
|
+
: "onMount(() => { ".concat(transformHookCode(json.hooks.onMount.code), " });"), !((_g = json.hooks.onUpdate) === null || _g === void 0 ? void 0 : _g.length)
|
|
363
363
|
? ''
|
|
364
364
|
: json.hooks.onUpdate
|
|
365
365
|
.map(function (_a, index) {
|
|
@@ -373,7 +373,7 @@ var componentToSvelte = function (_a) {
|
|
|
373
373
|
return "afterUpdate(() => { ".concat(hookCode, " })");
|
|
374
374
|
}
|
|
375
375
|
})
|
|
376
|
-
.join(';'), !((
|
|
376
|
+
.join(';'), !((_h = json.hooks.onUnMount) === null || _h === void 0 ? void 0 : _h.code)
|
|
377
377
|
? ''
|
|
378
378
|
: "onDestroy(() => { ".concat(transformHookCode(json.hooks.onUnMount.code), " });"), json.children
|
|
379
379
|
.map(function (item) {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="lodash" />
|
|
2
1
|
import * as CSS from 'csstype';
|
|
3
2
|
import { MitosisNode } from '../../types/mitosis-node';
|
|
4
3
|
import { MitosisComponent } from '../../types/mitosis-component';
|
|
@@ -20,8 +19,8 @@ export declare const hasStyle: (component: MitosisComponent) => boolean;
|
|
|
20
19
|
export declare type StyleMap = {
|
|
21
20
|
[className: string]: CSS.Properties | StyleMap;
|
|
22
21
|
};
|
|
23
|
-
export declare const getNestedSelectors: (map: StyleMap) => import("lodash").Dictionary<CSS.Properties<0 | (string & {}), string & {}
|
|
24
|
-
export declare const getStylesOnly: (map: StyleMap) => import("lodash").Dictionary<CSS.Properties<0 | (string & {}), string & {}
|
|
22
|
+
export declare const getNestedSelectors: (map: StyleMap) => import("lodash").Dictionary<StyleMap | CSS.Properties<0 | (string & {}), string & {}>>;
|
|
23
|
+
export declare const getStylesOnly: (map: StyleMap) => import("lodash").Dictionary<StyleMap | CSS.Properties<0 | (string & {}), string & {}>>;
|
|
25
24
|
/**
|
|
26
25
|
* { 'my-class': { display: 'block', '&.foo': { display: 'none' } }}
|
|
27
26
|
*/
|
|
@@ -63,7 +63,6 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
|
|
|
63
63
|
children: MitosisNode[];
|
|
64
64
|
subComponents: import("..").MitosisComponent[];
|
|
65
65
|
types?: string[] | undefined;
|
|
66
|
-
interfaces?: string[] | undefined;
|
|
67
66
|
propsTypeRef?: string | undefined;
|
|
68
67
|
}[];
|
|
69
68
|
'@type': "@builder.io/mitosis/component";
|
|
@@ -96,7 +95,6 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
|
|
|
96
95
|
};
|
|
97
96
|
children: MitosisNode[];
|
|
98
97
|
types?: string[] | undefined;
|
|
99
|
-
interfaces?: string[] | undefined;
|
|
100
98
|
propsTypeRef?: string | undefined;
|
|
101
99
|
};
|
|
102
100
|
export {};
|
|
@@ -4,4 +4,3 @@ export declare const getPropsTypeRef: (node: babel.types.FunctionDeclaration, co
|
|
|
4
4
|
export declare const isTypeImport: (node: babel.Node) => boolean;
|
|
5
5
|
export declare const isTypeOrInterface: (node: babel.Node) => boolean;
|
|
6
6
|
export declare const collectTypes: (node: babel.Node, context: Context) => void;
|
|
7
|
-
export declare const collectInterfaces: (node: babel.Node, context: Context) => void;
|
|
@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
35
35
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
36
36
|
};
|
|
37
37
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
38
|
-
exports.
|
|
38
|
+
exports.collectTypes = exports.isTypeOrInterface = exports.isTypeImport = exports.getPropsTypeRef = void 0;
|
|
39
39
|
var babel = __importStar(require("@babel/core"));
|
|
40
40
|
var generator_1 = __importDefault(require("@babel/generator"));
|
|
41
41
|
var types = babel.types;
|
|
@@ -54,7 +54,7 @@ var getPropsTypeRef = function (node, context) {
|
|
|
54
54
|
.replace(/;/g, '');
|
|
55
55
|
if (generatedTypes.startsWith('{')) {
|
|
56
56
|
var propsTypeRef = "".concat((_a = node.id) === null || _a === void 0 ? void 0 : _a.name, "Props");
|
|
57
|
-
context.builder.component.
|
|
57
|
+
context.builder.component.types = __spreadArray(__spreadArray([], (context.builder.component.types || []), true), [
|
|
58
58
|
"export interface ".concat(propsTypeRef, " ").concat(generatedTypes),
|
|
59
59
|
], false);
|
|
60
60
|
return propsTypeRef;
|
|
@@ -86,10 +86,3 @@ var collectTypes = function (node, context) {
|
|
|
86
86
|
context.builder.component.types = types.filter(Boolean);
|
|
87
87
|
};
|
|
88
88
|
exports.collectTypes = collectTypes;
|
|
89
|
-
var collectInterfaces = function (node, context) {
|
|
90
|
-
var interfaceStr = (0, generator_1.default)(node).code;
|
|
91
|
-
var _a = context.builder.component.interfaces, interfaces = _a === void 0 ? [] : _a;
|
|
92
|
-
interfaces.push(interfaceStr);
|
|
93
|
-
context.builder.component.interfaces = interfaces.filter(Boolean);
|
|
94
|
-
};
|
|
95
|
-
exports.collectInterfaces = collectInterfaces;
|
|
@@ -616,11 +616,8 @@ function parseJsx(jsx, options) {
|
|
|
616
616
|
},
|
|
617
617
|
ExportNamedDeclaration: function (path, context) {
|
|
618
618
|
var node = path.node;
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
(0, component_types_1.collectInterfaces)(path.node, context);
|
|
622
|
-
}
|
|
623
|
-
if (babel.types.isTSTypeAliasDeclaration(node.declaration)) {
|
|
619
|
+
if (babel.types.isTSInterfaceDeclaration(node.declaration) ||
|
|
620
|
+
babel.types.isTSTypeAliasDeclaration(node.declaration)) {
|
|
624
621
|
(0, component_types_1.collectTypes)(path.node, context);
|
|
625
622
|
}
|
|
626
623
|
},
|
|
@@ -628,7 +625,7 @@ function parseJsx(jsx, options) {
|
|
|
628
625
|
(0, component_types_1.collectTypes)(path.node, context);
|
|
629
626
|
},
|
|
630
627
|
TSInterfaceDeclaration: function (path, context) {
|
|
631
|
-
(0, component_types_1.
|
|
628
|
+
(0, component_types_1.collectTypes)(path.node, context);
|
|
632
629
|
},
|
|
633
630
|
},
|
|
634
631
|
}); },
|