~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.
1d30c635
—
Peter John 4 years ago
add request dispatcher
- example/elements/app-counter.js +12 -0
- index.d.ts +5 -2
- index.js +18 -2
example/elements/app-counter.js
CHANGED
|
@@ -5,10 +5,22 @@ const Counter = ({ name, meta }) => {
|
|
|
5
5
|
const { count, actions } = useReducer({
|
|
6
6
|
initial: {
|
|
7
7
|
count: 0,
|
|
8
|
+
data: null,
|
|
9
|
+
err: null,
|
|
8
10
|
},
|
|
9
11
|
reducer: {
|
|
10
12
|
increment: (state) => ({ ...state, count: state.count + 1 }),
|
|
11
13
|
decrement: (state) => ({ ...state, count: state.count - 1 }),
|
|
14
|
+
setData: (state, data) => ({ ...state, data }),
|
|
15
|
+
setErr: (state, err) => ({ ...state, err }),
|
|
16
|
+
fetchData: (state, id) => async () => {
|
|
17
|
+
try {
|
|
18
|
+
const res = await fetch(`/api/posts/${id}`);
|
|
19
|
+
actions.setData(res.json());
|
|
20
|
+
} catch (err) {
|
|
21
|
+
actions.setErr(res.json());
|
|
22
|
+
}
|
|
23
|
+
},
|
|
12
24
|
},
|
|
13
25
|
});
|
|
14
26
|
const increment = () => {
|
index.d.ts
CHANGED
|
@@ -36,9 +36,12 @@ export type Reducer<P, Q> = {
|
|
|
36
36
|
subscribe: (fn: (v: P) => void) => void;
|
|
37
37
|
} & { actions: { [K in keyof Q]: (v: any) => void}}
|
|
38
38
|
|
|
39
|
+
export type Thunk = () => void | Promise<void>;
|
|
39
|
-
export
|
|
40
|
+
export type ReducerActions<P> = {[k: string]: (state: P, v: any) => P | Thunk };
|
|
40
41
|
|
|
42
|
+
export function createReducer<P, Q extends ReducerActions<P>>(props: { initial: P, reducer: Q }): Reducer<P, Q>;
|
|
43
|
+
|
|
41
|
-
export function useReducer<P, Q extends
|
|
44
|
+
export function useReducer<P, Q extends ReducerActions<P>>(props: Reducer<P, Q> | { initial: P, reducer: Q }) : P & Reducer<P, Q>;
|
|
42
45
|
|
|
43
46
|
export function createElement(meta: any, renderFn: any): any
|
|
44
47
|
export type Handler = (props: any) => string;
|
index.js
CHANGED
|
@@ -9,7 +9,7 @@ const tagRE = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g;
|
|
|
9
9
|
const whitespaceRE = /^\s*$/;
|
|
10
10
|
const attrRE = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
|
|
11
11
|
const voidElements = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
|
|
12
|
-
const STRIP_COMMENTS = /(
|
|
12
|
+
const STRIP_COMMENTS = /(\/\/.*$)|(\/\*[\s\S]*?\*\/)|(\s*=[^,\)]*(('(?:\\'|[^'\r\n])*')|("(?:\\"|[^"\r\n])*"))|(\s*=[^,\)]*))/gm;
|
|
13
13
|
const ARGUMENT_NAMES = /([^\s,]+)/g;
|
|
14
14
|
|
|
15
15
|
const parseFuncParams = (func) => {
|
|
@@ -941,7 +941,13 @@ export const createReducer = ({ initial, reducer }) => {
|
|
|
941
941
|
const actions = Object.keys(reducer).reduce((acc, key) => {
|
|
942
942
|
const reduce = reducer[key];
|
|
943
943
|
acc[key] = (v) => {
|
|
944
|
-
|
|
944
|
+
const res = reduce(value, v);
|
|
945
|
+
if (typeof res === 'object') {
|
|
946
|
+
value = res;
|
|
947
|
+
}
|
|
948
|
+
if (typeof res === 'function') {
|
|
949
|
+
res();
|
|
950
|
+
}
|
|
945
951
|
subs.forEach((sub) => {
|
|
946
952
|
sub(value);
|
|
947
953
|
});
|
|
@@ -983,6 +989,16 @@ export const useReducer = (reducer) => {
|
|
|
983
989
|
const state = comp.hooks.data[index].getValue();
|
|
984
990
|
return { ...state, actions: comp.hooks.data[index].actions };
|
|
985
991
|
};
|
|
992
|
+
export const useEffect = (fn, deps) => {
|
|
993
|
+
const comp = currentComponent.get();
|
|
994
|
+
const index = comp.hooks.index++;
|
|
995
|
+
if (!comp.hooks.data[index]) {
|
|
996
|
+
comp.hooks.data[index] = {
|
|
997
|
+
cb: fn,
|
|
998
|
+
deps,
|
|
999
|
+
};
|
|
1000
|
+
}
|
|
1001
|
+
};
|
|
986
1002
|
|
|
987
1003
|
const registry = {};
|
|
988
1004
|
export const getElement = (name) => registry[name];
|