okay

src/getReactApp.mts

@@ -1,6 +1,7 @@
 import { alpine } from "./alpine.mts"
 import { daisy } from "./daisy.mts"
 import { dockerfile } from "./docker.mts"
+import { tsconfig } from "./typescript.mts"
 
 export function getReactApp(prompt: string) {
   const prefix = `# In src/pages/index.tsx:\n\`\`\``
@@ -8,18 +9,38 @@ export function getReactApp(prompt: string) {
     {
       path: `Dockerfile`,
       content: dockerfile,
+    },
+    {
+      path: "tsconfig.json",
+      content: tsconfig
     }
   ]
   const instructions = [
     {
       role: "system",
       content: [
-        `You are a TypeScript developer, expert at crafting NextJS and React applications, using TailwindCSS utility classes.`,
+        `You are a TypeScript developer, expert at crafting NextJS and React applications, using TailwindCSS utility classes.
+You usually use the following dependencies:
+
+\`\`\`
+"@types/node": "20.4.2",
+"@types/react": "18.2.15",
+"@types/react-dom": "18.2.7",
+"react": "18.2.0",
+"react-dom": "18.2.0",
+"typescript": "5.1.6",
+\`\`\`
+
+`,
       ].filter(item => item).join("\n")
     },
     {
       role: "user",
-      content: `Think step by step, you got this! Please write, file by file, the source code for a Next 12 application.
+      content: `
+You need to write the list of files for a new NextJS 12 application.
+The app is about: ${prompt}.
+Think step by step, you got this!
+Please write, file by file, the source code for a Next 12 application.
 The app should be buildable when we run this in command line:
 \`\`\`
 npm install
@@ -42,9 +63,9 @@ Important rules:
 - you need to leave: "sdk: docker" as-is, but replace: "<APPNAME>" with an actual name, please.
 - Don't forget to write a valid package.json file!
 
-The app is about: ${prompt}.
+Remember, the app is about: ${prompt}.
 
-Remember: don't forget to edit the README.me and a package.json file!`,
+Remember: don't forget to define the README.md and the package.json file!`,
     }
   ]
 

src/parseTutorial.mts

@@ -1,6 +1,6 @@
 export function parseTutorial(text: string): Array<{ filename: string; content: string }> {
   const result: { filename: string; content: string; }[] = [];
-  const regex = /# In (?:the )?(.*):\n```(?:\w+\n)?([\s\S]*?)```/g;
+  const regex = /#\s+(?:And finally,\s+)?in\s+(?:(?:the|your)\s+)?(.*)(?:, add the following code)?:\n```(?:\w+\n)?([\s\S]*?)```/gi;
   let match: RegExpExecArray | null;
   while ((match = regex.exec(text)) !== null) {
       result.push({

src/typescript.mts

@@ -0,0 +1,28 @@
+export const tsconfig = `{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}`