@builder.io/mitosis 0.0.56-13 → 0.0.56-14
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/basic-context.raw.d.ts +1 -0
- package/dist/src/__tests__/data/basic-context.raw.jsx +29 -0
- package/dist/src/__tests__/data/basic-custom-mitosis-package.raw.d.ts +1 -0
- package/dist/src/__tests__/data/basic-custom-mitosis-package.raw.jsx +12 -0
- package/dist/src/__tests__/data/basic-forwardRef-metadata.raw.d.ts +5 -0
- package/dist/src/__tests__/data/basic-forwardRef-metadata.raw.jsx +17 -0
- package/dist/src/__tests__/data/basic-forwardRef.raw.d.ts +5 -0
- package/dist/src/__tests__/data/basic-forwardRef.raw.jsx +14 -0
- package/dist/src/__tests__/data/basic-onChange.raw.d.ts +1 -0
- package/dist/src/__tests__/data/basic-onChange.raw.jsx +17 -0
- package/dist/src/__tests__/data/basic-onUpdate-deps.raw.d.ts +4 -0
- package/dist/src/__tests__/data/basic-onUpdate-deps.raw.jsx +25 -0
- package/dist/src/__tests__/data/basic-onUpdate-return.raw.d.ts +1 -0
- package/dist/src/__tests__/data/basic-onUpdate-return.raw.jsx +24 -0
- package/dist/src/__tests__/data/basic-ref-assignment.raw.d.ts +4 -0
- package/dist/src/__tests__/data/basic-ref-assignment.raw.jsx +15 -0
- package/dist/src/__tests__/data/basic-ref-usePrevious.raw.d.ts +5 -0
- package/dist/src/__tests__/data/basic-ref-usePrevious.raw.jsx +35 -0
- package/dist/src/__tests__/data/basic-ref.raw.d.ts +4 -0
- package/dist/src/__tests__/data/basic-ref.raw.jsx +36 -0
- package/dist/src/__tests__/data/basic.raw.d.ts +3 -0
- package/dist/src/__tests__/data/basic.raw.jsx +5 -1
- package/dist/src/__tests__/data/blocks/custom-code.raw.jsx +1 -1
- package/dist/src/__tests__/data/blocks/embed.raw.jsx +1 -1
- package/dist/src/__tests__/data/blocks/form.raw.jsx +1 -1
- package/dist/src/__tests__/data/blocks/onInit.raw.d.ts +8 -1
- package/dist/src/__tests__/data/blocks/onInit.raw.jsx +13 -3
- package/dist/src/__tests__/data/types/component-props-interface.raw.d.ts +6 -0
- package/dist/src/__tests__/data/types/component-props-interface.raw.jsx +6 -0
- package/dist/src/__tests__/data/types/component-props-type.raw.d.ts +6 -0
- package/dist/src/__tests__/data/types/component-props-type.raw.jsx +6 -0
- package/dist/src/__tests__/data/types/preserve-typing.raw.d.ts +8 -0
- package/dist/src/__tests__/data/types/preserve-typing.raw.jsx +6 -0
- package/dist/src/generators/angular.js +49 -14
- package/dist/src/generators/html.js +198 -99
- package/dist/src/generators/mitosis.js +28 -9
- package/dist/src/generators/react.d.ts +3 -1
- package/dist/src/generators/react.js +68 -32
- package/dist/src/generators/solid.js +5 -2
- package/dist/src/generators/svelte.js +12 -2
- package/dist/src/generators/vue.js +21 -0
- package/dist/src/helpers/create-mitosis-component.d.ts +1 -1
- package/dist/src/helpers/create-mitosis-component.js +1 -1
- package/dist/src/helpers/get-bindings.d.ts +2 -0
- package/dist/src/helpers/get-bindings.js +18 -0
- package/dist/src/helpers/get-props-ref.d.ts +2 -0
- package/dist/src/helpers/get-props-ref.js +32 -0
- package/dist/src/helpers/has-bindings-text.d.ts +2 -0
- package/dist/src/helpers/has-bindings-text.js +21 -0
- package/dist/src/helpers/has-stateful-dom.d.ts +2 -0
- package/dist/src/helpers/has-stateful-dom.js +21 -0
- package/dist/src/helpers/is-html-attribute.d.ts +1 -1
- package/dist/src/helpers/is-html-attribute.js +2 -1
- package/dist/src/helpers/map-refs.js +4 -1
- package/dist/src/helpers/render-imports.d.ts +3 -1
- package/dist/src/helpers/render-imports.js +8 -2
- package/dist/src/helpers/strip-state-and-props-refs.d.ts +2 -1
- package/dist/src/helpers/strip-state-and-props-refs.js +3 -2
- package/dist/src/index.d.ts +2 -2
- package/dist/src/index.js +1 -1
- package/dist/src/parsers/builder.d.ts +23 -23
- package/dist/src/parsers/jsx.d.ts +2 -1
- package/dist/src/parsers/jsx.js +145 -15
- package/dist/src/symbols/symbol-processor.js +3 -3
- package/dist/src/types/mitosis-component.d.ts +30 -10
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -3
|
@@ -29,6 +29,9 @@ var lodash_1 = require("lodash");
|
|
|
29
29
|
var lodash_2 = require("lodash");
|
|
30
30
|
var standalone_1 = require("prettier/standalone");
|
|
31
31
|
var has_props_1 = require("../helpers/has-props");
|
|
32
|
+
var has_stateful_dom_1 = require("../helpers/has-stateful-dom");
|
|
33
|
+
var get_refs_1 = require("../helpers/get-refs");
|
|
34
|
+
var map_refs_1 = require("../helpers/map-refs");
|
|
32
35
|
var traverse_1 = __importDefault(require("traverse"));
|
|
33
36
|
var babel_transform_1 = require("../helpers/babel-transform");
|
|
34
37
|
var collect_styles_1 = require("../helpers/collect-styles");
|
|
@@ -36,11 +39,12 @@ var dash_case_1 = require("../helpers/dash-case");
|
|
|
36
39
|
var fast_clone_1 = require("../helpers/fast-clone");
|
|
37
40
|
var get_state_object_string_1 = require("../helpers/get-state-object-string");
|
|
38
41
|
var has_component_1 = require("../helpers/has-component");
|
|
42
|
+
var has_bindings_text_1 = require("../helpers/has-bindings-text");
|
|
39
43
|
var is_component_1 = require("../helpers/is-component");
|
|
40
44
|
var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
|
|
41
45
|
var is_html_attribute_1 = require("../helpers/is-html-attribute");
|
|
42
|
-
var is_valid_attribute_name_1 = require("../helpers/is-valid-attribute-name");
|
|
43
46
|
var get_props_1 = require("../helpers/get-props");
|
|
47
|
+
var get_props_ref_1 = require("../helpers/get-props-ref");
|
|
44
48
|
var get_prop_functions_1 = require("../helpers/get-prop-functions");
|
|
45
49
|
var jsx_1 = require("../parsers/jsx");
|
|
46
50
|
var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
|
|
@@ -54,6 +58,7 @@ var isAttribute = function (key) {
|
|
|
54
58
|
};
|
|
55
59
|
var ATTRIBUTE_KEY_EXCEPTIONS_MAP = {
|
|
56
60
|
class: 'className',
|
|
61
|
+
innerHtml: 'innerHTML',
|
|
57
62
|
};
|
|
58
63
|
var updateKeyIfException = function (key) {
|
|
59
64
|
var _a;
|
|
@@ -66,16 +71,25 @@ var generateSetElementAttributeCode = function (key, tagName, useValue, options,
|
|
|
66
71
|
return (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.props(key, useValue, options);
|
|
67
72
|
}
|
|
68
73
|
var isKey = key === 'key';
|
|
69
|
-
var
|
|
74
|
+
var ignoreKey = /^(innerHTML|key|class|value)$/.test(key);
|
|
75
|
+
var isTextarea = key === 'value' && tagName === 'textarea';
|
|
76
|
+
var isDataSet = /^data-/.test(key);
|
|
77
|
+
var isComponent = Boolean(meta === null || meta === void 0 ? void 0 : meta.component);
|
|
70
78
|
var isHtmlAttr = (0, is_html_attribute_1.isHtmlAttribute)(key, tagName);
|
|
71
|
-
var setAttr = !
|
|
72
|
-
return
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
?
|
|
78
|
-
:
|
|
79
|
+
var setAttr = !ignoreKey && (isHtmlAttr || !isTextarea || isAttribute(key));
|
|
80
|
+
return [
|
|
81
|
+
// is html attribute or dash-case
|
|
82
|
+
setAttr ? ";el.setAttribute(\"".concat(key, "\", ").concat(useValue, ");") : '',
|
|
83
|
+
// not attr or dataset or html attr
|
|
84
|
+
!setAttr || !(isHtmlAttr || isDataSet || !isComponent || isKey)
|
|
85
|
+
? "el.".concat(updateKeyIfException((0, lodash_1.camelCase)(key)), " = ").concat(useValue, ";")
|
|
86
|
+
: '',
|
|
87
|
+
// is component but not html attribute
|
|
88
|
+
isComponent && !isHtmlAttr
|
|
89
|
+
? // custom-element is created but we're in the middle of the update loop
|
|
90
|
+
"\n if (el.props) {\n ;el.props.".concat((0, lodash_1.camelCase)(key), " = ").concat(useValue, ";\n if (el.update) {\n ;el.update();\n }\n } else {\n ;el.props = {};\n ;el.props.").concat((0, lodash_1.camelCase)(key), " = ").concat(useValue, ";\n }\n ")
|
|
91
|
+
: '',
|
|
92
|
+
].join('\n');
|
|
79
93
|
};
|
|
80
94
|
var addUpdateAfterSet = function (json, options) {
|
|
81
95
|
(0, traverse_1.default)(json).forEach(function (item) {
|
|
@@ -136,9 +150,17 @@ var getId = function (json, options) {
|
|
|
136
150
|
options.namesMap[name] = newNameNum;
|
|
137
151
|
return "".concat(name).concat(options.prefix ? "-".concat(options.prefix) : '').concat(name !== json.name && newNameNum === 1 ? '' : "-".concat(newNameNum));
|
|
138
152
|
};
|
|
153
|
+
var createGlobalId = function (name, options) {
|
|
154
|
+
var newNameNum = (options.namesMap[name] || 0) + 1;
|
|
155
|
+
options.namesMap[name] = newNameNum;
|
|
156
|
+
return "".concat(name).concat(options.prefix ? "-".concat(options.prefix) : '', "-").concat(newNameNum);
|
|
157
|
+
};
|
|
139
158
|
// TODO: overloaded function
|
|
140
|
-
var updateReferencesInCode = function (code, options) {
|
|
159
|
+
var updateReferencesInCode = function (code, options, blockOptions) {
|
|
141
160
|
var _a, _b;
|
|
161
|
+
if (blockOptions === void 0) { blockOptions = {}; }
|
|
162
|
+
var contextVars = blockOptions.contextVars || [];
|
|
163
|
+
var context = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.context) || 'this.';
|
|
142
164
|
if ((_a = options === null || options === void 0 ? void 0 : options.experimental) === null || _a === void 0 ? void 0 : _a.updateReferencesInCode) {
|
|
143
165
|
return (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.updateReferencesInCode(code, options, {
|
|
144
166
|
stripStateAndPropsRefs: strip_state_and_props_refs_1.stripStateAndPropsRefs,
|
|
@@ -148,12 +170,15 @@ var updateReferencesInCode = function (code, options) {
|
|
|
148
170
|
return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
|
|
149
171
|
includeProps: false,
|
|
150
172
|
includeState: true,
|
|
151
|
-
replaceWith: '
|
|
173
|
+
replaceWith: context + 'state.',
|
|
174
|
+
context: context,
|
|
152
175
|
}), {
|
|
153
176
|
// TODO: replace with `this.` and add setters that call this.update()
|
|
154
177
|
includeProps: true,
|
|
155
178
|
includeState: false,
|
|
156
|
-
replaceWith: '
|
|
179
|
+
replaceWith: context + 'props.',
|
|
180
|
+
contextVars: contextVars,
|
|
181
|
+
context: context,
|
|
157
182
|
});
|
|
158
183
|
}
|
|
159
184
|
return code;
|
|
@@ -166,31 +191,23 @@ var addOnChangeJs = function (id, options, code) {
|
|
|
166
191
|
};
|
|
167
192
|
// TODO: spread support
|
|
168
193
|
var blockToHtml = function (json, options, blockOptions) {
|
|
169
|
-
var _a, _b, _c, _d, _e, _f, _g
|
|
194
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
170
195
|
if (blockOptions === void 0) { blockOptions = {}; }
|
|
196
|
+
var ComponentName = blockOptions.ComponentName;
|
|
171
197
|
var scopeVars = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.scopeVars) || [];
|
|
172
198
|
var childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
|
|
173
199
|
var hasData = Object.keys(json.bindings).length;
|
|
200
|
+
var hasDomState = /input|textarea|select/.test(json.name);
|
|
174
201
|
var elId = '';
|
|
175
202
|
if (hasData) {
|
|
176
203
|
elId = getId(json, options);
|
|
177
|
-
json.properties['data-
|
|
178
|
-
}
|
|
179
|
-
if ((_a = options === null || options === void 0 ? void 0 : options.experimental) === null || _a === void 0 ? void 0 : _a.getId) {
|
|
180
|
-
elId = (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.getId(elId, json, options, {
|
|
181
|
-
hasData: hasData,
|
|
182
|
-
getId: getId,
|
|
183
|
-
});
|
|
184
|
-
json.properties['data-name'] = (_c = options === null || options === void 0 ? void 0 : options.experimental) === null || _c === void 0 ? void 0 : _c.dataName(elId, json, options, {
|
|
185
|
-
hasData: hasData,
|
|
186
|
-
getId: getId,
|
|
187
|
-
});
|
|
204
|
+
json.properties['data-el'] = elId;
|
|
188
205
|
}
|
|
189
|
-
if (
|
|
190
|
-
|
|
206
|
+
if (hasDomState) {
|
|
207
|
+
json.properties['data-dom-state'] = createGlobalId((ComponentName ? ComponentName + '-' : '') + json.name, options);
|
|
191
208
|
}
|
|
192
209
|
if (mappers[json.name]) {
|
|
193
|
-
return mappers[json.name](json, options,
|
|
210
|
+
return mappers[json.name](json, options, blockOptions);
|
|
194
211
|
}
|
|
195
212
|
if ((0, is_children_1.default)(json)) {
|
|
196
213
|
return "<slot></slot>";
|
|
@@ -198,47 +215,42 @@ var blockToHtml = function (json, options, blockOptions) {
|
|
|
198
215
|
if (json.properties._text) {
|
|
199
216
|
return json.properties._text;
|
|
200
217
|
}
|
|
201
|
-
if ((
|
|
218
|
+
if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
|
|
202
219
|
// TO-DO: textContent might be better performance-wise
|
|
203
220
|
addOnChangeJs(elId, options, "\n ".concat(addScopeVars(scopeVars, json.bindings._text.code, function (scopeVar) {
|
|
204
|
-
return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "
|
|
221
|
+
return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(el, \"").concat(scopeVar, "\");");
|
|
205
222
|
}), "\n ").concat(options.format === 'class' ? 'this.' : '', "renderTextNode(el, ").concat(json.bindings._text.code, ");"));
|
|
206
|
-
return "<template data-
|
|
223
|
+
return "<template data-el=\"".concat(elId, "\"><!-- ").concat((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code, " --></template>");
|
|
207
224
|
}
|
|
208
225
|
var str = '';
|
|
209
226
|
if (json.name === 'For') {
|
|
210
|
-
var forArguments = ((
|
|
227
|
+
var forArguments = ((_c = json === null || json === void 0 ? void 0 : json.scope) === null || _c === void 0 ? void 0 : _c.For) || [];
|
|
211
228
|
var localScopeVars_1 = __spreadArray(__spreadArray([], scopeVars, true), forArguments, true);
|
|
212
229
|
var argsStr = forArguments.map(function (arg) { return "\"".concat(arg, "\""); }).join(',');
|
|
213
230
|
addOnChangeJs(elId, options,
|
|
214
231
|
// TODO: be smarter about rendering, deleting old items and adding new ones by
|
|
215
232
|
// querying dom potentially
|
|
216
|
-
"\n let array = ".concat((
|
|
233
|
+
"\n let array = ".concat((_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code, ";\n ").concat(options.format === 'class' ? 'this.' : '', "renderLoop(el, array, ").concat(argsStr, ");\n "));
|
|
217
234
|
// TODO: decide on how to handle this...
|
|
218
|
-
str += "\n <template data-
|
|
235
|
+
str += "\n <template data-el=\"".concat(elId, "\">");
|
|
219
236
|
if (json.children) {
|
|
220
237
|
str += json.children
|
|
221
238
|
.map(function (item) {
|
|
222
|
-
return blockToHtml(item, options, {
|
|
223
|
-
scopeVars: localScopeVars_1,
|
|
224
|
-
childComponents: childComponents,
|
|
225
|
-
});
|
|
239
|
+
return blockToHtml(item, options, __assign(__assign({}, blockOptions), { scopeVars: localScopeVars_1 }));
|
|
226
240
|
})
|
|
227
241
|
.join('\n');
|
|
228
242
|
}
|
|
229
243
|
str += '</template>';
|
|
230
244
|
}
|
|
231
245
|
else if (json.name === 'Show') {
|
|
232
|
-
var whenCondition = ((
|
|
246
|
+
var whenCondition = ((_e = json.bindings.when) === null || _e === void 0 ? void 0 : _e.code).replace(/;$/, '');
|
|
233
247
|
addOnChangeJs(elId, options, "\n ".concat(addScopeVars(scopeVars, whenCondition, function (scopeVar) {
|
|
234
|
-
return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "
|
|
248
|
+
return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(el, \"").concat(scopeVar, "\");");
|
|
235
249
|
}), "\n const whenCondition = ").concat(whenCondition, ";\n if (whenCondition) {\n ").concat(options.format === 'class' ? 'this.' : '', "showContent(el)\n }\n "));
|
|
236
|
-
str += "<template data-
|
|
250
|
+
str += "<template data-el=\"".concat(elId, "\">");
|
|
237
251
|
if (json.children) {
|
|
238
252
|
str += json.children
|
|
239
|
-
.map(function (item) {
|
|
240
|
-
return blockToHtml(item, options, { scopeVars: scopeVars, childComponents: childComponents });
|
|
241
|
-
})
|
|
253
|
+
.map(function (item) { return blockToHtml(item, options, blockOptions); })
|
|
242
254
|
.join('\n');
|
|
243
255
|
}
|
|
244
256
|
str += '</template>';
|
|
@@ -272,11 +284,11 @@ var blockToHtml = function (json, options, blockOptions) {
|
|
|
272
284
|
var injectOnce = false;
|
|
273
285
|
var startInjectVar = '%%START_VARS%%';
|
|
274
286
|
for (var key in json.bindings) {
|
|
275
|
-
if (key === '_spread' || key === '
|
|
287
|
+
if (key === '_spread' || key === 'css') {
|
|
276
288
|
continue;
|
|
277
289
|
}
|
|
278
|
-
var value = (
|
|
279
|
-
var cusArg = ((
|
|
290
|
+
var value = (_f = json.bindings[key]) === null || _f === void 0 ? void 0 : _f.code;
|
|
291
|
+
var cusArg = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.arguments) || ['event'];
|
|
280
292
|
// TODO: proper babel transform to replace. Util for this
|
|
281
293
|
var useValue = value;
|
|
282
294
|
if (key.startsWith('on')) {
|
|
@@ -285,19 +297,22 @@ var blockToHtml = function (json, options, blockOptions) {
|
|
|
285
297
|
event_1 = 'input';
|
|
286
298
|
}
|
|
287
299
|
var fnName = (0, lodash_1.camelCase)("on-".concat(elId, "-").concat(event_1));
|
|
288
|
-
var codeContent = (0, remove_surrounding_block_1.removeSurroundingBlock)(updateReferencesInCode(useValue, options));
|
|
300
|
+
var codeContent = (0, remove_surrounding_block_1.removeSurroundingBlock)(updateReferencesInCode(useValue, options, blockOptions));
|
|
289
301
|
options.js += "\n // Event handler for '".concat(event_1, "' event on ").concat(elId, "\n ").concat(options.format === 'class'
|
|
290
302
|
? "this.".concat(fnName, " = (").concat(cusArg.join(','), ") => {")
|
|
291
303
|
: "function ".concat(fnName, " (").concat(cusArg.join(','), ") {"), "\n ").concat(addScopeVars(scopeVars, codeContent, function (scopeVar) {
|
|
292
|
-
return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "
|
|
304
|
+
return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(event.currentTarget, \"").concat(scopeVar, "\");");
|
|
293
305
|
}), "\n ").concat(codeContent, "\n }\n ");
|
|
294
306
|
var fnIdentifier = "".concat(options.format === 'class' ? 'this.' : '').concat(fnName);
|
|
295
307
|
addOnChangeJs(elId, options, "\n ;el.removeEventListener('".concat(event_1, "', ").concat(fnIdentifier, ");\n ;el.addEventListener('").concat(event_1, "', ").concat(fnIdentifier, ");\n "));
|
|
296
308
|
}
|
|
309
|
+
else if (key === 'ref') {
|
|
310
|
+
str += " data-ref=\"".concat(ComponentName, "-").concat(useValue, "\" ");
|
|
311
|
+
}
|
|
297
312
|
else {
|
|
298
313
|
if (key === 'style') {
|
|
299
314
|
addOnChangeJs(elId, options, "\n ".concat(addScopeVars(scopeVars, useValue, function (scopeVar) {
|
|
300
|
-
return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "
|
|
315
|
+
return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(el, \"").concat(scopeVar, "\");");
|
|
301
316
|
}), "\n ;Object.assign(el.style, ").concat(useValue, ");"));
|
|
302
317
|
}
|
|
303
318
|
else {
|
|
@@ -321,7 +336,7 @@ var blockToHtml = function (json, options, blockOptions) {
|
|
|
321
336
|
if (codeBlock && testInjectVar.test(codeBlock)) {
|
|
322
337
|
var localScopeVars = Object.keys(batchScopeVars_1);
|
|
323
338
|
options.onChangeJsById[elId] = codeBlock.replace(startInjectVar, "\n ".concat(addScopeVars(localScopeVars, true, function (scopeVar) {
|
|
324
|
-
return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "
|
|
339
|
+
return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getScope(el, \"").concat(scopeVar, "\");");
|
|
325
340
|
}), "\n "));
|
|
326
341
|
}
|
|
327
342
|
if (jsx_1.selfClosingTags.has(json.name)) {
|
|
@@ -330,9 +345,7 @@ var blockToHtml = function (json, options, blockOptions) {
|
|
|
330
345
|
str += '>';
|
|
331
346
|
if (json.children) {
|
|
332
347
|
str += json.children
|
|
333
|
-
.map(function (item) {
|
|
334
|
-
return blockToHtml(item, options, { scopeVars: scopeVars, childComponents: childComponents });
|
|
335
|
-
})
|
|
348
|
+
.map(function (item) { return blockToHtml(item, options, blockOptions); })
|
|
336
349
|
.join('\n');
|
|
337
350
|
}
|
|
338
351
|
if (json.properties.innerHTML) {
|
|
@@ -402,6 +415,7 @@ var componentToHtml = function (options) {
|
|
|
402
415
|
var componentHasProps = (0, has_props_1.hasProps)(json);
|
|
403
416
|
var hasLoop = (0, has_component_1.hasComponent)('For', json);
|
|
404
417
|
var hasShow = (0, has_component_1.hasComponent)('Show', json);
|
|
418
|
+
var hasTextBinding = (0, has_bindings_text_1.hasBindingsText)(json);
|
|
405
419
|
if (options.plugins) {
|
|
406
420
|
json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
|
|
407
421
|
}
|
|
@@ -425,7 +439,7 @@ var componentToHtml = function (options) {
|
|
|
425
439
|
valueMapper: function (value) {
|
|
426
440
|
return addUpdateAfterSetInCode(updateReferencesInCode(value, useOptions), useOptions);
|
|
427
441
|
},
|
|
428
|
-
}), ";\n ").concat(componentHasProps ? "let props = {};" : '', "\n let nodesToDestroy = [];\n let pendingUpdate = false;\n ").concat(!((_d = (_c = json.hooks) === null || _c === void 0 ? void 0 : _c.onInit) === null || _d === void 0 ? void 0 : _d.code) ? '' : 'let onInitOnce = false;', "\n\n function destroyAnyNodes() {\n // destroy current view template refs before rendering again\n nodesToDestroy.forEach(el => el.remove());\n nodesToDestroy = [];\n }\n ").concat(!hasChangeListeners
|
|
442
|
+
}), ";\n ").concat(componentHasProps ? "let props = {};" : '', "\n let context = null;\n let nodesToDestroy = [];\n let pendingUpdate = false;\n ").concat(!((_d = (_c = json.hooks) === null || _c === void 0 ? void 0 : _c.onInit) === null || _d === void 0 ? void 0 : _d.code) ? '' : 'let onInitOnce = false;', "\n\n function destroyAnyNodes() {\n // destroy current view template refs before rendering again\n nodesToDestroy.forEach(el => el.remove());\n nodesToDestroy = [];\n }\n ").concat(!hasChangeListeners
|
|
429
443
|
? ''
|
|
430
444
|
: "\n \n // Function to update data bindings and loops\n // call update() when you mutate state and need the updates to reflect\n // in the dom\n function update() {\n if (pendingUpdate === true) {\n return;\n }\n pendingUpdate = true;\n ".concat(Object.keys(useOptions.onChangeJsById)
|
|
431
445
|
.map(function (key) {
|
|
@@ -433,7 +447,7 @@ var componentToHtml = function (options) {
|
|
|
433
447
|
if (!value) {
|
|
434
448
|
return '';
|
|
435
449
|
}
|
|
436
|
-
return "\n document.querySelectorAll(\"[data-
|
|
450
|
+
return "\n document.querySelectorAll(\"[data-el='".concat(key, "']\").forEach((el) => {\n ").concat(value, "\n });\n ");
|
|
437
451
|
})
|
|
438
452
|
.join('\n\n'), "\n\n destroyAnyNodes();\n\n ").concat(!((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
|
|
439
453
|
? ''
|
|
@@ -447,9 +461,11 @@ var componentToHtml = function (options) {
|
|
|
447
461
|
: // TODO: make prettier by grabbing only the function body
|
|
448
462
|
"\n // onMount\n ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions), " \n "), "\n\n ").concat(!hasShow
|
|
449
463
|
? ''
|
|
450
|
-
: "\n function 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 nodesToDestroy.push(child);\n });\n el.after(elementFragment);\n }\n \n ", "\n
|
|
464
|
+
: "\n function 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 nodesToDestroy.push(child);\n });\n el.after(elementFragment);\n }\n \n ", "\n ").concat(!hasTextBinding
|
|
451
465
|
? ''
|
|
452
|
-
: "\n // Helper
|
|
466
|
+
: "\n // Helper text DOM nodes\n function renderTextNode(el, text) {\n const textNode = document.createTextNode(text);\n if (el?.scope) {\n textNode.scope = el.scope\n }\n if (el?.context) {\n child.context = el.context;\n }\n el.after(textNode);\n nodesToDestroy.push(el.nextSibling);\n }\n ", "\n ").concat(!hasLoop
|
|
467
|
+
? ''
|
|
468
|
+
: "\n // Helper to render loops\n function 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 = template.context;\n }\n this.nodesToDestroy.push(child);\n collection.unshift(child);\n });\n collection.forEach(child => template.after(child));\n }\n }\n\n function 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 </script>\n ");
|
|
453
469
|
}
|
|
454
470
|
if (options.plugins) {
|
|
455
471
|
str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
|
|
@@ -482,27 +498,53 @@ exports.componentToHtml = componentToHtml;
|
|
|
482
498
|
var componentToCustomElement = function (options) {
|
|
483
499
|
if (options === void 0) { options = {}; }
|
|
484
500
|
return function (_a) {
|
|
485
|
-
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
|
|
501
|
+
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;
|
|
486
502
|
var component = _a.component;
|
|
487
|
-
var
|
|
503
|
+
var ComponentName = component.name;
|
|
504
|
+
var kebabName = (0, lodash_2.kebabCase)(ComponentName);
|
|
488
505
|
var useOptions = __assign(__assign({ prefix: kebabName }, options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'class' });
|
|
489
506
|
var json = (0, fast_clone_1.fastClone)(component);
|
|
490
507
|
if (options.plugins) {
|
|
491
508
|
json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
|
|
492
509
|
}
|
|
510
|
+
var _15 = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _15[0], hasPropRef = _15[1];
|
|
511
|
+
var contextVars = Object.keys(((_b = json === null || json === void 0 ? void 0 : json.context) === null || _b === void 0 ? void 0 : _b.get) || {});
|
|
493
512
|
var childComponents = getChildComponents(json, useOptions);
|
|
494
513
|
var componentHasProps = (0, has_props_1.hasProps)(json);
|
|
514
|
+
var componentHasStatefulDom = (0, has_stateful_dom_1.hasStatefulDom)(json);
|
|
495
515
|
var props = (0, get_props_1.getProps)(json);
|
|
516
|
+
// prevent jsx props from showing up as @Input
|
|
517
|
+
if (hasPropRef) {
|
|
518
|
+
props.delete(forwardProp);
|
|
519
|
+
}
|
|
496
520
|
var outputs = (0, get_prop_functions_1.getPropFunctions)(json);
|
|
521
|
+
var domRefs = (0, get_refs_1.getRefs)(json);
|
|
522
|
+
var jsRefs = Object.keys(json.refs).filter(function (ref) { return !domRefs.has(ref); });
|
|
523
|
+
(0, map_refs_1.mapRefs)(json, function (refName) { return "self._".concat(refName); });
|
|
524
|
+
var context = contextVars.map(function (variableName) {
|
|
525
|
+
var _a, _b, _c;
|
|
526
|
+
var token = (_a = json === null || json === void 0 ? void 0 : json.context) === null || _a === void 0 ? void 0 : _a.get[variableName].name;
|
|
527
|
+
if ((_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.htmlContext) {
|
|
528
|
+
return (_c = options === null || options === void 0 ? void 0 : options.experimental) === null || _c === void 0 ? void 0 : _c.htmlContext(variableName, token);
|
|
529
|
+
}
|
|
530
|
+
return "this.".concat(variableName, " = this.getContext(this._root, ").concat(token, ")");
|
|
531
|
+
});
|
|
532
|
+
var setContext = [];
|
|
533
|
+
for (var key in json.context.set) {
|
|
534
|
+
var _16 = json.context.set[key], name_1 = _16.name, value = _16.value, ref = _16.ref;
|
|
535
|
+
setContext.push({ name: name_1, value: value, ref: ref });
|
|
536
|
+
}
|
|
497
537
|
addUpdateAfterSet(json, useOptions);
|
|
538
|
+
var hasContext = context.length;
|
|
498
539
|
var hasLoop = (0, has_component_1.hasComponent)('For', json);
|
|
540
|
+
var hasScope = hasLoop;
|
|
499
541
|
var hasShow = (0, has_component_1.hasComponent)('Show', json);
|
|
500
542
|
if (options.plugins) {
|
|
501
543
|
json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
|
|
502
544
|
}
|
|
503
545
|
var css = '';
|
|
504
|
-
if ((
|
|
505
|
-
css = (
|
|
546
|
+
if ((_c = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _c === void 0 ? void 0 : _c.css) {
|
|
547
|
+
css = (_d = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _d === void 0 ? void 0 : _d.css(json, useOptions, {
|
|
506
548
|
collectCss: collect_styles_1.collectCss,
|
|
507
549
|
prefix: options.prefix,
|
|
508
550
|
});
|
|
@@ -515,16 +557,22 @@ var componentToCustomElement = function (options) {
|
|
|
515
557
|
(0, strip_meta_properties_1.stripMetaProperties)(json);
|
|
516
558
|
var html = json.children
|
|
517
559
|
.map(function (item) {
|
|
518
|
-
return blockToHtml(item, useOptions, {
|
|
560
|
+
return blockToHtml(item, useOptions, {
|
|
561
|
+
childComponents: childComponents,
|
|
562
|
+
props: props,
|
|
563
|
+
outputs: outputs,
|
|
564
|
+
ComponentName: ComponentName,
|
|
565
|
+
contextVars: contextVars,
|
|
566
|
+
});
|
|
519
567
|
})
|
|
520
568
|
.join('\n');
|
|
521
|
-
if ((
|
|
522
|
-
html = (
|
|
569
|
+
if ((_e = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _e === void 0 ? void 0 : _e.childrenHtml) {
|
|
570
|
+
html = (_f = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _f === void 0 ? void 0 : _f.childrenHtml(html, kebabName, json, useOptions);
|
|
523
571
|
}
|
|
524
|
-
if ((
|
|
525
|
-
html += (
|
|
572
|
+
if ((_g = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _g === void 0 ? void 0 : _g.cssHtml) {
|
|
573
|
+
html += (_h = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _h === void 0 ? void 0 : _h.cssHtml(css);
|
|
526
574
|
}
|
|
527
|
-
else {
|
|
575
|
+
else if (css.length) {
|
|
528
576
|
html += "<style>".concat(css, "</style>");
|
|
529
577
|
}
|
|
530
578
|
if (options.prettier !== false) {
|
|
@@ -546,9 +594,17 @@ var componentToCustomElement = function (options) {
|
|
|
546
594
|
console.warn('Could not prettify', { string: html }, err);
|
|
547
595
|
}
|
|
548
596
|
}
|
|
549
|
-
var str = "\n ".concat((0, render_imports_1.renderPreComponent)(json), "\n /**\n * Usage:\n * \n * <").concat(kebabName, "></").concat(kebabName, ">\n * \n */\n class ").concat(
|
|
550
|
-
? (
|
|
551
|
-
: 'HTMLElement', " {\n
|
|
597
|
+
var str = "\n ".concat((0, render_imports_1.renderPreComponent)(json), "\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)
|
|
598
|
+
? (_k = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _k === void 0 ? void 0 : _k.classExtends(json, useOptions)
|
|
599
|
+
: 'HTMLElement', " {\n ").concat(Array.from(domRefs)
|
|
600
|
+
.map(function (ref) {
|
|
601
|
+
return "\n get _".concat(ref, "() {\n return this._root.querySelector(\"[data-ref='").concat(ComponentName, "-").concat(ref, "']\")\n }\n ");
|
|
602
|
+
})
|
|
603
|
+
.join('\n'), "\n\n get _root() {\n return this.shadowRoot || this;\n }\n\n constructor() {\n super();\n const self = this;\n ").concat(
|
|
604
|
+
// TODO: more than one context not injector
|
|
605
|
+
setContext.length === 1 && ((_l = setContext === null || setContext === void 0 ? void 0 : setContext[0]) === null || _l === void 0 ? void 0 : _l.ref)
|
|
606
|
+
? "this.context = ".concat(setContext[0].ref)
|
|
607
|
+
: '', "\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, {
|
|
552
608
|
valueMapper: function (value) {
|
|
553
609
|
return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(addUpdateAfterSetInCode(value, useOptions, 'self.update'), {
|
|
554
610
|
includeProps: false,
|
|
@@ -560,41 +616,78 @@ var componentToCustomElement = function (options) {
|
|
|
560
616
|
includeProps: true,
|
|
561
617
|
includeState: false,
|
|
562
618
|
replaceWith: 'self.props.',
|
|
619
|
+
contextVars: contextVars,
|
|
620
|
+
// correctly ref the class not state object
|
|
621
|
+
context: 'self.',
|
|
563
622
|
});
|
|
564
623
|
},
|
|
565
|
-
}), ";\n ").concat(componentHasProps
|
|
566
|
-
?
|
|
567
|
-
:
|
|
568
|
-
|
|
569
|
-
|
|
624
|
+
}), ";\n if (!this.props) {\n this.props = {};\n }\n ").concat(!componentHasProps
|
|
625
|
+
? ''
|
|
626
|
+
: "\n this.componentProps = [".concat(Array.from(props)
|
|
627
|
+
.map(function (prop) { return "\"".concat(prop, "\""); })
|
|
628
|
+
.join(','), "];\n "), "\n\n ").concat(!((_p = json.hooks.onUpdate) === null || _p === void 0 ? void 0 : _p.length)
|
|
629
|
+
? ''
|
|
630
|
+
: "\n this.updateDeps = [".concat((_q = json.hooks.onUpdate) === null || _q === void 0 ? void 0 : _q.map(function (hook) {
|
|
631
|
+
return updateReferencesInCode((hook === null || hook === void 0 ? void 0 : hook.deps) || '[]', useOptions);
|
|
632
|
+
}).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)
|
|
633
|
+
? (_s = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _s === void 0 ? void 0 : _s.componentConstructor(json, useOptions)
|
|
634
|
+
: '', "\n\n ").concat(useOptions.js, "\n\n ").concat(jsRefs
|
|
635
|
+
.map(function (ref) {
|
|
636
|
+
var _a;
|
|
637
|
+
// const typeParameter = json['refs'][ref]?.typeParameter || '';
|
|
638
|
+
var argument = ((_a = json['refs'][ref]) === null || _a === void 0 ? void 0 : _a.argument) || 'null';
|
|
639
|
+
return "this._".concat(ref, " = ").concat(argument);
|
|
640
|
+
})
|
|
641
|
+
.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)
|
|
570
642
|
? ''
|
|
571
|
-
: "\n disconnectedCallback() {\n ".concat(((
|
|
572
|
-
? (
|
|
573
|
-
: "\n // onUnMount\n ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount.code, useOptions), useOptions
|
|
574
|
-
|
|
575
|
-
|
|
643
|
+
: "\n disconnectedCallback() {\n ".concat(((_v = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _v === void 0 ? void 0 : _v.disconnectedCallback)
|
|
644
|
+
? (_w = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _w === void 0 ? void 0 : _w.disconnectedCallback(json, useOptions)
|
|
645
|
+
: "\n // onUnMount\n ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount.code, useOptions), useOptions, {
|
|
646
|
+
contextVars: contextVars,
|
|
647
|
+
}), "\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
|
|
576
648
|
? ''
|
|
577
|
-
: "\n
|
|
649
|
+
: "\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)
|
|
650
|
+
? (_0 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _0 === void 0 ? void 0 : _0.connectedCallbackUpdate(json, html, useOptions)
|
|
651
|
+
: "\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)
|
|
652
|
+
? ''
|
|
653
|
+
: "\n onInit() {\n ".concat(!((_6 = (_5 = json.hooks) === null || _5 === void 0 ? void 0 : _5.onInit) === null || _6 === void 0 ? void 0 : _6.code)
|
|
578
654
|
? ''
|
|
579
|
-
: "\n if (!this.onInitOnce) {\n ".concat(updateReferencesInCode(addUpdateAfterSetInCode((
|
|
655
|
+
: "\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, {
|
|
656
|
+
contextVars: contextVars,
|
|
657
|
+
}), "\n this.onInitOnce = true;\n }"), "\n }\n "), "\n\n ").concat(!hasShow
|
|
580
658
|
? ''
|
|
581
|
-
: "\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 this.nodesToDestroy.push(child);\n });\n el.after(elementFragment);\n }", "\n ").concat(!((
|
|
659
|
+
: "\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)
|
|
582
660
|
? ''
|
|
583
|
-
: "\n attributeChangedCallback(name, oldValue, newValue) {\n ".concat((
|
|
661
|
+
: "\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)
|
|
584
662
|
? ''
|
|
585
663
|
: // TODO: make prettier by grabbing only the function body
|
|
586
|
-
"\n // onMount\n ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions), "\n "), "\n }\n\n onUpdate() {\n ").concat(!((
|
|
664
|
+
"\n // onMount\n ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions, { contextVars: contextVars }), "\n "), "\n }\n\n onUpdate() {\n ").concat(!((_12 = json.hooks.onUpdate) === null || _12 === void 0 ? void 0 : _12.length)
|
|
587
665
|
? ''
|
|
588
|
-
: "\n ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
|
|
589
|
-
|
|
666
|
+
: "\n const self = this;\n ".concat(json.hooks.onUpdate.reduce(function (code, hook, index) {
|
|
667
|
+
// create check update
|
|
668
|
+
if (hook === null || hook === void 0 ? void 0 : hook.deps) {
|
|
669
|
+
code += "\n ;(function (__prev, __next) {\n const __hasChange = __prev.find((val, index) => val !== __next[index]);\n if (__hasChange !== undefined) {\n ".concat(updateReferencesInCode(hook.code, useOptions, {
|
|
670
|
+
contextVars: contextVars,
|
|
671
|
+
context: 'self.',
|
|
672
|
+
}), "\n self.updateDeps[").concat(index, "] = __next;\n }\n }(self.updateDeps[").concat(index, "], ").concat(updateReferencesInCode((hook === null || hook === void 0 ? void 0 : hook.deps) || '[]', useOptions, {
|
|
673
|
+
contextVars: contextVars,
|
|
674
|
+
context: 'self.',
|
|
675
|
+
}), "));\n ");
|
|
676
|
+
}
|
|
677
|
+
else {
|
|
678
|
+
code += "\n ".concat(updateReferencesInCode(hook.code, useOptions, {
|
|
679
|
+
contextVars: contextVars,
|
|
680
|
+
context: 'self.',
|
|
681
|
+
}), "\n ");
|
|
682
|
+
}
|
|
590
683
|
return code + '\n';
|
|
591
|
-
}, ''), " \n "), "\n }\n\n update() {\n if (this.pendingUpdate === true) {\n return;\n }\n this.pendingUpdate = true;\n
|
|
684
|
+
}, ''), " \n "), "\n }\n\n update() {\n if (this.pendingUpdate === true) {\n return;\n }\n this.pendingUpdate = true;\n this.render();\n this.onUpdate();\n this.pendingUpdate = false;\n }\n\n render() {\n ").concat(!componentHasStatefulDom
|
|
592
685
|
? ''
|
|
593
|
-
: "\n
|
|
686
|
+
: "\n // grab previous input state\n const preStateful = this.getStateful(this._root);\n const preValues = this.prepareHydrate(preStateful);\n ", "\n\n // re-rendering needs to ensure that all nodes generated by for/show are refreshed\n this.destroyAnyNodes();\n this.updateBindings();\n\n ").concat(!componentHasStatefulDom
|
|
594
687
|
? ''
|
|
595
|
-
: "\n
|
|
596
|
-
?
|
|
597
|
-
: '
|
|
688
|
+
: "\n // hydrate input state\n if (preValues.length) {\n const nextStateful = this.getStateful(this._root);\n this.hydrateDom(preValues, nextStateful);\n }\n ", "\n }\n ").concat(!componentHasStatefulDom
|
|
689
|
+
? ''
|
|
690
|
+
: "\n getStateful(el) {\n const stateful = el.querySelectorAll('[data-dom-state]');\n return stateful ? Array.from(stateful) : [];\n }\n prepareHydrate(stateful) {\n return stateful.map(el => {\n return {\n id: el.dataset.domState,\n value: el.value,\n active: document.activeElement === el,\n selectionStart: el.selectionStart\n };\n });\n }\n hydrateDom(preValues, stateful) {\n return stateful.map((el, index) => {\n const prev = preValues.find((prev) => el.dataset.domState === prev.id);\n if (prev) {\n el.value = prev.value;\n if (prev.active) {\n el.focus();\n el.selectionStart = prev.selectionStart;\n }\n }\n });\n }\n ", "\n\n updateBindings() {\n ").concat(Object.keys(useOptions.onChangeJsById)
|
|
598
691
|
.map(function (key) {
|
|
599
692
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
600
693
|
var value = useOptions.onChangeJsById[key];
|
|
@@ -607,17 +700,23 @@ var componentToCustomElement = function (options) {
|
|
|
607
700
|
code = (_e = (_d = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _d === void 0 ? void 0 : _d.updateBindings) === null || _e === void 0 ? void 0 : _e.code(key, value, useOptions);
|
|
608
701
|
}
|
|
609
702
|
else {
|
|
610
|
-
code = updateReferencesInCode(value, useOptions
|
|
703
|
+
code = updateReferencesInCode(value, useOptions, {
|
|
704
|
+
contextVars: contextVars,
|
|
705
|
+
});
|
|
611
706
|
}
|
|
612
707
|
return "\n ".concat(((_f = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _f === void 0 ? void 0 : _f.generateQuerySelectorAll)
|
|
613
708
|
? "\n ".concat((_g = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _g === void 0 ? void 0 : _g.generateQuerySelectorAll(key, code), "\n ")
|
|
614
|
-
: " \n this._root.querySelectorAll(\"[data-
|
|
709
|
+
: " \n this._root.querySelectorAll(\"[data-el='".concat(key, "']\").forEach((el) => {\n ").concat(code, "\n })\n "), "\n ");
|
|
615
710
|
})
|
|
616
|
-
.join('\n\n'), "\n }\n\n // Helper to render content\n renderTextNode(el, text) {\n const textNode = document.createTextNode(text);\n if (el?.scope) {\n textNode.scope = el.scope;\n }\n el.after(textNode);\n this.nodesToDestroy.push(el.nextSibling);\n }\n
|
|
711
|
+
.join('\n\n'), "\n }\n\n // Helper to render content\n renderTextNode(el, text) {\n const textNode = document.createTextNode(text);\n if (el?.scope) {\n textNode.scope = el.scope;\n }\n if (el?.context) {\n textNode.context = el.context;\n }\n el.after(textNode);\n this.nodesToDestroy.push(el.nextSibling);\n }\n ").concat(!hasContext
|
|
712
|
+
? ''
|
|
713
|
+
: "\n // get Context Helper\n getContext(el, token) {\n do {\n let value;\n if (el?.context?.get) {\n value = el.context.get(token);\n } else if (el?.context?.[token]) {\n value = el.context[token];\n }\n if (value !== undefined) {\n return value;\n }\n } while ((el = el.parentNode));\n }\n ", "\n ").concat(!hasScope
|
|
714
|
+
? ''
|
|
715
|
+
: "\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
|
|
617
716
|
? ''
|
|
618
|
-
: "\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 this.nodesToDestroy.push(child);\n collection.
|
|
619
|
-
? (
|
|
620
|
-
: "customElements.define('".concat(kebabName, "', ").concat(
|
|
717
|
+
: "\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)
|
|
718
|
+
? (_14 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _14 === void 0 ? void 0 : _14.customElementsDefine(kebabName, component, useOptions)
|
|
719
|
+
: "customElements.define('".concat(kebabName, "', ").concat(ComponentName, ");"), "\n ");
|
|
621
720
|
if (options.plugins) {
|
|
622
721
|
str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
|
|
623
722
|
}
|