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 profile iamge

Browse Source
This commit is contained in:
tsukino
2023-12-24 03:58:06 -08:00
parent 7f9e615097
commit 6357c588f1
6 changed files with 118 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,18 +11,32 @@ interface CustomElementConstructor {
interface ICustomElement extends HTMLElement {
state: any;
render(): void;
render: () => VTree;
onmount(): Promise<void>;
onupdate(): Promise<void>;
onupdated(): Promise<void>;
}
export class CustomElement extends HTMLElement implements ICustomElement {
css: string;
html: string;
#tree?: VTree;
#approot?: any;
onmount(): Promise<void> {
return Promise.resolve();
}
onupdate(): Promise<void> {
return Promise.resolve();
}
onupdated(): Promise<void> {
return Promise.resolve();
}
render(): VTree {
return hpx``;
return hx`<div></div>`;
}
get state() {
@@ -35,24 +49,34 @@ export class CustomElement extends HTMLElement implements ICustomElement {
);
}
connectedCallback() {
async connectedCallback() {
this.attachShadow({ mode: 'open' });
await this.onmount();
this.patch();
}
patch = () => {
if (!this.#approot) {
this.#tree = this.render();
this.#approot = createElement(this.#tree as VText);
this.shadowRoot?.appendChild(html(`<style>${this.css}</style>`));
this.shadowRoot?.appendChild(this.#approot);
} else if (this.#tree) {
const newTree = this.render();
const patches = diff(this.#tree!, newTree);
this.#approot = patch(this.#approot, patches);
this.#tree = newTree;
}
};
async attributeChangedCallback() {
this.patch();
}
patch = () =>
requestAnimationFrame(async () => {
await this.onupdate();
if (!this.#approot) {
this.#tree = this.render();
this.#approot = createElement(this.#tree as VText);
this.shadowRoot?.appendChild(html(`<style>${this.css}</style>`));
this.shadowRoot?.appendChild(this.#approot);
} else if (this.#tree) {
const newTree = this.render();
const patches = diff(this.#tree!, newTree);
this.#approot = patch(this.#approot, patches);
this.#tree = newTree;
}
this.onupdated();
});
}
export function html(htmlString: string) {
@@ -69,6 +93,51 @@ export function register(name: string, el: CustomElementConstructor) {
window.customElements.define(name, el);
}
type VNodeProps = {
tagName: string;
classList: string[];
id?: string;
attributes: Map<string, string>;
children?: VNode[];
};
export class VNode {
#id?: string;
#tagName: string;
#classList: string[] = [];
#attributes = new Map<string, string>();
#children: VNode[] = [];
constructor(options: VNodeProps) {
this.#tagName = options.tagName;
this.#classList = options.classList;
this.#id = options.id;
this.#attributes = options.attributes;
this.#children = options.children || [];
}
}
export const $ = (name: string) => {
const tagName = name.match(/^[^.|#|\[]*/g);
const classList = name.match(/(?<=[.*])([^.#\[\]]*)+?(?=[(#.\s\[)*])?/g);
const id = name.match(/(?<=[#*])([^.#\[\]]*)+?(?=[(#.\s\[)*])?/g);
const attributes = name.match(/(?<=[\[])([^.#\[\]]*)+?(?=[\]*])?/g) || [];
const vnode = new VNode({
tagName: tagName![0],
classList: classList || [],
id: id ? id[0] : undefined,
attributes: new Map(
attributes.map((attr) => {
const [key, value] = attr.split('=');
return [key, value || ''];
}),
),
});
return vnode;
};
export const Q = (root: ShadowRoot | Element | null) => {
if (!root) return root;

4
packages/web/src/components/Post/index.ts
View File

@@ -24,9 +24,11 @@ export default class Post extends CustomElement {
render() {
const { creator, name, handle, createat, content } = this.state;
if (!creator) return hx`<div></div>`;
return hx`
<div class="post">
<profile-image address="${creator}"></profile-image>
${hx`<profile-image id="${creator}" creator="${creator}"></profile-image>`}
<div class="top">
<div class="creator">${name}</div>
<div class="userId">${handle}</div>

35
packages/web/src/components/ProfileImage/index.ts
View File

@@ -7,41 +7,34 @@ import { minidenticon } from 'minidenticons';
export default class ProfileImage extends CustomElement {
static get observedAttributes() {
return ['address'];
return ['creator', 'src'];
}
css = css.toString();
render() {
const { src } = this.state;
return hx`
<img src="${src}" />
`;
}
async connectedCallback() {
super.connectedCallback();
this.setAttribute('src', await this.getSrc());
}
async getSrc() {
const { address } = this.state;
async onmount() {
const { id: creator } = this.state;
const store = getStore();
const node: NodeStore = store.get('node');
const user = await node.node.db.db.getProfile(address || '');
if (user.profileImageUrl) {
return user.profileImageUrl;
} else if (address) {
return encodeURIComponent(minidenticon(address, 50, 50));
} else {
return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABNZJREFUeF7tnFmW6jAMRJP975Ut0CcNnc5gR6XRcmL+HtFQqitDMzzm1+v1nsbN1oF5nqa3zNZ5ALFlUao2T9OE4ukXCGdKynNOLU4s0bdUigZSE2AojPIr+3VLK1YglkWzG5hZH31CMquvaku4XqAkNZD1DwqwoZ4v2AgM0+vRVDiLVANZ5HQxO+ib7yx0dRMg66x0P9AWfljD1nyxFxm2QEylIcW0GLT5lEZ+fRAIvzAl9enXq68moFfqFA/qemL3s0m/PCHZxCbmei2NYST4kAVawWgMVgTCbJqqq5AF/gOuQm2BCN67ARz3DyHNpCUYlPhtEgqEHksasdix3ND3VKV9/PPcgGAbU48qXcFq+pvm2cENCCb6CRZjTvxFNQbCE9t1NLh7sUBAUWmN3+j3GsUByDzN0/vw9OolPyE65qjHcDUQZn9jB9t2Nx6mzz97QxGENvvgLZwQZxVG5Y3KeCy5qmbxIQsaFgpSacub7DX7fJtX6nnZkcoOcNVP6mTDEcByYABh2aULRh7p3IBcN0ekgcMblgI74mECbW5ASNWnV0R+b9ZyfeHGk7MyAphAFFIVqYx5DEIpodR13feimEAM5tWWAPwgW1jUIJvIAkRA/OfRdEBz0biNsVTK9joVW+H1BSLMli0BkQVoAUJcpAUUFZ2QAF2PbWEE5MYrG7waRkBiVMPY4UCmbq+626cp6JuLTN2PCC/CqRNDWXZ1Qp4A+jZA0A1EoFrWQvptYxoAaTku1574+HggCXhIJEhyJP+1LB7IcekEkwpS4lcd6bgb5PMPGsiaJLChkCKogox2mxgayG1GLQ9iuiCaYsvn6e/xmXrQuuGkHnJCcEP4hGxr3wAIaEjhCZRvvjIDkEoAOVQACtKSTYrQbTqNAE/IMDGKLwjERk7XWIPEhwKxwdp3FYrrAJKM7wYIxa6knJfDi07m1EmOzzTjhDTgfvWjpWcgbPDsBDsLGra2G2JfiTwhN5zZy0tR3aO/JJC1yyCj+44oiAsHon9OByUlCGu4fDogCby7k4RlD3yBWGyaRY2OqPkCuTCi7PNy73LL96s+UXvRDEgfS2uFAa/jCAQX0QccnUrUDR4QtKpOO/uBzq1dg8JlIFfGN4fi6ZLzcED5IpDLPKCoh2WN2tZHcRJ08ZDF6ciJ9cDlVPM7VuR0vOcQzdyRU2l0Vt+RiBkgDoi1Sc3qlcBs76uAA3kOIJ5gQQhbCQOIJxBB7fZABFskmLObFCEQwkVjk5FySMyJiijJl+0eSEKBvuPnqy48IT6DxO9DfEfKuVRAKLF3vv63Gu5A8u1gbqyOQAYKCfpfICfr1jsiTV0PbcpPDCXmSnLMT0gkQsnAa06EUEEPcyAqk0ay37dOBMvRLQ75rOfMfCdEPp3rh0n/sgoCDTXnA9LtOQGFb776Xnwjv/R7WYbAaZVOzZzK0vNUIlA96hOCNhJPok1ML3A/oBqI1q+m+QlhNQWS0A96P5xFxwNxHoh29CpCKa6ajtVdotyBYFJ0Nt4pmwckm7vZ9BQ3gyeSB6TBKvLGaSDQuGV6IMbzfsq5U5Y3UAGRt3Wx+VzUU6CoNp2kAhJkq28b2iNGf30xBZBK8+/d+6t6oQxXug5VADnObW+6fcX8rPhAnuhSIEc+kEBxT2z1A58ObwvXw1MMAAAAAElFTkSuQmCC';
}
}
const user = await node.node.db.db.getProfile(creator || '');
attributeChangedCallback(key: string, oldVal: string, newVal: string) {
console.log(key);
this.patch();
// this.setAttribute('src', await this.getSrc());
let url =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABNZJREFUeF7tnFmW6jAMRJP975Ut0CcNnc5gR6XRcmL+HtFQqitDMzzm1+v1nsbN1oF5nqa3zNZ5ALFlUao2T9OE4ukXCGdKynNOLU4s0bdUigZSE2AojPIr+3VLK1YglkWzG5hZH31CMquvaku4XqAkNZD1DwqwoZ4v2AgM0+vRVDiLVANZ5HQxO+ib7yx0dRMg66x0P9AWfljD1nyxFxm2QEylIcW0GLT5lEZ+fRAIvzAl9enXq68moFfqFA/qemL3s0m/PCHZxCbmei2NYST4kAVawWgMVgTCbJqqq5AF/gOuQm2BCN67ARz3DyHNpCUYlPhtEgqEHksasdix3ND3VKV9/PPcgGAbU48qXcFq+pvm2cENCCb6CRZjTvxFNQbCE9t1NLh7sUBAUWmN3+j3GsUByDzN0/vw9OolPyE65qjHcDUQZn9jB9t2Nx6mzz97QxGENvvgLZwQZxVG5Y3KeCy5qmbxIQsaFgpSacub7DX7fJtX6nnZkcoOcNVP6mTDEcByYABh2aULRh7p3IBcN0ekgcMblgI74mECbW5ASNWnV0R+b9ZyfeHGk7MyAphAFFIVqYx5DEIpodR13feimEAM5tWWAPwgW1jUIJvIAkRA/OfRdEBz0biNsVTK9joVW+H1BSLMli0BkQVoAUJcpAUUFZ2QAF2PbWEE5MYrG7waRkBiVMPY4UCmbq+626cp6JuLTN2PCC/CqRNDWXZ1Qp4A+jZA0A1EoFrWQvptYxoAaTku1574+HggCXhIJEhyJP+1LB7IcekEkwpS4lcd6bgb5PMPGsiaJLChkCKogox2mxgayG1GLQ9iuiCaYsvn6e/xmXrQuuGkHnJCcEP4hGxr3wAIaEjhCZRvvjIDkEoAOVQACtKSTYrQbTqNAE/IMDGKLwjERk7XWIPEhwKxwdp3FYrrAJKM7wYIxa6knJfDi07m1EmOzzTjhDTgfvWjpWcgbPDsBDsLGra2G2JfiTwhN5zZy0tR3aO/JJC1yyCj+44oiAsHon9OByUlCGu4fDogCby7k4RlD3yBWGyaRY2OqPkCuTCi7PNy73LL96s+UXvRDEgfS2uFAa/jCAQX0QccnUrUDR4QtKpOO/uBzq1dg8JlIFfGN4fi6ZLzcED5IpDLPKCoh2WN2tZHcRJ08ZDF6ciJ9cDlVPM7VuR0vOcQzdyRU2l0Vt+RiBkgDoi1Sc3qlcBs76uAA3kOIJ5gQQhbCQOIJxBB7fZABFskmLObFCEQwkVjk5FySMyJiijJl+0eSEKBvuPnqy48IT6DxO9DfEfKuVRAKLF3vv63Gu5A8u1gbqyOQAYKCfpfICfr1jsiTV0PbcpPDCXmSnLMT0gkQsnAa06EUEEPcyAqk0ay37dOBMvRLQ75rOfMfCdEPp3rh0n/sgoCDTXnA9LtOQGFb776Xnwjv/R7WYbAaZVOzZzK0vNUIlA96hOCNhJPok1ML3A/oBqI1q+m+QlhNQWS0A96P5xFxwNxHoh29CpCKa6ajtVdotyBYFJ0Nt4pmwckm7vZ9BQ3gyeSB6TBKvLGaSDQuGV6IMbzfsq5U5Y3UAGRt3Wx+VzUU6CoNp2kAhJkq28b2iNGf30xBZBK8+/d+6t6oQxXug5VADnObW+6fcX8rPhAnuhSIEc+kEBxT2z1A58ObwvXw1MMAAAAAElFTkSuQmCC';
if (user.profileImageUrl) {
url = user.profileImageUrl;
} else if (creator) {
url = 'data:image/svg+xml;utf8,' + minidenticon(creator, 50, 50);
}
this.setAttribute('src', url);
}
}

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

@@ -2,6 +2,7 @@ import { MessageType, Post, PostSubtype, ProofType } from '@autismjs/message';
import { ECDSA } from '../../crypto/src';
import { getStore } from './state';
import App from './pages/App';
import { $ } from '../lib/ui.ts';
const ecdsa = new ECDSA();
console.log('ecdsa', ecdsa);
@@ -18,6 +19,7 @@ console.log('post', p.json);
(async () => {
const state = getStore();
console.log($('button#submit-btn[type=text].button.button-primary'));
console.log('state', state);
document.body.append(new App());

14
packages/web/src/pages/App/index.ts
View File

@@ -3,13 +3,19 @@ import { getStore } from '../../state';
import { default as NodeState } from '../../state/node.ts';
import '../../components/Post';
import css from './index.scss';
import * as console from 'console';
export default class App extends CustomElement {
css = css.toString();
async connectedCallback() {
super.connectedCallback();
this.subscribeToPosts();
async onupdate(): Promise<void> {
await super.onupdate();
console.time('app-container');
}
async onupdated(): Promise<void> {
await super.onupdated();
console.timeEnd('app-container');
}
render() {
@@ -32,7 +38,7 @@ export default class App extends CustomElement {
`;
}
subscribeToPosts() {
async onmount() {
const state = getStore();
const node = state.get<NodeState>('node');
node.$globalPosts.subscribe(this.patch);

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

@@ -18,7 +18,9 @@ export default class Node extends Store {
const node = new Autism({
bootstrap: [
'/ip4/127.0.0.1/tcp/57575/ws/p2p/12D3KooWSoKnYV5idyrrJt3T6WM4eB6wcu58zUuy5bj7cEZNLwdm',
'/ip4/127.0.0.1/tcp/64029/ws/p2p/12D3KooWG1yjigfXNQtfkLC8TbzoSreeDx8User1Q5wo49MUK1NB',
'/ip4/192.168.86.30/tcp/64029/ws/p2p/12D3KooWG1yjigfXNQtfkLC8TbzoSreeDx8User1Q5wo49MUK1NB',
'/ip4/192.168.86.24/tcp/64029/ws/p2p/12D3KooWG1yjigfXNQtfkLC8TbzoSreeDx8User1Q5wo49MUK1NB'
],
});
this.node = node;