geoff
/
Mite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

singe quote > double quote

This commit is contained in:
Geoff Doty 2025-03-27 12:29:45 -05:00
parent 83ba66afa4
commit e72196cb34
1 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/Mite.js
View File

@ -50,7 +50,7 @@ export class Mite {
this.bindings.clear(); this.bindings.clear();
const fragment = this.template.cloneNode(true); const fragment = this.template.cloneNode(true);
this.root.innerHTML = ''; this.root.innerHTML = "";
this.root.appendChild(fragment); this.root.appendChild(fragment);
this.scanAndBind(this.root); this.scanAndBind(this.root);
@ -64,7 +64,7 @@ export class Mite {
const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT); const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
let node; let node;
while ((node = walker.nextNode())) { while ((node = walker.nextNode())) {
if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('{')) { if (node.nodeType === Node.TEXT_NODE && node.textContent.includes("{")) {
const matches = node.textContent.match(/{(\w+)}/g); const matches = node.textContent.match(/{(\w+)}/g);
if (matches) { if (matches) {
matches.forEach(token => { matches.forEach(token => {
@ -73,7 +73,7 @@ export class Mite {
if (!this.bindings.has(key)) this.bindings.set(key, []); if (!this.bindings.has(key)) this.bindings.set(key, []);
const updateFn = () => this.update(key); const updateFn = () => this.update(key);
const unsubscribe = this.state[key].subscribe(updateFn); const unsubscribe = this.state[key].subscribe(updateFn);
this.bindings.get(key).push({ node, type: 'text', original: node.textContent, unsubscribe }); this.bindings.get(key).push({ node, type: "text", original: node.textContent, unsubscribe });
} }
}); });
} }
@ -81,7 +81,7 @@ export class Mite {
for (const attr of node.attributes) { for (const attr of node.attributes) {
const matches = attr.value.match(/{(\w+)}/g); const matches = attr.value.match(/{(\w+)}/g);
if (matches) { if (matches) {
if (attr.name.startsWith('@')) { if (attr.name.startsWith("@")) {
const eventName = attr.name.slice(1); const eventName = attr.name.slice(1);
const methodName = attr.value.slice(1, -1); const methodName = attr.value.slice(1, -1);
if (this.methods[methodName]) { if (this.methods[methodName]) {
@ -94,25 +94,25 @@ export class Mite {
if (!this.bindings.has(key)) this.bindings.set(key, []); if (!this.bindings.has(key)) this.bindings.set(key, []);
const updateFn = () => this.update(key); const updateFn = () => this.update(key);
const unsubscribe = this.state[key].subscribe(updateFn); const unsubscribe = this.state[key].subscribe(updateFn);
this.bindings.get(key).push({ node, type: 'attr', attrName: attr.name, original: attr.value, unsubscribe }); this.bindings.get(key).push({ node, type: "attr", attrName: attr.name, original: attr.value, unsubscribe });
} }
}); });
} }
} }
} }
const rif = node.getAttribute('r-if'); const rif = node.getAttribute("r-if");
if (rif && rif.match(/{(\w+)}$/)) { if (rif && rif.match(/{(\w+)}$/)) {
const key = rif.slice(1, -1); const key = rif.slice(1, -1);
if (this.state[key]) { if (this.state[key]) {
if (!this.bindings.has(key)) this.bindings.set(key, []); if (!this.bindings.has(key)) this.bindings.set(key, []);
const updateFn = () => this.update(key); const updateFn = () => this.update(key);
const unsubscribe = this.state[key].subscribe(updateFn); const unsubscribe = this.state[key].subscribe(updateFn);
this.bindings.get(key).push({ node, type: 'if', unsubscribe }); this.bindings.get(key).push({ node, type: "if", unsubscribe });
} }
} }
const reach = node.getAttribute('r-each'); const reach = node.getAttribute("r-each");
if (reach) { if (reach) {
const match = reach.match(/{(.+?)}/); const match = reach.match(/{(.+?)}/);
if (!match) { if (!match) {
@ -121,7 +121,7 @@ export class Mite {
} }
const content = match[1]; const content = match[1];
const parts = content.split(' in '); const parts = content.split(" in ");
if (parts.length !== 2) { if (parts.length !== 2) {
console.error(`Invalid r-each split on " in ": ${content}, parts: ${parts}`); console.error(`Invalid r-each split on " in ": ${content}, parts: ${parts}`);
continue; continue;
@ -130,7 +130,7 @@ export class Mite {
names = names.trim(); names = names.trim();
listName = listName.trim(); listName = listName.trim();
const nameParts = names.split(',').map(part => part.trim()); const nameParts = names.split(",").map(part => part.trim());
const itemName = nameParts[0]; const itemName = nameParts[0];
const indexName = nameParts.length > 1 ? nameParts[1] : undefined; const indexName = nameParts.length > 1 ? nameParts[1] : undefined;
@ -140,7 +140,7 @@ export class Mite {
const unsubscribe = this.state[listName].subscribe(updateFn); const unsubscribe = this.state[listName].subscribe(updateFn);
this.bindings.get(listName).push({ this.bindings.get(listName).push({
node, node,
type: 'each', type: "each",
itemName, itemName,
indexName, indexName,
unsubscribe, unsubscribe,
@ -158,30 +158,30 @@ export class Mite {
update(key) { update(key) {
const bindings = this.bindings.get(key) || []; const bindings = this.bindings.get(key) || [];
bindings.forEach(binding => { bindings.forEach(binding => {
// Remove the parentNode check for 'each' bindings since we use parentSelector // Remove the parentNode check for "each" bindings since we use parentSelector
if (!binding.node) return; if (!binding.node) return;
switch (binding.type) { switch (binding.type) {
case 'text': case "text":
if (!binding.node.parentNode) return; if (!binding.node.parentNode) return;
binding.node.textContent = binding.original.replace(/{(\w+)}/g, (_, k) => { binding.node.textContent = binding.original.replace(/{(\w+)}/g, (_, k) => {
return this.state[k] ? this.state[k].value : `{${k}}`; return this.state[k] ? this.state[k].value : `{${k}}`;
}); });
break; break;
case 'attr': case "attr":
if (!binding.node.parentNode) return; if (!binding.node.parentNode) return;
binding.node.setAttribute(binding.attrName, binding.original.replace(/{(\w+)}/g, (_, k) => { binding.node.setAttribute(binding.attrName, binding.original.replace(/{(\w+)}/g, (_, k) => {
return this.state[k] ? this.state[k].value : `{${k}}`; return this.state[k] ? this.state[k].value : `{${k}}`;
})); }));
break; break;
case 'if': case "if":
if (!binding.node.parentNode) return; if (!binding.node.parentNode) return;
binding.node.style.display = this.state[key].value ? '' : 'none'; binding.node.style.display = this.state[key].value ? "" : "none";
break; break;
case 'each': { case "each": {
const parent = this.root.querySelector(binding.parentSelector); const parent = this.root.querySelector(binding.parentSelector);
if (!parent) { if (!parent) {
console.error(`Parent node (${binding.parentSelector}) not found for r-each="${binding.originalReach}"`); console.error(`Parent node (${binding.parentSelector}) not found for r-each="${binding.originalReach}"`);
@ -194,15 +194,15 @@ export class Mite {
} }
const items = this.state[key].value || []; const items = this.state[key].value || [];
parent.innerHTML = ''; parent.innerHTML = "";
items.forEach((item, index) => { items.forEach((item, index) => {
const clone = template.cloneNode(true); const clone = template.cloneNode(true);
clone.removeAttribute('r-each'); clone.removeAttribute("r-each");
const walker = document.createTreeWalker(clone, NodeFilter.SHOW_TEXT); const walker = document.createTreeWalker(clone, NodeFilter.SHOW_TEXT);
let textNode; let textNode;
while ((textNode = walker.nextNode())) { while ((textNode = walker.nextNode())) {
if (textNode.textContent.includes('{')) { if (textNode.textContent.includes("{")) {
textNode.textContent = textNode.textContent.replace(/{(\w+)}/g, (_, k) => { textNode.textContent = textNode.textContent.replace(/{(\w+)}/g, (_, k) => {
if (k === binding.itemName) return item; if (k === binding.itemName) return item;
if (k === binding.indexName) return index; if (k === binding.indexName) return index;
@ -210,13 +210,13 @@ export class Mite {
}); });
} }
} }
const eventElements = clone.querySelectorAll('[\\@click]'); const eventElements = clone.querySelectorAll("[\\@click]");
eventElements.forEach(el => { eventElements.forEach(el => {
const clickAttr = el.getAttribute('@click'); const clickAttr = el.getAttribute("@click");
if (clickAttr && clickAttr.match(/{(\w+),\s*(\w+)}/)) { if (clickAttr && clickAttr.match(/{(\w+),\s*(\w+)}/)) {
const [, methodName, param] = clickAttr.match(/{(\w+),\s*(\w+)}/); const [, methodName, param] = clickAttr.match(/{(\w+),\s*(\w+)}/);
if (this.methods[methodName] && param === binding.indexName) { if (this.methods[methodName] && param === binding.indexName) {
el.addEventListener('click', (e) => this.methods[methodName](e, index)); el.addEventListener("click", (e) => this.methods[methodName](e, index));
} }
} }
}); });