Update examples

ije · ije · commit bb18ee6fec91 · 2022-04-30T00:12:25.000+08:00
diff --git a/examples/feature-apps/monaco-editor/App.tsx b/examples/feature-apps/monaco-editor/App.tsx
@@ -1,20 +1,20 @@
 import { useEffect, useRef, useState } from "react";
 
-export default function Index() {
+export default function App() {
   const [ready, setReady] = useState(false);
   const editorContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     (async () => {
-      const { createEditor, createModel } = await import("../lib/editor.ts");
+      const { createEditor, createModel } = await import("./editor.ts");
       const editor = createEditor(editorContainerRef.current!);
       editor.setModel(createModel("mod.ts", `// Aleph.js with Monaco Editor \n\nconsole.log("Hello, world!");\n`));
       setReady(true);
     })();
   }, []);
 
   return (
-    <div style={{ width: "100vw", height: "100vh" }} ref={editorContainerRef}>
+    <div className="editor" ref={editorContainerRef}>
       {!ready && <p>Loading...</p>}
     </div>
   );
diff --git a/examples/feature-apps/monaco-editor/editor.ts b/examples/feature-apps/monaco-editor/editor.ts
diff --git a/examples/feature-apps/monaco-editor/index.html b/examples/feature-apps/monaco-editor/index.html
@@ -27,6 +27,10 @@
       padding: 50px;
       border: 1px solid #eee;
     }
+    #root .editor {
+      width: 100%;
+      height: 100%;
+    }
   </style>
 </head>
 
diff --git a/examples/feature-apps/monaco-editor/main.tsx b/examples/feature-apps/monaco-editor/main.tsx
@@ -1,4 +1,5 @@
-import { Router } from "aleph/react";
-import { hydrateRoot } from "react-dom/client";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
 
-hydrateRoot(document.querySelector("#root")!, <Router />);
+const root = createRoot(document.querySelector("#root")!);
+root.render(<App />);
diff --git a/examples/feature-apps/monaco-editor/server.tsx b/examples/feature-apps/monaco-editor/server.tsx
@@ -1,10 +1,3 @@
-import { Router } from "aleph/react";
 import { serve } from "aleph/server";
-import { renderToString } from "react-dom/server";
 
-serve({
-  config: {
-    routes: "./routes/**/*.tsx",
-  },
-  ssr: (ctx) => renderToString(<Router ssrContext={ctx} />),
-});
+serve({ port: 3000 });
diff --git a/examples/feature-apps/unocss/index.html b/examples/feature-apps/unocss/index.html
@@ -4,31 +4,12 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://esm.sh/@unocss/reset@0.32.1/tailwind.css">
   <style>
-    * {
-      margin: 0;
-      padding: 0;
-      border: none;
-      outline: none;
-      font: inherit;
-      font-size: 100%;
-      vertical-align: baseline;
-      background: transparent;
-    }
-    html, body {
-      height: 100%;
-    }
-    body {
-      font-family: Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
-      font-size: 16px;
-    }
     #root {
       position: relative;
-      width: 100%;
-      height: 100%;
-    }
-    a {
-      color: inherit;
+      width: 100vw;
+      height: 100vh;
     }
   </style>
 </head>
@@ -38,4 +19,4 @@
   <script type="module" src="./main.tsx"></script>
 </body>
 
-</html>
+</html>
diff --git a/examples/react-app/server.tsx b/examples/react-app/server.tsx
@@ -5,9 +5,15 @@ import { renderToReadableStream } from "react-dom/server";
 serve({
   config: {
     routes: "./routes/**/*.{tsx,ts}",
+    unocss: {
+      // to enable unocss, please add presets:
+      // presets: [ unoPreset ],
+    },
   },
   ssr: {
-    suspense: true,
+    // when set `suspense` to `true`, the router will loading data as suspense
+    // please check https://alephjs.org/docs/react/router/suspense
+    suspense: false,
     render: (ctx) => renderToReadableStream(<Router ssrContext={ctx} />, ctx),
   },
 });
