~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
8fe9495d — Peter John

2 years ago 
Support components and containers
Files changed (6) hide show
  1. packages/example/components/Counter/Counter.jsx +16 -0
  2. packages/example/components/{Todo.jsx → Todo/Todo.jsx} +0 -0
  3. packages/example/containers/{TodoList.jsx → TodoList/TodoList.jsx} +1 -1
  4. packages/example/routes/page.jsx +3 -10
  5. packages/muffinjs/index.js +17 -10
  6. readme.md +0 -0
packages/example/components/Counter/Counter.jsx ADDED
@@ -0,0 +1,16 @@
1
+ import { useState } from "react";
2
+
3
+ const Counter = () => {
4
+ const [count, setCount] = useState(5);
5
+ return (
6
+ <div>
7
+ <button onClick={() => setCount(count - 1)}>-</button>
8
+ <span className="count">
9
+ {count}
10
+ </span>
11
+ <button onClick={() => setCount(count + 1)}>+</button>
12
+ </div>
13
+ )
14
+ }
15
+
16
+ export default Counter;
packages/example/components/{Todo.jsx → Todo/Todo.jsx} RENAMED
File without changes
packages/example/containers/{TodoList.jsx → TodoList/TodoList.jsx} RENAMED
@@ -1,4 +1,4 @@
1
- import Todo from "@/example/components/Todo.jsx";
1
+ import Todo from "@/components/Todo/Todo";
2
2
 
3
3
  const todos = [
4
4
  { id: '1', text: "123" },
packages/example/routes/page.jsx CHANGED
@@ -1,24 +1,17 @@
1
- import { useState } from "react";
1
+ import Counter from "@/components/Counter/Counter";
2
2
  // import { useRouter } from "muffinjs/router.js";
3
3
  import "./page.css";
4
4
 
5
5
  const HomePage = () => {
6
6
  // const router = useRouter();
7
- const [count, setCount] = useState(5);
8
7
  return (
9
8
  <div className="home-page">
10
9
  <div>
11
10
  <h1>Home Page</h1>
12
11
  {/* <p>
13
- Hello from server path 123: {router.pathname}
12
+ Path: {router.pathname}
14
13
  </p> */}
15
- <div>
16
- <button onClick={() => setCount(count - 1)}>-</button>
17
- <span className="count">
18
- {count}
19
- </span>
20
- <button onClick={() => setCount(count + 1)}>+</button>
21
- </div>
14
+ <Counter />
22
15
  </div>
23
16
  </div>
24
17
  )
packages/muffinjs/index.js CHANGED
@@ -53,15 +53,20 @@ const mapFiles = () => {
53
53
  return routes;
54
54
  }
55
55
 
56
+ const mapDeps = (dir) => {
57
+ return walkdir.sync(path.join(process.cwd(), dir))
58
+ .map((s) => s.replace(process.cwd(), ""))
59
+ .filter((s) => s.includes(".jsx"))
60
+ .reduce((acc, s) => {
61
+ acc['@' + s.replace(".jsx", "")] = s
62
+ return acc;
63
+ }, {});
64
+ }
65
+
56
66
  const radixRouter = createRouter({
57
67
  strictTrailingSlash: true,
58
68
  routes: mapFiles(),
59
69
  });
60
- console.log(radixRouter.lookup('/'));
61
- console.log(radixRouter.lookup('/about'));
62
- console.log(radixRouter.lookup('/todos'));
63
- console.log(radixRouter.lookup('/todos/123'));
64
- console.log(radixRouter.lookup('/robots.txt'));
65
70
 
66
71
  const renderApi = async (filePath, req) => {
67
72
  const routeImport = await import(route.filePath);
@@ -88,7 +93,9 @@ const renderPage = async (filePath, url, params) => {
88
93
  return acc;
89
94
  }, {})
90
95
  const Page = routeImport.default;
96
+ const components = mapDeps("components");
91
- console.log(filePath)
97
+ const containers = mapDeps("containers");
98
+ const parottaVersion = dependencies["parotta"];
92
99
  const stream = await renderToReadableStream(
93
100
  <html lang="en">
94
101
  <head>
@@ -101,9 +108,9 @@ const renderPage = async (filePath, url, params) => {
101
108
  "radix3": `https://esm.sh/radix3`,
102
109
  "react-dom/client": `https://esm.sh/react-dom@18.2.0/client${devTag}`,
103
110
  "react/jsx-dev-runtime": `https://esm.sh/react@18.2.0/jsx-dev-runtime${devTag}`,
104
- "muffinjs": "https://esm.sh/muffinjs",
111
+ "parotta/router": `https://esm.sh/parotta@${parottaVersion}`,
105
- "@/components/Todo.jsx": "/components/Todo.js",
112
+ ...components,
106
- "@/containers/TodoList.jsx": "/containers/TodoList.js"
113
+ ...containers,
107
114
  }
108
115
  }
109
116
  )
@@ -113,7 +120,7 @@ const renderPage = async (filePath, url, params) => {
113
120
  __html: `
114
121
  import React from 'react';
115
122
  import { hydrateRoot } from 'react-dom/client';
116
- // import { routerAtom } from "muffinjs/router.js";
123
+ // import { routerAtom } from "muffinjs/router";
117
124
  import Page from "${filePath}";
118
125
 
119
126
  // routerAtom.update(() => (${JSON.stringify(initialRouteValue)}));
readme.md ADDED
File without changes