mirror of
https://github.com/facebook/react.git
synced 2026-02-26 18:58:05 +00:00
ba099e442b
This lets you click a stack frame on the client and see the Server source code inline. <img width="871" alt="Screenshot 2024-06-01 at 11 44 24 PM" src="https://github.com/facebook/react/assets/63648/581281ce-0dce-40c0-a084-4a6d53ba1682"> <img width="840" alt="Screenshot 2024-06-01 at 11 43 37 PM" src="https://github.com/facebook/react/assets/63648/00dc77af-07c1-4389-9ae0-cf1f45199efb"> We could do some logic on the server that sends a source map url for every stack frame in the RSC payload. That would make the client potentially config free. However regardless we need the config to describe what url scheme to use since that’s not built in to the bundler config. In practice you likely have a common pattern for your source maps so no need to send data over and over when we can just have a simple function configured on the client. The server must return a source map, even if the file is not actually compiled since the fake file is still compiled. The source mapping strategy can be one of two models depending on if the server’s stack traces (`new Error().stack`) are source mapped back to the original (`—enable-source-maps`) or represents the location in compiled code (like in the browser). If it represents the location in compiled code it’s actually easier. You just serve the source map generated for that file by the tooling. If it is already source mapped it has to generate a source map where everything points to the same location (as if not compiled) ideally with a segment per logical ast node.
150 lines
4.6 KiB
JSON
150 lines
4.6 KiB
JSON
{
|
|
"name": "flight",
|
|
"type": "module",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"devEngines": {
|
|
"node": "20.x || 21.x"
|
|
},
|
|
"dependencies": {
|
|
"@babel/core": "^7.16.0",
|
|
"@babel/plugin-proposal-private-property-in-object": "^7.18.6",
|
|
"@babel/preset-react": "^7.22.5",
|
|
"@pmmmwh/react-refresh-webpack-plugin": "0.5.7",
|
|
"@svgr/webpack": "^5.5.0",
|
|
"@testing-library/jest-dom": "^5.14.1",
|
|
"@testing-library/react": "^13.0.0",
|
|
"@testing-library/user-event": "^13.2.1",
|
|
"babel-jest": "^27.4.2",
|
|
"babel-loader": "^8.2.3",
|
|
"babel-plugin-named-asset-import": "^0.3.8",
|
|
"babel-preset-react-app": "^10.0.1",
|
|
"body-parser": "^1.20.1",
|
|
"browserslist": "^4.18.1",
|
|
"busboy": "^1.6.0",
|
|
"camelcase": "^6.2.1",
|
|
"case-sensitive-paths-webpack-plugin": "^2.4.0",
|
|
"compression": "^1.7.4",
|
|
"concurrently": "^7.3.0",
|
|
"css-loader": "^6.5.1",
|
|
"css-minimizer-webpack-plugin": "^3.2.0",
|
|
"dotenv": "^10.0.0",
|
|
"dotenv-expand": "^5.1.0",
|
|
"file-loader": "^6.2.0",
|
|
"fs-extra": "^10.0.0",
|
|
"html-webpack-plugin": "^5.5.0",
|
|
"identity-obj-proxy": "^3.0.0",
|
|
"jest": "^27.4.3",
|
|
"jest-resolve": "^27.4.2",
|
|
"jest-watch-typeahead": "^1.0.0",
|
|
"mini-css-extract-plugin": "^2.4.5",
|
|
"nodemon": "^2.0.19",
|
|
"postcss": "^8.4.4",
|
|
"postcss-flexbugs-fixes": "^5.0.2",
|
|
"postcss-loader": "^6.2.1",
|
|
"postcss-normalize": "^10.0.1",
|
|
"postcss-preset-env": "^7.0.1",
|
|
"prompts": "^2.4.2",
|
|
"react": "experimental",
|
|
"react-dev-utils": "^12.0.1",
|
|
"react-dom": "experimental",
|
|
"react-refresh": "^0.11.0",
|
|
"resolve": "^1.20.0",
|
|
"resolve-url-loader": "^4.0.0",
|
|
"sass-loader": "^12.3.0",
|
|
"semver": "^7.3.5",
|
|
"source-map-loader": "^3.0.0",
|
|
"style-loader": "^3.3.1",
|
|
"tailwindcss": "^3.0.2",
|
|
"terser-webpack-plugin": "^5.2.5",
|
|
"undici": "^5.20.0",
|
|
"webpack": "^5.64.4",
|
|
"webpack-dev-middleware": "^5.3.4",
|
|
"webpack-hot-middleware": "^2.25.3",
|
|
"webpack-manifest-plugin": "^4.0.2"
|
|
},
|
|
"devDependencies": {
|
|
"@playwright/test": "^1.41.2"
|
|
},
|
|
"scripts": {
|
|
"predev": "cp -r ../../build/oss-experimental/* ./node_modules/",
|
|
"prebuild": "cp -r ../../build/oss-experimental/* ./node_modules/",
|
|
"dev": "concurrently \"npm run dev:region\" \"npm run dev:global\"",
|
|
"dev:global": "NODE_ENV=development BUILD_PATH=dist node --experimental-loader ./loader/global.js server/global",
|
|
"dev:region": "NODE_ENV=development BUILD_PATH=dist nodemon --watch src --watch dist -- --enable-source-maps --experimental-loader ./loader/region.js --conditions=react-server server/region",
|
|
"start": "node scripts/build.js && concurrently \"npm run start:region\" \"npm run start:global\"",
|
|
"start:global": "NODE_ENV=production node --experimental-loader ./loader/global.js server/global",
|
|
"start:region": "NODE_ENV=production node --experimental-loader ./loader/region.js --conditions=react-server server/region",
|
|
"build": "node scripts/build.js",
|
|
"test": "playwright test"
|
|
},
|
|
"browserslist": {
|
|
"production": [
|
|
">0.2%",
|
|
"not dead",
|
|
"not op_mini all"
|
|
],
|
|
"development": [
|
|
"last 1 chrome version",
|
|
"last 1 firefox version",
|
|
"last 1 safari version"
|
|
]
|
|
},
|
|
"jest": {
|
|
"roots": [
|
|
"<rootDir>/src"
|
|
],
|
|
"collectCoverageFrom": [
|
|
"src/**/*.{js,jsx,ts,tsx}",
|
|
"!src/**/*.d.ts"
|
|
],
|
|
"setupFiles": [
|
|
"react-app-polyfill/jsdom"
|
|
],
|
|
"setupFilesAfterEnv": [
|
|
"<rootDir>/src/setupTests.js"
|
|
],
|
|
"testMatch": [
|
|
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
|
|
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
|
|
],
|
|
"testEnvironment": "jsdom",
|
|
"transform": {
|
|
"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
|
|
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
|
|
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
|
|
},
|
|
"transformIgnorePatterns": [
|
|
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
|
|
"^.+\\.module\\.(css|sass|scss)$"
|
|
],
|
|
"modulePaths": [],
|
|
"moduleNameMapper": {
|
|
"^react-native$": "react-native-web",
|
|
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
|
|
},
|
|
"moduleFileExtensions": [
|
|
"web.js",
|
|
"js",
|
|
"web.ts",
|
|
"ts",
|
|
"web.tsx",
|
|
"tsx",
|
|
"json",
|
|
"web.jsx",
|
|
"jsx",
|
|
"node"
|
|
],
|
|
"watchPlugins": [
|
|
"jest-watch-typeahead/filename",
|
|
"jest-watch-typeahead/testname"
|
|
],
|
|
"resetMocks": true
|
|
},
|
|
"babel": {
|
|
"presets": [
|
|
"react-app"
|
|
]
|
|
}
|
|
}
|