diff --git a/client/app-shell/src/app-shell.tsx b/client/app-shell/src/app-shell.tsx index 96fd472ba14..238ab8dd8a4 100644 --- a/client/app-shell/src/app-shell.tsx +++ b/client/app-shell/src/app-shell.tsx @@ -1,4 +1,4 @@ -import { listen, Event } from '@tauri-apps/api/event' +import { listen, type Event } from '@tauri-apps/api/event' import { invoke } from '@tauri-apps/api/tauri' import { logger } from '@sourcegraph/common' @@ -8,7 +8,7 @@ import { logger } from '@sourcegraph/common' // * app-shell.tsx: before the Go backend has started, this is served. If the Go backend crashes, // then the Tauri Rust application can bring the user back here to present debugging/error handling // options. -// * app-main.tsx: served by the Go backend, renders the Sourcegraph web UI that you see everywhere else. +// * app/main.tsx: served by the Go backend, renders the Sourcegraph web UI that you see everywhere else. function addRedirectParamToSignInUrl(url: string, returnTo: string): string { const urlObject = new URL(url) diff --git a/client/build-config/src/esbuild/stylePlugin.ts b/client/build-config/src/esbuild/stylePlugin.ts index f64fb108b32..96370d86cec 100644 --- a/client/build-config/src/esbuild/stylePlugin.ts +++ b/client/build-config/src/esbuild/stylePlugin.ts @@ -7,6 +7,8 @@ import postcss from 'postcss' import postcssModules from 'postcss-modules' import sass from 'sass' +// eslint-disable import/extensions + // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import postcssConfig from '../../../../postcss.config' diff --git a/client/observability-server/BUILD.bazel b/client/observability-server/BUILD.bazel index 3e3f0188c89..db915d86180 100644 --- a/client/observability-server/BUILD.bazel +++ b/client/observability-server/BUILD.bazel @@ -59,9 +59,9 @@ ts_project( jest_test( name = "test", data = [ - "src/webBundleSize/__mocks__/assets/scripts/app.bundle.js", - "src/webBundleSize/__mocks__/assets/scripts/app.bundle.js.br", - "src/webBundleSize/__mocks__/assets/scripts/app.bundle.js.gz", + "src/webBundleSize/__mocks__/assets/scripts/main.js", + "src/webBundleSize/__mocks__/assets/scripts/main.js.br", + "src/webBundleSize/__mocks__/assets/scripts/main.js.gz", "src/webBundleSize/__mocks__/assets/scripts/sg_home.js", "src/webBundleSize/__mocks__/assets/scripts/sg_home.js.br", "src/webBundleSize/__mocks__/assets/scripts/sg_home.js.gz", diff --git a/client/observability-server/src/webBundleSize/__mocks__/assets/scripts/app.bundle.js b/client/observability-server/src/webBundleSize/__mocks__/assets/scripts/app.js similarity index 100% rename from client/observability-server/src/webBundleSize/__mocks__/assets/scripts/app.bundle.js rename to client/observability-server/src/webBundleSize/__mocks__/assets/scripts/app.js diff --git a/client/observability-server/src/webBundleSize/__mocks__/assets/scripts/app.bundle.js.br b/client/observability-server/src/webBundleSize/__mocks__/assets/scripts/app.js.br similarity index 100% rename from client/observability-server/src/webBundleSize/__mocks__/assets/scripts/app.bundle.js.br rename to client/observability-server/src/webBundleSize/__mocks__/assets/scripts/app.js.br diff --git a/client/observability-server/src/webBundleSize/__mocks__/assets/scripts/app.bundle.js.gz b/client/observability-server/src/webBundleSize/__mocks__/assets/scripts/app.js.gz similarity index 100% rename from client/observability-server/src/webBundleSize/__mocks__/assets/scripts/app.bundle.js.gz rename to client/observability-server/src/webBundleSize/__mocks__/assets/scripts/app.js.gz diff --git a/client/observability-server/src/webBundleSize/__mocks__/assets/styles/app.123.bundle.css.br b/client/observability-server/src/webBundleSize/__mocks__/assets/styles/app.123.bundle.br similarity index 100% rename from client/observability-server/src/webBundleSize/__mocks__/assets/styles/app.123.bundle.css.br rename to client/observability-server/src/webBundleSize/__mocks__/assets/styles/app.123.bundle.br diff --git a/client/observability-server/src/webBundleSize/__mocks__/assets/styles/app.123.bundle.css b/client/observability-server/src/webBundleSize/__mocks__/assets/styles/app.123.css similarity index 100% rename from client/observability-server/src/webBundleSize/__mocks__/assets/styles/app.123.bundle.css rename to client/observability-server/src/webBundleSize/__mocks__/assets/styles/app.123.css diff --git a/client/observability-server/src/webBundleSize/__mocks__/assets/styles/app.123.bundle.css.gz b/client/observability-server/src/webBundleSize/__mocks__/assets/styles/app.123.css.gz similarity index 100% rename from client/observability-server/src/webBundleSize/__mocks__/assets/styles/app.123.bundle.css.gz rename to client/observability-server/src/webBundleSize/__mocks__/assets/styles/app.123.css.gz diff --git a/client/observability-server/src/webBundleSize/getBundleSizeStats.test.ts b/client/observability-server/src/webBundleSize/getBundleSizeStats.test.ts index 83ad590a485..019de9ff440 100644 --- a/client/observability-server/src/webBundleSize/getBundleSizeStats.test.ts +++ b/client/observability-server/src/webBundleSize/getBundleSizeStats.test.ts @@ -24,8 +24,8 @@ jest.mock( jest.mock( 'webpack.manifest.json', () => ({ - 'app.js': '/.assets/scripts/app.bundle.js', - 'app.css': '/.assets/styles/app.123.bundle.css', + 'main.js': '/.assets/scripts/main.js', + 'main.css': '/.assets/styles/main.css', }), { virtual: true } ) @@ -39,7 +39,7 @@ describe('getBundleSizeStats', () => { }) expect(stats).toEqual({ - 'scripts/app.bundle.js': { + 'scripts/main.js': { raw: 15, gzip: 6, brotli: 4, @@ -59,7 +59,7 @@ describe('getBundleSizeStats', () => { isJs: true, raw: 15, }, - 'styles/app.123.bundle.css': { + 'styles/main.css': { raw: 25, gzip: 6, brotli: 4, diff --git a/client/web/BUILD.bazel b/client/web/BUILD.bazel index 62b2f258d4b..f9b870ce1da 100644 --- a/client/web/BUILD.bazel +++ b/client/web/BUILD.bazel @@ -398,10 +398,10 @@ ts_project( "src/devsettings/settings/eventLoggingDebug.tsx", "src/devsettings/utils.ts", "src/enterprise/EnterpriseWebApp.tsx", - "src/enterprise/app-main.tsx", "src/enterprise/app/AppAuthCallbackPage.tsx", "src/enterprise/app/components/index.ts", "src/enterprise/app/components/zero-states/AppZeroStates.tsx", + "src/enterprise/app/main.tsx", "src/enterprise/app/routes.tsx", "src/enterprise/app/settings/AppSettingsArea.tsx", "src/enterprise/app/settings/about/AboutPage.tsx", @@ -2126,7 +2126,7 @@ BUNDLE_DATA_DEPS = [ "//:package_json", ], entry_points = { - "src/enterprise/main.js": "app", + "src/enterprise/main.js": "main", "src/enterprise/embed/main.js": "embed", }, env = { @@ -2156,7 +2156,7 @@ webpack_web_app( "//:package_json", ], entry_points = { - "src/enterprise/main.js": "app", + "src/enterprise/main.js": "main", }, env = { "NODE_ENV": "production", diff --git a/client/web/bundlesize.config.js b/client/web/bundlesize.config.js index 4c1619fd4a2..aa53a1a2125 100644 --- a/client/web/bundlesize.config.js +++ b/client/web/bundlesize.config.js @@ -15,7 +15,7 @@ const config = { * Our main entry JavaScript bundles, contains core logic that is loaded on every page. */ { - path: path.join(STATIC_ASSETS_PATH, 'scripts/app.*.bundle.js.br'), + path: path.join(STATIC_ASSETS_PATH, 'scripts/main.*.js.br'), /** * Note: Temporary increase from 400kb. * Primary cause is due to multiple ongoing migrations that mean we are duplicating similar dependencies. @@ -25,17 +25,17 @@ const config = { compression: 'none', }, { - path: path.join(STATIC_ASSETS_PATH, 'scripts/embed.*.bundle.js.br'), + path: path.join(STATIC_ASSETS_PATH, 'scripts/embed.*.js.br'), maxSize: '155kb', compression: 'none', }, { - path: path.join(STATIC_ASSETS_PATH, 'scripts/react.*.bundle.js.br'), + path: path.join(STATIC_ASSETS_PATH, 'scripts/react.*.js.br'), maxSize: '45kb', compression: 'none', }, { - path: path.join(STATIC_ASSETS_PATH, 'scripts/opentelemetry.*.bundle.js.br'), + path: path.join(STATIC_ASSETS_PATH, 'scripts/opentelemetry.*.js.br'), maxSize: '40kb', compression: 'none', }, @@ -68,7 +68,7 @@ const config = { * Our main entry CSS bundle, contains core styles that are loaded on every page. */ { - path: path.join(STATIC_ASSETS_PATH, 'styles/app.*.css.br'), + path: path.join(STATIC_ASSETS_PATH, 'styles/main.*.css.br'), maxSize: '50kb', compression: 'none', }, @@ -81,7 +81,7 @@ const config = { compression: 'none', }, { - path: path.join(STATIC_ASSETS_PATH, 'styles/!(app|embed).*.css.br'), + path: path.join(STATIC_ASSETS_PATH, 'styles/!(main|embed).*.css.br'), maxSize: '25kb', compression: 'none', }, diff --git a/client/web/dev/esbuild/build.ts b/client/web/dev/esbuild/build.ts index 781b83e8c10..4aa9233401b 100644 --- a/client/web/dev/esbuild/build.ts +++ b/client/web/dev/esbuild/build.ts @@ -25,11 +25,11 @@ const isCodyApp = ENVIRONMENT_CONFIG.CODY_APP const omitSlowDeps = ENVIRONMENT_CONFIG.DEV_WEB_BUILDER_OMIT_SLOW_DEPS export const BUILD_OPTIONS: esbuild.BuildOptions = { - entryPoints: { - 'scripts/app': isCodyApp - ? path.join(ROOT_PATH, 'client/web/src/enterprise/app-main.tsx') + entryPoints: [ + isCodyApp + ? path.join(ROOT_PATH, 'client/web/src/enterprise/app/main.tsx') : path.join(ROOT_PATH, 'client/web/src/enterprise/main.tsx'), - }, + ], bundle: true, minify: IS_PRODUCTION, format: 'esm', @@ -38,7 +38,7 @@ export const BUILD_OPTIONS: esbuild.BuildOptions = { jsxDev: IS_DEVELOPMENT, splitting: true, chunkNames: 'chunks/chunk-[name]-[hash]', - entryNames: IS_PRODUCTION ? 'scripts/[name]-[hash]' : undefined, + entryNames: IS_PRODUCTION ? 'scripts/[name]-[hash]' : 'scripts/[name]', outdir: STATIC_ASSETS_PATH, plugins: [ stylePlugin, diff --git a/client/web/dev/esbuild/manifestPlugin.ts b/client/web/dev/esbuild/manifestPlugin.ts index 203661df264..8ff28652afc 100644 --- a/client/web/dev/esbuild/manifestPlugin.ts +++ b/client/web/dev/esbuild/manifestPlugin.ts @@ -10,8 +10,8 @@ import { type WebpackManifest, WEBPACK_MANIFEST_PATH } from '../utils' export const assetPathPrefix = '/.assets' export const getManifest = (jsEntrypoint?: string, cssEntrypoint?: string): WebpackManifest => ({ - 'app.js': path.join(assetPathPrefix, jsEntrypoint ?? 'scripts/app.js'), - 'app.css': path.join(assetPathPrefix, cssEntrypoint ?? 'scripts/app.css'), + 'main.js': path.join(assetPathPrefix, jsEntrypoint ?? 'scripts/main.js'), + 'main.css': path.join(assetPathPrefix, cssEntrypoint ?? 'scripts/main.css'), isModule: true, }) @@ -19,8 +19,6 @@ const writeManifest = async (manifest: WebpackManifest): Promise => { await fs.promises.writeFile(WEBPACK_MANIFEST_PATH, JSON.stringify(manifest, null, 2)) } -const ENTRYPOINT_NAME = 'scripts/app' - /** * An esbuild plugin to write a webpack.manifest.json file (just as Webpack does), for compatibility * with our current Webpack build. @@ -39,12 +37,12 @@ export const manifestPlugin: esbuild.Plugin = { console.error('[manifestPlugin] No entrypoints found') return } - const absoluteEntrypoint: string | undefined = (entryPoints as any)[ENTRYPOINT_NAME] - if (!absoluteEntrypoint) { - console.error('[manifestPlugin] No entrypoint found with the name scripts/app') + if (!Array.isArray(entryPoints) || typeof entryPoints[0] !== 'string' || entryPoints.length === 0) { + console.error('[manifestPlugin] Unexpected entryPoints format') return } - const relativeEntrypoint = path.relative(process.cwd(), absoluteEntrypoint) + const entryPoint = entryPoints[0] + const relativeEntrypoint = path.relative(process.cwd(), entryPoint) if (!outputs) { return diff --git a/client/web/dev/utils/get-index-html.ts b/client/web/dev/utils/get-index-html.ts index 6e17a4a6fef..ffeefe3c434 100644 --- a/client/web/dev/utils/get-index-html.ts +++ b/client/web/dev/utils/get-index-html.ts @@ -16,10 +16,10 @@ export const getWebpackManifest = (): WebpackManifest => JSON.parse(readFileSync(WEBPACK_MANIFEST_PATH, 'utf-8')) as WebpackManifest export interface WebpackManifest { - /** Main app entry JS bundle */ - 'app.js': string - /** Main app entry CSS bundle, only used in production mode */ - 'app.css'?: string + /** Main JS bundle */ + 'main.js': string + /** Main CSS bundle, only used in production mode */ + 'main.css'?: string /** Runtime bundle, only used in development mode */ 'runtime.js'?: string /** React entry bundle, only used in production mode */ @@ -55,8 +55,8 @@ export function getIndexHTML(options: GetHTMLPageOptions): string { const { manifestFile, jsContext, jsContextScript } = options const { - 'app.js': appBundle, - 'app.css': cssBundle, + 'main.js': mainBundle, + 'main.css': mainBundleCSS, 'runtime.js': runtimeBundle, 'react.js': reactBundle, 'opentelemetry.js': oTelBundle, @@ -72,7 +72,7 @@ export function getIndexHTML(options: GetHTMLPageOptions): string { - ${cssBundle ? `` : ''} + ${mainBundleCSS ? `` : ''} ${ ENVIRONMENT_CONFIG.SOURCEGRAPHDOTCOM_MODE ? '' @@ -99,7 +99,7 @@ export function getIndexHTML(options: GetHTMLPageOptions): string { ${runtimeBundle ? `` : ''} ${reactBundle ? `` : ''} ${oTelBundle ? `` : ''} - + ` diff --git a/client/web/src/enterprise/app-main.tsx b/client/web/src/enterprise/app/main.tsx similarity index 84% rename from client/web/src/enterprise/app-main.tsx rename to client/web/src/enterprise/app/main.tsx index 66531576d8b..176b54b3559 100644 --- a/client/web/src/enterprise/app-main.tsx +++ b/client/web/src/enterprise/app/main.tsx @@ -3,7 +3,7 @@ // * app-shell.tsx: before the Go backend has started, this is served. If the Go backend crashes, // then the Tauri Rust application can bring the user back here to present debugging/error handling // options. -// * app-main.tsx: served by the Go backend, renders the Sourcegraph web UI that you see everywhere else. +// * app/main.tsx: served by the Go backend, renders the Sourcegraph web UI that you see everywhere else. // Order is important here // Don't remove the empty lines between these imports @@ -12,18 +12,17 @@ import '@sourcegraph/shared/src/polyfills' // prettier-ignore-end -import '../initBuildInfo' -import '../monitoring/initMonitoring' +import '../../initBuildInfo' +import '../../monitoring/initMonitoring' import { createRoot } from 'react-dom/client' import { logger } from '@sourcegraph/common' import { setLinkComponent } from '@sourcegraph/wildcard' -import { TauriLink } from '../app/TauriLink' -import { initAppShell } from '../storm/app-shell-init' - -import { EnterpriseWebApp } from './EnterpriseWebApp' +import { TauriLink } from '../../app/TauriLink' +import { initAppShell } from '../../storm/app-shell-init' +import { EnterpriseWebApp } from '../EnterpriseWebApp' const appShellPromise = initAppShell() diff --git a/cmd/frontend/internal/app/ui/app.html b/cmd/frontend/internal/app/ui/app.html index 3507e87885c..e2abcd82df7 100644 --- a/cmd/frontend/internal/app/ui/app.html +++ b/cmd/frontend/internal/app/ui/app.html @@ -28,7 +28,7 @@ {{end}} {{end}} {{.Title}} - {{if .Manifest.AppCSSBundlePath}}{{end}} + {{if .Manifest.MainCSSBundlePath}}{{end}} {{if .PreloadedAssets}} @@ -107,10 +107,10 @@
You need to enable JavaScript to run this app. - {{if .Manifest.AppJSRuntimeBundlePath}}{{end}} + {{if .Manifest.RuntimeJSBundlePath}}{{end}} - + {{.Injected.BodyBottom}} diff --git a/cmd/frontend/internal/app/ui/embed.html b/cmd/frontend/internal/app/ui/embed.html index 5b766ab2c46..627513e5fb2 100644 --- a/cmd/frontend/internal/app/ui/embed.html +++ b/cmd/frontend/internal/app/ui/embed.html @@ -37,8 +37,8 @@
You need to enable JavaScript to run this app. - {{if .Manifest.AppJSRuntimeBundlePath}} - + {{if .Manifest.RuntimeJSBundlePath}} + {{end}} diff --git a/doc/dev/how-to/test_phabricator.md b/doc/dev/how-to/test_phabricator.md index 9adbde43210..1b396ecef1f 100644 --- a/doc/dev/how-to/test_phabricator.md +++ b/doc/dev/how-to/test_phabricator.md @@ -32,7 +32,7 @@ ``` 4. Verify that the phabricator assets are served: - `%NGROK_URL%/.assets/extension/scripts/phabricator.bundle.js` - - `%NGROK_URL%/.assets/extension/css/app.bundle.css` + - `%NGROK_URL%/.assets/extension/css/main.css` 5. Set [`sourcegraph.url`](https://phabricator.sgdev.org/config/edit/sourcegraph.url/) to your tunnelled ngrok URL 6. Verify the [`sourcegraph.callsignMappings`](https://phabricator.sgdev.org/config/edit/sourcegraph.callsignMappings/) are correctly set 7. Verify [`sourcegraph.enabled`](https://phabricator.sgdev.org/config/edit/sourcegraph.enabled/) is set to `true` diff --git a/doc/dev/setup/troubleshooting.md b/doc/dev/setup/troubleshooting.md index 787bbc6fcdb..1ece4ddfa3b 100644 --- a/doc/dev/setup/troubleshooting.md +++ b/doc/dev/setup/troubleshooting.md @@ -27,7 +27,7 @@ This means the `frontend` server failed to start, for some reason. Look through If you see this error when opening the app: ``` -500 Internal Server Error template: app.html:21:70: executing "app.html" at : error calling version: open ui/assets/styles/app.bundle.css: no such file or directory +500 Internal Server Error template: app.html:21:70: executing "app.html" at : error calling version: open ui/assets/styles/main.css: no such file or directory ``` that means Webpack hasn't finished compiling the styles yet (it takes about 3 minutes). Simply wait a little while for a message from webpack like `web | Time: 180000ms` to appear in the terminal. diff --git a/ui/assets/manifest.go b/ui/assets/manifest.go index 30b632895e4..8c6e3329da9 100644 --- a/ui/assets/manifest.go +++ b/ui/assets/manifest.go @@ -7,22 +7,22 @@ type WebpackManifest struct { // OpenTelemetryJSBundlePath contains the file name of the OpenTelemetry // dependency bundle, that is required by our main app bundle. OpenTelemetryJSBundlePath string `json:"opentelemetry.js"` - // AppJSBundlePath contains the file name of the main - // Webpack bundle that serves as the entrypoint + // MainJSBundlePath contains the file name of the main + // bundle that serves as the entrypoint // for the webapp code. - AppJSBundlePath string `json:"app.js"` + MainJSBundlePath string `json:"main.js"` // EmbedJSBundlePath contains the file name of the // Webpack bundle that serves as the entrypoint // for the embeddable webapp code. EmbedJSBundlePath string `json:"embed.js"` - // AppJSRuntimeBundlePath contains the file name of the + // RuntimeJSBundlePath contains the file name of the // JS runtime bundle which is served only in development environment // to kick off the main application code. - AppJSRuntimeBundlePath *string `json:"runtime.js"` + RuntimeJSBundlePath *string `json:"runtime.js"` // IsModule is whether the JavaScript files are modules (