begin work on incremental adoption tutorial

Author: IMax153

content/tutorials/incremental-adoption/100-start.mdx

@@ -0,0 +1,8 @@
+---
+title: Test
+excerpt: Learn how to incrementally adopt Effect into your application
+section: Incremental adoption
+workspace: express
+---
+
+Second page

content/tutorials/incremental-adoption/index.mdx

@@ -0,0 +1,27 @@
+---
+title: Welcome
+excerpt: Learn how to incrementally adopt Effect into your application
+section: Incremental adoption
+workspace: express
+---
+
+### Incrementally Adopting Effect
+
+Effect was designed with incremental adoption in mind. With Effect, you can continue to use your existing code and incorporate Effect as much (or as little) as you prefer where it makes the most sense within your application. In this way, you can immediately begin to benefit from Effect without needing to make drastic changes to your codebase.
+
+### What We'll Be Doing
+
+In this tutorial we will walk through strategies for incrementally adopting Effect into your existing applications. Our goal will be to taking an existing REST API built with [Express](https://expressjs.com) and gradually incorporate Effect.
+
+In the editor to the right, you will see the following files in the `src` directory:
+
+- `main.ts`: contains the logic for starting our HTTP server and serving requests
+- `repo.ts`: contains the logic for creating, reading, updating, and deleting (CRUD) todos
+
+### How To Use This Tutorial
+
+To the right is an editor and a console window. As you make changes to the code in the editor, the program will re-run and show the output in the console.
+
+Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
+
+If you want to view the recommended solution to an exercise, click the "Solve" button.

src/CodeEditor/services/Monaco/ATA.ts

@@ -32,12 +32,11 @@ const make = Effect.gen(function* () {
 
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     allowNonTsExtensions: true,
+    allowSyntheticDefaultImports: true,
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
     strict: true,
     target: monaco.languages.typescript.ScriptTarget.ESNext,
-    strictNullChecks: true,
-    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-    allowSyntheticDefaultImports: true,
-    outDir: "lib"
+    strictNullChecks: true
   })
 
   const install = (editor: monaco.editor.IStandaloneCodeEditor) => {

src/app/tutorials/[...slug]/components/Tutorial.tsx

@@ -60,7 +60,7 @@ export function Tutorial({
     >
       <Panel className="pt-4 min-w-[450px] flex flex-col" defaultSize={30}>
         {navigation}
-        <div className="p-6 prose dark:prose-invert flex-1 overflow-y-auto pb-14">
+        <div className="px-8 py-2 prose dark:prose-invert flex-1 overflow-y-auto pb-14">
           {children}
           {next && (
             <p>

src/tutorials/incremental-adoption/0/main.initial.txt

@@ -0,0 +1,37 @@
+import Express from "express"
+import { TodoRepository } from "./repo"
+
+const app = Express()
+
+app.use(Express.json() as Express.NextFunction)
+
+const repo = new TodoRepository()
+
+// Creat Todo
+app.post("/todos", (req, res) => {
+  res.json(repo.create(req.body.text))
+})
+
+// Read Todo
+app.get("/todos/:id", (req, res) => {
+  res.json(repo.get(Number.parseInt(req.params.id)))
+})
+
+// Read Todos
+app.get("/todos", (_, res) => {
+  res.json(repo.getAll())
+})
+
+// Update Todo
+app.patch("/todos/:id", (req, res) => {
+  res.json(repo.update(Number.parseInt(req.params.id), req.body))
+})
+
+// Delete Todo
+app.delete("/todos/:id", (req, res) => {
+  res.json(repo.delete(Number.parseInt(req.params.id)))
+})
+
+app.listen(3000, () => {
+  console.log("Server listing on port 3000...")
+})

src/tutorials/incremental-adoption/0/main.ts

@@ -0,0 +1,37 @@
+import Express from "express"
+import { TodoRepository } from "./repo"
+
+const app = Express()
+
+app.use(Express.json() as Express.NextFunction)
+
+const repo = new TodoRepository()
+
+// Creat Todo
+app.post("/todos", (req, res) => {
+  res.json(repo.create(req.body.text))
+})
+
+// Read Todo
+app.get("/todos/:id", (req, res) => {
+  res.json(repo.get(Number.parseInt(req.params.id)))
+})
+
+// Read Todos
+app.get("/todos", (_, res) => {
+  res.json(repo.getAll())
+})
+
+// Update Todo
+app.patch("/todos/:id", (req, res) => {
+  res.json(repo.update(Number.parseInt(req.params.id), req.body))
+})
+
+// Delete Todo
+app.delete("/todos/:id", (req, res) => {
+  res.json(repo.delete(Number.parseInt(req.params.id)))
+})
+
+app.listen(3000, () => {
+  console.log("Server listing on port 3000...")
+})

src/tutorials/incremental-adoption/0/repo.ts

@@ -0,0 +1,45 @@
+export interface Todo {
+  readonly id: number
+  readonly text: string
+  readonly completed: boolean
+}
+
+export class TodoRepository {
+  readonly todos: Array<Todo> = [
+    { id: 1, text: "Finish homework", completed: false },
+    { id: 2, text: "Buy groceries", completed: false },
+    { id: 3, text: "Write report", completed: false },
+    { id: 4, text: "Clean house", completed: false },
+    { id: 5, text: "Pay bills", completed: false }
+  ]
+
+  get(id: number): Todo | undefined {
+    return this.todos.find((todo) => todo.id === id)
+  }
+
+  getAll(): ReadonlyArray<Todo> {
+    return this.todos
+  }
+
+  create(text: string): Todo {
+    const maxId = this.todos.reduce((max, todo) => todo.id > max ? todo.id : max, 0)
+    const newTodo = { id: maxId + 1, text, completed: false }
+    this.todos.push(newTodo)
+    return newTodo
+  }
+
+  update(id: number, props: Partial<Omit<Todo, "id">>): Todo | undefined {
+    const todo = this.todos.find((todo) => todo.id === id)
+    if (todo) {
+      Object.assign(todo, props)
+      return todo
+    }
+    return undefined
+  }
+
+  delete(id: number): boolean {
+    const initialLength = this.todos.length
+    this.todos.filter((todo) => todo.id !== id)
+    return this.todos.length < initialLength
+  }
+}