mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
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">