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">
30 lines
857 B
Bash
Executable File
30 lines
857 B
Bash
Executable File
#!/usr/bin/env sh
|
|
|
|
# Copyright (c) Facebook, Inc. and its affiliates.
|
|
|
|
# Script to build the Forget plugin. We're storing it in a
|
|
# machine's local file system and symlinking to it from Playground,
|
|
# so that it's not cached by Vercel upon deployment.
|
|
|
|
## Build Forget plugin and link it so it can be used by playground
|
|
cd ../..
|
|
yarn
|
|
yarn build
|
|
yarn link
|
|
|
|
## Build ESLint for the browser and link it so it can be used by playground
|
|
cd packages/eslint-browser
|
|
yarn
|
|
yarn build
|
|
yarn link
|
|
|
|
## Configure the playground itself to use the above locally linked packages
|
|
cd ../playground
|
|
yarn link babel-plugin-react-forget
|
|
yarn link eslint-browser
|
|
|
|
|
|
# This is so that Vercel doesn't cache Forget across deployments, which
|
|
# makes sure we're using the latest Forget for Playground.
|
|
# Refer to the Yarn docs (https://classic.yarnpkg.com/en/docs/cli/link) for details.
|