rename {webpack => web}.manifest.json (#57449)

This file is produced by both Webpack and esbuild. It is not Webpack-specific.

```
fastmod -e yaml,ts,js,md,tsx WEBPACK_MANIFEST WEB_BUILD_MANIFEST
fastmod -e yaml,ts,js,md,tsx,go webpack.manifest.json web.manifest.json
fastmod -e yaml,ts,js,md,tsx,go webpackManifestPath webBuildManifestPath
fastmod -e yaml,ts,js,md,tsx,go 'webpack manifest' 'web build manifest'
fastmod -e go,ts,tsx webpackManifest webBuildManifest
fastmod -e go,ts,tsx WebpackManifest WebBuildManifest # not all accepted
```
This commit is contained in:
Quinn Slack 2023-10-07 17:02:41 -07:00 committed by GitHub
parent b3ee44f32d
commit 7984c4abde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 76 additions and 78 deletions

2
.gitignore vendored
View File

@ -65,7 +65,7 @@ pnpm-debug.log
/ui/assets/sourcebox.css
/ui/assets/test.js
/ui/assets/test.css
/ui/assets/webpack.manifest.json
/ui/assets/web.manifest.json
/ui/assets/vs
/ui/assets/*.html
/ui/assets/*.map

View File

@ -22,7 +22,7 @@ jest.mock(
)
jest.mock(
'webpack.manifest.json',
'web.manifest.json',
() => ({
'app.js': '/.assets/scripts/app.bundle.js',
'app.css': '/.assets/styles/app.123.bundle.css',
@ -35,7 +35,7 @@ describe('getBundleSizeStats', () => {
const stats = getBundleSizeStats({
staticAssetsPath: MOCK_ASSETS_PATH,
bundlesizeConfigPath: 'bundlesize.config.js',
webpackManifestPath: 'webpack.manifest.json',
webBuildManifestPath: 'web.manifest.json',
})
expect(stats).toEqual({

View File

@ -27,19 +27,19 @@ interface BundleSizeStats {
interface GetBundleSizeStatsOptions {
staticAssetsPath: string
bundlesizeConfigPath: string
webpackManifestPath: string
webBuildManifestPath: string
}
/**
* Get a list of files specified by bundlesize config glob and their respective sizes.
*/
export function getBundleSizeStats(options: GetBundleSizeStatsOptions): BundleSizeStats {
const { bundlesizeConfigPath, webpackManifestPath, staticAssetsPath } = options
const { bundlesizeConfigPath, webBuildManifestPath, staticAssetsPath } = options
const bundleSizeConfig = require(bundlesizeConfigPath) as BundleSizeConfig
const webpackManifest = require(webpackManifestPath) as Record<string, string>
const webBuildManifest = require(webBuildManifestPath) as Record<string, string>
const initialResources = new Set(
Object.values(webpackManifest).map(resourcePath =>
Object.values(webBuildManifest).map(resourcePath =>
path.join(staticAssetsPath, resourcePath.replace('/.assets/', ''))
)
)

View File

@ -29,7 +29,7 @@ const environment = cleanEnv(process.env, {
const bundleSizeStats = getBundleSizeStats({
staticAssetsPath: STATIC_ASSETS_PATH,
bundlesizeConfigPath: path.join(WORKSPACES_PATH, 'web/bundlesize.config'),
webpackManifestPath: path.join(STATIC_ASSETS_PATH, 'webpack.manifest.json'),
webBuildManifestPath: path.join(STATIC_ASSETS_PATH, 'web.manifest.json'),
})
const commit = execSync('git rev-parse HEAD').toString().trim()

View File

@ -5,24 +5,24 @@ import type * as esbuild from 'esbuild'
import { STATIC_ASSETS_PATH } from '@sourcegraph/build-config'
import { type WebpackManifest, WEBPACK_MANIFEST_PATH } from '../utils'
import { type WebBuildManifest, WEB_BUILD_MANIFEST_PATH } from '../utils'
export const assetPathPrefix = '/.assets'
export const getManifest = (jsEntrypoint?: string, cssEntrypoint?: string): WebpackManifest => ({
export const getManifest = (jsEntrypoint?: string, cssEntrypoint?: string): WebBuildManifest => ({
'app.js': path.join(assetPathPrefix, jsEntrypoint ?? 'scripts/app.js'),
'app.css': path.join(assetPathPrefix, cssEntrypoint ?? 'scripts/app.css'),
isModule: true,
})
const writeManifest = async (manifest: WebpackManifest): Promise<void> => {
await fs.promises.writeFile(WEBPACK_MANIFEST_PATH, JSON.stringify(manifest, null, 2))
const writeManifest = async (manifest: WebBuildManifest): Promise<void> => {
await fs.promises.writeFile(WEB_BUILD_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
* An esbuild plugin to write a web.manifest.json file (just as Webpack does), for compatibility
* with our current Webpack build.
*/
export const manifestPlugin: esbuild.Plugin = {

View File

@ -7,7 +7,7 @@ import {
ENVIRONMENT_CONFIG,
getAPIProxySettings,
getIndexHTML,
getWebpackManifest,
getWebBuildManifest,
shouldCompressResponse,
STATIC_ASSETS_URL,
} from '../utils'
@ -25,7 +25,7 @@ export function createDevelopmentServerConfig(): WebpackDevServer.Configuration
const { proxyRoutes, ...proxyConfig } = getAPIProxySettings({
apiURL,
getLocalIndexHTML(jsContextScript) {
const manifestFile = getWebpackManifest()
const manifestFile = getWebBuildManifest()
return getIndexHTML({ manifestFile, jsContextScript })
},
})

View File

@ -13,7 +13,7 @@ import {
ENVIRONMENT_CONFIG,
getAPIProxySettings,
getIndexHTML,
getWebpackManifest,
getWebBuildManifest,
HTTP_WEB_SERVER_URL,
HTTPS_WEB_SERVER_URL,
printSuccessBanner,
@ -59,7 +59,7 @@ async function startWebpackDevelopmentServer({ apiURL }: DevelopmentServerInit):
const { proxyRoutes, ...proxyConfig } = getAPIProxySettings({
apiURL,
getLocalIndexHTML(jsContextScript) {
const manifestFile = getWebpackManifest()
const manifestFile = getWebBuildManifest()
return getIndexHTML({ manifestFile, jsContextScript })
},
})

View File

@ -10,7 +10,7 @@ import {
ENVIRONMENT_CONFIG,
HTTP_WEB_SERVER_URL,
HTTPS_WEB_SERVER_URL,
getWebpackManifest,
getWebBuildManifest,
STATIC_INDEX_PATH,
getIndexHTML,
} from '../utils'
@ -43,7 +43,7 @@ function startProductionServer(): void {
apiURL: SOURCEGRAPH_API_URL,
...(ENVIRONMENT_CONFIG.WEBPACK_SERVE_INDEX && {
getLocalIndexHTML(jsContextScript) {
const manifestFile = getWebpackManifest()
const manifestFile = getWebBuildManifest()
return getIndexHTML({ manifestFile, jsContextScript })
},
}),

View File

@ -9,13 +9,13 @@ import { createJsContext, ENVIRONMENT_CONFIG, HTTPS_WEB_SERVER_URL, STATIC_INDEX
const { NODE_ENV, STATIC_ASSETS_PATH } = ENVIRONMENT_CONFIG
export const WEBPACK_MANIFEST_PATH = path.resolve(STATIC_ASSETS_PATH, 'webpack.manifest.json')
export const WEB_BUILD_MANIFEST_PATH = path.resolve(STATIC_ASSETS_PATH, 'web.manifest.json')
export const HTML_INDEX_PATH = path.resolve(STATIC_ASSETS_PATH, 'index.html')
export const getWebpackManifest = (): WebpackManifest =>
JSON.parse(readFileSync(WEBPACK_MANIFEST_PATH, 'utf-8')) as WebpackManifest
export const getWebBuildManifest = (): WebBuildManifest =>
JSON.parse(readFileSync(WEB_BUILD_MANIFEST_PATH, 'utf-8')) as WebBuildManifest
export interface WebpackManifest {
export interface WebBuildManifest {
/** Main app entry JS bundle */
'app.js': string
/** Main app entry CSS bundle, only used in production mode */
@ -33,7 +33,7 @@ export interface WebpackManifest {
}
interface GetHTMLPageOptions {
manifestFile: WebpackManifest
manifestFile: WebBuildManifest
/**
* Used to inject dummy `window.context` in integration tests.
*/
@ -107,6 +107,6 @@ export function getIndexHTML(options: GetHTMLPageOptions): string {
export const writeIndexHTMLPlugin: WebpackPluginFunction = compiler => {
compiler.hooks.done.tap('WriteIndexHTMLPlugin', () => {
writeFileSync(STATIC_INDEX_PATH, getIndexHTML({ manifestFile: getWebpackManifest() }), 'utf-8')
writeFileSync(STATIC_INDEX_PATH, getIndexHTML({ manifestFile: getWebBuildManifest() }), 'utf-8')
})
}

View File

@ -8,7 +8,7 @@ import {
type IntegrationTestOptions,
} from '@sourcegraph/shared/src/testing/integration/context'
import { getWebpackManifest, getIndexHTML } from '../../dev/utils/get-index-html'
import { getWebBuildManifest, getIndexHTML } from '../../dev/utils/get-index-html'
import type { WebGraphQlOperations } from '../graphql-operations'
import type { SourcegraphContext } from '../jscontext'
@ -70,7 +70,7 @@ export const createWebIntegrationTestContext = async ({
.intercept((request, response) => {
response.type('text/html').send(
getIndexHTML({
manifestFile: getWebpackManifest(),
manifestFile: getWebBuildManifest(),
jsContext: { ...jsContext, ...customContext },
})
)

View File

@ -165,7 +165,7 @@ const config = {
getMonacoWebpackPlugin(),
new WebpackManifestPlugin({
writeToFileEmit: true,
fileName: 'webpack.manifest.json',
fileName: 'web.manifest.json',
seed: {
environment: NODE_ENV,
},

View File

@ -164,7 +164,7 @@ const config = {
getMonacoWebpackPlugin(),
new WebpackManifestPlugin({
writeToFileEmit: true,
fileName: 'webpack.manifest.json',
fileName: 'web.manifest.json',
seed: {
environment: NODE_ENV,
},

View File

@ -89,9 +89,9 @@ type Common struct {
PreloadedAssets *[]PreloadedAsset
Manifest *assets.WebpackManifest
Manifest *assets.WebBuildManifest
WebpackDevServer bool // whether the Webpack dev server is running (WEB_BUILDER_DEV_SERVER env var)
WebBuilderDevServer bool // whether the web builder dev server is running (WEB_BUILDER_DEV_SERVER env var)
// The fields below have zero values when not on a repo page.
Repo *types.Repo
@ -99,7 +99,7 @@ type Common struct {
api.CommitID // resolved SHA1 revision
}
var webpackDevServer, _ = strconv.ParseBool(os.Getenv("WEB_BUILDER_DEV_SERVER"))
var webBuilderDevServer, _ = strconv.ParseBool(os.Getenv("WEB_BUILDER_DEV_SERVER"))
// repoShortName trims the first path element of the given repo name if it has
// at least two path components.
@ -146,9 +146,9 @@ func newCommon(w http.ResponseWriter, r *http.Request, db database.DB, title str
return mockNewCommon(w, r, title, serveError)
}
manifest, err := assets.Provider.LoadWebpackManifest()
manifest, err := assets.Provider.LoadWebBuildManifest()
if err != nil {
return nil, errors.Wrap(err, "loading webpack manifest")
return nil, errors.Wrap(err, "loading web build manifest")
}
if !indexed {
@ -182,7 +182,7 @@ func newCommon(w http.ResponseWriter, r *http.Request, db database.DB, title str
ShowPreview: r.URL.Path == "/sign-in" && r.URL.RawQuery == "returnTo=%2F",
},
WebpackDevServer: webpackDevServer,
WebBuilderDevServer: webBuilderDevServer,
}
if enableHTMLInject != "true" {
@ -386,7 +386,7 @@ func serveEmbed(db database.DB) handlerFunc {
// 🚨 SECURITY: Removing the `X-Frame-Options` header allows embedding the `/embed` route in an iframe.
// The embedding is safe because the `/embed` route serves the `embed` JS bundle instead of the
// regular Sourcegraph (web) app bundle (see `client/web/webpack.config.js` for the entrypoint definitions).
// regular Sourcegraph (web) app bundle.
// It contains only the components needed to render the embedded content, and it should not include sensitive pages, like the sign-in page.
// The embed bundle also has its own React router that only recognizes specific routes (e.g., for embedding a notebook).
//

View File

@ -32,10 +32,10 @@ import (
func TestRedirects(t *testing.T) {
assets.UseDevAssetsProvider()
assets.MockLoadWebpackManifest = func() (*assets.WebpackManifest, error) {
return &assets.WebpackManifest{}, nil
assets.MockLoadWebBuildManifest = func() (*assets.WebBuildManifest, error) {
return &assets.WebBuildManifest{}, nil
}
defer func() { assets.MockLoadWebpackManifest = nil }()
defer func() { assets.MockLoadWebBuildManifest = nil }()
check := func(t *testing.T, path string, wantStatusCode int, wantRedirectLocation, userAgent string) {
t.Helper()
@ -122,10 +122,10 @@ func TestRepoShortName(t *testing.T) {
func TestNewCommon_repo_error(t *testing.T) {
assets.UseDevAssetsProvider()
assets.MockLoadWebpackManifest = func() (*assets.WebpackManifest, error) {
return &assets.WebpackManifest{}, nil
assets.MockLoadWebBuildManifest = func() (*assets.WebBuildManifest, error) {
return &assets.WebBuildManifest{}, nil
}
defer func() { assets.MockLoadWebpackManifest = nil }()
defer func() { assets.MockLoadWebBuildManifest = nil }()
cases := []struct {
name string

View File

@ -3,10 +3,10 @@
auto_https disable_redirects
}
# A bit of monstrosity, since we need to reverse proxy via webpack which then
# A bit of monstrosity, since we need to reverse proxy via the web builder dev server which then
# reverse proxies to us on HTTP.
#
# Caddy (tls :3443) -> webpack (:3080) -> Caddy (:3081) -> sourcegraph-frontend (:3082)
# Caddy (tls :3443) -> web builder dev server (:3080) -> Caddy (:3081) -> sourcegraph-frontend (:3082)
{$SOURCEGRAPH_HTTPS_DOMAIN}:{$SOURCEGRAPH_HTTPS_PORT} {
tls internal
reverse_proxy 127.0.0.1:3080 {

View File

@ -157,7 +157,6 @@ func bazelTest(name, target string) *linter {
// emits that seem inconsequential, for example:
//
// warning "@storybook/addon-storyshots > react-test-renderer@16.14.0" has incorrect peer dependency "react@^16.14.0".
// warning "@storybook/addon-storyshots > @storybook/core > @storybook/core-server > @storybook/builder-webpack4 > webpack-filter-warnings-plugin@1.2.1" has incorrect peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
// warning " > @storybook/react@6.5.9" has unmet peer dependency "require-from-string@^2.0.2".
// warning "@storybook/react > react-element-to-jsx-string@14.3.4" has incorrect peer dependency "react@^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1".
// warning " > @testing-library/react-hooks@8.0.0" has incorrect peer dependency "react@^16.9.0 || ^17.0.0".

View File

@ -30,7 +30,7 @@ If you see this error when opening the app:
500 Internal Server Error template: app.html:21:70: executing "app.html" at <version "styles/styl...>: error calling version: open ui/assets/styles/app.bundle.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.
that means the web builder hasn't finished compiling the styles yet (it takes about 3 minutes).
## Increase maximum available file descriptors.

View File

@ -6,11 +6,11 @@ import (
"github.com/sourcegraph/sourcegraph/lib/errors"
)
// AssetsProvider abstracts accessing assets and the Webpack manifest.
// AssetsProvider abstracts accessing assets and the web build manifest.
// One implementation must be explicitly set in the main.go using
// this code. See ui/assets/doc.go
type AssetsProvider interface {
LoadWebpackManifest() (*WebpackManifest, error)
LoadWebBuildManifest() (*WebBuildManifest, error)
Assets() http.FileSystem
}
@ -26,7 +26,7 @@ var Provider AssetsProvider = FailingAssetsProvider{}
// It's meant to be a safeguard against misconfiguration.
type FailingAssetsProvider struct{}
func (p FailingAssetsProvider) LoadWebpackManifest() (*WebpackManifest, error) {
func (p FailingAssetsProvider) LoadWebBuildManifest() (*WebBuildManifest, error) {
return nil, errors.New("assets are not configured for this binary, please see ui/assets")
}

View File

@ -9,42 +9,41 @@ import (
)
// UseDevAssetsProvider installs the development variant of the UseDevAssetsProvider
// which expects assets to be generated on the fly by an external Webpack process
// which expects assets to be generated on the fly by an external web builder process
// under the ui/assets/ folder.
func UseDevAssetsProvider() {
Provider = DevProvider{assets: http.Dir("./ui/assets")}
}
// DevProvider is the development variant of the UseDevAssetsProvider
// which expects assets to be generated on the fly by an external Webpack process
// which expects assets to be generated on the fly by an external web builder process
// under the ui/assets/ folder.
type DevProvider struct {
assets http.FileSystem
}
func (p DevProvider) LoadWebpackManifest() (*WebpackManifest, error) {
return loadWebpackManifest()
func (p DevProvider) LoadWebBuildManifest() (*WebBuildManifest, error) {
return loadWebBuildManifest()
}
func (p DevProvider) Assets() http.FileSystem {
return p.assets
}
var MockLoadWebpackManifest func() (*WebpackManifest, error)
var MockLoadWebBuildManifest func() (*WebBuildManifest, error)
// loadWebpackManifest uses Webpack manifest to extract hashed bundle names to
// serve to the client, see https://webpack.js.org/concepts/manifest/ for
// details. In dev mode, we load this file from disk on demand, so it doesn't
// loadWebBuildManifest uses a web builder manifest to extract hashed bundle names to
// serve to the client. In dev mode, we load this file from disk on demand, so it doesn't
// have to exist at compile time, to avoid a build dependency between frontend
// and client.
func loadWebpackManifest() (m *WebpackManifest, err error) {
if MockLoadWebpackManifest != nil {
return MockLoadWebpackManifest()
func loadWebBuildManifest() (m *WebBuildManifest, err error) {
if MockLoadWebBuildManifest != nil {
return MockLoadWebBuildManifest()
}
manifestContent, err := os.ReadFile("./ui/assets/webpack.manifest.json")
manifestContent, err := os.ReadFile("./ui/assets/web.manifest.json")
if err != nil {
return nil, errors.Wrap(err, "loading webpack manifest file from disk")
return nil, errors.Wrap(err, "loading web build manifest file from disk")
}
if err := json.Unmarshal(manifestContent, &m); err != nil {
return nil, errors.Wrap(err, "parsing manifest json")

View File

@ -8,7 +8,7 @@
//
// import _ "github.com/sourcegraph/sourcegraph/ui/assets/enterprise" // Select enterprise assets
//
// And to support working with dev assets, with the webpack process handling them for you, you can use:
// And to support working with dev assets, with the web builder process handling them for you, you can use:
//
// func main() {
// if os.Getenv("WEB_BUILDER_DEV_SERVER") == "1" {

View File

@ -19,10 +19,10 @@ var afs fs.FS = assetsFS
var Assets http.FileSystem
var (
webpackManifestOnce sync.Once
assetsOnce sync.Once
webpackManifest *assets.WebpackManifest
webpackManifestErr error
webBuildManifestOnce sync.Once
assetsOnce sync.Once
webBuildManifest *assets.WebBuildManifest
webBuildManifestErr error
)
func init() {
@ -32,27 +32,27 @@ func init() {
type Provider struct{}
func (p Provider) LoadWebpackManifest() (*assets.WebpackManifest, error) {
webpackManifestOnce.Do(func() {
f, err := afs.Open("webpack.manifest.json")
func (p Provider) LoadWebBuildManifest() (*assets.WebBuildManifest, error) {
webBuildManifestOnce.Do(func() {
f, err := afs.Open("web.manifest.json")
if err != nil {
webpackManifestErr = errors.Wrap(err, "read manifest file")
webBuildManifestErr = errors.Wrap(err, "read manifest file")
return
}
defer f.Close()
manifestContent, err := io.ReadAll(f)
if err != nil {
webpackManifestErr = errors.Wrap(err, "read manifest file")
webBuildManifestErr = errors.Wrap(err, "read manifest file")
return
}
if err := json.Unmarshal(manifestContent, &webpackManifest); err != nil {
webpackManifestErr = errors.Wrap(err, "unmarshal manifest json")
if err := json.Unmarshal(manifestContent, &webBuildManifest); err != nil {
webBuildManifestErr = errors.Wrap(err, "unmarshal manifest json")
return
}
})
return webpackManifest, webpackManifestErr
return webBuildManifest, webBuildManifestErr
}
func (p Provider) Assets() http.FileSystem {

View File

@ -1,6 +1,6 @@
package assets
type WebpackManifest struct {
type WebBuildManifest struct {
// ReactJSBundlePath contains the file name of the ReactJS
// dependency bundle, that is required by our main app bundle.
ReactJSBundlePath string `json:"react.js"`
@ -8,11 +8,11 @@ type WebpackManifest struct {
// 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
// bundle that serves as the entrypoint
// for the webapp code.
AppJSBundlePath string `json:"app.js"`
// EmbedJSBundlePath contains the file name of the
// Webpack bundle that serves as the entrypoint
// bundle that serves as the entrypoint
// for the embeddable webapp code.
EmbedJSBundlePath string `json:"embed.js"`
// AppJSRuntimeBundlePath contains the file name of the