@backstage/cli 0.28.0-next.1 → 0.28.0

package/dist/lib/bundler/packageDetection.cjs.js

@@ -0,0 +1,117 @@
+'use strict';
+
+var config = require('@backstage/config');
+var chokidar = require('chokidar');
+var fs = require('fs-extra');
+var PQueue = require('p-queue');
+var path = require('path');
+var paths = require('../paths.cjs.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var chokidar__default = /*#__PURE__*/_interopDefaultCompat(chokidar);
+var fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
+var PQueue__default = /*#__PURE__*/_interopDefaultCompat(PQueue);
+
+const DETECTED_MODULES_MODULE_NAME = "__backstage-autodetected-plugins__";
+function readPackageDetectionConfig(config$1) {
+  const packages = config$1.getOptional("app.experimental.packages");
+  if (packages === void 0 || packages === null) {
+    return void 0;
+  }
+  if (typeof packages === "string") {
+    if (packages !== "all") {
+      throw new Error(
+        `Invalid app.experimental.packages mode, got '${packages}', expected 'all'`
+      );
+    }
+    return {};
+  }
+  if (typeof packages !== "object" || Array.isArray(packages)) {
+    throw new Error(
+      "Invalid config at 'app.experimental.packages', expected object"
+    );
+  }
+  const packagesConfig = new config.ConfigReader(
+    packages,
+    "app.experimental.packages"
+  );
+  return {
+    include: packagesConfig.getOptionalStringArray("include"),
+    exclude: packagesConfig.getOptionalStringArray("exclude")
+  };
+}
+async function detectPackages(targetPath, { include, exclude }) {
+  const pkg = await fs__default.default.readJson(
+    path.resolve(targetPath, "package.json")
+  );
+  return Object.keys(pkg.dependencies ?? {}).flatMap((depName) => {
+    if (exclude?.includes(depName)) {
+      return [];
+    }
+    if (include && !include.includes(depName)) {
+      return [];
+    }
+    try {
+      const depPackageJson = require(require.resolve(
+        `${depName}/package.json`,
+        { paths: [targetPath] }
+      ));
+      if (["frontend-plugin", "frontend-plugin-module"].includes(
+        depPackageJson.backstage?.role ?? ""
+      )) {
+        const exp = depPackageJson.exports;
+        if (exp && typeof exp === "object" && "./alpha" in exp) {
+          return [
+            { name: depName, import: depName },
+            { name: depName, export: "./alpha", import: `${depName}/alpha` }
+          ];
+        }
+        return [{ name: depName, import: depName }];
+      }
+    } catch {
+    }
+    return [];
+  });
+}
+const writeQueue = new PQueue__default.default({ concurrency: 1 });
+async function writeDetectedPackagesModule(pkgs) {
+  const requirePackageScript = pkgs?.map(
+    (pkg) => `{ name: ${JSON.stringify(pkg.name)}, export: ${JSON.stringify(
+      pkg.export
+    )}, default: require('${pkg.import}').default }`
+  ).join(",");
+  await writeQueue.add(
+    () => fs__default.default.writeFile(
+      path.join(
+        paths.paths.targetRoot,
+        "node_modules",
+        `${DETECTED_MODULES_MODULE_NAME}.js`
+      ),
+      `window['__@backstage/discovered__'] = { modules: [${requirePackageScript}] };`
+    )
+  );
+}
+async function createDetectedModulesEntryPoint(options) {
+  const { config, watch, targetPath } = options;
+  const detectionConfig = readPackageDetectionConfig(config);
+  if (!detectionConfig) {
+    return [];
+  }
+  if (watch) {
+    const watcher = chokidar__default.default.watch(path.resolve(targetPath, "package.json"));
+    watcher.on("change", async () => {
+      await writeDetectedPackagesModule(
+        await detectPackages(targetPath, detectionConfig)
+      );
+      watch();
+    });
+  }
+  await writeDetectedPackagesModule(
+    await detectPackages(targetPath, detectionConfig)
+  );
+  return [DETECTED_MODULES_MODULE_NAME];
+}
+
+exports.createDetectedModulesEntryPoint = createDetectedModulesEntryPoint;
+//# sourceMappingURL=packageDetection.cjs.js.map

package/dist/lib/bundler/paths.cjs.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var fs = require('fs-extra');
+var path = require('path');
+var paths = require('../paths.cjs.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
+
+function resolveBundlingPaths(options) {
+  const { entry, targetDir = paths.paths.targetDir } = options;
+  const resolveTargetModule = (pathString) => {
+    for (const ext of ["mjs", "js", "ts", "tsx", "jsx"]) {
+      const filePath = path.resolve(targetDir, `${pathString}.${ext}`);
+      if (fs__default.default.pathExistsSync(filePath)) {
+        return filePath;
+      }
+    }
+    return path.resolve(targetDir, `${pathString}.js`);
+  };
+  let targetPublic = void 0;
+  let targetHtml = path.resolve(targetDir, "public/index.html");
+  if (fs__default.default.pathExistsSync(targetHtml)) {
+    targetPublic = path.resolve(targetDir, "public");
+  } else {
+    targetHtml = path.resolve(targetDir, `${entry}.html`);
+    if (!fs__default.default.pathExistsSync(targetHtml)) {
+      targetHtml = paths.paths.resolveOwn("templates/serve_index.html");
+    }
+  }
+  const targetRunFile = path.resolve(targetDir, "src/run.ts");
+  const runFileExists = fs__default.default.pathExistsSync(targetRunFile);
+  return {
+    targetHtml,
+    targetPublic,
+    targetPath: path.resolve(targetDir, "."),
+    targetRunFile: runFileExists ? targetRunFile : void 0,
+    targetDist: path.resolve(targetDir, options.dist ?? "dist"),
+    targetAssets: path.resolve(targetDir, "assets"),
+    targetSrc: path.resolve(targetDir, "src"),
+    targetDev: path.resolve(targetDir, "dev"),
+    targetEntry: resolveTargetModule(entry),
+    targetTsConfig: paths.paths.resolveTargetRoot("tsconfig.json"),
+    targetPackageJson: path.resolve(targetDir, "package.json"),
+    rootNodeModules: paths.paths.resolveTargetRoot("node_modules"),
+    root: paths.paths.targetRoot
+  };
+}
+async function resolveOptionalBundlingPaths(options) {
+  const resolvedPaths = resolveBundlingPaths(options);
+  if (await fs__default.default.pathExists(resolvedPaths.targetEntry)) {
+    return resolvedPaths;
+  }
+  return void 0;
+}
+
+exports.resolveBundlingPaths = resolveBundlingPaths;
+exports.resolveOptionalBundlingPaths = resolveOptionalBundlingPaths;
+//# sourceMappingURL=paths.cjs.js.map

package/dist/lib/bundler/server.cjs.js

@@ -0,0 +1,286 @@
+'use strict';
+
+var chalk = require('chalk');
+var fs = require('fs-extra');
+var openBrowser = require('react-dev-utils/openBrowser');
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var paths$1 = require('../paths.cjs.js');
+var config = require('../config.cjs.js');
+var config$1 = require('./config.cjs.js');
+var packageDetection = require('./packageDetection.cjs.js');
+var paths = require('./paths.cjs.js');
+var hasReactDomClient = require('./hasReactDomClient.cjs.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var chalk__default = /*#__PURE__*/_interopDefaultCompat(chalk);
+var fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
+var openBrowser__default = /*#__PURE__*/_interopDefaultCompat(openBrowser);
+var webpack__default = /*#__PURE__*/_interopDefaultCompat(webpack);
+var WebpackDevServer__default = /*#__PURE__*/_interopDefaultCompat(WebpackDevServer);
+
+async function serveBundle(options) {
+  const paths$2 = paths.resolveBundlingPaths(options);
+  const targetPkg = await fs__default.default.readJson(paths$2.targetPackageJson);
+  if (options.verifyVersions) {
+    if (targetPkg.dependencies?.["react-router"]?.includes("beta") || targetPkg.dependencies?.["react-router-dom"]?.includes("beta")) {
+      console.warn(
+        chalk__default.default.yellow(`
+DEPRECATION WARNING: React Router Beta is deprecated and support for it will be removed in a future release.
+                     Please migrate to use React Router v6 stable.
+                     See https://backstage.io/docs/tutorials/react-router-stable-migration
+`)
+      );
+    }
+  }
+  checkReactVersion();
+  const { name } = await fs__default.default.readJson(paths$1.paths.resolveTarget("package.json"));
+  let webpackServer = void 0;
+  let viteServer = void 0;
+  let latestFrontendAppConfigs = [];
+  const cliConfig = await config.loadCliConfig({
+    args: options.configPaths,
+    fromPackage: name,
+    withFilteredKeys: true,
+    watch(appConfigs) {
+      latestFrontendAppConfigs = appConfigs;
+      webpackServer?.invalidate();
+      viteServer?.restart();
+    }
+  });
+  latestFrontendAppConfigs = cliConfig.frontendAppConfigs;
+  const appBaseUrl = cliConfig.frontendConfig.getOptionalString("app.baseUrl");
+  const backendBaseUrl = cliConfig.frontendConfig.getOptionalString("backend.baseUrl");
+  if (appBaseUrl && appBaseUrl === backendBaseUrl) {
+    console.log(
+      chalk__default.default.yellow(
+        `\u26A0\uFE0F   Conflict between app baseUrl and backend baseUrl:
+
+    app.baseUrl:     ${appBaseUrl}
+    backend.baseUrl: ${backendBaseUrl}
+
+    Must have unique hostname and/or ports.
+
+    This can be resolved by changing app.baseUrl and backend.baseUrl to point to their respective local development ports.
+`
+      )
+    );
+  }
+  const { frontendConfig, fullConfig } = cliConfig;
+  const url = config$1.resolveBaseUrl(frontendConfig, options.moduleFederation);
+  const { host, port } = config$1.resolveEndpoint(
+    frontendConfig,
+    options.moduleFederation
+  );
+  const detectedModulesEntryPoint = await packageDetection.createDetectedModulesEntryPoint({
+    config: fullConfig,
+    targetPath: paths$2.targetPath,
+    watch() {
+      webpackServer?.invalidate();
+      viteServer?.restart();
+    }
+  });
+  const rspack = process.env.EXPERIMENTAL_RSPACK ? require("@rspack/core") : void 0;
+  const commonConfigOptions = {
+    ...options,
+    checksEnabled: options.checksEnabled,
+    isDev: true,
+    baseUrl: url,
+    frontendConfig,
+    rspack,
+    getFrontendAppConfigs: () => {
+      return latestFrontendAppConfigs;
+    }
+  };
+  const config$2 = await config$1.createConfig(paths$2, {
+    ...commonConfigOptions,
+    additionalEntryPoints: detectedModulesEntryPoint,
+    moduleFederation: options.moduleFederation
+  });
+  if (process.env.EXPERIMENTAL_VITE) {
+    const vite = require("vite");
+    const { default: viteReact } = require("@vitejs/plugin-react");
+    const { default: viteYaml } = require("@modyfi/vite-plugin-yaml");
+    const { nodePolyfills: viteNodePolyfills } = require("vite-plugin-node-polyfills");
+    const { createHtmlPlugin: viteHtml } = require("vite-plugin-html");
+    viteServer = await vite.createServer({
+      define: {
+        "process.argv": JSON.stringify(process.argv),
+        "process.env.APP_CONFIG": JSON.stringify(cliConfig.frontendAppConfigs),
+        // This allows for conditional imports of react-dom/client, since there's no way
+        // to check for presence of it in source code without module resolution errors.
+        "process.env.HAS_REACT_DOM_CLIENT": JSON.stringify(hasReactDomClient.hasReactDomClient())
+      },
+      optimizeDeps: {
+        esbuildOptions: {
+          plugins: [
+            {
+              name: "custom-define",
+              setup(build) {
+                const define = build.initialOptions.define ||= {};
+                define["process.env.HAS_REACT_DOM_CLIENT"] = JSON.stringify(
+                  hasReactDomClient.hasReactDomClient()
+                );
+                define["process.env.NODE_ENV"] = JSON.stringify("development");
+              }
+            }
+          ]
+        }
+      },
+      plugins: [
+        viteReact(),
+        viteNodePolyfills({
+          include: [
+            "buffer",
+            "events",
+            "fs",
+            "http",
+            "https",
+            "os",
+            "path",
+            "process",
+            "querystring",
+            "stream",
+            "url",
+            "util",
+            "zlib"
+          ],
+          globals: {
+            global: true,
+            Buffer: true,
+            process: true
+          }
+        }),
+        viteYaml(),
+        viteHtml({
+          entry: paths$2.targetEntry,
+          // todo(blam): we should look at contributing to thPe plugin here
+          // to support absolute paths, but works in the interim at least.
+          template: "public/index.html",
+          inject: {
+            data: {
+              config: frontendConfig,
+              publicPath: config$2.output?.publicPath
+            }
+          }
+        })
+      ],
+      server: {
+        host,
+        port
+      },
+      publicDir: paths$2.targetPublic,
+      root: paths$2.targetPath
+    });
+  } else {
+    const bundler = rspack ?? webpack__default.default;
+    const DevServer = rspack ? require("@rspack/dev-server").RspackDevServer : WebpackDevServer__default.default;
+    const publicPaths = await paths.resolveOptionalBundlingPaths({
+      entry: "src/index-public-experimental",
+      dist: "dist/public"
+    });
+    if (publicPaths) {
+      console.log(
+        chalk__default.default.yellow(
+          `\u26A0\uFE0F  WARNING: The app /public entry point is an experimental feature that may receive immediate breaking changes.`
+        )
+      );
+    }
+    const compiler = publicPaths ? bundler([config$2, await config$1.createConfig(publicPaths, commonConfigOptions)]) : bundler(config$2);
+    webpackServer = new DevServer(
+      {
+        hot: !process.env.CI,
+        devMiddleware: {
+          publicPath: config$2.output?.publicPath,
+          stats: "errors-warnings"
+        },
+        static: paths$2.targetPublic ? {
+          publicPath: config$2.output?.publicPath,
+          directory: paths$2.targetPublic
+        } : void 0,
+        historyApiFallback: options.moduleFederation?.mode === "remote" ? false : {
+          // Paths with dots should still use the history fallback.
+          // See https://github.com/facebookincubator/create-react-app/issues/387.
+          disableDotRule: true,
+          // The index needs to be rewritten relative to the new public path, including subroutes.
+          index: `${config$2.output?.publicPath}index.html`
+        },
+        server: url.protocol === "https:" ? {
+          type: "https",
+          options: {
+            cert: fullConfig.getString("app.https.certificate.cert"),
+            key: fullConfig.getString("app.https.certificate.key")
+          }
+        } : {},
+        host,
+        port,
+        proxy: targetPkg.proxy,
+        // When the dev server is behind a proxy, the host and public hostname differ
+        allowedHosts: [url.hostname],
+        client: {
+          webSocketURL: { hostname: host, port }
+        },
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          "Access-Control-Allow-Methods": "GET, OPTIONS",
+          "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
+        }
+      },
+      compiler
+    );
+  }
+  await viteServer?.listen();
+  await new Promise(async (resolve, reject) => {
+    if (webpackServer) {
+      webpackServer.startCallback((err) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        resolve();
+      });
+    } else {
+      resolve();
+    }
+  });
+  if (!options.skipOpenBrowser) {
+    openBrowser__default.default(url.href);
+  }
+  const waitForExit = async () => {
+    for (const signal of ["SIGINT", "SIGTERM"]) {
+      process.on(signal, () => {
+        webpackServer?.stop();
+        viteServer?.close();
+        process.exit();
+      });
+    }
+    return new Promise(() => {
+    });
+  };
+  return waitForExit;
+}
+function checkReactVersion() {
+  try {
+    const reactPkgPath = require.resolve("react/package.json", {
+      paths: [paths$1.paths.targetRoot]
+    });
+    const reactPkg = require(reactPkgPath);
+    if (reactPkg.version.startsWith("16.")) {
+      console.log(
+        chalk__default.default.yellow(
+          `
+\u26A0\uFE0F                                                                           \u26A0\uFE0F
+\u26A0\uFE0F You are using React version 16, which is deprecated for use in Backstage. \u26A0\uFE0F
+\u26A0\uFE0F Please upgrade to React 17 by updating your packages/app dependencies.    \u26A0\uFE0F
+\u26A0\uFE0F                                                                           \u26A0\uFE0F
+`
+        )
+      );
+    }
+  } catch {
+  }
+}
+
+exports.serveBundle = serveBundle;
+//# sourceMappingURL=server.cjs.js.map

package/dist/lib/bundler/transforms.cjs.js

@@ -0,0 +1,172 @@
+'use strict';
+
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
+var svgrTemplate = require('../svgrTemplate.cjs.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var MiniCssExtractPlugin__default = /*#__PURE__*/_interopDefaultCompat(MiniCssExtractPlugin);
+
+const transforms = (options) => {
+  const { isDev, isBackend, rspack } = options;
+  const CssExtractRspackPlugin = rspack ? rspack.CssExtractRspackPlugin : MiniCssExtractPlugin__default.default;
+  function insertBeforeJssStyles(element) {
+    const head = document.head;
+    const firstJssNode = head.querySelector("style[data-jss]");
+    if (!firstJssNode) {
+      head.appendChild(element);
+    } else {
+      head.insertBefore(element, firstJssNode);
+    }
+  }
+  const loaders = [
+    {
+      test: /\.(tsx?)$/,
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: rspack ? "builtin:swc-loader" : require.resolve("swc-loader"),
+          options: {
+            jsc: {
+              target: "es2022",
+              externalHelpers: !isBackend,
+              parser: {
+                syntax: "typescript",
+                tsx: !isBackend,
+                dynamicImport: true
+              },
+              transform: {
+                react: isBackend ? void 0 : {
+                  runtime: "automatic",
+                  refresh: isDev
+                }
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      test: /\.(jsx?|mjs|cjs)$/,
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: rspack ? "builtin:swc-loader" : require.resolve("swc-loader"),
+          options: {
+            jsc: {
+              target: "es2022",
+              externalHelpers: !isBackend,
+              parser: {
+                syntax: "ecmascript",
+                jsx: !isBackend,
+                dynamicImport: true
+              },
+              transform: {
+                react: isBackend ? void 0 : {
+                  runtime: "automatic",
+                  refresh: isDev
+                }
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      test: /\.(js|mjs|cjs)$/,
+      resolve: {
+        fullySpecified: false
+      }
+    },
+    {
+      test: [/\.icon\.svg$/],
+      use: [
+        {
+          loader: rspack ? "builtin:swc-loader" : require.resolve("swc-loader"),
+          options: {
+            jsc: {
+              target: "es2022",
+              externalHelpers: !isBackend,
+              parser: {
+                syntax: "ecmascript",
+                jsx: !isBackend,
+                dynamicImport: true
+              }
+            }
+          }
+        },
+        {
+          loader: require.resolve("@svgr/webpack"),
+          options: { babel: false, template: svgrTemplate.svgrTemplate }
+        }
+      ]
+    },
+    {
+      test: [
+        /\.bmp$/,
+        /\.gif$/,
+        /\.jpe?g$/,
+        /\.png$/,
+        /\.frag$/,
+        /\.vert$/,
+        { and: [/\.svg$/, { not: [/\.icon\.svg$/] }] },
+        /\.xml$/,
+        /\.ico$/
+      ],
+      type: "asset/resource",
+      generator: {
+        filename: "static/[name].[hash:8].[ext]"
+      }
+    },
+    {
+      test: /\.(eot|woff|woff2|ttf)$/i,
+      type: "asset/resource",
+      generator: {
+        filename: "static/[name].[hash][ext][query]"
+      }
+    },
+    {
+      test: /\.ya?ml$/,
+      use: require.resolve("yml-loader")
+    },
+    {
+      include: /\.(md)$/,
+      type: "asset/resource",
+      generator: {
+        filename: "static/[name].[hash][ext][query]"
+      }
+    },
+    {
+      test: /\.css$/i,
+      use: [
+        isDev ? {
+          loader: require.resolve("style-loader"),
+          options: {
+            insert: insertBeforeJssStyles
+          }
+        } : CssExtractRspackPlugin.loader,
+        {
+          loader: require.resolve("css-loader"),
+          options: {
+            sourceMap: true
+          }
+        }
+      ]
+    }
+  ];
+  const plugins = new Array();
+  if (!isDev) {
+    plugins.push(
+      new CssExtractRspackPlugin({
+        filename: "static/[name].[contenthash:8].css",
+        chunkFilename: "static/[name].[id].[contenthash:8].css",
+        insert: insertBeforeJssStyles
+        // Only applies to async chunks
+      })
+    );
+  }
+  return { loaders, plugins };
+};
+
+exports.transforms = transforms;
+//# sourceMappingURL=transforms.cjs.js.map