add decorators

packages/web/src/components/Post/index.ts

@@ -1,7 +1,7 @@
 import { CustomElement, hx, register } from '../../../lib/ui.ts';
 import { getStore } from '../../state';
 import { default as NodeStore } from '../../state/node.ts';
-import { fromNow, userId, userName } from '../../utils/misc.ts';
+import { debugClass, fromNow, userId, userName } from '../../utils/misc.ts';
 import CommentIcon from '../../../static/icons/comment.svg';
 import RepostIcon from '../../../static/icons/repost.svg';
 import LikeIcon from '../../../static/icons/like.svg';
@@ -9,6 +9,7 @@ import '../ProfileImage';
 import '../Button';
 import css from './index.scss';
 
+@debugClass
 export default class Post extends CustomElement {
   static get observedAttributes() {
     return ['hash', 'creator', 'createat', 'content', 'name', 'handle'];
@@ -16,11 +17,6 @@ export default class Post extends CustomElement {
 
   css = css.toString();
 
-  async connectedCallback() {
-    super.connectedCallback();
-    this.subscribe();
-  }
-
   render() {
     const { creator, name, handle, createat, content } = this.state;
 
@@ -33,7 +29,7 @@ export default class Post extends CustomElement {
           <div class="creator">${name}</div>
           <div class="userId">${handle}</div>
           <div class="createAt-top">
-            <span>&#183;</span>
+            <span>·</span>
             <span>${createat}</span>
           </div>
         </div>
@@ -56,7 +52,7 @@ export default class Post extends CustomElement {
     `;
   }
 
-  async subscribe() {
+  async onmount() {
     const store = getStore();
     const node = store.get<NodeStore>('node');
     const hash = this.state.id;
@@ -79,10 +75,6 @@ export default class Post extends CustomElement {
       this.setAttribute('handle', handle || '');
     });
   }
-
-  async attributeChangedCallback() {
-    this.patch();
-  }
 }
 
 register('post-card', Post);

packages/web/src/pages/App/index.ts

@@ -3,21 +3,10 @@ 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 onupdate(): Promise<void> {
-    await super.onupdate();
-    console.time('app-container');
-  }
-
-  async onupdated(): Promise<void> {
-    await super.onupdated();
-    console.timeEnd('app-container');
-  }
-
   render() {
     const state = getStore();
     const node = state.get<NodeState>('node');

packages/web/src/utils/misc.ts

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import console from 'console';
 dayjs.extend(relativeTime);
 
 export function userId(pubkey?: string) {
@@ -21,3 +22,35 @@ export function fromNow(date?: Date, withoutSuffix = true) {
   if (!date) return null;
   return dayjs(date).fromNow(withoutSuffix);
 }
+
+export function throttle(delay: number) {
+  let lastExecution = 0;
+  return function (target: any, key: string, descriptor: PropertyDescriptor) {
+    const originalMethod = descriptor.value;
+    descriptor.value = async function (...args: any[]) {
+      const now = Date.now();
+      if (now - lastExecution >= delay) {
+        lastExecution = now;
+        return originalMethod.apply(this, args);
+      }
+
+      // console.log(`Method ${key} throttled.`);
+    };
+  };
+}
+
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function debugClass(ctr: any, ctx: ClassDecoratorContext) {
+  const oldonupdate = ctr.prototype.onupdate;
+  ctr.prototype.onupdate = async (): Promise<void> => {
+    await oldonupdate();
+    console.time(ctx.name);
+  };
+
+  const oldonupdated = ctr.prototype.onupdated;
+  ctr.prototype.onupdated = async (): Promise<void> => {
+    await oldonupdated();
+    console.timeEnd(ctx.name);
+  };
+}