polish: Added scripts to package.json (#403)

To get wrangler init projects up and running with good ergonomics for deploying and development,
added default scripts "start" & "deploy" with assumed TS or JS files in generated ./src/index
Provide messages of how to utilize the scripts or npx wrangler based on if the scripts were generated.

.changeset/orange-hats-yell.md

@@ -0,0 +1,8 @@
+---
+"wrangler": patch
+---
+
+feat: add scripts to package.json & autogenerate name value when initializing a project
+To get wrangler init projects up and running with good ergonomics for deploying and development,
+added default scripts "start" & "deploy" with assumed TS or JS files in generated ./src/index.
+The name property is now derived from user input on `init <name>` or parent directory if no input is provided.

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

@@ -177,7 +177,7 @@ describe("wrangler", () => {
       const packageJson = JSON.parse(
         fs.readFileSync("./package.json", "utf-8")
       );
-      expect(packageJson.name).toEqual("worker"); // TODO: should we infer the name from the directory?
+      expect(packageJson.name).toContain("wrangler-tests");
       expect(packageJson.version).toEqual("0.0.0");
       expect(packageJson.devDependencies).toEqual({
         wrangler: expect.any(String),
@@ -186,6 +186,28 @@ describe("wrangler", () => {
       expect(mockPackageManager.install).toHaveBeenCalled();
     });
 
+    it("should create a package.json, with the specified name, if none is found and user confirms", async () => {
+      mockConfirm(
+        {
+          text: "No package.json found. Would you like to create one?",
+          result: true,
+        },
+        {
+          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 my-worker");
+      const packageJson = JSON.parse(
+        fs.readFileSync("./package.json", "utf-8")
+      );
+      expect(packageJson.name).toBe("my-worker");
+    });
+
     it("should not touch an existing package.json in the same directory", async () => {
       mockConfirm(
         {
@@ -343,6 +365,176 @@ describe("wrangler", () => {
       expect(fs.existsSync("./src/index.ts")).toBe(true);
     });
 
+    it("should add scripts for a typescript project with .ts extension", async () => {
+      mockConfirm(
+        {
+          text: "No package.json found. Would you like to create one?",
+          result: true,
+        },
+        {
+          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,
+        }
+      );
+      await runWrangler("init");
+
+      expect(fs.existsSync("./package.json")).toBe(true);
+      const packageJson = JSON.parse(
+        fs.readFileSync("./package.json", "utf-8")
+      );
+
+      expect(fs.existsSync("./src/index.js")).toBe(false);
+      expect(fs.existsSync("./src/index.ts")).toBe(true);
+
+      expect(packageJson.scripts.start).toBe("wrangler dev src/index.ts");
+      expect(packageJson.scripts.deploy).toBe("wrangler publish src/index.ts");
+      expect(packageJson.name).toContain("wrangler-tests");
+      expect(packageJson.version).toEqual("0.0.0");
+      expect(std.out).toMatchInlineSnapshot(`
+      "✨ Successfully created wrangler.toml
+      ✨ Created package.json
+      ✨ Created tsconfig.json, installed @cloudflare/workers-types into devDependencies
+      To start developing on your worker, run npm start.
+      To publish your worker on to the internet, run npm run deploy.
+      ✨ Created src/index.ts"
+      `);
+    });
+
+    it("should not overwrite package.json scripts for 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,
+        }
+      );
+      await fsp.writeFile(
+        "./package.json",
+        JSON.stringify({
+          scripts: {
+            start: "test-start",
+            deploy: "test-deploy",
+          },
+        })
+      );
+      const packageJson = JSON.parse(
+        fs.readFileSync("./package.json", "utf-8")
+      );
+      await runWrangler("init");
+
+      expect(fs.existsSync("./src/index.js")).toBe(false);
+      expect(fs.existsSync("./src/index.ts")).toBe(true);
+
+      expect(packageJson.scripts.start).toBe("test-start");
+      expect(packageJson.scripts.deploy).toBe("test-deploy");
+      expect(std.out).toMatchInlineSnapshot(`
+      "✨ Successfully created wrangler.toml
+      ✨ Created tsconfig.json, installed @cloudflare/workers-types into devDependencies
+      To start developing on your worker, npx wrangler dev src/index.ts
+      To publish your worker on to the internet, npx wrangler publish src/index.ts
+      ✨ Created src/index.ts"
+      `);
+    });
+
+    it("should add missing scripts for a non-ts project with .js extension", async () => {
+      mockConfirm(
+        {
+          text: "No package.json found. Would you like to create one?",
+          result: true,
+        },
+        {
+          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,
+        }
+      );
+      await runWrangler("init");
+
+      expect(fs.existsSync("./package.json")).toBe(true);
+      const packageJson = JSON.parse(
+        fs.readFileSync("./package.json", "utf-8")
+      );
+
+      expect(fs.existsSync("./src/index.js")).toBe(true);
+      expect(fs.existsSync("./src/index.ts")).toBe(false);
+
+      expect(packageJson.scripts.start).toBe("wrangler dev src/index.js");
+      expect(packageJson.scripts.deploy).toBe("wrangler publish src/index.js");
+      expect(packageJson.name).toContain("wrangler-tests");
+      expect(packageJson.version).toEqual("0.0.0");
+      expect(std.out).toMatchInlineSnapshot(`
+      "✨ Successfully created wrangler.toml
+      ✨ Created package.json
+      To start developing on your worker, run npm start.
+      To publish your worker on to the internet, run npm run deploy.
+      ✨ Created src/index.js"
+      `);
+    });
+
+    it("should not overwrite package.json scripts for a non-ts project with .js extension", 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,
+        }
+      );
+      await fsp.writeFile(
+        "./package.json",
+        JSON.stringify({
+          scripts: {
+            start: "test-start",
+            deploy: "test-deploy",
+          },
+        })
+      );
+      const packageJson = JSON.parse(
+        fs.readFileSync("./package.json", "utf-8")
+      );
+      await runWrangler("init");
+
+      expect(fs.existsSync("./src/index.js")).toBe(true);
+      expect(fs.existsSync("./src/index.ts")).toBe(false);
+
+      expect(packageJson.scripts.start).toBe("test-start");
+      expect(packageJson.scripts.deploy).toBe("test-deploy");
+      expect(std.out).toMatchInlineSnapshot(`
+      "✨ Successfully created wrangler.toml
+      To start developing on your worker, npx wrangler dev src/index.js
+      To publish your worker on to the internet, npx wrangler publish src/index.js
+      ✨ Created src/index.js"
+      `);
+    });
+
     it("should not offer to create a worker in a non-ts project if a file already exists at the location", async () => {
       mockConfirm(
         {

packages/wrangler/src/index.tsx

@@ -232,17 +232,18 @@ export async function main(argv: string[]): Promise<void> {
       }
 
       let pathToPackageJson = await findUp("package.json");
+      let shouldCreatePackageJson = false;
       if (!pathToPackageJson) {
         // If no package.json exists, ask to create one
-        const shouldCreatePackageJson = await confirm(
+        shouldCreatePackageJson = await confirm(
           "No package.json found. Would you like to create one?"
         );
         if (shouldCreatePackageJson) {
           await writeFile(
             "./package.json",
             JSON.stringify(
               {
-                name: "worker",
+                name: args.name || path.basename(path.resolve(process.cwd())),
                 version: "0.0.0",
                 devDependencies: {
                   wrangler: wranglerVersion,
@@ -348,6 +349,47 @@ export async function main(argv: string[]): Promise<void> {
         }
       }
 
+      const packageJsonContent = JSON.parse(
+        await readFile(pathToPackageJson, "utf-8")
+      );
+      const shouldWritePackageJsonScripts =
+        !packageJsonContent.scripts?.start &&
+        !packageJsonContent.scripts?.deploy &&
+        shouldCreatePackageJson;
+      async function writePackageJsonScripts(
+        isWritingScripts: boolean,
+        packagePath: string,
+        scriptPath: string
+      ) {
+        if (isWritingScripts) {
+          await writeFile(
+            packagePath,
+            JSON.stringify(
+              {
+                ...packageJsonContent,
+                scripts: {
+                  ...packageJsonContent.scripts,
+                  start: `wrangler dev ${scriptPath}`,
+                  deploy: `wrangler publish ${scriptPath}`,
+                },
+              },
+              null,
+              "  "
+            ) + "\n"
+          );
+          console.log(`To start developing on your worker, run npm start.`);
+          console.log(
+            `To publish your worker on to the internet, run npm run deploy.`
+          );
+        } else {
+          console.log(
+            `To start developing on your worker, npx wrangler dev ${scriptPath}`
+          );
+          console.log(
+            `To publish your worker on to the internet, npx wrangler publish ${scriptPath}`
+          );
+        }
+      }
       if (isTypescriptProject) {
         if (!fs.existsSync("./src/index.ts")) {
           const shouldCreateSource = await confirm(
@@ -362,6 +404,13 @@ export async function main(argv: string[]): Promise<void> {
                 "utf-8"
               )
             );
+
+            await writePackageJsonScripts(
+              shouldWritePackageJsonScripts,
+              pathToPackageJson,
+              "src/index.ts"
+            );
+
             console.log(`✨ Created src/index.ts`);
           }
         }
@@ -379,6 +428,13 @@ export async function main(argv: string[]): Promise<void> {
                 "utf-8"
               )
             );
+
+            await writePackageJsonScripts(
+              shouldWritePackageJsonScripts,
+              pathToPackageJson,
+              "src/index.js"
+            );
+
             console.log(`✨ Created src/index.js`);
           }
         }