~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
977144fa — Peter John

2 years ago 
new ideas
Files changed (7) hide show
  1. astroPlugin.js +9 -3
  2. bun.lockb +0 -0
  3. package.json +5 -2
  4. routes/index.astro +15 -12
  5. routes/index.css +11 -0
  6. routes/index.jsx +27 -0
  7. routes/page.jsx +24 -20
astroPlugin.js CHANGED
@@ -3,7 +3,9 @@ import path from "path";
3
3
  import { readFileSync, writeFileSync, mkdirSync, existsSync } from "fs";
4
4
  import postcss from "postcss"
5
5
  import autoprefixer from "autoprefixer";
6
+ import postcssCustomMedia from "postcss-custom-media";
7
+ // import postcssNormalize from 'postcss-normalize';
6
- import postcssNested from "postcss-nested";
8
+ import postcssNesting from "postcss-nesting";
7
9
 
8
10
  const transpiler = new Bun.Transpiler({
9
11
  loader: "jsx",
@@ -42,8 +44,12 @@ plugin({
42
44
  }
43
45
  writeFileSync(outputFile, code);
44
46
  if (css) {
45
- const result = postcss([autoprefixer, postcssNested])
47
+ const result = postcss([
48
+ autoprefixer(),
49
+ postcssCustomMedia(),
50
+ // postcssNormalize({ browsers: 'last 2 versions' }),
51
+ postcssNesting(),
46
- .process(css, { from: 'src/app.css', to: 'dest/app.css' });
52
+ ]).process(css, { from: 'src/app.css', to: 'dest/app.css' });
47
53
  writeFileSync(path.join(outputFolder, filename.replace("js", "css")), result.css);
48
54
  }
49
55
  const src = await import(outputFile);
bun.lockb CHANGED
Binary file
package.json CHANGED
@@ -12,10 +12,13 @@
12
12
  "dependencies": {
13
13
  "autoprefixer": "^10.4.14",
14
14
  "postcss": "^8.4.21",
15
+ "postcss-custom-media": "^9.1.2",
15
- "postcss-nested": "^6.0.1",
16
+ "postcss-nesting": "^11.2.1",
17
+ "postcss-normalize": "^10.0.1",
16
18
  "react": "18.2.0",
17
19
  "react-dom": "^18.2.0",
20
+ "react-streaming": "^0.3.5",
18
21
  "swr": "^2.1.0",
19
22
  "zod": "^3.21.0"
20
23
  }
21
- }
24
+ }
routes/index.astro CHANGED
@@ -1,31 +1,34 @@
1
- ---
2
1
  import { useState } from "react";
3
2
  import { useRouter } from "@/router.js";
4
3
  import TodoList from "@/containers/TodoList.astro";
5
4
 
6
5
  const router = useRouter();
7
6
  const [count, setCount] = useState(5);
8
- // const { data: todos, isLoading, isRevalidating } = usePromise("/todos");
9
- ---
10
7
 
11
- <div>
8
+ return (
12
9
  <div>
13
- <p>
14
- Hello from server path 123: {router.pathname}
15
- </p>
16
- <TodoList />
17
10
  <div>
11
+ <p>
18
- <button onClick={() => setCount(count - 1)}>-</button>
12
+ Hello from server path 123: {router.pathname}
13
+ </p>
14
+ <TodoList />
19
15
  <div>
16
+ <button onClick={() => setCount(count - 1)}>-</button>
17
+ <span>
20
- {count}
18
+ {count}
19
+ </span>
20
+ <button onClick={() => setCount(count + 1)}>+</button>
21
21
  </div>
22
- <button onClick={() => setCount(count + 1)}>+</button>
23
22
  </div>
24
23
  </div>
25
- </div>
24
+ )
26
25
 
27
26
  ---
28
27
  div {
29
28
  padding: 10px;
30
29
  background-color: yellow;
30
+
31
+ & span {
32
+ color: black;
33
+ }
31
34
  }
routes/index.css ADDED
@@ -0,0 +1,11 @@
1
+ div {
2
+ padding: 10px;
3
+ background - color: turquoise;
4
+
5
+ & span {
6
+ color: black;
7
+ padding: 40px;
8
+ font - size: 30px;
9
+ font - weight: 600;
10
+ }
11
+ }
routes/index.jsx ADDED
@@ -0,0 +1,27 @@
1
+ import { useState } from "react";
2
+ import { useRouter } from "@/router.js";
3
+ import TodoList from "@/containers/TodoList.astro";
4
+ import "index.css";
5
+
6
+ const { name, title } = props;
7
+ const router = useRouter();
8
+ const [count, setCount] = useState(5);
9
+ // const { data: todos, isLoading, isRevalidating } = usePromise("/todos");
10
+
11
+ return (
12
+ <div className="container">
13
+ <div>
14
+ <p>
15
+ Hello from server path 123: {router.pathname}
16
+ </p>
17
+ <TodoList />
18
+ <div>
19
+ <button onClick={() => setCount(count - 1)}>-</button>
20
+ <span>
21
+ {count}
22
+ </span>
23
+ <button onClick={() => setCount(count + 1)}>+</button>
24
+ </div>
25
+ </div>
26
+ </div>
27
+ );
routes/page.jsx CHANGED
@@ -1,21 +1,25 @@
1
- export default () => {
1
+ <!--js-->
2
- return (
3
- <div className="home-page">
2
+ import { useState } from "react";
3
+ import { useRouter } from "@/router.js";
4
+ import TodoList from "@/containers/TodoList.astro";
5
+
6
+ const router = useRouter();
7
+ const [count, setCount] = useState(5);
8
+ // const { data: todos, isLoading, isRevalidating } = usePromise("/todos");
9
+
10
+ <!--jsx-->
4
- <div>
11
+ <div>
12
+ <div>
5
- <p>
13
+ <p>
6
- Hello from server path 123: {router.pathname}
14
+ Hello from server path 123: {router.pathname}
7
- </p>
15
+ </p>
8
- <Suspense fallback={"Loading..."}>
9
- <TodoList />
16
+ <TodoList />
10
- </Suspense>
11
- <div>
17
+ <div>
12
- <button onClick={() => setCount(count - 1)}> -</button>
18
+ <button onClick={() => setCount(count - 1)}>-</button>
13
- <div>
19
+ <span>
14
- {count}
20
+ {count}
15
- </div>
21
+ </span>
16
- <button onClick={() => setCount(count + 1)}> +</button>
22
+ <button onClick={() => setCount(count + 1)}>+</button>
17
- </div>
18
- </div>
19
23
  </div>
20
- )
24
+ </div>
21
- }
25
+ </div>