rename state to data
This commit is contained in:
parent
cecefefa57
commit
5b7341ce65
36
src/Mite.js
36
src/Mite.js
|
@ -34,9 +34,9 @@ export class Mite {
|
||||||
this.root = document.querySelector(selector);
|
this.root = document.querySelector(selector);
|
||||||
if (!this.root) throw new Error(`Element ${selector} not found`);
|
if (!this.root) throw new Error(`Element ${selector} not found`);
|
||||||
|
|
||||||
this.state = {};
|
this.data = {};
|
||||||
for (const key in options.state) {
|
for (const key in options.data) {
|
||||||
this.state[key] = signal(options.state[key]);
|
this.data[key] = signal(options.data[key]);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.methods = options || {};
|
this.methods = options || {};
|
||||||
|
@ -68,7 +68,7 @@ export class Mite {
|
||||||
|
|
||||||
this.scanAndBind(this.root);
|
this.scanAndBind(this.root);
|
||||||
|
|
||||||
for (const key in this.state) {
|
for (const key in this.data) {
|
||||||
this.update(key);
|
this.update(key);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -82,10 +82,10 @@ export class Mite {
|
||||||
if (matches) {
|
if (matches) {
|
||||||
matches.forEach(token => {
|
matches.forEach(token => {
|
||||||
const key = token.slice(1, -1);
|
const key = token.slice(1, -1);
|
||||||
if (this.state[key]) {
|
if (this.data[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.data[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 });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -103,10 +103,10 @@ export class Mite {
|
||||||
} else {
|
} else {
|
||||||
matches.forEach(token => {
|
matches.forEach(token => {
|
||||||
const key = token.slice(1, -1);
|
const key = token.slice(1, -1);
|
||||||
if (this.state[key]) {
|
if (this.data[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.data[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 });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -117,10 +117,10 @@ export class Mite {
|
||||||
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.data[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.data[key].subscribe(updateFn);
|
||||||
this.bindings.get(key).push({ node, type: "if", unsubscribe });
|
this.bindings.get(key).push({ node, type: "if", unsubscribe });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -147,10 +147,10 @@ export class Mite {
|
||||||
const itemName = nameParts[0];
|
const itemName = nameParts[0];
|
||||||
const indexName = nameParts.length > 1 ? nameParts[1] : undefined;
|
const indexName = nameParts.length > 1 ? nameParts[1] : undefined;
|
||||||
|
|
||||||
if (this.state[listName]) {
|
if (this.data[listName]) {
|
||||||
if (!this.bindings.has(listName)) this.bindings.set(listName, []);
|
if (!this.bindings.has(listName)) this.bindings.set(listName, []);
|
||||||
const updateFn = () => this.update(listName);
|
const updateFn = () => this.update(listName);
|
||||||
const unsubscribe = this.state[listName].subscribe(updateFn);
|
const unsubscribe = this.data[listName].subscribe(updateFn);
|
||||||
this.bindings.get(listName).push({
|
this.bindings.get(listName).push({
|
||||||
node,
|
node,
|
||||||
type: "each",
|
type: "each",
|
||||||
|
@ -161,7 +161,7 @@ export class Mite {
|
||||||
parentSelector: node.parentNode.tagName.toLowerCase()
|
parentSelector: node.parentNode.tagName.toLowerCase()
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
console.error(`State key not found: ${listName}`);
|
console.error(`data key not found: ${listName}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -178,20 +178,20 @@ export class Mite {
|
||||||
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.data[k] ? this.data[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.data[k] ? this.data[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.data[key].value ? "" : "none";
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "each": {
|
case "each": {
|
||||||
|
@ -205,7 +205,7 @@ export class Mite {
|
||||||
console.error(`Template not found for r-each="${binding.originalReach}"`);
|
console.error(`Template not found for r-each="${binding.originalReach}"`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const items = this.state[key].value || [];
|
const items = this.data[key].value || [];
|
||||||
|
|
||||||
parent.innerHTML = "";
|
parent.innerHTML = "";
|
||||||
|
|
||||||
|
@ -219,7 +219,7 @@ export class Mite {
|
||||||
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;
|
||||||
return this.state[k] ? this.state[k].value : `{${k}}`;
|
return this.data[k] ? this.data[k].value : `{${k}}`;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue