From 1a5ecd034a1bb85d1f6841b214123e4d41895d26 Mon Sep 17 00:00:00 2001 From: blam Date: Thu, 19 Oct 2023 13:49:07 +0200 Subject: [PATCH] chore: refactor and remove cjs Signed-off-by: blam --- .changeset/cold-pigs-end.md | 7 ---- packages/cli/package.json | 1 - packages/cli/src/lib/bundler/config.ts | 10 +---- .../cli/src/lib/bundler/hasReactDomClient.ts | 23 +++++++++++ packages/cli/src/lib/bundler/server.ts | 19 ++++------ yarn.lock | 38 +------------------ 6 files changed, 34 insertions(+), 64 deletions(-) delete mode 100644 .changeset/cold-pigs-end.md create mode 100644 packages/cli/src/lib/bundler/hasReactDomClient.ts diff --git a/.changeset/cold-pigs-end.md b/.changeset/cold-pigs-end.md deleted file mode 100644 index 13c391ea25..0000000000 --- a/.changeset/cold-pigs-end.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@backstage/plugin-scaffolder-react': patch -'@backstage/plugin-scaffolder': patch -'@backstage/plugin-home': patch ---- - -Remove usages of `require` diff --git a/packages/cli/package.json b/packages/cli/package.json index bf5597940b..4f26a72785 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -134,7 +134,6 @@ "terser-webpack-plugin": "^5.1.3", "util": "^0.12.3", "vite": "^4.4.9", - "vite-plugin-commonjs": "^0.10.0", "vite-plugin-html": "^3.2.0", "vite-plugin-node-polyfills": "^0.14.1", "webpack": "^5.70.0", diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts index 534ffe8c58..542cc83ce9 100644 --- a/packages/cli/src/lib/bundler/config.ts +++ b/packages/cli/src/lib/bundler/config.ts @@ -39,6 +39,7 @@ import { runPlain } from '../run'; import { transforms } from './transforms'; import { version } from '../../lib/version'; import yn from 'yn'; +import { hasReactDomClient } from './hasReactDomClient'; const BUILD_CACHE_ENV_VAR = 'BACKSTAGE_CLI_EXPERIMENTAL_BUILD_CACHE'; @@ -81,15 +82,6 @@ async function readBuildInfo() { }; } -function hasReactDomClient() { - try { - require.resolve('react-dom/client'); - return true; - } catch { - return false; - } -} - export async function createConfig( paths: BundlingPaths, options: BundlingOptions, diff --git a/packages/cli/src/lib/bundler/hasReactDomClient.ts b/packages/cli/src/lib/bundler/hasReactDomClient.ts new file mode 100644 index 0000000000..e7ef7bbac9 --- /dev/null +++ b/packages/cli/src/lib/bundler/hasReactDomClient.ts @@ -0,0 +1,23 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +export function hasReactDomClient() { + try { + require.resolve('react-dom/client'); + return true; + } catch { + return false; + } +} diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts index 14714a3d6e..f7847c710e 100644 --- a/packages/cli/src/lib/bundler/server.ts +++ b/packages/cli/src/lib/bundler/server.ts @@ -24,7 +24,6 @@ import webpack from 'webpack'; import WebpackDevServer from 'webpack-dev-server'; import vite from 'vite'; import viteReact from '@vitejs/plugin-react'; -import viteCommonJs from 'vite-plugin-commonjs'; import { nodePolyfills as viteNodePolyfills } from 'vite-plugin-node-polyfills'; import { createHtmlPlugin as viteHtml } from 'vite-plugin-html'; @@ -39,6 +38,7 @@ import { createConfig, resolveBaseUrl } from './config'; import { createDetectedModulesEntryPoint } from './packageDetection'; import { resolveBundlingPaths } from './paths'; import { ServeOptions } from './types'; +import { hasReactDomClient } from './hasReactDomClient'; export async function serveBundle(options: ServeOptions) { const paths = resolveBundlingPaths(options); @@ -166,14 +166,13 @@ export async function serveBundle(options: ServeOptions) { global: 'window', '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()), }, plugins: [ viteReact(), viteNodePolyfills(), - viteCommonJs({ - // todo(blam): this is ugly to work around for just running in the backstage/backstage repo. - filter: id => id.endsWith('renderReactElement.ts'), - }), viteHtml({ entry: paths.targetEntry, // todo(blam): we should look at contributing to thPe plugin here @@ -233,26 +232,24 @@ export async function serveBundle(options: ServeOptions) { client: { webSocketURL: 'auto://0.0.0.0:0/ws', }, - } as any, - compiler as any, + }, + compiler, ); } await new Promise(async (resolve, reject) => { if (process.env.EXPERIMENTAL_VITE) { await (server as vite.ViteDevServer).listen(); - openBrowser(url.href); - resolve(); } else { (server as WebpackDevServer).startCallback((err?: Error) => { if (err) { reject(err); return; } - openBrowser(url.href); - resolve(); }); } + openBrowser(url.href); + resolve(); }); const waitForExit = async () => { diff --git a/yarn.lock b/yarn.lock index cab00c9c3b..f82582ba47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3864,7 +3864,6 @@ __metadata: type-fest: ^2.19.0 util: ^0.12.3 vite: ^4.4.9 - vite-plugin-commonjs: ^0.10.0 vite-plugin-html: ^3.2.0 vite-plugin-node-polyfills: ^0.14.1 webpack: ^5.70.0 @@ -12751,7 +12750,7 @@ __metadata: languageName: node linkType: hard -"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.13, @jridgewell/sourcemap-codec@npm:^1.4.15": +"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.13": version: 1.4.15 resolution: "@jridgewell/sourcemap-codec@npm:1.4.15" checksum: b881c7e503db3fc7f3c1f35a1dd2655a188cc51a3612d76efc8a6eb74728bef5606e6758ee77423e564092b4a518aba569bbb21c9bac5ab7a35b0c6ae7e344c8 @@ -19549,7 +19548,7 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0": +"acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.9.0": version: 8.10.0 resolution: "acorn@npm:8.10.0" bin: @@ -31829,15 +31828,6 @@ __metadata: languageName: node linkType: hard -"magic-string@npm:^0.30.1": - version: 0.30.5 - resolution: "magic-string@npm:0.30.5" - dependencies: - "@jridgewell/sourcemap-codec": ^1.4.15 - checksum: da10fecff0c0a7d3faf756913ce62bd6d5e7b0402be48c3b27bfd651b90e29677e279069a63b764bcdc1b8ecdcdb898f29a5c5ec510f2323e8d62ee057a6eb18 - languageName: node - linkType: hard - "make-dir@npm:^2.0.0, make-dir@npm:^2.1.0": version: 2.1.0 resolution: "make-dir@npm:2.1.0" @@ -42166,30 +42156,6 @@ __metadata: languageName: node linkType: hard -"vite-plugin-commonjs@npm:^0.10.0": - version: 0.10.0 - resolution: "vite-plugin-commonjs@npm:0.10.0" - dependencies: - acorn: ^8.8.2 - fast-glob: ^3.2.12 - magic-string: ^0.30.1 - vite-plugin-dynamic-import: ^1.5.0 - checksum: 3cb9a78d477a3bf7b15bd39c73058c7a5277a9be68528276fa885b4abe9ace801073dc587648248bb749cf070eb817f0ec34d8d32c0c4aac4000b23048776c2b - languageName: node - linkType: hard - -"vite-plugin-dynamic-import@npm:^1.5.0": - version: 1.5.0 - resolution: "vite-plugin-dynamic-import@npm:1.5.0" - dependencies: - acorn: ^8.8.2 - es-module-lexer: ^1.2.1 - fast-glob: ^3.2.12 - magic-string: ^0.30.1 - checksum: 68efd897daa0c72a9f9d3481095dd3f7ec9a822be5a15eef60413734a4c894c5bbd1c1762f02daeef5df59cef212c9f1e7e056315e2a7780816ccafe5c74da6e - languageName: node - linkType: hard - "vite-plugin-html@npm:^3.2.0": version: 3.2.0 resolution: "vite-plugin-html@npm:3.2.0"