Update Node.js project templates (#4149)

1. Turn on http streaming by default for v4 model
2. Update default Node types for TypeScript projects (Node 20 has been GA for a few months now)
3. Support hot reload for debugging by default

Author: ejizba

src/commands/createNewProject/ProjectCreateStep/JavaScriptProjectCreateStep.ts

@@ -21,10 +21,16 @@ export const azureFunctionsDependencyVersion: string = '^4.0.0';
 
 export class JavaScriptProjectCreateStep extends ScriptProjectCreateStep {
     protected gitignore: string = nodeGitignore;
+    protected functionSubpath: string;
+    protected shouldAddIndexFile: boolean;
 
     constructor() {
         super();
         this.funcignore.push('*.js.map', '*.ts', 'tsconfig.json');
+        // default functionSubpath value is a string
+        this.functionSubpath = getWorkspaceSetting(functionSubpathSetting) as string;
+        // index file only supported when using default folder structure
+        this.shouldAddIndexFile = this.functionSubpath === 'src/functions';
     }
 
     public async executeCore(context: IProjectWizardContext, progress: Progress<{ message?: string | undefined; increment?: number | undefined }>): Promise<void> {
@@ -35,6 +41,10 @@ export class JavaScriptProjectCreateStep extends ScriptProjectCreateStep {
             await AzExtFsExtra.writeJSON(packagePath, this.getPackageJson(context));
         }
         await this._installDependencies(context.projectPath);
+
+        if (isNodeV4Plus(context) && this.shouldAddIndexFile) {
+            await this.addIndexFile(context);
+        }
     }
 
     private async _installDependencies(projectPath: string): Promise<void> {
@@ -56,9 +66,11 @@ export class JavaScriptProjectCreateStep extends ScriptProjectCreateStep {
         };
 
         if (isNodeV4Plus(context)) {
-            // default functionSubpath value is a string
-            const functionSubpath: string = getWorkspaceSetting(functionSubpathSetting) as string;
-            packageJson.main = path.posix.join(functionSubpath, '*.js');
+            if (this.shouldAddIndexFile) {
+                packageJson.main = 'src/{index.js,functions/*.js}';
+            } else {
+                packageJson.main = path.posix.join(this.functionSubpath, '*.js');
+            }
         }
 
         return packageJson;
@@ -83,6 +95,18 @@ export class JavaScriptProjectCreateStep extends ScriptProjectCreateStep {
     protected getPackageJsonDevDeps(_context: IProjectWizardContext): { [key: string]: string } {
         return {};
     }
+
+    protected async addIndexFile(context: IProjectWizardContext): Promise<void> {
+        const indexPath: string = path.join(context.projectPath, 'src', 'index.js');
+        if (await confirmOverwriteFile(context, indexPath)) {
+            await AzExtFsExtra.writeFile(indexPath, `const { app } = require('@azure/functions');
+
+app.setup({
+    enableHttpStream: true,
+});
+`);
+        }
+    }
 }
 
 /**

src/commands/createNewProject/ProjectCreateStep/TypeScriptProjectCreateStep.ts

@@ -7,11 +7,10 @@ import { AzExtFsExtra } from '@microsoft/vscode-azext-utils';
 import * as path from 'path';
 import { type Progress } from 'vscode';
 import { FuncVersion } from '../../../FuncVersion';
-import { functionSubpathSetting, tsConfigFileName, tsDefaultOutDir } from '../../../constants';
+import { tsConfigFileName, tsDefaultOutDir } from '../../../constants';
 import { localize } from '../../../localize';
 import { confirmOverwriteFile } from '../../../utils/fs';
 import { isNodeV4Plus } from '../../../utils/programmingModelUtils';
-import { getWorkspaceSetting } from '../../../vsCodeConfig/settings';
 import { type IProjectWizardContext } from '../IProjectWizardContext';
 import { JavaScriptProjectCreateStep } from './JavaScriptProjectCreateStep';
 
@@ -38,11 +37,12 @@ export class TypeScriptProjectCreateStep extends JavaScriptProjectCreateStep {
     protected getPackageJson(context: IProjectWizardContext): { [key: string]: unknown } {
         const packageJson = super.getPackageJson(context);
         if (isNodeV4Plus(context)) {
-            // default functionSubpath value is a string
-            const functionSubpath: string = getWorkspaceSetting(functionSubpathSetting) as string;
-
             // this is set in the super class, but we want to override it
-            packageJson.main = path.posix.join('dist', functionSubpath, '*.js');
+            if (this.shouldAddIndexFile) {
+                packageJson.main = 'dist/src/{index.js,functions/*.js}';
+            } else {
+                packageJson.main = path.posix.join('dist', this.functionSubpath, '*.js');
+            }
         }
 
         return packageJson;
@@ -71,7 +71,7 @@ export class TypeScriptProjectCreateStep extends JavaScriptProjectCreateStep {
         switch (context.version) {
             case FuncVersion.v4:
                 funcTypesVersion = '3';
-                nodeTypesVersion = isNodeV4Plus(context) ? '18' : '16';
+                nodeTypesVersion = '20';
                 break;
             case FuncVersion.v3:
                 funcTypesVersion = '2';
@@ -96,4 +96,16 @@ export class TypeScriptProjectCreateStep extends JavaScriptProjectCreateStep {
         devDeps['rimraf'] = '^5.0.0';
         return devDeps;
     }
+
+    protected async addIndexFile(context: IProjectWizardContext): Promise<void> {
+        const indexPath: string = path.join(context.projectPath, 'src', 'index.ts');
+        if (await confirmOverwriteFile(context, indexPath)) {
+            await AzExtFsExtra.writeFile(indexPath, `import { app } from '@azure/functions';
+
+app.setup({
+    enableHttpStream: true,
+});
+`);
+        }
+    }
 }

src/commands/initProjectForVSCode/InitVSCodeStep/TypeScriptInitVSCodeStep.ts

@@ -15,6 +15,7 @@ import { JavaScriptInitVSCodeStep } from "./JavaScriptInitVSCodeStep";
 const npmPruneTaskLabel: string = convertToFunctionsTaskLabel('npm prune');
 const npmInstallTaskLabel: string = convertToFunctionsTaskLabel('npm install');
 const npmBuildTaskLabel: string = convertToFunctionsTaskLabel('npm build');
+const npmWatchTaskLabel: string = convertToFunctionsTaskLabel('npm watch');
 const npmCleanTaskLabel: string = convertToFunctionsTaskLabel('npm clean');
 
 export class TypeScriptInitVSCodeStep extends JavaScriptInitVSCodeStep {
@@ -41,7 +42,7 @@ export class TypeScriptInitVSCodeStep extends JavaScriptInitVSCodeStep {
                 command: hostStartCommand,
                 problemMatcher: getFuncWatchProblemMatcher(language),
                 isBackground: true,
-                dependsOn: npmBuildTaskLabel
+                dependsOn: npmWatchTaskLabel
             },
             {
                 type: 'shell',
@@ -50,6 +51,18 @@ export class TypeScriptInitVSCodeStep extends JavaScriptInitVSCodeStep {
                 dependsOn: this.hasCleanScript ? npmCleanTaskLabel : installDependsOn,
                 problemMatcher: '$tsc'
             },
+            {
+                type: 'shell',
+                label: npmWatchTaskLabel,
+                command: 'npm run watch',
+                dependsOn: this.hasCleanScript ? npmCleanTaskLabel : installDependsOn,
+                problemMatcher: "$tsc-watch",
+                group: {
+                    kind: "build",
+                    isDefault: true
+                },
+                isBackground: true
+            },
             {
                 type: 'shell',
                 label: npmInstallTaskLabel,

src/debug/NodeDebugProvider.ts

@@ -14,6 +14,7 @@ export const nodeDebugConfig: DebugConfiguration = {
     name: localize('attachNode', 'Attach to Node Functions'),
     type: 'node',
     request: 'attach',
+    restart: true,
     port: defaultNodeDebugPort,
     preLaunchTask: hostStartTaskName
 };

test/project/validateProject.ts

@@ -69,6 +69,7 @@ export function getTypeScriptValidateOptions(options?: { version?: FuncVersion,
         ],
         expectedTasks: [
             'npm build (functions)',
+            'npm watch (functions)',
             'npm install (functions)',
             'npm prune (functions)',
             'host start'