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">
eslint-browser
This package exports a webpack-bundled version of eslint.Linter in a way that can be consumed by other
webpack-ified code (ie, by playground). Note that the normal eslint package does not support being
built by WebPack. The approach used in this package is modeled closely on how ESLint's playground works.