feat: wrangler init offers to create a starter worker

We got feedback that `wrangler init` felt incomplete, because the immediate next thing folks need is a starter source file. So this adds another step to `wrangler init` where we offer to create that file for you.

Fixes #355

.changeset/silver-ties-sell.md

@@ -0,0 +1,9 @@
+---
+"wrangler": patch
+---
+
+feat: `wrangler init` offers to create a starter worker
+
+We got feedback that `wrangler init` felt incomplete, because the immediate next thing folks need is a starter source file. So this adds another step to `wrangler init` where we offer to create that file for you.
+
+Fixes https://github.com/cloudflare/wrangler2/issues/355

package.json

@@ -46,9 +46,10 @@
   "eslintConfig": {
     "root": true,
     "ignorePatterns": [
-      "packages/*/vendor",
-      "packages/*/*-dist",
-      "packages/wrangler/pages/functions/template-worker.ts"
+      "packages/wrangler/vendor",
+      "packages/wrangler/*-dist",
+      "packages/wrangler/pages/functions/template-worker.ts",
+      "packages/wrangler/templates"
     ],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {

packages/wrangler/package.json

@@ -89,7 +89,7 @@
     "pages",
     "miniflare-config-stubs",
     "wrangler-dist",
-    "static-asset-facade.js",
+    "templates",
     "vendor",
     "import_meta_url.js"
   ],

packages/wrangler/src/__tests__/index.test.ts

@@ -147,6 +147,10 @@ describe("wrangler", () => {
         {
           text: "Would you like to use typescript?",
           result: false,
+        },
+        {
+          text: "Would you like to create a worker at src/index.js?",
+          result: false,
         }
       );
       await runWrangler("init");
@@ -172,6 +176,10 @@ describe("wrangler", () => {
         {
           text: "Would you like to use typescript?",
           result: false,
+        },
+        {
+          text: "Would you like to create a worker at src/index.js?",
+          result: false,
         }
       );
 
@@ -198,6 +206,10 @@ describe("wrangler", () => {
         {
           text: "Would you like to use typescript?",
           result: false,
+        },
+        {
+          text: "Would you like to create a worker at src/index.js?",
+          result: false,
         }
       );
 
@@ -227,6 +239,10 @@ describe("wrangler", () => {
         {
           text: "Would you like to use typescript?",
           result: false,
+        },
+        {
+          text: "Would you like to create a worker at src/index.js?",
+          result: false,
         }
       );
 
@@ -254,6 +270,112 @@ describe("wrangler", () => {
       `);
     });
 
+    it("should offer to create a worker in a non-typescript project", async () => {
+      mockConfirm(
+        {
+          text: "Would you like to install wrangler into your package.json?",
+          result: false,
+        },
+        {
+          text: "Would you like to use typescript?",
+          result: false,
+        },
+        {
+          text: "Would you like to create a worker at src/index.js?",
+          result: true,
+        }
+      );
+
+      fs.writeFileSync(
+        "./package.json",
+        JSON.stringify({ name: "test", version: "1.0.0" }),
+        "utf-8"
+      );
+
+      await runWrangler("init");
+      expect(fs.existsSync("./src/index.js")).toBe(true);
+      expect(fs.existsSync("./src/index.ts")).toBe(false);
+    });
+
+    it("should offer to create a worker in a typescript project", async () => {
+      mockConfirm(
+        {
+          text: "Would you like to install wrangler into your package.json?",
+          result: false,
+        },
+        {
+          text: "Would you like to use typescript?",
+          result: true,
+        },
+        {
+          text: "Would you like to create a worker at src/index.ts?",
+          result: true,
+        }
+      );
+
+      fs.writeFileSync(
+        "./package.json",
+        JSON.stringify({ name: "test", version: "1.0.0" }),
+        "utf-8"
+      );
+
+      await runWrangler("init");
+      expect(fs.existsSync("./src/index.js")).toBe(false);
+      expect(fs.existsSync("./src/index.ts")).toBe(true);
+    });
+
+    it("won't offer to create a worker in a non-ts project if a file already exists at the location", async () => {
+      mockConfirm(
+        {
+          text: "Would you like to install wrangler into your package.json?",
+          result: false,
+        },
+        {
+          text: "Would you like to use typescript?",
+          result: false,
+        }
+      );
+
+      fs.writeFileSync(
+        "./package.json",
+        JSON.stringify({ name: "test", version: "1.0.0" }),
+        "utf-8"
+      );
+      fs.mkdirSync("./src", { recursive: true });
+      const PLACEHOLDER = "/* placeholder text */";
+      fs.writeFileSync("./src/index.js", PLACEHOLDER, "utf-8");
+
+      await runWrangler("init");
+      expect(fs.readFileSync("./src/index.js", "utf-8")).toBe(PLACEHOLDER);
+      expect(fs.existsSync("./src/index.ts")).toBe(false);
+    });
+
+    it("won't offer to create a worker in a ts project if a file already exists at the location", async () => {
+      mockConfirm(
+        {
+          text: "Would you like to install wrangler into your package.json?",
+          result: false,
+        },
+        {
+          text: "Would you like to use typescript?",
+          result: true,
+        }
+      );
+
+      fs.writeFileSync(
+        "./package.json",
+        JSON.stringify({ name: "test", version: "1.0.0" }),
+        "utf-8"
+      );
+      fs.mkdirSync("./src", { recursive: true });
+      const PLACEHOLDER = "/* placeholder text */";
+      fs.writeFileSync("./src/index.ts", PLACEHOLDER, "utf-8");
+
+      await runWrangler("init");
+      expect(fs.existsSync("./src/index.js")).toBe(false);
+      expect(fs.readFileSync("./src/index.ts", "utf-8")).toBe(PLACEHOLDER);
+    });
+
     it("should create a tsconfig.json and install `workers-types` if none is found and user confirms", async () => {
       mockConfirm(
         {
@@ -263,6 +385,10 @@ describe("wrangler", () => {
         {
           text: "Would you like to use typescript?",
           result: true,
+        },
+        {
+          text: "Would you like to create a worker at src/index.ts?",
+          result: false,
         }
       );
       await runWrangler("init");
@@ -314,6 +440,10 @@ describe("wrangler", () => {
         {
           text: "Would you like to install the type definitions for Workers into your package.json?",
           result: true,
+        },
+        {
+          text: "Would you like to create a worker at src/index.ts?",
+          result: false,
         }
       );
       fs.writeFileSync(

packages/wrangler/src/index.tsx

@@ -1,5 +1,5 @@
 import * as fs from "node:fs";
-import { readFile, writeFile } from "node:fs/promises";
+import { readFile, writeFile, mkdir } from "node:fs/promises";
 import path from "node:path/posix";
 import { setTimeout } from "node:timers/promises";
 import TOML from "@iarna/toml";
@@ -264,11 +264,13 @@ export async function main(argv: string[]): Promise<void> {
         }
       }
 
+      let isTypescriptProject = false;
       let pathToTSConfig = await findUp("tsconfig.json");
       if (!pathToTSConfig) {
         // If there's no tsconfig, offer to create one
         // and install @cloudflare/workers-types
         if (await confirm("Would you like to use typescript?")) {
+          isTypescriptProject = true;
           await writeFile(
             path.join(process.cwd(), "tsconfig.json"),
             JSON.stringify(
@@ -298,6 +300,7 @@ export async function main(argv: string[]): Promise<void> {
           pathToTSConfig = path.join(process.cwd(), "tsconfig.json");
         }
       } else {
+        isTypescriptProject = true;
         // If there's a tsconfig, check if @cloudflare/workers-types
         // is already installed, and offer to install it if not
         const packageJson = JSON.parse(
@@ -321,8 +324,44 @@ export async function main(argv: string[]): Promise<void> {
             console.log(
               `✨ Installed @cloudflare/workers-types.\nPlease add "@cloudflare/workers-types" to compilerOptions.types in your tsconfig.json`
             );
-          } else {
-            return;
+          }
+        }
+      }
+
+      if (isTypescriptProject) {
+        if (!fs.existsSync(path.join(process.cwd(), "src/index.ts"))) {
+          const shouldCreateSource = await confirm(
+            `Would you like to create a worker at src/index.ts?`
+          );
+          if (shouldCreateSource) {
+            const targetDir = path.join(process.cwd(), "src");
+            await mkdir(targetDir, { recursive: true });
+            await writeFile(
+              path.join(targetDir, "index.ts"),
+              await readFile(
+                path.join(__dirname, "../templates/new.worker.ts"),
+                "utf-8"
+              )
+            );
+            console.log(`✨ Created src/index.ts`);
+          }
+        }
+      } else {
+        if (!fs.existsSync(path.join(process.cwd(), "src/index.js"))) {
+          const shouldCreateSource = await confirm(
+            `Would you like to create a worker at src/index.js?`
+          );
+          if (shouldCreateSource) {
+            const targetDir = path.join(process.cwd(), "src");
+            await mkdir(targetDir, { recursive: true });
+            await writeFile(
+              path.join(targetDir, "index.js"),
+              await readFile(
+                path.join(__dirname, "../templates/new.worker.js"),
+                "utf-8"
+              )
+            );
+            console.log(`✨ Created src/index.js`);
           }
         }
       }

packages/wrangler/src/publish.ts

@@ -130,7 +130,7 @@ export default async function publish(props: Props): Promise<void> {
           stdin: {
             contents: (
               await readFile(
-                path.join(__dirname, "../static-asset-facade.js"),
+                path.join(__dirname, "../templates/static-asset-facade.js"),
                 "utf8"
               )
             ).replace("__ENTRY_POINT__", file),

packages/wrangler/templates/new.worker.js

@@ -0,0 +1,15 @@
+/**
+ * Welcome to Cloudflare Workers! This is your first worker.
+ *
+ * - Run `npx wrangler dev src/index.js` in your terminal to start a development server
+ * - Open a browser tab at http://localhost:8787/ to see your worker in action
+ * - Run `npx wrangler publish src/index.js --name my-worker` to deploy your worker
+ *
+ * Learn more at https://developers.cloudflare.com/workers/
+ */
+
+export default {
+  async fetch(request) {
+    return new Response("Hello World!");
+  },
+};

packages/wrangler/templates/new.worker.ts

@@ -0,0 +1,15 @@
+/**
+ * Welcome to Cloudflare Workers! This is your first worker.
+ *
+ * - Run `wrangler dev src/index.ts` in your terminal to start a development server
+ * - Open a browser tab at http://localhost:8787/ to see your worker in action
+ * - Run `wrangler publish src/index.ts --name my-worker` to deploy your worker
+ *
+ * Learn more at https://developers.cloudflare.com/workers/
+ */
+
+export default {
+  async fetch(request: Request) {
+    return new Response("Hello World!");
+  },
+};

tsconfig.json

@@ -17,8 +17,9 @@
   },
   "exclude": [
     "node_modules/",
-    "packages/*/vendor",
-    "packages/*/*-dist",
-    "packages/wrangler/pages/functions/template-worker.ts"
+    "packages/wrangler/vendor",
+    "packages/wrangler/*-dist",
+    "packages/wrangler/pages/functions/template-worker.ts",
+    "packages/wrangler/templates"
   ]
 }