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

2 years ago 
add css bundling
Files changed (15) hide show
  1. packages/cli/index.js +21 -27
  2. packages/{example/pages → cli}/todos/page.css +0 -0
  3. packages/{example/pages → cli}/todos/page.jsx +0 -0
  4. packages/example/components/Layout/Layout.css +23 -3
  5. packages/example/components/Layout/Layout.jsx +7 -4
  6. packages/example/package.json +2 -1
  7. packages/example/pages/_404/page.css +1 -1
  8. packages/example/pages/_404/page.jsx +1 -1
  9. packages/example/pages/_500/page.css +1 -1
  10. packages/example/pages/_500/page.jsx +1 -1
  11. packages/example/pages/about/page.css +1 -2
  12. packages/example/pages/page.css +1 -10
  13. packages/example/pages/page.jsx +1 -1
  14. packages/runtime/index.js +4 -9
  15. pnpm-lock.yaml +7 -0
packages/cli/index.js CHANGED
@@ -65,9 +65,9 @@ const staticDir = path.join(process.cwd(), "build", "static");
65
65
 
66
66
  const createDirs = () => {
67
67
  const buildDir = path.join(process.cwd(), "build");
68
- if (fs.existsSync(buildDir)) {
68
+ // if (fs.existsSync(buildDir)) {
69
- fs.rmSync(buildDir, { recursive: true });
69
+ // fs.rmSync(buildDir, { recursive: true });
70
- }
70
+ // }
71
71
  if (!fs.existsSync(staticDir)) {
72
72
  fs.mkdirSync(staticDir, { recursive: true });
73
73
  }
@@ -110,34 +110,15 @@ const buildRouteMap = () => {
110
110
  fs.writeFileSync(outfile, JSON.stringify(routemap, null, 2));
111
111
  }
112
112
 
113
- // let envPlugin = {
113
+ let generatedCss = ``;
114
- // name: 'env',
115
- // setup(build) {
116
- // // Intercept import paths called "env" so esbuild doesn't attempt
117
- // // to map them to a file system location. Tag them with the "env-ns"
118
- // // namespace to reserve them for this plugin.
119
- // build.onResolve({ filter: /^env$/ }, args => ({
120
- // path: args.path,
121
- // namespace: 'env-ns',
122
- // }))
114
+ const cssCache = [];
123
-
124
- // // Load paths tagged with the "env-ns" namespace and behave as if
125
- // // they point to a JSON file containing the environment variables.
126
- // build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
127
- // contents: JSON.stringify(process.env),
128
- // loader: 'json',
129
- // }))
130
- // },
131
- // }
132
-
133
-
134
115
  const buildServer = async (src, type) => {
135
116
  const buildStart = Date.now();
136
117
  const shortName = src.replace(process.cwd(), "");
137
118
  const outName = type === "service"
138
- ? "/_rpc" + shortName.replace("/services", "").replace(".service.js", ".js")
119
+ ? "/_rpc" + shortName.replace("/services", "").replace(".service.js", "")
139
- : shortName.replace("/pages", "").replace("page.jsx", "index.js");
120
+ : shortName.replace("/pages", "").replace("/page.jsx", "") || "/index";
140
- const outfile = `${process.cwd()}/build/functions${outName}`;
121
+ const outfile = `${process.cwd()}/build/functions${outName}.js`;
141
122
  const result = await esbuild.build({
142
123
  bundle: true,
143
124
  target: ['es2022'],
@@ -148,6 +129,7 @@ const buildServer = async (src, type) => {
148
129
  external: ["node:*"],
149
130
  color: true,
150
131
  treeShaking: true,
132
+ // loader: { '.json': 'copy' },
151
133
  // metafile: true,
152
134
  jsxDev: !isProd,
153
135
  jsx: 'automatic',
@@ -178,6 +160,17 @@ const buildServer = async (src, type) => {
178
160
  loader: "jsx",
179
161
  }
180
162
  });
163
+ build.onLoad({ filter: /\\*.css/, namespace: undefined }, (args) => {
164
+ if (!cssCache[args.path]) {
165
+ const css = fs.readFileSync(args.path);
166
+ generatedCss += css + "\n\n";
167
+ cssCache[args.path] = true;
168
+ }
169
+ return {
170
+ contents: "",
171
+ loader: "file",
172
+ }
173
+ });
181
174
  }
182
175
  }
183
176
  ]
@@ -223,6 +216,7 @@ const main = async () => {
223
216
  for (const s of services) {
224
217
  await buildServer(s, "service");
225
218
  }
219
+ fs.writeFileSync(`${process.cwd()}/build/static/app.css`, generatedCss);
226
220
  }
227
221
 
228
222
  main();
