New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
lucia - npm Package Compare versions
Comparing version 0.4.0 to 0.4.1
@@ -77,5 +77,2 @@ 'use strict'; | ||
| }; | ||
| var semicolonCaptureRE = function semicolonCaptureRE() { | ||
| return /(;)/gim; | ||
| }; | ||
| var arrayIndexCaptureRE = function arrayIndexCaptureRE() { | ||
@@ -93,4 +90,4 @@ return /\[(\d+)\]/gim; | ||
| }; | ||
| var expressionPropRE = function expressionPropRE(key) { | ||
| return new RegExp("\\b" + key + "\\b", 'gim'); | ||
| var expressionPropRE = function expressionPropRE(prop) { | ||
| return new RegExp("\\b" + prop + "\\b", 'gim'); | ||
| }; | ||
@@ -114,2 +111,5 @@ | ||
| var formatAcceptableWhitespace = function formatAcceptableWhitespace(expression) { | ||
| return expression.replace(/\s+/gim, ' ').trim(); | ||
| }; | ||
| var bindDirective = function bindDirective(_a) { | ||
@@ -126,10 +126,10 @@ var el = _a.el, | ||
| if (typeof hydratedClasses === 'string') { | ||
| return el.setAttribute('class', (el.className + " " + hydratedClasses).trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(el.className + " " + hydratedClasses)); | ||
| } else if (hydratedClasses instanceof Array) { | ||
| return el.setAttribute('class', (el.className + " " + hydratedClasses.join(' ')).trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(el.className + " " + hydratedClasses.join(' '))); | ||
| } else { | ||
| var classes = []; | ||
| for (var key in hydratedClasses) { | ||
| if (hydratedClasses[key] && !el.className.includes(key)) classes.push(key); | ||
| for (var prop in hydratedClasses) { | ||
| if (hydratedClasses[prop]) classes.push(prop); | ||
| } | ||
@@ -141,5 +141,5 @@ | ||
| if (classes.length > 0) { | ||
| return el.setAttribute('class', (rawClasses + " " + classes.join(' ')).trim()); | ||
| } else if (el.className.trim().length > 0) { | ||
| return el.setAttribute('class', rawClasses.trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(rawClasses + " " + classes.join(' '))); | ||
| } else if (formatAcceptableWhitespace(el.className).length > 0) { | ||
| return el.setAttribute('class', formatAcceptableWhitespace(rawClasses)); | ||
| } else { | ||
@@ -154,4 +154,4 @@ return el.removeAttribute('class'); | ||
| for (var key in hydratedStyles) { | ||
| el.style[key] = hydratedStyles[key]; | ||
| for (var prop in hydratedStyles) { | ||
| el.style[prop] = hydratedStyles[prop]; | ||
| } | ||
@@ -165,7 +165,7 @@ | ||
| if (_typeof(hydratedAttributes) === 'object' && hydratedAttributes !== null) { | ||
| for (var key in hydratedAttributes) { | ||
| if (hydratedAttributes[key]) { | ||
| el.setAttribute(key, hydratedAttributes[key]); | ||
| for (var prop in hydratedAttributes) { | ||
| if (hydratedAttributes[prop]) { | ||
| el.setAttribute(prop, hydratedAttributes[prop]); | ||
| } else { | ||
| el.removeAttribute(key); | ||
| el.removeAttribute(prop); | ||
| } | ||
@@ -183,2 +183,14 @@ } | ||
| var interpretProps = function interpretProps(expression, stateValues, positionInState) { | ||
| var value = stateValues[positionInState]; | ||
| var arrayIndex = arrayIndexCaptureRE().exec(expression); | ||
| if (arrayIndex && arrayIndex[1] && value instanceof Array && !isNaN(arrayIndex[1])) { | ||
| return value[Number(arrayIndex[1])]; | ||
| } else if (expression.endsWith('()')) { | ||
| return value(); | ||
| } else { | ||
| return value; | ||
| } | ||
| }; | ||
| var computeExpression = function computeExpression(expression, el, returnable) { | ||
@@ -188,19 +200,21 @@ var formattedExpression = "with($state){" + ((returnable !== null && returnable !== void 0 ? returnable : true) ? "return " + expression : expression) + "}"; | ||
| try { | ||
| var _a = __read([Object.keys(state), Object.values(state)], 2), | ||
| propKeys = _a[0], | ||
| propValues = _a[1]; | ||
| var strippedExpression = expression.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim, ''); | ||
| var positionInState = returnable ? Object.keys(state).indexOf(strippedExpression) : -1; | ||
| var positionInState = returnable ? propKeys.indexOf(strippedExpression) : -1; | ||
| if (positionInState !== -1) { | ||
| var value = Object.values(state)[positionInState]; | ||
| var arrayIndex = arrayIndexCaptureRE().exec(expression); | ||
| return interpretProps(expression, propValues, positionInState); | ||
| } else { | ||
| var emit = function emit(name, options) { | ||
| var event = new CustomEvent(name, options); | ||
| document.dispatchEvent(event); | ||
| }; | ||
| if (arrayIndex && arrayIndex[1] && value instanceof Array && !isNaN(arrayIndex[1])) { | ||
| return value[Number(arrayIndex[1])]; | ||
| } else if (expression.endsWith('()')) { | ||
| return value(); | ||
| } else return value; | ||
| } else { | ||
| return new Function('$state', '$el', formattedExpression)(state, el || null); | ||
| return new Function('$state', '$el', '$emit', formattedExpression)(state, el, emit); | ||
| } | ||
| } catch (err) { | ||
| console.warn("Lucia Error: \"" + err + "\"\n\nExpression: \"" + expression + "\"\nElement:", el || null); | ||
| console.warn("Lucia Error: \"" + err + "\"\n\nExpression: \"" + expression + "\"\nElement:", el); | ||
| } | ||
@@ -210,5 +224,39 @@ }; | ||
| var getCustomProp = function getCustomProp(el, prop) { | ||
| return el[prop]; | ||
| }; | ||
| var setCustomProp = function setCustomProp(el, prop, value) { | ||
| return el[prop] = value; | ||
| }; | ||
| var removeDupesFromArray = function removeDupesFromArray(array) { | ||
| return __spread(new Set(array)); | ||
| }; | ||
| var isListRenderScope = function isListRenderScope(el) { | ||
| return el.hasAttribute(DIRECTIVE_PREFIX + "for"); | ||
| }; | ||
| var isUnderListRenderScope = function isUnderListRenderScope(el) { | ||
| if (!el.parentElement) return false; | ||
| return el.parentElement.hasAttribute(DIRECTIVE_PREFIX + "for"); | ||
| }; | ||
| var createASTNode = function createASTNode(el, state) { | ||
| var _a = __read(collectAndInitDirectives(el, state), 2), | ||
| directives = _a[0], | ||
| deps = _a[1]; | ||
| var hasDirectives = Object.keys(directives).length > 0; | ||
| var hasDepInDirectives = Object.values(directives).some(function (_a) { | ||
| var value = _a.value; | ||
| return Object.keys(state).some(function (prop) { | ||
| return expressionPropRE(prop).test(value); | ||
| }); | ||
| }); | ||
| if (!hasDirectives) return null; | ||
| return { | ||
| el: el, | ||
| deps: deps, | ||
| directives: directives, | ||
| type: hasDepInDirectives ? 1 : 0 | ||
| }; | ||
| }; | ||
| var collectAndInitDirectives = function collectAndInitDirectives(el, state) { | ||
@@ -222,96 +270,66 @@ var e_1, _a; | ||
| var directives = {}; | ||
| var nodeKeys = []; | ||
| var nodeDeps = []; | ||
| if (el.attributes) { | ||
| var _loop_1 = function _loop_1(name_1, value) { | ||
| var keysInFunctions = []; | ||
| var keysInState = Object.keys(state); | ||
| var returnable = true; | ||
| var keys = keysInState.filter(function (key) { | ||
| var hasKey = expressionPropRE(key).test(String(value)); | ||
| var _loop_1 = function _loop_1(name_1, value) { | ||
| var depsInFunctions = []; | ||
| var propsInState = Object.keys(state); | ||
| var returnable = true; | ||
| var deps = propsInState.filter(function (prop) { | ||
| var hasDep = expressionPropRE(prop).test(String(value)); | ||
| if (typeof state[key] === 'function' && hasKey) { | ||
| var keysInFunction = keysInState.filter(function (k) { | ||
| return expressionPropRE(k).test(String(state[key])); | ||
| }); | ||
| keysInFunctions.push.apply(keysInFunctions, __spread(keysInFunction)); | ||
| } | ||
| if (typeof state[prop] === 'function' && hasDep) { | ||
| var depsInFunction = propsInState.filter(function (p) { | ||
| return expressionPropRE(p).test(String(state[prop])); | ||
| }); | ||
| depsInFunctions.push.apply(depsInFunctions, __spread(depsInFunction)); | ||
| } | ||
| return hasKey; | ||
| }); | ||
| if (eventDirectivePrefixRE().test(name_1)) returnable = false; | ||
| return hasDep; | ||
| }); | ||
| if (eventDirectivePrefixRE().test(name_1)) returnable = false; | ||
| if (name_1.includes('for') && el.__l_for_template === undefined) { | ||
| el.__l_for_template = String(el.innerHTML).trim(); | ||
| returnable = false; | ||
| } | ||
| if (name_1.includes('for') && getCustomProp(el, '__l_for_template') === undefined) { | ||
| setCustomProp(el, '__l_for_template', String(el.innerHTML).trim()); | ||
| returnable = false; | ||
| } | ||
| var uniqueCompiledKeys = removeDupesFromArray(__spread(keys, keysInFunctions)); | ||
| nodeKeys.push.apply(nodeKeys, __spread(uniqueCompiledKeys)); | ||
| var directiveData = { | ||
| compute: computeExpression(value, el, returnable), | ||
| keys: uniqueCompiledKeys, | ||
| value: value | ||
| }; | ||
| var uniqueCompiledDeps = removeDupesFromArray(__spread(deps, depsInFunctions)); | ||
| nodeDeps.push.apply(nodeDeps, __spread(uniqueCompiledDeps)); | ||
| var directiveData = { | ||
| compute: computeExpression(value, el, returnable), | ||
| deps: uniqueCompiledDeps, | ||
| value: value | ||
| }; | ||
| if (name_1.startsWith(DIRECTIVE_PREFIX)) { | ||
| directives[name_1.slice(DIRECTIVE_PREFIX.length)] = directiveData; | ||
| } else if (Object.keys(DIRECTIVE_SHORTHANDS).includes(name_1[0])) { | ||
| directives[DIRECTIVE_SHORTHANDS[name_1[0]] + ":" + name_1.slice(1)] = directiveData; | ||
| } | ||
| if (name_1.startsWith(DIRECTIVE_PREFIX)) { | ||
| directives[name_1.slice(DIRECTIVE_PREFIX.length)] = directiveData; | ||
| } else if (Object.keys(DIRECTIVE_SHORTHANDS).includes(name_1[0])) { | ||
| directives[DIRECTIVE_SHORTHANDS[name_1[0]] + ":" + name_1.slice(1)] = directiveData; | ||
| } | ||
| }; | ||
| try { | ||
| for (var _b = __values(el.attributes), _c = _b.next(); !_c.done; _c = _b.next()) { | ||
| var _d = _c.value, | ||
| name_1 = _d.name, | ||
| value = _d.value; | ||
| _loop_1(name_1, value); | ||
| } | ||
| } catch (e_1_1) { | ||
| e_1 = { | ||
| error: e_1_1 | ||
| }; | ||
| } finally { | ||
| try { | ||
| for (var _b = __values(el.attributes), _c = _b.next(); !_c.done; _c = _b.next()) { | ||
| var _d = _c.value, | ||
| name_1 = _d.name, | ||
| value = _d.value; | ||
| _loop_1(name_1, value); | ||
| } | ||
| } catch (e_1_1) { | ||
| e_1 = { | ||
| error: e_1_1 | ||
| }; | ||
| if (_c && !_c.done && (_a = _b["return"])) _a.call(_b); | ||
| } finally { | ||
| try { | ||
| if (_c && !_c.done && (_a = _b["return"])) _a.call(_b); | ||
| } finally { | ||
| if (e_1) throw e_1.error; | ||
| } | ||
| if (e_1) throw e_1.error; | ||
| } | ||
| } | ||
| return [directives, removeDupesFromArray(nodeKeys)]; | ||
| return [directives, removeDupesFromArray(nodeDeps)]; | ||
| }; | ||
| var createASTNode = function createASTNode(el, state) { | ||
| var _a = __read(collectAndInitDirectives(el, state), 2), | ||
| directives = _a[0], | ||
| keys = _a[1]; | ||
| var hasDirectives = Object.keys(directives).length > 0; | ||
| var hasKeyInDirectives = Object.values(directives).some(function (_a) { | ||
| var value = _a.value; | ||
| return Object.keys(state).some(function (key) { | ||
| return expressionPropRE(key).test(value); | ||
| }); | ||
| }); | ||
| if (!hasDirectives) return null; | ||
| return { | ||
| el: el, | ||
| keys: keys, | ||
| directives: directives, | ||
| type: hasKeyInDirectives ? 1 : 0 | ||
| }; | ||
| }; | ||
| var isListRenderScope = function isListRenderScope(el) { | ||
| return el.hasAttribute(DIRECTIVE_PREFIX + "for"); | ||
| }; | ||
| var isUnderListRenderScope = function isUnderListRenderScope(el) { | ||
| if (!el.parentElement) return false; | ||
| return el.parentElement.hasAttribute(DIRECTIVE_PREFIX + "for"); | ||
| }; | ||
| var extractNodeChildrenAsCollection = function extractNodeChildrenAsCollection(rootNode, isListGroup) { | ||
| var e_1, _a; | ||
| var e_2, _a; | ||
@@ -341,5 +359,5 @@ if (isListGroup === void 0) { | ||
| } | ||
| } catch (e_1_1) { | ||
| e_1 = { | ||
| error: e_1_1 | ||
| } catch (e_2_1) { | ||
| e_2 = { | ||
| error: e_2_1 | ||
| }; | ||
@@ -350,3 +368,3 @@ } finally { | ||
| } finally { | ||
| if (e_1) throw e_1.error; | ||
| if (e_2) throw e_2.error; | ||
| } | ||
@@ -359,3 +377,3 @@ } | ||
| var compile = function compile(el, state) { | ||
| var e_2, _a; | ||
| var e_3, _a; | ||
@@ -368,3 +386,3 @@ if (state === void 0) { | ||
| var ast = []; | ||
| var isListGroup = el.__l !== undefined && isListRenderScope(el); | ||
| var isListGroup = getCustomProp(el, '__l') !== undefined && isListRenderScope(el); | ||
| var nodes = extractNodeChildrenAsCollection(el, isListGroup); | ||
@@ -375,8 +393,5 @@ | ||
| var node = nodes_1_1.value; | ||
| if (node.hasAttribute(DIRECTIVE_PREFIX + "state")) continue; | ||
| if (hasDirectiveRE().test(node.outerHTML)) { | ||
| if (node.hasAttribute(DIRECTIVE_PREFIX + "state")) { | ||
| continue; | ||
| } | ||
| var newASTNode = createASTNode(node, state); | ||
@@ -386,5 +401,5 @@ if (newASTNode) ast.push(newASTNode); | ||
| } | ||
| } catch (e_2_1) { | ||
| e_2 = { | ||
| error: e_2_1 | ||
| } catch (e_3_1) { | ||
| e_3 = { | ||
| error: e_3_1 | ||
| }; | ||
@@ -395,3 +410,3 @@ } finally { | ||
| } finally { | ||
| if (e_2) throw e_2.error; | ||
| if (e_3) throw e_3.error; | ||
| } | ||
@@ -403,3 +418,3 @@ } | ||
| var patch = function patch(ast, directives, state, changedKeys) { | ||
| var patch = function patch(ast, directives, state, changedProps) { | ||
| var e_1, _a; | ||
@@ -411,4 +426,4 @@ | ||
| if (changedKeys === void 0) { | ||
| changedKeys = []; | ||
| if (changedProps === void 0) { | ||
| changedProps = []; | ||
| } | ||
@@ -424,13 +439,13 @@ | ||
| if (isStatic) staticNodeCleanupQueue.push(i); | ||
| var nodeHasKey = changedKeys.some(function (key) { | ||
| return node.keys.includes(key); | ||
| var nodeHasDep = changedProps.some(function (prop) { | ||
| return node.deps.includes(prop); | ||
| }); | ||
| if (!nodeHasKey && !isStatic) return "continue"; | ||
| if (!nodeHasDep && !isStatic) return "continue"; | ||
| var _loop_2 = function _loop_2(directiveName, directiveData) { | ||
| var directiveHasKey = changedKeys.some(function (key) { | ||
| return directiveData.keys.includes(key); | ||
| var directiveHasDep = changedProps.some(function (prop) { | ||
| return directiveData.deps.includes(prop); | ||
| }); | ||
| if (directiveHasKey || isStatic) { | ||
| if (directiveHasDep || isStatic) { | ||
| var directiveProps = { | ||
@@ -440,2 +455,3 @@ el: node.el, | ||
| data: directiveData, | ||
| node: node, | ||
| state: state | ||
@@ -496,20 +512,39 @@ }; | ||
| state = _a.state; | ||
| var key = data.value.replace(semicolonCaptureRE(), ''); | ||
| if (key in state) el.innerHTML = String(state[key]); | ||
| el.innerHTML = (_b = data.compute(state)) !== null && _b !== void 0 ? _b : data.value; | ||
| el.__l = {}; | ||
| var ast = compile(el, state); | ||
| patch(ast, directives, state, data.keys); | ||
| patch(ast, directives, state, data.deps); | ||
| }; | ||
| var ifDirective = function ifDirective(_a) { | ||
| var _b, _c; | ||
| var el = _a.el, | ||
| name = _a.name, | ||
| data = _a.data, | ||
| state = _a.state; | ||
| var modifier = name.split(':')[1]; | ||
| var key = data.value.replace(semicolonCaptureRE(), ''); | ||
| var hydratedConditional = true; | ||
| if (key in state) hydratedConditional = !!state[key];else hydratedConditional = !!data.compute(state); | ||
| if (modifier === 'hidden') el.hidden = !hydratedConditional;else el.style.display = hydratedConditional === false ? 'none' : null; | ||
| state = _a.state, | ||
| node = _a.node; | ||
| node = node; | ||
| var hydratedConditional = !!data.compute(state); | ||
| if (!getCustomProp(node.el, '__l_if_template')) { | ||
| var template = document.createElement('template'); | ||
| setCustomProp(template, '__l_if_template', true); | ||
| template.content.appendChild(el.cloneNode(true)); | ||
| el.replaceWith(template); | ||
| node.el = template; | ||
| } | ||
| var hasInserted = getCustomProp(node.el, '__l_if_has_inserted'); | ||
| if (!hydratedConditional && hasInserted) { | ||
| (_b = node.el.nextElementSibling) === null || _b === void 0 ? void 0 : _b.remove(); | ||
| setCustomProp(node.el, '__l_has_inserted', false); | ||
| } else if (hydratedConditional && !hasInserted) { | ||
| var clone = node.el.content.cloneNode(true); | ||
| (_c = node.el.parentElement) === null || _c === void 0 ? void 0 : _c.insertBefore(clone, node.el.nextElementSibling); | ||
| setCustomProp(node.el, '__l_has_inserted', true); | ||
| var nextEl = node.el.nextElementSibling; | ||
| nextEl.removeAttribute('l-if'); | ||
| var ast = compile(nextEl, state); | ||
| patch(ast, directives, state, Object.keys(state)); | ||
| } | ||
| }; | ||
@@ -548,10 +583,13 @@ | ||
| var _b = __read(name.split('.'), 2), | ||
| prop = _b[1]; | ||
| if (!getCustomProp(el, '__l_model_registered')) { | ||
| var _b = __read(name.split('.'), 2), | ||
| prop = _b[1]; | ||
| var callback = function callback() { | ||
| return inputCallback(el, hydratedValue, data, state); | ||
| }; | ||
| var callback = function callback() { | ||
| return inputCallback(el, hydratedValue, data, state); | ||
| }; | ||
| if (prop === 'debounce') el.onchange = callback;else el.oninput = callback; | ||
| el.addEventListener(prop === 'debounce' ? 'change' : 'input', callback); | ||
| setCustomProp(el, '__l_model_registered', true); | ||
| } | ||
| }; | ||
@@ -565,3 +603,4 @@ | ||
| var options = {}; | ||
| if (el.__l_on_registered) return; | ||
| var globalScopeEventProps = ['away', 'global']; | ||
| if (getCustomProp(el, '__l_on_registered')) return; | ||
@@ -578,2 +617,8 @@ var _b = __read(name.split('.'), 2), | ||
| if (eventProp === 'stop') $event.stopPropagation(); | ||
| if (eventProp === 'away') { | ||
| if (el.contains($event.target)) return; | ||
| if (el.offsetWidth < 1 && el.offsetHeight < 1) return; | ||
| } | ||
| data.compute(state); | ||
@@ -584,4 +629,4 @@ }; | ||
| options.passive = eventProp === 'passive'; | ||
| el.addEventListener(eventName, handler, options); | ||
| el.__l_on_registered = handler; | ||
| (globalScopeEventProps.includes(String(eventProp)) ? document : el).addEventListener(eventName, handler, options); | ||
| setCustomProp(el, '__l_on_registered', true); | ||
| }; | ||
@@ -595,4 +640,3 @@ | ||
| state = _a.state; | ||
| var key = data.value.replace(semicolonCaptureRE(), ''); | ||
| if (key in state) el.textContent = String(state[key]);else el.textContent = (_b = data.compute(state)) !== null && _b !== void 0 ? _b : data.value; | ||
| el.textContent = (_b = data.compute(state)) !== null && _b !== void 0 ? _b : data.value; | ||
| }; | ||
@@ -614,3 +658,3 @@ | ||
| var currArray = state[target]; | ||
| var template = String(el.__l_for_template); | ||
| var template = getCustomProp(el, '__l_for_template'); | ||
| if (el.innerHTML.trim() === template) el.innerHTML = ''; | ||
@@ -621,3 +665,4 @@ var arrayDiff = currArray.length - el.children.length; | ||
| if (arrayDiff < 0) el.removeChild(el.lastChild);else { | ||
| var temp = document.createElement('div'); | ||
| var tag = template.startsWith('<th') ? 'thead' : template.startsWith('<td') || template.startsWith('<tr') ? 'tbody' : 'div'; | ||
| var temp = document.createElement(tag); | ||
| var content = template; | ||
@@ -634,9 +679,9 @@ | ||
| temp.innerHTML = content; | ||
| el.appendChild(temp.firstChild); | ||
| el.appendChild(temp.firstElementChild); | ||
| } | ||
| } | ||
| } | ||
| el.__l = {}; | ||
| setCustomProp(el, '__l', true); | ||
| var ast = compile(el, state); | ||
| patch(ast, directives, state, data.keys); | ||
| patch(ast, directives, state, data.deps); | ||
| }; | ||
@@ -663,3 +708,2 @@ | ||
| }; | ||
| var reactive = function reactive(state, callback) { | ||
@@ -677,17 +721,17 @@ var handler = { | ||
| var hasArrayMutationKey = !isNaN(Number(key)) || key === 'length'; | ||
| var keys = []; | ||
| var props = []; | ||
| if (target instanceof Array && hasArrayMutationKey) { | ||
| keys = Object.keys(state).filter(function (k) { | ||
| return arrayEquals(state[k], target); | ||
| props = Object.keys(state).filter(function (prop) { | ||
| return arrayEquals(state[prop], target); | ||
| }); | ||
| } else { | ||
| if (Object.keys(state).some(function (key) { | ||
| return target[key] === undefined; | ||
| if (Object.keys(state).some(function (prop) { | ||
| return target[prop] === undefined; | ||
| })) { | ||
| keys = Object.keys(state).filter(function (key) { | ||
| return _typeof(state[key]) === 'object'; | ||
| props = Object.keys(state).filter(function (prop) { | ||
| return _typeof(state[prop]) === 'object'; | ||
| }); | ||
| } else { | ||
| keys = [key]; | ||
| props = [key]; | ||
| } | ||
@@ -697,3 +741,3 @@ } | ||
| target[key] = value; | ||
| callback(keys); | ||
| callback(props); | ||
| return true; | ||
@@ -721,3 +765,3 @@ } | ||
| this.render(); | ||
| rootEl.__l = this; | ||
| setCustomProp(rootEl, '__l', this); | ||
| return this.state; | ||
@@ -730,8 +774,8 @@ }; | ||
| Component.prototype.render = function (keys) { | ||
| if (keys === void 0) { | ||
| keys = Object.keys(this.state); | ||
| Component.prototype.render = function (props) { | ||
| if (props === void 0) { | ||
| props = Object.keys(this.state); | ||
| } | ||
| patch(this.ast, directives, this.state, keys); | ||
| patch(this.ast, directives, this.state, props); | ||
| }; | ||
@@ -745,2 +789,3 @@ | ||
| var luciaLoadEvent = new CustomEvent('lucia:load'); | ||
| var init = function init(element) { | ||
@@ -756,3 +801,3 @@ if (element === void 0) { | ||
| elements.filter(function (el) { | ||
| return el.__l === undefined; | ||
| return getCustomProp(el, '__l') === undefined; | ||
| }).map(function (el) { | ||
@@ -768,2 +813,3 @@ var expression = el.getAttribute(stateDirective); | ||
| }); | ||
| document.dispatchEvent(luciaLoadEvent); | ||
| }; | ||
@@ -775,3 +821,4 @@ | ||
| exports.init = init; | ||
| exports.luciaLoadEvent = luciaLoadEvent; | ||
| exports.patch = patch; | ||
| exports.reactive = reactive; |
@@ -1,1 +0,1 @@ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=function(){return(e=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function t(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function r(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,i,a=r.call(e),o=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)o.push(n.value)}catch(e){i={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(i)throw i.error}}return o}function n(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(r(arguments[t]));return e}var i;!function(e){e["@"]="on",e[":"]="bind"}(i||(i={}));var a=function(e){return new RegExp("\\b"+e+"\\b","gim")};function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var l=function(e,t,r){var n="with($state){"+(null==r||r?"return "+e:e)+"}";return function(i){try{var a=e.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim,""),o=r?Object.keys(i).indexOf(a):-1;if(-1!==o){var l=Object.values(i)[o],u=/\[(\d+)\]/gim.exec(e);return u&&u[1]&&l instanceof Array&&!isNaN(u[1])?l[Number(u[1])]:e.endsWith("()")?l():l}return new Function("$state","$el",n)(i,t||null)}catch(r){console.warn('Lucia Error: "'+r+'"\n\nExpression: "'+e+'"\nElement:',t||null)}}},u=function(e){return n(new Set(e))},s=function(e,o){var s=r(function(e,r){var o,s;void 0===r&&(r={});var c={},f=[];if(e.attributes){var v=function(t,o){var s=[],v=Object.keys(r),p=!0,y=v.filter((function(e){var t=a(e).test(String(o));if("function"==typeof r[e]&&t){var i=v.filter((function(t){return a(t).test(String(r[e]))}));s.push.apply(s,n(i))}return t}));/on|@/gim.test(t)&&(p=!1),t.includes("for")&&void 0===e.__l_for_template&&(e.__l_for_template=String(e.innerHTML).trim(),p=!1);var d=u(n(y,s));f.push.apply(f,n(d));var m={compute:l(o,e,p),keys:d,value:o};t.startsWith("l-")?c[t.slice("l-".length)]=m:Object.keys(i).includes(t[0])&&(c[i[t[0]]+":"+t.slice(1)]=m)};try{for(var p=t(e.attributes),y=p.next();!y.done;y=p.next()){var d=y.value;v(d.name,d.value)}}catch(e){o={error:e}}finally{try{y&&!y.done&&(s=p.return)&&s.call(p)}finally{if(o)throw o.error}}}return[c,u(f)]}(e,o),2),c=s[0],f=s[1],v=Object.keys(c).length>0,p=Object.values(c).some((function(e){var t=e.value;return Object.keys(o).some((function(e){return a(e).test(t)}))}));return v?{el:e,keys:f,directives:c,type:p?1:0}:null},c=function(e){return e.hasAttribute("l-for")},f=function e(r,i){var a,o;void 0===i&&(i=!1);var l,u=[],s=c(r),f=!!(l=r).parentElement&&l.parentElement.hasAttribute("l-for");if(!i&&(s||f))return u;if(i&&s||u.push(r),!s&&!f||i)try{for(var v=t(r.childNodes),p=v.next();!p.done;p=v.next()){var y=p.value;y.nodeType===Node.ELEMENT_NODE&&(!i&&c(y)?u.push(y):u.push.apply(u,n(e(y,i))))}}catch(e){a={error:e}}finally{try{p&&!p.done&&(o=v.return)&&o.call(v)}finally{if(a)throw a.error}}return u},v=function(e,r){var n,a;if(void 0===r&&(r={}),!e)throw new Error("Please provide a Element");var o=[],l=void 0!==e.__l&&c(e),u=f(e,l);try{for(var v=t(u),p=v.next();!p.done;p=v.next()){var y=p.value;if(new RegExp("(l-|"+Object.keys(i).join("|")+")\\w+","gim").test(y.outerHTML)){if(y.hasAttribute("l-state"))continue;var d=s(y,r);d&&o.push(d)}}}catch(e){n={error:e}}finally{try{p&&!p.done&&(a=v.return)&&a.call(v)}finally{if(n)throw n.error}}return o},p=function(e,n,i,a){var o,l;void 0===i&&(i={}),void 0===a&&(a=[]);for(var u=[],s=function(o){var l,s,c=e[o],f=0===c.type;if(f&&u.push(o),!a.some((function(e){return c.keys.includes(e)}))&&!f)return"continue";var v=function(e,t){if(a.some((function(e){return t.keys.includes(e)}))||f){var r={el:c.el,name:e,data:t,state:i};d(r,n)}};try{for(var p=(l=void 0,t(Object.entries(c.directives))),y=p.next();!y.done;y=p.next()){var m=r(y.value,2);v(m[0],m[1])}}catch(e){l={error:e}}finally{try{y&&!y.done&&(s=p.return)&&s.call(p)}finally{if(l)throw l.error}}},c=0;c<e.length;c++)s(c);try{for(var f=t(u),v=f.next();!v.done;v=f.next()){c=v.value;e.splice(c,1)}}catch(e){o={error:e}}finally{try{v&&!v.done&&(l=f.return)&&l.call(f)}finally{if(o)throw o.error}}},y={BIND:function(e){var t=e.el,r=e.name,n=e.data,i=e.state;switch(r.split(":")[1]){case"class":var a=n.compute(i);if("string"==typeof a)return t.setAttribute("class",(t.className+" "+a).trim());if(a instanceof Array)return t.setAttribute("class",(t.className+" "+a.join(" ")).trim());var l=[];for(var u in a)a[u]&&!t.className.includes(u)&&l.push(u);var s=new RegExp("\\b"+Object.keys(a).join("|")+"\\b","gim"),c=t.className.replace(s,"");return l.length>0?t.setAttribute("class",(c+" "+l.join(" ")).trim()):t.className.trim().length>0?t.setAttribute("class",c.trim()):t.removeAttribute("class");case"style":var f=n.compute(i);for(var u in t.removeAttribute("style"),f)t.style[u]=f[u];break;default:var v=n.compute(i);if("object"===o(v)&&null!==v)for(var u in v)v[u]?t.setAttribute(u,v[u]):t.removeAttribute(u);else v?t.setAttribute(r.split(":")[1],v):t.removeAttribute(r.split(":")[1])}},HTML:function(e){var t,r=e.el,n=e.data,i=e.state,a=n.value.replace(/(;)/gim,"");a in i&&(r.innerHTML=String(i[a])),r.innerHTML=null!==(t=n.compute(i))&&void 0!==t?t:n.value,r.__l={};var o=v(r,i);p(o,y,i,n.keys)},IF:function(e){var t=e.el,r=e.name,n=e.data,i=e.state,a=r.split(":")[1],o=n.value.replace(/(;)/gim,""),l=!0;l=o in i?!!i[o]:!!n.compute(i),"hidden"===a?t.hidden=!l:t.style.display=!1===l?"none":null},MODEL:function(e){var t=e.el,n=e.name,i=e.data,a=e.state,o=t,l=a[i.value];o.value!==String(l)&&(o.value=String(l));var u=function(){return function(e,t,r,n){var i,a="number"==typeof t&&!isNaN(e.value),o="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);return i=a?parseFloat(e.value):o?"true"===e.value:l?"null"===e.value?null:void 0:String(e.value),n[r.value]=i,i}(o,l,i,a)};"debounce"===r(n.split("."),2)[1]?o.onchange=u:o.oninput=u},ON:function(e){var t=e.el,n=e.name,i=e.data,a=e.state,o={};if(!t.__l_on_registered){var l=r(n.split("."),2),u=l[0],s=l[1],c=u.split(":")[1],f=s||null,v=function(e){"prevent"===f&&e.preventDefault(),"stop"===f&&e.stopPropagation(),i.compute(a)};o.once="once"===f,o.passive="passive"===f,t.addEventListener(c,v,o),t.__l_on_registered=v}},TEXT:function(e){var t,r=e.el,n=e.data,i=e.state,a=n.value.replace(/(;)/gim,"");r.textContent=a in i?String(i[a]):null!==(t=n.compute(i))&&void 0!==t?t:n.value},FOR:function(e){var t=e.el,n=e.data,i=e.state,o=r(n.value.split(/in +/g),2),l=o[0],u=o[1],s=r(l.replace(/\(|\)/gim,"").split(","),2),c=s[0],f=s[1],d=i[u],m=String(t.__l_for_template);t.innerHTML.trim()===m&&(t.innerHTML="");var h=d.length-t.children.length;if(0===d.length)t.innerHTML="";else if(0!==h)for(var b=Math.abs(h);b>0;b--)if(h<0)t.removeChild(t.lastChild);else{var g=document.createElement("div"),_=m;c&&(_=_.replace(a("this\\."+c.trim()),u+"["+(d.length-b)+"]")),f&&(_=_.replace(a("this\\."+f.trim()),String(d.length-b))),g.innerHTML=_,t.appendChild(g.firstChild)}t.__l={};var x=v(t,i);p(x,y,i,n.keys)}},d=function(e,t){t[e.name.split(/:|\./gim)[0].toUpperCase()](e)},m=function(e,t){var r={get:function(e,t){return"object"===o(e[t])&&null!==e[t]?new Proxy(e[t],r):e[t]},set:function(r,n,i){if("function"==typeof e[n])return!1;var a=!isNaN(Number(n))||"length"===n,l=[];return l=r instanceof Array&&a?Object.keys(e).filter((function(t){return n=e[t],i=r,n instanceof Array&&i instanceof Array&&n.length===i.length&&n.every((function(e,t){return e===i[t]}));var n,i})):Object.keys(e).some((function(e){return void 0===r[e]}))?Object.keys(e).filter((function(t){return"object"===o(e[t])})):[n],r[n]=i,t(l),!0}};return Proxy.revocable(Object.seal(e),r)},h=function(){function t(e){void 0===e&&(e={}),this.state=e,this.directives={}}return t.prototype.mount=function(t){var r="string"==typeof t?document.querySelector(t):t;return this.ast=v(r,this.state),this.state=m(this.state,this.render.bind(this)).proxy,this.directives=e(e({},this.directives),y),this.render(),r.__l=this,this.state},t.prototype.directive=function(e,t){this.directives[e.toUpperCase()]=t},t.prototype.render=function(e){void 0===e&&(e=Object.keys(this.state)),p(this.ast,y,this.state,e)},t}(),b=function(e){return new h(e)};exports.compile=v,exports.component=b,exports.directives=y,exports.init=function(e){void 0===e&&(e=document);var t="l-state";n(e.querySelectorAll("[l-state]")).filter((function(e){return void 0===e.__l})).map((function(e){var r=e.getAttribute(t);try{var n=new Function("return "+(r||{}));b(n()).mount(e)}catch(t){console.warn('Lucia Error: "'+t+'"\n\nExpression: "'+r+'"\nElement:',e)}}))},exports.patch=p,exports.reactive=m; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=function(){return(e=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function t(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function r(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,i,o=r.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(n=o.next()).done;)a.push(n.value)}catch(e){i={error:e}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(i)throw i.error}}return a}function n(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(r(arguments[t]));return e}var i;!function(e){e["@"]="on",e[":"]="bind"}(i||(i={}));var o=function(e){return new RegExp("\\b"+e+"\\b","gim")};function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var l=function(e){return e.replace(/\s+/gim," ").trim()},u=function(e,t,n){var i="with($state){"+(null==n||n?"return "+e:e)+"}";return function(o){try{var a=r([Object.keys(o),Object.values(o)],2),l=a[0],u=a[1],s=e.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim,""),c=n?l.indexOf(s):-1;if(-1!==c)return function(e,t,r){var n=t[r],i=/\[(\d+)\]/gim.exec(e);return i&&i[1]&&n instanceof Array&&!isNaN(i[1])?n[Number(i[1])]:e.endsWith("()")?n():n}(e,u,c);return new Function("$state","$el","$emit",i)(o,t,(function(e,t){var r=new CustomEvent(e,t);document.dispatchEvent(r)}))}catch(r){console.warn('Lucia Error: "'+r+'"\n\nExpression: "'+e+'"\nElement:',t)}}},s=function(e,t){return e[t]},c=function(e,t,r){return e[t]=r},f=function(e){return n(new Set(e))},v=function(e){return e.hasAttribute("l-for")},p=function(e,t){var n=r(d(e,t),2),i=n[0],a=n[1],l=Object.keys(i).length>0,u=Object.values(i).some((function(e){var r=e.value;return Object.keys(t).some((function(e){return o(e).test(r)}))}));return l?{el:e,deps:a,directives:i,type:u?1:0}:null},d=function(e,r){var a,l;void 0===r&&(r={});var v={},p=[],d=function(t,a){var l=[],d=Object.keys(r),y=!0,m=d.filter((function(e){var t=o(e).test(String(a));if("function"==typeof r[e]&&t){var i=d.filter((function(t){return o(t).test(String(r[e]))}));l.push.apply(l,n(i))}return t}));/on|@/gim.test(t)&&(y=!1),t.includes("for")&&void 0===s(e,"__l_for_template")&&(c(e,"__l_for_template",String(e.innerHTML).trim()),y=!1);var h=f(n(m,l));p.push.apply(p,n(h));var b={compute:u(a,e,y),deps:h,value:a};t.startsWith("l-")?v[t.slice("l-".length)]=b:Object.keys(i).includes(t[0])&&(v[i[t[0]]+":"+t.slice(1)]=b)};try{for(var y=t(e.attributes),m=y.next();!m.done;m=y.next()){var h=m.value;d(h.name,h.value)}}catch(e){a={error:e}}finally{try{m&&!m.done&&(l=y.return)&&l.call(y)}finally{if(a)throw a.error}}return[v,f(p)]},y=function e(r,i){var o,a;void 0===i&&(i=!1);var l,u=[],s=v(r),c=!!(l=r).parentElement&&l.parentElement.hasAttribute("l-for");if(!i&&(s||c))return u;if(i&&s||u.push(r),!s&&!c||i)try{for(var f=t(r.childNodes),p=f.next();!p.done;p=f.next()){var d=p.value;d.nodeType===Node.ELEMENT_NODE&&(!i&&v(d)?u.push(d):u.push.apply(u,n(e(d,i))))}}catch(e){o={error:e}}finally{try{p&&!p.done&&(a=f.return)&&a.call(f)}finally{if(o)throw o.error}}return u},m=function(e,r){var n,o;if(void 0===r&&(r={}),!e)throw new Error("Please provide a Element");var a=[],l=void 0!==s(e,"__l")&&v(e),u=y(e,l);try{for(var c=t(u),f=c.next();!f.done;f=c.next()){var d=f.value;if(!d.hasAttribute("l-state")&&new RegExp("(l-|"+Object.keys(i).join("|")+")\\w+","gim").test(d.outerHTML)){var m=p(d,r);m&&a.push(m)}}}catch(e){n={error:e}}finally{try{f&&!f.done&&(o=c.return)&&o.call(c)}finally{if(n)throw n.error}}return a},h=function(e,n,i,o){var a,l;void 0===i&&(i={}),void 0===o&&(o=[]);for(var u=[],s=function(a){var l,s,c=e[a],f=0===c.type;if(f&&u.push(a),!o.some((function(e){return c.deps.includes(e)}))&&!f)return"continue";var v=function(e,t){if(o.some((function(e){return t.deps.includes(e)}))||f){var r={el:c.el,name:e,data:t,node:c,state:i};_(r,n)}};try{for(var p=(l=void 0,t(Object.entries(c.directives))),d=p.next();!d.done;d=p.next()){var y=r(d.value,2);v(y[0],y[1])}}catch(e){l={error:e}}finally{try{d&&!d.done&&(s=p.return)&&s.call(p)}finally{if(l)throw l.error}}},c=0;c<e.length;c++)s(c);try{for(var f=t(u),v=f.next();!v.done;v=f.next()){c=v.value;e.splice(c,1)}}catch(e){a={error:e}}finally{try{v&&!v.done&&(l=f.return)&&l.call(f)}finally{if(a)throw a.error}}},b={BIND:function(e){var t=e.el,r=e.name,n=e.data,i=e.state;switch(r.split(":")[1]){case"class":var o=n.compute(i);if("string"==typeof o)return t.setAttribute("class",l(t.className+" "+o));if(o instanceof Array)return t.setAttribute("class",l(t.className+" "+o.join(" ")));var u=[];for(var s in o)o[s]&&u.push(s);var c=new RegExp("\\b"+Object.keys(o).join("|")+"\\b","gim"),f=t.className.replace(c,"");return u.length>0?t.setAttribute("class",l(f+" "+u.join(" "))):l(t.className).length>0?t.setAttribute("class",l(f)):t.removeAttribute("class");case"style":var v=n.compute(i);for(var s in t.removeAttribute("style"),v)t.style[s]=v[s];break;default:var p=n.compute(i);if("object"===a(p)&&null!==p)for(var s in p)p[s]?t.setAttribute(s,p[s]):t.removeAttribute(s);else p?t.setAttribute(r.split(":")[1],p):t.removeAttribute(r.split(":")[1])}},HTML:function(e){var t,r=e.el,n=e.data,i=e.state;r.innerHTML=null!==(t=n.compute(i))&&void 0!==t?t:n.value;var o=m(r,i);h(o,b,i,n.deps)},IF:function(e){var t,r,n=e.el,i=e.data,o=e.state,a=e.node;a=a;var l=!!i.compute(o);if(!s(a.el,"__l_if_template")){var u=document.createElement("template");c(u,"__l_if_template",!0),u.content.appendChild(n.cloneNode(!0)),n.replaceWith(u),a.el=u}var f=s(a.el,"__l_if_has_inserted");if(!l&&f)null===(t=a.el.nextElementSibling)||void 0===t||t.remove(),c(a.el,"__l_has_inserted",!1);else if(l&&!f){var v=a.el.content.cloneNode(!0);null===(r=a.el.parentElement)||void 0===r||r.insertBefore(v,a.el.nextElementSibling),c(a.el,"__l_has_inserted",!0);var p=a.el.nextElementSibling;p.removeAttribute("l-if");var d=m(p,o);h(d,b,o,Object.keys(o))}},MODEL:function(e){var t=e.el,n=e.name,i=e.data,o=e.state,a=t,l=o[i.value];if(a.value!==String(l)&&(a.value=String(l)),!s(a,"__l_model_registered")){var u=r(n.split("."),2)[1];a.addEventListener("debounce"===u?"change":"input",(function(){return function(e,t,r,n){var i,o="number"==typeof t&&!isNaN(e.value),a="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);return i=o?parseFloat(e.value):a?"true"===e.value:l?"null"===e.value?null:void 0:String(e.value),n[r.value]=i,i}(a,l,i,o)})),c(a,"__l_model_registered",!0)}},ON:function(e){var t=e.el,n=e.name,i=e.data,o=e.state,a={};if(!s(t,"__l_on_registered")){var l=r(n.split("."),2),u=l[0],f=l[1],v=u.split(":")[1],p=f||null;a.once="once"===p,a.passive="passive"===p,(["away","global"].includes(String(p))?document:t).addEventListener(v,(function(e){if("prevent"===p&&e.preventDefault(),"stop"===p&&e.stopPropagation(),"away"===p){if(t.contains(e.target))return;if(t.offsetWidth<1&&t.offsetHeight<1)return}i.compute(o)}),a),c(t,"__l_on_registered",!0)}},TEXT:function(e){var t,r=e.el,n=e.data,i=e.state;r.textContent=null!==(t=n.compute(i))&&void 0!==t?t:n.value},FOR:function(e){var t=e.el,n=e.data,i=e.state,a=r(n.value.split(/in +/g),2),l=a[0],u=a[1],f=r(l.replace(/\(|\)/gim,"").split(","),2),v=f[0],p=f[1],d=i[u],y=s(t,"__l_for_template");t.innerHTML.trim()===y&&(t.innerHTML="");var _=d.length-t.children.length;if(0===d.length)t.innerHTML="";else if(0!==_)for(var g=Math.abs(_);g>0;g--)if(_<0)t.removeChild(t.lastChild);else{var x=y.startsWith("<th")?"thead":y.startsWith("<td")||y.startsWith("<tr")?"tbody":"div",E=document.createElement(x),w=y;v&&(w=w.replace(o("this\\."+v.trim()),u+"["+(d.length-g)+"]")),p&&(w=w.replace(o("this\\."+p.trim()),String(d.length-g))),E.innerHTML=w,t.appendChild(E.firstElementChild)}c(t,"__l",!0);var j=m(t,i);h(j,b,i,n.deps)}},_=function(e,t){t[e.name.split(/:|\./gim)[0].toUpperCase()](e)},g=function(e,t){var r={get:function(e,t){return"object"===a(e[t])&&null!==e[t]?new Proxy(e[t],r):e[t]},set:function(r,n,i){if("function"==typeof e[n])return!1;var o=!isNaN(Number(n))||"length"===n,l=[];return l=r instanceof Array&&o?Object.keys(e).filter((function(t){return n=e[t],i=r,n instanceof Array&&i instanceof Array&&n.length===i.length&&n.every((function(e,t){return e===i[t]}));var n,i})):Object.keys(e).some((function(e){return void 0===r[e]}))?Object.keys(e).filter((function(t){return"object"===a(e[t])})):[n],r[n]=i,t(l),!0}};return Proxy.revocable(Object.seal(e),r)},x=function(){function t(e){void 0===e&&(e={}),this.state=e,this.directives={}}return t.prototype.mount=function(t){var r="string"==typeof t?document.querySelector(t):t;return this.ast=m(r,this.state),this.state=g(this.state,this.render.bind(this)).proxy,this.directives=e(e({},this.directives),b),this.render(),c(r,"__l",this),this.state},t.prototype.directive=function(e,t){this.directives[e.toUpperCase()]=t},t.prototype.render=function(e){void 0===e&&(e=Object.keys(this.state)),h(this.ast,b,this.state,e)},t}(),E=function(e){return new x(e)},w=new CustomEvent("lucia:load");exports.compile=m,exports.component=E,exports.directives=b,exports.init=function(e){void 0===e&&(e=document);var t="l-state";n(e.querySelectorAll("[l-state]")).filter((function(e){return void 0===s(e,"__l")})).map((function(e){var r=e.getAttribute(t);try{var n=new Function("return "+(r||{}));E(n()).mount(e)}catch(t){console.warn('Lucia Error: "'+t+'"\n\nExpression: "'+r+'"\nElement:',e)}})),document.dispatchEvent(w)},exports.luciaLoadEvent=w,exports.patch=h,exports.reactive=g; |
@@ -73,5 +73,2 @@ /*! ***************************************************************************** | ||
| }; | ||
| var semicolonCaptureRE = function semicolonCaptureRE() { | ||
| return /(;)/gim; | ||
| }; | ||
| var arrayIndexCaptureRE = function arrayIndexCaptureRE() { | ||
@@ -89,4 +86,4 @@ return /\[(\d+)\]/gim; | ||
| }; | ||
| var expressionPropRE = function expressionPropRE(key) { | ||
| return new RegExp("\\b" + key + "\\b", 'gim'); | ||
| var expressionPropRE = function expressionPropRE(prop) { | ||
| return new RegExp("\\b" + prop + "\\b", 'gim'); | ||
| }; | ||
@@ -110,2 +107,5 @@ | ||
| var formatAcceptableWhitespace = function formatAcceptableWhitespace(expression) { | ||
| return expression.replace(/\s+/gim, ' ').trim(); | ||
| }; | ||
| var bindDirective = function bindDirective(_a) { | ||
@@ -122,10 +122,10 @@ var el = _a.el, | ||
| if (typeof hydratedClasses === 'string') { | ||
| return el.setAttribute('class', (el.className + " " + hydratedClasses).trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(el.className + " " + hydratedClasses)); | ||
| } else if (hydratedClasses instanceof Array) { | ||
| return el.setAttribute('class', (el.className + " " + hydratedClasses.join(' ')).trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(el.className + " " + hydratedClasses.join(' '))); | ||
| } else { | ||
| var classes = []; | ||
| for (var key in hydratedClasses) { | ||
| if (hydratedClasses[key] && !el.className.includes(key)) classes.push(key); | ||
| for (var prop in hydratedClasses) { | ||
| if (hydratedClasses[prop]) classes.push(prop); | ||
| } | ||
@@ -137,5 +137,5 @@ | ||
| if (classes.length > 0) { | ||
| return el.setAttribute('class', (rawClasses + " " + classes.join(' ')).trim()); | ||
| } else if (el.className.trim().length > 0) { | ||
| return el.setAttribute('class', rawClasses.trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(rawClasses + " " + classes.join(' '))); | ||
| } else if (formatAcceptableWhitespace(el.className).length > 0) { | ||
| return el.setAttribute('class', formatAcceptableWhitespace(rawClasses)); | ||
| } else { | ||
@@ -150,4 +150,4 @@ return el.removeAttribute('class'); | ||
| for (var key in hydratedStyles) { | ||
| el.style[key] = hydratedStyles[key]; | ||
| for (var prop in hydratedStyles) { | ||
| el.style[prop] = hydratedStyles[prop]; | ||
| } | ||
@@ -161,7 +161,7 @@ | ||
| if (_typeof(hydratedAttributes) === 'object' && hydratedAttributes !== null) { | ||
| for (var key in hydratedAttributes) { | ||
| if (hydratedAttributes[key]) { | ||
| el.setAttribute(key, hydratedAttributes[key]); | ||
| for (var prop in hydratedAttributes) { | ||
| if (hydratedAttributes[prop]) { | ||
| el.setAttribute(prop, hydratedAttributes[prop]); | ||
| } else { | ||
| el.removeAttribute(key); | ||
| el.removeAttribute(prop); | ||
| } | ||
@@ -179,2 +179,14 @@ } | ||
| var interpretProps = function interpretProps(expression, stateValues, positionInState) { | ||
| var value = stateValues[positionInState]; | ||
| var arrayIndex = arrayIndexCaptureRE().exec(expression); | ||
| if (arrayIndex && arrayIndex[1] && value instanceof Array && !isNaN(arrayIndex[1])) { | ||
| return value[Number(arrayIndex[1])]; | ||
| } else if (expression.endsWith('()')) { | ||
| return value(); | ||
| } else { | ||
| return value; | ||
| } | ||
| }; | ||
| var computeExpression = function computeExpression(expression, el, returnable) { | ||
@@ -184,19 +196,21 @@ var formattedExpression = "with($state){" + ((returnable !== null && returnable !== void 0 ? returnable : true) ? "return " + expression : expression) + "}"; | ||
| try { | ||
| var _a = __read([Object.keys(state), Object.values(state)], 2), | ||
| propKeys = _a[0], | ||
| propValues = _a[1]; | ||
| var strippedExpression = expression.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim, ''); | ||
| var positionInState = returnable ? Object.keys(state).indexOf(strippedExpression) : -1; | ||
| var positionInState = returnable ? propKeys.indexOf(strippedExpression) : -1; | ||
| if (positionInState !== -1) { | ||
| var value = Object.values(state)[positionInState]; | ||
| var arrayIndex = arrayIndexCaptureRE().exec(expression); | ||
| return interpretProps(expression, propValues, positionInState); | ||
| } else { | ||
| var emit = function emit(name, options) { | ||
| var event = new CustomEvent(name, options); | ||
| document.dispatchEvent(event); | ||
| }; | ||
| if (arrayIndex && arrayIndex[1] && value instanceof Array && !isNaN(arrayIndex[1])) { | ||
| return value[Number(arrayIndex[1])]; | ||
| } else if (expression.endsWith('()')) { | ||
| return value(); | ||
| } else return value; | ||
| } else { | ||
| return new Function('$state', '$el', formattedExpression)(state, el || null); | ||
| return new Function('$state', '$el', '$emit', formattedExpression)(state, el, emit); | ||
| } | ||
| } catch (err) { | ||
| console.warn("Lucia Error: \"" + err + "\"\n\nExpression: \"" + expression + "\"\nElement:", el || null); | ||
| console.warn("Lucia Error: \"" + err + "\"\n\nExpression: \"" + expression + "\"\nElement:", el); | ||
| } | ||
@@ -206,5 +220,39 @@ }; | ||
| var getCustomProp = function getCustomProp(el, prop) { | ||
| return el[prop]; | ||
| }; | ||
| var setCustomProp = function setCustomProp(el, prop, value) { | ||
| return el[prop] = value; | ||
| }; | ||
| var removeDupesFromArray = function removeDupesFromArray(array) { | ||
| return __spread(new Set(array)); | ||
| }; | ||
| var isListRenderScope = function isListRenderScope(el) { | ||
| return el.hasAttribute(DIRECTIVE_PREFIX + "for"); | ||
| }; | ||
| var isUnderListRenderScope = function isUnderListRenderScope(el) { | ||
| if (!el.parentElement) return false; | ||
| return el.parentElement.hasAttribute(DIRECTIVE_PREFIX + "for"); | ||
| }; | ||
| var createASTNode = function createASTNode(el, state) { | ||
| var _a = __read(collectAndInitDirectives(el, state), 2), | ||
| directives = _a[0], | ||
| deps = _a[1]; | ||
| var hasDirectives = Object.keys(directives).length > 0; | ||
| var hasDepInDirectives = Object.values(directives).some(function (_a) { | ||
| var value = _a.value; | ||
| return Object.keys(state).some(function (prop) { | ||
| return expressionPropRE(prop).test(value); | ||
| }); | ||
| }); | ||
| if (!hasDirectives) return null; | ||
| return { | ||
| el: el, | ||
| deps: deps, | ||
| directives: directives, | ||
| type: hasDepInDirectives ? 1 : 0 | ||
| }; | ||
| }; | ||
| var collectAndInitDirectives = function collectAndInitDirectives(el, state) { | ||
@@ -218,96 +266,66 @@ var e_1, _a; | ||
| var directives = {}; | ||
| var nodeKeys = []; | ||
| var nodeDeps = []; | ||
| if (el.attributes) { | ||
| var _loop_1 = function _loop_1(name_1, value) { | ||
| var keysInFunctions = []; | ||
| var keysInState = Object.keys(state); | ||
| var returnable = true; | ||
| var keys = keysInState.filter(function (key) { | ||
| var hasKey = expressionPropRE(key).test(String(value)); | ||
| var _loop_1 = function _loop_1(name_1, value) { | ||
| var depsInFunctions = []; | ||
| var propsInState = Object.keys(state); | ||
| var returnable = true; | ||
| var deps = propsInState.filter(function (prop) { | ||
| var hasDep = expressionPropRE(prop).test(String(value)); | ||
| if (typeof state[key] === 'function' && hasKey) { | ||
| var keysInFunction = keysInState.filter(function (k) { | ||
| return expressionPropRE(k).test(String(state[key])); | ||
| }); | ||
| keysInFunctions.push.apply(keysInFunctions, __spread(keysInFunction)); | ||
| } | ||
| if (typeof state[prop] === 'function' && hasDep) { | ||
| var depsInFunction = propsInState.filter(function (p) { | ||
| return expressionPropRE(p).test(String(state[prop])); | ||
| }); | ||
| depsInFunctions.push.apply(depsInFunctions, __spread(depsInFunction)); | ||
| } | ||
| return hasKey; | ||
| }); | ||
| if (eventDirectivePrefixRE().test(name_1)) returnable = false; | ||
| return hasDep; | ||
| }); | ||
| if (eventDirectivePrefixRE().test(name_1)) returnable = false; | ||
| if (name_1.includes('for') && el.__l_for_template === undefined) { | ||
| el.__l_for_template = String(el.innerHTML).trim(); | ||
| returnable = false; | ||
| } | ||
| if (name_1.includes('for') && getCustomProp(el, '__l_for_template') === undefined) { | ||
| setCustomProp(el, '__l_for_template', String(el.innerHTML).trim()); | ||
| returnable = false; | ||
| } | ||
| var uniqueCompiledKeys = removeDupesFromArray(__spread(keys, keysInFunctions)); | ||
| nodeKeys.push.apply(nodeKeys, __spread(uniqueCompiledKeys)); | ||
| var directiveData = { | ||
| compute: computeExpression(value, el, returnable), | ||
| keys: uniqueCompiledKeys, | ||
| value: value | ||
| }; | ||
| var uniqueCompiledDeps = removeDupesFromArray(__spread(deps, depsInFunctions)); | ||
| nodeDeps.push.apply(nodeDeps, __spread(uniqueCompiledDeps)); | ||
| var directiveData = { | ||
| compute: computeExpression(value, el, returnable), | ||
| deps: uniqueCompiledDeps, | ||
| value: value | ||
| }; | ||
| if (name_1.startsWith(DIRECTIVE_PREFIX)) { | ||
| directives[name_1.slice(DIRECTIVE_PREFIX.length)] = directiveData; | ||
| } else if (Object.keys(DIRECTIVE_SHORTHANDS).includes(name_1[0])) { | ||
| directives[DIRECTIVE_SHORTHANDS[name_1[0]] + ":" + name_1.slice(1)] = directiveData; | ||
| } | ||
| if (name_1.startsWith(DIRECTIVE_PREFIX)) { | ||
| directives[name_1.slice(DIRECTIVE_PREFIX.length)] = directiveData; | ||
| } else if (Object.keys(DIRECTIVE_SHORTHANDS).includes(name_1[0])) { | ||
| directives[DIRECTIVE_SHORTHANDS[name_1[0]] + ":" + name_1.slice(1)] = directiveData; | ||
| } | ||
| }; | ||
| try { | ||
| for (var _b = __values(el.attributes), _c = _b.next(); !_c.done; _c = _b.next()) { | ||
| var _d = _c.value, | ||
| name_1 = _d.name, | ||
| value = _d.value; | ||
| _loop_1(name_1, value); | ||
| } | ||
| } catch (e_1_1) { | ||
| e_1 = { | ||
| error: e_1_1 | ||
| }; | ||
| } finally { | ||
| try { | ||
| for (var _b = __values(el.attributes), _c = _b.next(); !_c.done; _c = _b.next()) { | ||
| var _d = _c.value, | ||
| name_1 = _d.name, | ||
| value = _d.value; | ||
| _loop_1(name_1, value); | ||
| } | ||
| } catch (e_1_1) { | ||
| e_1 = { | ||
| error: e_1_1 | ||
| }; | ||
| if (_c && !_c.done && (_a = _b["return"])) _a.call(_b); | ||
| } finally { | ||
| try { | ||
| if (_c && !_c.done && (_a = _b["return"])) _a.call(_b); | ||
| } finally { | ||
| if (e_1) throw e_1.error; | ||
| } | ||
| if (e_1) throw e_1.error; | ||
| } | ||
| } | ||
| return [directives, removeDupesFromArray(nodeKeys)]; | ||
| return [directives, removeDupesFromArray(nodeDeps)]; | ||
| }; | ||
| var createASTNode = function createASTNode(el, state) { | ||
| var _a = __read(collectAndInitDirectives(el, state), 2), | ||
| directives = _a[0], | ||
| keys = _a[1]; | ||
| var hasDirectives = Object.keys(directives).length > 0; | ||
| var hasKeyInDirectives = Object.values(directives).some(function (_a) { | ||
| var value = _a.value; | ||
| return Object.keys(state).some(function (key) { | ||
| return expressionPropRE(key).test(value); | ||
| }); | ||
| }); | ||
| if (!hasDirectives) return null; | ||
| return { | ||
| el: el, | ||
| keys: keys, | ||
| directives: directives, | ||
| type: hasKeyInDirectives ? 1 : 0 | ||
| }; | ||
| }; | ||
| var isListRenderScope = function isListRenderScope(el) { | ||
| return el.hasAttribute(DIRECTIVE_PREFIX + "for"); | ||
| }; | ||
| var isUnderListRenderScope = function isUnderListRenderScope(el) { | ||
| if (!el.parentElement) return false; | ||
| return el.parentElement.hasAttribute(DIRECTIVE_PREFIX + "for"); | ||
| }; | ||
| var extractNodeChildrenAsCollection = function extractNodeChildrenAsCollection(rootNode, isListGroup) { | ||
| var e_1, _a; | ||
| var e_2, _a; | ||
@@ -337,5 +355,5 @@ if (isListGroup === void 0) { | ||
| } | ||
| } catch (e_1_1) { | ||
| e_1 = { | ||
| error: e_1_1 | ||
| } catch (e_2_1) { | ||
| e_2 = { | ||
| error: e_2_1 | ||
| }; | ||
@@ -346,3 +364,3 @@ } finally { | ||
| } finally { | ||
| if (e_1) throw e_1.error; | ||
| if (e_2) throw e_2.error; | ||
| } | ||
@@ -355,3 +373,3 @@ } | ||
| var compile = function compile(el, state) { | ||
| var e_2, _a; | ||
| var e_3, _a; | ||
@@ -364,3 +382,3 @@ if (state === void 0) { | ||
| var ast = []; | ||
| var isListGroup = el.__l !== undefined && isListRenderScope(el); | ||
| var isListGroup = getCustomProp(el, '__l') !== undefined && isListRenderScope(el); | ||
| var nodes = extractNodeChildrenAsCollection(el, isListGroup); | ||
@@ -371,8 +389,5 @@ | ||
| var node = nodes_1_1.value; | ||
| if (node.hasAttribute(DIRECTIVE_PREFIX + "state")) continue; | ||
| if (hasDirectiveRE().test(node.outerHTML)) { | ||
| if (node.hasAttribute(DIRECTIVE_PREFIX + "state")) { | ||
| continue; | ||
| } | ||
| var newASTNode = createASTNode(node, state); | ||
@@ -382,5 +397,5 @@ if (newASTNode) ast.push(newASTNode); | ||
| } | ||
| } catch (e_2_1) { | ||
| e_2 = { | ||
| error: e_2_1 | ||
| } catch (e_3_1) { | ||
| e_3 = { | ||
| error: e_3_1 | ||
| }; | ||
@@ -391,3 +406,3 @@ } finally { | ||
| } finally { | ||
| if (e_2) throw e_2.error; | ||
| if (e_3) throw e_3.error; | ||
| } | ||
@@ -399,3 +414,3 @@ } | ||
| var patch = function patch(ast, directives, state, changedKeys) { | ||
| var patch = function patch(ast, directives, state, changedProps) { | ||
| var e_1, _a; | ||
@@ -407,4 +422,4 @@ | ||
| if (changedKeys === void 0) { | ||
| changedKeys = []; | ||
| if (changedProps === void 0) { | ||
| changedProps = []; | ||
| } | ||
@@ -420,13 +435,13 @@ | ||
| if (isStatic) staticNodeCleanupQueue.push(i); | ||
| var nodeHasKey = changedKeys.some(function (key) { | ||
| return node.keys.includes(key); | ||
| var nodeHasDep = changedProps.some(function (prop) { | ||
| return node.deps.includes(prop); | ||
| }); | ||
| if (!nodeHasKey && !isStatic) return "continue"; | ||
| if (!nodeHasDep && !isStatic) return "continue"; | ||
| var _loop_2 = function _loop_2(directiveName, directiveData) { | ||
| var directiveHasKey = changedKeys.some(function (key) { | ||
| return directiveData.keys.includes(key); | ||
| var directiveHasDep = changedProps.some(function (prop) { | ||
| return directiveData.deps.includes(prop); | ||
| }); | ||
| if (directiveHasKey || isStatic) { | ||
| if (directiveHasDep || isStatic) { | ||
| var directiveProps = { | ||
@@ -436,2 +451,3 @@ el: node.el, | ||
| data: directiveData, | ||
| node: node, | ||
| state: state | ||
@@ -492,20 +508,39 @@ }; | ||
| state = _a.state; | ||
| var key = data.value.replace(semicolonCaptureRE(), ''); | ||
| if (key in state) el.innerHTML = String(state[key]); | ||
| el.innerHTML = (_b = data.compute(state)) !== null && _b !== void 0 ? _b : data.value; | ||
| el.__l = {}; | ||
| var ast = compile(el, state); | ||
| patch(ast, directives, state, data.keys); | ||
| patch(ast, directives, state, data.deps); | ||
| }; | ||
| var ifDirective = function ifDirective(_a) { | ||
| var _b, _c; | ||
| var el = _a.el, | ||
| name = _a.name, | ||
| data = _a.data, | ||
| state = _a.state; | ||
| var modifier = name.split(':')[1]; | ||
| var key = data.value.replace(semicolonCaptureRE(), ''); | ||
| var hydratedConditional = true; | ||
| if (key in state) hydratedConditional = !!state[key];else hydratedConditional = !!data.compute(state); | ||
| if (modifier === 'hidden') el.hidden = !hydratedConditional;else el.style.display = hydratedConditional === false ? 'none' : null; | ||
| state = _a.state, | ||
| node = _a.node; | ||
| node = node; | ||
| var hydratedConditional = !!data.compute(state); | ||
| if (!getCustomProp(node.el, '__l_if_template')) { | ||
| var template = document.createElement('template'); | ||
| setCustomProp(template, '__l_if_template', true); | ||
| template.content.appendChild(el.cloneNode(true)); | ||
| el.replaceWith(template); | ||
| node.el = template; | ||
| } | ||
| var hasInserted = getCustomProp(node.el, '__l_if_has_inserted'); | ||
| if (!hydratedConditional && hasInserted) { | ||
| (_b = node.el.nextElementSibling) === null || _b === void 0 ? void 0 : _b.remove(); | ||
| setCustomProp(node.el, '__l_has_inserted', false); | ||
| } else if (hydratedConditional && !hasInserted) { | ||
| var clone = node.el.content.cloneNode(true); | ||
| (_c = node.el.parentElement) === null || _c === void 0 ? void 0 : _c.insertBefore(clone, node.el.nextElementSibling); | ||
| setCustomProp(node.el, '__l_has_inserted', true); | ||
| var nextEl = node.el.nextElementSibling; | ||
| nextEl.removeAttribute('l-if'); | ||
| var ast = compile(nextEl, state); | ||
| patch(ast, directives, state, Object.keys(state)); | ||
| } | ||
| }; | ||
@@ -544,10 +579,13 @@ | ||
| var _b = __read(name.split('.'), 2), | ||
| prop = _b[1]; | ||
| if (!getCustomProp(el, '__l_model_registered')) { | ||
| var _b = __read(name.split('.'), 2), | ||
| prop = _b[1]; | ||
| var callback = function callback() { | ||
| return inputCallback(el, hydratedValue, data, state); | ||
| }; | ||
| var callback = function callback() { | ||
| return inputCallback(el, hydratedValue, data, state); | ||
| }; | ||
| if (prop === 'debounce') el.onchange = callback;else el.oninput = callback; | ||
| el.addEventListener(prop === 'debounce' ? 'change' : 'input', callback); | ||
| setCustomProp(el, '__l_model_registered', true); | ||
| } | ||
| }; | ||
@@ -561,3 +599,4 @@ | ||
| var options = {}; | ||
| if (el.__l_on_registered) return; | ||
| var globalScopeEventProps = ['away', 'global']; | ||
| if (getCustomProp(el, '__l_on_registered')) return; | ||
@@ -574,2 +613,8 @@ var _b = __read(name.split('.'), 2), | ||
| if (eventProp === 'stop') $event.stopPropagation(); | ||
| if (eventProp === 'away') { | ||
| if (el.contains($event.target)) return; | ||
| if (el.offsetWidth < 1 && el.offsetHeight < 1) return; | ||
| } | ||
| data.compute(state); | ||
@@ -580,4 +625,4 @@ }; | ||
| options.passive = eventProp === 'passive'; | ||
| el.addEventListener(eventName, handler, options); | ||
| el.__l_on_registered = handler; | ||
| (globalScopeEventProps.includes(String(eventProp)) ? document : el).addEventListener(eventName, handler, options); | ||
| setCustomProp(el, '__l_on_registered', true); | ||
| }; | ||
@@ -591,4 +636,3 @@ | ||
| state = _a.state; | ||
| var key = data.value.replace(semicolonCaptureRE(), ''); | ||
| if (key in state) el.textContent = String(state[key]);else el.textContent = (_b = data.compute(state)) !== null && _b !== void 0 ? _b : data.value; | ||
| el.textContent = (_b = data.compute(state)) !== null && _b !== void 0 ? _b : data.value; | ||
| }; | ||
@@ -610,3 +654,3 @@ | ||
| var currArray = state[target]; | ||
| var template = String(el.__l_for_template); | ||
| var template = getCustomProp(el, '__l_for_template'); | ||
| if (el.innerHTML.trim() === template) el.innerHTML = ''; | ||
@@ -617,3 +661,4 @@ var arrayDiff = currArray.length - el.children.length; | ||
| if (arrayDiff < 0) el.removeChild(el.lastChild);else { | ||
| var temp = document.createElement('div'); | ||
| var tag = template.startsWith('<th') ? 'thead' : template.startsWith('<td') || template.startsWith('<tr') ? 'tbody' : 'div'; | ||
| var temp = document.createElement(tag); | ||
| var content = template; | ||
@@ -630,9 +675,9 @@ | ||
| temp.innerHTML = content; | ||
| el.appendChild(temp.firstChild); | ||
| el.appendChild(temp.firstElementChild); | ||
| } | ||
| } | ||
| } | ||
| el.__l = {}; | ||
| setCustomProp(el, '__l', true); | ||
| var ast = compile(el, state); | ||
| patch(ast, directives, state, data.keys); | ||
| patch(ast, directives, state, data.deps); | ||
| }; | ||
@@ -659,3 +704,2 @@ | ||
| }; | ||
| var reactive = function reactive(state, callback) { | ||
@@ -673,17 +717,17 @@ var handler = { | ||
| var hasArrayMutationKey = !isNaN(Number(key)) || key === 'length'; | ||
| var keys = []; | ||
| var props = []; | ||
| if (target instanceof Array && hasArrayMutationKey) { | ||
| keys = Object.keys(state).filter(function (k) { | ||
| return arrayEquals(state[k], target); | ||
| props = Object.keys(state).filter(function (prop) { | ||
| return arrayEquals(state[prop], target); | ||
| }); | ||
| } else { | ||
| if (Object.keys(state).some(function (key) { | ||
| return target[key] === undefined; | ||
| if (Object.keys(state).some(function (prop) { | ||
| return target[prop] === undefined; | ||
| })) { | ||
| keys = Object.keys(state).filter(function (key) { | ||
| return _typeof(state[key]) === 'object'; | ||
| props = Object.keys(state).filter(function (prop) { | ||
| return _typeof(state[prop]) === 'object'; | ||
| }); | ||
| } else { | ||
| keys = [key]; | ||
| props = [key]; | ||
| } | ||
@@ -693,3 +737,3 @@ } | ||
| target[key] = value; | ||
| callback(keys); | ||
| callback(props); | ||
| return true; | ||
@@ -717,3 +761,3 @@ } | ||
| this.render(); | ||
| rootEl.__l = this; | ||
| setCustomProp(rootEl, '__l', this); | ||
| return this.state; | ||
@@ -726,8 +770,8 @@ }; | ||
| Component.prototype.render = function (keys) { | ||
| if (keys === void 0) { | ||
| keys = Object.keys(this.state); | ||
| Component.prototype.render = function (props) { | ||
| if (props === void 0) { | ||
| props = Object.keys(this.state); | ||
| } | ||
| patch(this.ast, directives, this.state, keys); | ||
| patch(this.ast, directives, this.state, props); | ||
| }; | ||
@@ -741,2 +785,3 @@ | ||
| var luciaLoadEvent = new CustomEvent('lucia:load'); | ||
| var init = function init(element) { | ||
@@ -752,3 +797,3 @@ if (element === void 0) { | ||
| elements.filter(function (el) { | ||
| return el.__l === undefined; | ||
| return getCustomProp(el, '__l') === undefined; | ||
| }).map(function (el) { | ||
@@ -764,4 +809,5 @@ var expression = el.getAttribute(stateDirective); | ||
| }); | ||
| document.dispatchEvent(luciaLoadEvent); | ||
| }; | ||
| export { compile, component, directives, init, patch, reactive }; | ||
| export { compile, component, directives, init, luciaLoadEvent, patch, reactive }; |
@@ -1,1 +0,1 @@ | ||
| var t=function(){return(t=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var i in e=arguments[r])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function e(t){var e="function"==typeof Symbol&&Symbol.iterator,r=e&&t[e],n=0;if(r)return r.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function r(t,e){var r="function"==typeof Symbol&&t[Symbol.iterator];if(!r)return t;var n,i,a=r.call(t),o=[];try{for(;(void 0===e||e-- >0)&&!(n=a.next()).done;)o.push(n.value)}catch(t){i={error:t}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(i)throw i.error}}return o}function n(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(r(arguments[e]));return t}var i;!function(t){t["@"]="on",t[":"]="bind"}(i||(i={}));var a=function(t){return new RegExp("\\b"+t+"\\b","gim")};function o(t){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var l=function(t,e,r){var n="with($state){"+(null==r||r?"return "+t:t)+"}";return function(i){try{var a=t.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim,""),o=r?Object.keys(i).indexOf(a):-1;if(-1!==o){var l=Object.values(i)[o],u=/\[(\d+)\]/gim.exec(t);return u&&u[1]&&l instanceof Array&&!isNaN(u[1])?l[Number(u[1])]:t.endsWith("()")?l():l}return new Function("$state","$el",n)(i,e||null)}catch(r){console.warn('Lucia Error: "'+r+'"\n\nExpression: "'+t+'"\nElement:',e||null)}}},u=function(t){return n(new Set(t))},s=function(t,o){var s=r(function(t,r){var o,s;void 0===r&&(r={});var c={},f=[];if(t.attributes){var v=function(e,o){var s=[],v=Object.keys(r),p=!0,y=v.filter((function(t){var e=a(t).test(String(o));if("function"==typeof r[t]&&e){var i=v.filter((function(e){return a(e).test(String(r[t]))}));s.push.apply(s,n(i))}return e}));/on|@/gim.test(e)&&(p=!1),e.includes("for")&&void 0===t.__l_for_template&&(t.__l_for_template=String(t.innerHTML).trim(),p=!1);var d=u(n(y,s));f.push.apply(f,n(d));var m={compute:l(o,t,p),keys:d,value:o};e.startsWith("l-")?c[e.slice("l-".length)]=m:Object.keys(i).includes(e[0])&&(c[i[e[0]]+":"+e.slice(1)]=m)};try{for(var p=e(t.attributes),y=p.next();!y.done;y=p.next()){var d=y.value;v(d.name,d.value)}}catch(t){o={error:t}}finally{try{y&&!y.done&&(s=p.return)&&s.call(p)}finally{if(o)throw o.error}}}return[c,u(f)]}(t,o),2),c=s[0],f=s[1],v=Object.keys(c).length>0,p=Object.values(c).some((function(t){var e=t.value;return Object.keys(o).some((function(t){return a(t).test(e)}))}));return v?{el:t,keys:f,directives:c,type:p?1:0}:null},c=function(t){return t.hasAttribute("l-for")},f=function t(r,i){var a,o;void 0===i&&(i=!1);var l,u=[],s=c(r),f=!!(l=r).parentElement&&l.parentElement.hasAttribute("l-for");if(!i&&(s||f))return u;if(i&&s||u.push(r),!s&&!f||i)try{for(var v=e(r.childNodes),p=v.next();!p.done;p=v.next()){var y=p.value;y.nodeType===Node.ELEMENT_NODE&&(!i&&c(y)?u.push(y):u.push.apply(u,n(t(y,i))))}}catch(t){a={error:t}}finally{try{p&&!p.done&&(o=v.return)&&o.call(v)}finally{if(a)throw a.error}}return u},v=function(t,r){var n,a;if(void 0===r&&(r={}),!t)throw new Error("Please provide a Element");var o=[],l=void 0!==t.__l&&c(t),u=f(t,l);try{for(var v=e(u),p=v.next();!p.done;p=v.next()){var y=p.value;if(new RegExp("(l-|"+Object.keys(i).join("|")+")\\w+","gim").test(y.outerHTML)){if(y.hasAttribute("l-state"))continue;var d=s(y,r);d&&o.push(d)}}}catch(t){n={error:t}}finally{try{p&&!p.done&&(a=v.return)&&a.call(v)}finally{if(n)throw n.error}}return o},p=function(t,n,i,a){var o,l;void 0===i&&(i={}),void 0===a&&(a=[]);for(var u=[],s=function(o){var l,s,c=t[o],f=0===c.type;if(f&&u.push(o),!a.some((function(t){return c.keys.includes(t)}))&&!f)return"continue";var v=function(t,e){if(a.some((function(t){return e.keys.includes(t)}))||f){var r={el:c.el,name:t,data:e,state:i};d(r,n)}};try{for(var p=(l=void 0,e(Object.entries(c.directives))),y=p.next();!y.done;y=p.next()){var m=r(y.value,2);v(m[0],m[1])}}catch(t){l={error:t}}finally{try{y&&!y.done&&(s=p.return)&&s.call(p)}finally{if(l)throw l.error}}},c=0;c<t.length;c++)s(c);try{for(var f=e(u),v=f.next();!v.done;v=f.next()){c=v.value;t.splice(c,1)}}catch(t){o={error:t}}finally{try{v&&!v.done&&(l=f.return)&&l.call(f)}finally{if(o)throw o.error}}},y={BIND:function(t){var e=t.el,r=t.name,n=t.data,i=t.state;switch(r.split(":")[1]){case"class":var a=n.compute(i);if("string"==typeof a)return e.setAttribute("class",(e.className+" "+a).trim());if(a instanceof Array)return e.setAttribute("class",(e.className+" "+a.join(" ")).trim());var l=[];for(var u in a)a[u]&&!e.className.includes(u)&&l.push(u);var s=new RegExp("\\b"+Object.keys(a).join("|")+"\\b","gim"),c=e.className.replace(s,"");return l.length>0?e.setAttribute("class",(c+" "+l.join(" ")).trim()):e.className.trim().length>0?e.setAttribute("class",c.trim()):e.removeAttribute("class");case"style":var f=n.compute(i);for(var u in e.removeAttribute("style"),f)e.style[u]=f[u];break;default:var v=n.compute(i);if("object"===o(v)&&null!==v)for(var u in v)v[u]?e.setAttribute(u,v[u]):e.removeAttribute(u);else v?e.setAttribute(r.split(":")[1],v):e.removeAttribute(r.split(":")[1])}},HTML:function(t){var e,r=t.el,n=t.data,i=t.state,a=n.value.replace(/(;)/gim,"");a in i&&(r.innerHTML=String(i[a])),r.innerHTML=null!==(e=n.compute(i))&&void 0!==e?e:n.value,r.__l={};var o=v(r,i);p(o,y,i,n.keys)},IF:function(t){var e=t.el,r=t.name,n=t.data,i=t.state,a=r.split(":")[1],o=n.value.replace(/(;)/gim,""),l=!0;l=o in i?!!i[o]:!!n.compute(i),"hidden"===a?e.hidden=!l:e.style.display=!1===l?"none":null},MODEL:function(t){var e=t.el,n=t.name,i=t.data,a=t.state,o=e,l=a[i.value];o.value!==String(l)&&(o.value=String(l));var u=function(){return function(t,e,r,n){var i,a="number"==typeof e&&!isNaN(t.value),o="boolean"==typeof e&&("true"===t.value||"false"===t.value),l=null==e&&("null"===t.value||"undefined"===t.value);return i=a?parseFloat(t.value):o?"true"===t.value:l?"null"===t.value?null:void 0:String(t.value),n[r.value]=i,i}(o,l,i,a)};"debounce"===r(n.split("."),2)[1]?o.onchange=u:o.oninput=u},ON:function(t){var e=t.el,n=t.name,i=t.data,a=t.state,o={};if(!e.__l_on_registered){var l=r(n.split("."),2),u=l[0],s=l[1],c=u.split(":")[1],f=s||null,v=function(t){"prevent"===f&&t.preventDefault(),"stop"===f&&t.stopPropagation(),i.compute(a)};o.once="once"===f,o.passive="passive"===f,e.addEventListener(c,v,o),e.__l_on_registered=v}},TEXT:function(t){var e,r=t.el,n=t.data,i=t.state,a=n.value.replace(/(;)/gim,"");r.textContent=a in i?String(i[a]):null!==(e=n.compute(i))&&void 0!==e?e:n.value},FOR:function(t){var e=t.el,n=t.data,i=t.state,o=r(n.value.split(/in +/g),2),l=o[0],u=o[1],s=r(l.replace(/\(|\)/gim,"").split(","),2),c=s[0],f=s[1],d=i[u],m=String(e.__l_for_template);e.innerHTML.trim()===m&&(e.innerHTML="");var h=d.length-e.children.length;if(0===d.length)e.innerHTML="";else if(0!==h)for(var b=Math.abs(h);b>0;b--)if(h<0)e.removeChild(e.lastChild);else{var g=document.createElement("div"),_=m;c&&(_=_.replace(a("this\\."+c.trim()),u+"["+(d.length-b)+"]")),f&&(_=_.replace(a("this\\."+f.trim()),String(d.length-b))),g.innerHTML=_,e.appendChild(g.firstChild)}e.__l={};var j=v(e,i);p(j,y,i,n.keys)}},d=function(t,e){e[t.name.split(/:|\./gim)[0].toUpperCase()](t)},m=function(t,e){var r={get:function(t,e){return"object"===o(t[e])&&null!==t[e]?new Proxy(t[e],r):t[e]},set:function(r,n,i){if("function"==typeof t[n])return!1;var a=!isNaN(Number(n))||"length"===n,l=[];return l=r instanceof Array&&a?Object.keys(t).filter((function(e){return n=t[e],i=r,n instanceof Array&&i instanceof Array&&n.length===i.length&&n.every((function(t,e){return t===i[e]}));var n,i})):Object.keys(t).some((function(t){return void 0===r[t]}))?Object.keys(t).filter((function(e){return"object"===o(t[e])})):[n],r[n]=i,e(l),!0}};return Proxy.revocable(Object.seal(t),r)},h=function(){function e(t){void 0===t&&(t={}),this.state=t,this.directives={}}return e.prototype.mount=function(e){var r="string"==typeof e?document.querySelector(e):e;return this.ast=v(r,this.state),this.state=m(this.state,this.render.bind(this)).proxy,this.directives=t(t({},this.directives),y),this.render(),r.__l=this,this.state},e.prototype.directive=function(t,e){this.directives[t.toUpperCase()]=e},e.prototype.render=function(t){void 0===t&&(t=Object.keys(this.state)),p(this.ast,y,this.state,t)},e}(),b=function(t){return new h(t)},g=function(t){void 0===t&&(t=document);var e="l-state";n(t.querySelectorAll("[l-state]")).filter((function(t){return void 0===t.__l})).map((function(t){var r=t.getAttribute(e);try{var n=new Function("return "+(r||{}));b(n()).mount(t)}catch(e){console.warn('Lucia Error: "'+e+'"\n\nExpression: "'+r+'"\nElement:',t)}}))};export{v as compile,b as component,y as directives,g as init,p as patch,m as reactive}; | ||
| var e=function(){return(e=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function t(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function r(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,i,a=r.call(e),o=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)o.push(n.value)}catch(e){i={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(i)throw i.error}}return o}function n(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(r(arguments[t]));return e}var i;!function(e){e["@"]="on",e[":"]="bind"}(i||(i={}));var a=function(e){return new RegExp("\\b"+e+"\\b","gim")};function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var l=function(e){return e.replace(/\s+/gim," ").trim()},u=function(e,t,n){var i="with($state){"+(null==n||n?"return "+e:e)+"}";return function(a){try{var o=r([Object.keys(a),Object.values(a)],2),l=o[0],u=o[1],s=e.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim,""),c=n?l.indexOf(s):-1;if(-1!==c)return function(e,t,r){var n=t[r],i=/\[(\d+)\]/gim.exec(e);return i&&i[1]&&n instanceof Array&&!isNaN(i[1])?n[Number(i[1])]:e.endsWith("()")?n():n}(e,u,c);return new Function("$state","$el","$emit",i)(a,t,(function(e,t){var r=new CustomEvent(e,t);document.dispatchEvent(r)}))}catch(r){console.warn('Lucia Error: "'+r+'"\n\nExpression: "'+e+'"\nElement:',t)}}},s=function(e,t){return e[t]},c=function(e,t,r){return e[t]=r},f=function(e){return n(new Set(e))},v=function(e){return e.hasAttribute("l-for")},d=function(e,t){var n=r(p(e,t),2),i=n[0],o=n[1],l=Object.keys(i).length>0,u=Object.values(i).some((function(e){var r=e.value;return Object.keys(t).some((function(e){return a(e).test(r)}))}));return l?{el:e,deps:o,directives:i,type:u?1:0}:null},p=function(e,r){var o,l;void 0===r&&(r={});var v={},d=[],p=function(t,o){var l=[],p=Object.keys(r),y=!0,m=p.filter((function(e){var t=a(e).test(String(o));if("function"==typeof r[e]&&t){var i=p.filter((function(t){return a(t).test(String(r[e]))}));l.push.apply(l,n(i))}return t}));/on|@/gim.test(t)&&(y=!1),t.includes("for")&&void 0===s(e,"__l_for_template")&&(c(e,"__l_for_template",String(e.innerHTML).trim()),y=!1);var h=f(n(m,l));d.push.apply(d,n(h));var b={compute:u(o,e,y),deps:h,value:o};t.startsWith("l-")?v[t.slice("l-".length)]=b:Object.keys(i).includes(t[0])&&(v[i[t[0]]+":"+t.slice(1)]=b)};try{for(var y=t(e.attributes),m=y.next();!m.done;m=y.next()){var h=m.value;p(h.name,h.value)}}catch(e){o={error:e}}finally{try{m&&!m.done&&(l=y.return)&&l.call(y)}finally{if(o)throw o.error}}return[v,f(d)]},y=function e(r,i){var a,o;void 0===i&&(i=!1);var l,u=[],s=v(r),c=!!(l=r).parentElement&&l.parentElement.hasAttribute("l-for");if(!i&&(s||c))return u;if(i&&s||u.push(r),!s&&!c||i)try{for(var f=t(r.childNodes),d=f.next();!d.done;d=f.next()){var p=d.value;p.nodeType===Node.ELEMENT_NODE&&(!i&&v(p)?u.push(p):u.push.apply(u,n(e(p,i))))}}catch(e){a={error:e}}finally{try{d&&!d.done&&(o=f.return)&&o.call(f)}finally{if(a)throw a.error}}return u},m=function(e,r){var n,a;if(void 0===r&&(r={}),!e)throw new Error("Please provide a Element");var o=[],l=void 0!==s(e,"__l")&&v(e),u=y(e,l);try{for(var c=t(u),f=c.next();!f.done;f=c.next()){var p=f.value;if(!p.hasAttribute("l-state")&&new RegExp("(l-|"+Object.keys(i).join("|")+")\\w+","gim").test(p.outerHTML)){var m=d(p,r);m&&o.push(m)}}}catch(e){n={error:e}}finally{try{f&&!f.done&&(a=c.return)&&a.call(c)}finally{if(n)throw n.error}}return o},h=function(e,n,i,a){var o,l;void 0===i&&(i={}),void 0===a&&(a=[]);for(var u=[],s=function(o){var l,s,c=e[o],f=0===c.type;if(f&&u.push(o),!a.some((function(e){return c.deps.includes(e)}))&&!f)return"continue";var v=function(e,t){if(a.some((function(e){return t.deps.includes(e)}))||f){var r={el:c.el,name:e,data:t,node:c,state:i};_(r,n)}};try{for(var d=(l=void 0,t(Object.entries(c.directives))),p=d.next();!p.done;p=d.next()){var y=r(p.value,2);v(y[0],y[1])}}catch(e){l={error:e}}finally{try{p&&!p.done&&(s=d.return)&&s.call(d)}finally{if(l)throw l.error}}},c=0;c<e.length;c++)s(c);try{for(var f=t(u),v=f.next();!v.done;v=f.next()){c=v.value;e.splice(c,1)}}catch(e){o={error:e}}finally{try{v&&!v.done&&(l=f.return)&&l.call(f)}finally{if(o)throw o.error}}},b={BIND:function(e){var t=e.el,r=e.name,n=e.data,i=e.state;switch(r.split(":")[1]){case"class":var a=n.compute(i);if("string"==typeof a)return t.setAttribute("class",l(t.className+" "+a));if(a instanceof Array)return t.setAttribute("class",l(t.className+" "+a.join(" ")));var u=[];for(var s in a)a[s]&&u.push(s);var c=new RegExp("\\b"+Object.keys(a).join("|")+"\\b","gim"),f=t.className.replace(c,"");return u.length>0?t.setAttribute("class",l(f+" "+u.join(" "))):l(t.className).length>0?t.setAttribute("class",l(f)):t.removeAttribute("class");case"style":var v=n.compute(i);for(var s in t.removeAttribute("style"),v)t.style[s]=v[s];break;default:var d=n.compute(i);if("object"===o(d)&&null!==d)for(var s in d)d[s]?t.setAttribute(s,d[s]):t.removeAttribute(s);else d?t.setAttribute(r.split(":")[1],d):t.removeAttribute(r.split(":")[1])}},HTML:function(e){var t,r=e.el,n=e.data,i=e.state;r.innerHTML=null!==(t=n.compute(i))&&void 0!==t?t:n.value;var a=m(r,i);h(a,b,i,n.deps)},IF:function(e){var t,r,n=e.el,i=e.data,a=e.state,o=e.node;o=o;var l=!!i.compute(a);if(!s(o.el,"__l_if_template")){var u=document.createElement("template");c(u,"__l_if_template",!0),u.content.appendChild(n.cloneNode(!0)),n.replaceWith(u),o.el=u}var f=s(o.el,"__l_if_has_inserted");if(!l&&f)null===(t=o.el.nextElementSibling)||void 0===t||t.remove(),c(o.el,"__l_has_inserted",!1);else if(l&&!f){var v=o.el.content.cloneNode(!0);null===(r=o.el.parentElement)||void 0===r||r.insertBefore(v,o.el.nextElementSibling),c(o.el,"__l_has_inserted",!0);var d=o.el.nextElementSibling;d.removeAttribute("l-if");var p=m(d,a);h(p,b,a,Object.keys(a))}},MODEL:function(e){var t=e.el,n=e.name,i=e.data,a=e.state,o=t,l=a[i.value];if(o.value!==String(l)&&(o.value=String(l)),!s(o,"__l_model_registered")){var u=r(n.split("."),2)[1];o.addEventListener("debounce"===u?"change":"input",(function(){return function(e,t,r,n){var i,a="number"==typeof t&&!isNaN(e.value),o="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);return i=a?parseFloat(e.value):o?"true"===e.value:l?"null"===e.value?null:void 0:String(e.value),n[r.value]=i,i}(o,l,i,a)})),c(o,"__l_model_registered",!0)}},ON:function(e){var t=e.el,n=e.name,i=e.data,a=e.state,o={};if(!s(t,"__l_on_registered")){var l=r(n.split("."),2),u=l[0],f=l[1],v=u.split(":")[1],d=f||null;o.once="once"===d,o.passive="passive"===d,(["away","global"].includes(String(d))?document:t).addEventListener(v,(function(e){if("prevent"===d&&e.preventDefault(),"stop"===d&&e.stopPropagation(),"away"===d){if(t.contains(e.target))return;if(t.offsetWidth<1&&t.offsetHeight<1)return}i.compute(a)}),o),c(t,"__l_on_registered",!0)}},TEXT:function(e){var t,r=e.el,n=e.data,i=e.state;r.textContent=null!==(t=n.compute(i))&&void 0!==t?t:n.value},FOR:function(e){var t=e.el,n=e.data,i=e.state,o=r(n.value.split(/in +/g),2),l=o[0],u=o[1],f=r(l.replace(/\(|\)/gim,"").split(","),2),v=f[0],d=f[1],p=i[u],y=s(t,"__l_for_template");t.innerHTML.trim()===y&&(t.innerHTML="");var _=p.length-t.children.length;if(0===p.length)t.innerHTML="";else if(0!==_)for(var g=Math.abs(_);g>0;g--)if(_<0)t.removeChild(t.lastChild);else{var E=y.startsWith("<th")?"thead":y.startsWith("<td")||y.startsWith("<tr")?"tbody":"div",w=document.createElement(E),x=y;v&&(x=x.replace(a("this\\."+v.trim()),u+"["+(p.length-g)+"]")),d&&(x=x.replace(a("this\\."+d.trim()),String(p.length-g))),w.innerHTML=x,t.appendChild(w.firstElementChild)}c(t,"__l",!0);var j=m(t,i);h(j,b,i,n.deps)}},_=function(e,t){t[e.name.split(/:|\./gim)[0].toUpperCase()](e)},g=function(e,t){var r={get:function(e,t){return"object"===o(e[t])&&null!==e[t]?new Proxy(e[t],r):e[t]},set:function(r,n,i){if("function"==typeof e[n])return!1;var a=!isNaN(Number(n))||"length"===n,l=[];return l=r instanceof Array&&a?Object.keys(e).filter((function(t){return n=e[t],i=r,n instanceof Array&&i instanceof Array&&n.length===i.length&&n.every((function(e,t){return e===i[t]}));var n,i})):Object.keys(e).some((function(e){return void 0===r[e]}))?Object.keys(e).filter((function(t){return"object"===o(e[t])})):[n],r[n]=i,t(l),!0}};return Proxy.revocable(Object.seal(e),r)},E=function(){function t(e){void 0===e&&(e={}),this.state=e,this.directives={}}return t.prototype.mount=function(t){var r="string"==typeof t?document.querySelector(t):t;return this.ast=m(r,this.state),this.state=g(this.state,this.render.bind(this)).proxy,this.directives=e(e({},this.directives),b),this.render(),c(r,"__l",this),this.state},t.prototype.directive=function(e,t){this.directives[e.toUpperCase()]=t},t.prototype.render=function(e){void 0===e&&(e=Object.keys(this.state)),h(this.ast,b,this.state,e)},t}(),w=function(e){return new E(e)},x=new CustomEvent("lucia:load"),j=function(e){void 0===e&&(e=document);var t="l-state";n(e.querySelectorAll("[l-state]")).filter((function(e){return void 0===s(e,"__l")})).map((function(e){var r=e.getAttribute(t);try{var n=new Function("return "+(r||{}));w(n()).mount(e)}catch(t){console.warn('Lucia Error: "'+t+'"\n\nExpression: "'+r+'"\nElement:',e)}})),document.dispatchEvent(x)};export{m as compile,w as component,b as directives,j as init,x as luciaLoadEvent,h as patch,g as reactive}; |
@@ -114,5 +114,2 @@ var Lucia = (function () { | ||
| }; | ||
| var semicolonCaptureRE = function semicolonCaptureRE() { | ||
| return /(;)/gim; | ||
| }; | ||
| var arrayIndexCaptureRE = function arrayIndexCaptureRE() { | ||
@@ -130,4 +127,4 @@ return /\[(\d+)\]/gim; | ||
| }; | ||
| var expressionPropRE = function expressionPropRE(key) { | ||
| return new RegExp("\\b" + key + "\\b", 'gim'); | ||
| var expressionPropRE = function expressionPropRE(prop) { | ||
| return new RegExp("\\b" + prop + "\\b", 'gim'); | ||
| }; | ||
@@ -151,2 +148,5 @@ | ||
| var formatAcceptableWhitespace = function formatAcceptableWhitespace(expression) { | ||
| return expression.replace(/\s+/gim, ' ').trim(); | ||
| }; | ||
| var bindDirective = function bindDirective(_a) { | ||
@@ -163,10 +163,10 @@ var el = _a.el, | ||
| if (typeof hydratedClasses === 'string') { | ||
| return el.setAttribute('class', (el.className + " " + hydratedClasses).trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(el.className + " " + hydratedClasses)); | ||
| } else if (hydratedClasses instanceof Array) { | ||
| return el.setAttribute('class', (el.className + " " + hydratedClasses.join(' ')).trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(el.className + " " + hydratedClasses.join(' '))); | ||
| } else { | ||
| var classes = []; | ||
| for (var key in hydratedClasses) { | ||
| if (hydratedClasses[key] && !el.className.includes(key)) classes.push(key); | ||
| for (var prop in hydratedClasses) { | ||
| if (hydratedClasses[prop]) classes.push(prop); | ||
| } | ||
@@ -178,5 +178,5 @@ | ||
| if (classes.length > 0) { | ||
| return el.setAttribute('class', (rawClasses + " " + classes.join(' ')).trim()); | ||
| } else if (el.className.trim().length > 0) { | ||
| return el.setAttribute('class', rawClasses.trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(rawClasses + " " + classes.join(' '))); | ||
| } else if (formatAcceptableWhitespace(el.className).length > 0) { | ||
| return el.setAttribute('class', formatAcceptableWhitespace(rawClasses)); | ||
| } else { | ||
@@ -191,4 +191,4 @@ return el.removeAttribute('class'); | ||
| for (var key in hydratedStyles) { | ||
| el.style[key] = hydratedStyles[key]; | ||
| for (var prop in hydratedStyles) { | ||
| el.style[prop] = hydratedStyles[prop]; | ||
| } | ||
@@ -202,7 +202,7 @@ | ||
| if (_typeof(hydratedAttributes) === 'object' && hydratedAttributes !== null) { | ||
| for (var key in hydratedAttributes) { | ||
| if (hydratedAttributes[key]) { | ||
| el.setAttribute(key, hydratedAttributes[key]); | ||
| for (var prop in hydratedAttributes) { | ||
| if (hydratedAttributes[prop]) { | ||
| el.setAttribute(prop, hydratedAttributes[prop]); | ||
| } else { | ||
| el.removeAttribute(key); | ||
| el.removeAttribute(prop); | ||
| } | ||
@@ -220,2 +220,14 @@ } | ||
| var interpretProps = function interpretProps(expression, stateValues, positionInState) { | ||
| var value = stateValues[positionInState]; | ||
| var arrayIndex = arrayIndexCaptureRE().exec(expression); | ||
| if (arrayIndex && arrayIndex[1] && value instanceof Array && !isNaN(arrayIndex[1])) { | ||
| return value[Number(arrayIndex[1])]; | ||
| } else if (expression.endsWith('()')) { | ||
| return value(); | ||
| } else { | ||
| return value; | ||
| } | ||
| }; | ||
| var computeExpression = function computeExpression(expression, el, returnable) { | ||
@@ -225,19 +237,21 @@ var formattedExpression = "with($state){" + ((returnable !== null && returnable !== void 0 ? returnable : true) ? "return " + expression : expression) + "}"; | ||
| try { | ||
| var _a = __read([Object.keys(state), Object.values(state)], 2), | ||
| propKeys = _a[0], | ||
| propValues = _a[1]; | ||
| var strippedExpression = expression.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim, ''); | ||
| var positionInState = returnable ? Object.keys(state).indexOf(strippedExpression) : -1; | ||
| var positionInState = returnable ? propKeys.indexOf(strippedExpression) : -1; | ||
| if (positionInState !== -1) { | ||
| var value = Object.values(state)[positionInState]; | ||
| var arrayIndex = arrayIndexCaptureRE().exec(expression); | ||
| return interpretProps(expression, propValues, positionInState); | ||
| } else { | ||
| var emit = function emit(name, options) { | ||
| var event = new CustomEvent(name, options); | ||
| document.dispatchEvent(event); | ||
| }; | ||
| if (arrayIndex && arrayIndex[1] && value instanceof Array && !isNaN(arrayIndex[1])) { | ||
| return value[Number(arrayIndex[1])]; | ||
| } else if (expression.endsWith('()')) { | ||
| return value(); | ||
| } else return value; | ||
| } else { | ||
| return new Function('$state', '$el', formattedExpression)(state, el || null); | ||
| return new Function('$state', '$el', '$emit', formattedExpression)(state, el, emit); | ||
| } | ||
| } catch (err) { | ||
| console.warn("Lucia Error: \"" + err + "\"\n\nExpression: \"" + expression + "\"\nElement:", el || null); | ||
| console.warn("Lucia Error: \"" + err + "\"\n\nExpression: \"" + expression + "\"\nElement:", el); | ||
| } | ||
@@ -247,5 +261,39 @@ }; | ||
| var getCustomProp = function getCustomProp(el, prop) { | ||
| return el[prop]; | ||
| }; | ||
| var setCustomProp = function setCustomProp(el, prop, value) { | ||
| return el[prop] = value; | ||
| }; | ||
| var removeDupesFromArray = function removeDupesFromArray(array) { | ||
| return __spread(new Set(array)); | ||
| }; | ||
| var isListRenderScope = function isListRenderScope(el) { | ||
| return el.hasAttribute(DIRECTIVE_PREFIX + "for"); | ||
| }; | ||
| var isUnderListRenderScope = function isUnderListRenderScope(el) { | ||
| if (!el.parentElement) return false; | ||
| return el.parentElement.hasAttribute(DIRECTIVE_PREFIX + "for"); | ||
| }; | ||
| var createASTNode = function createASTNode(el, state) { | ||
| var _a = __read(collectAndInitDirectives(el, state), 2), | ||
| directives = _a[0], | ||
| deps = _a[1]; | ||
| var hasDirectives = Object.keys(directives).length > 0; | ||
| var hasDepInDirectives = Object.values(directives).some(function (_a) { | ||
| var value = _a.value; | ||
| return Object.keys(state).some(function (prop) { | ||
| return expressionPropRE(prop).test(value); | ||
| }); | ||
| }); | ||
| if (!hasDirectives) return null; | ||
| return { | ||
| el: el, | ||
| deps: deps, | ||
| directives: directives, | ||
| type: hasDepInDirectives ? 1 : 0 | ||
| }; | ||
| }; | ||
| var collectAndInitDirectives = function collectAndInitDirectives(el, state) { | ||
@@ -259,96 +307,66 @@ var e_1, _a; | ||
| var directives = {}; | ||
| var nodeKeys = []; | ||
| var nodeDeps = []; | ||
| if (el.attributes) { | ||
| var _loop_1 = function _loop_1(name_1, value) { | ||
| var keysInFunctions = []; | ||
| var keysInState = Object.keys(state); | ||
| var returnable = true; | ||
| var keys = keysInState.filter(function (key) { | ||
| var hasKey = expressionPropRE(key).test(String(value)); | ||
| var _loop_1 = function _loop_1(name_1, value) { | ||
| var depsInFunctions = []; | ||
| var propsInState = Object.keys(state); | ||
| var returnable = true; | ||
| var deps = propsInState.filter(function (prop) { | ||
| var hasDep = expressionPropRE(prop).test(String(value)); | ||
| if (typeof state[key] === 'function' && hasKey) { | ||
| var keysInFunction = keysInState.filter(function (k) { | ||
| return expressionPropRE(k).test(String(state[key])); | ||
| }); | ||
| keysInFunctions.push.apply(keysInFunctions, __spread(keysInFunction)); | ||
| } | ||
| if (typeof state[prop] === 'function' && hasDep) { | ||
| var depsInFunction = propsInState.filter(function (p) { | ||
| return expressionPropRE(p).test(String(state[prop])); | ||
| }); | ||
| depsInFunctions.push.apply(depsInFunctions, __spread(depsInFunction)); | ||
| } | ||
| return hasKey; | ||
| }); | ||
| if (eventDirectivePrefixRE().test(name_1)) returnable = false; | ||
| return hasDep; | ||
| }); | ||
| if (eventDirectivePrefixRE().test(name_1)) returnable = false; | ||
| if (name_1.includes('for') && el.__l_for_template === undefined) { | ||
| el.__l_for_template = String(el.innerHTML).trim(); | ||
| returnable = false; | ||
| } | ||
| if (name_1.includes('for') && getCustomProp(el, '__l_for_template') === undefined) { | ||
| setCustomProp(el, '__l_for_template', String(el.innerHTML).trim()); | ||
| returnable = false; | ||
| } | ||
| var uniqueCompiledKeys = removeDupesFromArray(__spread(keys, keysInFunctions)); | ||
| nodeKeys.push.apply(nodeKeys, __spread(uniqueCompiledKeys)); | ||
| var directiveData = { | ||
| compute: computeExpression(value, el, returnable), | ||
| keys: uniqueCompiledKeys, | ||
| value: value | ||
| }; | ||
| var uniqueCompiledDeps = removeDupesFromArray(__spread(deps, depsInFunctions)); | ||
| nodeDeps.push.apply(nodeDeps, __spread(uniqueCompiledDeps)); | ||
| var directiveData = { | ||
| compute: computeExpression(value, el, returnable), | ||
| deps: uniqueCompiledDeps, | ||
| value: value | ||
| }; | ||
| if (name_1.startsWith(DIRECTIVE_PREFIX)) { | ||
| directives[name_1.slice(DIRECTIVE_PREFIX.length)] = directiveData; | ||
| } else if (Object.keys(DIRECTIVE_SHORTHANDS).includes(name_1[0])) { | ||
| directives[DIRECTIVE_SHORTHANDS[name_1[0]] + ":" + name_1.slice(1)] = directiveData; | ||
| } | ||
| if (name_1.startsWith(DIRECTIVE_PREFIX)) { | ||
| directives[name_1.slice(DIRECTIVE_PREFIX.length)] = directiveData; | ||
| } else if (Object.keys(DIRECTIVE_SHORTHANDS).includes(name_1[0])) { | ||
| directives[DIRECTIVE_SHORTHANDS[name_1[0]] + ":" + name_1.slice(1)] = directiveData; | ||
| } | ||
| }; | ||
| try { | ||
| for (var _b = __values(el.attributes), _c = _b.next(); !_c.done; _c = _b.next()) { | ||
| var _d = _c.value, | ||
| name_1 = _d.name, | ||
| value = _d.value; | ||
| _loop_1(name_1, value); | ||
| } | ||
| } catch (e_1_1) { | ||
| e_1 = { | ||
| error: e_1_1 | ||
| }; | ||
| } finally { | ||
| try { | ||
| for (var _b = __values(el.attributes), _c = _b.next(); !_c.done; _c = _b.next()) { | ||
| var _d = _c.value, | ||
| name_1 = _d.name, | ||
| value = _d.value; | ||
| _loop_1(name_1, value); | ||
| } | ||
| } catch (e_1_1) { | ||
| e_1 = { | ||
| error: e_1_1 | ||
| }; | ||
| if (_c && !_c.done && (_a = _b["return"])) _a.call(_b); | ||
| } finally { | ||
| try { | ||
| if (_c && !_c.done && (_a = _b["return"])) _a.call(_b); | ||
| } finally { | ||
| if (e_1) throw e_1.error; | ||
| } | ||
| if (e_1) throw e_1.error; | ||
| } | ||
| } | ||
| return [directives, removeDupesFromArray(nodeKeys)]; | ||
| return [directives, removeDupesFromArray(nodeDeps)]; | ||
| }; | ||
| var createASTNode = function createASTNode(el, state) { | ||
| var _a = __read(collectAndInitDirectives(el, state), 2), | ||
| directives = _a[0], | ||
| keys = _a[1]; | ||
| var hasDirectives = Object.keys(directives).length > 0; | ||
| var hasKeyInDirectives = Object.values(directives).some(function (_a) { | ||
| var value = _a.value; | ||
| return Object.keys(state).some(function (key) { | ||
| return expressionPropRE(key).test(value); | ||
| }); | ||
| }); | ||
| if (!hasDirectives) return null; | ||
| return { | ||
| el: el, | ||
| keys: keys, | ||
| directives: directives, | ||
| type: hasKeyInDirectives ? 1 : 0 | ||
| }; | ||
| }; | ||
| var isListRenderScope = function isListRenderScope(el) { | ||
| return el.hasAttribute(DIRECTIVE_PREFIX + "for"); | ||
| }; | ||
| var isUnderListRenderScope = function isUnderListRenderScope(el) { | ||
| if (!el.parentElement) return false; | ||
| return el.parentElement.hasAttribute(DIRECTIVE_PREFIX + "for"); | ||
| }; | ||
| var extractNodeChildrenAsCollection = function extractNodeChildrenAsCollection(rootNode, isListGroup) { | ||
| var e_1, _a; | ||
| var e_2, _a; | ||
@@ -378,5 +396,5 @@ if (isListGroup === void 0) { | ||
| } | ||
| } catch (e_1_1) { | ||
| e_1 = { | ||
| error: e_1_1 | ||
| } catch (e_2_1) { | ||
| e_2 = { | ||
| error: e_2_1 | ||
| }; | ||
@@ -387,3 +405,3 @@ } finally { | ||
| } finally { | ||
| if (e_1) throw e_1.error; | ||
| if (e_2) throw e_2.error; | ||
| } | ||
@@ -396,3 +414,3 @@ } | ||
| var compile = function compile(el, state) { | ||
| var e_2, _a; | ||
| var e_3, _a; | ||
@@ -405,3 +423,3 @@ if (state === void 0) { | ||
| var ast = []; | ||
| var isListGroup = el.__l !== undefined && isListRenderScope(el); | ||
| var isListGroup = getCustomProp(el, '__l') !== undefined && isListRenderScope(el); | ||
| var nodes = extractNodeChildrenAsCollection(el, isListGroup); | ||
@@ -412,8 +430,5 @@ | ||
| var node = nodes_1_1.value; | ||
| if (node.hasAttribute(DIRECTIVE_PREFIX + "state")) continue; | ||
| if (hasDirectiveRE().test(node.outerHTML)) { | ||
| if (node.hasAttribute(DIRECTIVE_PREFIX + "state")) { | ||
| continue; | ||
| } | ||
| var newASTNode = createASTNode(node, state); | ||
@@ -423,5 +438,5 @@ if (newASTNode) ast.push(newASTNode); | ||
| } | ||
| } catch (e_2_1) { | ||
| e_2 = { | ||
| error: e_2_1 | ||
| } catch (e_3_1) { | ||
| e_3 = { | ||
| error: e_3_1 | ||
| }; | ||
@@ -432,3 +447,3 @@ } finally { | ||
| } finally { | ||
| if (e_2) throw e_2.error; | ||
| if (e_3) throw e_3.error; | ||
| } | ||
@@ -440,3 +455,3 @@ } | ||
| var patch = function patch(ast, directives, state, changedKeys) { | ||
| var patch = function patch(ast, directives, state, changedProps) { | ||
| var e_1, _a; | ||
@@ -448,4 +463,4 @@ | ||
| if (changedKeys === void 0) { | ||
| changedKeys = []; | ||
| if (changedProps === void 0) { | ||
| changedProps = []; | ||
| } | ||
@@ -461,13 +476,13 @@ | ||
| if (isStatic) staticNodeCleanupQueue.push(i); | ||
| var nodeHasKey = changedKeys.some(function (key) { | ||
| return node.keys.includes(key); | ||
| var nodeHasDep = changedProps.some(function (prop) { | ||
| return node.deps.includes(prop); | ||
| }); | ||
| if (!nodeHasKey && !isStatic) return "continue"; | ||
| if (!nodeHasDep && !isStatic) return "continue"; | ||
| var _loop_2 = function _loop_2(directiveName, directiveData) { | ||
| var directiveHasKey = changedKeys.some(function (key) { | ||
| return directiveData.keys.includes(key); | ||
| var directiveHasDep = changedProps.some(function (prop) { | ||
| return directiveData.deps.includes(prop); | ||
| }); | ||
| if (directiveHasKey || isStatic) { | ||
| if (directiveHasDep || isStatic) { | ||
| var directiveProps = { | ||
@@ -477,2 +492,3 @@ el: node.el, | ||
| data: directiveData, | ||
| node: node, | ||
| state: state | ||
@@ -533,20 +549,39 @@ }; | ||
| state = _a.state; | ||
| var key = data.value.replace(semicolonCaptureRE(), ''); | ||
| if (key in state) el.innerHTML = String(state[key]); | ||
| el.innerHTML = (_b = data.compute(state)) !== null && _b !== void 0 ? _b : data.value; | ||
| el.__l = {}; | ||
| var ast = compile(el, state); | ||
| patch(ast, directives, state, data.keys); | ||
| patch(ast, directives, state, data.deps); | ||
| }; | ||
| var ifDirective = function ifDirective(_a) { | ||
| var _b, _c; | ||
| var el = _a.el, | ||
| name = _a.name, | ||
| data = _a.data, | ||
| state = _a.state; | ||
| var modifier = name.split(':')[1]; | ||
| var key = data.value.replace(semicolonCaptureRE(), ''); | ||
| var hydratedConditional = true; | ||
| if (key in state) hydratedConditional = !!state[key];else hydratedConditional = !!data.compute(state); | ||
| if (modifier === 'hidden') el.hidden = !hydratedConditional;else el.style.display = hydratedConditional === false ? 'none' : null; | ||
| state = _a.state, | ||
| node = _a.node; | ||
| node = node; | ||
| var hydratedConditional = !!data.compute(state); | ||
| if (!getCustomProp(node.el, '__l_if_template')) { | ||
| var template = document.createElement('template'); | ||
| setCustomProp(template, '__l_if_template', true); | ||
| template.content.appendChild(el.cloneNode(true)); | ||
| el.replaceWith(template); | ||
| node.el = template; | ||
| } | ||
| var hasInserted = getCustomProp(node.el, '__l_if_has_inserted'); | ||
| if (!hydratedConditional && hasInserted) { | ||
| (_b = node.el.nextElementSibling) === null || _b === void 0 ? void 0 : _b.remove(); | ||
| setCustomProp(node.el, '__l_has_inserted', false); | ||
| } else if (hydratedConditional && !hasInserted) { | ||
| var clone = node.el.content.cloneNode(true); | ||
| (_c = node.el.parentElement) === null || _c === void 0 ? void 0 : _c.insertBefore(clone, node.el.nextElementSibling); | ||
| setCustomProp(node.el, '__l_has_inserted', true); | ||
| var nextEl = node.el.nextElementSibling; | ||
| nextEl.removeAttribute('l-if'); | ||
| var ast = compile(nextEl, state); | ||
| patch(ast, directives, state, Object.keys(state)); | ||
| } | ||
| }; | ||
@@ -585,10 +620,13 @@ | ||
| var _b = __read(name.split('.'), 2), | ||
| prop = _b[1]; | ||
| if (!getCustomProp(el, '__l_model_registered')) { | ||
| var _b = __read(name.split('.'), 2), | ||
| prop = _b[1]; | ||
| var callback = function callback() { | ||
| return inputCallback(el, hydratedValue, data, state); | ||
| }; | ||
| var callback = function callback() { | ||
| return inputCallback(el, hydratedValue, data, state); | ||
| }; | ||
| if (prop === 'debounce') el.onchange = callback;else el.oninput = callback; | ||
| el.addEventListener(prop === 'debounce' ? 'change' : 'input', callback); | ||
| setCustomProp(el, '__l_model_registered', true); | ||
| } | ||
| }; | ||
@@ -602,3 +640,4 @@ | ||
| var options = {}; | ||
| if (el.__l_on_registered) return; | ||
| var globalScopeEventProps = ['away', 'global']; | ||
| if (getCustomProp(el, '__l_on_registered')) return; | ||
@@ -615,2 +654,8 @@ var _b = __read(name.split('.'), 2), | ||
| if (eventProp === 'stop') $event.stopPropagation(); | ||
| if (eventProp === 'away') { | ||
| if (el.contains($event.target)) return; | ||
| if (el.offsetWidth < 1 && el.offsetHeight < 1) return; | ||
| } | ||
| data.compute(state); | ||
@@ -621,4 +666,4 @@ }; | ||
| options.passive = eventProp === 'passive'; | ||
| el.addEventListener(eventName, handler, options); | ||
| el.__l_on_registered = handler; | ||
| (globalScopeEventProps.includes(String(eventProp)) ? document : el).addEventListener(eventName, handler, options); | ||
| setCustomProp(el, '__l_on_registered', true); | ||
| }; | ||
@@ -632,4 +677,3 @@ | ||
| state = _a.state; | ||
| var key = data.value.replace(semicolonCaptureRE(), ''); | ||
| if (key in state) el.textContent = String(state[key]);else el.textContent = (_b = data.compute(state)) !== null && _b !== void 0 ? _b : data.value; | ||
| el.textContent = (_b = data.compute(state)) !== null && _b !== void 0 ? _b : data.value; | ||
| }; | ||
@@ -651,3 +695,3 @@ | ||
| var currArray = state[target]; | ||
| var template = String(el.__l_for_template); | ||
| var template = getCustomProp(el, '__l_for_template'); | ||
| if (el.innerHTML.trim() === template) el.innerHTML = ''; | ||
@@ -658,3 +702,4 @@ var arrayDiff = currArray.length - el.children.length; | ||
| if (arrayDiff < 0) el.removeChild(el.lastChild);else { | ||
| var temp = document.createElement('div'); | ||
| var tag = template.startsWith('<th') ? 'thead' : template.startsWith('<td') || template.startsWith('<tr') ? 'tbody' : 'div'; | ||
| var temp = document.createElement(tag); | ||
| var content = template; | ||
@@ -671,9 +716,9 @@ | ||
| temp.innerHTML = content; | ||
| el.appendChild(temp.firstChild); | ||
| el.appendChild(temp.firstElementChild); | ||
| } | ||
| } | ||
| } | ||
| el.__l = {}; | ||
| setCustomProp(el, '__l', true); | ||
| var ast = compile(el, state); | ||
| patch(ast, directives, state, data.keys); | ||
| patch(ast, directives, state, data.deps); | ||
| }; | ||
@@ -700,3 +745,2 @@ | ||
| }; | ||
| var reactive = function reactive(state, callback) { | ||
@@ -714,17 +758,17 @@ var handler = { | ||
| var hasArrayMutationKey = !isNaN(Number(key)) || key === 'length'; | ||
| var keys = []; | ||
| var props = []; | ||
| if (target instanceof Array && hasArrayMutationKey) { | ||
| keys = Object.keys(state).filter(function (k) { | ||
| return arrayEquals(state[k], target); | ||
| props = Object.keys(state).filter(function (prop) { | ||
| return arrayEquals(state[prop], target); | ||
| }); | ||
| } else { | ||
| if (Object.keys(state).some(function (key) { | ||
| return target[key] === undefined; | ||
| if (Object.keys(state).some(function (prop) { | ||
| return target[prop] === undefined; | ||
| })) { | ||
| keys = Object.keys(state).filter(function (key) { | ||
| return _typeof(state[key]) === 'object'; | ||
| props = Object.keys(state).filter(function (prop) { | ||
| return _typeof(state[prop]) === 'object'; | ||
| }); | ||
| } else { | ||
| keys = [key]; | ||
| props = [key]; | ||
| } | ||
@@ -734,3 +778,3 @@ } | ||
| target[key] = value; | ||
| callback(keys); | ||
| callback(props); | ||
| return true; | ||
@@ -758,3 +802,3 @@ } | ||
| this.render(); | ||
| rootEl.__l = this; | ||
| setCustomProp(rootEl, '__l', this); | ||
| return this.state; | ||
@@ -767,8 +811,8 @@ }; | ||
| Component.prototype.render = function (keys) { | ||
| if (keys === void 0) { | ||
| keys = Object.keys(this.state); | ||
| Component.prototype.render = function (props) { | ||
| if (props === void 0) { | ||
| props = Object.keys(this.state); | ||
| } | ||
| patch(this.ast, directives, this.state, keys); | ||
| patch(this.ast, directives, this.state, props); | ||
| }; | ||
@@ -782,2 +826,3 @@ | ||
| var luciaLoadEvent = new CustomEvent('lucia:load'); | ||
| var init = function init(element) { | ||
@@ -793,3 +838,3 @@ if (element === void 0) { | ||
| elements.filter(function (el) { | ||
| return el.__l === undefined; | ||
| return getCustomProp(el, '__l') === undefined; | ||
| }).map(function (el) { | ||
@@ -805,2 +850,3 @@ var expression = el.getAttribute(stateDirective); | ||
| }); | ||
| document.dispatchEvent(luciaLoadEvent); | ||
| }; | ||
@@ -815,2 +861,3 @@ | ||
| directives: directives, | ||
| luciaLoadEvent: luciaLoadEvent, | ||
| init: init | ||
@@ -817,0 +864,0 @@ }); |
@@ -1,1 +0,1 @@ | ||
| var Lucia=function(){"use strict";var t=function(){return(t=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function e(t,e,n,r){return new(n||(n=Promise))((function(i,o){function a(t){try{u(r.next(t))}catch(t){o(t)}}function l(t){try{u(r.throw(t))}catch(t){o(t)}}function u(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,l)}u((r=r.apply(t,e||[])).next())}))}function n(t,e){var n,r,i,o,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function l(o){return function(l){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(6===o[0]&&a.label<i[1]){a.label=i[1],i=o;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(o);break}i[2]&&a.ops.pop(),a.trys.pop();continue}o=e.call(t,a)}catch(t){o=[6,t],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,l])}}}function r(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],r=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&r>=t.length&&(t=void 0),{value:t&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function i(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,i,o=n.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(r=o.next()).done;)a.push(r.value)}catch(t){i={error:t}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(i)throw i.error}}return a}function o(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(i(arguments[e]));return t}var a,l="l-";!function(t){t["@"]="on",t[":"]="bind"}(a||(a={}));var u=function(t){return new RegExp("\\b"+t+"\\b","gim")};function c(t){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var s=function(t,e,n){var r="with($state){"+(null==n||n?"return "+t:t)+"}";return function(i){try{var o=t.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim,""),a=n?Object.keys(i).indexOf(o):-1;if(-1!==a){var l=Object.values(i)[a],u=/\[(\d+)\]/gim.exec(t);return u&&u[1]&&l instanceof Array&&!isNaN(u[1])?l[Number(u[1])]:t.endsWith("()")?l():l}return new Function("$state","$el",r)(i,e||null)}catch(n){console.warn('Lucia Error: "'+n+'"\n\nExpression: "'+t+'"\nElement:',e||null)}}},f=function(t){return o(new Set(t))},v=function(t,e){var n=i(function(t,e){var n,i;void 0===e&&(e={});var c={},v=[];if(t.attributes){var p=function(n,r){var i=[],p=Object.keys(e),d=!0,y=p.filter((function(t){var n=u(t).test(String(r));if("function"==typeof e[t]&&n){var a=p.filter((function(n){return u(n).test(String(e[t]))}));i.push.apply(i,o(a))}return n}));/on|@/gim.test(n)&&(d=!1),n.includes("for")&&void 0===t.__l_for_template&&(t.__l_for_template=String(t.innerHTML).trim(),d=!1);var h=f(o(y,i));v.push.apply(v,o(h));var m={compute:s(r,t,d),keys:h,value:r};n.startsWith(l)?c[n.slice(l.length)]=m:Object.keys(a).includes(n[0])&&(c[a[n[0]]+":"+n.slice(1)]=m)};try{for(var d=r(t.attributes),y=d.next();!y.done;y=d.next()){var h=y.value;p(h.name,h.value)}}catch(t){n={error:t}}finally{try{y&&!y.done&&(i=d.return)&&i.call(d)}finally{if(n)throw n.error}}}return[c,f(v)]}(t,e),2),c=n[0],v=n[1],p=Object.keys(c).length>0,d=Object.values(c).some((function(t){var n=t.value;return Object.keys(e).some((function(t){return u(t).test(n)}))}));return p?{el:t,keys:v,directives:c,type:d?1:0}:null},p=function(t){return t.hasAttribute("l-for")},d=function t(e,n){var i,a;void 0===n&&(n=!1);var l,u=[],c=p(e),s=!!(l=e).parentElement&&l.parentElement.hasAttribute("l-for");if(!n&&(c||s))return u;if(n&&c||u.push(e),!c&&!s||n)try{for(var f=r(e.childNodes),v=f.next();!v.done;v=f.next()){var d=v.value;d.nodeType===Node.ELEMENT_NODE&&(!n&&p(d)?u.push(d):u.push.apply(u,o(t(d,n))))}}catch(t){i={error:t}}finally{try{v&&!v.done&&(a=f.return)&&a.call(f)}finally{if(i)throw i.error}}return u},y=function(t,e){var n,i;if(void 0===e&&(e={}),!t)throw new Error("Please provide a Element");var o=[],l=void 0!==t.__l&&p(t),u=d(t,l);try{for(var c=r(u),s=c.next();!s.done;s=c.next()){var f=s.value;if(new RegExp("(l-|"+Object.keys(a).join("|")+")\\w+","gim").test(f.outerHTML)){if(f.hasAttribute("l-state"))continue;var y=v(f,e);y&&o.push(y)}}}catch(t){n={error:t}}finally{try{s&&!s.done&&(i=c.return)&&i.call(c)}finally{if(n)throw n.error}}return o},h=function(t,e,n,o){var a,l;void 0===n&&(n={}),void 0===o&&(o=[]);for(var u=[],c=function(a){var l,c,s=t[a],f=0===s.type;if(f&&u.push(a),!o.some((function(t){return s.keys.includes(t)}))&&!f)return"continue";var v=function(t,r){if(o.some((function(t){return r.keys.includes(t)}))||f){var i={el:s.el,name:t,data:r,state:n};b(i,e)}};try{for(var p=(l=void 0,r(Object.entries(s.directives))),d=p.next();!d.done;d=p.next()){var y=i(d.value,2);v(y[0],y[1])}}catch(t){l={error:t}}finally{try{d&&!d.done&&(c=p.return)&&c.call(p)}finally{if(l)throw l.error}}},s=0;s<t.length;s++)c(s);try{for(var f=r(u),v=f.next();!v.done;v=f.next()){s=v.value;t.splice(s,1)}}catch(t){a={error:t}}finally{try{v&&!v.done&&(l=f.return)&&l.call(f)}finally{if(a)throw a.error}}},m={BIND:function(t){var e=t.el,n=t.name,r=t.data,i=t.state;switch(n.split(":")[1]){case"class":var o=r.compute(i);if("string"==typeof o)return e.setAttribute("class",(e.className+" "+o).trim());if(o instanceof Array)return e.setAttribute("class",(e.className+" "+o.join(" ")).trim());var a=[];for(var l in o)o[l]&&!e.className.includes(l)&&a.push(l);var u=new RegExp("\\b"+Object.keys(o).join("|")+"\\b","gim"),s=e.className.replace(u,"");return a.length>0?e.setAttribute("class",(s+" "+a.join(" ")).trim()):e.className.trim().length>0?e.setAttribute("class",s.trim()):e.removeAttribute("class");case"style":var f=r.compute(i);for(var l in e.removeAttribute("style"),f)e.style[l]=f[l];break;default:var v=r.compute(i);if("object"===c(v)&&null!==v)for(var l in v)v[l]?e.setAttribute(l,v[l]):e.removeAttribute(l);else v?e.setAttribute(n.split(":")[1],v):e.removeAttribute(n.split(":")[1])}},HTML:function(t){var e,n=t.el,r=t.data,i=t.state,o=r.value.replace(/(;)/gim,"");o in i&&(n.innerHTML=String(i[o])),n.innerHTML=null!==(e=r.compute(i))&&void 0!==e?e:r.value,n.__l={};var a=y(n,i);h(a,m,i,r.keys)},IF:function(t){var e=t.el,n=t.name,r=t.data,i=t.state,o=n.split(":")[1],a=r.value.replace(/(;)/gim,""),l=!0;l=a in i?!!i[a]:!!r.compute(i),"hidden"===o?e.hidden=!l:e.style.display=!1===l?"none":null},MODEL:function(t){var e=t.el,n=t.name,r=t.data,o=t.state,a=e,l=o[r.value];a.value!==String(l)&&(a.value=String(l));var u=function(){return function(t,e,n,r){var i,o="number"==typeof e&&!isNaN(t.value),a="boolean"==typeof e&&("true"===t.value||"false"===t.value),l=null==e&&("null"===t.value||"undefined"===t.value);return i=o?parseFloat(t.value):a?"true"===t.value:l?"null"===t.value?null:void 0:String(t.value),r[n.value]=i,i}(a,l,r,o)};"debounce"===i(n.split("."),2)[1]?a.onchange=u:a.oninput=u},ON:function(t){var e=t.el,n=t.name,r=t.data,o=t.state,a={};if(!e.__l_on_registered){var l=i(n.split("."),2),u=l[0],c=l[1],s=u.split(":")[1],f=c||null,v=function(t){"prevent"===f&&t.preventDefault(),"stop"===f&&t.stopPropagation(),r.compute(o)};a.once="once"===f,a.passive="passive"===f,e.addEventListener(s,v,a),e.__l_on_registered=v}},TEXT:function(t){var e,n=t.el,r=t.data,i=t.state,o=r.value.replace(/(;)/gim,"");n.textContent=o in i?String(i[o]):null!==(e=r.compute(i))&&void 0!==e?e:r.value},FOR:function(t){var e=t.el,n=t.data,r=t.state,o=i(n.value.split(/in +/g),2),a=o[0],l=o[1],c=i(a.replace(/\(|\)/gim,"").split(","),2),s=c[0],f=c[1],v=r[l],p=String(e.__l_for_template);e.innerHTML.trim()===p&&(e.innerHTML="");var d=v.length-e.children.length;if(0===v.length)e.innerHTML="";else if(0!==d)for(var b=Math.abs(d);b>0;b--)if(d<0)e.removeChild(e.lastChild);else{var g=document.createElement("div"),w=p;s&&(w=w.replace(u("this\\."+s.trim()),l+"["+(v.length-b)+"]")),f&&(w=w.replace(u("this\\."+f.trim()),String(v.length-b))),g.innerHTML=w,e.appendChild(g.firstChild)}e.__l={};var _=y(e,r);h(_,m,r,n.keys)}},b=function(t,e){e[t.name.split(/:|\./gim)[0].toUpperCase()](t)},g=function(t,e){var n={get:function(t,e){return"object"===c(t[e])&&null!==t[e]?new Proxy(t[e],n):t[e]},set:function(n,r,i){if("function"==typeof t[r])return!1;var o=!isNaN(Number(r))||"length"===r,a=[];return a=n instanceof Array&&o?Object.keys(t).filter((function(e){return r=t[e],i=n,r instanceof Array&&i instanceof Array&&r.length===i.length&&r.every((function(t,e){return t===i[e]}));var r,i})):Object.keys(t).some((function(t){return void 0===n[t]}))?Object.keys(t).filter((function(e){return"object"===c(t[e])})):[r],n[r]=i,e(a),!0}};return Proxy.revocable(Object.seal(t),n)},w=function(){function e(t){void 0===t&&(t={}),this.state=t,this.directives={}}return e.prototype.mount=function(e){var n="string"==typeof e?document.querySelector(e):e;return this.ast=y(n,this.state),this.state=g(this.state,this.render.bind(this)).proxy,this.directives=t(t({},this.directives),m),this.render(),n.__l=this,this.state},e.prototype.directive=function(t,e){this.directives[t.toUpperCase()]=e},e.prototype.render=function(t){void 0===t&&(t=Object.keys(this.state)),h(this.ast,m,this.state,t)},e}(),_=function(t){return new w(t)},x=function(t){void 0===t&&(t=document);var e="l-state";o(t.querySelectorAll("[l-state]")).filter((function(t){return void 0===t.__l})).map((function(t){var n=t.getAttribute(e);try{var r=new Function("return "+(n||{}));_(r()).mount(t)}catch(e){console.warn('Lucia Error: "'+e+'"\n\nExpression: "'+n+'"\nElement:',t)}}))},j=Object.freeze({__proto__:null,component:_,compile:y,patch:h,reactive:g,directives:m,init:x}),E=function(){return x()},O=function(){return e(void 0,void 0,void 0,(function(){return n(this,(function(t){switch(t.label){case 0:return[4,new Promise((function(t){"loading"===document.readyState?document.addEventListener("DOMContentLoaded",t):t()}))];case 1:return t.sent(),E(),document.addEventListener("turbolinks:load",E),document.addEventListener("turbo:load",E),[2]}}))}))};return window.__l?window.__l((function(){return O()})):O(),j}(); | ||
| var Lucia=function(){"use strict";var e=function(){return(e=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function t(e,t,n,r){return new(n||(n=Promise))((function(i,o){function a(e){try{u(r.next(e))}catch(e){o(e)}}function l(e){try{u(r.throw(e))}catch(e){o(e)}}function u(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,l)}u((r=r.apply(e,t||[])).next())}))}function n(e,t){var n,r,i,o,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function l(o){return function(l){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(6===o[0]&&a.label<i[1]){a.label=i[1],i=o;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(o);break}i[2]&&a.ops.pop(),a.trys.pop();continue}o=t.call(e,a)}catch(e){o=[6,e],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,l])}}}function r(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function i(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,i,o=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)a.push(r.value)}catch(e){i={error:e}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(i)throw i.error}}return a}function o(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(i(arguments[t]));return e}var a,l="l-";!function(e){e["@"]="on",e[":"]="bind"}(a||(a={}));var u=function(e){return new RegExp("\\b"+e+"\\b","gim")};function c(e){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var s=function(e){return e.replace(/\s+/gim," ").trim()},f=function(e,t,n){var r="with($state){"+(null==n||n?"return "+e:e)+"}";return function(o){try{var a=i([Object.keys(o),Object.values(o)],2),l=a[0],u=a[1],c=e.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim,""),s=n?l.indexOf(c):-1;if(-1!==s)return function(e,t,n){var r=t[n],i=/\[(\d+)\]/gim.exec(e);return i&&i[1]&&r instanceof Array&&!isNaN(i[1])?r[Number(i[1])]:e.endsWith("()")?r():r}(e,u,s);return new Function("$state","$el","$emit",r)(o,t,(function(e,t){var n=new CustomEvent(e,t);document.dispatchEvent(n)}))}catch(n){console.warn('Lucia Error: "'+n+'"\n\nExpression: "'+e+'"\nElement:',t)}}},v=function(e,t){return e[t]},d=function(e,t,n){return e[t]=n},p=function(e){return o(new Set(e))},h=function(e){return e.hasAttribute("l-for")},y=function(e,t){var n=i(m(e,t),2),r=n[0],o=n[1],a=Object.keys(r).length>0,l=Object.values(r).some((function(e){var n=e.value;return Object.keys(t).some((function(e){return u(e).test(n)}))}));return a?{el:e,deps:o,directives:r,type:l?1:0}:null},m=function(e,t){var n,i;void 0===t&&(t={});var c={},s=[],h=function(n,r){var i=[],h=Object.keys(t),y=!0,m=h.filter((function(e){var n=u(e).test(String(r));if("function"==typeof t[e]&&n){var a=h.filter((function(n){return u(n).test(String(t[e]))}));i.push.apply(i,o(a))}return n}));/on|@/gim.test(n)&&(y=!1),n.includes("for")&&void 0===v(e,"__l_for_template")&&(d(e,"__l_for_template",String(e.innerHTML).trim()),y=!1);var b=p(o(m,i));s.push.apply(s,o(b));var _={compute:f(r,e,y),deps:b,value:r};n.startsWith(l)?c[n.slice(l.length)]=_:Object.keys(a).includes(n[0])&&(c[a[n[0]]+":"+n.slice(1)]=_)};try{for(var y=r(e.attributes),m=y.next();!m.done;m=y.next()){var b=m.value;h(b.name,b.value)}}catch(e){n={error:e}}finally{try{m&&!m.done&&(i=y.return)&&i.call(y)}finally{if(n)throw n.error}}return[c,p(s)]},b=function e(t,n){var i,a;void 0===n&&(n=!1);var l,u=[],c=h(t),s=!!(l=t).parentElement&&l.parentElement.hasAttribute("l-for");if(!n&&(c||s))return u;if(n&&c||u.push(t),!c&&!s||n)try{for(var f=r(t.childNodes),v=f.next();!v.done;v=f.next()){var d=v.value;d.nodeType===Node.ELEMENT_NODE&&(!n&&h(d)?u.push(d):u.push.apply(u,o(e(d,n))))}}catch(e){i={error:e}}finally{try{v&&!v.done&&(a=f.return)&&a.call(f)}finally{if(i)throw i.error}}return u},_=function(e,t){var n,i;if(void 0===t&&(t={}),!e)throw new Error("Please provide a Element");var o=[],l=void 0!==v(e,"__l")&&h(e),u=b(e,l);try{for(var c=r(u),s=c.next();!s.done;s=c.next()){var f=s.value;if(!f.hasAttribute("l-state")&&new RegExp("(l-|"+Object.keys(a).join("|")+")\\w+","gim").test(f.outerHTML)){var d=y(f,t);d&&o.push(d)}}}catch(e){n={error:e}}finally{try{s&&!s.done&&(i=c.return)&&i.call(c)}finally{if(n)throw n.error}}return o},g=function(e,t,n,o){var a,l;void 0===n&&(n={}),void 0===o&&(o=[]);for(var u=[],c=function(a){var l,c,s=e[a],f=0===s.type;if(f&&u.push(a),!o.some((function(e){return s.deps.includes(e)}))&&!f)return"continue";var v=function(e,r){if(o.some((function(e){return r.deps.includes(e)}))||f){var i={el:s.el,name:e,data:r,node:s,state:n};E(i,t)}};try{for(var d=(l=void 0,r(Object.entries(s.directives))),p=d.next();!p.done;p=d.next()){var h=i(p.value,2);v(h[0],h[1])}}catch(e){l={error:e}}finally{try{p&&!p.done&&(c=d.return)&&c.call(d)}finally{if(l)throw l.error}}},s=0;s<e.length;s++)c(s);try{for(var f=r(u),v=f.next();!v.done;v=f.next()){s=v.value;e.splice(s,1)}}catch(e){a={error:e}}finally{try{v&&!v.done&&(l=f.return)&&l.call(f)}finally{if(a)throw a.error}}},w={BIND:function(e){var t=e.el,n=e.name,r=e.data,i=e.state;switch(n.split(":")[1]){case"class":var o=r.compute(i);if("string"==typeof o)return t.setAttribute("class",s(t.className+" "+o));if(o instanceof Array)return t.setAttribute("class",s(t.className+" "+o.join(" ")));var a=[];for(var l in o)o[l]&&a.push(l);var u=new RegExp("\\b"+Object.keys(o).join("|")+"\\b","gim"),f=t.className.replace(u,"");return a.length>0?t.setAttribute("class",s(f+" "+a.join(" "))):s(t.className).length>0?t.setAttribute("class",s(f)):t.removeAttribute("class");case"style":var v=r.compute(i);for(var l in t.removeAttribute("style"),v)t.style[l]=v[l];break;default:var d=r.compute(i);if("object"===c(d)&&null!==d)for(var l in d)d[l]?t.setAttribute(l,d[l]):t.removeAttribute(l);else d?t.setAttribute(n.split(":")[1],d):t.removeAttribute(n.split(":")[1])}},HTML:function(e){var t,n=e.el,r=e.data,i=e.state;n.innerHTML=null!==(t=r.compute(i))&&void 0!==t?t:r.value;var o=_(n,i);g(o,w,i,r.deps)},IF:function(e){var t,n,r=e.el,i=e.data,o=e.state,a=e.node;a=a;var l=!!i.compute(o);if(!v(a.el,"__l_if_template")){var u=document.createElement("template");d(u,"__l_if_template",!0),u.content.appendChild(r.cloneNode(!0)),r.replaceWith(u),a.el=u}var c=v(a.el,"__l_if_has_inserted");if(!l&&c)null===(t=a.el.nextElementSibling)||void 0===t||t.remove(),d(a.el,"__l_has_inserted",!1);else if(l&&!c){var s=a.el.content.cloneNode(!0);null===(n=a.el.parentElement)||void 0===n||n.insertBefore(s,a.el.nextElementSibling),d(a.el,"__l_has_inserted",!0);var f=a.el.nextElementSibling;f.removeAttribute("l-if");var p=_(f,o);g(p,w,o,Object.keys(o))}},MODEL:function(e){var t=e.el,n=e.name,r=e.data,o=e.state,a=t,l=o[r.value];if(a.value!==String(l)&&(a.value=String(l)),!v(a,"__l_model_registered")){var u=i(n.split("."),2)[1];a.addEventListener("debounce"===u?"change":"input",(function(){return function(e,t,n,r){var i,o="number"==typeof t&&!isNaN(e.value),a="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);return i=o?parseFloat(e.value):a?"true"===e.value:l?"null"===e.value?null:void 0:String(e.value),r[n.value]=i,i}(a,l,r,o)})),d(a,"__l_model_registered",!0)}},ON:function(e){var t=e.el,n=e.name,r=e.data,o=e.state,a={};if(!v(t,"__l_on_registered")){var l=i(n.split("."),2),u=l[0],c=l[1],s=u.split(":")[1],f=c||null;a.once="once"===f,a.passive="passive"===f,(["away","global"].includes(String(f))?document:t).addEventListener(s,(function(e){if("prevent"===f&&e.preventDefault(),"stop"===f&&e.stopPropagation(),"away"===f){if(t.contains(e.target))return;if(t.offsetWidth<1&&t.offsetHeight<1)return}r.compute(o)}),a),d(t,"__l_on_registered",!0)}},TEXT:function(e){var t,n=e.el,r=e.data,i=e.state;n.textContent=null!==(t=r.compute(i))&&void 0!==t?t:r.value},FOR:function(e){var t=e.el,n=e.data,r=e.state,o=i(n.value.split(/in +/g),2),a=o[0],l=o[1],c=i(a.replace(/\(|\)/gim,"").split(","),2),s=c[0],f=c[1],p=r[l],h=v(t,"__l_for_template");t.innerHTML.trim()===h&&(t.innerHTML="");var y=p.length-t.children.length;if(0===p.length)t.innerHTML="";else if(0!==y)for(var m=Math.abs(y);m>0;m--)if(y<0)t.removeChild(t.lastChild);else{var b=h.startsWith("<th")?"thead":h.startsWith("<td")||h.startsWith("<tr")?"tbody":"div",E=document.createElement(b),x=h;s&&(x=x.replace(u("this\\."+s.trim()),l+"["+(p.length-m)+"]")),f&&(x=x.replace(u("this\\."+f.trim()),String(p.length-m))),E.innerHTML=x,t.appendChild(E.firstElementChild)}d(t,"__l",!0);var j=_(t,r);g(j,w,r,n.deps)}},E=function(e,t){t[e.name.split(/:|\./gim)[0].toUpperCase()](e)},x=function(e,t){var n={get:function(e,t){return"object"===c(e[t])&&null!==e[t]?new Proxy(e[t],n):e[t]},set:function(n,r,i){if("function"==typeof e[r])return!1;var o=!isNaN(Number(r))||"length"===r,a=[];return a=n instanceof Array&&o?Object.keys(e).filter((function(t){return r=e[t],i=n,r instanceof Array&&i instanceof Array&&r.length===i.length&&r.every((function(e,t){return e===i[t]}));var r,i})):Object.keys(e).some((function(e){return void 0===n[e]}))?Object.keys(e).filter((function(t){return"object"===c(e[t])})):[r],n[r]=i,t(a),!0}};return Proxy.revocable(Object.seal(e),n)},j=function(){function t(e){void 0===e&&(e={}),this.state=e,this.directives={}}return t.prototype.mount=function(t){var n="string"==typeof t?document.querySelector(t):t;return this.ast=_(n,this.state),this.state=x(this.state,this.render.bind(this)).proxy,this.directives=e(e({},this.directives),w),this.render(),d(n,"__l",this),this.state},t.prototype.directive=function(e,t){this.directives[e.toUpperCase()]=t},t.prototype.render=function(e){void 0===e&&(e=Object.keys(this.state)),g(this.ast,w,this.state,e)},t}(),O=function(e){return new j(e)},S=new CustomEvent("lucia:load"),A=function(e){void 0===e&&(e=document);var t="l-state";o(e.querySelectorAll("[l-state]")).filter((function(e){return void 0===v(e,"__l")})).map((function(e){var n=e.getAttribute(t);try{var r=new Function("return "+(n||{}));O(r()).mount(e)}catch(t){console.warn('Lucia Error: "'+t+'"\n\nExpression: "'+n+'"\nElement:',e)}})),document.dispatchEvent(S)},L=Object.freeze({__proto__:null,component:O,compile:_,patch:g,reactive:x,directives:w,luciaLoadEvent:S,init:A}),N=function(){return A()},k=function(){return t(void 0,void 0,void 0,(function(){return n(this,(function(e){switch(e.label){case 0:return[4,new Promise((function(e){"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()}))];case 1:return e.sent(),N(),document.addEventListener("turbolinks:load",N),document.addEventListener("turbo:load",N),[2]}}))}))};return window.__l?window.__l((function(){return k()})):k(),L}(); |
@@ -13,3 +13,2 @@ 'use strict'; | ||
| const rawDirectiveSplitRE = () => /:|\./gim; | ||
| const semicolonCaptureRE = () => /(;)/gim; | ||
| const arrayIndexCaptureRE = () => /\[(\d+)\]/gim; | ||
@@ -21,6 +20,9 @@ const eventDirectivePrefixRE = () => /on|@/gim; | ||
| }; | ||
| const expressionPropRE = (key) => { | ||
| return new RegExp(`\\b${key}\\b`, 'gim'); | ||
| const expressionPropRE = (prop) => { | ||
| return new RegExp(`\\b${prop}\\b`, 'gim'); | ||
| }; | ||
| const formatAcceptableWhitespace = (expression) => { | ||
| return expression.replace(/\s+/gim, ' ').trim(); | ||
| }; | ||
| const bindDirective = ({ el, name, data, state }) => { | ||
@@ -31,12 +33,12 @@ switch (name.split(':')[1]) { | ||
| if (typeof hydratedClasses === 'string') { | ||
| return el.setAttribute('class', `${el.className} ${hydratedClasses}`.trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(`${el.className} ${hydratedClasses}`)); | ||
| } | ||
| else if (hydratedClasses instanceof Array) { | ||
| return el.setAttribute('class', `${el.className} ${hydratedClasses.join(' ')}`.trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(`${el.className} ${hydratedClasses.join(' ')}`)); | ||
| } | ||
| else { | ||
| const classes = []; | ||
| for (const key in hydratedClasses) { | ||
| if (hydratedClasses[key] && !el.className.includes(key)) | ||
| classes.push(key); | ||
| for (const prop in hydratedClasses) { | ||
| if (hydratedClasses[prop]) | ||
| classes.push(prop); | ||
| } | ||
@@ -46,6 +48,6 @@ const removeDynamicClassesRE = new RegExp(`\\b${Object.keys(hydratedClasses).join('|')}\\b`, 'gim'); | ||
| if (classes.length > 0) { | ||
| return el.setAttribute('class', `${rawClasses} ${classes.join(' ')}`.trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(`${rawClasses} ${classes.join(' ')}`)); | ||
| } | ||
| else if (el.className.trim().length > 0) { | ||
| return el.setAttribute('class', rawClasses.trim()); | ||
| else if (formatAcceptableWhitespace(el.className).length > 0) { | ||
| return el.setAttribute('class', formatAcceptableWhitespace(rawClasses)); | ||
| } | ||
@@ -59,4 +61,4 @@ else { | ||
| el.removeAttribute('style'); | ||
| for (const key in hydratedStyles) { | ||
| el.style[key] = hydratedStyles[key]; | ||
| for (const prop in hydratedStyles) { | ||
| el.style[prop] = hydratedStyles[prop]; | ||
| } | ||
@@ -67,8 +69,8 @@ break; | ||
| if (typeof hydratedAttributes === 'object' && hydratedAttributes !== null) { | ||
| for (const key in hydratedAttributes) { | ||
| if (hydratedAttributes[key]) { | ||
| el.setAttribute(key, hydratedAttributes[key]); | ||
| for (const prop in hydratedAttributes) { | ||
| if (hydratedAttributes[prop]) { | ||
| el.setAttribute(prop, hydratedAttributes[prop]); | ||
| } | ||
| else { | ||
| el.removeAttribute(key); | ||
| el.removeAttribute(prop); | ||
| } | ||
@@ -87,2 +89,18 @@ } | ||
| const interpretProps = (expression, stateValues, positionInState) => { | ||
| const value = stateValues[positionInState]; | ||
| const arrayIndex = arrayIndexCaptureRE().exec(expression); | ||
| if (arrayIndex && | ||
| arrayIndex[1] && | ||
| value instanceof Array && | ||
| !isNaN(arrayIndex[1])) { | ||
| return value[Number(arrayIndex[1])]; | ||
| } | ||
| else if (expression.endsWith('()')) { | ||
| return value(); | ||
| } | ||
| else { | ||
| return value; | ||
| } | ||
| }; | ||
| const computeExpression = (expression, el, returnable) => { | ||
@@ -92,25 +110,18 @@ let formattedExpression = `with($state){${returnable ?? true ? `return ${expression}` : expression}}`; | ||
| try { | ||
| const [propKeys, propValues] = [Object.keys(state), Object.values(state)]; | ||
| const strippedExpression = expression.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim, ''); | ||
| const positionInState = returnable ? Object.keys(state).indexOf(strippedExpression) : -1; | ||
| const positionInState = returnable ? propKeys.indexOf(strippedExpression) : -1; | ||
| if (positionInState !== -1) { | ||
| const value = Object.values(state)[positionInState]; | ||
| const arrayIndex = arrayIndexCaptureRE().exec(expression); | ||
| if (arrayIndex && | ||
| arrayIndex[1] && | ||
| value instanceof Array && | ||
| !isNaN(arrayIndex[1])) { | ||
| return value[Number(arrayIndex[1])]; | ||
| } | ||
| else if (expression.endsWith('()')) { | ||
| return value(); | ||
| } | ||
| else | ||
| return value; | ||
| return interpretProps(expression, propValues, positionInState); | ||
| } | ||
| else { | ||
| return new Function('$state', '$el', formattedExpression)(state, el || null); | ||
| const emit = (name, options) => { | ||
| const event = new CustomEvent(name, options); | ||
| document.dispatchEvent(event); | ||
| }; | ||
| return new Function('$state', '$el', '$emit', formattedExpression)(state, el, emit); | ||
| } | ||
| } | ||
| catch (err) { | ||
| console.warn(`Lucia Error: "${err}"\n\nExpression: "${expression}"\nElement:`, el || null); | ||
| console.warn(`Lucia Error: "${err}"\n\nExpression: "${expression}"\nElement:`, el); | ||
| } | ||
@@ -120,47 +131,18 @@ }; | ||
| const getCustomProp = (el, prop) => el[prop]; | ||
| const setCustomProp = (el, prop, value) => (el[prop] = value); | ||
| const removeDupesFromArray = (array) => [...new Set(array)]; | ||
| const collectAndInitDirectives = (el, state = {}) => { | ||
| const directives = {}; | ||
| const nodeKeys = []; | ||
| if (el.attributes) { | ||
| for (const { name, value } of el.attributes) { | ||
| const keysInFunctions = []; | ||
| const keysInState = Object.keys(state); | ||
| let returnable = true; | ||
| const keys = keysInState.filter((key) => { | ||
| const hasKey = expressionPropRE(key).test(String(value)); | ||
| if (typeof state[key] === 'function' && hasKey) { | ||
| const keysInFunction = keysInState.filter((k) => expressionPropRE(k).test(String(state[key]))); | ||
| keysInFunctions.push(...keysInFunction); | ||
| } | ||
| return hasKey; | ||
| }); | ||
| if (eventDirectivePrefixRE().test(name)) | ||
| returnable = false; | ||
| if (name.includes('for') && el.__l_for_template === undefined) { | ||
| el.__l_for_template = String(el.innerHTML).trim(); | ||
| returnable = false; | ||
| } | ||
| const uniqueCompiledKeys = removeDupesFromArray([...keys, ...keysInFunctions]); | ||
| nodeKeys.push(...uniqueCompiledKeys); | ||
| const directiveData = { | ||
| compute: computeExpression(value, el, returnable), | ||
| keys: uniqueCompiledKeys, | ||
| value, | ||
| }; | ||
| if (name.startsWith(DIRECTIVE_PREFIX)) { | ||
| directives[name.slice(DIRECTIVE_PREFIX.length)] = directiveData; | ||
| } | ||
| else if (Object.keys(DIRECTIVE_SHORTHANDS).includes(name[0])) { | ||
| directives[`${DIRECTIVE_SHORTHANDS[name[0]]}:${name.slice(1)}`] = directiveData; | ||
| } | ||
| } | ||
| } | ||
| return [directives, removeDupesFromArray(nodeKeys)]; | ||
| const isListRenderScope = (el) => { | ||
| return el.hasAttribute(`${DIRECTIVE_PREFIX}for`); | ||
| }; | ||
| const isUnderListRenderScope = (el) => { | ||
| if (!el.parentElement) | ||
| return false; | ||
| return el.parentElement.hasAttribute(`${DIRECTIVE_PREFIX}for`); | ||
| }; | ||
| const createASTNode = (el, state) => { | ||
| const [directives, keys] = collectAndInitDirectives(el, state); | ||
| const [directives, deps] = collectAndInitDirectives(el, state); | ||
| const hasDirectives = Object.keys(directives).length > 0; | ||
| const hasKeyInDirectives = Object.values(directives).some(({ value }) => Object.keys(state).some((key) => expressionPropRE(key).test(value))); | ||
| const hasDepInDirectives = Object.values(directives).some(({ value }) => Object.keys(state).some((prop) => expressionPropRE(prop).test(value))); | ||
| if (!hasDirectives) | ||
@@ -170,15 +152,44 @@ return null; | ||
| el, | ||
| keys: keys, | ||
| deps: deps, | ||
| directives: directives, | ||
| type: hasKeyInDirectives ? 1 : 0, | ||
| type: hasDepInDirectives ? 1 : 0, | ||
| }; | ||
| }; | ||
| const isListRenderScope = (el) => { | ||
| return el.hasAttribute(`${DIRECTIVE_PREFIX}for`); | ||
| const collectAndInitDirectives = (el, state = {}) => { | ||
| const directives = {}; | ||
| const nodeDeps = []; | ||
| for (const { name, value } of el.attributes) { | ||
| const depsInFunctions = []; | ||
| const propsInState = Object.keys(state); | ||
| let returnable = true; | ||
| const deps = propsInState.filter((prop) => { | ||
| const hasDep = expressionPropRE(prop).test(String(value)); | ||
| if (typeof state[prop] === 'function' && hasDep) { | ||
| const depsInFunction = propsInState.filter((p) => expressionPropRE(p).test(String(state[prop]))); | ||
| depsInFunctions.push(...depsInFunction); | ||
| } | ||
| return hasDep; | ||
| }); | ||
| if (eventDirectivePrefixRE().test(name)) | ||
| returnable = false; | ||
| if (name.includes('for') && getCustomProp(el, '__l_for_template') === undefined) { | ||
| setCustomProp(el, '__l_for_template', String(el.innerHTML).trim()); | ||
| returnable = false; | ||
| } | ||
| const uniqueCompiledDeps = removeDupesFromArray([...deps, ...depsInFunctions]); | ||
| nodeDeps.push(...uniqueCompiledDeps); | ||
| const directiveData = { | ||
| compute: computeExpression(value, el, returnable), | ||
| deps: uniqueCompiledDeps, | ||
| value, | ||
| }; | ||
| if (name.startsWith(DIRECTIVE_PREFIX)) { | ||
| directives[name.slice(DIRECTIVE_PREFIX.length)] = directiveData; | ||
| } | ||
| else if (Object.keys(DIRECTIVE_SHORTHANDS).includes(name[0])) { | ||
| directives[`${DIRECTIVE_SHORTHANDS[name[0]]}:${name.slice(1)}`] = directiveData; | ||
| } | ||
| } | ||
| return [directives, removeDupesFromArray(nodeDeps)]; | ||
| }; | ||
| const isUnderListRenderScope = (el) => { | ||
| if (!el.parentElement) | ||
| return false; | ||
| return el.parentElement.hasAttribute(`${DIRECTIVE_PREFIX}for`); | ||
| }; | ||
| const extractNodeChildrenAsCollection = (rootNode, isListGroup = false) => { | ||
@@ -210,9 +221,8 @@ const collection = []; | ||
| const ast = []; | ||
| const isListGroup = el.__l !== undefined && isListRenderScope(el); | ||
| const isListGroup = getCustomProp(el, '__l') !== undefined && isListRenderScope(el); | ||
| const nodes = extractNodeChildrenAsCollection(el, isListGroup); | ||
| for (const node of nodes) { | ||
| if (node.hasAttribute(`${DIRECTIVE_PREFIX}state`)) | ||
| continue; | ||
| if (hasDirectiveRE().test(node.outerHTML)) { | ||
| if (node.hasAttribute(`${DIRECTIVE_PREFIX}state`)) { | ||
| continue; | ||
| } | ||
| const newASTNode = createASTNode(node, state); | ||
@@ -226,3 +236,3 @@ if (newASTNode) | ||
| const patch = (ast, directives, state = {}, changedKeys = []) => { | ||
| const patch = (ast, directives, state = {}, changedProps = []) => { | ||
| const staticNodeCleanupQueue = []; | ||
@@ -234,9 +244,15 @@ for (let i = 0; i < ast.length; i++) { | ||
| staticNodeCleanupQueue.push(i); | ||
| const nodeHasKey = changedKeys.some((key) => node.keys.includes(key)); | ||
| if (!nodeHasKey && !isStatic) | ||
| const nodeHasDep = changedProps.some((prop) => node.deps.includes(prop)); | ||
| if (!nodeHasDep && !isStatic) | ||
| continue; | ||
| for (const [directiveName, directiveData] of Object.entries(node.directives)) { | ||
| const directiveHasKey = changedKeys.some((key) => directiveData.keys.includes(key)); | ||
| if (directiveHasKey || isStatic) { | ||
| const directiveProps = { el: node.el, name: directiveName, data: directiveData, state }; | ||
| const directiveHasDep = changedProps.some((prop) => directiveData.deps.includes(prop)); | ||
| if (directiveHasDep || isStatic) { | ||
| const directiveProps = { | ||
| el: node.el, | ||
| name: directiveName, | ||
| data: directiveData, | ||
| node, | ||
| state, | ||
| }; | ||
| renderDirective(directiveProps, directives); | ||
@@ -252,23 +268,31 @@ } | ||
| const htmlDirective = ({ el, data, state }) => { | ||
| const key = data.value.replace(semicolonCaptureRE(), ''); | ||
| if (key in state) | ||
| el.innerHTML = String(state[key]); | ||
| el.innerHTML = data.compute(state) ?? data.value; | ||
| el.__l = {}; | ||
| const ast = compile(el, state); | ||
| patch(ast, directives, state, data.keys); | ||
| patch(ast, directives, state, data.deps); | ||
| }; | ||
| const ifDirective = ({ el, name, data, state }) => { | ||
| const modifier = name.split(':')[1]; | ||
| const key = data.value.replace(semicolonCaptureRE(), ''); | ||
| let hydratedConditional = true; | ||
| if (key in state) | ||
| hydratedConditional = !!state[key]; | ||
| else | ||
| hydratedConditional = !!data.compute(state); | ||
| if (modifier === 'hidden') | ||
| el.hidden = !hydratedConditional; | ||
| else | ||
| el.style.display = hydratedConditional === false ? 'none' : null; | ||
| const ifDirective = ({ el, data, state, node }) => { | ||
| node = node; | ||
| const hydratedConditional = !!data.compute(state); | ||
| if (!getCustomProp(node.el, '__l_if_template')) { | ||
| const template = document.createElement('template'); | ||
| setCustomProp(template, '__l_if_template', true); | ||
| template.content.appendChild(el.cloneNode(true)); | ||
| el.replaceWith(template); | ||
| node.el = template; | ||
| } | ||
| const hasInserted = getCustomProp(node.el, '__l_if_has_inserted'); | ||
| if (!hydratedConditional && hasInserted) { | ||
| node.el.nextElementSibling?.remove(); | ||
| setCustomProp(node.el, '__l_has_inserted', false); | ||
| } | ||
| else if (hydratedConditional && !hasInserted) { | ||
| const clone = node.el.content.cloneNode(true); | ||
| node.el.parentElement?.insertBefore(clone, node.el.nextElementSibling); | ||
| setCustomProp(node.el, '__l_has_inserted', true); | ||
| const nextEl = node.el.nextElementSibling; | ||
| nextEl.removeAttribute('l-if'); | ||
| const ast = compile(nextEl, state); | ||
| patch(ast, directives, state, Object.keys(state)); | ||
| } | ||
| }; | ||
@@ -306,8 +330,8 @@ | ||
| } | ||
| const [, prop] = name.split('.'); | ||
| const callback = () => inputCallback(el, hydratedValue, data, state); | ||
| if (prop === 'debounce') | ||
| el.onchange = callback; | ||
| else | ||
| el.oninput = callback; | ||
| if (!getCustomProp(el, '__l_model_registered')) { | ||
| const [, prop] = name.split('.'); | ||
| const callback = () => inputCallback(el, hydratedValue, data, state); | ||
| el.addEventListener(prop === 'debounce' ? 'change' : 'input', callback); | ||
| setCustomProp(el, '__l_model_registered', true); | ||
| } | ||
| }; | ||
@@ -317,3 +341,4 @@ | ||
| const options = {}; | ||
| if (el.__l_on_registered) | ||
| const globalScopeEventProps = ['away', 'global']; | ||
| if (getCustomProp(el, '__l_on_registered')) | ||
| return; | ||
@@ -328,2 +353,8 @@ const [directiveAndEventName, prop] = name.split('.'); | ||
| $event.stopPropagation(); | ||
| if (eventProp === 'away') { | ||
| if (el.contains($event.target)) | ||
| return; | ||
| if (el.offsetWidth < 1 && el.offsetHeight < 1) | ||
| return; | ||
| } | ||
| data.compute(state); | ||
@@ -333,12 +364,8 @@ }; | ||
| options.passive = eventProp === 'passive'; | ||
| el.addEventListener(eventName, handler, options); | ||
| el.__l_on_registered = handler; | ||
| (globalScopeEventProps.includes(String(eventProp)) ? document : el).addEventListener(eventName, handler, options); | ||
| setCustomProp(el, '__l_on_registered', true); | ||
| }; | ||
| const textDirective = ({ el, data, state }) => { | ||
| const key = data.value.replace(semicolonCaptureRE(), ''); | ||
| if (key in state) | ||
| el.textContent = String(state[key]); | ||
| else | ||
| el.textContent = data.compute(state) ?? data.value; | ||
| el.textContent = data.compute(state) ?? data.value; | ||
| }; | ||
@@ -350,3 +377,3 @@ | ||
| const currArray = state[target]; | ||
| let template = String(el.__l_for_template); | ||
| let template = getCustomProp(el, '__l_for_template'); | ||
| if (el.innerHTML.trim() === template) | ||
@@ -362,3 +389,8 @@ el.innerHTML = ''; | ||
| else { | ||
| const temp = document.createElement('div'); | ||
| const tag = template.startsWith('<th') | ||
| ? 'thead' | ||
| : template.startsWith('<td') || template.startsWith('<tr') | ||
| ? 'tbody' | ||
| : 'div'; | ||
| const temp = document.createElement(tag); | ||
| let content = template; | ||
@@ -372,9 +404,9 @@ if (item) { | ||
| temp.innerHTML = content; | ||
| el.appendChild(temp.firstChild); | ||
| el.appendChild(temp.firstElementChild); | ||
| } | ||
| } | ||
| } | ||
| el.__l = {}; | ||
| setCustomProp(el, '__l', true); | ||
| const ast = compile(el, state); | ||
| patch(ast, directives, state, data.keys); | ||
| patch(ast, directives, state, data.deps); | ||
| }; | ||
@@ -402,3 +434,2 @@ | ||
| }; | ||
| const reactive = (state, callback) => { | ||
@@ -418,16 +449,16 @@ const handler = { | ||
| const hasArrayMutationKey = !isNaN(Number(key)) || key === 'length'; | ||
| let keys = []; | ||
| let props = []; | ||
| if (target instanceof Array && hasArrayMutationKey) { | ||
| keys = Object.keys(state).filter((k) => arrayEquals(state[k], target)); | ||
| props = Object.keys(state).filter((prop) => arrayEquals(state[prop], target)); | ||
| } | ||
| else { | ||
| if (Object.keys(state).some((key) => target[key] === undefined)) { | ||
| keys = Object.keys(state).filter((key) => typeof state[key] === 'object'); | ||
| if (Object.keys(state).some((prop) => target[prop] === undefined)) { | ||
| props = Object.keys(state).filter((prop) => typeof state[prop] === 'object'); | ||
| } | ||
| else { | ||
| keys = [key]; | ||
| props = [key]; | ||
| } | ||
| } | ||
| target[key] = value; | ||
| callback(keys); | ||
| callback(props); | ||
| return true; | ||
@@ -450,3 +481,3 @@ }, | ||
| this.render(); | ||
| rootEl.__l = this; | ||
| setCustomProp(rootEl, '__l', this); | ||
| return this.state; | ||
@@ -457,4 +488,4 @@ } | ||
| } | ||
| render(keys = Object.keys(this.state)) { | ||
| patch(this.ast, directives, this.state, keys); | ||
| render(props = Object.keys(this.state)) { | ||
| patch(this.ast, directives, this.state, props); | ||
| } | ||
@@ -464,2 +495,3 @@ } | ||
| const luciaLoadEvent = new CustomEvent('lucia:load'); | ||
| const init = (element = document) => { | ||
@@ -469,3 +501,3 @@ const stateDirective = `${DIRECTIVE_PREFIX}state`; | ||
| elements | ||
| .filter((el) => el.__l === undefined) | ||
| .filter((el) => getCustomProp(el, '__l') === undefined) | ||
| .map((el) => { | ||
@@ -481,2 +513,3 @@ const expression = el.getAttribute(stateDirective); | ||
| }); | ||
| document.dispatchEvent(luciaLoadEvent); | ||
| }; | ||
@@ -488,3 +521,4 @@ | ||
| exports.init = init; | ||
| exports.luciaLoadEvent = luciaLoadEvent; | ||
| exports.patch = patch; | ||
| exports.reactive = reactive; |
@@ -1,1 +0,1 @@ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e;!function(e){e["@"]="on",e[":"]="bind"}(e||(e={}));const t=e=>new RegExp(`\\b${e}\\b`,"gim"),s=(e,t,s)=>{let n=`with($state){${s??1?`return ${e}`:e}}`;return r=>{try{const i=e.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim,""),l=s?Object.keys(r).indexOf(i):-1;if(-1!==l){const t=Object.values(r)[l],s=/\[(\d+)\]/gim.exec(e);return s&&s[1]&&t instanceof Array&&!isNaN(s[1])?t[Number(s[1])]:e.endsWith("()")?t():t}return new Function("$state","$el",n)(r,t||null)}catch(s){console.warn(`Lucia Error: "${s}"\n\nExpression: "${e}"\nElement:`,t||null)}}},n=e=>[...new Set(e)],r=(r,i)=>{const[l,o]=((r,i={})=>{const l={},o=[];if(r.attributes)for(const{name:a,value:c}of r.attributes){const u=[],p=Object.keys(i);let m=!0;const f=p.filter((e=>{const s=t(e).test(String(c));if("function"==typeof i[e]&&s){const s=p.filter((s=>t(s).test(String(i[e]))));u.push(...s)}return s}));/on|@/gim.test(a)&&(m=!1),a.includes("for")&&void 0===r.__l_for_template&&(r.__l_for_template=String(r.innerHTML).trim(),m=!1);const d=n([...f,...u]);o.push(...d);const h={compute:s(c,r,m),keys:d,value:c};a.startsWith("l-")?l[a.slice("l-".length)]=h:Object.keys(e).includes(a[0])&&(l[`${e[a[0]]}:${a.slice(1)}`]=h)}return[l,n(o)]})(r,i),a=Object.keys(l).length>0,c=Object.values(l).some((({value:e})=>Object.keys(i).some((s=>t(s).test(e)))));return a?{el:r,keys:o,directives:l,type:c?1:0}:null},i=e=>e.hasAttribute("l-for"),l=(e,t=!1)=>{const s=[],n=i(e),r=!!(o=e).parentElement&&o.parentElement.hasAttribute("l-for");var o;if(!t&&(n||r))return s;if(t&&n||s.push(e),!n&&!r||t)for(const n of e.childNodes)n.nodeType===Node.ELEMENT_NODE&&(!t&&i(n)?s.push(n):s.push(...l(n,t)));return s},o=(t,s={})=>{if(!t)throw new Error("Please provide a Element");const n=[],o=void 0!==t.__l&&i(t),a=l(t,o);for(const t of a)if(new RegExp(`(l-|${Object.keys(e).join("|")})\\w+`,"gim").test(t.outerHTML)){if(t.hasAttribute("l-state"))continue;const e=r(t,s);e&&n.push(e)}return n},a=(e,t,s={},n=[])=>{const r=[];for(let i=0;i<e.length;i++){const l=e[i],o=0===l.type;o&&r.push(i);if(n.some((e=>l.keys.includes(e)))||o)for(const[e,r]of Object.entries(l.directives)){if(n.some((e=>r.keys.includes(e)))||o){const n={el:l.el,name:e,data:r,state:s};u(n,t)}}}for(const t of r)e.splice(t,1)},c={BIND:({el:e,name:t,data:s,state:n})=>{switch(t.split(":")[1]){case"class":const r=s.compute(n);if("string"==typeof r)return e.setAttribute("class",`${e.className} ${r}`.trim());if(r instanceof Array)return e.setAttribute("class",`${e.className} ${r.join(" ")}`.trim());{const t=[];for(const s in r)r[s]&&!e.className.includes(s)&&t.push(s);const s=new RegExp(`\\b${Object.keys(r).join("|")}\\b`,"gim"),n=e.className.replace(s,"");return t.length>0?e.setAttribute("class",`${n} ${t.join(" ")}`.trim()):e.className.trim().length>0?e.setAttribute("class",n.trim()):e.removeAttribute("class")}case"style":const i=s.compute(n);e.removeAttribute("style");for(const t in i)e.style[t]=i[t];break;default:const l=s.compute(n);if("object"==typeof l&&null!==l)for(const t in l)l[t]?e.setAttribute(t,l[t]):e.removeAttribute(t);else l?e.setAttribute(t.split(":")[1],l):e.removeAttribute(t.split(":")[1])}},HTML:({el:e,data:t,state:s})=>{const n=t.value.replace(/(;)/gim,"");n in s&&(e.innerHTML=String(s[n])),e.innerHTML=t.compute(s)??t.value,e.__l={};const r=o(e,s);a(r,c,s,t.keys)},IF:({el:e,name:t,data:s,state:n})=>{const r=t.split(":")[1],i=s.value.replace(/(;)/gim,"");let l=!0;l=i in n?!!n[i]:!!s.compute(n),"hidden"===r?e.hidden=!l:e.style.display=!1===l?"none":null},MODEL:({el:e,name:t,data:s,state:n})=>{const r=e,i=n[s.value];r.value!==String(i)&&(r.value=String(i));const[,l]=t.split("."),o=()=>((e,t,s,n)=>{const r="number"==typeof t&&!isNaN(e.value),i="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);let o;return o=r?parseFloat(e.value):i?"true"===e.value:l?"null"===e.value?null:void 0:String(e.value),n[s.value]=o,o})(r,i,s,n);"debounce"===l?r.onchange=o:r.oninput=o},ON:({el:e,name:t,data:s,state:n})=>{const r={};if(e.__l_on_registered)return;const[i,l]=t.split("."),o=i.split(":")[1],a=l||null,c=e=>{"prevent"===a&&e.preventDefault(),"stop"===a&&e.stopPropagation(),s.compute(n)};r.once="once"===a,r.passive="passive"===a,e.addEventListener(o,c,r),e.__l_on_registered=c},TEXT:({el:e,data:t,state:s})=>{const n=t.value.replace(/(;)/gim,"");e.textContent=n in s?String(s[n]):t.compute(s)??t.value},FOR:({el:e,data:s,state:n})=>{const[r,i]=s.value.split(/in +/g),[l,u]=r.replace(/\(|\)/gim,"").split(","),p=n[i];let m=String(e.__l_for_template);e.innerHTML.trim()===m&&(e.innerHTML="");const f=p.length-e.children.length;if(0===p.length)e.innerHTML="";else if(0!==f)for(let s=Math.abs(f);s>0;s--)if(f<0)e.removeChild(e.lastChild);else{const n=document.createElement("div");let r=m;l&&(r=r.replace(t(`this\\.${l.trim()}`),`${i}[${p.length-s}]`)),u&&(r=r.replace(t(`this\\.${u.trim()}`),String(p.length-s))),n.innerHTML=r,e.appendChild(n.firstChild)}e.__l={};const d=o(e,n);a(d,c,n,s.keys)}},u=(e,t)=>{t[e.name.split(/:|\./gim)[0].toUpperCase()](e)},p=(e,t)=>{const s={get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],s):e[t],set(s,n,r){if("function"==typeof e[n])return!1;const i=!isNaN(Number(n))||"length"===n;let l=[];return l=s instanceof Array&&i?Object.keys(e).filter((t=>{return n=e[t],r=s,n instanceof Array&&r instanceof Array&&n.length===r.length&&n.every(((e,t)=>e===r[t]));var n,r})):Object.keys(e).some((e=>void 0===s[e]))?Object.keys(e).filter((t=>"object"==typeof e[t])):[n],s[n]=r,t(l),!0}};return Proxy.revocable(Object.seal(e),s)};class m{constructor(e={}){this.state=e,this.directives={}}mount(e){const t="string"==typeof e?document.querySelector(e):e;return this.ast=o(t,this.state),this.state=p(this.state,this.render.bind(this)).proxy,this.directives={...this.directives,...c},this.render(),t.__l=this,this.state}directive(e,t){this.directives[e.toUpperCase()]=t}render(e=Object.keys(this.state)){a(this.ast,c,this.state,e)}}const f=e=>new m(e);exports.compile=o,exports.component=f,exports.directives=c,exports.init=(e=document)=>{const t="l-state";[...e.querySelectorAll("[l-state]")].filter((e=>void 0===e.__l)).map((e=>{const s=e.getAttribute(t);try{const t=new Function(`return ${s||{}}`);f(t()).mount(e)}catch(t){console.warn(`Lucia Error: "${t}"\n\nExpression: "${s}"\nElement:`,e)}}))},exports.patch=a,exports.reactive=p; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e;!function(e){e["@"]="on",e[":"]="bind"}(e||(e={}));const t=e=>new RegExp(`\\b${e}\\b`,"gim"),s=e=>e.replace(/\s+/gim," ").trim(),n=(e,t,s)=>{let n=`with($state){${s??1?`return ${e}`:e}}`;return r=>{try{const[i,o]=[Object.keys(r),Object.values(r)],l=e.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim,""),a=s?i.indexOf(l):-1;if(-1!==a)return((e,t,s)=>{const n=t[s],r=/\[(\d+)\]/gim.exec(e);return r&&r[1]&&n instanceof Array&&!isNaN(r[1])?n[Number(r[1])]:e.endsWith("()")?n():n})(e,o,a);{const e=(e,t)=>{const s=new CustomEvent(e,t);document.dispatchEvent(s)};return new Function("$state","$el","$emit",n)(r,t,e)}}catch(s){console.warn(`Lucia Error: "${s}"\n\nExpression: "${e}"\nElement:`,t)}}},r=(e,t)=>e[t],i=(e,t,s)=>e[t]=s,o=e=>[...new Set(e)],l=e=>e.hasAttribute("l-for"),a=(e,s)=>{const[n,r]=c(e,s),i=Object.keys(n).length>0,o=Object.values(n).some((({value:e})=>Object.keys(s).some((s=>t(s).test(e)))));return i?{el:e,deps:r,directives:n,type:o?1:0}:null},c=(s,l={})=>{const a={},c=[];for(const{name:u,value:p}of s.attributes){const d=[],f=Object.keys(l);let m=!0;const h=f.filter((e=>{const s=t(e).test(String(p));if("function"==typeof l[e]&&s){const s=f.filter((s=>t(s).test(String(l[e]))));d.push(...s)}return s}));/on|@/gim.test(u)&&(m=!1),u.includes("for")&&void 0===r(s,"__l_for_template")&&(i(s,"__l_for_template",String(s.innerHTML).trim()),m=!1);const v=o([...h,...d]);c.push(...v);const _={compute:n(p,s,m),deps:v,value:p};u.startsWith("l-")?a[u.slice("l-".length)]=_:Object.keys(e).includes(u[0])&&(a[`${e[u[0]]}:${u.slice(1)}`]=_)}return[a,o(c)]},u=(e,t=!1)=>{const s=[],n=l(e),r=!!(i=e).parentElement&&i.parentElement.hasAttribute("l-for");var i;if(!t&&(n||r))return s;if(t&&n||s.push(e),!n&&!r||t)for(const n of e.childNodes)n.nodeType===Node.ELEMENT_NODE&&(!t&&l(n)?s.push(n):s.push(...u(n,t)));return s},p=(t,s={})=>{if(!t)throw new Error("Please provide a Element");const n=[],i=void 0!==r(t,"__l")&&l(t),o=u(t,i);for(const t of o)if(!t.hasAttribute("l-state")&&new RegExp(`(l-|${Object.keys(e).join("|")})\\w+`,"gim").test(t.outerHTML)){const e=a(t,s);e&&n.push(e)}return n},d=(e,t,s={},n=[])=>{const r=[];for(let i=0;i<e.length;i++){const o=e[i],l=0===o.type;l&&r.push(i);if(n.some((e=>o.deps.includes(e)))||l)for(const[e,r]of Object.entries(o.directives)){if(n.some((e=>r.deps.includes(e)))||l){const n={el:o.el,name:e,data:r,node:o,state:s};m(n,t)}}}for(const t of r)e.splice(t,1)},f={BIND:({el:e,name:t,data:n,state:r})=>{switch(t.split(":")[1]){case"class":const i=n.compute(r);if("string"==typeof i)return e.setAttribute("class",s(`${e.className} ${i}`));if(i instanceof Array)return e.setAttribute("class",s(`${e.className} ${i.join(" ")}`));{const t=[];for(const e in i)i[e]&&t.push(e);const n=new RegExp(`\\b${Object.keys(i).join("|")}\\b`,"gim"),r=e.className.replace(n,"");return t.length>0?e.setAttribute("class",s(`${r} ${t.join(" ")}`)):s(e.className).length>0?e.setAttribute("class",s(r)):e.removeAttribute("class")}case"style":const o=n.compute(r);e.removeAttribute("style");for(const t in o)e.style[t]=o[t];break;default:const l=n.compute(r);if("object"==typeof l&&null!==l)for(const t in l)l[t]?e.setAttribute(t,l[t]):e.removeAttribute(t);else l?e.setAttribute(t.split(":")[1],l):e.removeAttribute(t.split(":")[1])}},HTML:({el:e,data:t,state:s})=>{e.innerHTML=t.compute(s)??t.value;const n=p(e,s);d(n,f,s,t.deps)},IF:({el:e,data:t,state:s,node:n})=>{n=n;const o=!!t.compute(s);if(!r(n.el,"__l_if_template")){const t=document.createElement("template");i(t,"__l_if_template",!0),t.content.appendChild(e.cloneNode(!0)),e.replaceWith(t),n.el=t}const l=r(n.el,"__l_if_has_inserted");if(!o&&l)n.el.nextElementSibling?.remove(),i(n.el,"__l_has_inserted",!1);else if(o&&!l){const e=n.el.content.cloneNode(!0);n.el.parentElement?.insertBefore(e,n.el.nextElementSibling),i(n.el,"__l_has_inserted",!0);const t=n.el.nextElementSibling;t.removeAttribute("l-if");const r=p(t,s);d(r,f,s,Object.keys(s))}},MODEL:({el:e,name:t,data:s,state:n})=>{const o=e,l=n[s.value];if(o.value!==String(l)&&(o.value=String(l)),!r(o,"__l_model_registered")){const[,e]=t.split("."),r=()=>((e,t,s,n)=>{const r="number"==typeof t&&!isNaN(e.value),i="boolean"==typeof t&&("true"===e.value||"false"===e.value),o=null==t&&("null"===e.value||"undefined"===e.value);let l;return l=r?parseFloat(e.value):i?"true"===e.value:o?"null"===e.value?null:void 0:String(e.value),n[s.value]=l,l})(o,l,s,n);o.addEventListener("debounce"===e?"change":"input",r),i(o,"__l_model_registered",!0)}},ON:({el:e,name:t,data:s,state:n})=>{const o={};if(r(e,"__l_on_registered"))return;const[l,a]=t.split("."),c=l.split(":")[1],u=a||null;o.once="once"===u,o.passive="passive"===u,(["away","global"].includes(String(u))?document:e).addEventListener(c,(t=>{if("prevent"===u&&t.preventDefault(),"stop"===u&&t.stopPropagation(),"away"===u){if(e.contains(t.target))return;if(e.offsetWidth<1&&e.offsetHeight<1)return}s.compute(n)}),o),i(e,"__l_on_registered",!0)},TEXT:({el:e,data:t,state:s})=>{e.textContent=t.compute(s)??t.value},FOR:({el:e,data:s,state:n})=>{const[o,l]=s.value.split(/in +/g),[a,c]=o.replace(/\(|\)/gim,"").split(","),u=n[l];let m=r(e,"__l_for_template");e.innerHTML.trim()===m&&(e.innerHTML="");const h=u.length-e.children.length;if(0===u.length)e.innerHTML="";else if(0!==h)for(let s=Math.abs(h);s>0;s--)if(h<0)e.removeChild(e.lastChild);else{const n=m.startsWith("<th")?"thead":m.startsWith("<td")||m.startsWith("<tr")?"tbody":"div",r=document.createElement(n);let i=m;a&&(i=i.replace(t(`this\\.${a.trim()}`),`${l}[${u.length-s}]`)),c&&(i=i.replace(t(`this\\.${c.trim()}`),String(u.length-s))),r.innerHTML=i,e.appendChild(r.firstElementChild)}i(e,"__l",!0);const v=p(e,n);d(v,f,n,s.deps)}},m=(e,t)=>{t[e.name.split(/:|\./gim)[0].toUpperCase()](e)},h=(e,t)=>{const s={get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],s):e[t],set(s,n,r){if("function"==typeof e[n])return!1;const i=!isNaN(Number(n))||"length"===n;let o=[];return o=s instanceof Array&&i?Object.keys(e).filter((t=>{return n=e[t],r=s,n instanceof Array&&r instanceof Array&&n.length===r.length&&n.every(((e,t)=>e===r[t]));var n,r})):Object.keys(e).some((e=>void 0===s[e]))?Object.keys(e).filter((t=>"object"==typeof e[t])):[n],s[n]=r,t(o),!0}};return Proxy.revocable(Object.seal(e),s)};class v{constructor(e={}){this.state=e,this.directives={}}mount(e){const t="string"==typeof e?document.querySelector(e):e;return this.ast=p(t,this.state),this.state=h(this.state,this.render.bind(this)).proxy,this.directives={...this.directives,...f},this.render(),i(t,"__l",this),this.state}directive(e,t){this.directives[e.toUpperCase()]=t}render(e=Object.keys(this.state)){d(this.ast,f,this.state,e)}}const _=e=>new v(e),b=new CustomEvent("lucia:load");exports.compile=p,exports.component=_,exports.directives=f,exports.init=(e=document)=>{const t="l-state";[...e.querySelectorAll("[l-state]")].filter((e=>void 0===r(e,"__l"))).map((e=>{const s=e.getAttribute(t);try{const t=new Function(`return ${s||{}}`);_(t()).mount(e)}catch(t){console.warn(`Lucia Error: "${t}"\n\nExpression: "${s}"\nElement:`,e)}})),document.dispatchEvent(b)},exports.luciaLoadEvent=b,exports.patch=d,exports.reactive=h; |
@@ -9,3 +9,2 @@ const DIRECTIVE_PREFIX = 'l-'; | ||
| const rawDirectiveSplitRE = () => /:|\./gim; | ||
| const semicolonCaptureRE = () => /(;)/gim; | ||
| const arrayIndexCaptureRE = () => /\[(\d+)\]/gim; | ||
@@ -17,6 +16,9 @@ const eventDirectivePrefixRE = () => /on|@/gim; | ||
| }; | ||
| const expressionPropRE = (key) => { | ||
| return new RegExp(`\\b${key}\\b`, 'gim'); | ||
| const expressionPropRE = (prop) => { | ||
| return new RegExp(`\\b${prop}\\b`, 'gim'); | ||
| }; | ||
| const formatAcceptableWhitespace = (expression) => { | ||
| return expression.replace(/\s+/gim, ' ').trim(); | ||
| }; | ||
| const bindDirective = ({ el, name, data, state }) => { | ||
@@ -27,12 +29,12 @@ switch (name.split(':')[1]) { | ||
| if (typeof hydratedClasses === 'string') { | ||
| return el.setAttribute('class', `${el.className} ${hydratedClasses}`.trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(`${el.className} ${hydratedClasses}`)); | ||
| } | ||
| else if (hydratedClasses instanceof Array) { | ||
| return el.setAttribute('class', `${el.className} ${hydratedClasses.join(' ')}`.trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(`${el.className} ${hydratedClasses.join(' ')}`)); | ||
| } | ||
| else { | ||
| const classes = []; | ||
| for (const key in hydratedClasses) { | ||
| if (hydratedClasses[key] && !el.className.includes(key)) | ||
| classes.push(key); | ||
| for (const prop in hydratedClasses) { | ||
| if (hydratedClasses[prop]) | ||
| classes.push(prop); | ||
| } | ||
@@ -42,6 +44,6 @@ const removeDynamicClassesRE = new RegExp(`\\b${Object.keys(hydratedClasses).join('|')}\\b`, 'gim'); | ||
| if (classes.length > 0) { | ||
| return el.setAttribute('class', `${rawClasses} ${classes.join(' ')}`.trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(`${rawClasses} ${classes.join(' ')}`)); | ||
| } | ||
| else if (el.className.trim().length > 0) { | ||
| return el.setAttribute('class', rawClasses.trim()); | ||
| else if (formatAcceptableWhitespace(el.className).length > 0) { | ||
| return el.setAttribute('class', formatAcceptableWhitespace(rawClasses)); | ||
| } | ||
@@ -55,4 +57,4 @@ else { | ||
| el.removeAttribute('style'); | ||
| for (const key in hydratedStyles) { | ||
| el.style[key] = hydratedStyles[key]; | ||
| for (const prop in hydratedStyles) { | ||
| el.style[prop] = hydratedStyles[prop]; | ||
| } | ||
@@ -63,8 +65,8 @@ break; | ||
| if (typeof hydratedAttributes === 'object' && hydratedAttributes !== null) { | ||
| for (const key in hydratedAttributes) { | ||
| if (hydratedAttributes[key]) { | ||
| el.setAttribute(key, hydratedAttributes[key]); | ||
| for (const prop in hydratedAttributes) { | ||
| if (hydratedAttributes[prop]) { | ||
| el.setAttribute(prop, hydratedAttributes[prop]); | ||
| } | ||
| else { | ||
| el.removeAttribute(key); | ||
| el.removeAttribute(prop); | ||
| } | ||
@@ -83,2 +85,18 @@ } | ||
| const interpretProps = (expression, stateValues, positionInState) => { | ||
| const value = stateValues[positionInState]; | ||
| const arrayIndex = arrayIndexCaptureRE().exec(expression); | ||
| if (arrayIndex && | ||
| arrayIndex[1] && | ||
| value instanceof Array && | ||
| !isNaN(arrayIndex[1])) { | ||
| return value[Number(arrayIndex[1])]; | ||
| } | ||
| else if (expression.endsWith('()')) { | ||
| return value(); | ||
| } | ||
| else { | ||
| return value; | ||
| } | ||
| }; | ||
| const computeExpression = (expression, el, returnable) => { | ||
@@ -88,25 +106,18 @@ let formattedExpression = `with($state){${returnable ?? true ? `return ${expression}` : expression}}`; | ||
| try { | ||
| const [propKeys, propValues] = [Object.keys(state), Object.values(state)]; | ||
| const strippedExpression = expression.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim, ''); | ||
| const positionInState = returnable ? Object.keys(state).indexOf(strippedExpression) : -1; | ||
| const positionInState = returnable ? propKeys.indexOf(strippedExpression) : -1; | ||
| if (positionInState !== -1) { | ||
| const value = Object.values(state)[positionInState]; | ||
| const arrayIndex = arrayIndexCaptureRE().exec(expression); | ||
| if (arrayIndex && | ||
| arrayIndex[1] && | ||
| value instanceof Array && | ||
| !isNaN(arrayIndex[1])) { | ||
| return value[Number(arrayIndex[1])]; | ||
| } | ||
| else if (expression.endsWith('()')) { | ||
| return value(); | ||
| } | ||
| else | ||
| return value; | ||
| return interpretProps(expression, propValues, positionInState); | ||
| } | ||
| else { | ||
| return new Function('$state', '$el', formattedExpression)(state, el || null); | ||
| const emit = (name, options) => { | ||
| const event = new CustomEvent(name, options); | ||
| document.dispatchEvent(event); | ||
| }; | ||
| return new Function('$state', '$el', '$emit', formattedExpression)(state, el, emit); | ||
| } | ||
| } | ||
| catch (err) { | ||
| console.warn(`Lucia Error: "${err}"\n\nExpression: "${expression}"\nElement:`, el || null); | ||
| console.warn(`Lucia Error: "${err}"\n\nExpression: "${expression}"\nElement:`, el); | ||
| } | ||
@@ -116,47 +127,18 @@ }; | ||
| const getCustomProp = (el, prop) => el[prop]; | ||
| const setCustomProp = (el, prop, value) => (el[prop] = value); | ||
| const removeDupesFromArray = (array) => [...new Set(array)]; | ||
| const collectAndInitDirectives = (el, state = {}) => { | ||
| const directives = {}; | ||
| const nodeKeys = []; | ||
| if (el.attributes) { | ||
| for (const { name, value } of el.attributes) { | ||
| const keysInFunctions = []; | ||
| const keysInState = Object.keys(state); | ||
| let returnable = true; | ||
| const keys = keysInState.filter((key) => { | ||
| const hasKey = expressionPropRE(key).test(String(value)); | ||
| if (typeof state[key] === 'function' && hasKey) { | ||
| const keysInFunction = keysInState.filter((k) => expressionPropRE(k).test(String(state[key]))); | ||
| keysInFunctions.push(...keysInFunction); | ||
| } | ||
| return hasKey; | ||
| }); | ||
| if (eventDirectivePrefixRE().test(name)) | ||
| returnable = false; | ||
| if (name.includes('for') && el.__l_for_template === undefined) { | ||
| el.__l_for_template = String(el.innerHTML).trim(); | ||
| returnable = false; | ||
| } | ||
| const uniqueCompiledKeys = removeDupesFromArray([...keys, ...keysInFunctions]); | ||
| nodeKeys.push(...uniqueCompiledKeys); | ||
| const directiveData = { | ||
| compute: computeExpression(value, el, returnable), | ||
| keys: uniqueCompiledKeys, | ||
| value, | ||
| }; | ||
| if (name.startsWith(DIRECTIVE_PREFIX)) { | ||
| directives[name.slice(DIRECTIVE_PREFIX.length)] = directiveData; | ||
| } | ||
| else if (Object.keys(DIRECTIVE_SHORTHANDS).includes(name[0])) { | ||
| directives[`${DIRECTIVE_SHORTHANDS[name[0]]}:${name.slice(1)}`] = directiveData; | ||
| } | ||
| } | ||
| } | ||
| return [directives, removeDupesFromArray(nodeKeys)]; | ||
| const isListRenderScope = (el) => { | ||
| return el.hasAttribute(`${DIRECTIVE_PREFIX}for`); | ||
| }; | ||
| const isUnderListRenderScope = (el) => { | ||
| if (!el.parentElement) | ||
| return false; | ||
| return el.parentElement.hasAttribute(`${DIRECTIVE_PREFIX}for`); | ||
| }; | ||
| const createASTNode = (el, state) => { | ||
| const [directives, keys] = collectAndInitDirectives(el, state); | ||
| const [directives, deps] = collectAndInitDirectives(el, state); | ||
| const hasDirectives = Object.keys(directives).length > 0; | ||
| const hasKeyInDirectives = Object.values(directives).some(({ value }) => Object.keys(state).some((key) => expressionPropRE(key).test(value))); | ||
| const hasDepInDirectives = Object.values(directives).some(({ value }) => Object.keys(state).some((prop) => expressionPropRE(prop).test(value))); | ||
| if (!hasDirectives) | ||
@@ -166,15 +148,44 @@ return null; | ||
| el, | ||
| keys: keys, | ||
| deps: deps, | ||
| directives: directives, | ||
| type: hasKeyInDirectives ? 1 : 0, | ||
| type: hasDepInDirectives ? 1 : 0, | ||
| }; | ||
| }; | ||
| const isListRenderScope = (el) => { | ||
| return el.hasAttribute(`${DIRECTIVE_PREFIX}for`); | ||
| const collectAndInitDirectives = (el, state = {}) => { | ||
| const directives = {}; | ||
| const nodeDeps = []; | ||
| for (const { name, value } of el.attributes) { | ||
| const depsInFunctions = []; | ||
| const propsInState = Object.keys(state); | ||
| let returnable = true; | ||
| const deps = propsInState.filter((prop) => { | ||
| const hasDep = expressionPropRE(prop).test(String(value)); | ||
| if (typeof state[prop] === 'function' && hasDep) { | ||
| const depsInFunction = propsInState.filter((p) => expressionPropRE(p).test(String(state[prop]))); | ||
| depsInFunctions.push(...depsInFunction); | ||
| } | ||
| return hasDep; | ||
| }); | ||
| if (eventDirectivePrefixRE().test(name)) | ||
| returnable = false; | ||
| if (name.includes('for') && getCustomProp(el, '__l_for_template') === undefined) { | ||
| setCustomProp(el, '__l_for_template', String(el.innerHTML).trim()); | ||
| returnable = false; | ||
| } | ||
| const uniqueCompiledDeps = removeDupesFromArray([...deps, ...depsInFunctions]); | ||
| nodeDeps.push(...uniqueCompiledDeps); | ||
| const directiveData = { | ||
| compute: computeExpression(value, el, returnable), | ||
| deps: uniqueCompiledDeps, | ||
| value, | ||
| }; | ||
| if (name.startsWith(DIRECTIVE_PREFIX)) { | ||
| directives[name.slice(DIRECTIVE_PREFIX.length)] = directiveData; | ||
| } | ||
| else if (Object.keys(DIRECTIVE_SHORTHANDS).includes(name[0])) { | ||
| directives[`${DIRECTIVE_SHORTHANDS[name[0]]}:${name.slice(1)}`] = directiveData; | ||
| } | ||
| } | ||
| return [directives, removeDupesFromArray(nodeDeps)]; | ||
| }; | ||
| const isUnderListRenderScope = (el) => { | ||
| if (!el.parentElement) | ||
| return false; | ||
| return el.parentElement.hasAttribute(`${DIRECTIVE_PREFIX}for`); | ||
| }; | ||
| const extractNodeChildrenAsCollection = (rootNode, isListGroup = false) => { | ||
@@ -206,9 +217,8 @@ const collection = []; | ||
| const ast = []; | ||
| const isListGroup = el.__l !== undefined && isListRenderScope(el); | ||
| const isListGroup = getCustomProp(el, '__l') !== undefined && isListRenderScope(el); | ||
| const nodes = extractNodeChildrenAsCollection(el, isListGroup); | ||
| for (const node of nodes) { | ||
| if (node.hasAttribute(`${DIRECTIVE_PREFIX}state`)) | ||
| continue; | ||
| if (hasDirectiveRE().test(node.outerHTML)) { | ||
| if (node.hasAttribute(`${DIRECTIVE_PREFIX}state`)) { | ||
| continue; | ||
| } | ||
| const newASTNode = createASTNode(node, state); | ||
@@ -222,3 +232,3 @@ if (newASTNode) | ||
| const patch = (ast, directives, state = {}, changedKeys = []) => { | ||
| const patch = (ast, directives, state = {}, changedProps = []) => { | ||
| const staticNodeCleanupQueue = []; | ||
@@ -230,9 +240,15 @@ for (let i = 0; i < ast.length; i++) { | ||
| staticNodeCleanupQueue.push(i); | ||
| const nodeHasKey = changedKeys.some((key) => node.keys.includes(key)); | ||
| if (!nodeHasKey && !isStatic) | ||
| const nodeHasDep = changedProps.some((prop) => node.deps.includes(prop)); | ||
| if (!nodeHasDep && !isStatic) | ||
| continue; | ||
| for (const [directiveName, directiveData] of Object.entries(node.directives)) { | ||
| const directiveHasKey = changedKeys.some((key) => directiveData.keys.includes(key)); | ||
| if (directiveHasKey || isStatic) { | ||
| const directiveProps = { el: node.el, name: directiveName, data: directiveData, state }; | ||
| const directiveHasDep = changedProps.some((prop) => directiveData.deps.includes(prop)); | ||
| if (directiveHasDep || isStatic) { | ||
| const directiveProps = { | ||
| el: node.el, | ||
| name: directiveName, | ||
| data: directiveData, | ||
| node, | ||
| state, | ||
| }; | ||
| renderDirective(directiveProps, directives); | ||
@@ -248,23 +264,31 @@ } | ||
| const htmlDirective = ({ el, data, state }) => { | ||
| const key = data.value.replace(semicolonCaptureRE(), ''); | ||
| if (key in state) | ||
| el.innerHTML = String(state[key]); | ||
| el.innerHTML = data.compute(state) ?? data.value; | ||
| el.__l = {}; | ||
| const ast = compile(el, state); | ||
| patch(ast, directives, state, data.keys); | ||
| patch(ast, directives, state, data.deps); | ||
| }; | ||
| const ifDirective = ({ el, name, data, state }) => { | ||
| const modifier = name.split(':')[1]; | ||
| const key = data.value.replace(semicolonCaptureRE(), ''); | ||
| let hydratedConditional = true; | ||
| if (key in state) | ||
| hydratedConditional = !!state[key]; | ||
| else | ||
| hydratedConditional = !!data.compute(state); | ||
| if (modifier === 'hidden') | ||
| el.hidden = !hydratedConditional; | ||
| else | ||
| el.style.display = hydratedConditional === false ? 'none' : null; | ||
| const ifDirective = ({ el, data, state, node }) => { | ||
| node = node; | ||
| const hydratedConditional = !!data.compute(state); | ||
| if (!getCustomProp(node.el, '__l_if_template')) { | ||
| const template = document.createElement('template'); | ||
| setCustomProp(template, '__l_if_template', true); | ||
| template.content.appendChild(el.cloneNode(true)); | ||
| el.replaceWith(template); | ||
| node.el = template; | ||
| } | ||
| const hasInserted = getCustomProp(node.el, '__l_if_has_inserted'); | ||
| if (!hydratedConditional && hasInserted) { | ||
| node.el.nextElementSibling?.remove(); | ||
| setCustomProp(node.el, '__l_has_inserted', false); | ||
| } | ||
| else if (hydratedConditional && !hasInserted) { | ||
| const clone = node.el.content.cloneNode(true); | ||
| node.el.parentElement?.insertBefore(clone, node.el.nextElementSibling); | ||
| setCustomProp(node.el, '__l_has_inserted', true); | ||
| const nextEl = node.el.nextElementSibling; | ||
| nextEl.removeAttribute('l-if'); | ||
| const ast = compile(nextEl, state); | ||
| patch(ast, directives, state, Object.keys(state)); | ||
| } | ||
| }; | ||
@@ -302,8 +326,8 @@ | ||
| } | ||
| const [, prop] = name.split('.'); | ||
| const callback = () => inputCallback(el, hydratedValue, data, state); | ||
| if (prop === 'debounce') | ||
| el.onchange = callback; | ||
| else | ||
| el.oninput = callback; | ||
| if (!getCustomProp(el, '__l_model_registered')) { | ||
| const [, prop] = name.split('.'); | ||
| const callback = () => inputCallback(el, hydratedValue, data, state); | ||
| el.addEventListener(prop === 'debounce' ? 'change' : 'input', callback); | ||
| setCustomProp(el, '__l_model_registered', true); | ||
| } | ||
| }; | ||
@@ -313,3 +337,4 @@ | ||
| const options = {}; | ||
| if (el.__l_on_registered) | ||
| const globalScopeEventProps = ['away', 'global']; | ||
| if (getCustomProp(el, '__l_on_registered')) | ||
| return; | ||
@@ -324,2 +349,8 @@ const [directiveAndEventName, prop] = name.split('.'); | ||
| $event.stopPropagation(); | ||
| if (eventProp === 'away') { | ||
| if (el.contains($event.target)) | ||
| return; | ||
| if (el.offsetWidth < 1 && el.offsetHeight < 1) | ||
| return; | ||
| } | ||
| data.compute(state); | ||
@@ -329,12 +360,8 @@ }; | ||
| options.passive = eventProp === 'passive'; | ||
| el.addEventListener(eventName, handler, options); | ||
| el.__l_on_registered = handler; | ||
| (globalScopeEventProps.includes(String(eventProp)) ? document : el).addEventListener(eventName, handler, options); | ||
| setCustomProp(el, '__l_on_registered', true); | ||
| }; | ||
| const textDirective = ({ el, data, state }) => { | ||
| const key = data.value.replace(semicolonCaptureRE(), ''); | ||
| if (key in state) | ||
| el.textContent = String(state[key]); | ||
| else | ||
| el.textContent = data.compute(state) ?? data.value; | ||
| el.textContent = data.compute(state) ?? data.value; | ||
| }; | ||
@@ -346,3 +373,3 @@ | ||
| const currArray = state[target]; | ||
| let template = String(el.__l_for_template); | ||
| let template = getCustomProp(el, '__l_for_template'); | ||
| if (el.innerHTML.trim() === template) | ||
@@ -358,3 +385,8 @@ el.innerHTML = ''; | ||
| else { | ||
| const temp = document.createElement('div'); | ||
| const tag = template.startsWith('<th') | ||
| ? 'thead' | ||
| : template.startsWith('<td') || template.startsWith('<tr') | ||
| ? 'tbody' | ||
| : 'div'; | ||
| const temp = document.createElement(tag); | ||
| let content = template; | ||
@@ -368,9 +400,9 @@ if (item) { | ||
| temp.innerHTML = content; | ||
| el.appendChild(temp.firstChild); | ||
| el.appendChild(temp.firstElementChild); | ||
| } | ||
| } | ||
| } | ||
| el.__l = {}; | ||
| setCustomProp(el, '__l', true); | ||
| const ast = compile(el, state); | ||
| patch(ast, directives, state, data.keys); | ||
| patch(ast, directives, state, data.deps); | ||
| }; | ||
@@ -398,3 +430,2 @@ | ||
| }; | ||
| const reactive = (state, callback) => { | ||
@@ -414,16 +445,16 @@ const handler = { | ||
| const hasArrayMutationKey = !isNaN(Number(key)) || key === 'length'; | ||
| let keys = []; | ||
| let props = []; | ||
| if (target instanceof Array && hasArrayMutationKey) { | ||
| keys = Object.keys(state).filter((k) => arrayEquals(state[k], target)); | ||
| props = Object.keys(state).filter((prop) => arrayEquals(state[prop], target)); | ||
| } | ||
| else { | ||
| if (Object.keys(state).some((key) => target[key] === undefined)) { | ||
| keys = Object.keys(state).filter((key) => typeof state[key] === 'object'); | ||
| if (Object.keys(state).some((prop) => target[prop] === undefined)) { | ||
| props = Object.keys(state).filter((prop) => typeof state[prop] === 'object'); | ||
| } | ||
| else { | ||
| keys = [key]; | ||
| props = [key]; | ||
| } | ||
| } | ||
| target[key] = value; | ||
| callback(keys); | ||
| callback(props); | ||
| return true; | ||
@@ -446,3 +477,3 @@ }, | ||
| this.render(); | ||
| rootEl.__l = this; | ||
| setCustomProp(rootEl, '__l', this); | ||
| return this.state; | ||
@@ -453,4 +484,4 @@ } | ||
| } | ||
| render(keys = Object.keys(this.state)) { | ||
| patch(this.ast, directives, this.state, keys); | ||
| render(props = Object.keys(this.state)) { | ||
| patch(this.ast, directives, this.state, props); | ||
| } | ||
@@ -460,2 +491,3 @@ } | ||
| const luciaLoadEvent = new CustomEvent('lucia:load'); | ||
| const init = (element = document) => { | ||
@@ -465,3 +497,3 @@ const stateDirective = `${DIRECTIVE_PREFIX}state`; | ||
| elements | ||
| .filter((el) => el.__l === undefined) | ||
| .filter((el) => getCustomProp(el, '__l') === undefined) | ||
| .map((el) => { | ||
@@ -477,4 +509,5 @@ const expression = el.getAttribute(stateDirective); | ||
| }); | ||
| document.dispatchEvent(luciaLoadEvent); | ||
| }; | ||
| export { compile, component, directives, init, patch, reactive }; | ||
| export { compile, component, directives, init, luciaLoadEvent, patch, reactive }; |
@@ -1,1 +0,1 @@ | ||
| var e;!function(e){e["@"]="on",e[":"]="bind"}(e||(e={}));const t=e=>new RegExp(`\\b${e}\\b`,"gim"),s=(e,t,s)=>{let n=`with($state){${s??1?`return ${e}`:e}}`;return r=>{try{const i=e.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim,""),l=s?Object.keys(r).indexOf(i):-1;if(-1!==l){const t=Object.values(r)[l],s=/\[(\d+)\]/gim.exec(e);return s&&s[1]&&t instanceof Array&&!isNaN(s[1])?t[Number(s[1])]:e.endsWith("()")?t():t}return new Function("$state","$el",n)(r,t||null)}catch(s){console.warn(`Lucia Error: "${s}"\n\nExpression: "${e}"\nElement:`,t||null)}}},n=e=>[...new Set(e)],r=(r,i)=>{const[l,o]=((r,i={})=>{const l={},o=[];if(r.attributes)for(const{name:a,value:c}of r.attributes){const u=[],p=Object.keys(i);let m=!0;const f=p.filter((e=>{const s=t(e).test(String(c));if("function"==typeof i[e]&&s){const s=p.filter((s=>t(s).test(String(i[e]))));u.push(...s)}return s}));/on|@/gim.test(a)&&(m=!1),a.includes("for")&&void 0===r.__l_for_template&&(r.__l_for_template=String(r.innerHTML).trim(),m=!1);const d=n([...f,...u]);o.push(...d);const h={compute:s(c,r,m),keys:d,value:c};a.startsWith("l-")?l[a.slice("l-".length)]=h:Object.keys(e).includes(a[0])&&(l[`${e[a[0]]}:${a.slice(1)}`]=h)}return[l,n(o)]})(r,i),a=Object.keys(l).length>0,c=Object.values(l).some((({value:e})=>Object.keys(i).some((s=>t(s).test(e)))));return a?{el:r,keys:o,directives:l,type:c?1:0}:null},i=e=>e.hasAttribute("l-for"),l=(e,t=!1)=>{const s=[],n=i(e),r=!!(o=e).parentElement&&o.parentElement.hasAttribute("l-for");var o;if(!t&&(n||r))return s;if(t&&n||s.push(e),!n&&!r||t)for(const n of e.childNodes)n.nodeType===Node.ELEMENT_NODE&&(!t&&i(n)?s.push(n):s.push(...l(n,t)));return s},o=(t,s={})=>{if(!t)throw new Error("Please provide a Element");const n=[],o=void 0!==t.__l&&i(t),a=l(t,o);for(const t of a)if(new RegExp(`(l-|${Object.keys(e).join("|")})\\w+`,"gim").test(t.outerHTML)){if(t.hasAttribute("l-state"))continue;const e=r(t,s);e&&n.push(e)}return n},a=(e,t,s={},n=[])=>{const r=[];for(let i=0;i<e.length;i++){const l=e[i],o=0===l.type;o&&r.push(i);if(n.some((e=>l.keys.includes(e)))||o)for(const[e,r]of Object.entries(l.directives)){if(n.some((e=>r.keys.includes(e)))||o){const n={el:l.el,name:e,data:r,state:s};u(n,t)}}}for(const t of r)e.splice(t,1)},c={BIND:({el:e,name:t,data:s,state:n})=>{switch(t.split(":")[1]){case"class":const r=s.compute(n);if("string"==typeof r)return e.setAttribute("class",`${e.className} ${r}`.trim());if(r instanceof Array)return e.setAttribute("class",`${e.className} ${r.join(" ")}`.trim());{const t=[];for(const s in r)r[s]&&!e.className.includes(s)&&t.push(s);const s=new RegExp(`\\b${Object.keys(r).join("|")}\\b`,"gim"),n=e.className.replace(s,"");return t.length>0?e.setAttribute("class",`${n} ${t.join(" ")}`.trim()):e.className.trim().length>0?e.setAttribute("class",n.trim()):e.removeAttribute("class")}case"style":const i=s.compute(n);e.removeAttribute("style");for(const t in i)e.style[t]=i[t];break;default:const l=s.compute(n);if("object"==typeof l&&null!==l)for(const t in l)l[t]?e.setAttribute(t,l[t]):e.removeAttribute(t);else l?e.setAttribute(t.split(":")[1],l):e.removeAttribute(t.split(":")[1])}},HTML:({el:e,data:t,state:s})=>{const n=t.value.replace(/(;)/gim,"");n in s&&(e.innerHTML=String(s[n])),e.innerHTML=t.compute(s)??t.value,e.__l={};const r=o(e,s);a(r,c,s,t.keys)},IF:({el:e,name:t,data:s,state:n})=>{const r=t.split(":")[1],i=s.value.replace(/(;)/gim,"");let l=!0;l=i in n?!!n[i]:!!s.compute(n),"hidden"===r?e.hidden=!l:e.style.display=!1===l?"none":null},MODEL:({el:e,name:t,data:s,state:n})=>{const r=e,i=n[s.value];r.value!==String(i)&&(r.value=String(i));const[,l]=t.split("."),o=()=>((e,t,s,n)=>{const r="number"==typeof t&&!isNaN(e.value),i="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);let o;return o=r?parseFloat(e.value):i?"true"===e.value:l?"null"===e.value?null:void 0:String(e.value),n[s.value]=o,o})(r,i,s,n);"debounce"===l?r.onchange=o:r.oninput=o},ON:({el:e,name:t,data:s,state:n})=>{const r={};if(e.__l_on_registered)return;const[i,l]=t.split("."),o=i.split(":")[1],a=l||null,c=e=>{"prevent"===a&&e.preventDefault(),"stop"===a&&e.stopPropagation(),s.compute(n)};r.once="once"===a,r.passive="passive"===a,e.addEventListener(o,c,r),e.__l_on_registered=c},TEXT:({el:e,data:t,state:s})=>{const n=t.value.replace(/(;)/gim,"");e.textContent=n in s?String(s[n]):t.compute(s)??t.value},FOR:({el:e,data:s,state:n})=>{const[r,i]=s.value.split(/in +/g),[l,u]=r.replace(/\(|\)/gim,"").split(","),p=n[i];let m=String(e.__l_for_template);e.innerHTML.trim()===m&&(e.innerHTML="");const f=p.length-e.children.length;if(0===p.length)e.innerHTML="";else if(0!==f)for(let s=Math.abs(f);s>0;s--)if(f<0)e.removeChild(e.lastChild);else{const n=document.createElement("div");let r=m;l&&(r=r.replace(t(`this\\.${l.trim()}`),`${i}[${p.length-s}]`)),u&&(r=r.replace(t(`this\\.${u.trim()}`),String(p.length-s))),n.innerHTML=r,e.appendChild(n.firstChild)}e.__l={};const d=o(e,n);a(d,c,n,s.keys)}},u=(e,t)=>{t[e.name.split(/:|\./gim)[0].toUpperCase()](e)},p=(e,t)=>{const s={get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],s):e[t],set(s,n,r){if("function"==typeof e[n])return!1;const i=!isNaN(Number(n))||"length"===n;let l=[];return l=s instanceof Array&&i?Object.keys(e).filter((t=>{return n=e[t],r=s,n instanceof Array&&r instanceof Array&&n.length===r.length&&n.every(((e,t)=>e===r[t]));var n,r})):Object.keys(e).some((e=>void 0===s[e]))?Object.keys(e).filter((t=>"object"==typeof e[t])):[n],s[n]=r,t(l),!0}};return Proxy.revocable(Object.seal(e),s)};class m{constructor(e={}){this.state=e,this.directives={}}mount(e){const t="string"==typeof e?document.querySelector(e):e;return this.ast=o(t,this.state),this.state=p(this.state,this.render.bind(this)).proxy,this.directives={...this.directives,...c},this.render(),t.__l=this,this.state}directive(e,t){this.directives[e.toUpperCase()]=t}render(e=Object.keys(this.state)){a(this.ast,c,this.state,e)}}const f=e=>new m(e),d=(e=document)=>{const t="l-state";[...e.querySelectorAll("[l-state]")].filter((e=>void 0===e.__l)).map((e=>{const s=e.getAttribute(t);try{const t=new Function(`return ${s||{}}`);f(t()).mount(e)}catch(t){console.warn(`Lucia Error: "${t}"\n\nExpression: "${s}"\nElement:`,e)}}))};export{o as compile,f as component,c as directives,d as init,a as patch,p as reactive}; | ||
| var e;!function(e){e["@"]="on",e[":"]="bind"}(e||(e={}));const t=e=>new RegExp(`\\b${e}\\b`,"gim"),n=e=>e.replace(/\s+/gim," ").trim(),s=(e,t,n)=>{let s=`with($state){${n??1?`return ${e}`:e}}`;return r=>{try{const[i,l]=[Object.keys(r),Object.values(r)],o=e.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim,""),a=n?i.indexOf(o):-1;if(-1!==a)return((e,t,n)=>{const s=t[n],r=/\[(\d+)\]/gim.exec(e);return r&&r[1]&&s instanceof Array&&!isNaN(r[1])?s[Number(r[1])]:e.endsWith("()")?s():s})(e,l,a);{const e=(e,t)=>{const n=new CustomEvent(e,t);document.dispatchEvent(n)};return new Function("$state","$el","$emit",s)(r,t,e)}}catch(n){console.warn(`Lucia Error: "${n}"\n\nExpression: "${e}"\nElement:`,t)}}},r=(e,t)=>e[t],i=(e,t,n)=>e[t]=n,l=e=>[...new Set(e)],o=e=>e.hasAttribute("l-for"),a=(e,n)=>{const[s,r]=c(e,n),i=Object.keys(s).length>0,l=Object.values(s).some((({value:e})=>Object.keys(n).some((n=>t(n).test(e)))));return i?{el:e,deps:r,directives:s,type:l?1:0}:null},c=(n,o={})=>{const a={},c=[];for(const{name:u,value:d}of n.attributes){const p=[],f=Object.keys(o);let m=!0;const h=f.filter((e=>{const n=t(e).test(String(d));if("function"==typeof o[e]&&n){const n=f.filter((n=>t(n).test(String(o[e]))));p.push(...n)}return n}));/on|@/gim.test(u)&&(m=!1),u.includes("for")&&void 0===r(n,"__l_for_template")&&(i(n,"__l_for_template",String(n.innerHTML).trim()),m=!1);const _=l([...h,...p]);c.push(..._);const v={compute:s(d,n,m),deps:_,value:d};u.startsWith("l-")?a[u.slice("l-".length)]=v:Object.keys(e).includes(u[0])&&(a[`${e[u[0]]}:${u.slice(1)}`]=v)}return[a,l(c)]},u=(e,t=!1)=>{const n=[],s=o(e),r=!!(i=e).parentElement&&i.parentElement.hasAttribute("l-for");var i;if(!t&&(s||r))return n;if(t&&s||n.push(e),!s&&!r||t)for(const s of e.childNodes)s.nodeType===Node.ELEMENT_NODE&&(!t&&o(s)?n.push(s):n.push(...u(s,t)));return n},d=(t,n={})=>{if(!t)throw new Error("Please provide a Element");const s=[],i=void 0!==r(t,"__l")&&o(t),l=u(t,i);for(const t of l)if(!t.hasAttribute("l-state")&&new RegExp(`(l-|${Object.keys(e).join("|")})\\w+`,"gim").test(t.outerHTML)){const e=a(t,n);e&&s.push(e)}return s},p=(e,t,n={},s=[])=>{const r=[];for(let i=0;i<e.length;i++){const l=e[i],o=0===l.type;o&&r.push(i);if(s.some((e=>l.deps.includes(e)))||o)for(const[e,r]of Object.entries(l.directives)){if(s.some((e=>r.deps.includes(e)))||o){const s={el:l.el,name:e,data:r,node:l,state:n};m(s,t)}}}for(const t of r)e.splice(t,1)},f={BIND:({el:e,name:t,data:s,state:r})=>{switch(t.split(":")[1]){case"class":const i=s.compute(r);if("string"==typeof i)return e.setAttribute("class",n(`${e.className} ${i}`));if(i instanceof Array)return e.setAttribute("class",n(`${e.className} ${i.join(" ")}`));{const t=[];for(const e in i)i[e]&&t.push(e);const s=new RegExp(`\\b${Object.keys(i).join("|")}\\b`,"gim"),r=e.className.replace(s,"");return t.length>0?e.setAttribute("class",n(`${r} ${t.join(" ")}`)):n(e.className).length>0?e.setAttribute("class",n(r)):e.removeAttribute("class")}case"style":const l=s.compute(r);e.removeAttribute("style");for(const t in l)e.style[t]=l[t];break;default:const o=s.compute(r);if("object"==typeof o&&null!==o)for(const t in o)o[t]?e.setAttribute(t,o[t]):e.removeAttribute(t);else o?e.setAttribute(t.split(":")[1],o):e.removeAttribute(t.split(":")[1])}},HTML:({el:e,data:t,state:n})=>{e.innerHTML=t.compute(n)??t.value;const s=d(e,n);p(s,f,n,t.deps)},IF:({el:e,data:t,state:n,node:s})=>{s=s;const l=!!t.compute(n);if(!r(s.el,"__l_if_template")){const t=document.createElement("template");i(t,"__l_if_template",!0),t.content.appendChild(e.cloneNode(!0)),e.replaceWith(t),s.el=t}const o=r(s.el,"__l_if_has_inserted");if(!l&&o)s.el.nextElementSibling?.remove(),i(s.el,"__l_has_inserted",!1);else if(l&&!o){const e=s.el.content.cloneNode(!0);s.el.parentElement?.insertBefore(e,s.el.nextElementSibling),i(s.el,"__l_has_inserted",!0);const t=s.el.nextElementSibling;t.removeAttribute("l-if");const r=d(t,n);p(r,f,n,Object.keys(n))}},MODEL:({el:e,name:t,data:n,state:s})=>{const l=e,o=s[n.value];if(l.value!==String(o)&&(l.value=String(o)),!r(l,"__l_model_registered")){const[,e]=t.split("."),r=()=>((e,t,n,s)=>{const r="number"==typeof t&&!isNaN(e.value),i="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);let o;return o=r?parseFloat(e.value):i?"true"===e.value:l?"null"===e.value?null:void 0:String(e.value),s[n.value]=o,o})(l,o,n,s);l.addEventListener("debounce"===e?"change":"input",r),i(l,"__l_model_registered",!0)}},ON:({el:e,name:t,data:n,state:s})=>{const l={};if(r(e,"__l_on_registered"))return;const[o,a]=t.split("."),c=o.split(":")[1],u=a||null;l.once="once"===u,l.passive="passive"===u,(["away","global"].includes(String(u))?document:e).addEventListener(c,(t=>{if("prevent"===u&&t.preventDefault(),"stop"===u&&t.stopPropagation(),"away"===u){if(e.contains(t.target))return;if(e.offsetWidth<1&&e.offsetHeight<1)return}n.compute(s)}),l),i(e,"__l_on_registered",!0)},TEXT:({el:e,data:t,state:n})=>{e.textContent=t.compute(n)??t.value},FOR:({el:e,data:n,state:s})=>{const[l,o]=n.value.split(/in +/g),[a,c]=l.replace(/\(|\)/gim,"").split(","),u=s[o];let m=r(e,"__l_for_template");e.innerHTML.trim()===m&&(e.innerHTML="");const h=u.length-e.children.length;if(0===u.length)e.innerHTML="";else if(0!==h)for(let n=Math.abs(h);n>0;n--)if(h<0)e.removeChild(e.lastChild);else{const s=m.startsWith("<th")?"thead":m.startsWith("<td")||m.startsWith("<tr")?"tbody":"div",r=document.createElement(s);let i=m;a&&(i=i.replace(t(`this\\.${a.trim()}`),`${o}[${u.length-n}]`)),c&&(i=i.replace(t(`this\\.${c.trim()}`),String(u.length-n))),r.innerHTML=i,e.appendChild(r.firstElementChild)}i(e,"__l",!0);const _=d(e,s);p(_,f,s,n.deps)}},m=(e,t)=>{t[e.name.split(/:|\./gim)[0].toUpperCase()](e)},h=(e,t)=>{const n={get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],n):e[t],set(n,s,r){if("function"==typeof e[s])return!1;const i=!isNaN(Number(s))||"length"===s;let l=[];return l=n instanceof Array&&i?Object.keys(e).filter((t=>{return s=e[t],r=n,s instanceof Array&&r instanceof Array&&s.length===r.length&&s.every(((e,t)=>e===r[t]));var s,r})):Object.keys(e).some((e=>void 0===n[e]))?Object.keys(e).filter((t=>"object"==typeof e[t])):[s],n[s]=r,t(l),!0}};return Proxy.revocable(Object.seal(e),n)};class _{constructor(e={}){this.state=e,this.directives={}}mount(e){const t="string"==typeof e?document.querySelector(e):e;return this.ast=d(t,this.state),this.state=h(this.state,this.render.bind(this)).proxy,this.directives={...this.directives,...f},this.render(),i(t,"__l",this),this.state}directive(e,t){this.directives[e.toUpperCase()]=t}render(e=Object.keys(this.state)){p(this.ast,f,this.state,e)}}const v=e=>new _(e),b=new CustomEvent("lucia:load"),g=(e=document)=>{const t="l-state";[...e.querySelectorAll("[l-state]")].filter((e=>void 0===r(e,"__l"))).map((e=>{const n=e.getAttribute(t);try{const t=new Function(`return ${n||{}}`);v(t()).mount(e)}catch(t){console.warn(`Lucia Error: "${t}"\n\nExpression: "${n}"\nElement:`,e)}})),document.dispatchEvent(b)};export{d as compile,v as component,f as directives,g as init,b as luciaLoadEvent,p as patch,h as reactive}; |
@@ -12,3 +12,2 @@ var Lucia = (function () { | ||
| const rawDirectiveSplitRE = () => /:|\./gim; | ||
| const semicolonCaptureRE = () => /(;)/gim; | ||
| const arrayIndexCaptureRE = () => /\[(\d+)\]/gim; | ||
@@ -20,6 +19,9 @@ const eventDirectivePrefixRE = () => /on|@/gim; | ||
| }; | ||
| const expressionPropRE = (key) => { | ||
| return new RegExp(`\\b${key}\\b`, 'gim'); | ||
| const expressionPropRE = (prop) => { | ||
| return new RegExp(`\\b${prop}\\b`, 'gim'); | ||
| }; | ||
| const formatAcceptableWhitespace = (expression) => { | ||
| return expression.replace(/\s+/gim, ' ').trim(); | ||
| }; | ||
| const bindDirective = ({ el, name, data, state }) => { | ||
@@ -30,12 +32,12 @@ switch (name.split(':')[1]) { | ||
| if (typeof hydratedClasses === 'string') { | ||
| return el.setAttribute('class', `${el.className} ${hydratedClasses}`.trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(`${el.className} ${hydratedClasses}`)); | ||
| } | ||
| else if (hydratedClasses instanceof Array) { | ||
| return el.setAttribute('class', `${el.className} ${hydratedClasses.join(' ')}`.trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(`${el.className} ${hydratedClasses.join(' ')}`)); | ||
| } | ||
| else { | ||
| const classes = []; | ||
| for (const key in hydratedClasses) { | ||
| if (hydratedClasses[key] && !el.className.includes(key)) | ||
| classes.push(key); | ||
| for (const prop in hydratedClasses) { | ||
| if (hydratedClasses[prop]) | ||
| classes.push(prop); | ||
| } | ||
@@ -45,6 +47,6 @@ const removeDynamicClassesRE = new RegExp(`\\b${Object.keys(hydratedClasses).join('|')}\\b`, 'gim'); | ||
| if (classes.length > 0) { | ||
| return el.setAttribute('class', `${rawClasses} ${classes.join(' ')}`.trim()); | ||
| return el.setAttribute('class', formatAcceptableWhitespace(`${rawClasses} ${classes.join(' ')}`)); | ||
| } | ||
| else if (el.className.trim().length > 0) { | ||
| return el.setAttribute('class', rawClasses.trim()); | ||
| else if (formatAcceptableWhitespace(el.className).length > 0) { | ||
| return el.setAttribute('class', formatAcceptableWhitespace(rawClasses)); | ||
| } | ||
@@ -58,4 +60,4 @@ else { | ||
| el.removeAttribute('style'); | ||
| for (const key in hydratedStyles) { | ||
| el.style[key] = hydratedStyles[key]; | ||
| for (const prop in hydratedStyles) { | ||
| el.style[prop] = hydratedStyles[prop]; | ||
| } | ||
@@ -66,8 +68,8 @@ break; | ||
| if (typeof hydratedAttributes === 'object' && hydratedAttributes !== null) { | ||
| for (const key in hydratedAttributes) { | ||
| if (hydratedAttributes[key]) { | ||
| el.setAttribute(key, hydratedAttributes[key]); | ||
| for (const prop in hydratedAttributes) { | ||
| if (hydratedAttributes[prop]) { | ||
| el.setAttribute(prop, hydratedAttributes[prop]); | ||
| } | ||
| else { | ||
| el.removeAttribute(key); | ||
| el.removeAttribute(prop); | ||
| } | ||
@@ -86,2 +88,18 @@ } | ||
| const interpretProps = (expression, stateValues, positionInState) => { | ||
| const value = stateValues[positionInState]; | ||
| const arrayIndex = arrayIndexCaptureRE().exec(expression); | ||
| if (arrayIndex && | ||
| arrayIndex[1] && | ||
| value instanceof Array && | ||
| !isNaN(arrayIndex[1])) { | ||
| return value[Number(arrayIndex[1])]; | ||
| } | ||
| else if (expression.endsWith('()')) { | ||
| return value(); | ||
| } | ||
| else { | ||
| return value; | ||
| } | ||
| }; | ||
| const computeExpression = (expression, el, returnable) => { | ||
@@ -91,25 +109,18 @@ let formattedExpression = `with($state){${returnable ?? true ? `return ${expression}` : expression}}`; | ||
| try { | ||
| const [propKeys, propValues] = [Object.keys(state), Object.values(state)]; | ||
| const strippedExpression = expression.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim, ''); | ||
| const positionInState = returnable ? Object.keys(state).indexOf(strippedExpression) : -1; | ||
| const positionInState = returnable ? propKeys.indexOf(strippedExpression) : -1; | ||
| if (positionInState !== -1) { | ||
| const value = Object.values(state)[positionInState]; | ||
| const arrayIndex = arrayIndexCaptureRE().exec(expression); | ||
| if (arrayIndex && | ||
| arrayIndex[1] && | ||
| value instanceof Array && | ||
| !isNaN(arrayIndex[1])) { | ||
| return value[Number(arrayIndex[1])]; | ||
| } | ||
| else if (expression.endsWith('()')) { | ||
| return value(); | ||
| } | ||
| else | ||
| return value; | ||
| return interpretProps(expression, propValues, positionInState); | ||
| } | ||
| else { | ||
| return new Function('$state', '$el', formattedExpression)(state, el || null); | ||
| const emit = (name, options) => { | ||
| const event = new CustomEvent(name, options); | ||
| document.dispatchEvent(event); | ||
| }; | ||
| return new Function('$state', '$el', '$emit', formattedExpression)(state, el, emit); | ||
| } | ||
| } | ||
| catch (err) { | ||
| console.warn(`Lucia Error: "${err}"\n\nExpression: "${expression}"\nElement:`, el || null); | ||
| console.warn(`Lucia Error: "${err}"\n\nExpression: "${expression}"\nElement:`, el); | ||
| } | ||
@@ -119,47 +130,18 @@ }; | ||
| const getCustomProp = (el, prop) => el[prop]; | ||
| const setCustomProp = (el, prop, value) => (el[prop] = value); | ||
| const removeDupesFromArray = (array) => [...new Set(array)]; | ||
| const collectAndInitDirectives = (el, state = {}) => { | ||
| const directives = {}; | ||
| const nodeKeys = []; | ||
| if (el.attributes) { | ||
| for (const { name, value } of el.attributes) { | ||
| const keysInFunctions = []; | ||
| const keysInState = Object.keys(state); | ||
| let returnable = true; | ||
| const keys = keysInState.filter((key) => { | ||
| const hasKey = expressionPropRE(key).test(String(value)); | ||
| if (typeof state[key] === 'function' && hasKey) { | ||
| const keysInFunction = keysInState.filter((k) => expressionPropRE(k).test(String(state[key]))); | ||
| keysInFunctions.push(...keysInFunction); | ||
| } | ||
| return hasKey; | ||
| }); | ||
| if (eventDirectivePrefixRE().test(name)) | ||
| returnable = false; | ||
| if (name.includes('for') && el.__l_for_template === undefined) { | ||
| el.__l_for_template = String(el.innerHTML).trim(); | ||
| returnable = false; | ||
| } | ||
| const uniqueCompiledKeys = removeDupesFromArray([...keys, ...keysInFunctions]); | ||
| nodeKeys.push(...uniqueCompiledKeys); | ||
| const directiveData = { | ||
| compute: computeExpression(value, el, returnable), | ||
| keys: uniqueCompiledKeys, | ||
| value, | ||
| }; | ||
| if (name.startsWith(DIRECTIVE_PREFIX)) { | ||
| directives[name.slice(DIRECTIVE_PREFIX.length)] = directiveData; | ||
| } | ||
| else if (Object.keys(DIRECTIVE_SHORTHANDS).includes(name[0])) { | ||
| directives[`${DIRECTIVE_SHORTHANDS[name[0]]}:${name.slice(1)}`] = directiveData; | ||
| } | ||
| } | ||
| } | ||
| return [directives, removeDupesFromArray(nodeKeys)]; | ||
| const isListRenderScope = (el) => { | ||
| return el.hasAttribute(`${DIRECTIVE_PREFIX}for`); | ||
| }; | ||
| const isUnderListRenderScope = (el) => { | ||
| if (!el.parentElement) | ||
| return false; | ||
| return el.parentElement.hasAttribute(`${DIRECTIVE_PREFIX}for`); | ||
| }; | ||
| const createASTNode = (el, state) => { | ||
| const [directives, keys] = collectAndInitDirectives(el, state); | ||
| const [directives, deps] = collectAndInitDirectives(el, state); | ||
| const hasDirectives = Object.keys(directives).length > 0; | ||
| const hasKeyInDirectives = Object.values(directives).some(({ value }) => Object.keys(state).some((key) => expressionPropRE(key).test(value))); | ||
| const hasDepInDirectives = Object.values(directives).some(({ value }) => Object.keys(state).some((prop) => expressionPropRE(prop).test(value))); | ||
| if (!hasDirectives) | ||
@@ -169,15 +151,44 @@ return null; | ||
| el, | ||
| keys: keys, | ||
| deps: deps, | ||
| directives: directives, | ||
| type: hasKeyInDirectives ? 1 : 0, | ||
| type: hasDepInDirectives ? 1 : 0, | ||
| }; | ||
| }; | ||
| const isListRenderScope = (el) => { | ||
| return el.hasAttribute(`${DIRECTIVE_PREFIX}for`); | ||
| const collectAndInitDirectives = (el, state = {}) => { | ||
| const directives = {}; | ||
| const nodeDeps = []; | ||
| for (const { name, value } of el.attributes) { | ||
| const depsInFunctions = []; | ||
| const propsInState = Object.keys(state); | ||
| let returnable = true; | ||
| const deps = propsInState.filter((prop) => { | ||
| const hasDep = expressionPropRE(prop).test(String(value)); | ||
| if (typeof state[prop] === 'function' && hasDep) { | ||
| const depsInFunction = propsInState.filter((p) => expressionPropRE(p).test(String(state[prop]))); | ||
| depsInFunctions.push(...depsInFunction); | ||
| } | ||
| return hasDep; | ||
| }); | ||
| if (eventDirectivePrefixRE().test(name)) | ||
| returnable = false; | ||
| if (name.includes('for') && getCustomProp(el, '__l_for_template') === undefined) { | ||
| setCustomProp(el, '__l_for_template', String(el.innerHTML).trim()); | ||
| returnable = false; | ||
| } | ||
| const uniqueCompiledDeps = removeDupesFromArray([...deps, ...depsInFunctions]); | ||
| nodeDeps.push(...uniqueCompiledDeps); | ||
| const directiveData = { | ||
| compute: computeExpression(value, el, returnable), | ||
| deps: uniqueCompiledDeps, | ||
| value, | ||
| }; | ||
| if (name.startsWith(DIRECTIVE_PREFIX)) { | ||
| directives[name.slice(DIRECTIVE_PREFIX.length)] = directiveData; | ||
| } | ||
| else if (Object.keys(DIRECTIVE_SHORTHANDS).includes(name[0])) { | ||
| directives[`${DIRECTIVE_SHORTHANDS[name[0]]}:${name.slice(1)}`] = directiveData; | ||
| } | ||
| } | ||
| return [directives, removeDupesFromArray(nodeDeps)]; | ||
| }; | ||
| const isUnderListRenderScope = (el) => { | ||
| if (!el.parentElement) | ||
| return false; | ||
| return el.parentElement.hasAttribute(`${DIRECTIVE_PREFIX}for`); | ||
| }; | ||
| const extractNodeChildrenAsCollection = (rootNode, isListGroup = false) => { | ||
@@ -209,9 +220,8 @@ const collection = []; | ||
| const ast = []; | ||
| const isListGroup = el.__l !== undefined && isListRenderScope(el); | ||
| const isListGroup = getCustomProp(el, '__l') !== undefined && isListRenderScope(el); | ||
| const nodes = extractNodeChildrenAsCollection(el, isListGroup); | ||
| for (const node of nodes) { | ||
| if (node.hasAttribute(`${DIRECTIVE_PREFIX}state`)) | ||
| continue; | ||
| if (hasDirectiveRE().test(node.outerHTML)) { | ||
| if (node.hasAttribute(`${DIRECTIVE_PREFIX}state`)) { | ||
| continue; | ||
| } | ||
| const newASTNode = createASTNode(node, state); | ||
@@ -225,3 +235,3 @@ if (newASTNode) | ||
| const patch = (ast, directives, state = {}, changedKeys = []) => { | ||
| const patch = (ast, directives, state = {}, changedProps = []) => { | ||
| const staticNodeCleanupQueue = []; | ||
@@ -233,9 +243,15 @@ for (let i = 0; i < ast.length; i++) { | ||
| staticNodeCleanupQueue.push(i); | ||
| const nodeHasKey = changedKeys.some((key) => node.keys.includes(key)); | ||
| if (!nodeHasKey && !isStatic) | ||
| const nodeHasDep = changedProps.some((prop) => node.deps.includes(prop)); | ||
| if (!nodeHasDep && !isStatic) | ||
| continue; | ||
| for (const [directiveName, directiveData] of Object.entries(node.directives)) { | ||
| const directiveHasKey = changedKeys.some((key) => directiveData.keys.includes(key)); | ||
| if (directiveHasKey || isStatic) { | ||
| const directiveProps = { el: node.el, name: directiveName, data: directiveData, state }; | ||
| const directiveHasDep = changedProps.some((prop) => directiveData.deps.includes(prop)); | ||
| if (directiveHasDep || isStatic) { | ||
| const directiveProps = { | ||
| el: node.el, | ||
| name: directiveName, | ||
| data: directiveData, | ||
| node, | ||
| state, | ||
| }; | ||
| renderDirective(directiveProps, directives); | ||
@@ -251,23 +267,31 @@ } | ||
| const htmlDirective = ({ el, data, state }) => { | ||
| const key = data.value.replace(semicolonCaptureRE(), ''); | ||
| if (key in state) | ||
| el.innerHTML = String(state[key]); | ||
| el.innerHTML = data.compute(state) ?? data.value; | ||
| el.__l = {}; | ||
| const ast = compile(el, state); | ||
| patch(ast, directives, state, data.keys); | ||
| patch(ast, directives, state, data.deps); | ||
| }; | ||
| const ifDirective = ({ el, name, data, state }) => { | ||
| const modifier = name.split(':')[1]; | ||
| const key = data.value.replace(semicolonCaptureRE(), ''); | ||
| let hydratedConditional = true; | ||
| if (key in state) | ||
| hydratedConditional = !!state[key]; | ||
| else | ||
| hydratedConditional = !!data.compute(state); | ||
| if (modifier === 'hidden') | ||
| el.hidden = !hydratedConditional; | ||
| else | ||
| el.style.display = hydratedConditional === false ? 'none' : null; | ||
| const ifDirective = ({ el, data, state, node }) => { | ||
| node = node; | ||
| const hydratedConditional = !!data.compute(state); | ||
| if (!getCustomProp(node.el, '__l_if_template')) { | ||
| const template = document.createElement('template'); | ||
| setCustomProp(template, '__l_if_template', true); | ||
| template.content.appendChild(el.cloneNode(true)); | ||
| el.replaceWith(template); | ||
| node.el = template; | ||
| } | ||
| const hasInserted = getCustomProp(node.el, '__l_if_has_inserted'); | ||
| if (!hydratedConditional && hasInserted) { | ||
| node.el.nextElementSibling?.remove(); | ||
| setCustomProp(node.el, '__l_has_inserted', false); | ||
| } | ||
| else if (hydratedConditional && !hasInserted) { | ||
| const clone = node.el.content.cloneNode(true); | ||
| node.el.parentElement?.insertBefore(clone, node.el.nextElementSibling); | ||
| setCustomProp(node.el, '__l_has_inserted', true); | ||
| const nextEl = node.el.nextElementSibling; | ||
| nextEl.removeAttribute('l-if'); | ||
| const ast = compile(nextEl, state); | ||
| patch(ast, directives, state, Object.keys(state)); | ||
| } | ||
| }; | ||
@@ -305,8 +329,8 @@ | ||
| } | ||
| const [, prop] = name.split('.'); | ||
| const callback = () => inputCallback(el, hydratedValue, data, state); | ||
| if (prop === 'debounce') | ||
| el.onchange = callback; | ||
| else | ||
| el.oninput = callback; | ||
| if (!getCustomProp(el, '__l_model_registered')) { | ||
| const [, prop] = name.split('.'); | ||
| const callback = () => inputCallback(el, hydratedValue, data, state); | ||
| el.addEventListener(prop === 'debounce' ? 'change' : 'input', callback); | ||
| setCustomProp(el, '__l_model_registered', true); | ||
| } | ||
| }; | ||
@@ -316,3 +340,4 @@ | ||
| const options = {}; | ||
| if (el.__l_on_registered) | ||
| const globalScopeEventProps = ['away', 'global']; | ||
| if (getCustomProp(el, '__l_on_registered')) | ||
| return; | ||
@@ -327,2 +352,8 @@ const [directiveAndEventName, prop] = name.split('.'); | ||
| $event.stopPropagation(); | ||
| if (eventProp === 'away') { | ||
| if (el.contains($event.target)) | ||
| return; | ||
| if (el.offsetWidth < 1 && el.offsetHeight < 1) | ||
| return; | ||
| } | ||
| data.compute(state); | ||
@@ -332,12 +363,8 @@ }; | ||
| options.passive = eventProp === 'passive'; | ||
| el.addEventListener(eventName, handler, options); | ||
| el.__l_on_registered = handler; | ||
| (globalScopeEventProps.includes(String(eventProp)) ? document : el).addEventListener(eventName, handler, options); | ||
| setCustomProp(el, '__l_on_registered', true); | ||
| }; | ||
| const textDirective = ({ el, data, state }) => { | ||
| const key = data.value.replace(semicolonCaptureRE(), ''); | ||
| if (key in state) | ||
| el.textContent = String(state[key]); | ||
| else | ||
| el.textContent = data.compute(state) ?? data.value; | ||
| el.textContent = data.compute(state) ?? data.value; | ||
| }; | ||
@@ -349,3 +376,3 @@ | ||
| const currArray = state[target]; | ||
| let template = String(el.__l_for_template); | ||
| let template = getCustomProp(el, '__l_for_template'); | ||
| if (el.innerHTML.trim() === template) | ||
@@ -361,3 +388,8 @@ el.innerHTML = ''; | ||
| else { | ||
| const temp = document.createElement('div'); | ||
| const tag = template.startsWith('<th') | ||
| ? 'thead' | ||
| : template.startsWith('<td') || template.startsWith('<tr') | ||
| ? 'tbody' | ||
| : 'div'; | ||
| const temp = document.createElement(tag); | ||
| let content = template; | ||
@@ -371,9 +403,9 @@ if (item) { | ||
| temp.innerHTML = content; | ||
| el.appendChild(temp.firstChild); | ||
| el.appendChild(temp.firstElementChild); | ||
| } | ||
| } | ||
| } | ||
| el.__l = {}; | ||
| setCustomProp(el, '__l', true); | ||
| const ast = compile(el, state); | ||
| patch(ast, directives, state, data.keys); | ||
| patch(ast, directives, state, data.deps); | ||
| }; | ||
@@ -401,3 +433,2 @@ | ||
| }; | ||
| const reactive = (state, callback) => { | ||
@@ -417,16 +448,16 @@ const handler = { | ||
| const hasArrayMutationKey = !isNaN(Number(key)) || key === 'length'; | ||
| let keys = []; | ||
| let props = []; | ||
| if (target instanceof Array && hasArrayMutationKey) { | ||
| keys = Object.keys(state).filter((k) => arrayEquals(state[k], target)); | ||
| props = Object.keys(state).filter((prop) => arrayEquals(state[prop], target)); | ||
| } | ||
| else { | ||
| if (Object.keys(state).some((key) => target[key] === undefined)) { | ||
| keys = Object.keys(state).filter((key) => typeof state[key] === 'object'); | ||
| if (Object.keys(state).some((prop) => target[prop] === undefined)) { | ||
| props = Object.keys(state).filter((prop) => typeof state[prop] === 'object'); | ||
| } | ||
| else { | ||
| keys = [key]; | ||
| props = [key]; | ||
| } | ||
| } | ||
| target[key] = value; | ||
| callback(keys); | ||
| callback(props); | ||
| return true; | ||
@@ -449,3 +480,3 @@ }, | ||
| this.render(); | ||
| rootEl.__l = this; | ||
| setCustomProp(rootEl, '__l', this); | ||
| return this.state; | ||
@@ -456,4 +487,4 @@ } | ||
| } | ||
| render(keys = Object.keys(this.state)) { | ||
| patch(this.ast, directives, this.state, keys); | ||
| render(props = Object.keys(this.state)) { | ||
| patch(this.ast, directives, this.state, props); | ||
| } | ||
@@ -463,2 +494,3 @@ } | ||
| const luciaLoadEvent = new CustomEvent('lucia:load'); | ||
| const init = (element = document) => { | ||
@@ -468,3 +500,3 @@ const stateDirective = `${DIRECTIVE_PREFIX}state`; | ||
| elements | ||
| .filter((el) => el.__l === undefined) | ||
| .filter((el) => getCustomProp(el, '__l') === undefined) | ||
| .map((el) => { | ||
@@ -480,2 +512,3 @@ const expression = el.getAttribute(stateDirective); | ||
| }); | ||
| document.dispatchEvent(luciaLoadEvent); | ||
| }; | ||
@@ -490,2 +523,3 @@ | ||
| directives: directives, | ||
| luciaLoadEvent: luciaLoadEvent, | ||
| init: init | ||
@@ -492,0 +526,0 @@ }); |
@@ -1,1 +0,1 @@ | ||
| var Lucia=function(){"use strict";const e="l-";var t;!function(e){e["@"]="on",e[":"]="bind"}(t||(t={}));const n=e=>new RegExp(`\\b${e}\\b`,"gim"),s=(e,t,n)=>{let s=`with($state){${n??1?`return ${e}`:e}}`;return r=>{try{const i=e.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim,""),o=n?Object.keys(r).indexOf(i):-1;if(-1!==o){const t=Object.values(r)[o],n=/\[(\d+)\]/gim.exec(e);return n&&n[1]&&t instanceof Array&&!isNaN(n[1])?t[Number(n[1])]:e.endsWith("()")?t():t}return new Function("$state","$el",s)(r,t||null)}catch(n){console.warn(`Lucia Error: "${n}"\n\nExpression: "${e}"\nElement:`,t||null)}}},r=e=>[...new Set(e)],i=(i,o)=>{const[l,a]=((i,o={})=>{const l={},a=[];if(i.attributes)for(const{name:c,value:u}of i.attributes){const d=[],p=Object.keys(o);let m=!0;const f=p.filter((e=>{const t=n(e).test(String(u));if("function"==typeof o[e]&&t){const t=p.filter((t=>n(t).test(String(o[e]))));d.push(...t)}return t}));/on|@/gim.test(c)&&(m=!1),c.includes("for")&&void 0===i.__l_for_template&&(i.__l_for_template=String(i.innerHTML).trim(),m=!1);const h=r([...f,...d]);a.push(...h);const v={compute:s(u,i,m),keys:h,value:u};c.startsWith(e)?l[c.slice(e.length)]=v:Object.keys(t).includes(c[0])&&(l[`${t[c[0]]}:${c.slice(1)}`]=v)}return[l,r(a)]})(i,o),c=Object.keys(l).length>0,u=Object.values(l).some((({value:e})=>Object.keys(o).some((t=>n(t).test(e)))));return c?{el:i,keys:a,directives:l,type:u?1:0}:null},o=e=>e.hasAttribute("l-for"),l=(e,t=!1)=>{const n=[],s=o(e),r=!!(i=e).parentElement&&i.parentElement.hasAttribute("l-for");var i;if(!t&&(s||r))return n;if(t&&s||n.push(e),!s&&!r||t)for(const s of e.childNodes)s.nodeType===Node.ELEMENT_NODE&&(!t&&o(s)?n.push(s):n.push(...l(s,t)));return n},a=(e,n={})=>{if(!e)throw new Error("Please provide a Element");const s=[],r=void 0!==e.__l&&o(e),a=l(e,r);for(const e of a)if(new RegExp(`(l-|${Object.keys(t).join("|")})\\w+`,"gim").test(e.outerHTML)){if(e.hasAttribute("l-state"))continue;const t=i(e,n);t&&s.push(t)}return s},c=(e,t,n={},s=[])=>{const r=[];for(let i=0;i<e.length;i++){const o=e[i],l=0===o.type;l&&r.push(i);if(s.some((e=>o.keys.includes(e)))||l)for(const[e,r]of Object.entries(o.directives)){if(s.some((e=>r.keys.includes(e)))||l){const s={el:o.el,name:e,data:r,state:n};d(s,t)}}}for(const t of r)e.splice(t,1)},u={BIND:({el:e,name:t,data:n,state:s})=>{switch(t.split(":")[1]){case"class":const r=n.compute(s);if("string"==typeof r)return e.setAttribute("class",`${e.className} ${r}`.trim());if(r instanceof Array)return e.setAttribute("class",`${e.className} ${r.join(" ")}`.trim());{const t=[];for(const n in r)r[n]&&!e.className.includes(n)&&t.push(n);const n=new RegExp(`\\b${Object.keys(r).join("|")}\\b`,"gim"),s=e.className.replace(n,"");return t.length>0?e.setAttribute("class",`${s} ${t.join(" ")}`.trim()):e.className.trim().length>0?e.setAttribute("class",s.trim()):e.removeAttribute("class")}case"style":const i=n.compute(s);e.removeAttribute("style");for(const t in i)e.style[t]=i[t];break;default:const o=n.compute(s);if("object"==typeof o&&null!==o)for(const t in o)o[t]?e.setAttribute(t,o[t]):e.removeAttribute(t);else o?e.setAttribute(t.split(":")[1],o):e.removeAttribute(t.split(":")[1])}},HTML:({el:e,data:t,state:n})=>{const s=t.value.replace(/(;)/gim,"");s in n&&(e.innerHTML=String(n[s])),e.innerHTML=t.compute(n)??t.value,e.__l={};const r=a(e,n);c(r,u,n,t.keys)},IF:({el:e,name:t,data:n,state:s})=>{const r=t.split(":")[1],i=n.value.replace(/(;)/gim,"");let o=!0;o=i in s?!!s[i]:!!n.compute(s),"hidden"===r?e.hidden=!o:e.style.display=!1===o?"none":null},MODEL:({el:e,name:t,data:n,state:s})=>{const r=e,i=s[n.value];r.value!==String(i)&&(r.value=String(i));const[,o]=t.split("."),l=()=>((e,t,n,s)=>{const r="number"==typeof t&&!isNaN(e.value),i="boolean"==typeof t&&("true"===e.value||"false"===e.value),o=null==t&&("null"===e.value||"undefined"===e.value);let l;return l=r?parseFloat(e.value):i?"true"===e.value:o?"null"===e.value?null:void 0:String(e.value),s[n.value]=l,l})(r,i,n,s);"debounce"===o?r.onchange=l:r.oninput=l},ON:({el:e,name:t,data:n,state:s})=>{const r={};if(e.__l_on_registered)return;const[i,o]=t.split("."),l=i.split(":")[1],a=o||null,c=e=>{"prevent"===a&&e.preventDefault(),"stop"===a&&e.stopPropagation(),n.compute(s)};r.once="once"===a,r.passive="passive"===a,e.addEventListener(l,c,r),e.__l_on_registered=c},TEXT:({el:e,data:t,state:n})=>{const s=t.value.replace(/(;)/gim,"");e.textContent=s in n?String(n[s]):t.compute(n)??t.value},FOR:({el:e,data:t,state:s})=>{const[r,i]=t.value.split(/in +/g),[o,l]=r.replace(/\(|\)/gim,"").split(","),d=s[i];let p=String(e.__l_for_template);e.innerHTML.trim()===p&&(e.innerHTML="");const m=d.length-e.children.length;if(0===d.length)e.innerHTML="";else if(0!==m)for(let t=Math.abs(m);t>0;t--)if(m<0)e.removeChild(e.lastChild);else{const s=document.createElement("div");let r=p;o&&(r=r.replace(n(`this\\.${o.trim()}`),`${i}[${d.length-t}]`)),l&&(r=r.replace(n(`this\\.${l.trim()}`),String(d.length-t))),s.innerHTML=r,e.appendChild(s.firstChild)}e.__l={};const f=a(e,s);c(f,u,s,t.keys)}},d=(e,t)=>{t[e.name.split(/:|\./gim)[0].toUpperCase()](e)},p=(e,t)=>{const n={get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],n):e[t],set(n,s,r){if("function"==typeof e[s])return!1;const i=!isNaN(Number(s))||"length"===s;let o=[];return o=n instanceof Array&&i?Object.keys(e).filter((t=>{return s=e[t],r=n,s instanceof Array&&r instanceof Array&&s.length===r.length&&s.every(((e,t)=>e===r[t]));var s,r})):Object.keys(e).some((e=>void 0===n[e]))?Object.keys(e).filter((t=>"object"==typeof e[t])):[s],n[s]=r,t(o),!0}};return Proxy.revocable(Object.seal(e),n)};class m{constructor(e={}){this.state=e,this.directives={}}mount(e){const t="string"==typeof e?document.querySelector(e):e;return this.ast=a(t,this.state),this.state=p(this.state,this.render.bind(this)).proxy,this.directives={...this.directives,...u},this.render(),t.__l=this,this.state}directive(e,t){this.directives[e.toUpperCase()]=t}render(e=Object.keys(this.state)){c(this.ast,u,this.state,e)}}const f=e=>new m(e),h=(e=document)=>{const t="l-state";[...e.querySelectorAll("[l-state]")].filter((e=>void 0===e.__l)).map((e=>{const n=e.getAttribute(t);try{const t=new Function(`return ${n||{}}`);f(t()).mount(e)}catch(t){console.warn(`Lucia Error: "${t}"\n\nExpression: "${n}"\nElement:`,e)}}))};var v=Object.freeze({__proto__:null,component:f,compile:a,patch:c,reactive:p,directives:u,init:h});const b=()=>h(),y=async()=>{await new Promise((e=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()})),b(),document.addEventListener("turbolinks:load",b),document.addEventListener("turbo:load",b)};return window.__l?window.__l((()=>y())):y(),v}(); | ||
| var Lucia=function(){"use strict";const e="l-";var t;!function(e){e["@"]="on",e[":"]="bind"}(t||(t={}));const n=e=>new RegExp(`\\b${e}\\b`,"gim"),s=e=>e.replace(/\s+/gim," ").trim(),r=(e,t,n)=>{let s=`with($state){${n??1?`return ${e}`:e}}`;return r=>{try{const[i,o]=[Object.keys(r),Object.values(r)],l=e.replace(/(\[\d+\])|(\$state\.)|(\(\))|;*/gim,""),a=n?i.indexOf(l):-1;if(-1!==a)return((e,t,n)=>{const s=t[n],r=/\[(\d+)\]/gim.exec(e);return r&&r[1]&&s instanceof Array&&!isNaN(r[1])?s[Number(r[1])]:e.endsWith("()")?s():s})(e,o,a);{const e=(e,t)=>{const n=new CustomEvent(e,t);document.dispatchEvent(n)};return new Function("$state","$el","$emit",s)(r,t,e)}}catch(n){console.warn(`Lucia Error: "${n}"\n\nExpression: "${e}"\nElement:`,t)}}},i=(e,t)=>e[t],o=(e,t,n)=>e[t]=n,l=e=>[...new Set(e)],a=e=>e.hasAttribute("l-for"),c=(e,t)=>{const[s,r]=u(e,t),i=Object.keys(s).length>0,o=Object.values(s).some((({value:e})=>Object.keys(t).some((t=>n(t).test(e)))));return i?{el:e,deps:r,directives:s,type:o?1:0}:null},u=(s,a={})=>{const c={},u=[];for(const{name:d,value:p}of s.attributes){const m=[],f=Object.keys(a);let h=!0;const _=f.filter((e=>{const t=n(e).test(String(p));if("function"==typeof a[e]&&t){const t=f.filter((t=>n(t).test(String(a[e]))));m.push(...t)}return t}));/on|@/gim.test(d)&&(h=!1),d.includes("for")&&void 0===i(s,"__l_for_template")&&(o(s,"__l_for_template",String(s.innerHTML).trim()),h=!1);const v=l([..._,...m]);u.push(...v);const b={compute:r(p,s,h),deps:v,value:p};d.startsWith(e)?c[d.slice(e.length)]=b:Object.keys(t).includes(d[0])&&(c[`${t[d[0]]}:${d.slice(1)}`]=b)}return[c,l(u)]},d=(e,t=!1)=>{const n=[],s=a(e),r=!!(i=e).parentElement&&i.parentElement.hasAttribute("l-for");var i;if(!t&&(s||r))return n;if(t&&s||n.push(e),!s&&!r||t)for(const s of e.childNodes)s.nodeType===Node.ELEMENT_NODE&&(!t&&a(s)?n.push(s):n.push(...d(s,t)));return n},p=(e,n={})=>{if(!e)throw new Error("Please provide a Element");const s=[],r=void 0!==i(e,"__l")&&a(e),o=d(e,r);for(const e of o)if(!e.hasAttribute("l-state")&&new RegExp(`(l-|${Object.keys(t).join("|")})\\w+`,"gim").test(e.outerHTML)){const t=c(e,n);t&&s.push(t)}return s},m=(e,t,n={},s=[])=>{const r=[];for(let i=0;i<e.length;i++){const o=e[i],l=0===o.type;l&&r.push(i);if(s.some((e=>o.deps.includes(e)))||l)for(const[e,r]of Object.entries(o.directives)){if(s.some((e=>r.deps.includes(e)))||l){const s={el:o.el,name:e,data:r,node:o,state:n};h(s,t)}}}for(const t of r)e.splice(t,1)},f={BIND:({el:e,name:t,data:n,state:r})=>{switch(t.split(":")[1]){case"class":const i=n.compute(r);if("string"==typeof i)return e.setAttribute("class",s(`${e.className} ${i}`));if(i instanceof Array)return e.setAttribute("class",s(`${e.className} ${i.join(" ")}`));{const t=[];for(const e in i)i[e]&&t.push(e);const n=new RegExp(`\\b${Object.keys(i).join("|")}\\b`,"gim"),r=e.className.replace(n,"");return t.length>0?e.setAttribute("class",s(`${r} ${t.join(" ")}`)):s(e.className).length>0?e.setAttribute("class",s(r)):e.removeAttribute("class")}case"style":const o=n.compute(r);e.removeAttribute("style");for(const t in o)e.style[t]=o[t];break;default:const l=n.compute(r);if("object"==typeof l&&null!==l)for(const t in l)l[t]?e.setAttribute(t,l[t]):e.removeAttribute(t);else l?e.setAttribute(t.split(":")[1],l):e.removeAttribute(t.split(":")[1])}},HTML:({el:e,data:t,state:n})=>{e.innerHTML=t.compute(n)??t.value;const s=p(e,n);m(s,f,n,t.deps)},IF:({el:e,data:t,state:n,node:s})=>{s=s;const r=!!t.compute(n);if(!i(s.el,"__l_if_template")){const t=document.createElement("template");o(t,"__l_if_template",!0),t.content.appendChild(e.cloneNode(!0)),e.replaceWith(t),s.el=t}const l=i(s.el,"__l_if_has_inserted");if(!r&&l)s.el.nextElementSibling?.remove(),o(s.el,"__l_has_inserted",!1);else if(r&&!l){const e=s.el.content.cloneNode(!0);s.el.parentElement?.insertBefore(e,s.el.nextElementSibling),o(s.el,"__l_has_inserted",!0);const t=s.el.nextElementSibling;t.removeAttribute("l-if");const r=p(t,n);m(r,f,n,Object.keys(n))}},MODEL:({el:e,name:t,data:n,state:s})=>{const r=e,l=s[n.value];if(r.value!==String(l)&&(r.value=String(l)),!i(r,"__l_model_registered")){const[,e]=t.split("."),i=()=>((e,t,n,s)=>{const r="number"==typeof t&&!isNaN(e.value),i="boolean"==typeof t&&("true"===e.value||"false"===e.value),o=null==t&&("null"===e.value||"undefined"===e.value);let l;return l=r?parseFloat(e.value):i?"true"===e.value:o?"null"===e.value?null:void 0:String(e.value),s[n.value]=l,l})(r,l,n,s);r.addEventListener("debounce"===e?"change":"input",i),o(r,"__l_model_registered",!0)}},ON:({el:e,name:t,data:n,state:s})=>{const r={};if(i(e,"__l_on_registered"))return;const[l,a]=t.split("."),c=l.split(":")[1],u=a||null;r.once="once"===u,r.passive="passive"===u,(["away","global"].includes(String(u))?document:e).addEventListener(c,(t=>{if("prevent"===u&&t.preventDefault(),"stop"===u&&t.stopPropagation(),"away"===u){if(e.contains(t.target))return;if(e.offsetWidth<1&&e.offsetHeight<1)return}n.compute(s)}),r),o(e,"__l_on_registered",!0)},TEXT:({el:e,data:t,state:n})=>{e.textContent=t.compute(n)??t.value},FOR:({el:e,data:t,state:s})=>{const[r,l]=t.value.split(/in +/g),[a,c]=r.replace(/\(|\)/gim,"").split(","),u=s[l];let d=i(e,"__l_for_template");e.innerHTML.trim()===d&&(e.innerHTML="");const h=u.length-e.children.length;if(0===u.length)e.innerHTML="";else if(0!==h)for(let t=Math.abs(h);t>0;t--)if(h<0)e.removeChild(e.lastChild);else{const s=d.startsWith("<th")?"thead":d.startsWith("<td")||d.startsWith("<tr")?"tbody":"div",r=document.createElement(s);let i=d;a&&(i=i.replace(n(`this\\.${a.trim()}`),`${l}[${u.length-t}]`)),c&&(i=i.replace(n(`this\\.${c.trim()}`),String(u.length-t))),r.innerHTML=i,e.appendChild(r.firstElementChild)}o(e,"__l",!0);const _=p(e,s);m(_,f,s,t.deps)}},h=(e,t)=>{t[e.name.split(/:|\./gim)[0].toUpperCase()](e)},_=(e,t)=>{const n={get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],n):e[t],set(n,s,r){if("function"==typeof e[s])return!1;const i=!isNaN(Number(s))||"length"===s;let o=[];return o=n instanceof Array&&i?Object.keys(e).filter((t=>{return s=e[t],r=n,s instanceof Array&&r instanceof Array&&s.length===r.length&&s.every(((e,t)=>e===r[t]));var s,r})):Object.keys(e).some((e=>void 0===n[e]))?Object.keys(e).filter((t=>"object"==typeof e[t])):[s],n[s]=r,t(o),!0}};return Proxy.revocable(Object.seal(e),n)};class v{constructor(e={}){this.state=e,this.directives={}}mount(e){const t="string"==typeof e?document.querySelector(e):e;return this.ast=p(t,this.state),this.state=_(this.state,this.render.bind(this)).proxy,this.directives={...this.directives,...f},this.render(),o(t,"__l",this),this.state}directive(e,t){this.directives[e.toUpperCase()]=t}render(e=Object.keys(this.state)){m(this.ast,f,this.state,e)}}const b=e=>new v(e),g=new CustomEvent("lucia:load"),y=(e=document)=>{const t="l-state";[...e.querySelectorAll("[l-state]")].filter((e=>void 0===i(e,"__l"))).map((e=>{const n=e.getAttribute(t);try{const t=new Function(`return ${n||{}}`);b(t()).mount(e)}catch(t){console.warn(`Lucia Error: "${t}"\n\nExpression: "${n}"\nElement:`,e)}})),document.dispatchEvent(g)};var E=Object.freeze({__proto__:null,component:b,compile:p,patch:m,reactive:_,directives:f,luciaLoadEvent:g,init:y});const $=()=>y(),w=async()=>{await new Promise((e=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()})),$(),document.addEventListener("turbolinks:load",$),document.addEventListener("turbo:load",$)};return window.__l?window.__l((()=>w())):w(),E}(); |
@@ -9,5 +9,5 @@ import { Directives, State, ASTNode } from './models/structs'; | ||
| directive(name: string, callback: Function): void; | ||
| render(keys?: string[]): void; | ||
| render(props?: string[]): void; | ||
| } | ||
| export declare const component: (state: State) => Component; | ||
| export default component; |
@@ -1,7 +0,9 @@ | ||
| import { State, ASTNode } from '../models/structs'; | ||
| export declare const createASTNode: (el: HTMLElement, state: State) => ASTNode | null; | ||
| import { State, DirectiveKV, ASTNode } from '../models/structs'; | ||
| export declare const removeDupesFromArray: (array: any[]) => any[]; | ||
| export declare const isListRenderScope: (el: HTMLElement) => boolean; | ||
| export declare const isUnderListRenderScope: (el: HTMLElement) => boolean; | ||
| export declare const createASTNode: (el: HTMLElement, state: State) => ASTNode | null; | ||
| export declare const collectAndInitDirectives: (el: HTMLElement, state?: State) => (DirectiveKV | string[])[]; | ||
| export declare const extractNodeChildrenAsCollection: (rootNode: HTMLElement, isListGroup?: boolean) => HTMLElement[]; | ||
| export declare const compile: (el: HTMLElement, state?: State) => ASTNode[]; | ||
| export default compile; |
| import { DirectiveProps } from '../../models/structs'; | ||
| export declare const formatAcceptableWhitespace: (expression: string) => string; | ||
| export declare const bindDirective: ({ el, name, data, state }: DirectiveProps) => void; |
| import { DirectiveProps } from '../../models/structs'; | ||
| export declare const ifDirective: ({ el, name, data, state }: DirectiveProps) => void; | ||
| export declare const ifDirective: ({ el, data, state, node }: DirectiveProps) => void; |
| import { UnknownKV } from '../models/generics'; | ||
| import { Directives, ASTNode } from '../models/structs'; | ||
| declare const patch: (ast: ASTNode[], directives: Directives, state?: UnknownKV, changedKeys?: string[]) => void; | ||
| declare const patch: (ast: ASTNode[], directives: Directives, state?: UnknownKV, changedProps?: string[]) => void; | ||
| export default patch; |
| import { UnknownKV } from '../models/generics'; | ||
| import { State } from '../models/structs'; | ||
| interface RevocableProxy { | ||
| export interface RevocableProxy { | ||
| proxy: UnknownKV; | ||
| revoke: Function; | ||
| } | ||
| export declare const arrayEquals: (firstArray: unknown[], secondArray: unknown[]) => boolean; | ||
| export declare const reactive: (state: State, callback: Function) => RevocableProxy; | ||
| export default reactive; |
@@ -0,2 +1,3 @@ | ||
| export declare const interpretProps: (expression: string, stateValues: unknown[], positionInState: number) => any; | ||
| export declare const computeExpression: (expression: string, el?: HTMLElement | undefined, returnable?: boolean | undefined) => Function; | ||
| export default computeExpression; |
| export declare const rawDirectiveSplitRE: () => RegExp; | ||
| export declare const semicolonCaptureRE: () => RegExp; | ||
| export declare const arrayIndexCaptureRE: () => RegExp; | ||
@@ -8,2 +7,2 @@ export declare const eventDirectivePrefixRE: () => RegExp; | ||
| export declare const hasDirectiveRE: () => RegExp; | ||
| export declare const expressionPropRE: (key: string) => RegExp; | ||
| export declare const expressionPropRE: (prop: string) => RegExp; |
@@ -7,2 +7,3 @@ import component from './component'; | ||
| export { component, compile, patch, reactive, directives }; | ||
| export declare const luciaLoadEvent: CustomEvent<unknown>; | ||
| export declare const init: (element?: HTMLElement | Document) => void; |
@@ -9,3 +9,3 @@ import { UnknownKV } from './generics'; | ||
| value: string; | ||
| keys: string[]; | ||
| deps: string[]; | ||
| } | ||
@@ -17,6 +17,7 @@ export interface DirectiveProps { | ||
| state: State; | ||
| node?: ASTNode; | ||
| } | ||
| export interface ASTNode { | ||
| directives: DirectiveKV; | ||
| keys: string[]; | ||
| deps: string[]; | ||
| el: HTMLElement; | ||
@@ -23,0 +24,0 @@ type: ASTNodeType; |
| { | ||
| "name": "lucia", | ||
| "version": "0.4.0", | ||
| "version": "0.4.1", | ||
| "description": "A tiny 3kb JavaScript library for prototyping web applications.", | ||
@@ -58,3 +58,3 @@ "main": "dist/lucia.cjs.js", | ||
| "@rollup/plugin-commonjs": "17.0.0", | ||
| "@rollup/plugin-node-resolve": "11.0.1", | ||
| "@rollup/plugin-node-resolve": "11.1.0", | ||
| "@size-limit/preset-app": "^4.9.1", | ||
@@ -67,3 +67,3 @@ "@testing-library/dom": "^7.28.1", | ||
| "prettier": "^2.1.2", | ||
| "rollup": "2.35.1", | ||
| "rollup": "2.38.0", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
@@ -70,0 +70,0 @@ "rollup-plugin-typescript2": "^0.29.0", |
@@ -58,3 +58,3 @@ # <a href="http://lucia.js.org"><img src="https://raw.githubusercontent.com/aidenybai/lucia/master/.github/img/logo.svg" height="60" alt="Lucia Logo" aria-label="http://lucia.js.org" /></a> | ||
| Lucia takes heavy inspiration from [Vue's syntax](https://github.com/vuejs/vue), and believes in the core philiosophies and values behind [Alpine](https://github.com/alpinejs/alpine), [Stimulus](https://github.com/stimulusjs/stimulus), and [Remake](https://github.com/remake/remake-cli). Feel free to check them out if you interested in a production-ready library to use. | ||
| Lucia takes heavy inspiration from [Vue's syntax](https://github.com/vuejs/vue), and believes in the core philiosophies and values behind [Alpine](https://github.com/alpinejs/alpine), [Sidewind](https://github.com/survivejs/sidewind), and [Remake](https://github.com/remake/remake-cli). Feel free to check them out if you interested in a production-ready library to use. | ||
@@ -61,0 +61,0 @@ --- |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by8.46%
203373
- Lines of code
- increased by6.87%
3843
Worsened metrics
- Number of package files
- decreased by-5.56%
34
No dependency changes