Polish arch/browser demo

ml-in-barcelona · Nov 18, 2024 · 35c95b5 · 35c95b5
1 parent a4e21e7
commit 35c95b5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 55 deletions.
diff --git a/arch/browser/index.html b/arch/browser/index.html
@@ -1,15 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
+
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
   </head>
+
   <body>
-    <div id="root"><div style="color: blue" data-reactroot="">first</div></div>
+    <div id="root">
+      <div style="color: blue" data-reactroot="">first</div>
+    </div>
   </body>
-  <script src="./node_modules/react/umd/react.development.js"></script>
-  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
+  <script>window.process = { env: { NODE_ENV: "development" } }</script>
+  <script src="./node_modules/react/cjs/react.development.js"></script>
+  <script src="./node_modules/react-dom/cjs/react-dom.development.js"></script>
   <script src="./index.js"></script>
+
 </html>
diff --git a/arch/browser/index.js b/arch/browser/index.js
@@ -1,20 +1,20 @@
 const React = window.React;
 const ReactDOM = window.ReactDOM;
 
-let app = () => {
-  return React.createElement("div", { key: "fi", style: { color: "blue" } }, [
-    "first",
-  ]);
+const app = () => {
+	return React.createElement("div", { key: "fi", style: { color: "blue" } }, [
+		"first",
+	]);
 };
 
-let root = document.querySelector("#root");
+const root = document.querySelector("#root");
 ReactDOM.hydrate(React.createElement(app, null, null), root);
 
 /*  */
 
 /* let _ = ReactDOM.hydrateRoot(document.getElementById("root"), <Noter.make />); */
 
-  /* let loading
+/* let loading
   if (window.srr_stream) {
     loading = ReactServerDOM.createFromReadableStream(
       window.srr_stream.readable_stream,
@@ -33,7 +33,7 @@ ReactDOM.hydrate(React.createElement(app, null, null), root);
     });
   } */
 
-  /* function fetchRSC(path) {
+/* function fetchRSC(path) {
     return fetch(path, {
       method: 'GET',
       headers: { Accept: 'application/react.component' },
@@ -53,71 +53,40 @@ ReactDOM.hydrate(React.createElement(app, null, null), root);
     </React.StrictMode>
   ); */
 
-  /* console.log(window.srr_stream.readable_stream); */
+/* console.log(window.srr_stream.readable_stream); */
 
-  /* const mockPayload = [`1:"$Sreact.suspense"\n
+/* const mockPayload = [`1:"$Sreact.suspense"\n
 0:["$","html",null,{"children":[["$","head",null,{"children":["$","title",null,{"children":"Test"}]}],["$","body",null,{"children":[["$","a",null,{"href":"/","children":"Go home"}]," | ",["$","a",null,{"href":"/about","children":"Go to about"}],["$","$1",null,{"children":["$","div",null,{"children":["$","h1",null,{"children":"Home"}]}]}]]}]]}]`]; */
-  /* const mockPayload = ["0:["$","div",null,{"className":"foo"}]\n", "1:null\n"]; */
-  /* const mockPayload = [`0:[null]\n`, `1:"$Sreact.suspense"\n`]; */
-  /* <h1> {"Hello"} </h1> */
-  /* window.srr_stream.push('0:I["$","div","0",{"children":[["$","h1","0",{"children":["Hellowww"]}]],"id":"root"}]'); */
-  /* const mockPayload = [`0:["$","h1",null,{"children":["Hellowww"]}]\n`]; */
-  /* const mockPayload = [`0:I["$","div","0",{"children":[["$","h1","0",{"children":["Hellowww"]}]],"id":"root"}]\n`]; */
-  /* const mockPayload = [
+/* const mockPayload = ["0:["$","div",null,{"className":"foo"}]\n", "1:null\n"]; */
+/* const mockPayload = [`0:[null]\n`, `1:"$Sreact.suspense"\n`]; */
+/* <h1> {"Hello"} </h1> */
+/* window.srr_stream.push('0:I["$","div","0",{"children":[["$","h1","0",{"children":["Hellowww"]}]],"id":"root"}]'); */
+/* const mockPayload = [`0:["$","h1",null,{"children":["Hellowww"]}]\n`]; */
+/* const mockPayload = [`0:I["$","div","0",{"children":[["$","h1","0",{"children":["Hellowww"]}]],"id":"root"}]\n`]; */
+/* const mockPayload = [
     `0:I["$","div","0",{"children":[["$","div","0",{"children":[["$","div","0",{"children":["This is Light Server Component"]}],["$","div","0",{"children":[["$","div","0",{"children":[],"title":"Light Component"}]]}]]}],["$","div","0",{"children":["Heavy Server Component"]}]],"id":"root"}]\n`,
   ]; */
 
-  /* const mockPayload = [
+/* const mockPayload = [
     `a:["$","div",null,{"children":["Sleep ",1,"s","$undefined"]}]\n`,
     `1:["$L7",["$","div",null,{"children":["Home Page",["$","$8",null,{"fallback":"Fallback 1","children":"$L9"}]]}],null]\n`,
     `9:["$","div",null,{"children":["Sleep ",1,"s",["$","$8",null,{"fallback":"Fallback 2","children":"$La"}]]}]\n`,
     `7:"$Sreact.suspense"\n`,
   ]; */
-  /* const mockPayload = [
+/* const mockPayload = [
     `7:"$Sreact.suspense"\n`,
     `1:["$L7",["$","div",null,{"children":["Home Page",["$","$8",null,{"fallback":"Fallback 1","children":"$L9"}]]}],null]\n`,
     `9:["$","div",null,{"children":["Sleep ",1,"s",["$","$8",null,{"fallback":"Fallback 2","children":"$La"}]]}]\n`,
     `a:["$","div",null,{"children":["Sleep ",1,"s","$undefined"]}]\n`,
   ]; */
-  /*  const rscPayload = [
+/*  const rscPayload = [
      `7:"$Sreact.suspense"`,
      `1:["$L7",["$","div",null,{"children":["Home Page",["$","$8",null,{"fallback":"Fallback 1","children":"$L9"}]]}],null]`,
      `9:["$","div",null,{"children":["Sleep ",1,"s",["$","$8",null,{"fallback":"Fallback 2","children":"$La"}]]}]`,
      `a:["$","div",null,{"children":["Sleep ",1,"s","$undefined"]}]`
    ]; */
 
-  /* const rscPayload = [
+/* const rscPayload = [
     "1:I[\"./client-component.js\",[],\"Client_component\"]",
     "0:[[\"$\",\"span\",null,{\"children\":\"Hello!!!\"}],[\"$\",\"$1\",null,{}]]",
   ]; */
-
-  /* let result = MyReactServerDOM.to_model (xxxxxxxxx) */
-  /* load into file (result) */
-  /* node debug-rsc.js (result) */
-  /* cram test */
-
-  /** @type {ReadableStream<Uint8Array>} */
-  /* let mockReadableStream = new ReadableStream({
-    start(stream) {
-      const textEncoder = new TextEncoder();
-
-      for (let chunk of rscPayload) {
-        stream.enqueue(textEncoder.encode(chunk + '\n'));
-      }
-      stream.close();
-    }
-  }); */
-
-  const debug = readableStream => {
-    const reader = readableStream.getReader();
-    const debugReader = ({ done, value }) => {
-      if (done) {
-        console.log("Stream complete");
-        return;
-      }
-      console.log(value);
-      return reader.read().then(debugReader);
-    };
-    reader.read().then(debugReader);
-  };
-
diff --git a/arch/browser/package.json b/arch/browser/package.json
@@ -2,10 +2,11 @@
   "name": "test_browser",
   "version": "0.0.1",
   "scripts": {
-    "start": "node index.js"
+    "serve": "http-server -p 1234 ."
   },
   "license": "MIT",
   "dependencies": {
+    "http-server": "^14.1.1",
     "react": "^19.0.0-rc-69d4b800-20241021",
     "react-dom": "^19.0.0-rc-69d4b800-20241021",
     "react-server-dom-webpack": "^19.0.0-rc-69d4b800-20241021"