docs: embed todomvc

examples/TodoMVC/src/TodoMVC.css

@@ -0,0 +1,51 @@
+#container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100dvw;
+  height: 100dvh;
+  background: #242424;
+  color: white;
+  border: 1px solid white;
+  box-sizing: border-box;
+}
+
+.app {
+  width: 100%;
+  height: 100%;
+  max-width: 640px;
+  max-height: 800px;
+  box-sizing: border-box;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.flex {
+  display: flex;
+}
+
+.expand {
+  flex: 1;
+}
+
+.filter {
+  align-self: center;
+  padding: 20px 0;
+}
+
+.filter-input {
+  display: flex;
+  justify-content: space-around;
+  padding-bottom: 12px;
+}
+
+button {
+  cursor: pointer;
+}
+
+.todo {
+  padding: 8px 12px;
+  border-bottom: 1px solid white;
+}

examples/TodoMVC/src/TodoMVC.tsx

@@ -0,0 +1,33 @@
+/*
+ * @since 2024-10-18 23:41:18
+ * @author junbao <[email protected]>
+ */
+
+import { createStore, IDBStorage, withPersist } from 'amos';
+import { Provider } from 'amos/react';
+import { useState } from 'react';
+import { App } from './App';
+import './TodoMVC.css';
+
+// For compat with website.
+export const TodoMVC = () => {
+  const [store] = useState(() => {
+    return createStore(
+      {
+        name: 'Amos - TodoMVC',
+        devtools: true,
+      },
+      withPersist({
+        storage: new IDBStorage('todo', 'todo'),
+        includes: () => true,
+      }),
+    );
+  });
+  return (
+    <Provider store={store}>
+      <div id="container">
+        <App />
+      </div>
+    </Provider>
+  );
+};

examples/TodoMVC/src/index.css

@@ -2,76 +2,12 @@
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
-  --back: #000000;
-  --front: #ffffff;
-
-  color-scheme: light dark;
-  color: var(--front);
-  background-color: var(--back);
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    --back: #ffffff;
-    --front: #000000;
-  }
-}
-
 body {
   margin: 0;
 }
-
-#root {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100dvw;
-  height: 100dvh;
-}
-
-.app {
-  width: 100%;
-  height: 100%;
-  max-width: 640px;
-  max-height: 800px;
-  border: 1px solid var(--front);
-  box-sizing: border-box;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.flex {
-  display: flex;
-}
-
-.expand {
-  flex: 1;
-}
-
-.filter {
-  align-self: center;
-  padding: 20px 0;
-}
-
-.filter-input {
-  display: flex;
-  justify-content: space-around;
-  padding-bottom: 12px;
-}
-
-button {
-  cursor: pointer;
-}
-
-.todo {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--front);
-}

examples/TodoMVC/src/main.tsx

@@ -1,25 +1,10 @@
-import { createStore, IDBStorage, withPersist } from 'amos';
-import { Provider } from 'amos/react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { App } from './App';
+import { TodoMVC } from './TodoMVC';
 import './index.css';
 
-const store = createStore(
-  {
-    name: 'Amos - TodoMVC',
-    devtools: true,
-  },
-  withPersist({
-    storage: new IDBStorage('todo', 'todo'),
-    includes: () => true,
-  }),
-);
-
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <Provider store={store}>
-      <App />
-    </Provider>
+    <TodoMVC />
   </StrictMode>,
 );

website/docs/01-Introduction/04-examples.md

@@ -1,3 +1,10 @@
 # Examples
 
 ## TodoMVC
+
+TodoMVC is a classic example through which we demonstrate many commonly used features of Amos,
+including SSR, persistence, useQuery, as well as recommended project structure and data structure
+design. You can try the project below, view the complete source
+code [here](https://github.com/amos-project/amos/tree/main/examples/TodoMVC), or run it directly.
+
+<iframe width="100%" height="600px" src="/amos/examples/TodoMVC"></iframe>

website/src/pages/examples/TodoMVC.tsx

@@ -0,0 +1,8 @@
+/*
+ * @since 2024-11-01 02:24:07
+ * @author junbao <[email protected]>
+ */
+
+import { TodoMVC } from '../../../../examples/TodoMVC/src/TodoMVC';
+
+export default TodoMVC;

website/src/theme/ReactLiveScope/index.tsx

@@ -1,21 +1,19 @@
-import {App} from '../../../../examples/TodoMVC/src/App';
-import React from 'react';
 import * as Amos from 'amos';
 import * as AmosReact from 'amos/react';
+import React from 'react';
 
 const require = (m: string) => {
   return {
-    'amos': Amos,
+    amos: Amos,
     'amos/react': AmosReact,
-  }[m]
-}
+  }[m];
+};
 
 // Add react-live imports you need here
 const ReactLiveScope = {
   React,
   ...Amos,
   ...AmosReact,
-  TodoMVC: App,
   require,
 };