mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Joseph Savona
2f34f85011
#686 added an option to validate generated code after transformation and adds an ESLint-based validator function to transform-test. Unfortunately it isn't super easy to wire up ESLint for use in a browser: traditionally the ESLint project specifically did _not_ support browser builds, but they recently have relaxed this because they added a browser playground on their website. There isn't official support, but the [playground repo](https://github.com/eslint/playground/blob/f3b1f78cc1c06dadfe7bb50c6c0f913c0d23670d/webpack.config.js) has a webpack config that, when combined with requiring a specific file, allows making things work in a browser. I tried using this directly in our playground app but Next's default webpack config doesn't work. So I created a separate package, playground-validator, which exports a webpack-built version of `eslint.Linter`. Then the playground can consume that, and everything works: ## Test Plan 👀 Confirmed that a known problematic example displays the validation message in playground (both locally and on the preview deployment): <img width="1500" alt="Screen Shot 2022-10-20 at 12 22 59 PM" src="https://user-images.githubusercontent.com/6425824/197041265-966ffda2-a3d0-450e-8fc4-fd1a7ca06e1a.png">
58 lines
1.5 KiB
JSON
58 lines
1.5 KiB
JSON
{
|
|
"name": "playground",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"preinstall": "./scripts/setup.sh",
|
|
"dev": "next dev",
|
|
"build": "next build && node ./scripts/downloadFonts.js",
|
|
"start": "next start",
|
|
"lint": "next lint"
|
|
},
|
|
"dependencies": {
|
|
"@babel/standalone": "^7.18.4",
|
|
"@emotion/react": "^11.9.3",
|
|
"@emotion/styled": "^11.9.3",
|
|
"@heroicons/react": "^1.0.6",
|
|
"@hpcc-js/wasm": "^1.15.0",
|
|
"@monaco-editor/react": "^4.4.5",
|
|
"@mui/material": "^5.9.1",
|
|
"@use-gesture/react": "^10.2.17",
|
|
"fflate": "^0.7.3",
|
|
"hermes-eslint": "^0.9.0",
|
|
"invariant": "^2.2.4",
|
|
"monaco-editor": "^0.33.0",
|
|
"next": "12.1.6",
|
|
"notistack": "^3.0.0-alpha.7",
|
|
"prettier": "^2.6.2",
|
|
"pretty-bytes": "^6.0.0",
|
|
"pretty-format": "^28.1.3",
|
|
"react": "18.1.0",
|
|
"react-dom": "18.1.0",
|
|
"rollup": "^2.75.7",
|
|
"terser": "^5.14.2"
|
|
},
|
|
"devDependencies": {
|
|
"@types/babel__standalone": "^7.1.4",
|
|
"@types/node": "17.0.40",
|
|
"@types/prettier": "^2.6.3",
|
|
"@types/react": "18.0.12",
|
|
"@types/react-dom": "18.0.5",
|
|
"autoprefixer": "^10.4.7",
|
|
"clsx": "^1.1.1",
|
|
"eslint": "^8.25.0",
|
|
"eslint-config-next": "12.1.6",
|
|
"next-transpile-modules": "^9.0.0",
|
|
"postcss": "^8.4.14",
|
|
"tailwindcss": "^3.0.24",
|
|
"typescript": "4.7.3"
|
|
},
|
|
"resolutions": {
|
|
"./**/@babel/parser": "7.7.4",
|
|
"./**/@babel/types": "7.7.4",
|
|
"@babel/core": "7.2.0",
|
|
"@babel/generator": "7.2.0",
|
|
"@babel/traverse": "7.1.6"
|
|
}
|
|
}
|