~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


2683d00d Peter John

2 years ago
add page render
packages/cli/index.js CHANGED
@@ -64,6 +64,10 @@ const mapDeps = (dir) => {
64
64
  const staticDir = path.join(process.cwd(), "build", "static");
65
65
 
66
66
  const createDirs = () => {
67
+ const buildDir = path.join(process.cwd(), "build");
68
+ if (fs.existsSync(buildDir)) {
69
+ fs.rmSync(buildDir, { recursive: true });
70
+ }
67
71
  if (!fs.existsSync(staticDir)) {
68
72
  fs.mkdirSync(staticDir, { recursive: true });
69
73
  }
@@ -106,20 +110,33 @@ const buildRouteMap = () => {
106
110
  fs.writeFileSync(outfile, JSON.stringify(routemap, null, 2));
107
111
  }
108
112
 
109
- // const EsbuildPluginResolve = (options) => ({
113
+ // let envPlugin = {
110
- // name: 'esbuild-resolve',
114
+ // name: 'env',
111
- // setup: (build) => {
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"
112
- // for (const moduleName of Object.keys(options)) {
118
+ // // namespace to reserve them for this plugin.
113
- // intercept(build, moduleName, options[moduleName]);
119
+ // build.onResolve({ filter: /^env$/ }, args => ({
120
+ // path: args.path,
121
+ // namespace: 'env-ns',
114
- // }
122
+ // }))
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
+ // }))
115
- // }
130
+ // },
116
- // });
131
+ // }
117
132
 
118
133
 
119
134
  const buildServer = async (src, type) => {
120
135
  const buildStart = Date.now();
121
136
  const shortName = src.replace(process.cwd(), "");
137
+ const outName = type === "service"
122
- const outName = type === "service" ? shortName.replace(".service.js", "") + "/index.js" : shortName.replace("/pages", "").replace("page.jsx", "index.js");
138
+ ? "/_rpc" + shortName.replace("/services", "").replace(".service.js", ".js")
139
+ : shortName.replace("/pages", "").replace("page.jsx", "index.js");
123
140
  const outfile = `${process.cwd()}/build/functions${outName}`;
124
141
  const result = await esbuild.build({
125
142
  bundle: true,
@@ -136,12 +153,33 @@ const buildServer = async (src, type) => {
136
153
  jsx: 'automatic',
137
154
  define: {
138
155
  'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
156
+ 'process.env.PG_CONN_URL': "123",
139
157
  },
140
158
  plugins: [
141
159
  resolve({
142
160
  "/static/routemap.json": `${staticDir}/routemap.json`,
143
161
  "/static/importmap.json": `${staticDir}/importmap.json`
144
162
  }),
163
+ {
164
+ name: "parotta-plugin",
165
+ setup(build) {
166
+ build.onLoad({ filter: /\\*.page.jsx/, namespace: undefined }, (args) => {
167
+ const data = fs.readFileSync(args.path);
168
+ const newSrc = `
169
+ import { renderPage } from "parotta-runtime";
170
+ ${data.toString()}
171
+
172
+ export function onRequest(context) {
173
+ return renderPage(Page, context.request);
174
+ }
175
+ `
176
+ return {
177
+ contents: newSrc,
178
+ loader: "jsx",
179
+ }
180
+ });
181
+ }
182
+ }
145
183
  ]
146
184
  });
147
185
  // console.log(await analyzeMetafile(result.metafile))
@@ -189,18 +227,6 @@ const main = async () => {
189
227
 
190
228
  main();
191
229
 
192
- // const serverRouter = await createServerRouter();
193
- // const clientRouter = await createClientRouter();
194
- // const transpiler = new Bun.Transpiler({
195
- // loader: "jsx",
196
- // autoImportJSX: true,
197
- // jsxOptimizationInline: true,
198
-
199
- // // TODO
200
- // // autoImportJSX: false,
201
- // // jsxOptimizationInline: false,
202
- // });
203
-
204
230
  // const renderCss = async (src) => {
205
231
  // try {
206
232
  // const cssText = await Bun.file(src).text();
packages/example/pages/about/page.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { Link, useRouter, renderPage } from "parotta-runtime";
2
+ import { Link, useRouter } from "parotta-runtime";
3
3
  import { Helmet } from 'react-helmet-async';
4
4
  import Layout from '@/components/Layout/Layout';
5
5
  import "./page.css";
@@ -26,7 +26,3 @@ export const Page = () => {
26
26
  }
27
27
 
28
28
  export default Page;
29
-
30
- export function onRequest(context) {
31
- return renderPage(Page, context.request);
32
- }
packages/example/pages/page.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect } from 'react';
2
- import { useRouter, renderPage } from "parotta-runtime";
2
+ import { useRouter } from "parotta-runtime";
3
3
  import Layout from '@/components/Layout/Layout';
4
4
  import Counter from "@/components/Counter/Counter";
5
5
  import { Helmet } from 'react-helmet-async';
@@ -27,7 +27,3 @@ const Page = () => {
27
27
  }
28
28
 
29
29
  export default Page;
30
-
31
- export function onRequest(context) {
32
- return renderPage(Page, context.request);
33
- }
packages/runtime/index.js CHANGED
@@ -16,10 +16,11 @@ import routemap from '/static/routemap.json' assert {type: 'json'};
16
16
  * CSR related functions
17
17
  */
18
18
 
19
+ export const isClient = () => typeof window !== 'undefined';
19
- export const domain = () => typeof window !== 'undefined' ? window.origin : "http://0.0.0.0:3000";
20
+ export const domain = () => isClient() ? window.origin : "http://0.0.0.0:3000";
20
21
 
21
22
  export const rpc = (serviceName) => async (params = {}) => {
22
- const res = await fetch(`${domain()}/services/${serviceName}`, {
23
+ const res = await fetch(`${domain()}/_rpc/${serviceName}`, {
23
24
  method: "POST",
24
25
  headers: {
25
26
  "Accept": "application/json",