Fixes to make web frameworks work for plugin (#6000)

Author: hsubox76

firebase-vscode/tsconfig.json

@@ -5,7 +5,7 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "typeRoots": ["node_modules/@types", "../src/types"],
-    "module": "ES2015",
+    "module": "es2020",
     "moduleResolution": "node",
     "target": "ES2020",
     "outDir": "dist",

firebase-vscode/webpack.prod.js

@@ -1,7 +1,16 @@
 const { merge } = require("webpack-merge");
+const TerserPlugin = require("terser-webpack-plugin");
 const common = require("./webpack.common.js");
 
 module.exports = common.map(config => merge(config, {
-  mode: "production"
+  mode: "production",
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin({
+      terserOptions: {
+        keep_classnames: /AbortSignal/,
+        keep_fnames: /AbortSignal/
+      }
+    }), '...']
+  }
 }));
-

src/dynamicImport.js

@@ -1,10 +1,20 @@
 const { pathToFileURL } = require("url");
 
+// If being compiled with webpack, use non webpack require for these calls.
+// (VSCode plugin uses webpack which by default replaces require calls
+// with its own require, which doesn't work on files)
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const requireFunc =
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore prevent VSCE webpack from erroring on non_webpack_require
+  // eslint-disable-next-line camelcase
+  typeof __webpack_require__ === "function" ? __non_webpack_require__ : require;
+
 exports.dynamicImport = function(mod) {
     if (mod.startsWith("file://")) return import(mod);
     if (mod.startsWith("/")) return import(pathToFileURL(mod).toString());
     try {
-        const path = require.resolve(mod);
+        const path = requireFunc.resolve(mod);
         return import(pathToFileURL(path).toString());
     } catch(e) {
         return Promise.reject(e);

src/frameworks/constants.ts

@@ -1,6 +1,4 @@
-import { readdirSync, statSync } from "fs";
-import { join } from "path";
-import { Framework, SupportLevel } from "./interfaces";
+import { SupportLevel } from "./interfaces";
 import * as clc from "colorette";
 
 export const NPM_COMMAND_TIMEOUT_MILLIES = 10_000;
@@ -47,28 +45,6 @@ export const ALLOWED_SSR_REGIONS = [
 
 export const I18N_ROOT = "/";
 
-export const WebFrameworks: Record<string, Framework> = Object.fromEntries(
-  readdirSync(__dirname)
-    .filter((path) => statSync(join(__dirname, path)).isDirectory())
-    .map((path) => {
-      // If not called by the CLI, (e.g., by the VS Code Extension)
-      // __dirname won't refer to this folder and these files won't be available.
-      // Instead it may find sibling folders that aren't modules, and this
-      // require will throw.
-      // Long term fix may be to bundle this instead of reading files at runtime
-      // but for now, this prevents crashing.
-      try {
-        return [path, require(join(__dirname, path))];
-      } catch (e) {
-        return [];
-      }
-    })
-    .filter(
-      ([, obj]) =>
-        obj && obj.name && obj.discover && obj.build && obj.type !== undefined && obj.support
-    )
-);
-
 export function GET_DEFAULT_BUILD_TARGETS() {
   return Promise.resolve(["production", "development"]);
 }

src/frameworks/index.ts

@@ -39,7 +39,6 @@ import {
   NODE_VERSION,
   SupportLevelWarnings,
   VALID_ENGINES,
-  WebFrameworks,
 } from "./constants";
 import {
   BUILD_TARGET_PURPOSE,
@@ -54,6 +53,7 @@ import { ensureTargeted } from "../functions/ensureTargeted";
 import { isDeepStrictEqual } from "util";
 import { resolveProjectPath } from "../projectPath";
 import { logger } from "../logger";
+import { WebFrameworks } from "./frameworks";
 
 export { WebFrameworks };
 

src/frameworks/utils.ts

@@ -246,11 +246,22 @@ export function relativeRequire(dir: string, mod: "@nuxt/kit"): Promise<any>;
  */
 export function relativeRequire(dir: string, mod: string) {
   try {
-    const path = require.resolve(mod, { paths: [dir] });
+    // If being compiled with webpack, use non webpack require for these calls.
+    // (VSCode plugin uses webpack which by default replaces require calls
+    // with its own require, which doesn't work on files)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const requireFunc: typeof require =
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore prevent VSCE webpack from erroring on non_webpack_require
+      // eslint-disable-next-line camelcase
+      typeof __webpack_require__ === "function" ? __non_webpack_require__ : require;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore prevent VSCE webpack from erroring on non_webpack_require
+    const path = requireFunc.resolve(mod, { paths: [dir] });
     if (extname(path) === ".mjs") {
       return dynamicImport(pathToFileURL(path).toString());
     } else {
-      return require(path);
+      return requireFunc(path);
     }
   } catch (e) {
     const path = relative(process.cwd(), dir);