@builder.io/mitosis 0.0.146 → 0.1.0

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.
@@ -128,6 +128,7 @@ var BINDING_MAPPERS = __assign({ ref: function (ref, value, options) {
128
128
  } }, ATTTRIBUTE_MAPPERS);
129
129
  var blockToReact = function (json, options, component, parentSlots) {
130
130
  var _a, _b, _c;
131
+ if (parentSlots === void 0) { parentSlots = []; }
131
132
  if (NODE_MAPPERS[json.name]) {
132
133
  return NODE_MAPPERS[json.name](json, options, component, parentSlots);
133
134
  }
@@ -223,7 +223,7 @@ var componentToReact = function (reactOptions) {
223
223
  .replace(/;\n\nimport\s/g, ';\nimport ');
224
224
  }
225
225
  catch (err) {
226
- console.error('Format error for file:');
226
+ console.error('Format error for file:', str);
227
227
  throw err;
228
228
  }
229
229
  }
@@ -1,15 +1,4 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
2
  var __importDefault = (this && this.__importDefault) || function (mod) {
14
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
4
  };
@@ -47,145 +36,24 @@ var BINDING_MAPPERS = {
47
36
  var NODE_MAPPERS = {
48
37
  Fragment: function (json, options, scope) {
49
38
  var children = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
50
- var shouldAddDivFallback = options.vueVersion === 2 && (scope === null || scope === void 0 ? void 0 : scope.isRootNode) && children.length > 1;
51
39
  var childrenStr = children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n');
52
- if (shouldAddDivFallback) {
53
- console.warn('WARNING: Vue 2 forbids multiple root elements. You provided a root Fragment with multiple elements. Wrapping elements in div as a workaround.');
54
- return "<div>".concat(childrenStr, "</div>");
55
- }
56
- else {
57
- return childrenStr;
58
- }
40
+ return childrenStr;
59
41
  },
60
42
  For: function (_json, options) {
61
- var _a, _b;
62
- var _c;
43
+ var _a;
63
44
  var json = _json;
64
45
  var keyValue = json.bindings.key || { code: 'index', type: 'single' };
65
- var forValue = "(".concat(json.scope.forName, ", index) in ").concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code);
66
- if (options.vueVersion >= 3) {
67
- // TODO: tmk key goes on different element (parent vs child) based on Vue 2 vs Vue 3
68
- return "<template :key=\"".concat((0, helpers_1.encodeQuotes)((keyValue === null || keyValue === void 0 ? void 0 : keyValue.code) || 'index'), "\" v-for=\"").concat((0, helpers_1.encodeQuotes)(forValue), "\">\n ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n </template>");
69
- }
70
- // Vue 2 can only handle one root element
71
- var firstChild = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
72
- // Edge-case for when the parent is a `Show`, we need to pass down the `v-if` prop.
73
- var jsonIf = json.properties[SPECIAL_PROPERTIES.V_IF];
74
- return firstChild
75
- ? (0, function_1.pipe)(firstChild, (0, helpers_1.addBindingsToJson)({ key: keyValue }), (0, helpers_1.addPropertiesToJson)(__assign((_a = {}, _a[SPECIAL_PROPERTIES.V_FOR] = forValue, _a), (jsonIf ? (_b = {}, _b[SPECIAL_PROPERTIES.V_IF] = jsonIf, _b) : {}))), function (block) { return (0, exports.blockToVue)(block, options); })
76
- : '';
46
+ var forValue = "(".concat(json.scope.forName, ", index) in ").concat((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code);
47
+ // TODO: tmk key goes on different element (parent vs child) based on Vue 2 vs Vue 3
48
+ return "<template :key=\"".concat((0, helpers_1.encodeQuotes)((keyValue === null || keyValue === void 0 ? void 0 : keyValue.code) || 'index'), "\" v-for=\"").concat((0, helpers_1.encodeQuotes)(forValue), "\">\n ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n </template>");
77
49
  },
78
50
  Show: function (json, options, scope) {
79
- var _a, _b, _c, _d, _e, _f;
80
- var _g, _h;
81
- var ifValue = ((_g = json.bindings.when) === null || _g === void 0 ? void 0 : _g.code) || '';
51
+ var _a;
52
+ var ifValue = ((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code) || '';
82
53
  var defaultShowTemplate = "\n <template ".concat(SPECIAL_PROPERTIES.V_IF, "=\"").concat((0, helpers_1.encodeQuotes)(ifValue), "\">\n ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n </template>\n ").concat((0, is_mitosis_node_1.isMitosisNode)(json.meta.else)
83
54
  ? "\n <template ".concat(SPECIAL_PROPERTIES.V_ELSE, ">\n ").concat((0, exports.blockToVue)(json.meta.else, options), "\n </template>")
84
55
  : '', "\n ");
85
- switch (options.vueVersion) {
86
- case 3:
87
- return defaultShowTemplate;
88
- case 2:
89
- // if it is not the root node, the default show template can be used
90
- // as Vue 2 only has this limitation at root level
91
- if (!(scope === null || scope === void 0 ? void 0 : scope.isRootNode)) {
92
- return defaultShowTemplate;
93
- }
94
- var children_1 = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
95
- // Vue 2 can only handle one root element, so we just take the first one.
96
- // TO-DO: warn user of multi-children Show.
97
- var firstChild = children_1[0];
98
- var elseBlock = json.meta.else;
99
- var hasShowChild = (firstChild === null || firstChild === void 0 ? void 0 : firstChild.name) === 'Show';
100
- var childElseBlock = firstChild === null || firstChild === void 0 ? void 0 : firstChild.meta.else;
101
- var allShowChildrenWithoutElse = children_1.every(function (x) { return x.name === 'Show' && !x.meta.else; });
102
- if (allShowChildrenWithoutElse && (0, is_mitosis_node_1.isMitosisNode)(elseBlock)) {
103
- /**
104
- * This is when we mimic an if-else chain by only providing `Show` elements as children, none of which have an `else` block
105
- *
106
- * <show when={foo} else={else-1}>
107
- * <show when={bar}> <bar-code> </show>
108
- * <show when={x}> <x-code> </show>
109
- * <show when={y}> <y-code> </show>
110
- * </show>
111
- *
112
- * What we want in this case is:
113
- *
114
- * <else-1 if={!foo} />
115
- * <bar-code v-else-if={bar} />
116
- * <x-code v-else-if={x} />
117
- * <y-code v-else />
118
- */
119
- var ifString = (0, function_1.pipe)(elseBlock, (0, helpers_1.addPropertiesToJson)((_a = {}, _a[SPECIAL_PROPERTIES.V_IF] = (0, helpers_1.invertBooleanExpression)(ifValue), _a)), function (block) { return (0, exports.blockToVue)(block, options); });
120
- var childrenStrings = children_1.map(function (child, idx) {
121
- var _a, _b;
122
- var _c;
123
- var isLast = idx === children_1.length - 1;
124
- var innerBlock = child.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
125
- if (!isLast) {
126
- var childIfValue = (_c = child.bindings.when) === null || _c === void 0 ? void 0 : _c.code;
127
- var elseIfString = (0, function_1.pipe)(innerBlock, (0, helpers_1.addPropertiesToJson)((_a = {}, _a[SPECIAL_PROPERTIES.V_ELSE_IF] = childIfValue, _a)), function (block) { return (0, exports.blockToVue)(block, options); });
128
- return elseIfString;
129
- }
130
- else {
131
- var elseString = (0, function_1.pipe)(innerBlock, (0, helpers_1.addPropertiesToJson)((_b = {}, _b[SPECIAL_PROPERTIES.V_ELSE] = '', _b)), function (block) { return (0, exports.blockToVue)(block, options); });
132
- return elseString;
133
- }
134
- });
135
- return "\n ".concat(ifString, "\n ").concat(childrenStrings.join('\n'), "\n ");
136
- }
137
- else if (firstChild &&
138
- (0, is_mitosis_node_1.isMitosisNode)(elseBlock) &&
139
- hasShowChild &&
140
- (0, is_mitosis_node_1.isMitosisNode)(childElseBlock)) {
141
- /**
142
- * This is special edge logic to handle 2 nested Show elements in Vue 2.
143
- * We need to invert the logic to make it work, due to no-template-root-element limitations in Vue 2.
144
- *
145
- * <show when={foo} else={else-1}>
146
- * <show when={bar}> <bar-code> </show>
147
- *
148
- * <show when={x}> <x-code> </show>
149
- *
150
- * <show when={y}> <y-code> </show>
151
- * </show>
152
- *
153
- *
154
- *
155
- *
156
- * foo: true && bar: true => if-code
157
- * foo: true && bar: false => else-2
158
- * foo: false && bar: true?? => else-1
159
- *
160
- *
161
- * map to:
162
- *
163
- * <else-1 if={!foo} />
164
- * <else-2 v-else-if={!bar} />
165
- * <if-code v-else />
166
- *
167
- */
168
- var ifString = (0, function_1.pipe)(elseBlock, (0, helpers_1.addPropertiesToJson)((_b = {}, _b[SPECIAL_PROPERTIES.V_IF] = (0, helpers_1.invertBooleanExpression)(ifValue), _b)), function (block) { return (0, exports.blockToVue)(block, options); });
169
- var childIfValue = (0, function_1.pipe)(((_h = firstChild.bindings.when) === null || _h === void 0 ? void 0 : _h.code) || '', helpers_1.invertBooleanExpression);
170
- var elseIfString = (0, function_1.pipe)(childElseBlock, (0, helpers_1.addPropertiesToJson)((_c = {}, _c[SPECIAL_PROPERTIES.V_ELSE_IF] = childIfValue, _c)), function (block) { return (0, exports.blockToVue)(block, options); });
171
- var firstChildOfFirstChild = firstChild.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
172
- var elseString = firstChildOfFirstChild
173
- ? (0, function_1.pipe)(firstChildOfFirstChild, (0, helpers_1.addPropertiesToJson)((_d = {}, _d[SPECIAL_PROPERTIES.V_ELSE] = '', _d)), function (block) { return (0, exports.blockToVue)(block, options); })
174
- : '';
175
- return "\n\n ".concat(ifString, "\n\n ").concat(elseIfString, "\n\n ").concat(elseString, "\n\n ");
176
- }
177
- else {
178
- var ifString = firstChild
179
- ? (0, function_1.pipe)(firstChild, (0, helpers_1.addPropertiesToJson)((_e = {}, _e[SPECIAL_PROPERTIES.V_IF] = ifValue, _e)), function (block) { return (0, exports.blockToVue)(block, options); })
180
- : '';
181
- var elseString = (0, is_mitosis_node_1.isMitosisNode)(elseBlock)
182
- ? (0, function_1.pipe)(elseBlock, (0, helpers_1.addPropertiesToJson)((_f = {}, _f[SPECIAL_PROPERTIES.V_ELSE] = '', _f)), function (block) {
183
- return (0, exports.blockToVue)(block, options);
184
- })
185
- : '';
186
- return "\n ".concat(ifString, "\n ").concat(elseString, "\n ");
187
- }
188
- }
56
+ return defaultShowTemplate;
189
57
  },
190
58
  Slot: function (json, options) {
191
59
  var _a, _b, _c;
@@ -42,12 +42,9 @@ function getContextInjectString(component, options) {
42
42
  }
43
43
  var generateComponentImport = function (options) {
44
44
  return function (componentName) {
45
- if (options.vueVersion >= 3 && options.asyncComponentImports) {
45
+ if (options.asyncComponentImports) {
46
46
  return "'".concat(componentName, "': defineAsyncComponent(").concat(componentName, ")");
47
47
  }
48
- else if (options.vueVersion === 2) {
49
- return "'".concat((0, helpers_1.mapMitosisComponentToKebabCase)(componentName), "': ").concat(componentName);
50
- }
51
48
  else {
52
49
  return "'".concat(componentName, "': ").concat(componentName);
53
50
  }
@@ -1,11 +1,6 @@
1
- import { OmitObj } from '../../helpers/typescript';
2
1
  import { BaseTranspilerOptions } from '../../types/transpiler';
3
- export type VueVersion = 2 | 3;
4
2
  export type Api = 'options' | 'composition';
5
- interface VueVersionOpt {
6
- vueVersion: VueVersion;
7
- }
8
- export interface ToVueOptions extends BaseTranspilerOptions, VueVersionOpt {
3
+ export interface ToVueOptions extends BaseTranspilerOptions {
9
4
  cssNamespace?: () => string;
10
5
  namePrefix?: (path: string) => string;
11
6
  asyncComponentImports?: boolean;
@@ -13,5 +8,3 @@ export interface ToVueOptions extends BaseTranspilerOptions, VueVersionOpt {
13
8
  api: Api;
14
9
  convertClassStringToObject?: boolean;
15
10
  }
16
- export type VueOptsWithoutVersion = OmitObj<ToVueOptions, VueVersionOpt>;
17
- export {};
@@ -1,3 +1,3 @@
1
- import { VueOptsWithoutVersion } from './types';
2
- export declare const componentToVue2: (vueOptions?: VueOptsWithoutVersion) => import("../../types/transpiler").Transpiler<string>;
3
- export declare const componentToVue3: (vueOptions?: VueOptsWithoutVersion) => import("../../types/transpiler").Transpiler<string>;
1
+ import { TranspilerGenerator } from '../../types/transpiler';
2
+ import { ToVueOptions } from './types';
3
+ export declare const componentToVue: TranspilerGenerator<Partial<ToVueOptions>>;
@@ -3,17 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
- var __assign = (this && this.__assign) || function () {
7
- __assign = Object.assign || function(t) {
8
- for (var s, i = 1, n = arguments.length; i < n; i++) {
9
- s = arguments[i];
10
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
- t[p] = s[p];
12
- }
13
- return t;
14
- };
15
- return __assign.apply(this, arguments);
16
- };
17
6
  var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
18
7
  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
19
8
  if (ar || !(i in from)) {
@@ -27,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
16
  return (mod && mod.__esModule) ? mod : { "default": mod };
28
17
  };
29
18
  Object.defineProperty(exports, "__esModule", { value: true });
30
- exports.componentToVue3 = exports.componentToVue2 = void 0;
19
+ exports.componentToVue = void 0;
31
20
  var babel_transform_1 = require("../../helpers/babel-transform");
32
21
  var bindings_1 = require("../../helpers/bindings");
33
22
  var dedent_1 = require("../../helpers/dedent");
@@ -106,7 +95,6 @@ var onUpdatePlugin = function (options) { return ({
106
95
  },
107
96
  }); };
108
97
  var BASE_OPTIONS = {
109
- vueVersion: 2,
110
98
  api: 'options',
111
99
  defineComponent: true,
112
100
  };
@@ -118,7 +106,7 @@ var componentToVue = function (userOptions) {
118
106
  // Make a copy we can safely mutate, similar to babel's toolchain can be used
119
107
  var component = (0, fast_clone_1.fastClone)(_component);
120
108
  var options = (0, merge_options_1.initializeOptions)({
121
- target: (userOptions === null || userOptions === void 0 ? void 0 : userOptions.vueVersion) === 2 ? 'vue2' : 'vue3',
109
+ target: 'vue',
122
110
  component: component,
123
111
  defaults: BASE_OPTIONS,
124
112
  userOptions: userOptions,
@@ -199,7 +187,7 @@ var componentToVue = function (userOptions) {
199
187
  var getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'getter'; }));
200
188
  // import from vue
201
189
  var vueImports = [];
202
- if (options.vueVersion >= 3 && options.asyncComponentImports) {
190
+ if (options.asyncComponentImports) {
203
191
  vueImports.push('defineAsyncComponent');
204
192
  }
205
193
  if (options.api === 'options' && options.defineComponent) {
@@ -261,14 +249,7 @@ var componentToVue = function (userOptions) {
261
249
  return str;
262
250
  };
263
251
  };
264
- var componentToVue2 = function (vueOptions) {
265
- return componentToVue(__assign(__assign({}, vueOptions), { vueVersion: 2 }));
266
- };
267
- exports.componentToVue2 = componentToVue2;
268
- var componentToVue3 = function (vueOptions) {
269
- return componentToVue(__assign(__assign({}, vueOptions), { vueVersion: 3 }));
270
- };
271
- exports.componentToVue3 = componentToVue3;
252
+ exports.componentToVue = componentToVue;
272
253
  // Remove unused artifacts like empty script or style tags
273
254
  var removePatterns = [
274
255
  "<script>\nexport default {};\n</script>",
@@ -64,8 +64,6 @@ var getComponentFileExtensionForTarget = function (args) {
64
64
  case 'swift':
65
65
  return '.swift';
66
66
  case 'vue':
67
- case 'vue2':
68
- case 'vue3':
69
67
  return '.vue';
70
68
  case 'webcomponent':
71
69
  return '.ts';
@@ -6,9 +6,6 @@ var process_code_1 = require("./process-code");
6
6
  var getBlockForTarget = function (_a) {
7
7
  var target = _a.target, targetBlock = _a.targetBlock;
8
8
  switch (target) {
9
- case 'vue3':
10
- case 'vue':
11
- return targetBlock['vue3'] || targetBlock['vue'] || targetBlock['default'];
12
9
  default:
13
10
  return targetBlock[target] || targetBlock['default'];
14
11
  }
@@ -28,7 +28,7 @@ type ImportArgs = {
28
28
  export declare const renderImport: ({ theImport, target, asyncComponentImports, preserveFileExtensions, component, componentsUsed, importMapper, explicitImportFileExtension, }: ImportArgs & {
29
29
  theImport: MitosisImport;
30
30
  }) => string;
31
- export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, preserveFileExtensions, componentsUsed, importMapper, explicitImportFileExtension, }: Omit<ImportArgs, "asyncComponentImports" | "explicitImportFileExtension"> & Partial<Pick<ImportArgs, "asyncComponentImports" | "explicitImportFileExtension">> & {
31
+ export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, preserveFileExtensions, componentsUsed, importMapper, explicitImportFileExtension, }: Omit<ImportArgs, "explicitImportFileExtension" | "asyncComponentImports"> & Partial<Pick<ImportArgs, "explicitImportFileExtension" | "asyncComponentImports">> & {
32
32
  component: MitosisComponent;
33
33
  target: Target;
34
34
  excludeMitosisComponents?: boolean | undefined;
@@ -11,6 +11,7 @@ type BuilderToMitosisOptions = {
11
11
  };
12
12
  includeBuilderExtras?: boolean;
13
13
  preserveTextBlocks?: boolean;
14
+ includeSpecialBindings?: boolean;
14
15
  };
15
16
  export declare const builderElementToMitosisNode: (block: BuilderElement, options: BuilderToMitosisOptions, _internalOptions?: InternalOptions) => MitosisNode;
16
17
  /**
@@ -417,6 +417,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
417
417
  var _a;
418
418
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
419
419
  if (_internalOptions === void 0) { _internalOptions = {}; }
420
+ var _x = options.includeSpecialBindings, includeSpecialBindings = _x === void 0 ? true : _x;
420
421
  if (((_b = block.component) === null || _b === void 0 ? void 0 : _b.name) === 'Core:Fragment') {
421
422
  block.component.name = 'Fragment';
422
423
  }
@@ -501,9 +502,9 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
501
502
  }
502
503
  var useKey = key.replace(/^(component\.)?options\./, '');
503
504
  if (!useKey.includes('.')) {
504
- bindings[useKey] = {
505
+ bindings[useKey] = (0, bindings_1.createSingleBinding)({
505
506
  code: blockBindings[key].code || blockBindings[key],
506
- };
507
+ });
507
508
  }
508
509
  else if (useKey.includes('style') && useKey.includes('.')) {
509
510
  var styleProperty = useKey.split('.')[1];
@@ -538,19 +539,18 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
538
539
  }
539
540
  return true;
540
541
  })
541
- .map(function (item) { return (0, exports.builderElementToMitosisNode)(item, options); });
542
- children.push({
543
- '@type': '@builder.io/mitosis/node',
544
- name: 'Slot',
545
- meta: {},
546
- scope: {},
547
- bindings: {},
548
- properties: { name: key },
549
- children: childrenElements,
542
+ .map(function (item) {
543
+ var node = (0, exports.builderElementToMitosisNode)(item, __assign(__assign({}, options), { includeSpecialBindings: false }));
544
+ // For now, stringify to Mitosis nodes even though that only really works in React, due to syntax overlap.
545
+ // the correct long term solution is to hold on to the Mitosis Node, and have a plugin for each framework
546
+ // which processes any Mitosis nodes set into the attribute and moves them as slots when relevant (Svelte/Vue)
547
+ return (0, __1.blockToMitosis)(node, {}, null);
550
548
  });
549
+ var strVal = childrenElements.length === 1 ? childrenElements[0] : "<>".concat(childrenElements.join(''), "</>");
550
+ bindings[key] = (0, bindings_1.createSingleBinding)({ code: strVal });
551
551
  }
552
552
  else {
553
- bindings[key] = { code: json5_1.default.stringify(value) };
553
+ bindings[key] = (0, bindings_1.createSingleBinding)({ code: json5_1.default.stringify(value) });
554
554
  }
555
555
  }
556
556
  }
@@ -564,19 +564,19 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
564
564
  if (binding.startsWith('component.options') || binding.startsWith('options')) {
565
565
  var value = blockBindings[binding];
566
566
  var useKey = binding.replace(/^(component\.options\.|options\.)/, '');
567
- bindings[useKey] = { code: value };
567
+ bindings[useKey] = (0, bindings_1.createSingleBinding)({ code: value });
568
568
  }
569
569
  }
570
570
  var node = (0, create_mitosis_node_1.createMitosisNode)({
571
571
  name: ((_r = (_q = block.component) === null || _q === void 0 ? void 0 : _q.name) === null || _r === void 0 ? void 0 : _r.replace(/[^a-z0-9]/gi, '')) ||
572
572
  block.tagName ||
573
573
  (block.linkUrl ? 'a' : 'div'),
574
- properties: __assign(__assign(__assign({}, (block.component && { $tagName: block.tagName })), (block.class && { class: block.class })), properties),
574
+ properties: __assign(__assign(__assign({}, (block.component && includeSpecialBindings && { $tagName: block.tagName })), (block.class && { class: block.class })), properties),
575
575
  bindings: __assign(__assign(__assign(__assign({}, bindings), actionBindings), (styleString && {
576
- style: { code: styleString },
576
+ style: (0, bindings_1.createSingleBinding)({ code: styleString }),
577
577
  })), (css &&
578
578
  Object.keys(css).length && {
579
- css: { code: JSON.stringify(css) },
579
+ css: (0, bindings_1.createSingleBinding)({ code: JSON.stringify(css) }),
580
580
  })),
581
581
  });
582
582
  // Has single text node child
@@ -13,9 +13,7 @@ export declare const targets: {
13
13
  readonly swift: import(".").TranspilerGenerator<import(".").BaseTranspilerOptions>;
14
14
  readonly template: import(".").TranspilerGenerator<import("./generators/template").ToTemplateOptions>;
15
15
  readonly webcomponent: import(".").TranspilerGenerator<import("./generators/html").ToHtmlOptions>;
16
- readonly vue: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler<string>;
17
- readonly vue2: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler<string>;
18
- readonly vue3: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler<string>;
16
+ readonly vue: import(".").TranspilerGenerator<Partial<import("./generators/vue").ToVueOptions>>;
19
17
  readonly stencil: import(".").TranspilerGenerator<import("./generators/stencil").ToStencilOptions>;
20
18
  readonly qwik: import(".").TranspilerGenerator<import("./generators/qwik/component-generator").ToQwikOptions>;
21
19
  readonly marko: import(".").TranspilerGenerator<import("./generators/marko").ToMarkoOptions>;
@@ -35,9 +35,7 @@ exports.targets = {
35
35
  swift: swift_ui_1.componentToSwift,
36
36
  template: template_1.componentToTemplate,
37
37
  webcomponent: html_1.componentToCustomElement,
38
- vue: vue_1.componentToVue3,
39
- vue2: vue_1.componentToVue2,
40
- vue3: vue_1.componentToVue3,
38
+ vue: vue_1.componentToVue,
41
39
  stencil: stencil_1.componentToStencil,
42
40
  qwik: qwik_1.componentToQwik,
43
41
  marko: marko_1.componentToMarko,
package/package.json CHANGED
@@ -22,7 +22,7 @@
22
22
  "name": "Builder.io",
23
23
  "url": "https://www.builder.io"
24
24
  },
25
- "version": "0.0.146",
25
+ "version": "0.1.0",
26
26
  "homepage": "https://github.com/BuilderIO/mitosis",
27
27
  "main": "./dist/src/index.js",
28
28
  "exports": {