~repos /edge-city

#react#js#ssr

git clone https://pyrossh.dev/repos/edge-city.git

edge-city is a next level meta-framework for react that runs only on edge runtimes

Readme
|
Commits
|
Files
9ec5f5bf — Peter John

2 years ago 
remove global cache
Files changed (5) hide show
  1. components/Todo/Todo.jsx +3 -1
  2. containers/TodoList/TodoList.jsx +1 -3
  3. pages/todos/page.jsx +3 -3
  4. parotta/runtime.js +17 -14
  5. parotta/server.js +3 -1
components/Todo/Todo.jsx CHANGED
@@ -26,7 +26,9 @@ const Todo = ({ todo }) => {
26
26
  <input
27
27
  type="checkbox"
28
28
  checked={todo.completed}
29
+ onChange={(e) => {
29
- // onChange={(e) => updateMutation.mutate({ completed: e.target.checked })}
30
+ // updateMutation.mutate({ completed: e.target.checked })
31
+ }}
30
32
  />{" "}
31
33
  <span className={todo.completed ? "done" : undefined}>{todo.text}</span>{" "}
32
34
  </label>
containers/TodoList/TodoList.jsx CHANGED
@@ -9,9 +9,7 @@ const TodoList = () => {
9
9
  <div className="todo-list">
10
10
  <ul>
11
11
  {data.map((item) => (
12
- <li key={item.id}>
13
- <Todo todo={item} />
12
+ <Todo key={item.id} todo={item} />
14
- </li>
15
13
  ))}
16
14
  </ul>
17
15
  </div>
pages/todos/page.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { Suspense } from 'react';
2
2
  import TodoList from "@/containers/TodoList/TodoList";
3
3
  import "./page.css";
4
4
 
@@ -12,9 +12,9 @@ export const Body = () => {
12
12
  return (
13
13
  <div>
14
14
  <h1>Todos</h1>
15
- <ul>
15
+ <Suspense fallback={<p>Loading...</p>}>
16
16
  <TodoList />
17
- </ul>
17
+ </Suspense>
18
18
  </div>
19
19
  )
20
20
  }
parotta/runtime.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import React, {
2
2
  Fragment, Suspense, createElement, createContext,
3
- useContext, useState, useEffect, useMemo, useSyncExternalStore, useTransition
3
+ useContext, useState, useEffect, useSyncExternalStore, useTransition
4
4
  } from "react";
5
5
 
6
6
  export const domain = () => typeof window !== 'undefined' ? window.origin : "http://0.0.0.0:3000";
7
- export const globalCache = new Map();
8
7
 
9
8
  const changedArray = (a = [], b = []) =>
10
9
  a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))
@@ -21,16 +20,17 @@ export const rpc = (serviceName) => async (params = {}) => {
21
20
  return await res.json();
22
21
  }
23
22
 
23
+ export const RpcContext = createContext(undefined);
24
24
  export const useCache = () => {
25
25
  const [_, rerender] = useState(false);
26
- const cache = useMemo(() => globalCache, []);
26
+ const ctx = useContext(RpcContext);
27
- const get = (k) => cache.get(k)
27
+ const get = (k) => ctx[k]
28
28
  const set = (k, v) => {
29
- cache.set(k, v);
29
+ ctx[k] = v;
30
30
  rerender((c) => !c);
31
31
  }
32
32
  const invalidate = (regex) => {
33
- Array.from(cache.keys())
33
+ Object.keys(ctx)
34
34
  .filter((k) => regex.test(k))
35
35
  .forEach((k) => {
36
36
  fetchData(k).then((v) => set(k, v));
@@ -105,7 +105,7 @@ export const HeadApp = ({ history, radixRouter, importMap }) => {
105
105
  });
106
106
  }
107
107
 
108
- export const BodyApp = ({ nProgress, history, radixRouter }) => {
108
+ export const BodyApp = ({ nProgress, history, radixRouter, rpcCache }) => {
109
109
  const [isPending, startTransition] = useTransition();
110
110
  const [match, setMatch] = useState(() => getMatch(radixRouter, history.location.pathname));
111
111
  useEffect(() => {
@@ -138,13 +138,16 @@ export const BodyApp = ({ nProgress, history, radixRouter }) => {
138
138
  nProgress.done();
139
139
  }
140
140
  }, [isPending]);
141
- return createElement(RouterContext.Provider, {
141
+ return createElement(RpcContext.Provider, {
142
+ value: rpcCache,
143
+ children: createElement(RouterContext.Provider, {
142
- value: {
144
+ value: {
143
- history: history,
145
+ history: history,
144
- params: match.params || {},
146
+ params: match.params || {},
145
- },
147
+ },
146
- children: createElement(match.Layout, {
148
+ children: createElement(match.Layout, {
147
- children: createElement(match.Body, {}),
149
+ children: createElement(match.Body, {}),
150
+ }),
148
151
  }),
149
152
  });
150
153
  }
parotta/server.js CHANGED
@@ -113,6 +113,7 @@ const createClientRouter = async () => {
113
113
  nProgress,
114
114
  history,
115
115
  radixRouter,
116
+ rpcCache: {},
116
117
  }));`
117
118
  const router = createRouter({
118
119
  strictTrailingSlash: true,
@@ -188,6 +189,7 @@ const renderPage = async (url) => {
188
189
  const history = createMemoryHistory({
189
190
  initialEntries: [url.pathname + url.search],
190
191
  });
192
+ const nProgress = { start: () => { }, done: () => { } }
191
193
  const stream = await renderToReadableStream(
192
194
  <html lang="en">
193
195
  <head>
@@ -198,7 +200,7 @@ const renderPage = async (url) => {
198
200
  />
199
201
  </head>
200
202
  <body>
201
- <BodyApp nProgress={{ start: () => { }, done: () => { } }} history={history} radixRouter={clientRouter} />
203
+ <BodyApp nProgress={nProgress} history={history} radixRouter={clientRouter} rpcCache={{}} />
202
204
  {config.hydrate &&
203
205
  <>
204
206
  <script type="module" defer={true} dangerouslySetInnerHTML={{