~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
1dfea1ff — Peter John

2 years ago 
fix page flicker
Files changed (4) hide show
  1. packages/parotta/bun.lockb +0 -0
  2. packages/parotta/cli.js +6 -5
  3. packages/parotta/package.json +1 -0
  4. packages/parotta/router.js +34 -8
packages/parotta/bun.lockb CHANGED
Binary file
packages/parotta/cli.js CHANGED
@@ -110,7 +110,7 @@ const renderApi = async (filePath, req) => {
110
110
  }
111
111
  }
112
112
 
113
- const renderPage = async (filePath, url, params) => {
113
+ const renderPage = async (url) => {
114
114
  const packageJson = await import(path.join(process.cwd(), "package.json"));
115
115
  const config = packageJson.default.parotta || { hydrate: true };
116
116
  const devTag = !isProd ? "?dev" : "";
@@ -132,7 +132,7 @@ const renderPage = async (filePath, url, params) => {
132
132
  />
133
133
  </head>
134
134
  <body>
135
- <div id="root">
135
+ <div id="page">
136
136
  <Router
137
137
  App={React.lazy(() => import(`${process.cwd()}/routes/app.jsx`))}
138
138
  history={history}
@@ -151,6 +151,7 @@ const renderPage = async (filePath, url, params) => {
151
151
  // TODO: need to remove this in prod
152
152
  "react/jsx-dev-runtime": `https://esm.sh/react@18.2.0${devTag}/jsx-dev-runtime`,
153
153
  "react-dom/client": `https://esm.sh/react-dom@18.2.0${devTag}/client`,
154
+ "nprogress": "https://esm.sh/nprogress@0.2.0",
154
155
  // "parotta/router": `https://esm.sh/parotta@${version}/router.js`,
155
156
  // "parotta/error": `https://esm.sh/parotta@${version}/error.js`,
156
157
  "parotta/router": `/parotta/router.js`,
@@ -184,7 +185,7 @@ hydrateRoot(document.head, React.createElement(Header, {
184
185
  radixRouter,
185
186
  }))
186
187
 
187
- hydrateRoot(document.getElementById("root"), React.createElement(Router, {
188
+ hydrateRoot(document.getElementById("page"), React.createElement(Router, {
188
189
  App: React.lazy(() => import("/routes/app.jsx")),
189
190
  history,
190
191
  radixRouter,
@@ -291,14 +292,14 @@ export default {
291
292
  return sendFile(path.join(process.cwd(), `/static${match.file}`));
292
293
  }
293
294
  if (match.page && req.headers.get("Accept")?.includes('text/html')) {
294
- return renderPage(`/routes${match.page}`, url, match.params);
295
+ return renderPage(url);
295
296
  }
296
297
  if (match.api) {
297
298
  return renderApi(`/routes${match.api}`, req);
298
299
  }
299
300
  }
300
301
  if (req.headers.get("Accept")?.includes('text/html')) {
301
- return renderPage(`/routes/404/page.jsx`, url, {});
302
+ return renderPage(url);
302
303
  }
303
304
  return new Response(`{"message": "not found"}`, {
304
305
  headers: { 'Content-Type': 'application/json' },
packages/parotta/package.json CHANGED
@@ -6,6 +6,7 @@
6
6
  "autoprefixer": "^10.4.14",
7
7
  "history": "^5.3.0",
8
8
  "mime-types": "2.1.35",
9
+ "nprogress": "^0.2.0",
9
10
  "postcss": "^8.4.21",
10
11
  "postcss-custom-media": "^9.1.2",
11
12
  "postcss-nesting": "^11.2.1",
packages/parotta/router.js CHANGED
@@ -1,4 +1,5 @@
1
- import React, { createContext, useContext, useState, useEffect, useMemo, useSyncExternalStore } from "react";
1
+ import React, { createContext, useContext, useState, useEffect, useMemo } from "react";
2
+ import nProgress from "nprogress";
2
3
 
3
4
  export const isClient = () => typeof window !== 'undefined';
4
5
  export const domain = () => isClient() ? window.origin : "http://0.0.0.0:3000";
@@ -69,28 +70,53 @@ const getMatch = (radixRouter, pathname) => {
69
70
  const getCssUrl = (pathname) => `/routes${pathname === "/" ? "/page.css" : pathname + "/page.css"}`;
70
71
 
71
72
  export const Header = ({ history, radixRouter }) => {
72
- useEffect(() => {
73
+ // useEffect(() => {
73
- return history.listen(({ location }) => {
74
+ // return history.listen(({ location }) => {
74
- // document.getElementById("pageCss").href = getCssUrl(location.pathname)
75
+ // document.getElementById("pageCss").href = getCssUrl(location.pathname)
75
- });
76
+ // });
76
- }, []);
77
+ // }, []);
77
78
  return React.createElement(React.Suspense, {
78
79
  children: [
80
+ React.createElement("link", {
81
+ rel: "stylesheet",
82
+ href: "https://unpkg.com/nprogress@0.2.0/nprogress.css",
83
+ }),
79
84
  React.createElement("link", {
80
85
  id: "pageCss",
81
86
  rel: "stylesheet",
82
87
  href: getCssUrl(history.location.pathname)
83
88
  }),
89
+ React.createElement("link", {
90
+ rel: "stylesheet",
91
+ href: "/routes/about/page.css",
92
+ }),
84
93
  React.createElement(React.lazy(() => import(`${basePath()}/routes/page.jsx`).then((js) => ({ default: js.Head }))), {}),
85
94
  ]
86
95
  });
87
96
  }
88
97
 
98
+ // export const PP = ({ children }) => {
99
+ // React.useEffect(() => {
100
+ // nProgress.done()
101
+ // return () => {
102
+ // nProgress.start();
103
+ // }
104
+ // }, []);
105
+ // return children
106
+ // }
107
+
89
108
  export const Router = ({ App, history, radixRouter }) => {
109
+ // const v = useSyncExternalStore(history.listen, (v) => v, () => history);
110
+ // console.log('vvv', v);
111
+ const [, startTransition] = React.useTransition();
90
112
  const [MatchedPage, setMatchedPage] = useState(() => getMatch(radixRouter, history.location.pathname));
91
113
  useEffect(() => {
92
114
  return history.listen(({ location }) => {
115
+ nProgress.start();
116
+ startTransition(() => {
117
+ // document.getElementById("pageCss").href = getCssUrl(location.pathname);
93
- setMatchedPage(getMatch(radixRouter, location.pathname));
118
+ setMatchedPage(getMatch(radixRouter, location.pathname));
119
+ })
94
120
  });
95
121
  }, [])
96
122
  console.log('Router');
@@ -132,7 +158,7 @@ export const Link = (props) => {
132
158
  if (props && props.onClick) {
133
159
  props.onClick(e);
134
160
  }
135
- router.push(props.href);
161
+ router.push(props.href)
136
162
  },
137
163
  })
138
164
  }