@builder.io/mitosis
Version:
Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io
76 lines (74 loc) • 3.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.processBindings = void 0;
const bindings_1 = require("../../../helpers/bindings");
function replaceGroupWithChecked(node, isArray = false) {
var _a, _b, _c;
if ((_b = (_a = node.bindings.group) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.length) {
const bindingValue = (_c = node.bindings.value) === null || _c === void 0 ? void 0 : _c.code;
const propertyValue = node.properties.value;
const groupBinding = node.bindings.group.code;
let code = '';
if (isArray) {
code = bindingValue
? `${groupBinding}.includes(${bindingValue})`
: `${groupBinding}.includes('${propertyValue}')`;
}
else {
code = bindingValue
? `${groupBinding} === ${bindingValue}`
: `${groupBinding} === '${propertyValue}'`;
}
node.bindings['checked'] = (0, bindings_1.createSingleBinding)({
code,
});
delete node.bindings.group;
}
}
/* post-processes bindings
bind:group https://svelte.dev/docs#template-syntax-element-directives-bind-group
bind:property https://svelte.dev/docs#template-syntax-component-directives-bind-this
bind:this https://svelte.dev/docs#template-syntax-component-directives-bind-this
- replaces group binding with checked for checkboxes and radios (supported inputs for bind:group)
- adds onChange for bind:group and bind:property (event.target.value OR event.target.checked)
*/
function processBindings(json, node) {
var _a, _b, _c, _d, _e, _f, _g;
let name;
let target = 'event.target.value';
let binding = '';
let isArray = false;
if (Object.prototype.hasOwnProperty.call(node.bindings, 'group')) {
name = 'group';
binding = (_b = (_a = node.bindings.group) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '';
if (binding.startsWith('state.')) {
const stateObject = json.state[binding.replace(/^state\./, '')];
isArray = Array.isArray(stateObject === null || stateObject === void 0 ? void 0 : stateObject.code);
}
replaceGroupWithChecked(node, isArray);
if (node.properties.type === 'checkbox' && !node.properties.value) {
target = 'event.target.checked';
}
}
else if (Object.prototype.hasOwnProperty.call(node.bindings, 'this')) {
name = 'ref';
binding = (_d = (_c = node.bindings.this) === null || _c === void 0 ? void 0 : _c.code) !== null && _d !== void 0 ? _d : '';
}
else if (Object.prototype.hasOwnProperty.call(node.bindings, 'onChange') &&
node.properties.type === 'checkbox') {
target = 'event.target.checked';
binding = (_f = (_e = node.bindings.onChange) === null || _e === void 0 ? void 0 : _e.code.split('=')[0]) !== null && _f !== void 0 ? _f : '';
}
let onChangeCode = `${binding} = ${target}`;
// If the binding is an array, we should push / splice rather than assigning
if (isArray) {
onChangeCode = `event.target.checked ? ${binding}.push(${target}) : ${binding}.splice(${binding}.indexOf(${node.properties.value ? `'${node.properties.value}'` : (_g = node.bindings.value) === null || _g === void 0 ? void 0 : _g.code}), 1)`;
}
if (name !== 'ref' && binding) {
node.bindings['onChange'] = (0, bindings_1.createSingleBinding)({
code: onChangeCode,
arguments: ['event'],
});
}
}
exports.processBindings = processBindings;