autismjs/monorepo
1
0
Fork 0
mirror of https://github.com/autismjs/monorepo.git synced 2026-01-09 17:17:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix virtual dom patching

Browse Source
This commit is contained in:
tsukino
2023-12-27 03:29:16 -08:00
parent e6900439dc
commit 2b5b7f3072
6 changed files with 68 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/db/src/level.ts
View File

@@ -64,6 +64,29 @@ export default class LevelDBAdapter implements BaseDBAdapter {
await this.#db.close();
}
async reindex() {
console.log('clearing indices');
await this.#indices.user.clear();
await this.#indices.global.clear();
await this.#indices.thread.clear();
console.log('cleared indices');
const values = await this.#db.values();
let i = 1;
for await (const value of values) {
console.log(`inserting messages ${i++}`);
const { createdAt, ...json } = value;
const msg = Message.fromJSON({
...json,
createdAt: new Date(createdAt),
});
await this.#db.del(msg!.hash);
await this.insertMessage(msg!);
}
}
async insertMessage(message: Any): Promise<Any | null> {
const exist = await this.getMessage(message.hash);

4
packages/protocol/src/services/browser.ts
View File

@@ -14,8 +14,6 @@ import { version } from '../../package.json';
import type { PeerId } from '@libp2p/interface/peer-id';
import { Mutex } from 'async-mutex';
let i = 0;
export class Autism extends EventEmitter2 {
p2p: P2P;
db: DB;
@@ -210,10 +208,8 @@ export class Autism extends EventEmitter2 {
if (json.messages) {
for (const hex of json.messages) {
const msg = Message.fromHex(hex);
console.log(`adding msg ${i++} ${hex}`);
if (msg) {
if (await this.db.insertMessage(msg)) {
console.log(`sync:new_message ${i}`);
this.emit('sync:new_message', msg);
}
}

7
packages/protocol/src/services/index.ts
View File

@@ -14,7 +14,7 @@ import { version } from '../../package.json';
import type { PeerId } from '@libp2p/interface/peer-id';
import { Mutex } from 'async-mutex';
let i = 0;
const i = 0;
export class Autism extends EventEmitter2 {
p2p: P2P;
@@ -119,11 +119,14 @@ export class Autism extends EventEmitter2 {
const children = merkle.checkHash(depth, index, BigInt(root));
if (!children) {
console.log(`sending message depth: ${depth} index: ${index}`);
const message = await this.db.getMessage(
hexify(merkle.leaves[index]).padStart(64, '0'),
);
console.log(user, message?.hash);
if (message) {
console.log(`sending message ${i++}: ${message.hex}`);
res.send(
Buffer.from(
JSON.stringify({

113
packages/web/lib/ui.ts
View File

@@ -4,6 +4,7 @@ interface CustomElementConstructor {
new (): CustomElement;
}
const count = 0;
interface ICustomElement extends HTMLElement {
state: any;
render: () => VNode;
@@ -64,40 +65,7 @@ export class CustomElement extends HTMLElement implements ICustomElement {
this.create();
}
attributeChangedCallback(key: string, ov: string, nv: string) {
if (nv === ov) return;
requestAnimationFrame(async () => {
const now = Date.now();
const timeSince = now - this.#lastAttrUpdated;
const wait = 0;
const later = async () => {
if (this.#attrUpdateTimeout) {
clearTimeout(this.#attrUpdateTimeout);
this.#attrUpdateTimeout = null;
}
this.#lastAttrUpdated = now;
await this.update();
};
if (timeSince > wait) {
await later();
} else {
if (this.#attrUpdateTimeout) {
clearTimeout(this.#attrUpdateTimeout);
}
this.#attrUpdateTimeout = setTimeout(
later,
Math.max(0, wait - timeSince),
);
}
this.#lastAttrUpdated = now;
});
}
update = async () => {
console.trace('update..');
if (!this.shadowRoot) return;
if (!this.#tree) {
@@ -182,58 +150,32 @@ export class VNode {
}
#patchOne(lastEl: Element, newNode: VNode) {
const dirty = false;
//
// if (lastEl.tagName !== newNode.tagName.toUpperCase()) {
// console.log({
// old: lastEl.tagName,
// new: newNode.tagName.toUpperCase(),
// });
// dirty = true;
// }
//
// if (!dirty && newNode.attributes.size) {
// for (const [name, value] of Array.from(newNode.attributes)) {
// if (lastEl.getAttribute(name) !== value) {
// console.log({
// old: lastEl.getAttribute(name),
// new: value,
// });
// dirty = true;
// }
// }
// }
//
// if (newNode.classList.length) {
// for (const name of newNode.classList) {
// if (!lastEl.classList.contains(name)) {
// lastEl?.classList.add(name);
// }
// }
// }
//
// if (lastEl.classList.length) {
// for (const name of Array.from(lastEl.classList)) {
// if (!newNode.classList.includes(name)) {
// lastEl?.classList.remove(name);
// }
// }
// }
//
// if (lastEl.tagName === 'TEXT' && lastEl.textContent !== newNode.content) {
// lastEl.textContent = newNode.content || '';
// }
//
// // console.log('patched one', dirty, lastEl, newNode);
// if (dirty) {
// console.log('dirty update');
// lastEl.replaceWith(newNode.createElement());
// return;
// }
let dirty = false;
if (lastEl.tagName === 'TEXT' && lastEl.textContent !== newNode.content) {
lastEl.textContent = newNode.content || '';
dirty = true;
}
if (newNode.attributes.size) {
for (const [name, value] of newNode.attributes) {
if (lastEl.getAttribute(name) !== value) {
lastEl.setAttribute(name, value);
dirty = true;
}
}
}
if (dirty) {
lastEl.replaceWith(newNode.createElement());
return;
}
const maxlength = Math.max(newNode.children.length, lastEl.children.length);
if (!maxlength) return;
if (!maxlength) {
return;
}
const lastChildren = Array.from(lastEl.children).slice();
const newChildren = newNode.children.slice();
@@ -242,16 +184,11 @@ export class VNode {
const newChild = newChildren[i];
if (lastChild && newChild) {
console.log('patching', lastChild, newChild);
newChild.patch(lastChild);
// lastChild.replaceWith(newChild.createElement());
} else if (!lastChild && newChild) {
console.log('appending');
// newChild.append(lastEl);
lastEl.appendChild(newChild.createElement());
} else if (lastChild && !newChild) {
console.log('removing');
// lastEl.removeChild(lastChild);
lastEl.removeChild(lastChild);
}
}
}

6
packages/web/src/index.ts
View File

@@ -1,3 +1,7 @@
import App from './pages/App';
import $node from './state/node.ts';
document.body.append(new App());
(async () => {
document.body.append(new App());
await $node.waitForStart();
})();

27
packages/web/src/state/node.ts
View File

@@ -14,7 +14,7 @@ export class NodeStore {
constructor() {
const node = new Autism({
bootstrap: [
'/ip4/192.168.86.24/tcp/56218/ws/p2p/12D3KooWLHV2ti9mAZMG4kKm1uaahaNyf57MXnTDLLtpW8yjX9tb',
'/ip4/192.168.86.24/tcp/60513/ws/p2p/12D3KooWBQns6iojm1whaL4VrrGvMsg2kMmqoxNMCwEGDg27G6Pq',
],
});
@@ -32,19 +32,12 @@ export class NodeStore {
node.on('sync:new_message', (post) => {
console.log('sync:new_message', post);
// this.#updatePosts();
// updateTimeout = setTimeout(() => {
// if (updateTimeout) clearTimeout(updateTimeout);
// updateTimeout = null;
// this.#updatePosts();
// }, 1000);
// this.$posts.set(post.hash, post);
// this.$globalPosts.$ = this.$globalPosts.$.concat(post.hash);
this.#updatePosts();
});
this.#wait = new Promise(async (r) => {
await this.node.start();
this.#updatePosts();
await this.#updatePosts();
r();
});
}
@@ -53,14 +46,14 @@ export class NodeStore {
return this.#wait;
}
#updatePosts = () => {
requestAnimationFrame(async () => {
const posts = await this.node.db.db.getPosts();
console.log('updating posts: ', posts);
this.$globalPosts.$ = posts.map((p) => {
#updatePosts = async () => {
const posts = await this.node.db.db.getPosts();
console.log(`updating ${posts.length} posts...`);
this.$globalPosts.$ = posts.map((p) => {
if (this.$posts.get(p.hash).$?.hex !== p.hex) {
this.$posts.set(p.hash, p);
return p.hash;
});
}
return p.hash;
});
};