@builder.io/mitosis 0.0.56-89 → 0.0.56-91

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.
@@ -171,6 +171,9 @@ var blockToAngular = function (json, options, blockOptions) {
171
171
  else if (BINDINGS_MAPPER[key]) {
172
172
  str += " [".concat(BINDINGS_MAPPER[key], "]=\"").concat(useValue, "\" ");
173
173
  }
174
+ else if (key.includes('-')) {
175
+ str += " [attr.".concat(key, "]=\"").concat(useValue, "\" ");
176
+ }
174
177
  else {
175
178
  str += " [".concat(key, "]=\"").concat(useValue, "\" ");
176
179
  }
@@ -28,6 +28,17 @@ var get_refs_1 = require("../../helpers/get-refs");
28
28
  var lodash_1 = require("lodash");
29
29
  var is_upper_case_1 = require("../../helpers/is-upper-case");
30
30
  var has_1 = require("../../helpers/has");
31
+ var getCustomTagName = function (name, options) {
32
+ if (!name || !(0, is_upper_case_1.isUpperCase)(name[0])) {
33
+ return name;
34
+ }
35
+ var kebabCaseName = (0, dash_case_1.dashCase)(name);
36
+ if (!kebabCaseName.includes('-')) {
37
+ // TODO: option to choose your prefix
38
+ return 'my-' + kebabCaseName;
39
+ }
40
+ return kebabCaseName;
41
+ };
31
42
  var blockToLit = function (json, options) {
32
43
  var _a, _b, _c, _d, _e;
33
44
  if (options === void 0) { options = {}; }
@@ -50,7 +61,7 @@ var blockToLit = function (json, options) {
50
61
  .join('\n'), "`\n : ").concat(!json.meta.else ? 'null' : "html`".concat(blockToLit(json.meta.else, options), "`"), "}");
51
62
  }
52
63
  var str = '';
53
- var tagName = (0, is_upper_case_1.isUpperCase)(json.name[0]) ? (0, dash_case_1.dashCase)(json.name) : json.name;
64
+ var tagName = getCustomTagName(json.name, options);
54
65
  str += "<".concat(tagName, " ");
55
66
  var classString = (0, collect_class_string_1.collectClassString)(json);
56
67
  if (classString) {
@@ -164,9 +175,9 @@ var componentToLit = function (options) {
164
175
  html = html.replace(/\n{3,}/g, '\n\n');
165
176
  }
166
177
  }
167
- var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n import { LitElement, html, css } from 'lit';\n import { customElement, property, state } from 'lit/decorators.js';\n\n ", "\n ", "\n\n @customElement('", "')\n export default class ", " extends LitElement {\n ", "\n\n ", "\n \n \n ", "\n\n ", "\n ", "\n \n ", "\n ", "\n ", "\n \n render() {\n return html`\n ", "\n `\n }\n }\n "], ["\n ", "\n import { LitElement, html, css } from 'lit';\n import { customElement, property, state } from 'lit/decorators.js';\n\n ", "\n ", "\n\n @customElement('", "')\n export default class ", " extends LitElement {\n ", "\n\n ", "\n \n \n ", "\n\n ", "\n ", "\n \n ", "\n ", "\n ", "\n \n render() {\n return html\\`\n ", "\n \\`\n }\n }\n "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'lit' }), json.types ? json.types.join('\n') : '', hasSpread
178
+ var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n import { LitElement, html, css } from 'lit';\n import { customElement, property, state, query } from 'lit/decorators.js';\n\n ", "\n ", "\n\n @customElement('", "')\n export default class ", " extends LitElement {\n ", "\n\n ", "\n \n \n ", "\n\n ", "\n ", "\n \n ", "\n ", "\n ", "\n \n render() {\n return html`\n ", "\n `\n }\n }\n "], ["\n ", "\n import { LitElement, html, css } from 'lit';\n import { customElement, property, state, query } from 'lit/decorators.js';\n\n ", "\n ", "\n\n @customElement('", "')\n export default class ", " extends LitElement {\n ", "\n\n ", "\n \n \n ", "\n\n ", "\n ", "\n \n ", "\n ", "\n ", "\n \n render() {\n return html\\`\n ", "\n \\`\n }\n }\n "])), (0, render_imports_1.renderPreComponent)({ component: json, target: 'lit' }), json.types ? json.types.join('\n') : '', hasSpread
168
179
  ? "\n const spread = (properties) =>\n directive((part) => {\n for (const property in properties) {\n const value = properties[attr];\n part.element[property] = value;\n }\n });\n "
169
- : '', ((_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName) || (0, dash_case_1.dashCase)(json.name), json.name, css.length
180
+ : '', ((_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName) || getCustomTagName(json.name, options), json.name, css.length
170
181
  ? "static styles = css`\n ".concat((0, indent_1.indent)(css, 8), "`;")
171
182
  : '', Array.from(domRefs)
172
183
  .map(function (refName) { return "\n @query('[ref=\"".concat(refName, "\"]')\n ").concat((0, lodash_1.camelCase)(refName), "!: HTMLElement;\n "); })
@@ -62,7 +62,7 @@ function getStatePropertyNames(json) {
62
62
  return Object.keys(json.state).filter(function (key) { var _a; return ((_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; });
63
63
  }
64
64
  var blockToMarko = function (json, options) {
65
- var _a, _b, _c, _d, _e;
65
+ var _a, _b, _c, _d, _e, _f;
66
66
  if (json.properties._text) {
67
67
  return json.properties._text;
68
68
  }
@@ -73,20 +73,21 @@ var blockToMarko = function (json, options) {
73
73
  return json.children.map(function (child) { return blockToMarko(child, options); }).join('\n');
74
74
  }
75
75
  if (json.name === 'For') {
76
- return "<for|".concat(json.properties._forName, "| of=(").concat(processBinding(options.component, (_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code), ")>\n ").concat(json.children
76
+ var forArguments = (((_c = json === null || json === void 0 ? void 0 : json.scope) === null || _c === void 0 ? void 0 : _c.For) || []).join(',');
77
+ return "<for|".concat(forArguments, "| of=(").concat(processBinding(options.component, (_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code), ")>\n ").concat(json.children
77
78
  .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
78
79
  .map(function (item) { return blockToMarko(item, options); })
79
80
  .join('\n'), "\n </for>");
80
81
  }
81
82
  else if (json.name === 'Show') {
82
- return "<if(".concat(processBinding(options.component, (_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code), ")>\n ").concat(json.children
83
+ return "<if(".concat(processBinding(options.component, (_e = json.bindings.when) === null || _e === void 0 ? void 0 : _e.code), ")>\n ").concat(json.children
83
84
  .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
84
85
  .map(function (item) { return blockToMarko(item, options); })
85
86
  .join('\n'), "</if>\n ").concat(!json.meta.else ? '' : "<else>".concat(blockToMarko(json.meta.else, options), "</else>"));
86
87
  }
87
88
  var str = '';
88
89
  str += "<".concat(json.name, " ");
89
- if ((_e = json.bindings._spread) === null || _e === void 0 ? void 0 : _e.code) {
90
+ if ((_f = json.bindings._spread) === null || _f === void 0 ? void 0 : _f.code) {
90
91
  str += " ...(".concat(json.bindings._spread.code, ") ");
91
92
  }
92
93
  for (var key in json.properties) {
@@ -94,7 +95,7 @@ var blockToMarko = function (json, options) {
94
95
  str += " ".concat(key, "=\"").concat(value, "\" ");
95
96
  }
96
97
  for (var key in json.bindings) {
97
- var _f = json.bindings[key], code = _f.code, _g = _f.arguments, cusArgs = _g === void 0 ? ['event'] : _g;
98
+ var _g = json.bindings[key], code = _g.code, _h = _g.arguments, cusArgs = _h === void 0 ? ['event'] : _h;
98
99
  if (key === '_spread' || key === '_forName') {
99
100
  continue;
100
101
  }