feat(scripts): Args type for script arguments (#11946)

.changesets/11946.md

@@ -0,0 +1,4 @@
+- feat(scripts): Args type for script arguments (#11946) by @Tobbe
+
+Generated scripts will now come with an `Args` interface that you can add your
+arguments to for better TS support.

packages/cli/src/commands/generate/script/__tests__/__snapshots__/script.test.ts.snap

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`creates a JavaScript function to execute 1`] = `
-"// To access your database
-// Append api/* to import from api and web/* to import from web
-import { db } from 'api/src/lib/db'
+"// Append api/* to import from api and web/* to import from web
 
+// To access your database uncomment the line below
+// import { db } from 'api/src/lib/db'
 
 export default async ({ args }) => {
   // Your script here...
@@ -15,12 +15,17 @@ export default async ({ args }) => {
 `;
 
 exports[`creates a TypeScript function to execute 1`] = `
-"// To access your database
-// Append api/* to import from api and web/* to import from web
-import { db } from 'api/src/lib/db'
+"// Append api/* to import from api and web/* to import from web
 
+// To access your database uncomment the line below
+// import { db } from 'api/src/lib/db'
 
-export default async ({ args }) => {
+interface Args {
+  _: string[]
+  [key: string]: unknown
+}
+
+export default async ({ args }: Args) => {
   // Your script here...
   console.log(':: Executing script with args ::')
   console.log(args)

packages/cli/src/commands/generate/script/__tests__/script.test.ts

@@ -7,10 +7,10 @@ import path from 'path'
 import { test, expect } from 'vitest'
 import yargs from 'yargs'
 
-import * as script from '../script'
+import * as script from '../script.js'
 
-test('creates a JavaScript function to execute', () => {
-  const output = script.files({
+test('creates a JavaScript function to execute', async () => {
+  const output = await script.files({
     name: 'scriptyMcScript',
     typescript: false,
   })
@@ -23,8 +23,8 @@ test('creates a JavaScript function to execute', () => {
   expect(output[expectedOutputPath]).toMatchSnapshot()
 })
 
-test('creates a TypeScript function to execute', () => {
-  const output = script.files({
+test('creates a TypeScript function to execute', async () => {
+  const output = await script.files({
     name: 'typescriptyTypescript',
     typescript: true,
   })

packages/cli/src/commands/generate/script/script.js

@@ -7,26 +7,30 @@ import terminalLink from 'terminal-link'
 import { recordTelemetryAttributes } from '@redwoodjs/cli-helpers'
 import { errorTelemetry } from '@redwoodjs/telemetry'
 
-import { getPaths, writeFilesTask } from '../../../lib'
+import { getPaths, writeFilesTask, transformTSToJS } from '../../../lib'
 import c from '../../../lib/colors'
 import { prepareForRollback } from '../../../lib/rollback'
 import { validateName, yargsDefaults } from '../helpers'
 
-const TEMPLATE_PATH = path.resolve(__dirname, 'templates', 'script.js.template')
+const TEMPLATE_PATH = path.resolve(__dirname, 'templates', 'script.ts.template')
 const TSCONFIG_TEMPLATE = path.resolve(
   __dirname,
   'templates',
   'tsconfig.json.template',
 )
 
-export const files = ({ name, typescript = false }) => {
+export const files = async ({ name, typescript = false }) => {
   const outputFilename = `${name}.${typescript ? 'ts' : 'js'}`
   const outputPath = path.join(getPaths().scripts, outputFilename)
 
   const scriptTsConfigPath = path.join(getPaths().scripts, 'tsconfig.json')
 
+  const template = fs.readFileSync(TEMPLATE_PATH, 'utf-8')
+
   return {
-    [outputPath]: fs.readFileSync(TEMPLATE_PATH, 'utf-8'),
+    [outputPath]: typescript
+      ? template
+      : await transformTSToJS(outputPath, template),
 
     // Add tsconfig for type and cmd+click support if project is TS
     ...(typescript &&

packages/cli/src/commands/generate/script/templates/script.ts.template

@@ -0,0 +1,15 @@
+// Append api/* to import from api and web/* to import from web
+
+// To access your database uncomment the line below
+// import { db } from 'api/src/lib/db'
+
+interface Args {
+  _: string[]
+  [key: string]: unknown
+}
+
+export default async ({ args }: Args) => {
+  // Your script here...
+  console.log(':: Executing script with args ::')
+  console.log(args)
+}