packages/{example/pages → cli}/todos/page.css RENAMED
File without changes
packages/{example/pages → cli}/todos/page.jsx RENAMED
File without changes
packages/example/components/Layout/Layout.css CHANGED
@@ -1,5 +1,25 @@
1
- .layout-header {
1
+ .layout {
2
+ display: flex;
3
+ margin-left: 20%;
4
+
5
+ & .sidebar {
6
+ display: flex;
7
+ flex-shrink: 0;
8
+ flex-direction: column;
9
+ align-items: center;
10
+ padding: 20px;
11
+ padding-top: 42px;
12
+ line-height: 1.8em;
13
+
2
- & a {
14
+ & a {
3
- margin-right: 20px;
15
+ margin-right: 20px;
16
+ }
17
+ }
18
+
19
+ & .content {
20
+ padding: 20px;
21
+ padding-bottom: 50px;
22
+ border-left: 2px solid #eee;
23
+ min-height: 100vh;
4
24
  }
5
25
  }
packages/example/components/Layout/Layout.jsx CHANGED
@@ -1,15 +1,18 @@
1
1
  import React from 'react';
2
2
  import { Link } from "parotta-runtime";
3
+ import "normalize.css";
4
+ import "nprogress/nprogress.css"
3
5
  import "./Layout.css";
4
6
 
5
7
  const Layout = ({ children }) => {
6
8
  return (
7
- <div>
8
- <header className="layout-header">
9
+ <div className="layout">
10
+ <div className="sidebar">
11
+ <Link href="/">Home</Link>
9
12
  <Link href="/about">About us</Link>
10
13
  <Link href="/todos">Todos</Link>
11
- </header>
14
+ </div>
12
- <div>
15
+ <div className="content">
13
16
  {children}
14
17
  </div>
15
18
  </div>
packages/example/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "parotta-example",
3
3
  "type": "module",
4
4
  "scripts": {
5
- "start": "bun main.js",
5
+ "dev": "wrangler pages dev static",
6
6
  "build": "parotta build cloudflare",
7
7
  "run": "docker run -p 3000:3000 example",
8
8
  "test": "bun test",
@@ -12,6 +12,7 @@
12
12
  "@neondatabase/serverless": "^0.2.9",
13
13
  "drizzle-orm": "0.26.0",
14
14
  "normalize.css": "^8.0.1",
15
+ "nprogress": "0.2.0",
15
16
  "react": "18.2.0",
16
17
  "react-aria-components": "1.0.0-alpha.3",
17
18
  "react-dom": "18.2.0",
packages/example/pages/_404/page.css CHANGED
@@ -1,4 +1,4 @@
1
- body {
1
+ .notfound-page {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  align-items: center;
packages/example/pages/_404/page.jsx CHANGED
@@ -4,7 +4,7 @@ import "./page.css";
4
4
 
5
5
  const Page = () => {
6
6
  return (
7
- <div>
7
+ <div className="notfound-page">
8
8
  <Helmet>
9
9
  <title>Page not found</title>
10
10
  </Helmet>
packages/example/pages/_500/page.css CHANGED
@@ -1,4 +1,4 @@
1
- body {
1
+ .err-page {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  align-items: center;
packages/example/pages/_500/page.jsx CHANGED
@@ -4,7 +4,7 @@ import "./page.css";
4
4
 
5
5
  const Page = () => {
6
6
  return (
7
- <div>
7
+ <div className="err-page">
8
8
  <Helmet>
9
9
  <title>Oop's Something went wrong</title>
10
10
  </Helmet>
packages/example/pages/about/page.css CHANGED
@@ -1,8 +1,7 @@
1
- body {
1
+ .about-page {
2
2
  margin: 0;
3
3
  padding: 20px;
4
4
  padding-bottom: 130px;
5
- background-color: violet;
6
5
 
7
6
  & footer {
8
7
  margin-top: 100px;
packages/example/pages/page.css CHANGED
@@ -1,17 +1,8 @@
1
- body {
1
+ .home-page {
2
- margin: 0;
3
- padding: 20px;
4
- margin: 0;
5
- background-color: turquoise;
6
-
7
2
  & .count {
8
3
  color: black;
9
4
  padding: 40px;
10
5
  font-size: 30px;
11
6
  font-weight: 600;
12
7
  }
13
-
14
- & footer {
15
- margin-top: 100px;
16
- }
17
8
  }
packages/example/pages/page.jsx CHANGED
@@ -15,7 +15,7 @@ const Page = () => {
15
15
  <Helmet>
16
16
  <title>Parotta App</title>
17
17
  </Helmet>
18
- <div>
18
+ <div className="home-page">
19
19
  <h1>Home Page</h1>
20
20
  <p>
21
21
  Path: {router.pathname}
packages/runtime/index.js CHANGED
@@ -263,15 +263,10 @@ export const renderPage = async (PageComponent, req) => {
263
263
  lang: "en",
264
264
  children: [_jsxs("head", {
265
265
  children: [
266
- // _jsx("link", {
266
+ _jsx("link", {
267
- // rel: "stylesheet",
267
+ rel: "stylesheet",
268
- // href: "https://unpkg.com/nprogress@0.2.0/nprogress.css"
269
- // }),
270
- // _jsx("link", {
271
- // id: "pageCss",
268
+ href: "/app.css"
272
- // rel: "stylesheet",
273
- // href: `/pages${url.pathname}/page.css`
274
- // }),
269
+ }),
275
270
  _jsx("script", {
276
271
  type: "importmap",
277
272
  dangerouslySetInnerHTML: {
pnpm-lock.yaml CHANGED
@@ -61,6 +61,9 @@ importers:
61
61
  normalize.css:
62
62
  specifier: ^8.0.1
63
63
  version: 8.0.1
64
+ nprogress:
65
+ specifier: 0.2.0
66
+ version: 0.2.0
64
67
  parotta-runtime:
65
68
  specifier: workspace:*
66
69
  version: link:../runtime
@@ -5024,6 +5027,10 @@ packages:
5024
5027
  resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
5025
5028
  dev: false
5026
5029
 
5030
+ /nprogress@0.2.0:
5031
+ resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
5032
+ dev: false
5033
+
5027
5034
  /object-assign@4.1.1:
5028
5035
  resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
5029
5036
  engines: {node: '>=0.10.0'}