Files
react/compiler/forget/packages/playground/scripts
Joseph Savona 2f34f85011 Enable no-use-before-define validation in playground
#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">
2022-10-21 08:37:18 -07:00
..
2024-03-25 10:39:47 +00:00