atoms-element

git clone https://pyrossh.dev/repos/atoms-element.git

A simple web component library for defining your custom elements. It works on both client and server.

649634e3 — Peter John

add effects

Files changed (4) hide show

example/elements/app-counter.js +15 -5
example/server.js +13 -0
index.d.ts +5 -5
index.js +47 -18

example/elements/app-counter.js CHANGED Viewed

@@ -1,28 +1,38 @@
+import { useEffect } from '../../index.js';
 import { createElement, html, useReducer } from '../../index.js';
 import { totalReducer } from '../store.js';
 const Counter = ({ name, meta }) => {
-  const { count, actions } = useReducer({
+  const { count, actions, effects } = useReducer({
     initial: {
       count: 0,
-      data: null,
+      data: undefined,
       err: null,
     },
     reducer: {
       increment: (state) => ({ ...state, count: state.count + 1 }),
       decrement: (state) => ({ ...state, count: state.count - 1 }),
+      setLoading: (state, v) => ({ ...state, loading: v }),
       setData: (state, data) => ({ ...state, data }),
       setErr: (state, err) => ({ ...state, err }),
+    },
+    effects: {
-      fetchData: (state, id) => async () => {
+      loadData: async (actions, id) => {
         try {
+          actions.setLoading(true);
           const res = await fetch(`/api/posts/${id}`);
-          actions.setData(res.json());
+          actions.setData(await res.json());
         } catch (err) {
-          actions.setErr(res.json());
+          actions.setErr(err);
+        } finally {
+          actions.setLoading(false);
         }
       },
     },
   });
+  useEffect(() => {
+    effects.loadData(name);
+  }, []);
   const increment = () => {
     actions.increment();
     totalReducer.actions.increment(count + 1);

example/server.js CHANGED Viewed

@@ -19,6 +19,19 @@ elements.forEach((el) => {
 http
   .createServer((req, res) => {
+    if (req.url.includes('/api/posts')) {
+      const parts = req.url.split('/');
+      const id = parts[parts.length - 1];
+      res.setHeader('Content-type', 'application/json');
+      res.end(
+        JSON.stringify({
+          id,
+          title: `post ${id}`,
+          description: ` description ${id}`,
+        }),
+      );
+      return;
+    }
     if (req.url === '/') {
       res.statusCode = 200;
       res.setHeader('Content-type', 'text/html');

index.d.ts CHANGED Viewed

@@ -31,17 +31,17 @@ export type Location = {
 }
-export type Reducer<P, Q> = {
+export type Reducer<P, Q, R> = {
   getValue: () => P;
   subscribe: (fn: (v: P) => void) => void;
-} & { actions: { [K in keyof Q]: (v: any) => void}}
+} & { actions: { [K in keyof Q]: (v: any) => void}} & { effects: { [K in keyof R]: (v: any) => void}}
-export type Thunk = () => void | Promise<void>;
-export type ReducerActions<P> = {[k: string]: (state: P, v: any) => P | Thunk };
+export type ReducerActions<P> = {[k: string]: (state: P, v: any) => P};
+export type EffectActions<P, Q extends ReducerActions<P>> = {[k: string]: (actions: { [K in keyof Q]: (v: any) => void}, v: any) => void};
 export function createReducer<P, Q extends ReducerActions<P>>(props: { initial: P, reducer: Q }): Reducer<P, Q>;
-export function useReducer<P, Q extends ReducerActions<P>>(props: Reducer<P, Q> | { initial: P, reducer: Q }) : P & Reducer<P, Q>;
+export function useReducer<P, Q extends ReducerActions<P>, R extends EffectActions<P, Q>>(props: Reducer<P, Q, R> | { initial: P, reducer: Q, effects: R }) : P & Reducer<P, Q, R>;
 export function createElement(meta: any, renderFn: any): any
 export type Handler = (props: any) => string;

index.js CHANGED Viewed

@@ -931,32 +931,40 @@ export const unsafeHTML = isBrowser
   : (value) => value;
 const fifo = (q) => q.shift();
+const filo = (q) => q.pop();
 const microtask = (flush) => () => queueMicrotask(flush);
+const task = (flush) => {
+  if (isBrowser) {
+    const ch = new window.MessageChannel();
+    ch.port1.onmessage = flush;
+    return () => ch.port2.postMessage(null);
+  } else {
+    return () => setImmediate(flush);
+  }
+};
+const depsChanged = (prev, next) => prev == null || next.some((f, i) => !Object.is(f, prev[i]));
 export const createAttrs = (attrs) => attrs;
-export const createReducer = ({ initial, reducer }) => {
+export const createReducer = ({ initial, reducer, effects }) => {
   let value = initial;
   const subs = new Set();
   const actions = Object.keys(reducer).reduce((acc, key) => {
     const reduce = reducer[key];
     acc[key] = (v) => {
-      const res = reduce(value, v);
+      value = reduce(value, v);
-      if (typeof res === 'object') {
-        value = res;
-      }
-      if (typeof res === 'function') {
-        res();
-      }
       subs.forEach((sub) => {
         sub(value);
       });
     };
     return acc;
   }, {});
+  const effectActions = Object.keys(effects || {}).reduce((acc, key) => {
+    const effect = effects[key];
+    acc[key] = (v) => effect(actions, v);
+    return acc;
+  }, {});
   return {
-    initial,
-    reducer,
     getValue: () => value,
     subscribe: (fn) => {
       subs.add(fn);
@@ -965,6 +973,7 @@ export const createReducer = ({ initial, reducer }) => {
       subs.remove(fn);
     },
     actions,
+    effects: effectActions,
   };
 };
@@ -987,16 +996,14 @@ export const useReducer = (reducer) => {
     comp.hooks.data[index].subscribe(() => comp.update());
   }
   const state = comp.hooks.data[index].getValue();
-  return { ...state, actions: comp.hooks.data[index].actions };
+  return { ...state, actions: comp.hooks.data[index].actions, effects: comp.hooks.data[index].effects };
 };
 export const useEffect = (fn, deps) => {
   const comp = currentComponent.get();
   const index = comp.hooks.index++;
+  if (!deps || depsChanged(comp.hooks.deps[index], deps)) {
-  if (!comp.hooks.data[index]) {
+    comp.hooks.deps[index] = deps || [];
-    comp.hooks.data[index] = {
+    comp.hooks.effects[index] = fn;
-      cb: fn,
-      deps,
-    };
   }
 };
@@ -1019,6 +1026,9 @@ export const createElement = (meta, renderFn) => {
       this.hooks = {
         index: 0,
         data: {},
+        deps: {},
+        effects: {},
+        cleanups: {},
       };
       // this.prevClassList = [];
       // this.shadow = this.attachShadow({ mode: 'open' });
@@ -1026,13 +1036,11 @@ export const createElement = (meta, renderFn) => {
     connectedCallback() {
       this._connected = true;
-      // this.state.subscribe(() => this.update());
       this.update();
     }
     disconnectedCallback() {
       this._connected = false;
-      // this.state.unsubscribe(() => this.update());
     }
     attributeChangedCallback(key, oldValue, newValue) {
@@ -1055,9 +1063,26 @@ export const createElement = (meta, renderFn) => {
         return;
       }
       this.render();
+      this.enqueueEffects();
       this._dirty = false;
     }
+    _flushEffects() {
+      const effects = this.hooks.effects;
+      const cleanups = this.hooks.cleanups;
+      const keys = Object.keys(effects);
+      for (const key of keys) {
+        if (effects[key]) {
+          cleanups[key] && cleanups[key]();
+          const cleanup = effects[key]();
+          if (cleanup) {
+            cleanups[key] = cleanup;
+          }
+          delete effects[key];
+        }
+      }
+    }
     batch(runner, pick, callback) {
       const q = [];
       const flush = () => {
@@ -1072,6 +1097,10 @@ export const createElement = (meta, renderFn) => {
       this.batch(microtask, fifo, () => this._performUpdate());
     }
+    enqueueEffects() {
+      this.batch(task, filo, () => this._flushEffects());
+    }
     render() {
       currentComponent.set(this);
       const template = renderFn({

~repos /atoms-element

git clone https://pyrossh.dev/repos/atoms-element.git

A simple web component library for defining your custom elements. It works on both client and server.