~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
0c76744d — Peter John

2 years ago 
implement Head
Files changed (2) hide show
  1. packages/parotta/cli.js +20 -5
  2. packages/parotta/router.js +19 -15
packages/parotta/cli.js CHANGED
@@ -77,12 +77,24 @@ const serverRouter = createRouter({
77
77
  routes: serverSideRoutes,
78
78
  });
79
79
 
80
+ const clientRoutes = await clientSideRoutes.reduce((acc, r) => {
81
+ const Head = import(`${process.cwd()}/routes${r === "" ? "" : r}/page.jsx`);
82
+ const Page = import(`${process.cwd()}/routes${r === "" ? "" : r}/page.jsx`);
83
+ acc[r === "" ? "/" : r] = {
84
+ Head,
85
+ Page,
86
+ }
87
+ return acc
88
+ }, {});
89
+
90
+ for (const k of Object.keys(clientRoutes)) {
91
+ clientRoutes[k].Head = (await clientRoutes[k].Head).Head;
92
+ clientRoutes[k].Page = (await clientRoutes[k].Page).default;
93
+ }
94
+
80
95
  const clientRouter = createRouter({
81
96
  strictTrailingSlash: true,
82
- routes: clientSideRoutes.reduce((acc, r) => {
97
+ routes: clientRoutes,
83
- acc[r === "" ? "/" : r] = React.lazy(() => import(`${process.cwd()}/routes${r === "" ? "" : r}/page.jsx`));
84
- return acc
85
- }, {})
86
98
  });
87
99
 
88
100
  const renderApi = async (filePath, req) => {
@@ -176,7 +188,10 @@ const history = createBrowserHistory();
176
188
  const radixRouter = createRouter({
177
189
  strictTrailingSlash: true,
178
190
  routes: {
191
+ ${clientSideRoutes.map((r) => `"${r === "" ? "/" : r}": {
179
- ${clientSideRoutes.map((r) => `"${r === "" ? "/" : r}": React.lazy(() => import("/routes${r === "" ? "" : r}/page.jsx"))`).join(',\n ')}
192
+ Head: React.lazy(() => import("/routes${r === "" ? "" : r}/page.jsx").then((js) => ({ default: js.Head }))),
193
+ Page: React.lazy(() => import("/routes${r === "" ? "" : r}/page.jsx")),
194
+ }`).join(',\n ')}
180
195
  },
181
196
  });
182
197
 
packages/parotta/router.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { createContext, useContext, useState, useEffect, useMemo } from "react";
1
+ import React, { createContext, useContext, useState, useEffect, useMemo, useSyncExternalStore } from "react";
2
2
  import nProgress from "nprogress";
3
3
 
4
4
  export const isClient = () => typeof window !== 'undefined';
@@ -70,11 +70,15 @@ const getMatch = (radixRouter, pathname) => {
70
70
  const getCssUrl = (pathname) => `/routes${pathname === "/" ? "/page.css" : pathname + "/page.css"}`;
71
71
 
72
72
  export const Header = ({ history, radixRouter }) => {
73
+ // const pathname = useSyncExternalStore(history.listen, (v) => v ? v.location.pathname : history.location.pathname, () => history.location.pathname);
74
+ // const match = getMatch(radixRouter, pathname);
75
+ const [match, setMatch] = useState(() => getMatch(radixRouter, history.location.pathname));
73
- // useEffect(() => {
76
+ useEffect(() => {
74
- // return history.listen(({ location }) => {
77
+ return history.listen(({ location }) => {
75
- // document.getElementById("pageCss").href = getCssUrl(location.pathname)
78
+ // document.getElementById("pageCss").href = getCssUrl(location.pathname);
76
- // });
79
+ setMatch(getMatch(radixRouter, location.pathname));
80
+ });
77
- // }, []);
81
+ }, []);
78
82
  return React.createElement(React.Suspense, {
79
83
  children: [
80
84
  React.createElement("link", {
@@ -84,13 +88,16 @@ export const Header = ({ history, radixRouter }) => {
84
88
  React.createElement("link", {
85
89
  id: "pageCss",
86
90
  rel: "stylesheet",
91
+ href: "/routes/page.css",
87
- href: getCssUrl(history.location.pathname)
92
+ // getCssUrl(history.location.pathname)
88
93
  }),
89
94
  React.createElement("link", {
90
95
  rel: "stylesheet",
91
96
  href: "/routes/about/page.css",
92
97
  }),
98
+ React.createElement(React.Suspense, {
93
- React.createElement(React.lazy(() => import(`${basePath()}/routes/page.jsx`).then((js) => ({ default: js.Head }))), {}),
99
+ children: React.createElement(match.Head, {}),
100
+ }),
94
101
  ]
95
102
  });
96
103
  }
@@ -106,16 +113,13 @@ export const Header = ({ history, radixRouter }) => {
106
113
  // }
107
114
 
108
115
  export const Router = ({ App, history, radixRouter }) => {
109
- // const v = useSyncExternalStore(history.listen, (v) => v, () => history);
110
- // console.log('vvv', v);
111
116
  const [, startTransition] = React.useTransition();
112
- const [MatchedPage, setMatchedPage] = useState(() => getMatch(radixRouter, history.location.pathname));
117
+ const [match, setMatch] = useState(() => getMatch(radixRouter, history.location.pathname));
113
118
  useEffect(() => {
114
119
  return history.listen(({ location }) => {
115
120
  nProgress.start();
116
121
  startTransition(() => {
117
- // document.getElementById("pageCss").href = getCssUrl(location.pathname);
118
- setMatchedPage(getMatch(radixRouter, location.pathname));
122
+ setMatch(getMatch(radixRouter, location.pathname));
119
123
  })
120
124
  });
121
125
  }, [])
@@ -123,10 +127,10 @@ export const Router = ({ App, history, radixRouter }) => {
123
127
  return React.createElement(RouterContext.Provider, {
124
128
  value: {
125
129
  history: history,
126
- params: MatchedPage.params || {},
130
+ params: match.params || {},
127
131
  },
128
132
  children: React.createElement(App, {
129
- children: React.createElement(MatchedPage, {}),
133
+ children: React.createElement(match.Page, {}),
130
134
  }),
131
135
  });
132
136
  }