diff --git a/directive/default.js b/directive/default.js index 3f84193..82c16c5 100644 --- a/directive/default.js +++ b/directive/default.js @@ -153,5 +153,5 @@ const debounce = (fn, wait) => { }; export const dashcase = (str) => { - return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => "-" + match.toLowerCase()); + return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match, i) => (i?'-':'') + match.toLowerCase()); } diff --git a/dist/sprae.auto.js b/dist/sprae.auto.js index 92ade4b..162da87 100644 --- a/dist/sprae.auto.js +++ b/dist/sprae.auto.js @@ -590,7 +590,7 @@ ${dir}${expr ? `="${expr}" }; }; var dashcase = (str) => { - return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => "-" + match.toLowerCase()); + return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match, i) => (i ? "-" : "") + match.toLowerCase()); }; // directive/value.js diff --git a/dist/sprae.auto.js.map b/dist/sprae.auto.js.map index 25b9339..8bd73f5 100644 --- a/dist/sprae.auto.js.map +++ b/dist/sprae.auto.js.map @@ -1,7 +1,7 @@ { "version": 3, "sources": ["../signal.js", "../store.js", "../core.js", "../node_modules/ulive/dist/ulive.es.js", "../directive/if.js", "../directive/each.js", "../directive/ref.js", "../directive/with.js", "../directive/html.js", "../directive/text.js", "../directive/class.js", "../directive/style.js", "../directive/default.js", "../directive/value.js", "../directive/fx.js", "../sprae.js"], - "sourcesContent": ["// signals adapter - allows switching signals implementation and not depend on core\nexport let signal, effect, untracked, batch, computed;\n\nexport function use(s) {\n signal = s.signal\n effect = s.effect\n computed = s.computed\n batch = s.batch || (fn => fn())\n untracked = s.untracked || batch\n}\n", "// signals-based proxy\nimport { signal, computed, effect, batch, untracked } from './signal.js'\n\nexport const _signals = Symbol('signals'), _change = Symbol('length');\n\n// object store is not lazy\nexport default function store(values, parent) {\n if (!values) return values\n\n // ignore existing state as argument\n if (values[_signals]) return values;\n\n // redirect for optimized array store\n if (Array.isArray(values)) return list(values)\n\n // ignore non-objects\n if (values.constructor !== Object) return values;\n\n // NOTE: if you decide to unlazy values, think about large arrays - init upfront can be costly\n let signals = { ...parent?.[_signals] }, _len = signal(Object.values(values).length)\n\n // proxy conducts prop access to signals\n const state = new Proxy(signals, {\n get: (_, key) => key === _change ? _len : key === _signals ? signals : (signals[key]?.valueOf()),\n set: (_, key, v, s) => (s = signals[key], set(signals, key, v), s ?? (++_len.value), 1), // bump length for new signal\n deleteProperty: (_, key) => (signals[key] && (del(signals, key), _len.value--), 1),\n ownKeys() {\n // subscribe to length when object is spread\n _len.value\n return Reflect.ownKeys(signals);\n },\n })\n\n // init signals for values\n for (let key in values) {\n const desc = Object.getOwnPropertyDescriptor(values, key)\n\n // getter turns into computed\n if (desc?.get) {\n // stash setter\n (signals[key] = computed(desc.get.bind(state)))._set = desc.set?.bind(state);\n }\n else {\n // init blank signal - make sure we don't take prototype one\n signals[key] = undefined\n set(signals, key, values[key]);\n }\n }\n\n return state\n}\n\n// length changing methods\nconst mut = { push: 1, pop: 1, shift: 1, unshift: 1, splice: 1 }\n\n// array store - signals are lazy since arrays can be very large & expensive\nexport function list(values) {\n // track last accessed property to find out if .length was directly accessed from expression or via .push/etc method\n let lastProp\n\n // ignore existing state as argument\n if (values[_signals]) return values;\n\n // .length signal is stored separately, since it cannot be replaced on array\n let _len = signal(values.length),\n // gotta fill with null since proto methods like .reduce may fail\n signals = Array(values.length).fill();\n\n // proxy conducts prop access to signals\n const state = new Proxy(signals, {\n get(_, key) {\n // covers Symbol.isConcatSpreadable etc.\n if (typeof key === 'symbol') return key === _change ? _len : key === _signals ? signals : signals[key]\n\n // console.log('get', key)\n // if .length is read within .push/etc - peek signal to avoid recursive subscription\n if (key === 'length') return mut[lastProp] ? _len.peek() : _len.value;\n\n lastProp = key;\n\n if (signals[key]) return signals[key].valueOf()\n\n // I hope reading values here won't diverge from signals\n if (key < signals.length) return (signals[key] = signal(store(values[key]))).value\n },\n\n set(_, key, v) {\n // console.log('set', key, v)\n // .length\n if (key === 'length') {\n // force cleaning up tail\n for (let i = v, l = signals.length; i < l; i++) delete state[i]\n // .length = N directly\n _len.value = signals.length = v;\n return true\n }\n\n set(signals, key, v)\n\n // force changing length, if eg. a=[]; a[1]=1 - need to come after setting the item\n if (key >= _len.peek()) _len.value = signals.length = Number(key) + 1\n\n return true\n },\n\n deleteProperty: (_, key) => (signals[key] && del(signals, key), 1),\n\n })\n\n return state\n}\n\n// set/update signal value\nfunction set(signals, key, v) {\n let s = signals[key]\n\n // untracked\n if (key[0] === '_') signals[key] = v\n // new property\n else if (!s) {\n // preserve signal value as is\n signals[key] = s = v?.peek ? v : signal(store(v))\n }\n // skip unchanged (although can be handled by last condition - we skip a few checks this way)\n else if (v === s.peek());\n // stashed _set for value with getter/setter\n else if (s._set) s._set(v)\n // patch array\n else if (Array.isArray(v) && Array.isArray(s.peek())) {\n const cur = s.peek()\n // if we update plain array (stored in signal) - take over value instead\n if (cur[_change]) untracked(() => {\n batch(() => {\n let i = 0, l = v.length;\n for (; i < l; i++) cur[i] = v[i]\n cur.length = l // forces deleting tail signals\n })\n })\n else {\n s.value = v\n }\n }\n // .x = y\n else {\n s.value = store(v)\n }\n}\n\n// delete signal\nfunction del(signals, key) {\n const s = signals[key], del = s[Symbol.dispose]\n if (del) delete s[Symbol.dispose]\n delete signals[key]\n del?.()\n}\n", "import { use } from \"./signal.js\";\nimport store, { _signals } from './store.js';\n\n// polyfill\nconst _dispose = (Symbol.dispose ||= Symbol(\"dispose\"));\n\n// reserved directives - order matters!\nexport const directive = {};\n\n// every element that's in cache === directly spraed and un subsequent sprae is just updated (like each)\nexport const memo = new WeakMap();\n\n// sprae element: apply directives\nexport default function sprae(el, values) {\n // text nodes, comments etc\n if (!el?.childNodes) return\n\n // repeated call can be caused by :each with new objects with old keys needs an update\n if (memo.has(el)) {\n // we rewrite signals instead of update, because user should have what he provided\n return Object.assign(memo.get(el), values)\n }\n\n // take over existing state instead of creating clone\n const state = store(values || {}), disposes = []\n\n init(el);\n\n // if element was spraed by :with or :each instruction - skip, otherwise save\n if (!memo.has(el)) memo.set(el, state);\n\n // disposer unspraes all internal elements\n el[_dispose] = () => {\n while (disposes.length) disposes.pop()();\n memo.delete(el);\n }\n\n return state;\n\n function init(el, parent = el.parentNode) {\n if (!el.childNodes) return // ignore text nodes, comments etc\n\n // init generic-name attributes second\n for (let i = 0; i < el.attributes?.length;) {\n let attr = el.attributes[i];\n\n if (attr.name[0] === ':') {\n el.removeAttribute(attr.name);\n\n // multiple attributes like :id:for=\"\"\n let names = attr.name.slice(1).split(':')\n\n // NOTE: secondary directives don't stop flow nor extend state, so no need to check\n for (let name of names) {\n let dir = directive[name] || directive.default\n let evaluate = (dir.parse || parse)(attr.value)\n let dispose = dir(el, evaluate, state, name);\n if (dispose) disposes.push(dispose);\n }\n\n // stop if element was spraed by internal directive\n if (memo.has(el)) return el[_dispose] && disposes.push(el[_dispose])\n\n // stop if element is skipped (detached) like in case of :if or :each\n if (el.parentNode !== parent) return\n } else i++;\n }\n\n for (let child of [...el.childNodes]) init(child, el);\n };\n}\n\n\n// compiler\nconst evalMemo = {};\nexport const parse = (expr, dir, fn) => {\n if (fn = evalMemo[expr = expr.trim()]) return fn\n\n // static-time errors\n try { fn = compile(expr) }\n catch (e) { err(e, dir, expr) }\n\n // runtime errors\n return evalMemo[expr] = fn\n}\n\n// wrapped call\nexport const err = (e, dir, expr = '') => {\n throw Object.assign(e, { message: `\u2234 ${e.message}\\n\\n${dir}${expr ? `=\"${expr}\"\\n\\n` : \"\"}`, expr })\n}\n\nexport let compile\n\n// configure signals/compile\n// it's more compact than using sprae.signal = signal etc.\nsprae.use = s => {\n s.signal && use(s);\n s.compile && (compile = s.compile);\n}\n\n\n// instantiated