diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index e34dda4af..150dc2ff0 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -4,7 +4,7 @@ Thank you for the PR! Contributors like you keep React awesome! Please see the Contribution Guide for guidelines: -https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md +https://github.com/reactjs/legacy.reactjs.org/blob/main/CONTRIBUTING.md If your PR references an existing issue, please add the issue number below diff --git a/.github/labeler.yml b/.github/labeler.yml deleted file mode 100644 index 7768da2ba..000000000 --- a/.github/labeler.yml +++ /dev/null @@ -1,2 +0,0 @@ -beta: -- beta/**/* diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml deleted file mode 100644 index ea9f6b573..000000000 --- a/.github/workflows/analyze.yml +++ /dev/null @@ -1,96 +0,0 @@ -name: Analyze Bundle - -on: - pull_request: - push: - branches: - - main # change this if your default branch is named differently - workflow_dispatch: - -jobs: - analyze: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - - name: Set up node - uses: actions/setup-node@v1 - with: - node-version: "14.x" - - - name: Install dependencies - uses: bahmutov/npm-install@v1.7.10 - with: - working-directory: 'beta' - - - name: Restore next build - uses: actions/cache@v2 - id: restore-build-cache - env: - cache-name: cache-next-build - with: - path: beta/.next/cache - # change this if you prefer a more strict cache - key: ${{ runner.os }}-build-${{ env.cache-name }} - - - name: Build next.js app - # change this if your site requires a custom build command - run: ./node_modules/.bin/next build - working-directory: beta - - # Here's the first place where next-bundle-analysis' own script is used - # This step pulls the raw bundle stats for the current bundle - - name: Analyze bundle - run: npx -p nextjs-bundle-analysis report - working-directory: beta - - - name: Upload bundle - uses: actions/upload-artifact@v2 - with: - path: beta/.next/analyze/__bundle_analysis.json - name: bundle_analysis.json - - - name: Download base branch bundle stats - uses: dawidd6/action-download-artifact@v2 - if: success() && github.event.number - with: - workflow: analyze.yml - branch: ${{ github.event.pull_request.base.ref }} - name: bundle_analysis.json - path: beta/.next/analyze/base/bundle - - # And here's the second place - this runs after we have both the current and - # base branch bundle stats, and will compare them to determine what changed. - # There are two configurable arguments that come from package.json: - # - # - budget: optional, set a budget (bytes) against which size changes are measured - # it's set to 350kb here by default, as informed by the following piece: - # https://infrequently.org/2021/03/the-performance-inequality-gap/ - # - # - red-status-percentage: sets the percent size increase where you get a red - # status indicator, defaults to 20% - # - # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis` - # entry in your package.json file. - - name: Compare with base branch bundle - if: success() && github.event.number - run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare - working-directory: beta - - - name: Upload analysis comment - uses: actions/upload-artifact@v2 - with: - name: analysis_comment.txt - path: beta/.next/analyze/__bundle_analysis_comment.txt - - - name: Save PR number - run: echo ${{ github.event.number }} > ./pr_number - - - name: Upload PR number - uses: actions/upload-artifact@v2 - with: - name: pr_number - path: ./pr_number - - # The actual commenting happens in the other action, matching the guidance in - # https://securitylab.github.com/research/github-actions-preventing-pwn-requests/ diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml deleted file mode 100644 index 8166089fd..000000000 --- a/.github/workflows/analyze_comment.yml +++ /dev/null @@ -1,72 +0,0 @@ -name: Analyze Bundle (Comment) - -on: - workflow_run: - workflows: ["Analyze Bundle"] - types: - - completed - -jobs: - comment: - runs-on: ubuntu-latest - if: > - ${{ github.event.workflow_run.event == 'pull_request' && - github.event.workflow_run.conclusion == 'success' }} - steps: - - name: Download base branch bundle stats - uses: dawidd6/action-download-artifact@v2 - with: - workflow: analyze.yml - run_id: ${{ github.event.workflow_run.id }} - name: analysis_comment.txt - path: analysis_comment.txt - - - name: Download PR number - uses: dawidd6/action-download-artifact@v2 - with: - workflow: analyze.yml - run_id: ${{ github.event.workflow_run.id }} - name: pr_number - path: pr_number - - - name: Get comment body - id: get-comment-body - if: success() - run: | - pr_number=$(cat pr_number/pr_number) - body=$(cat analysis_comment.txt/__bundle_analysis_comment.txt) - body="## Size Changes -
- - ${body} - -
" - body="${body//'%'/'%25'}" - body="${body//$'\n'/'%0A'}" - body="${body//$'\r'/'%0D'}" - echo ::set-output name=body::$body - echo ::set-output name=pr-number::$pr_number - - - name: Find Comment - uses: peter-evans/find-comment@v1 - if: success() - id: fc - with: - issue-number: ${{ steps.get-comment-body.outputs.pr-number }} - body-includes: "" - - - name: Create Comment - uses: peter-evans/create-or-update-comment@v1.4.4 - if: success() && steps.fc.outputs.comment-id == 0 - with: - issue-number: ${{ steps.get-comment-body.outputs.pr-number }} - body: ${{ steps.get-comment-body.outputs.body }} - - - name: Update Comment - uses: peter-evans/create-or-update-comment@v1.4.4 - if: success() && steps.fc.outputs.comment-id != 0 - with: - issue-number: ${{ steps.get-comment-body.outputs.pr-number }} - body: ${{ steps.get-comment-body.outputs.body }} - comment-id: ${{ steps.fc.outputs.comment-id }} - edit-mode: replace \ No newline at end of file diff --git a/.github/workflows/beta_site_lint.yml b/.github/workflows/beta_site_lint.yml deleted file mode 100644 index a9cacd7f0..000000000 --- a/.github/workflows/beta_site_lint.yml +++ /dev/null @@ -1,30 +0,0 @@ -name: Beta Site Lint / Heading ID check - -on: - push: - branches: - - main # change this if your default branch is named differently - pull_request: - types: [opened, synchronize, reopened] - -jobs: - lint: - runs-on: ubuntu-latest - - name: Lint on node 12.x and ubuntu-latest - - steps: - - uses: actions/checkout@v1 - - name: Use Node.js 12.x - uses: actions/setup-node@v1 - with: - node-version: 12.x - - - name: Install deps and build (with cache) - uses: bahmutov/npm-install@v1.7.10 - with: - working-directory: 'beta' - - - - name: Lint codebase - run: cd beta && yarn ci-check diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml deleted file mode 100644 index 90a961d4c..000000000 --- a/.github/workflows/label.yml +++ /dev/null @@ -1,22 +0,0 @@ -# This workflow will triage pull requests and apply a label based on the -# paths that are modified in the pull request. -# -# To use this workflow, you will need to set up a .github/labeler.yml -# file with configuration. For more information, see: -# https://github.com/actions/labeler - -name: Labeler -on: [pull_request_target] - -jobs: - label: - - runs-on: ubuntu-latest - permissions: - contents: read - pull-requests: write - - steps: - - uses: actions/labeler@v2 - with: - repo-token: "${{ secrets.GITHUB_TOKEN }}" diff --git a/beta/.env.development b/beta/.env.development deleted file mode 100644 index e69de29bb..000000000 diff --git a/beta/.env.production b/beta/.env.production deleted file mode 100644 index d25eb7dd4..000000000 --- a/beta/.env.production +++ /dev/null @@ -1 +0,0 @@ -NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4' \ No newline at end of file diff --git a/beta/.eslintignore b/beta/.eslintignore deleted file mode 100644 index 4738cb697..000000000 --- a/beta/.eslintignore +++ /dev/null @@ -1,3 +0,0 @@ -scripts -plugins -next.config.js diff --git a/beta/.eslintrc b/beta/.eslintrc deleted file mode 100644 index 147e54607..000000000 --- a/beta/.eslintrc +++ /dev/null @@ -1,16 +0,0 @@ -{ - "root": true, - "extends": "next/core-web-vitals", - "parser": "@typescript-eslint/parser", - "plugins": ["@typescript-eslint"], - "rules": { - "no-unused-vars": "off", - "@typescript-eslint/no-unused-vars": "warn" - }, - "env": { - "node": true, - "commonjs": true, - "browser": true, - "es6": true - } -} diff --git a/beta/.gitignore b/beta/.gitignore deleted file mode 100644 index c842b12a3..000000000 --- a/beta/.gitignore +++ /dev/null @@ -1,40 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem -tsconfig.tsbuildinfo - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel - -# external fonts -public/fonts/Optimistic_Display_W_Lt.woff2 -public/fonts/Optimistic_Display_W_Md.woff2 -public/fonts/Optimistic_Display_W_Bd.woff2 diff --git a/beta/.husky/pre-commit b/beta/.husky/pre-commit deleted file mode 100755 index bbf64071e..000000000 --- a/beta/.husky/pre-commit +++ /dev/null @@ -1,5 +0,0 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - -cd beta -yarn lint-staged \ No newline at end of file diff --git a/beta/.prettierignore b/beta/.prettierignore deleted file mode 100644 index 96f1f96d2..000000000 --- a/beta/.prettierignore +++ /dev/null @@ -1 +0,0 @@ -src/content/**/*.md diff --git a/beta/.prettierrc b/beta/.prettierrc deleted file mode 100644 index 19b54ad05..000000000 --- a/beta/.prettierrc +++ /dev/null @@ -1,21 +0,0 @@ -{ - "bracketSpacing": false, - "singleQuote": true, - "bracketSameLine": true, - "trailingComma": "es5", - "printWidth": 80, - "overrides": [ - { - "files": "*.css", - "options": { - "parser": "css" - } - }, - { - "files": "*.md", - "options": { - "parser": "mdx" - } - } - ] -} diff --git a/beta/CONTRIBUTING.md b/beta/CONTRIBUTING.md deleted file mode 100644 index dd81c8546..000000000 --- a/beta/CONTRIBUTING.md +++ /dev/null @@ -1,135 +0,0 @@ -# Contributing - -Thank you for your interest in contributing to the React Docs! - -## Code of Conduct - -Facebook has adopted a Code of Conduct that we expect project -participants to adhere to. Please [read the full text](https://code.facebook.com/codeofconduct) -so that you can understand what actions will and will not be tolerated. - -## Technical Writing Tips - -This is a [good summary](https://medium.com/@kvosswinkel/coding-like-a-journalist-ee52360a16bc) for things to keep in mind when writing technical docs. - -## Guidelines for Text - -**Different sections intentionally have different styles.** - -The documentation is divided into sections to cater to different learning styles and use cases. When editing an article, try to match the surrounding text in tone and style. When creating a new article, try to match the tone of the other articles in the same section. Learn about the motivation behind each section below. - -**[Learn React](https://beta.reactjs.org/learn)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them. - -**[API Reference](https://reactjs.org/apis/react)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs. - -**Try to follow your own instructions.** - -When writing step-by-step instructions (e.g. how to install something), try to forget everything you know about the topic, and actually follow the instructions you wrote, a single step at time. Often you will discover that there is implicit knowledge that you forgot to mention, or that there are missing or out-of-order steps in the instructions. Bonus points for getting *somebody else* to follow the steps and watching what they struggle with. Often it would be something very simple that you have not anticipated. - -## Guidelines for Code Examples - -### Syntax - -#### Prefer JSX to `createElement`. - -Ignore this if you're specifically describing `createElement`. - -#### Use `const` where possible, otherwise `let`. Don't use `var`. - -Ignore this if you're specifically writing about ES5. - -#### Don't use ES6 features when equivalent ES5 features have no downsides. - -Remember that ES6 is still new to a lot of people. While we use it in many places (`const` / `let`, classes, arrow functions), if the equivalent ES5 code is just as straightforward and readable, consider using it. - -In particular, you should prefer named `function` declarations over `const myFunction = () => ...` arrows for top-level functions. However, you *should* use arrow functions where they provide a tangible improvement (such as preserving `this` context inside a component). Consider both sides of the tradeoff when deciding whether to use a new feature. - -#### Don't use features that aren't standardized yet. - -For example, **don't** write this: - -```js -class MyComponent extends React.Component { - state = {value: ''}; - handleChange = (e) => { - this.setState({value: e.target.value}); - }; -} -``` - -Instead, **do** write this: - -```js -class MyComponent extends React.Component { - constructor(props) { - super(props); - this.handleChange = this.handleChange.bind(this); - this.state = {value: ''}; - } - handleChange(e) { - this.setState({value: e.target.value}); - } -} -``` - -Ignore this rule if you're specifically describing an experimental proposal. Make sure to mention its experimental nature in the code and in the surrounding text. - -### Style - -- Use semicolons. -- No space between function names and parens (`method() {}` not `method () {}`). -- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/). - -### Highlighting - -Use `js` as the highlighting language in Markdown code blocks: - -```` -```js -// code -``` -```` - -Sometimes you'll see blocks with numbers. -They tell the website to highlight specific lines. - -You can highlight a single line: - -```` -```js {2} -function hello() { - // this line will get highlighted -} -``` -```` - -A range of lines: - -```` -```js {2-4} -function hello() { - // these lines - // will get - // highlighted -} -``` -```` - -Or even multiple ranges: - -```` -```js {2-4,6} -function hello() { - // these lines - // will get - // highlighted - console.log('hello'); - // also this one - console.log('there'); -} -``` -```` - -Be mindful that if you move some code in an example with highlighting, you also need to update the highlighting. - -Don't be afraid to often use highlighting! It is very valuable when you need to focus the reader's attention on a particular detail that's easy to miss. diff --git a/beta/README.md b/beta/README.md deleted file mode 100644 index 8208938ee..000000000 --- a/beta/README.md +++ /dev/null @@ -1,73 +0,0 @@ -# reactjs.org - -This repo contains the source code and documentation powering [beta.reactjs.org](https://beta.reactjs.org/). - - -## Getting started - -### Prerequisites - -1. Git -1. Node: any 12.x version starting with v12.0.0 or greater -1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) -1. A fork of the repo (for any contributions) -1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine - -### Installation - -1. `cd reactjs.org` to go into the project root -1. `cd beta` to open the beta website -3. `yarn` to install the website's npm dependencies - -### Running locally - -1. Make sure you're in the `beta` folder -1. `yarn dev` to start the development server (powered by [Next.js](https://nextjs.org/)) -1. `open http://localhost:3000` to open the site in your favorite browser - -## Contributing - -### Guidelines - -The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. - -### Create a branch - -1. `git checkout main` from any folder in your local `reactjs.org` repository -1. `git pull origin main` to ensure you have the latest main code -1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch - -### Make the change - -1. Follow the ["Running locally"](#running-locally) instructions -1. Save the files and check in the browser - 1. Changes to React components in `src` will hot-reload - 1. Changes to markdown files in `content` will hot-reload - 1. If working with plugins, you may need to remove the `.cache` directory and restart the server - -### Test the change - -1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile. -2. Run `yarn check-all` from the `beta` folder. (This will run Prettier, ESLint and validate types.) - -### Push it - -1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes -1. `git push my-fork-name the-name-of-my-branch` -1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches. -1. Follow GitHub's instructions. -1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub. - -## Translation - -If you are interested in translating `reactjs.org`, please see the current translation efforts at [translations.reactjs.org](https://translations.reactjs.org/). - - -If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg). - -## Troubleshooting - -- `yarn reset` to clear the local cache - -## License -Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md) file. diff --git a/beta/colors.js b/beta/colors.js deleted file mode 100644 index bac74d41e..000000000 --- a/beta/colors.js +++ /dev/null @@ -1,89 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -module.exports = { - // Text colors - primary: '#23272F', // gray-90 - 'primary-dark': '#F6F7F9', // gray-5 - secondary: '#404756', // gray-70 - 'secondary-dark': '#EBECF0', // gray-10 - link: '#087EA4', // blue-50 - 'link-dark': '#149ECA', // blue-40 - syntax: '#EBECF0', // gray-10 - wash: '#FFFFFF', - 'wash-dark': '#23272F', // gray-90 - card: '#F6F7F9', // gray-05 - 'card-dark': '#343A46', // gray-80 - highlight: '#E6F7FF', // blue-10 - 'highlight-dark': 'rgba(88,175,223,.1)', - border: '#EBECF0', // gray-10 - 'border-dark': '#343A46', // gray-80 - 'secondary-button': '#EBECF0', // gray-10 - 'secondary-button-dark': '#404756', // gray-70 - - // Gray - 'gray-95': '#16181D', - 'gray-90': '#23272F', - 'gray-80': '#343A46', - 'gray-70': '#404756', - 'gray-60': '#4E5769', - 'gray-50': '#5E687E', // unused - 'gray-40': '#78839B', - 'gray-30': '#99A1B3', - 'gray-20': '#BCC1CD', - 'gray-10': '#EBECF0', - 'gray-5': '#F6F7F9', - - // Blue - 'blue-60': '#045975', - 'blue-50': '#087EA4', - 'blue-40': '#149ECA', // Brand Blue - 'blue-30': '#58C4DC', // unused - 'blue-20': '#ABE2ED', - 'blue-10': '#E6F7FF', // todo: doesn't match illustrations - 'blue-5': '#E6F6FA', - - // Yellow - 'yellow-60': '#B65700', - 'yellow-50': '#C76A15', - 'yellow-40': '#DB7D27', // unused - 'yellow-30': '#FABD62', // unused - 'yellow-20': '#FCDEB0', // unused - 'yellow-10': '#FDE7C7', - 'yellow-5': '#FEF5E7', - - // Purple - 'purple-60': '#2B3491', // unused - 'purple-50': '#575FB7', - 'purple-40': '#6B75DB', - 'purple-30': '#8891EC', - 'purple-20': '#C3C8F5', // unused - 'purple-10': '#E7E9FB', - 'purple-5': '#F3F4FD', - - // Green - 'green-60': '#2B6E62', - 'green-50': '#388F7F', - 'green-40': '#44AC99', - 'green-30': '#7FCCBF', - 'green-20': '#ABDED5', - 'green-10': '#E5F5F2', - 'green-5': '#F4FBF9', - - // RED - 'red-60': '#712D28', - 'red-50': '#A6423A', // unused - 'red-40': '#C1554D', - 'red-30': '#D07D77', - 'red-20': '#E5B7B3', // unused - 'red-10': '#F2DBD9', // unused - 'red-5': '#FAF1F0', - - // MISC - 'code-block': '#99a1b30f', // gray-30 @ 6% - 'gradient-blue': '#58C4DC', // Only used for the landing gradient for now. - github: { - highlight: '#fffbdd', - }, -}; diff --git a/beta/next-env.d.ts b/beta/next-env.d.ts deleted file mode 100644 index 4f11a03dc..000000000 --- a/beta/next-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/beta/next.config.js b/beta/next.config.js deleted file mode 100644 index ed3f22bb2..000000000 --- a/beta/next.config.js +++ /dev/null @@ -1,75 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -const path = require('path'); -const redirects = require('./src/redirects.json'); - -/** - * @type {import('next').NextConfig} - **/ -const nextConfig = { - pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'], - reactStrictMode: true, - experimental: { - plugins: true, - scrollRestoration: true, - legacyBrowsers: false, - browsersListForSwc: true, - }, - async redirects() { - return redirects.redirects; - }, - // TODO: this causes extra router.replace() on every page. - // Let's disable until we figure out what's going on. - // rewrites() { - // return [ - // { - // source: '/feed.xml', - // destination: '/_next/static/feed.xml', - // }, - // ]; - // }, - webpack: (config, {dev, isServer, ...options}) => { - if (process.env.ANALYZE) { - const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer'); - config.plugins.push( - new BundleAnalyzerPlugin({ - analyzerMode: 'static', - reportFilename: options.isServer - ? '../analyze/server.html' - : './analyze/client.html', - }) - ); - } - - // Don't bundle the shim unnecessarily. - config.resolve.alias['use-sync-external-store/shim'] = 'react'; - - const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack'); - config.plugins.push( - new NormalModuleReplacementPlugin( - /@codemirror\/lang-markdown/, - require.resolve('./src/utils/codemirrorMarkdownShim.js') - ), - new IgnorePlugin({ - checkResource(resource, context) { - if ( - /\/eslint\/lib\/rules$/.test(context) && - /\.\/[\w-]+(\.js)?$/.test(resource) - ) { - // Skips imports of built-in rules that ESLint - // tries to carry into the bundle by default. - // We only want the engine and the React rules. - return true; - } - return false; - }, - }) - ); - - return config; - }, -}; - -module.exports = nextConfig; diff --git a/beta/package.json b/beta/package.json deleted file mode 100644 index a912bf3ce..000000000 --- a/beta/package.json +++ /dev/null @@ -1,111 +0,0 @@ -{ - "name": "react-website", - "version": "1.0.0", - "private": true, - "license": "CC", - "scripts": { - "analyze": "ANALYZE=true next build", - "dev": "next-remote-watch ./src/content", - "build": "next build && node ./scripts/generateRSS.js && node ./scripts/generateRedirects.js && node ./scripts/downloadFonts.js", - "lint": "next lint", - "lint:fix": "next lint --fix", - "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"", - "nit:source": "prettier --config .prettierrc --list-different \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"", - "prettier": "yarn format:source", - "prettier:diff": "yarn nit:source", - "lint-heading-ids": "node scripts/headingIdLinter.js", - "fix-headings": "node scripts/headingIdLinter.js --fix", - "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids", - "tsc": "tsc --noEmit", - "start": "next start", - "postinstall": "patch-package && (is-ci || (cd .. && husky install beta/.husky))", - "check-all": "npm-run-all prettier lint:fix tsc" - }, - "dependencies": { - "@codesandbox/sandpack-react": "1.7.2", - "@docsearch/css": "3.0.0-alpha.41", - "@docsearch/react": "3.0.0-alpha.41", - "@headlessui/react": "^1.7.0", - "body-scroll-lock": "^3.1.3", - "classnames": "^2.2.6", - "date-fns": "^2.16.1", - "debounce": "^1.2.1", - "ga-lite": "^2.1.4", - "github-slugger": "^1.3.0", - "next": "12.3.2-canary.7", - "next-remote-watch": "^1.0.0", - "parse-numeric-range": "^1.2.0", - "react": "0.0.0-experimental-cb5084d1c-20220924", - "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1", - "react-dom": "0.0.0-experimental-cb5084d1c-20220924", - "remark-gfm": "^3.0.1" - }, - "devDependencies": { - "@babel/core": "^7.12.9", - "@babel/plugin-transform-modules-commonjs": "^7.18.6", - "@babel/preset-react": "^7.18.6", - "@mdx-js/mdx": "^2.1.3", - "@types/body-scroll-lock": "^2.6.1", - "@types/classnames": "^2.2.10", - "@types/debounce": "^1.2.1", - "@types/github-slugger": "^1.3.0", - "@types/mdx-js__react": "^1.5.2", - "@types/node": "^14.6.4", - "@types/parse-numeric-range": "^0.0.1", - "@types/react": "^18.0.9", - "@types/react-dom": "^18.0.5", - "@typescript-eslint/eslint-plugin": "^5.36.2", - "@typescript-eslint/parser": "^5.36.2", - "asyncro": "^3.0.0", - "autoprefixer": "^10.4.2", - "babel-eslint": "10.x", - "eslint": "7.x", - "eslint-config-next": "12.0.3", - "eslint-config-react-app": "^5.2.1", - "eslint-plugin-flowtype": "4.x", - "eslint-plugin-import": "2.x", - "eslint-plugin-jsx-a11y": "6.x", - "eslint-plugin-react": "7.x", - "eslint-plugin-react-hooks": "experimental", - "fs-extra": "^9.0.1", - "globby": "^11.0.1", - "gray-matter": "^4.0.2", - "husky": "^7.0.4", - "is-ci": "^3.0.1", - "lint-staged": ">=10", - "mdast-util-to-string": "^1.1.0", - "metro-cache": "0.72.2", - "npm-run-all": "^4.1.5", - "patch-package": "^6.2.2", - "postcss": "^8.4.5", - "postcss-flexbugs-fixes": "4.2.1", - "postcss-preset-env": "^6.7.0", - "prettier": "^2.5.1", - "reading-time": "^1.2.0", - "remark": "^12.0.1", - "remark-external-links": "^7.0.0", - "remark-html": "^12.0.0", - "remark-images": "^2.0.0", - "remark-slug": "^7.0.0", - "remark-unwrap-images": "^2.0.0", - "retext": "^7.0.1", - "retext-smartypants": "^4.0.0", - "rss": "^1.2.2", - "tailwindcss": "^3.0.22", - "typescript": "^4.0.2", - "unist-util-visit": "^2.0.3", - "webpack-bundle-analyzer": "^4.5.0" - }, - "engines": { - "node": ">=12.x" - }, - "nextBundleAnalysis": { - "budget": null, - "budgetPercentIncreaseRed": 10, - "showDetails": true - }, - "lint-staged": { - "*.{js,ts,jsx,tsx,css}": "yarn prettier", - "src/**/*.md": "yarn fix-headings" - } -} diff --git a/beta/patches/next+12.3.2-canary.7.patch b/beta/patches/next+12.3.2-canary.7.patch deleted file mode 100644 index ee8d132de..000000000 --- a/beta/patches/next+12.3.2-canary.7.patch +++ /dev/null @@ -1,22 +0,0 @@ -diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js -index 3a141de..72a8749 100644 ---- a/node_modules/next/dist/server/render.js -+++ b/node_modules/next/dist/server/render.js -@@ -752,9 +752,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) { - // Enabling react concurrent rendering mode: __NEXT_REACT_ROOT = true - const renderShell = async (EnhancedApp, EnhancedComponent)=>{ - const content = renderContent(EnhancedApp, EnhancedComponent); -- return await (0, _nodeWebStreamsHelper).renderToInitialStream({ -- ReactDOMServer, -- element: content -+ return new Promise((resolve, reject) => { -+ (0, _nodeWebStreamsHelper).renderToInitialStream({ -+ ReactDOMServer, -+ element: content, -+ streamOptions: { -+ onError: reject -+ } -+ }).then(resolve, reject); - }); - }; - const createBodyResult = (initialStream, suffix)=>{ diff --git a/beta/patches/next-remote-watch+1.0.0.patch b/beta/patches/next-remote-watch+1.0.0.patch deleted file mode 100644 index c9ecef84d..000000000 --- a/beta/patches/next-remote-watch+1.0.0.patch +++ /dev/null @@ -1,16 +0,0 @@ -diff --git a/node_modules/next-remote-watch/bin/next-remote-watch b/node_modules/next-remote-watch/bin/next-remote-watch -index c055b66..a2f749c 100755 ---- a/node_modules/next-remote-watch/bin/next-remote-watch -+++ b/node_modules/next-remote-watch/bin/next-remote-watch -@@ -66,7 +66,10 @@ app.prepare().then(() => { - } - } - -- app.server.hotReloader.send('reloadPage') -+ app.server.hotReloader.send({ -+ event: 'serverOnlyChanges', -+ pages: ['/[[...markdownPath]]'] -+ }); - } - ) - } diff --git a/beta/plugins/markdownToHtml.js b/beta/plugins/markdownToHtml.js deleted file mode 100644 index 0d5fe7afb..000000000 --- a/beta/plugins/markdownToHtml.js +++ /dev/null @@ -1,30 +0,0 @@ -const remark = require('remark'); -const externalLinks = require('remark-external-links'); // Add _target and rel to external links -const customHeaders = require('./remark-header-custom-ids'); // Custom header id's for i18n -const images = require('remark-images'); // Improved image syntax -const unrwapImages = require('remark-unwrap-images'); // Removes

wrapper around images -const smartyPants = require('./remark-smartypants'); // Cleans up typography -const html = require('remark-html'); - -module.exports = { - remarkPlugins: [ - externalLinks, - customHeaders, - images, - unrwapImages, - smartyPants, - ], - markdownToHtml, -}; - -async function markdownToHtml(markdown) { - const result = await remark() - .use(externalLinks) - .use(customHeaders) - .use(images) - .use(unrwapImages) - .use(smartyPants) - .use(html) - .process(markdown); - return result.toString(); -} diff --git a/beta/plugins/remark-header-custom-ids.js b/beta/plugins/remark-header-custom-ids.js deleted file mode 100644 index 356de1bf1..000000000 --- a/beta/plugins/remark-header-custom-ids.js +++ /dev/null @@ -1,76 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -/*! - * Based on 'gatsby-remark-autolink-headers' - * Original Author: Kyle Mathews - * Updated by Jared Palmer; - * Copyright (c) 2015 Gatsbyjs - */ - -const toString = require('mdast-util-to-string'); -const visit = require('unist-util-visit'); -const toSlug = require('github-slugger').slug; - -function patch(context, key, value) { - if (!context[key]) { - context[key] = value; - } - return context[key]; -} - -const svgIcon = ``; - -module.exports = ({icon = svgIcon, className = `anchor`} = {}) => { - return function transformer(tree) { - const ids = new Set(); - visit(tree, 'heading', (node) => { - let children = [...node.children]; - let id; - if (children[children.length - 1].type === 'mdxTextExpression') { - // # My header {/*my-header*/} - id = children.pop().value; - const isValidCustomId = id.startsWith('/*') && id.endsWith('*/'); - if (!isValidCustomId) { - throw Error( - 'Expected header ID to be like: {/*some-header*/}. ' + - 'Instead, received: ' + - id - ); - } - id = id.slice(2, id.length - 2); - if (id !== toSlug(id)) { - throw Error( - 'Expected header ID to be a valid slug. You specified: {/*' + - id + - '*/}. Replace it with: {/*' + - toSlug(id) + - '*/}' - ); - } - } else { - // # My header - id = toSlug(toString(node)); - } - - if (ids.has(id)) { - throw Error( - 'Cannot have a duplicate header with id "' + - id + - '" on the page. ' + - 'Rename the section or give it an explicit unique ID. ' + - 'For example: #### Arguments {/*setstate-arguments*/}' - ); - } - ids.add(id); - - const data = patch(node, 'data', {}); - patch(data, 'id', id); - patch(data, 'htmlAttributes', {}); - patch(data, 'hProperties', {}); - patch(data.htmlAttributes, 'id', id); - patch(data.hProperties, 'id', id); - }); - }; -}; diff --git a/beta/plugins/remark-smartypants.js b/beta/plugins/remark-smartypants.js deleted file mode 100644 index 7dd1b0c4a..000000000 --- a/beta/plugins/remark-smartypants.js +++ /dev/null @@ -1,21 +0,0 @@ -const visit = require('unist-util-visit'); -const retext = require('retext'); -const smartypants = require('retext-smartypants'); - -function check(parent) { - if (parent.tagName === 'script') return false; - if (parent.tagName === 'style') return false; - return true; -} - -module.exports = function (options) { - const processor = retext().use(smartypants, options); - - function transformer(tree) { - visit(tree, 'text', (node, index, parent) => { - if (check(parent)) node.value = String(processor.processSync(node.value)); - }); - } - - return transformer; -}; diff --git a/beta/postcss.config.js b/beta/postcss.config.js deleted file mode 100644 index 427294522..000000000 --- a/beta/postcss.config.js +++ /dev/null @@ -1,20 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - 'postcss-flexbugs-fixes': {}, - 'postcss-preset-env': { - autoprefixer: { - flexbox: 'no-2009', - }, - stage: 3, - features: { - 'custom-properties': false, - }, - }, - }, -} diff --git a/beta/public/external.png b/beta/public/external.png deleted file mode 100644 index 423ec131b..000000000 Binary files a/beta/public/external.png and /dev/null differ diff --git a/beta/public/favicon.ico b/beta/public/favicon.ico deleted file mode 100644 index 38fd8641c..000000000 Binary files a/beta/public/favicon.ico and /dev/null differ diff --git a/beta/public/favicon_dark.ico b/beta/public/favicon_dark.ico deleted file mode 100644 index 9bcfdcd7b..000000000 Binary files a/beta/public/favicon_dark.ico and /dev/null differ diff --git a/beta/public/fonts/Source-Code-Pro-Regular.woff2 b/beta/public/fonts/Source-Code-Pro-Regular.woff2 deleted file mode 100644 index 655cd9e81..000000000 Binary files a/beta/public/fonts/Source-Code-Pro-Regular.woff2 and /dev/null differ diff --git a/beta/public/html/single-file-example.html b/beta/public/html/single-file-example.html deleted file mode 100644 index 380a169f5..000000000 --- a/beta/public/html/single-file-example.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - Hello World - - - - - - - -

- - - - diff --git a/beta/public/icons/logo-white.svg b/beta/public/icons/logo-white.svg deleted file mode 100644 index 7ed0e8b05..000000000 --- a/beta/public/icons/logo-white.svg +++ /dev/null @@ -1,9 +0,0 @@ - - React Logo - - - - - - - diff --git a/beta/public/icons/logo.svg b/beta/public/icons/logo.svg deleted file mode 100644 index ea77a618d..000000000 --- a/beta/public/icons/logo.svg +++ /dev/null @@ -1,9 +0,0 @@ - - React Logo - - - - - - - diff --git a/beta/public/images/blog/animal-sounds.jpg b/beta/public/images/blog/animal-sounds.jpg deleted file mode 100644 index abe6d815e..000000000 Binary files a/beta/public/images/blog/animal-sounds.jpg and /dev/null differ diff --git a/beta/public/images/blog/chatapp.png b/beta/public/images/blog/chatapp.png deleted file mode 100644 index de8c09ff3..000000000 Binary files a/beta/public/images/blog/chatapp.png and /dev/null differ diff --git a/beta/public/images/blog/cra-better-output.png b/beta/public/images/blog/cra-better-output.png deleted file mode 100644 index 44ed320ff..000000000 Binary files a/beta/public/images/blog/cra-better-output.png and /dev/null differ diff --git a/beta/public/images/blog/cra-dynamic-import.gif b/beta/public/images/blog/cra-dynamic-import.gif deleted file mode 100644 index 88db2896f..000000000 Binary files a/beta/public/images/blog/cra-dynamic-import.gif and /dev/null differ diff --git a/beta/public/images/blog/cra-jest-search.gif b/beta/public/images/blog/cra-jest-search.gif deleted file mode 100644 index ed6819d89..000000000 Binary files a/beta/public/images/blog/cra-jest-search.gif and /dev/null differ diff --git a/beta/public/images/blog/cra-pwa.png b/beta/public/images/blog/cra-pwa.png deleted file mode 100644 index 9862ae565..000000000 Binary files a/beta/public/images/blog/cra-pwa.png and /dev/null differ diff --git a/beta/public/images/blog/cra-runtime-error.gif b/beta/public/images/blog/cra-runtime-error.gif deleted file mode 100644 index 7b4405f62..000000000 Binary files a/beta/public/images/blog/cra-runtime-error.gif and /dev/null differ diff --git a/beta/public/images/blog/cra-update-exports.gif b/beta/public/images/blog/cra-update-exports.gif deleted file mode 100644 index 2820d63df..000000000 Binary files a/beta/public/images/blog/cra-update-exports.gif and /dev/null differ diff --git a/beta/public/images/blog/create-apps-with-no-configuration/compiled-successfully.png b/beta/public/images/blog/create-apps-with-no-configuration/compiled-successfully.png deleted file mode 100644 index 223f5abf2..000000000 Binary files a/beta/public/images/blog/create-apps-with-no-configuration/compiled-successfully.png and /dev/null differ diff --git a/beta/public/images/blog/create-apps-with-no-configuration/compiled-with-warnings.png b/beta/public/images/blog/create-apps-with-no-configuration/compiled-with-warnings.png deleted file mode 100644 index 20aa25e3c..000000000 Binary files a/beta/public/images/blog/create-apps-with-no-configuration/compiled-with-warnings.png and /dev/null differ diff --git a/beta/public/images/blog/create-apps-with-no-configuration/created-folder.png b/beta/public/images/blog/create-apps-with-no-configuration/created-folder.png deleted file mode 100644 index 44aff6dcd..000000000 Binary files a/beta/public/images/blog/create-apps-with-no-configuration/created-folder.png and /dev/null differ diff --git a/beta/public/images/blog/create-apps-with-no-configuration/failed-to-compile.png b/beta/public/images/blog/create-apps-with-no-configuration/failed-to-compile.png deleted file mode 100644 index a72b5fb2e..000000000 Binary files a/beta/public/images/blog/create-apps-with-no-configuration/failed-to-compile.png and /dev/null differ diff --git a/beta/public/images/blog/create-apps-with-no-configuration/npm-run-build.png b/beta/public/images/blog/create-apps-with-no-configuration/npm-run-build.png deleted file mode 100644 index a7b931e12..000000000 Binary files a/beta/public/images/blog/create-apps-with-no-configuration/npm-run-build.png and /dev/null differ diff --git a/beta/public/images/blog/devtools-component-filters.gif b/beta/public/images/blog/devtools-component-filters.gif deleted file mode 100644 index 287c66757..000000000 Binary files a/beta/public/images/blog/devtools-component-filters.gif and /dev/null differ diff --git a/beta/public/images/blog/devtools-full.gif b/beta/public/images/blog/devtools-full.gif deleted file mode 100644 index fd7ed9493..000000000 Binary files a/beta/public/images/blog/devtools-full.gif and /dev/null differ diff --git a/beta/public/images/blog/devtools-highlight-updates.png b/beta/public/images/blog/devtools-highlight-updates.png deleted file mode 100644 index 780bcf2ef..000000000 Binary files a/beta/public/images/blog/devtools-highlight-updates.png and /dev/null differ diff --git a/beta/public/images/blog/devtools-search.gif b/beta/public/images/blog/devtools-search.gif deleted file mode 100644 index 22d80051d..000000000 Binary files a/beta/public/images/blog/devtools-search.gif and /dev/null differ diff --git a/beta/public/images/blog/devtools-side-pane.gif b/beta/public/images/blog/devtools-side-pane.gif deleted file mode 100644 index 381e3554e..000000000 Binary files a/beta/public/images/blog/devtools-side-pane.gif and /dev/null differ diff --git a/beta/public/images/blog/devtools-tree-view.png b/beta/public/images/blog/devtools-tree-view.png deleted file mode 100644 index 854a39f8f..000000000 Binary files a/beta/public/images/blog/devtools-tree-view.png and /dev/null differ diff --git a/beta/public/images/blog/devtools-v4-screenshot.png b/beta/public/images/blog/devtools-v4-screenshot.png deleted file mode 100644 index 83a67d548..000000000 Binary files a/beta/public/images/blog/devtools-v4-screenshot.png and /dev/null differ diff --git a/beta/public/images/blog/dog-tutorial.png b/beta/public/images/blog/dog-tutorial.png deleted file mode 100644 index 72f8b4341..000000000 Binary files a/beta/public/images/blog/dog-tutorial.png and /dev/null differ diff --git a/beta/public/images/blog/first-look.png b/beta/public/images/blog/first-look.png deleted file mode 100644 index d36aa1f35..000000000 Binary files a/beta/public/images/blog/first-look.png and /dev/null differ diff --git a/beta/public/images/blog/flux-chart.png b/beta/public/images/blog/flux-chart.png deleted file mode 100644 index fbfdf94ea..000000000 Binary files a/beta/public/images/blog/flux-chart.png and /dev/null differ diff --git a/beta/public/images/blog/flux-diagram.png b/beta/public/images/blog/flux-diagram.png deleted file mode 100644 index 69cf64e0b..000000000 Binary files a/beta/public/images/blog/flux-diagram.png and /dev/null differ diff --git a/beta/public/images/blog/genesis_skeleton.png b/beta/public/images/blog/genesis_skeleton.png deleted file mode 100644 index 4b7c51e29..000000000 Binary files a/beta/public/images/blog/genesis_skeleton.png and /dev/null differ diff --git a/beta/public/images/blog/gpu-cursor-move.gif b/beta/public/images/blog/gpu-cursor-move.gif deleted file mode 100644 index b3a621f78..000000000 Binary files a/beta/public/images/blog/gpu-cursor-move.gif and /dev/null differ diff --git a/beta/public/images/blog/guess_filter.jpg b/beta/public/images/blog/guess_filter.jpg deleted file mode 100644 index 1983df1c8..000000000 Binary files a/beta/public/images/blog/guess_filter.jpg and /dev/null differ diff --git a/beta/public/images/blog/hacker-news-react-native.png b/beta/public/images/blog/hacker-news-react-native.png deleted file mode 100644 index a65679aba..000000000 Binary files a/beta/public/images/blog/hacker-news-react-native.png and /dev/null differ diff --git a/beta/public/images/blog/highlight-updates-example.gif b/beta/public/images/blog/highlight-updates-example.gif deleted file mode 100644 index ab0c87d0c..000000000 Binary files a/beta/public/images/blog/highlight-updates-example.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/commit-selector.png b/beta/public/images/blog/introducing-the-react-profiler/commit-selector.png deleted file mode 100644 index 9c027444d..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/commit-selector.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/component-chart.png b/beta/public/images/blog/introducing-the-react-profiler/component-chart.png deleted file mode 100644 index 3a3615db2..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/component-chart.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/devtools-profiler-tab.png b/beta/public/images/blog/introducing-the-react-profiler/devtools-profiler-tab.png deleted file mode 100644 index eabb3e500..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/devtools-profiler-tab.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/filtering-commits.gif b/beta/public/images/blog/introducing-the-react-profiler/filtering-commits.gif deleted file mode 100644 index 1d73258e3..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/filtering-commits.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/flame-chart.png b/beta/public/images/blog/introducing-the-react-profiler/flame-chart.png deleted file mode 100644 index 80840b55c..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/flame-chart.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/interactions-for-commit.png b/beta/public/images/blog/introducing-the-react-profiler/interactions-for-commit.png deleted file mode 100644 index 8f1a14c61..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/interactions-for-commit.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/interactions.png b/beta/public/images/blog/introducing-the-react-profiler/interactions.png deleted file mode 100644 index 5683ac94a..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/interactions.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif b/beta/public/images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif deleted file mode 100644 index e500459c3..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/no-interactions.png b/beta/public/images/blog/introducing-the-react-profiler/no-interactions.png deleted file mode 100644 index d70199fc7..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/no-interactions.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png b/beta/public/images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png deleted file mode 100644 index e56fd4128..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png b/beta/public/images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png deleted file mode 100644 index f77b42f85..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png b/beta/public/images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png deleted file mode 100644 index 84a4dcac2..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/props-and-state.gif b/beta/public/images/blog/introducing-the-react-profiler/props-and-state.gif deleted file mode 100644 index b0b05b127..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/props-and-state.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/ranked-chart.png b/beta/public/images/blog/introducing-the-react-profiler/ranked-chart.png deleted file mode 100644 index 01246f5e5..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/ranked-chart.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif b/beta/public/images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif deleted file mode 100644 index dac21e249..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/see-which-props-changed.gif b/beta/public/images/blog/introducing-the-react-profiler/see-which-props-changed.gif deleted file mode 100644 index ae965be9b..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/see-which-props-changed.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif b/beta/public/images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif deleted file mode 100644 index b53f31025..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/start-profiling.png b/beta/public/images/blog/introducing-the-react-profiler/start-profiling.png deleted file mode 100644 index 7256474c0..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/start-profiling.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/stop-profiling.png b/beta/public/images/blog/introducing-the-react-profiler/stop-profiling.png deleted file mode 100644 index 4ef27f333..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/stop-profiling.png and /dev/null differ diff --git a/beta/public/images/blog/introducing-the-react-profiler/zoom-in-and-out.gif b/beta/public/images/blog/introducing-the-react-profiler/zoom-in-and-out.gif deleted file mode 100644 index 3a8be2c9b..000000000 Binary files a/beta/public/images/blog/introducing-the-react-profiler/zoom-in-and-out.gif and /dev/null differ diff --git a/beta/public/images/blog/jsx-compiler.png b/beta/public/images/blog/jsx-compiler.png deleted file mode 100644 index 9b5e169c0..000000000 Binary files a/beta/public/images/blog/jsx-compiler.png and /dev/null differ diff --git a/beta/public/images/blog/kendoui.png b/beta/public/images/blog/kendoui.png deleted file mode 100644 index 8b18bf438..000000000 Binary files a/beta/public/images/blog/kendoui.png and /dev/null differ diff --git a/beta/public/images/blog/khan-academy-editor.png b/beta/public/images/blog/khan-academy-editor.png deleted file mode 100644 index f0413939d..000000000 Binary files a/beta/public/images/blog/khan-academy-editor.png and /dev/null differ diff --git a/beta/public/images/blog/landoflisp.png b/beta/public/images/blog/landoflisp.png deleted file mode 100644 index 42bad2d4b..000000000 Binary files a/beta/public/images/blog/landoflisp.png and /dev/null differ diff --git a/beta/public/images/blog/lights-out.png b/beta/public/images/blog/lights-out.png deleted file mode 100644 index 78c545e7e..000000000 Binary files a/beta/public/images/blog/lights-out.png and /dev/null differ diff --git a/beta/public/images/blog/makona-editor.png b/beta/public/images/blog/makona-editor.png deleted file mode 100644 index 4fc4ece99..000000000 Binary files a/beta/public/images/blog/makona-editor.png and /dev/null differ diff --git a/beta/public/images/blog/markdown_refactor.png b/beta/public/images/blog/markdown_refactor.png deleted file mode 100644 index b81679541..000000000 Binary files a/beta/public/images/blog/markdown_refactor.png and /dev/null differ diff --git a/beta/public/images/blog/modus-create.gif b/beta/public/images/blog/modus-create.gif deleted file mode 100644 index 194252ad1..000000000 Binary files a/beta/public/images/blog/modus-create.gif and /dev/null differ diff --git a/beta/public/images/blog/monkeys.gif b/beta/public/images/blog/monkeys.gif deleted file mode 100644 index 3da6185ce..000000000 Binary files a/beta/public/images/blog/monkeys.gif and /dev/null differ diff --git a/beta/public/images/blog/ngreact.png b/beta/public/images/blog/ngreact.png deleted file mode 100644 index 6ce7e3418..000000000 Binary files a/beta/public/images/blog/ngreact.png and /dev/null differ diff --git a/beta/public/images/blog/om-backbone.png b/beta/public/images/blog/om-backbone.png deleted file mode 100644 index df411b280..000000000 Binary files a/beta/public/images/blog/om-backbone.png and /dev/null differ diff --git a/beta/public/images/blog/parse-react.jpg b/beta/public/images/blog/parse-react.jpg deleted file mode 100644 index 15e45d2ae..000000000 Binary files a/beta/public/images/blog/parse-react.jpg and /dev/null differ diff --git a/beta/public/images/blog/polarr.jpg b/beta/public/images/blog/polarr.jpg deleted file mode 100644 index 1cfb3cc90..000000000 Binary files a/beta/public/images/blog/polarr.jpg and /dev/null differ diff --git a/beta/public/images/blog/propeller-logo.png b/beta/public/images/blog/propeller-logo.png deleted file mode 100644 index 81cfaa181..000000000 Binary files a/beta/public/images/blog/propeller-logo.png and /dev/null differ diff --git a/beta/public/images/blog/property-finder.png b/beta/public/images/blog/property-finder.png deleted file mode 100644 index 709448b4f..000000000 Binary files a/beta/public/images/blog/property-finder.png and /dev/null differ diff --git a/beta/public/images/blog/quiztime.png b/beta/public/images/blog/quiztime.png deleted file mode 100644 index 7021036e6..000000000 Binary files a/beta/public/images/blog/quiztime.png and /dev/null differ diff --git a/beta/public/images/blog/react-50k-mock-full.jpg b/beta/public/images/blog/react-50k-mock-full.jpg deleted file mode 100644 index 1ebac0063..000000000 Binary files a/beta/public/images/blog/react-50k-mock-full.jpg and /dev/null differ diff --git a/beta/public/images/blog/react-50k-mock.jpg b/beta/public/images/blog/react-50k-mock.jpg deleted file mode 100644 index bc2de61d4..000000000 Binary files a/beta/public/images/blog/react-50k-mock.jpg and /dev/null differ diff --git a/beta/public/images/blog/react-50k-tshirt.jpg b/beta/public/images/blog/react-50k-tshirt.jpg deleted file mode 100644 index c96b44ca5..000000000 Binary files a/beta/public/images/blog/react-50k-tshirt.jpg and /dev/null differ diff --git a/beta/public/images/blog/react-browserify-gulp.jpg b/beta/public/images/blog/react-browserify-gulp.jpg deleted file mode 100644 index d4389d6e9..000000000 Binary files a/beta/public/images/blog/react-browserify-gulp.jpg and /dev/null differ diff --git a/beta/public/images/blog/react-dev-tools.jpg b/beta/public/images/blog/react-dev-tools.jpg deleted file mode 100644 index 7eef44629..000000000 Binary files a/beta/public/images/blog/react-dev-tools.jpg and /dev/null differ diff --git a/beta/public/images/blog/react-diff-tree.png b/beta/public/images/blog/react-diff-tree.png deleted file mode 100644 index 9935e4ae1..000000000 Binary files a/beta/public/images/blog/react-diff-tree.png and /dev/null differ diff --git a/beta/public/images/blog/react-draggable.png b/beta/public/images/blog/react-draggable.png deleted file mode 100644 index c0cb61f16..000000000 Binary files a/beta/public/images/blog/react-draggable.png and /dev/null differ diff --git a/beta/public/images/blog/react-hackathon.jpg b/beta/public/images/blog/react-hackathon.jpg deleted file mode 100644 index 2537d9865..000000000 Binary files a/beta/public/images/blog/react-hackathon.jpg and /dev/null differ diff --git a/beta/public/images/blog/react-page.png b/beta/public/images/blog/react-page.png deleted file mode 100644 index 3249fb370..000000000 Binary files a/beta/public/images/blog/react-page.png and /dev/null differ diff --git a/beta/public/images/blog/react-perf-chrome-timeline.png b/beta/public/images/blog/react-perf-chrome-timeline.png deleted file mode 100644 index e9db8acfb..000000000 Binary files a/beta/public/images/blog/react-perf-chrome-timeline.png and /dev/null differ diff --git a/beta/public/images/blog/react-php.png b/beta/public/images/blog/react-php.png deleted file mode 100644 index cb7e69abc..000000000 Binary files a/beta/public/images/blog/react-php.png and /dev/null differ diff --git a/beta/public/images/blog/react-svg-fbp.png b/beta/public/images/blog/react-svg-fbp.png deleted file mode 100644 index ef89babad..000000000 Binary files a/beta/public/images/blog/react-svg-fbp.png and /dev/null differ diff --git a/beta/public/images/blog/react-v16.13.0/hydration-warning-after.png b/beta/public/images/blog/react-v16.13.0/hydration-warning-after.png deleted file mode 100644 index 92b6c9919..000000000 Binary files a/beta/public/images/blog/react-v16.13.0/hydration-warning-after.png and /dev/null differ diff --git a/beta/public/images/blog/react-v16.13.0/hydration-warning-before.png b/beta/public/images/blog/react-v16.13.0/hydration-warning-before.png deleted file mode 100644 index 381ab8677..000000000 Binary files a/beta/public/images/blog/react-v16.13.0/hydration-warning-before.png and /dev/null differ diff --git a/beta/public/images/blog/react-v16.9.0/codemod.gif b/beta/public/images/blog/react-v16.9.0/codemod.gif deleted file mode 100644 index 955b30fdc..000000000 Binary files a/beta/public/images/blog/react-v16.9.0/codemod.gif and /dev/null differ diff --git a/beta/public/images/blog/react-v16.9.0/cwm-warning.png b/beta/public/images/blog/react-v16.9.0/cwm-warning.png deleted file mode 100644 index 3ee69d748..000000000 Binary files a/beta/public/images/blog/react-v16.9.0/cwm-warning.png and /dev/null differ diff --git a/beta/public/images/blog/react-v17-rc/react_17_delegation.png b/beta/public/images/blog/react-v17-rc/react_17_delegation.png deleted file mode 100644 index c8b23c0d6..000000000 Binary files a/beta/public/images/blog/react-v17-rc/react_17_delegation.png and /dev/null differ diff --git a/beta/public/images/blog/reactive-bookmarklet.png b/beta/public/images/blog/reactive-bookmarklet.png deleted file mode 100644 index 25351e717..000000000 Binary files a/beta/public/images/blog/reactive-bookmarklet.png and /dev/null differ diff --git a/beta/public/images/blog/reflux-flux.png b/beta/public/images/blog/reflux-flux.png deleted file mode 100644 index dad38c7d1..000000000 Binary files a/beta/public/images/blog/reflux-flux.png and /dev/null differ diff --git a/beta/public/images/blog/relay-components/relay-architecture.png b/beta/public/images/blog/relay-components/relay-architecture.png deleted file mode 100644 index 0cfbff0d8..000000000 Binary files a/beta/public/images/blog/relay-components/relay-architecture.png and /dev/null differ diff --git a/beta/public/images/blog/relay-components/relay-containers-data-flow.png b/beta/public/images/blog/relay-components/relay-containers-data-flow.png deleted file mode 100644 index 2f062dd65..000000000 Binary files a/beta/public/images/blog/relay-components/relay-containers-data-flow.png and /dev/null differ diff --git a/beta/public/images/blog/relay-components/relay-containers.png b/beta/public/images/blog/relay-components/relay-containers.png deleted file mode 100644 index be7dee719..000000000 Binary files a/beta/public/images/blog/relay-components/relay-containers.png and /dev/null differ diff --git a/beta/public/images/blog/relay-components/sample-newsfeed.png b/beta/public/images/blog/relay-components/sample-newsfeed.png deleted file mode 100644 index 0e7f5b5de..000000000 Binary files a/beta/public/images/blog/relay-components/sample-newsfeed.png and /dev/null differ diff --git a/beta/public/images/blog/relay-visual-architecture-tour.png b/beta/public/images/blog/relay-visual-architecture-tour.png deleted file mode 100644 index b35c4978f..000000000 Binary files a/beta/public/images/blog/relay-visual-architecture-tour.png and /dev/null differ diff --git a/beta/public/images/blog/release-script-build-confirmation.png b/beta/public/images/blog/release-script-build-confirmation.png deleted file mode 100644 index 02026d172..000000000 Binary files a/beta/public/images/blog/release-script-build-confirmation.png and /dev/null differ diff --git a/beta/public/images/blog/release-script-build-overview.png b/beta/public/images/blog/release-script-build-overview.png deleted file mode 100644 index d726be464..000000000 Binary files a/beta/public/images/blog/release-script-build-overview.png and /dev/null differ diff --git a/beta/public/images/blog/release-script-publish-confirmation.png b/beta/public/images/blog/release-script-publish-confirmation.png deleted file mode 100644 index e05e64830..000000000 Binary files a/beta/public/images/blog/release-script-publish-confirmation.png and /dev/null differ diff --git a/beta/public/images/blog/resistance-calculator.png b/beta/public/images/blog/resistance-calculator.png deleted file mode 100644 index 16e8b3536..000000000 Binary files a/beta/public/images/blog/resistance-calculator.png and /dev/null differ diff --git a/beta/public/images/blog/skills-matter.png b/beta/public/images/blog/skills-matter.png deleted file mode 100644 index 4a4858c3d..000000000 Binary files a/beta/public/images/blog/skills-matter.png and /dev/null differ diff --git a/beta/public/images/blog/snake.png b/beta/public/images/blog/snake.png deleted file mode 100644 index 96d72b38a..000000000 Binary files a/beta/public/images/blog/snake.png and /dev/null differ diff --git a/beta/public/images/blog/steve_reverse.gif b/beta/public/images/blog/steve_reverse.gif deleted file mode 100644 index a442fbbd9..000000000 Binary files a/beta/public/images/blog/steve_reverse.gif and /dev/null differ diff --git a/beta/public/images/blog/strict-mode-unsafe-lifecycles-warning.png b/beta/public/images/blog/strict-mode-unsafe-lifecycles-warning.png deleted file mode 100644 index fbdeccde6..000000000 Binary files a/beta/public/images/blog/strict-mode-unsafe-lifecycles-warning.png and /dev/null differ diff --git a/beta/public/images/blog/sweet-jsx.png b/beta/public/images/blog/sweet-jsx.png deleted file mode 100644 index f20aeede4..000000000 Binary files a/beta/public/images/blog/sweet-jsx.png and /dev/null differ diff --git a/beta/public/images/blog/tcomb-react-native.png b/beta/public/images/blog/tcomb-react-native.png deleted file mode 100644 index 98120c758..000000000 Binary files a/beta/public/images/blog/tcomb-react-native.png and /dev/null differ diff --git a/beta/public/images/blog/thinking-in-react-components.png b/beta/public/images/blog/thinking-in-react-components.png deleted file mode 100644 index c71a86bcb..000000000 Binary files a/beta/public/images/blog/thinking-in-react-components.png and /dev/null differ diff --git a/beta/public/images/blog/thinking-in-react-mock.png b/beta/public/images/blog/thinking-in-react-mock.png deleted file mode 100644 index 78bd00a4a..000000000 Binary files a/beta/public/images/blog/thinking-in-react-mock.png and /dev/null differ diff --git a/beta/public/images/blog/todomvc.png b/beta/public/images/blog/todomvc.png deleted file mode 100644 index ee78eb1cd..000000000 Binary files a/beta/public/images/blog/todomvc.png and /dev/null differ diff --git a/beta/public/images/blog/turboreact.png b/beta/public/images/blog/turboreact.png deleted file mode 100644 index e8ef8cd3a..000000000 Binary files a/beta/public/images/blog/turboreact.png and /dev/null differ diff --git a/beta/public/images/blog/tutsplus.png b/beta/public/images/blog/tutsplus.png deleted file mode 100644 index 771653086..000000000 Binary files a/beta/public/images/blog/tutsplus.png and /dev/null differ diff --git a/beta/public/images/blog/unite.png b/beta/public/images/blog/unite.png deleted file mode 100644 index ab45a5355..000000000 Binary files a/beta/public/images/blog/unite.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-1.png b/beta/public/images/blog/versioning-1.png deleted file mode 100644 index c13f98fd1..000000000 Binary files a/beta/public/images/blog/versioning-1.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-2.png b/beta/public/images/blog/versioning-2.png deleted file mode 100644 index 39de2a010..000000000 Binary files a/beta/public/images/blog/versioning-2.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-3.png b/beta/public/images/blog/versioning-3.png deleted file mode 100644 index 1824e89a9..000000000 Binary files a/beta/public/images/blog/versioning-3.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-4.png b/beta/public/images/blog/versioning-4.png deleted file mode 100644 index 13ba32e39..000000000 Binary files a/beta/public/images/blog/versioning-4.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-5.png b/beta/public/images/blog/versioning-5.png deleted file mode 100644 index 542a3926b..000000000 Binary files a/beta/public/images/blog/versioning-5.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-6.png b/beta/public/images/blog/versioning-6.png deleted file mode 100644 index e82bc7136..000000000 Binary files a/beta/public/images/blog/versioning-6.png and /dev/null differ diff --git a/beta/public/images/blog/versioning-poll.png b/beta/public/images/blog/versioning-poll.png deleted file mode 100644 index 8b3e18d93..000000000 Binary files a/beta/public/images/blog/versioning-poll.png and /dev/null differ diff --git a/beta/public/images/blog/warn-legacy-context-in-strict-mode.png b/beta/public/images/blog/warn-legacy-context-in-strict-mode.png deleted file mode 100644 index e061325ac..000000000 Binary files a/beta/public/images/blog/warn-legacy-context-in-strict-mode.png and /dev/null differ diff --git a/beta/public/images/blog/weather.png b/beta/public/images/blog/weather.png deleted file mode 100644 index 90c5e6fea..000000000 Binary files a/beta/public/images/blog/weather.png and /dev/null differ diff --git a/beta/public/images/blog/wolfenstein_react.png b/beta/public/images/blog/wolfenstein_react.png deleted file mode 100644 index 98241b864..000000000 Binary files a/beta/public/images/blog/wolfenstein_react.png and /dev/null differ diff --git a/beta/public/images/blog/xoxo2013.png b/beta/public/images/blog/xoxo2013.png deleted file mode 100644 index d35989095..000000000 Binary files a/beta/public/images/blog/xoxo2013.png and /dev/null differ diff --git a/beta/public/images/blog/xreact.png b/beta/public/images/blog/xreact.png deleted file mode 100644 index ba23489d5..000000000 Binary files a/beta/public/images/blog/xreact.png and /dev/null differ diff --git a/beta/public/images/docs/blur-popover-close.gif b/beta/public/images/docs/blur-popover-close.gif deleted file mode 100644 index fefc6b8a4..000000000 Binary files a/beta/public/images/docs/blur-popover-close.gif and /dev/null differ diff --git a/beta/public/images/docs/cdn-cors-header.png b/beta/public/images/docs/cdn-cors-header.png deleted file mode 100644 index 31b047cbd..000000000 Binary files a/beta/public/images/docs/cdn-cors-header.png and /dev/null differ diff --git a/beta/public/images/docs/cm-steps-simple.png b/beta/public/images/docs/cm-steps-simple.png deleted file mode 100644 index e5683f9e6..000000000 Binary files a/beta/public/images/docs/cm-steps-simple.png and /dev/null differ diff --git a/beta/public/images/docs/codewinds-004.png b/beta/public/images/docs/codewinds-004.png deleted file mode 100644 index 6c4bc997f..000000000 Binary files a/beta/public/images/docs/codewinds-004.png and /dev/null differ diff --git a/beta/public/images/docs/devtools-dev.png b/beta/public/images/docs/devtools-dev.png deleted file mode 100644 index 5347b4b8d..000000000 Binary files a/beta/public/images/docs/devtools-dev.png and /dev/null differ diff --git a/beta/public/images/docs/devtools-prod.png b/beta/public/images/docs/devtools-prod.png deleted file mode 100644 index 4e200fb48..000000000 Binary files a/beta/public/images/docs/devtools-prod.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/passing_data_context_close.dark.png b/beta/public/images/docs/diagrams/passing_data_context_close.dark.png deleted file mode 100644 index 59045299d..000000000 Binary files a/beta/public/images/docs/diagrams/passing_data_context_close.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/passing_data_context_close.png b/beta/public/images/docs/diagrams/passing_data_context_close.png deleted file mode 100644 index 4591aacce..000000000 Binary files a/beta/public/images/docs/diagrams/passing_data_context_close.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/passing_data_context_far.dark.png b/beta/public/images/docs/diagrams/passing_data_context_far.dark.png deleted file mode 100644 index 7e0d0bc58..000000000 Binary files a/beta/public/images/docs/diagrams/passing_data_context_far.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/passing_data_context_far.png b/beta/public/images/docs/diagrams/passing_data_context_far.png deleted file mode 100644 index 7a4c85150..000000000 Binary files a/beta/public/images/docs/diagrams/passing_data_context_far.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/passing_data_lifting_state.dark.png b/beta/public/images/docs/diagrams/passing_data_lifting_state.dark.png deleted file mode 100644 index dd7b48556..000000000 Binary files a/beta/public/images/docs/diagrams/passing_data_lifting_state.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/passing_data_lifting_state.png b/beta/public/images/docs/diagrams/passing_data_lifting_state.png deleted file mode 100644 index 919b4e684..000000000 Binary files a/beta/public/images/docs/diagrams/passing_data_lifting_state.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/passing_data_prop_drilling.dark.png b/beta/public/images/docs/diagrams/passing_data_prop_drilling.dark.png deleted file mode 100644 index 1cbd5a2f8..000000000 Binary files a/beta/public/images/docs/diagrams/passing_data_prop_drilling.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/passing_data_prop_drilling.png b/beta/public/images/docs/diagrams/passing_data_prop_drilling.png deleted file mode 100644 index c22cb2c52..000000000 Binary files a/beta/public/images/docs/diagrams/passing_data_prop_drilling.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_add_component.dark.png b/beta/public/images/docs/diagrams/preserving_state_add_component.dark.png deleted file mode 100644 index 24155f936..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_add_component.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_add_component.png b/beta/public/images/docs/diagrams/preserving_state_add_component.png deleted file mode 100644 index d98e7bd3d..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_add_component.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.dark.png deleted file mode 100644 index b2c2efc67..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.png b/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.png deleted file mode 100644 index 84d4ef52d..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.dark.png deleted file mode 100644 index 9472414cf..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.png b/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.png deleted file mode 100644 index fad05b2e2..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.dark.png deleted file mode 100644 index 2b520eb6a..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.png b/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.png deleted file mode 100644 index 1fbbe510a..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_pt1.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_pt1.dark.png deleted file mode 100644 index 0bb042c94..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_pt1.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_pt1.png b/beta/public/images/docs/diagrams/preserving_state_diff_pt1.png deleted file mode 100644 index 1cbc6874f..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_pt1.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_pt2.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_pt2.dark.png deleted file mode 100644 index ae6bdf95b..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_pt2.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_pt2.png b/beta/public/images/docs/diagrams/preserving_state_diff_pt2.png deleted file mode 100644 index 3d52b278e..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_pt2.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.dark.png deleted file mode 100644 index f0eb4a786..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.png b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.png deleted file mode 100644 index 3d22270d8..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.dark.png b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.dark.png deleted file mode 100644 index 07ef5a761..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.png b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.png deleted file mode 100644 index 1bbc87a3e..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_dom_tree.dark.png b/beta/public/images/docs/diagrams/preserving_state_dom_tree.dark.png deleted file mode 100644 index 4f7c8afdc..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_dom_tree.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_dom_tree.png b/beta/public/images/docs/diagrams/preserving_state_dom_tree.png deleted file mode 100644 index 3b38a1bd3..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_dom_tree.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_increment.dark.png b/beta/public/images/docs/diagrams/preserving_state_increment.dark.png deleted file mode 100644 index 5bc133611..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_increment.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_increment.png b/beta/public/images/docs/diagrams/preserving_state_increment.png deleted file mode 100644 index 9b9ce9ca8..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_increment.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_remove_component.dark.png b/beta/public/images/docs/diagrams/preserving_state_remove_component.dark.png deleted file mode 100644 index cb6a466ac..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_remove_component.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_remove_component.png b/beta/public/images/docs/diagrams/preserving_state_remove_component.png deleted file mode 100644 index 966c1744b..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_remove_component.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_same_component.dark.png b/beta/public/images/docs/diagrams/preserving_state_same_component.dark.png deleted file mode 100644 index 013fcaa80..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_same_component.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_same_component.png b/beta/public/images/docs/diagrams/preserving_state_same_component.png deleted file mode 100644 index 4cb1b32ed..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_same_component.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_tree.dark.png b/beta/public/images/docs/diagrams/preserving_state_tree.dark.png deleted file mode 100644 index 452343857..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_tree.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/preserving_state_tree.png b/beta/public/images/docs/diagrams/preserving_state_tree.png deleted file mode 100644 index a77e49ab2..000000000 Binary files a/beta/public/images/docs/diagrams/preserving_state_tree.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/responding_to_input_flow.dark.png b/beta/public/images/docs/diagrams/responding_to_input_flow.dark.png deleted file mode 100644 index 60e5c8f36..000000000 Binary files a/beta/public/images/docs/diagrams/responding_to_input_flow.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/responding_to_input_flow.png b/beta/public/images/docs/diagrams/responding_to_input_flow.png deleted file mode 100644 index cbbec9ac3..000000000 Binary files a/beta/public/images/docs/diagrams/responding_to_input_flow.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_data_child.dark.png b/beta/public/images/docs/diagrams/sharing_data_child.dark.png deleted file mode 100644 index 3efdc29fe..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_data_child.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_data_child.png b/beta/public/images/docs/diagrams/sharing_data_child.png deleted file mode 100644 index afc794bcd..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_data_child.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_data_child_clicked.dark.png b/beta/public/images/docs/diagrams/sharing_data_child_clicked.dark.png deleted file mode 100644 index cf60c235f..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_data_child_clicked.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_data_child_clicked.png b/beta/public/images/docs/diagrams/sharing_data_child_clicked.png deleted file mode 100644 index c14fb4a8f..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_data_child_clicked.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_data_parent.dark.png b/beta/public/images/docs/diagrams/sharing_data_parent.dark.png deleted file mode 100644 index d4f369835..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_data_parent.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_data_parent.png b/beta/public/images/docs/diagrams/sharing_data_parent.png deleted file mode 100644 index 8c7b70305..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_data_parent.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_data_parent_clicked.dark.png b/beta/public/images/docs/diagrams/sharing_data_parent_clicked.dark.png deleted file mode 100644 index ac4c765de..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_data_parent_clicked.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_data_parent_clicked.png b/beta/public/images/docs/diagrams/sharing_data_parent_clicked.png deleted file mode 100644 index ca16cb8dd..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_data_parent_clicked.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_state_child.dark.png b/beta/public/images/docs/diagrams/sharing_state_child.dark.png deleted file mode 100644 index dfaf897b0..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_state_child.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_state_child.png b/beta/public/images/docs/diagrams/sharing_state_child.png deleted file mode 100644 index c3a9f0ec9..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_state_child.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_state_child_clicked.dark.png b/beta/public/images/docs/diagrams/sharing_state_child_clicked.dark.png deleted file mode 100644 index bc6b3c89a..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_state_child_clicked.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_state_child_clicked.png b/beta/public/images/docs/diagrams/sharing_state_child_clicked.png deleted file mode 100644 index d4dddbd9b..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_state_child_clicked.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_state_parent.dark.png b/beta/public/images/docs/diagrams/sharing_state_parent.dark.png deleted file mode 100644 index ba937de7e..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_state_parent.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_state_parent.png b/beta/public/images/docs/diagrams/sharing_state_parent.png deleted file mode 100644 index 3aaaef724..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_state_parent.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_state_parent_clicked.dark.png b/beta/public/images/docs/diagrams/sharing_state_parent_clicked.dark.png deleted file mode 100644 index 22ef522b4..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_state_parent_clicked.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/sharing_state_parent_clicked.png b/beta/public/images/docs/diagrams/sharing_state_parent_clicked.png deleted file mode 100644 index 406cd8314..000000000 Binary files a/beta/public/images/docs/diagrams/sharing_state_parent_clicked.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/writing_jsx_form.dark.png b/beta/public/images/docs/diagrams/writing_jsx_form.dark.png deleted file mode 100644 index 3f7184239..000000000 Binary files a/beta/public/images/docs/diagrams/writing_jsx_form.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/writing_jsx_form.png b/beta/public/images/docs/diagrams/writing_jsx_form.png deleted file mode 100644 index 21baa97fc..000000000 Binary files a/beta/public/images/docs/diagrams/writing_jsx_form.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/writing_jsx_html.dark.png b/beta/public/images/docs/diagrams/writing_jsx_html.dark.png deleted file mode 100644 index c73d3fb42..000000000 Binary files a/beta/public/images/docs/diagrams/writing_jsx_html.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/writing_jsx_html.png b/beta/public/images/docs/diagrams/writing_jsx_html.png deleted file mode 100644 index 6f30314a3..000000000 Binary files a/beta/public/images/docs/diagrams/writing_jsx_html.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/writing_jsx_js.dark.png b/beta/public/images/docs/diagrams/writing_jsx_js.dark.png deleted file mode 100644 index aee00cb98..000000000 Binary files a/beta/public/images/docs/diagrams/writing_jsx_js.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/writing_jsx_js.png b/beta/public/images/docs/diagrams/writing_jsx_js.png deleted file mode 100644 index 9c3d44216..000000000 Binary files a/beta/public/images/docs/diagrams/writing_jsx_js.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/writing_jsx_sidebar.dark.png b/beta/public/images/docs/diagrams/writing_jsx_sidebar.dark.png deleted file mode 100644 index 5fa45be1c..000000000 Binary files a/beta/public/images/docs/diagrams/writing_jsx_sidebar.dark.png and /dev/null differ diff --git a/beta/public/images/docs/diagrams/writing_jsx_sidebar.png b/beta/public/images/docs/diagrams/writing_jsx_sidebar.png deleted file mode 100644 index b1474562d..000000000 Binary files a/beta/public/images/docs/diagrams/writing_jsx_sidebar.png and /dev/null differ diff --git a/beta/public/images/docs/error-boundaries-stack-trace-line-numbers.png b/beta/public/images/docs/error-boundaries-stack-trace-line-numbers.png deleted file mode 100644 index db828905a..000000000 Binary files a/beta/public/images/docs/error-boundaries-stack-trace-line-numbers.png and /dev/null differ diff --git a/beta/public/images/docs/error-boundaries-stack-trace.png b/beta/public/images/docs/error-boundaries-stack-trace.png deleted file mode 100644 index f0d49d903..000000000 Binary files a/beta/public/images/docs/error-boundaries-stack-trace.png and /dev/null differ diff --git a/beta/public/images/docs/granular-dom-updates.gif b/beta/public/images/docs/granular-dom-updates.gif deleted file mode 100644 index 1651b0dae..000000000 Binary files a/beta/public/images/docs/granular-dom-updates.gif and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_browser-paint.png b/beta/public/images/docs/illustrations/i_browser-paint.png deleted file mode 100644 index b0d61fa8f..000000000 Binary files a/beta/public/images/docs/illustrations/i_browser-paint.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_children-prop.png b/beta/public/images/docs/illustrations/i_children-prop.png deleted file mode 100644 index 296c626dc..000000000 Binary files a/beta/public/images/docs/illustrations/i_children-prop.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_declarative-ui-programming.png b/beta/public/images/docs/illustrations/i_declarative-ui-programming.png deleted file mode 100644 index 206d73e51..000000000 Binary files a/beta/public/images/docs/illustrations/i_declarative-ui-programming.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_html_js.svg b/beta/public/images/docs/illustrations/i_html_js.svg deleted file mode 100644 index 9b6f5bad8..000000000 --- a/beta/public/images/docs/illustrations/i_html_js.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - onSubmit() { ... } - - - - login() { ... } - - - - onClick() { ... } - - JS - - - - - - - - <div> - - - - <form> - - - - <p> - - HTML - - diff --git a/beta/public/images/docs/illustrations/i_imperative-ui-programming.png b/beta/public/images/docs/illustrations/i_imperative-ui-programming.png deleted file mode 100644 index 1e3b5fdd8..000000000 Binary files a/beta/public/images/docs/illustrations/i_imperative-ui-programming.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_import-export.svg b/beta/public/images/docs/illustrations/i_import-export.svg deleted file mode 100644 index eb62e2b8c..000000000 --- a/beta/public/images/docs/illustrations/i_import-export.svg +++ /dev/null @@ -1,100 +0,0 @@ - - - - - - - - - export default function Button() { ... } - - Component.js - - - one default export - - - multiple named exports - - - - export function Checkbox() { ... } - - - - export function Slider() { ... } - - Components.js - - - - - - export function Avatar() { ... } - - MixedComponents.js - - - export default function FriendsList() { ... } - - named export(s)and one default export - - diff --git a/beta/public/images/docs/illustrations/i_inputs1.png b/beta/public/images/docs/illustrations/i_inputs1.png deleted file mode 100644 index 35150b22d..000000000 Binary files a/beta/public/images/docs/illustrations/i_inputs1.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_inputs2.png b/beta/public/images/docs/illustrations/i_inputs2.png deleted file mode 100644 index f519af36e..000000000 Binary files a/beta/public/images/docs/illustrations/i_inputs2.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_jsx.svg b/beta/public/images/docs/illustrations/i_jsx.svg deleted file mode 100644 index 629cad665..000000000 --- a/beta/public/images/docs/illustrations/i_jsx.svg +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - - Form() { onClick() { ... } onSubmit() { ... } <form onSubmit> <input onClick /> <input onClick /> </form> } - Form.js - - - - - - Sidebar() { isLoggedIn() { <p>Welcome</p> } else { <Form /> }} - Sidebar.js - - - diff --git a/beta/public/images/docs/illustrations/i_puritea-recipe.png b/beta/public/images/docs/illustrations/i_puritea-recipe.png deleted file mode 100644 index d3a348bd5..000000000 Binary files a/beta/public/images/docs/illustrations/i_puritea-recipe.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_react-batching.png b/beta/public/images/docs/illustrations/i_react-batching.png deleted file mode 100644 index e213ba3ad..000000000 Binary files a/beta/public/images/docs/illustrations/i_react-batching.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_ref.png b/beta/public/images/docs/illustrations/i_ref.png deleted file mode 100644 index c391e57e4..000000000 Binary files a/beta/public/images/docs/illustrations/i_ref.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_render-and-commit1.png b/beta/public/images/docs/illustrations/i_render-and-commit1.png deleted file mode 100644 index d62ba5806..000000000 Binary files a/beta/public/images/docs/illustrations/i_render-and-commit1.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_render-and-commit2.png b/beta/public/images/docs/illustrations/i_render-and-commit2.png deleted file mode 100644 index e01d0cce7..000000000 Binary files a/beta/public/images/docs/illustrations/i_render-and-commit2.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_render-and-commit3.png b/beta/public/images/docs/illustrations/i_render-and-commit3.png deleted file mode 100644 index bdf58c0e0..000000000 Binary files a/beta/public/images/docs/illustrations/i_render-and-commit3.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_render1.png b/beta/public/images/docs/illustrations/i_render1.png deleted file mode 100644 index 3613c7691..000000000 Binary files a/beta/public/images/docs/illustrations/i_render1.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_render2.png b/beta/public/images/docs/illustrations/i_render2.png deleted file mode 100644 index ca53a7785..000000000 Binary files a/beta/public/images/docs/illustrations/i_render2.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_render3.png b/beta/public/images/docs/illustrations/i_render3.png deleted file mode 100644 index 797860a7c..000000000 Binary files a/beta/public/images/docs/illustrations/i_render3.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_rerender1.png b/beta/public/images/docs/illustrations/i_rerender1.png deleted file mode 100644 index e94361e7b..000000000 Binary files a/beta/public/images/docs/illustrations/i_rerender1.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_rerender2.png b/beta/public/images/docs/illustrations/i_rerender2.png deleted file mode 100644 index 6d85cae84..000000000 Binary files a/beta/public/images/docs/illustrations/i_rerender2.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_rerender3.png b/beta/public/images/docs/illustrations/i_rerender3.png deleted file mode 100644 index d589a9b93..000000000 Binary files a/beta/public/images/docs/illustrations/i_rerender3.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_state-snapshot1.png b/beta/public/images/docs/illustrations/i_state-snapshot1.png deleted file mode 100644 index 69bbf2b72..000000000 Binary files a/beta/public/images/docs/illustrations/i_state-snapshot1.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_state-snapshot2.png b/beta/public/images/docs/illustrations/i_state-snapshot2.png deleted file mode 100644 index eea48a218..000000000 Binary files a/beta/public/images/docs/illustrations/i_state-snapshot2.png and /dev/null differ diff --git a/beta/public/images/docs/illustrations/i_state-snapshot3.png b/beta/public/images/docs/illustrations/i_state-snapshot3.png deleted file mode 100644 index a393528e2..000000000 Binary files a/beta/public/images/docs/illustrations/i_state-snapshot3.png and /dev/null differ diff --git a/beta/public/images/docs/implementation-notes-tree.png b/beta/public/images/docs/implementation-notes-tree.png deleted file mode 100644 index 923ef5d0d..000000000 Binary files a/beta/public/images/docs/implementation-notes-tree.png and /dev/null differ diff --git a/beta/public/images/docs/javascript-jabber.png b/beta/public/images/docs/javascript-jabber.png deleted file mode 100644 index 57d63c41c..000000000 Binary files a/beta/public/images/docs/javascript-jabber.png and /dev/null differ diff --git a/beta/public/images/docs/keyboard-focus.png b/beta/public/images/docs/keyboard-focus.png deleted file mode 100644 index 65a8dc300..000000000 Binary files a/beta/public/images/docs/keyboard-focus.png and /dev/null differ diff --git a/beta/public/images/docs/outerclick-with-keyboard.gif b/beta/public/images/docs/outerclick-with-keyboard.gif deleted file mode 100644 index c82d299f8..000000000 Binary files a/beta/public/images/docs/outerclick-with-keyboard.gif and /dev/null differ diff --git a/beta/public/images/docs/outerclick-with-mouse.gif b/beta/public/images/docs/outerclick-with-mouse.gif deleted file mode 100644 index e562e0324..000000000 Binary files a/beta/public/images/docs/outerclick-with-mouse.gif and /dev/null differ diff --git a/beta/public/images/docs/perf-dom.png b/beta/public/images/docs/perf-dom.png deleted file mode 100644 index 9a843c6ca..000000000 Binary files a/beta/public/images/docs/perf-dom.png and /dev/null differ diff --git a/beta/public/images/docs/perf-exclusive.png b/beta/public/images/docs/perf-exclusive.png deleted file mode 100644 index a8ad5003c..000000000 Binary files a/beta/public/images/docs/perf-exclusive.png and /dev/null differ diff --git a/beta/public/images/docs/perf-inclusive.png b/beta/public/images/docs/perf-inclusive.png deleted file mode 100644 index e46b370aa..000000000 Binary files a/beta/public/images/docs/perf-inclusive.png and /dev/null differ diff --git a/beta/public/images/docs/perf-wasted.png b/beta/public/images/docs/perf-wasted.png deleted file mode 100644 index c73131818..000000000 Binary files a/beta/public/images/docs/perf-wasted.png and /dev/null differ diff --git a/beta/public/images/docs/react-devtools-extension.png b/beta/public/images/docs/react-devtools-extension.png deleted file mode 100644 index 6ea2aad8d..000000000 Binary files a/beta/public/images/docs/react-devtools-extension.png and /dev/null differ diff --git a/beta/public/images/docs/react-devtools-standalone.png b/beta/public/images/docs/react-devtools-standalone.png deleted file mode 100644 index 07da74137..000000000 Binary files a/beta/public/images/docs/react-devtools-standalone.png and /dev/null differ diff --git a/beta/public/images/docs/react-devtools-state.gif b/beta/public/images/docs/react-devtools-state.gif deleted file mode 100644 index c9ff6cd35..000000000 Binary files a/beta/public/images/docs/react-devtools-state.gif and /dev/null differ diff --git a/beta/public/images/docs/s_thinking-in-react_ui.png b/beta/public/images/docs/s_thinking-in-react_ui.png deleted file mode 100644 index 21802352c..000000000 Binary files a/beta/public/images/docs/s_thinking-in-react_ui.png and /dev/null differ diff --git a/beta/public/images/docs/s_thinking-in-react_ui_outline.png b/beta/public/images/docs/s_thinking-in-react_ui_outline.png deleted file mode 100644 index d38f3e19f..000000000 Binary files a/beta/public/images/docs/s_thinking-in-react_ui_outline.png and /dev/null differ diff --git a/beta/public/images/docs/should-component-update.png b/beta/public/images/docs/should-component-update.png deleted file mode 100644 index 590af60b8..000000000 Binary files a/beta/public/images/docs/should-component-update.png and /dev/null differ diff --git a/beta/public/images/docs/source/i_browser-paint.psd b/beta/public/images/docs/source/i_browser-paint.psd deleted file mode 100644 index bb541e889..000000000 Binary files a/beta/public/images/docs/source/i_browser-paint.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_children-prop.psd b/beta/public/images/docs/source/i_children-prop.psd deleted file mode 100644 index 2577c0aa0..000000000 Binary files a/beta/public/images/docs/source/i_children-prop.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_declarative-ui-programming.psd b/beta/public/images/docs/source/i_declarative-ui-programming.psd deleted file mode 100644 index 3b1a9a4d1..000000000 Binary files a/beta/public/images/docs/source/i_declarative-ui-programming.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_imperative-ui-programming.psd b/beta/public/images/docs/source/i_imperative-ui-programming.psd deleted file mode 100644 index c1511b022..000000000 Binary files a/beta/public/images/docs/source/i_imperative-ui-programming.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_keys-in-trees.psd b/beta/public/images/docs/source/i_keys-in-trees.psd deleted file mode 100644 index bab04dc08..000000000 Binary files a/beta/public/images/docs/source/i_keys-in-trees.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_puritea-recipe.psd b/beta/public/images/docs/source/i_puritea-recipe.psd deleted file mode 100644 index 72a33ab30..000000000 Binary files a/beta/public/images/docs/source/i_puritea-recipe.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_react-batching.psd b/beta/public/images/docs/source/i_react-batching.psd deleted file mode 100644 index 88bcd617b..000000000 Binary files a/beta/public/images/docs/source/i_react-batching.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_react-is-blind-to-ui-swap.psd b/beta/public/images/docs/source/i_react-is-blind-to-ui-swap.psd deleted file mode 100644 index 5e422ba63..000000000 Binary files a/beta/public/images/docs/source/i_react-is-blind-to-ui-swap.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_ref.psd b/beta/public/images/docs/source/i_ref.psd deleted file mode 100644 index 12349b431..000000000 Binary files a/beta/public/images/docs/source/i_ref.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_render-commit.psd b/beta/public/images/docs/source/i_render-commit.psd deleted file mode 100644 index 99f62802a..000000000 Binary files a/beta/public/images/docs/source/i_render-commit.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_rerender.psd b/beta/public/images/docs/source/i_rerender.psd deleted file mode 100644 index 9dc83d5ed..000000000 Binary files a/beta/public/images/docs/source/i_rerender.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_rerendering.psd b/beta/public/images/docs/source/i_rerendering.psd deleted file mode 100644 index 2ba1cba58..000000000 Binary files a/beta/public/images/docs/source/i_rerendering.psd and /dev/null differ diff --git a/beta/public/images/docs/source/i_state-snapshot.psd b/beta/public/images/docs/source/i_state-snapshot.psd deleted file mode 100644 index b8d54ddcc..000000000 Binary files a/beta/public/images/docs/source/i_state-snapshot.psd and /dev/null differ diff --git a/beta/public/images/docs/source/s_inputs.psd b/beta/public/images/docs/source/s_inputs.psd deleted file mode 100644 index 60354742a..000000000 Binary files a/beta/public/images/docs/source/s_inputs.psd and /dev/null differ diff --git a/beta/public/images/docs/source/s_ui-snapshot.psd b/beta/public/images/docs/source/s_ui-snapshot.psd deleted file mode 100644 index 41c65f8fe..000000000 Binary files a/beta/public/images/docs/source/s_ui-snapshot.psd and /dev/null differ diff --git a/beta/public/images/docs/thinking-in-react-tagtree.png b/beta/public/images/docs/thinking-in-react-tagtree.png deleted file mode 100644 index 3d4db2d23..000000000 Binary files a/beta/public/images/docs/thinking-in-react-tagtree.png and /dev/null differ diff --git a/beta/public/images/external.png b/beta/public/images/external.png deleted file mode 100644 index 748a27e44..000000000 Binary files a/beta/public/images/external.png and /dev/null differ diff --git a/beta/public/images/external_2x.png b/beta/public/images/external_2x.png deleted file mode 100644 index 66230854d..000000000 Binary files a/beta/public/images/external_2x.png and /dev/null differ diff --git a/beta/public/images/g_arrow.png b/beta/public/images/g_arrow.png deleted file mode 100644 index 36258add5..000000000 Binary files a/beta/public/images/g_arrow.png and /dev/null differ diff --git a/beta/public/images/history.png b/beta/public/images/history.png deleted file mode 100644 index 4ca56a866..000000000 Binary files a/beta/public/images/history.png and /dev/null differ diff --git a/beta/public/images/noise.png b/beta/public/images/noise.png deleted file mode 100644 index 698f924f4..000000000 Binary files a/beta/public/images/noise.png and /dev/null differ diff --git a/beta/public/images/oss_logo.png b/beta/public/images/oss_logo.png deleted file mode 100644 index 3f376bee9..000000000 Binary files a/beta/public/images/oss_logo.png and /dev/null differ diff --git a/beta/public/images/search.png b/beta/public/images/search.png deleted file mode 100644 index 151377693..000000000 Binary files a/beta/public/images/search.png and /dev/null differ diff --git a/beta/public/images/team/acdlite.jpg b/beta/public/images/team/acdlite.jpg deleted file mode 100644 index ab54b793b..000000000 Binary files a/beta/public/images/team/acdlite.jpg and /dev/null differ diff --git a/beta/public/images/team/bvaughn.jpg b/beta/public/images/team/bvaughn.jpg deleted file mode 100644 index 227fe8d94..000000000 Binary files a/beta/public/images/team/bvaughn.jpg and /dev/null differ diff --git a/beta/public/images/team/gaearon.jpg b/beta/public/images/team/gaearon.jpg deleted file mode 100644 index e152143b7..000000000 Binary files a/beta/public/images/team/gaearon.jpg and /dev/null differ diff --git a/beta/public/images/team/huxpro.jpg b/beta/public/images/team/huxpro.jpg deleted file mode 100644 index f9a94452e..000000000 Binary files a/beta/public/images/team/huxpro.jpg and /dev/null differ diff --git a/beta/public/images/team/lunaruan.jpg b/beta/public/images/team/lunaruan.jpg deleted file mode 100644 index 91daa3d17..000000000 Binary files a/beta/public/images/team/lunaruan.jpg and /dev/null differ diff --git a/beta/public/images/team/necolas.jpg b/beta/public/images/team/necolas.jpg deleted file mode 100644 index b7caaac06..000000000 Binary files a/beta/public/images/team/necolas.jpg and /dev/null differ diff --git a/beta/public/images/team/rickhanlonii.jpg b/beta/public/images/team/rickhanlonii.jpg deleted file mode 100644 index eb04614c5..000000000 Binary files a/beta/public/images/team/rickhanlonii.jpg and /dev/null differ diff --git a/beta/public/images/team/rnabors.jpg b/beta/public/images/team/rnabors.jpg deleted file mode 100644 index 4425c90db..000000000 Binary files a/beta/public/images/team/rnabors.jpg and /dev/null differ diff --git a/beta/public/images/team/salazarm.jpeg b/beta/public/images/team/salazarm.jpeg deleted file mode 100644 index 0360f208d..000000000 Binary files a/beta/public/images/team/salazarm.jpeg and /dev/null differ diff --git a/beta/public/images/team/sebmarkbage.jpg b/beta/public/images/team/sebmarkbage.jpg deleted file mode 100644 index 56a480ff4..000000000 Binary files a/beta/public/images/team/sebmarkbage.jpg and /dev/null differ diff --git a/beta/public/images/team/threepointone.jpg b/beta/public/images/team/threepointone.jpg deleted file mode 100644 index 9ad860171..000000000 Binary files a/beta/public/images/team/threepointone.jpg and /dev/null differ diff --git a/beta/public/images/team/trueadm.jpg b/beta/public/images/team/trueadm.jpg deleted file mode 100644 index 33a6b838f..000000000 Binary files a/beta/public/images/team/trueadm.jpg and /dev/null differ diff --git a/beta/public/images/team/yuzhi.jpg b/beta/public/images/team/yuzhi.jpg deleted file mode 100644 index c3f4175d7..000000000 Binary files a/beta/public/images/team/yuzhi.jpg and /dev/null differ diff --git a/beta/public/images/tutorial/devtools.png b/beta/public/images/tutorial/devtools.png deleted file mode 100644 index 6c4765703..000000000 Binary files a/beta/public/images/tutorial/devtools.png and /dev/null differ diff --git a/beta/public/images/tutorial/tictac-empty.png b/beta/public/images/tutorial/tictac-empty.png deleted file mode 100644 index fabe3f034..000000000 Binary files a/beta/public/images/tutorial/tictac-empty.png and /dev/null differ diff --git a/beta/public/images/tutorial/tictac-numbers.png b/beta/public/images/tutorial/tictac-numbers.png deleted file mode 100644 index 69d163f45..000000000 Binary files a/beta/public/images/tutorial/tictac-numbers.png and /dev/null differ diff --git a/beta/public/js/jsfiddle-integration-babel.js b/beta/public/js/jsfiddle-integration-babel.js deleted file mode 100644 index 006c79c8a..000000000 --- a/beta/public/js/jsfiddle-integration-babel.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -// Do not delete or move this file. -// Many fiddles reference it so we have to keep it here. -(function() { - var tag = document.querySelector( - 'script[type="application/javascript;version=1.7"]' - ); - if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) { - alert('Bad JSFiddle configuration, please fork the original React JSFiddle'); - } - tag.setAttribute('type', 'text/babel'); - tag.textContent = tag.textContent.replace(/^\/\/ { - const routes = []; - const blogPosts = await globby('src/pages/blog/**/*.md'); - - for (let postpath of blogPosts) { - const [year, month, day, title] = postpath - .replace('src/pages/blog/', '') - .split('/'); - - const rawStr = await fs.readFile(postpath, 'utf8'); - const {data, excerpt, content} = fm(rawStr, { - excerpt: function firstLine(file, options) { - file.excerpt = file.content.split('\n').slice(0, 2).join(' '); - }, - }); - const rendered = await markdownToHtml(excerpt.trimLeft().trim()); - - routes.unshift({ - path: postpath.replace('src/pages', ''), - date: [year, month, day].join('-'), - title: data.title, - author: data.author, - excerpt: rendered, - readingTime: readingTime(content).text, - }); - } - - const sorted = routes.sort((post1, post2) => - parseISO(post1.date) > parseISO(post2.date) ? -1 : 1 - ); - const blogManifest = { - routes: sorted, - }; - const blogRecentSidebar = { - routes: [ - { - title: 'Recent Posts', - path: '/blog', - heading: true, - routes: sorted.slice(0, 25), - }, - ], - }; - - await fs.writeFile( - path.resolve('./src/blogIndex.json'), - JSON.stringify(blogManifest, null, 2) - ); - await fs.writeFile( - path.resolve('./src/blogIndexRecent.json'), - JSON.stringify(blogRecentSidebar, null, 2) - ); - }) - .catch(console.error); diff --git a/beta/scripts/generateRSS.js b/beta/scripts/generateRSS.js deleted file mode 100644 index a08c7e2ad..000000000 --- a/beta/scripts/generateRSS.js +++ /dev/null @@ -1,46 +0,0 @@ -const RSS = require('rss'); -const fs = require('fs-extra'); -const authorsJson = require('../src/authors.json'); -const blogIndexJson = require('../src/blogIndex.json'); -const parse = require('date-fns/parse'); - -function removeFromLast(path, key) { - const i = path.lastIndexOf(key); - return i === -1 ? path : path.substring(0, i); -} - -const SITE_URL = 'https://reactjs.org'; - -function generate() { - const feed = new RSS({ - title: 'React.js Blog', - site_url: SITE_URL, - feed_url: SITE_URL + '/feed.xml', - }); - - blogIndexJson.routes.map((meta) => { - feed.item({ - title: meta.title, - guid: removeFromLast(meta.path, '.'), - url: SITE_URL + removeFromLast(meta.path, '.'), - date: parse(meta.date, 'yyyy-MM-dd', new Date()), - description: meta.description, - custom_elements: [].concat( - meta.author.map((author) => ({ - author: [{ name: authorsJson[author].name }], - })) - ), - }); - }); - - const rss = feed.xml({ indent: true }); - - fs.writeFileSync('./.next/static/feed.xml', rss); -} - -try { - generate(); -} catch (error) { - console.error('Error generating rss feed'); - throw error; -} diff --git a/beta/scripts/generateRedirects.js b/beta/scripts/generateRedirects.js deleted file mode 100644 index b6e23b58a..000000000 --- a/beta/scripts/generateRedirects.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -const resolve = require('path').resolve; -const {writeFile} = require('fs-extra'); -const readFileSync = require('fs').readFileSync; -const safeLoad = require('js-yaml').safeLoad; -const path = require('path'); -const versionsFile = resolve(__dirname, '../../content/versions.yml'); -const file = readFileSync(versionsFile, 'utf8'); -const versions = safeLoad(file); -const redirectsFilePath = path.join('vercel.json'); - -function writeRedirectsFile(redirects, redirectsFilePath) { - if (!redirects.length) { - return null; - } - - /** - * We will first read the old config to validate if the redirect already exists in the json - */ - const vercelConfigPath = resolve(__dirname, '../../vercel.json'); - const vercelConfigFile = readFileSync(vercelConfigPath); - const oldConfigContent = JSON.parse(vercelConfigFile); - /** - * Map data as vercel expects it to be - */ - - let vercelRedirects = {}; - - redirects.forEach((redirect) => { - const {fromPath, isPermanent, toPath} = redirect; - - vercelRedirects[fromPath] = { - destination: toPath, - permanent: !!isPermanent, - }; - }); - - /** - * Make sure we dont have the same redirect already - */ - oldConfigContent.redirects.forEach((data) => { - if(vercelRedirects[data.source]){ - delete vercelRedirects[data.source]; - } - }); - - /** - * Serialize the object to array of objects - */ - let newRedirects = []; - Object.keys(vercelRedirects).forEach((value) => - newRedirects.push({ - source: value, - destination: vercelRedirects[value].destination, - permanent: !!vercelRedirects[value].isPermanent, - }) - ); - - /** - * We already have a vercel.json so we spread the new contents along with old ones - */ - const newContents = { - ...oldConfigContent, - redirects: [...oldConfigContent.redirects, ...newRedirects], - }; - writeFile(redirectsFilePath, JSON.stringify(newContents, null, 2)); -} - -// versions.yml structure is [{path: string, url: string, ...}, ...] -writeRedirectsFile( - versions - .filter((version) => version.path && version.url) - .map((version) => ({ - fromPath: version.path, - toPath: version.url, - })), - redirectsFilePath -); diff --git a/beta/scripts/headingIDHelpers/generateHeadingIDs.js b/beta/scripts/headingIDHelpers/generateHeadingIDs.js deleted file mode 100644 index 40925d444..000000000 --- a/beta/scripts/headingIDHelpers/generateHeadingIDs.js +++ /dev/null @@ -1,110 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -// To do: Make this ESM. -// To do: properly check heading numbers (headings with the same text get -// numbered, this script doesn’t check that). - -const assert = require('assert'); -const fs = require('fs'); -const GithubSlugger = require('github-slugger'); -const walk = require('./walk'); - -let modules; - -function stripLinks(line) { - return line.replace(/\[([^\]]+)\]\([^)]+\)/, (match, p1) => p1); -} - -function addHeaderID(line, slugger) { - // check if we're a header at all - if (!line.startsWith('#')) { - return line; - } - - const match = - /^(#+\s+)(.+?)(\s*\{(?:\/\*|#)([^\}\*\/]+)(?:\*\/)?\}\s*)?$/.exec(line); - const before = match[1] + match[2]; - const proc = modules - .unified() - .use(modules.remarkParse) - .use(modules.remarkSlug); - const tree = proc.runSync(proc.parse(before)); - const head = tree.children[0]; - assert( - head && head.type === 'heading', - 'expected `' + - before + - '` to be a heading, is it using a normal space after `#`?' - ); - const autoId = head.data.id; - const existingId = match[4]; - const id = existingId || autoId; - // Ignore numbers: - const cleanExisting = existingId - ? existingId.replace(/-\d+$/, '') - : undefined; - const cleanAuto = autoId.replace(/-\d+$/, ''); - - if (cleanExisting && cleanExisting !== cleanAuto) { - console.log( - 'Note: heading `%s` has a different ID (`%s`) than what GH generates for it: `%s`:', - before, - existingId, - autoId - ); - } - - return match[1] + match[2] + ' {/*' + id + '*/}'; -} - -function addHeaderIDs(lines) { - // Sluggers should be per file - const slugger = new GithubSlugger(); - let inCode = false; - const results = []; - lines.forEach((line) => { - // Ignore code blocks - if (line.startsWith('```')) { - inCode = !inCode; - results.push(line); - return; - } - if (inCode) { - results.push(line); - return; - } - - results.push(addHeaderID(line, slugger)); - }); - return results; -} - -async function main(paths) { - paths = paths.length === 0 ? ['src/content'] : paths; - - const [unifiedMod, remarkParseMod, remarkSlugMod] = await Promise.all([ - import('unified'), - import('remark-parse'), - import('remark-slug'), - ]); - const unified = unifiedMod.unified; - const remarkParse = remarkParseMod.default; - const remarkSlug = remarkSlugMod.default; - modules = {unified, remarkParse, remarkSlug}; - const files = paths.map((path) => [...walk(path)]).flat(); - - files.forEach((file) => { - if (!(file.endsWith('.md') || file.endsWith('.mdx'))) { - return; - } - - const content = fs.readFileSync(file, 'utf8'); - const lines = content.split('\n'); - const updatedLines = addHeaderIDs(lines); - fs.writeFileSync(file, updatedLines.join('\n')); - }); -} - -module.exports = main; diff --git a/beta/scripts/headingIDHelpers/validateHeadingIDs.js b/beta/scripts/headingIDHelpers/validateHeadingIDs.js deleted file mode 100644 index c3cf1ab8c..000000000 --- a/beta/scripts/headingIDHelpers/validateHeadingIDs.js +++ /dev/null @@ -1,66 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - */ -const fs = require('fs'); -const walk = require('./walk'); - -/** - * Validate if there is a custom heading id and exit if there isn't a heading - * @param {string} line - * @returns - */ -function validateHeaderId(line) { - if (!line.startsWith('#')) { - return; - } - - const match = /\{\/\*(.*?)\*\/}/.exec(line); - const id = match; - if (!id) { - console.error('Run yarn fix-headings to generate headings.'); - process.exit(1); - } -} - -/** - * Loops through the lines to skip code blocks - * @param {Array} lines - */ -function validateHeaderIds(lines) { - let inCode = false; - const results = []; - lines.forEach((line) => { - // Ignore code blocks - if (line.startsWith('```')) { - inCode = !inCode; - - results.push(line); - return; - } - if (inCode) { - results.push(line); - return; - } - validateHeaderId(line); - }); -} -/** - * paths are basically array of path for which we have to validate heading IDs - * @param {Array} paths - */ -async function main(paths) { - paths = paths.length === 0 ? ['src/content'] : paths; - const files = paths.map((path) => [...walk(path)]).flat(); - - files.forEach((file) => { - if (!(file.endsWith('.md') || file.endsWith('.mdx'))) { - return; - } - - const content = fs.readFileSync(file, 'utf8'); - const lines = content.split('\n'); - validateHeaderIds(lines); - }); -} - -module.exports = main; diff --git a/beta/scripts/headingIDHelpers/walk.js b/beta/scripts/headingIDHelpers/walk.js deleted file mode 100644 index 721274e09..000000000 --- a/beta/scripts/headingIDHelpers/walk.js +++ /dev/null @@ -1,24 +0,0 @@ -const fs = require('fs'); - -module.exports = function walk(dir) { - let results = []; - /** - * If the param is a directory we can return the file - */ - if(dir.includes('md')){ - return [dir]; - } - const list = fs.readdirSync(dir); - list.forEach(function (file) { - file = dir + '/' + file; - const stat = fs.statSync(file); - if (stat && stat.isDirectory()) { - /* Recurse into a subdirectory */ - results = results.concat(walk(file)); - } else { - /* Is a file */ - results.push(file); - } - }); - return results; -}; diff --git a/beta/scripts/headingIdLinter.js b/beta/scripts/headingIdLinter.js deleted file mode 100644 index 037e4945f..000000000 --- a/beta/scripts/headingIdLinter.js +++ /dev/null @@ -1,16 +0,0 @@ -const validateHeaderIds = require('./headingIDHelpers/validateHeadingIDs'); -const generateHeadingIds = require('./headingIDHelpers/generateHeadingIDs'); - -/** - * yarn lint-heading-ids --> Checks all files and causes an error if heading ID is missing - * yarn lint-heading-ids --fix --> Fixes all markdown file's heading IDs - * yarn lint-heading-ids path/to/markdown.md --> Checks that particular file for missing heading ID (path can denote a directory or particular file) - * yarn lint-heading-ids --fix path/to/markdown.md --> Fixes that particular file's markdown IDs (path can denote a directory or particular file) -*/ - -const markdownPaths = process.argv.slice(2); -if (markdownPaths.includes('--fix')) { - generateHeadingIds(markdownPaths.filter((path) => path !== '--fix')); -} else { - validateHeaderIds(markdownPaths); -} diff --git a/beta/scripts/migrations/migrateBlogPosts.js b/beta/scripts/migrations/migrateBlogPosts.js deleted file mode 100644 index 8b93c23ab..000000000 --- a/beta/scripts/migrations/migrateBlogPosts.js +++ /dev/null @@ -1,50 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); -const fm = require('gray-matter'); -const globby = require('globby'); -const parse = require('date-fns/parse'); - -/** - * This script takes the gatsby blog posts directory and migrates it. - * - * In gatsby, blog posts were put in markdown files title YYYY-MM-DD-post-title.md. - * This script looks at that directory and then moves posts into folders paths - * that match the end URL structure of /blog/YYYY/MM/DD/postitle.md - * - * This allows us to use MDX in blog posts. - */ - -// I dropped them into src/pages/oldblog -// @todo remove after migration -// I am not proud of this. Also, the blog posts needed to be cleaned up for MDX, don't run this again. -Promise.resolve() - .then(async () => { - const blogManifest = {}; - const blogPosts = await globby('src/pages/oldblog/*.md'); - // console.log(blogPosts); - for (let postpath of blogPosts.sort()) { - const rawStr = await fs.readFile(postpath, 'utf8'); - // console.log(rawStr); - const {data, content} = fm(rawStr); - const cleanPath = postpath.replace('src/pages/oldblog/', ''); - const yrStr = parseInt(cleanPath.substr(0, 4), 10); // 2013-06-02 - // console.log(yrStr); - const dateStr = cleanPath.substr(0, 10); // 2013-06-02 - const postFileName = cleanPath.substr(11); - // console.log(postFileName, dateStr); - const datePath = dateStr.split('-').join('/'); - // console.log(datePath); - const newPath = './src/pages/blog/' + datePath + '/' + postFileName; - // console.log(newPath); - await fs.ensureFile(path.resolve(newPath)); - await fs.writeFile( - path.resolve(newPath), - rawStr - .replace('
', '
') - .replace('
', '
') - .replace('layout: post', '') - .replace('\nauthor', '\nlayout: Post\nauthor') - ); - } - }) - .catch(console.error); diff --git a/beta/scripts/migrations/migratePermalinks.js b/beta/scripts/migrations/migratePermalinks.js deleted file mode 100644 index ad0303d4a..000000000 --- a/beta/scripts/migrations/migratePermalinks.js +++ /dev/null @@ -1,35 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); -const fm = require('gray-matter'); -const globby = require('globby'); - -/** - * This script ensures that every file in the docs folder is named corresponding - * to its respective frontmatter permalink. In the old site, the path of the page was set by - * the `permalink` in markdown frontmatter, and not the name of the file itself or it's id. - * In the new Next.js site, with its filesystem router, the name of the file must - * match exactly to its `permalink`. - */ -Promise.resolve() - .then(async () => { - const pages = await globby('src/pages/docs/**/*.{md,mdx}'); - for (let sourcePath of pages.sort()) { - const rawStr = await fs.readFile(sourcePath, 'utf8'); - const {data, content} = fm(rawStr); - const currentPath = sourcePath - .replace('src/pages/', '') - .replace('.md', ''); - const permalink = data.permalink.replace('.html', ''); - if (permalink !== currentPath) { - const destPath = 'src/pages/' + permalink + '.md'; - try { - await fs.move(sourcePath, destPath); - console.log(`MOVED: ${sourcePath} --> ${destPath}`); - } catch (error) { - console.error(`ERROR: ${sourcePath} --> ${destPath}`); - console.error(error); - } - } - } - }) - .catch(console.error); diff --git a/beta/scripts/migrations/migrateRedirects.js b/beta/scripts/migrations/migrateRedirects.js deleted file mode 100644 index 5e0a6ed0e..000000000 --- a/beta/scripts/migrations/migrateRedirects.js +++ /dev/null @@ -1,117 +0,0 @@ -const fs = require('fs-extra'); -const path = require('path'); -const fm = require('gray-matter'); -const globby = require('globby'); - -/** - * This script takes a look at all the redirect frontmatter and converts it - * into a Next.js compatible redirects list. It also merges it with netlify's - * _redirects, which we moved by hand below. - * - * @remarks - * In the old gatsby site, redirects were specified in docs and blog post - * frontmatter that looks like: - * - * --- - * redirect_from: - * - /docs/old-path.html#maybe-an-anchor - * --- - */ - -const netlifyRedirects = [ - { - source: '/html-jsx.html', - destination: 'https://magic.reactjs.net/htmltojsx.htm', - permanent: true, - }, - { - source: '/tips/controlled-input-null-value.html', - destination: '/docs/forms.html#controlled-input-null-value', - permanent: false, // @todo why were these not permanent on netlify? - }, - { - source: '/concurrent', - destination: '/docs/concurrent-mode-intro.html', - permanent: false, - }, - { - source: '/hooks', - destination: '/docs/hooks-intro.html', - permanent: false, - }, - { - source: '/tutorial', - destination: '/tutorial/tutorial.html', - permanent: false, - }, - { - source: '/your-story', - destination: 'https://www.surveymonkey.co.uk/r/MVQV2R9', - permanent: true, - }, - { - source: '/stories', - destination: 'https://medium.com/react-community-stories', - permanent: true, - }, -]; - -Promise.resolve() - .then(async () => { - let contentRedirects = []; - let redirectPageCount = 0; - - // Get all markdown pages - const pages = await globby('src/pages/**/*.{md,mdx}'); - for (let filepath of pages) { - // Read file as string - const rawStr = await fs.readFile(filepath, 'utf8'); - // Extract frontmatter - const {data, content} = fm(rawStr); - // Look for redirect yaml - if (data.redirect_from) { - redirectPageCount++; - - let destinationPath = filepath - .replace('src/pages', '') - .replace('.md', ''); - - // Fix /docs/index -> /docs - if (destinationPath === '/docs/index') { - destinationPath = '/docs'; - } - - if (destinationPath === '/index') { - destinationPath = '/'; - } - - for (let sourcePath of data.redirect_from) { - contentRedirects.push({ - source: '/' + sourcePath, // add slash - destination: destinationPath, - permanent: true, - }); - } - } - } - console.log( - `Found ${redirectPageCount} pages with \`redirect_from\` frontmatter` - ); - console.log( - `Writing ${contentRedirects.length} redirects to redirects.json` - ); - - await fs.writeFile( - path.resolve('./src/redirects.json'), - JSON.stringify( - { - redirects: [...contentRedirects, ...netlifyRedirects], - }, - null, - 2 - ) - ); - - console.log('✅ Done writing redirects'); - }) - .catch(console.error); diff --git a/beta/src/authors.json b/beta/src/authors.json deleted file mode 100644 index 76cd5aedd..000000000 --- a/beta/src/authors.json +++ /dev/null @@ -1,130 +0,0 @@ -{ - "acdlite": { - "name": "Andrew Clark", - "url": "https://twitter.com/acdlite" - }, - "benigeri": { - "name": "Paul Benigeri", - "url": "https://github.com/benigeri" - }, - "bvaughn": { - "name": "Brian Vaughn", - "url": "https://github.com/bvaughn" - }, - "chenglou": { - "name": "Cheng Lou", - "url": "https://twitter.com/_chenglou" - }, - "clemmy": { - "name": "Clement Hoang", - "url": "https://twitter.com/c8hoang" - }, - "Daniel15": { - "name": "Daniel Lo Nigro", - "url": "https://d.sb/" - }, - "fisherwebdev": { - "name": "Bill Fisher", - "url": "https://twitter.com/fisherwebdev" - }, - "flarnie": { - "name": "Flarnie Marchan", - "url": "https://twitter.com/ProbablyFlarnie" - }, - "gaearon": { - "name": "Dan Abramov", - "url": "https://twitter.com/dan_abramov" - }, - "jaredly": { - "name": "Jared Forsyth", - "url": "https://twitter.com/jaredforsyth" - }, - "jgebhardt": { - "name": "Jonas Gebhardt", - "url": "https://twitter.com/jonasgebhardt" - }, - "jimfb": { - "name": "Jim Sproch", - "url": "http: //www.jimsproch.com" - }, - "jingc": { - "name": "Jing Chen", - "url": "https://twitter.com/jingc" - }, - "josephsavona": { - "name": "Joseph Savona", - "url": "https://twitter.com/en_JS" - }, - "keyanzhang": { - "name": "Keyan Zhang", - "url": "https://twitter.com/keyanzhang" - }, - "kmeht": { - "name": "Kunal Mehta", - "url": "https://github.com/kmeht" - }, - "LoukaN": { - "name": "Lou Husson", - "url": "https://twitter.com/loukan42" - }, - "matthewjohnston4": { - "name": "Matthew Johnston", - "url": "https://github.com/matthewathome" - }, - "nhunzaker": { - "name": "Nathan Hunzaker", - "url": "https://github.com/nhunzaker" - }, - "petehunt": { - "name": "Pete Hunt", - "url": "https://twitter.com/floydophone" - }, - "rachelnabors": { - "name": "Rachel Nabors", - "url": "https://twitter.com/rachelnabors" - }, - "schrockn": { - "name": "Nick Schrock", - "url": "https://twitter.com/schrockn" - }, - "sebmarkbage": { - "name": "Sebastian Markbåge", - "url": "https://twitter.com/sebmarkbage" - }, - "sophiebits": { - "name": "Sophie Alpert", - "url": "https://sophiebits.com/" - }, - "steveluscher": { - "name": "Steven Luscher", - "url": "https://twitter.com/steveluscher" - }, - "tesseralis": { - "name": "Nat Alison", - "url": "https://twitter.com/tesseralis" - }, - "threepointone": { - "name": "Sunil Pai", - "url": "https://twitter.com/threepointone" - }, - "timer": { - "name": "Joe Haddad", - "url": "https://twitter.com/timer150" - }, - "vjeux": { - "name": "Vjeux", - "url": "https://twitter.com/vjeux" - }, - "wincent": { - "name": "Greg Hurrell", - "url": "https://twitter.com/wincent" - }, - "zpao": { - "name": "Paul O’Shannessy", - "url": "https://twitter.com/zpao" - }, - "tomocchino": { - "name": "Tom Occhino", - "url": "https://twitter.com/tomocchino" - } -} diff --git a/beta/src/blogIndex.json b/beta/src/blogIndex.json deleted file mode 100644 index 088a1f82c..000000000 --- a/beta/src/blogIndex.json +++ /dev/null @@ -1,1400 +0,0 @@ -{ - "routes": [ - { - "path": "/blog/2020/08/10/react-v17-rc.md", - "date": "2020-08-10", - "title": "React v17.0 Release Candidate: No New Features", - "author": [ - "gaearon", - "rachelnabors" - ], - "excerpt": "

Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since the previous major release of React, which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release.

\n", - "readingTime": "20 min read" - }, - { - "path": "/blog/2020/02/26/react-v16.13.0.md", - "date": "2020-02-26", - "title": "React v16.13.0", - "author": [ - "threepointone" - ], - "excerpt": "

Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.md", - "date": "2019-11-06", - "title": "Building Great User Experiences with Concurrent Mode and Suspense", - "author": [ - "josephsavona" - ], - "excerpt": "

At React Conf 2019 we announced an experimental release of React that supports Concurrent Mode and Suspense. In this post we’ll introduce best practices for using them that we’ve identified through the process of building the new facebook.com.

\n", - "readingTime": "17 min read" - }, - { - "path": "/blog/2019/10/22/react-release-channels.md", - "date": "2019-10-22", - "title": "Preparing for the Future with React Prereleases", - "author": [ - "acdlite" - ], - "excerpt": "

To share upcoming changes with our partners in the React ecosystem, we’re establishing official prerelease channels. We hope this process will help us make changes to React with confidence, and give developers the opportunity to try out experimental features.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/08/15/new-react-devtools.md", - "date": "2019-08-15", - "title": "Introducing the New React DevTools", - "author": [ - "bvaughn" - ], - "excerpt": "

We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2019/08/08/react-v16.9.0.md", - "date": "2019-08-08", - "title": "React v16.9.0 and the Roadmap Update", - "author": [ - "gaearon", - "bvaughn" - ], - "excerpt": "

Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2019/02/23/is-react-translated-yet.md", - "date": "2019-02-23", - "title": "Is React Translated Yet? ¡Sí! Sim! はい！", - "author": [ - "tesseralis" - ], - "excerpt": "

We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into over 30 languages! You can find them on the new Languages page.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/02/06/react-v16.8.0.md", - "date": "2019-02-06", - "title": "React v16.8: The One With Hooks", - "author": [ - "gaearon" - ], - "excerpt": "

With React 16.8, React Hooks are available in a stable release!

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2018/12/19/react-v-16-7.md", - "date": "2018-12-19", - "title": "React v16.7: No, This Is Not the One With Hooks", - "author": [ - "acdlite" - ], - "excerpt": "

Our latest release includes an important performance bugfix for React.lazy. Although there are no API changes, we’re releasing it as a minor instead of a patch.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2018/11/27/react-16-roadmap.md", - "date": "2018-11-27", - "title": "React 16.x Roadmap", - "author": [ - "gaearon" - ], - "excerpt": "

You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.

\n", - "readingTime": "14 min read" - }, - { - "path": "/blog/2018/11/13/react-conf-recap.md", - "date": "2018-11-13", - "title": "React Conf recap: Hooks, Suspense, and Concurrent Rendering", - "author": [ - "tomocchino" - ], - "excerpt": "

This year’s React Conf took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2018/10/23/react-v-16-6.md", - "date": "2018-10-23", - "title": "React v16.6.0: lazy, memo and contextType", - "author": [ - "sebmarkbage" - ], - "excerpt": "

Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2018/10/01/create-react-app-v2.md", - "date": "2018-10-01", - "title": "Create React App 2.0: Babel 7, Sass, and More", - "author": [ - "timer", - "gaearon" - ], - "excerpt": "

Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2018/09/10/introducing-the-react-profiler.md", - "date": "2018-09-10", - "title": "Introducing the React Profiler", - "author": [ - "bvaughn" - ], - "excerpt": "

React 16.5 adds support for a new DevTools profiler plugin.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2018/08/01/react-v-16-4-2.md", - "date": "2018-08-01", - "title": "React v16.4.2: Server-side vulnerability fix", - "author": [ - "gaearon" - ], - "excerpt": "

We discovered a minor vulnerability that might affect some apps using ReactDOMServer. We are releasing a patch version for every affected React minor release so that you can upgrade with no friction. Read on for more details.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2018/06/07/you-probably-dont-need-derived-state.md", - "date": "2018-06-07", - "title": "You Probably Don't Need Derived State", - "author": [ - "bvaughn" - ], - "excerpt": "

React 16.4 included a bugfix for getDerivedStateFromProps which caused some existing bugs in React components to reproduce more consistently. If this release exposed a case where your application was using an anti-pattern and didn’t work properly after the fix, we’re sorry for the churn. In this post, we will explain some common anti-patterns with derived state and our preferred alternatives.

\n", - "readingTime": "14 min read" - }, - { - "path": "/blog/2018/05/23/react-v-16-4.md", - "date": "2018-05-23", - "title": "React v16.4.0: Pointer Events", - "author": [ - "acdlite" - ], - "excerpt": "

The latest minor release adds support for an oft-requested feature: pointer events!

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2018/03/29/react-v-16-3.md", - "date": "2018-03-29", - "title": "React v16.3.0: New lifecycles and context API", - "author": [ - "bvaughn" - ], - "excerpt": "

A few days ago, we wrote a post about upcoming changes to our legacy lifecycle methods, including gradual migration strategies. In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2018/03/27/update-on-async-rendering.md", - "date": "2018-03-27", - "title": "Update on Async Rendering", - "author": [ - "bvaughn" - ], - "excerpt": "

For over a year, the React team has been working to implement asynchronous rendering. Last month during his talk at JSConf Iceland, Dan unveiled some of the exciting new possibilities async rendering unlocks. Now we’d like to share with you some of the lessons we’ve learned while working on these features, and some recipes to help prepare your components for async rendering when it launches.

\n", - "readingTime": "12 min read" - }, - { - "path": "/blog/2018/03/01/sneak-peek-beyond-react-16.md", - "date": "2018-03-01", - "title": "Sneak Peek: Beyond React 16", - "author": [ - "sophiebits" - ], - "excerpt": "

Dan Abramov from our team just spoke at JSConf Iceland 2018 with a preview of some new features we’ve been working on in React. The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2017/12/15/improving-the-repository-infrastructure.md", - "date": "2017-12-15", - "title": "Behind the Scenes: Improving the Repository Infrastructure", - "author": [ - "gaearon", - "bvaughn" - ], - "excerpt": "

As we worked on React 16, we revamped the folder structure and much of the build tooling in the React repository. Among other things, we introduced projects such as Rollup, Prettier, and Google Closure Compiler into our workflow. People often ask us questions about how we use those tools. In this post, we would like to share some of the changes that we’ve made to our build and test infrastructure in 2017, and what motivated them.

\n", - "readingTime": "30 min read" - }, - { - "path": "/blog/2017/12/07/introducing-the-react-rfc-process.md", - "date": "2017-12-07", - "title": "Introducing the React RFC Process", - "author": [ - "acdlite" - ], - "excerpt": "

We’re adopting an RFC (“request for comments”) process for contributing ideas to React.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2017/11/28/react-v16.2.0-fragment-support.md", - "date": "2017-11-28", - "title": "React v16.2.0: Improved Support for Fragments", - "author": [ - "clemmy" - ], - "excerpt": "

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments:

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2017/09/26/react-v16.0.md", - "date": "2017-09-26", - "title": "React v16.0", - "author": [ - "acdlite" - ], - "excerpt": "

We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2017/09/25/react-v15.6.2.md", - "date": "2017-09-25", - "title": "React v15.6.2", - "author": [ - "nhunzaker" - ], - "excerpt": "

Today we’re sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we’ve also included a few more fixes to improve the stability of React across all browsers.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2017/09/08/dom-attributes-in-react-16.md", - "date": "2017-09-08", - "title": "DOM Attributes in React 16", - "author": [ - "gaearon" - ], - "excerpt": "

In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn’t recognize, React would just skip it. For example, this:

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2017/07/26/error-handling-in-react-16.md", - "date": "2017-07-26", - "title": "Error Handling in React 16", - "author": [ - "gaearon" - ], - "excerpt": "

As React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components. These changes are included in React 16 beta versions, and will be a part of React 16.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2017/06/13/react-v15.6.0.md", - "date": "2017-06-13", - "title": "React v15.6.0", - "author": [ - "flarnie" - ], - "excerpt": "

Today we are releasing React 15.6.0. As we prepare for React 16.0, we have been fixing and cleaning up many things. This release continues to pave the way.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2017/05/18/whats-new-in-create-react-app.md", - "date": "2017-05-18", - "title": "What's New in Create React App", - "author": [ - "gaearon" - ], - "excerpt": "

Less than a year ago, we introduced Create React App as an officially supported way to create apps with zero configuration. The project has since enjoyed tremendous growth, with over 950 commits by more than 250 contributors.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2017/04/07/react-v15.5.0.md", - "date": "2017-04-07", - "title": "React v15.5.0", - "author": [ - "acdlite" - ], - "excerpt": "

It’s been exactly one year since the last breaking change to React. Our next major release, React 16, will include some exciting improvements, including a complete rewrite of React’s internals. We take stability seriously, and are committed to bringing those improvements to all of our users with minimal effort.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2016/11/16/react-v15.4.0.md", - "date": "2016-11-16", - "title": "React v15.4.0", - "author": [ - "gaearon" - ], - "excerpt": "

Today we are releasing React 15.4.0.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2016/09/28/our-first-50000-stars.md", - "date": "2016-09-28", - "title": "Our First 50,000 Stars", - "author": [ - "vjeux" - ], - "excerpt": "

Just three and a half years ago we open sourced a little JavaScript library called React. The journey since that day has been incredibly exciting.

\n", - "readingTime": "10 min read" - }, - { - "path": "/blog/2016/08/05/relay-state-of-the-state.md", - "date": "2016-08-05", - "title": "Relay: State of the State", - "author": [ - "josephsavona" - ], - "excerpt": "

This month marks a year since we released Relay and we’d like to share an update on the project and what’s next.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2016/07/22/create-apps-with-no-configuration.md", - "date": "2016-07-22", - "title": "Create Apps with No Configuration", - "author": [ - "gaearon" - ], - "excerpt": "

Create React App is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2016/07/13/mixins-considered-harmful.md", - "date": "2016-07-13", - "title": "Mixins Considered Harmful", - "author": [ - "gaearon" - ], - "excerpt": "

“How do I share the code between several components?” is one of the first questions that people ask when they learn React. Our answer has always been to use component composition for code reuse. You can define a component and use it in several other components.

\n", - "readingTime": "20 min read" - }, - { - "path": "/blog/2016/07/11/introducing-reacts-error-code-system.md", - "date": "2016-07-11", - "title": "Introducing React's Error Code System", - "author": [ - "keyanzhang" - ], - "excerpt": "

Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2016/04/08/react-v15.0.1.md", - "date": "2016-04-08", - "title": "React v15.0.1", - "author": [ - "zpao" - ], - "excerpt": "

Yesterday afternoon we shipped v15.0.0 and quickly got some feedback about a couple of issues. We apologize for these problems and we’ve been working since then to make sure we get fixes into your hands as quickly as possible.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2016/04/07/react-v15.md", - "date": "2016-04-07", - "title": "React v15.0", - "author": [ - "gaearon" - ], - "excerpt": "

We would like to thank the React community for reporting issues and regressions in the release candidates on our issue tracker. Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15.

\n", - "readingTime": "15 min read" - }, - { - "path": "/blog/2016/03/29/react-v0.14.8.md", - "date": "2016-03-29", - "title": "React v0.14.8", - "author": [ - "gaearon" - ], - "excerpt": "

We have already released two release candidates for React 15, and the final version is coming soon.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2016/03/16/react-v15-rc2.md", - "date": "2016-03-16", - "title": "React v15.0 Release Candidate 2", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing a second release candidate for version 15. Primarily this is to address 2 issues, but we also picked up a few small changes from new contributors, including some improvements to some of our new warnings.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2016/03/07/react-v15-rc1.md", - "date": "2016-03-07", - "title": "React v15.0 Release Candidate", - "author": [ - "zpao" - ], - "excerpt": "

Sorry for the small delay in releasing this. As we said, we’ve been busy binge-watching House of Cards. That scene in the last episode where Francis and Claire Underwood ████████████████████████████████████. WOW!

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2016/02/19/new-versioning-scheme.md", - "date": "2016-02-19", - "title": "New Versioning Scheme", - "author": [ - "sebmarkbage" - ], - "excerpt": "

Today we’re announcing that we’re switching to major revisions for React. The current version is 0.14.7. The next release will be: 15.0.0

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2016/01/12/discontinuing-ie8-support.md", - "date": "2016-01-12", - "title": "Discontinuing IE 8 Support in React DOM", - "author": [ - "sophiebits" - ], - "excerpt": "

Since its 2013 release, React has supported all popular browsers, including Internet Explorer 8 and above. We handle normalizing many quirks present in old browser versions, including event system differences, so that your app code doesn’t have to worry about most browser bugs.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.md", - "date": "2016-01-08", - "title": "(A => B) !=> (B => A)", - "author": [ - "jimfb" - ], - "excerpt": "

The documentation for componentWillReceiveProps states that componentWillReceiveProps will be invoked when the props change as the result of a rerender. Some people assume this means “if componentWillReceiveProps is called, then the props must have changed”, but that conclusion is logically incorrect.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/12/29/react-v0.14.4.md", - "date": "2015-12-29", - "title": "React v0.14.4", - "author": [ - "sophiebits" - ], - "excerpt": "

Happy December! We have a minor point release today. It has just a few small bug fixes.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2015/12/18/react-components-elements-and-instances.md", - "date": "2015-12-18", - "title": "React Components, Elements, and Instances", - "author": [ - "gaearon" - ], - "excerpt": "

The difference between components, their instances, and elements confuses many React beginners. Why are there three different terms to refer to something that is painted on screen?

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2015/12/16/ismounted-antipattern.md", - "date": "2015-12-16", - "title": "isMounted is an Antipattern", - "author": [ - "jimfb" - ], - "excerpt": "

As we move closer to officially deprecating isMounted, it’s worth understanding why the function is an antipattern, and how to write code without the isMounted function.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.md", - "date": "2015-12-04", - "title": "React.js Conf 2016 Diversity Scholarship", - "author": [ - "zpao" - ], - "excerpt": "

I am thrilled to announced that we will be organizing another diversity scholarship program for the upcoming React.js Conf! The tech industry is suffering from a lack of diversity, but it’s important to us that we have a thriving community that is made up of people with a variety of experiences and viewpoints.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/11/18/react-v0.14.3.md", - "date": "2015-11-18", - "title": "React v0.14.3", - "author": [ - "zpao" - ], - "excerpt": "

It’s time for another installment of React patch releases! We didn’t break anything in v0.14.2 but we do have a couple of other bugs we’re fixing. The biggest change in this release is actually an addition of a new built file. We heard from a number of people that they still need the ability to use React to render to a string on the client. While the use cases are not common and there are other ways to achieve this, we decided that it’s still valuable to support. So we’re now building react-dom-server.js, which will be shipped to Bower and in the dist/ directory of the react-dom package on npm. This file works the same way as react-dom.js and therefore requires that the primary React build has already been included on the page.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/11/02/react-v0.14.2.md", - "date": "2015-11-02", - "title": "React v0.14.2", - "author": [ - "zpao" - ], - "excerpt": "

We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the react-dom package, we moved react from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using react as a peer dependency.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/10/28/react-v0.14.1.md", - "date": "2015-10-28", - "title": "React v0.14.1", - "author": [ - "zpao" - ], - "excerpt": "

After a couple weeks of having more people use v0.14, we’re ready to ship a patch release addressing a few issues. Thanks to everybody who has reported issues and written patches!

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/10/19/reactiflux-is-moving-to-discord.md", - "date": "2015-10-19", - "title": "Reactiflux is moving to Discord", - "author": [ - "benigeri" - ], - "excerpt": "

TL;DR: Slack decided that Reactiflux had too many members and disabled new invites. Reactiflux is moving to Discord. Join us: http://join.reactiflux.com

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2015/10/07/react-v0.14.md", - "date": "2015-10-07", - "title": "React v0.14", - "author": [ - "sophiebits" - ], - "excerpt": "

We’re happy to announce the release of React 0.14 today! This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native.

\n", - "readingTime": "12 min read" - }, - { - "path": "/blog/2015/10/01/react-render-and-top-level-api.md", - "date": "2015-10-01", - "title": "ReactDOM.render and the Top Level React API", - "author": [ - "jimfb", - "sebmarkbage" - ], - "excerpt": "

When you’re in React’s world you are just building components that fit into other components. Everything is a component. Unfortunately not everything around you is built using React. At the root of your tree you still have to write some plumbing code to connect the outer world into React.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/09/14/community-roundup-27.md", - "date": "2015-09-14", - "title": "Community Round-up #27 – Relay Edition", - "author": [ - "steveluscher" - ], - "excerpt": "

In the weeks following the open-source release of the Relay technical preview, the community has been abuzz with activity. We are honored to have been able to enjoy a steady stream of ideas and contributions from such a talented group of individuals. Let’s take a look at some of the things we’ve achieved, together!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/09/10/react-v0.14-rc1.md", - "date": "2015-09-10", - "title": "React v0.14 Release Candidate", - "author": [ - "sophiebits" - ], - "excerpt": "

We’re happy to announce our first release candidate for React 0.14! We gave you a sneak peek in July at the upcoming changes but we’ve now stabilized the release more and we’d love for you to try it out before we release the final version.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2015/09/02/new-react-developer-tools.md", - "date": "2015-09-02", - "title": "New React Developer Tools", - "author": [ - "sophiebits" - ], - "excerpt": "

A month ago, we posted a beta of the new React developer tools. Today, we’re releasing the first stable version of the new devtools. We’re calling it version 0.14, but it’s a full rewrite so we think of it more like a 2.0 release.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/08/13/reacteurope-roundup.md", - "date": "2015-08-13", - "title": "ReactEurope Round-up", - "author": [ - "matthewjohnston4" - ], - "excerpt": "

Last month, the first React.js European conference took place in the city of Paris, at ReactEurope. Attendees were treated to a range of talks covering React, React Native, Flux, Relay, and GraphQL. Big thanks to everyone involved with organizing the conference, to all the attendees, and everyone who gave their time to speak - it wouldn’t have been possible without the help and support of the React community.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2015/08/11/relay-technical-preview.md", - "date": "2015-08-11", - "title": "Relay Technical Preview", - "author": [ - "josephsavona" - ], - "excerpt": "

Relay

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/08/03/new-react-devtools-beta.md", - "date": "2015-08-03", - "title": "New React Devtools Beta", - "author": [ - "jaredly" - ], - "excerpt": "

We’ve made an entirely new version of the devtools, and we want you to try it

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/07/03/react-v0.14-beta-1.md", - "date": "2015-07-03", - "title": "React v0.14 Beta 1", - "author": [ - "sophiebits" - ], - "excerpt": "

This week, many people in the React community are at ReactEurope in the beautiful (and very warm) city of Paris, the second React conference that’s been held to date. At our last conference, we released the first beta of React 0.13, and we figured we’d do the same today with our first beta of React 0.14, giving you something to play with if you’re not at the conference or you’re looking for something to do on the way home.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2015/06/12/deprecating-jstransform-and-react-tools.md", - "date": "2015-06-12", - "title": "Deprecating JSTransform and react-tools", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re announcing the deprecation of react-tools and JSTransform.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/05/22/react-native-release-process.md", - "date": "2015-05-22", - "title": "React Native Release Process", - "author": [ - "vjeux" - ], - "excerpt": "

The React Native release process have been a bit chaotic since we open sourced. It was unclear when new code was released, there was no changelog, we bumped the minor and patch version inconsistently and we often had to submit updates right after a release to fix a bad bug. In order to move fast with stable infra, we are introducing a real release process with a two-week release schedule.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/05/08/react-v0.13.3.md", - "date": "2015-05-08", - "title": "React v0.13.3", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re sharing another patch release in the v0.13 branch. There are only a few small changes, with a couple to address some issues that arose around that undocumented feature so many of you are already using: context. We also improved developer ergonomics just a little bit, making some warnings better.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2015/05/01/graphql-introduction.md", - "date": "2015-05-01", - "title": "GraphQL Introduction", - "author": [ - "schrockn" - ], - "excerpt": "

At the React.js conference in late January 2015, we revealed our next major technology in the React family: Relay.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2015/04/18/react-v0.13.2.md", - "date": "2015-04-18", - "title": "React v0.13.2", - "author": [ - "zpao" - ], - "excerpt": "

Yesterday the React Native team shipped v0.4. Those of us working on the web team just a few feet away couldn’t just be shown up like that so we’re shipping v0.13.2 today as well! This is a bug fix release to address a few things while we continue to work towards v0.14.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/04/17/react-native-v0.4.md", - "date": "2015-04-17", - "title": "React Native v0.4", - "author": [ - "vjeux" - ], - "excerpt": "

It’s been three weeks since we open sourced React Native and there’s been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus 35 plugins and 1 app in the app store! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/03/30/community-roundup-26.md", - "date": "2015-03-30", - "title": "Community Round-up #26", - "author": [ - "vjeux" - ], - "excerpt": "

We open sourced React Native last week and the community reception blew away all our expectations! So many of you tried it, made cool stuff with it, raised many issues and even submitted pull requests to fix them! The entire team wants to say thank you!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/03/26/introducing-react-native.md", - "date": "2015-03-26", - "title": "Introducing React Native", - "author": [ - "sophiebits" - ], - "excerpt": "

In January at React.js Conf, we announced React Native, a new framework for building native apps using React. We’re happy to announce that we’re open-sourcing React Native and you can start building your apps with it today.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/03/19/building-the-facebook-news-feed-with-relay.md", - "date": "2015-03-19", - "title": "Building The Facebook News Feed With Relay", - "author": [ - "josephsavona" - ], - "excerpt": "

At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we’ll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven’t already we recommend reading our introductory blog post or watching the conference talk.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2015/03/16/react-v0.13.1.md", - "date": "2015-03-16", - "title": "React v0.13.1", - "author": [ - "zpao" - ], - "excerpt": "

It’s been less than a week since we shipped v0.13.0 but it’s time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2015/03/10/react-v0.13.md", - "date": "2015-03-10", - "title": "React v0.13", - "author": [ - "sophiebits" - ], - "excerpt": "

Today, we’re happy to release React v0.13!

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2015/03/04/community-roundup-25.md", - "date": "2015-03-04", - "title": "Community Round-up #25", - "author": [ - "matthewjohnston4" - ], - "excerpt": "

React 101

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/03/03/react-v0.13-rc2.md", - "date": "2015-03-03", - "title": "React v0.13 RC2", - "author": [ - "sebmarkbage" - ], - "excerpt": "

Thanks to everybody who has already been testing the release candidate. We’ve received some good feedback and as a result we’re going to do a second release candidate. The changes are minimal. We haven’t changed the behavior of any APIs we exposed in the previous release candidate. Here’s a summary of the changes:

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2015/02/24/streamlining-react-elements.md", - "date": "2015-02-24", - "title": "Streamlining React Elements", - "author": [ - "sebmarkbage" - ], - "excerpt": "

React v0.13 is right around the corner and so we wanted to discuss some upcoming changes to ReactElement. In particular, we added several warnings to some esoteric use cases of ReactElement. There are no runtime behavior changes for ReactElement - we’re adding these warnings in the hope that we can change some behavior in v0.14 if the changes are valuable to the community.

\n", - "readingTime": "10 min read" - }, - { - "path": "/blog/2015/02/24/react-v0.13-rc1.md", - "date": "2015-02-24", - "title": "React v0.13 RC", - "author": [ - "zpao" - ], - "excerpt": "

Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2015/02/20/introducing-relay-and-graphql.md", - "date": "2015-02-20", - "title": "Introducing Relay and GraphQL", - "author": [ - "wincent" - ], - "excerpt": "

Data fetching for React applications

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2015/02/18/react-conf-roundup-2015.md", - "date": "2015-02-18", - "title": "React.js Conf Round-up 2015", - "author": [ - "steveluscher" - ], - "excerpt": "

It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be able to unveil three new technologies that we’ve been using internally at Facebook for some time: GraphQL, Relay, and React Native.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2015/01/27/react-v0.13.0-beta-1.md", - "date": "2015-01-27", - "title": "React v0.13.0 Beta 1", - "author": [ - "sebmarkbage" - ], - "excerpt": "

React 0.13 has a lot of nice features but there is one particular feature that I’m really excited about. I couldn’t wait for React.js Conf to start tomorrow morning.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/12/19/react-js-conf-diversity-scholarship.md", - "date": "2014-12-19", - "title": "React.js Conf Diversity Scholarship", - "author": [ - "zpao" - ], - "excerpt": "

Today I’m really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/12/18/react-v0.12.2.md", - "date": "2014-12-18", - "title": "React v0.12.2", - "author": [ - "zpao" - ], - "excerpt": "

We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/11/25/community-roundup-24.md", - "date": "2014-11-25", - "title": "Community Round-up #24", - "author": [ - "steveluscher" - ], - "excerpt": "

Keep it Simple

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/11/24/react-js-conf-updates.md", - "date": "2014-11-24", - "title": "React.js Conf Updates", - "author": [ - "vjeux" - ], - "excerpt": "

Yesterday was the React.js Conf call for presenters submission deadline. We were

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/10/28/react-v0.12.md", - "date": "2014-10-28", - "title": "React v0.12", - "author": [ - "zpao" - ], - "excerpt": "

We’re happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2014/10/27/react-js-conf.md", - "date": "2014-10-27", - "title": "React.js Conf", - "author": [ - "vjeux" - ], - "excerpt": "

Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been “some day”. In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2014/10/17/community-roundup-23.md", - "date": "2014-10-17", - "title": "Community Round-up #23", - "author": [ - "LoukaN" - ], - "excerpt": "

This round-up is a special edition on Flux. If you expect to see diagrams showing arrows that all point in the same direction, you won’t be disappointed!

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2014/10/16/react-v0.12-rc1.md", - "date": "2014-10-16", - "title": "React v0.12 RC", - "author": [ - "sebmarkbage" - ], - "excerpt": "

We are finally ready to share the work we’ve been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we’re shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we’ve highlighted the interesting and breaking changes below.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2014/10/14/introducing-react-elements.md", - "date": "2014-10-14", - "title": "Introducing React Elements", - "author": [ - "sebmarkbage" - ], - "excerpt": "

The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the ReactElement type really FAST, jest unit testing easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2014/09/24/testing-flux-applications.md", - "date": "2014-09-24", - "title": "Testing Flux Applications", - "author": [ - "fisherwebdev" - ], - "excerpt": "

A more up-to-date version of this post is available as part of the Flux documentation.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2014/09/16/react-v0.11.2.md", - "date": "2014-09-16", - "title": "React v0.11.2", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing React v0.11.2 to add a few small features.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/09/12/community-round-up-22.md", - "date": "2014-09-12", - "title": "Community Round-up #22", - "author": [ - "LoukaN" - ], - "excerpt": "

This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/09/03/introducing-the-jsx-specification.md", - "date": "2014-09-03", - "title": "Introducing the JSX Specification", - "author": [ - "sebmarkbage" - ], - "excerpt": "

At Facebook we’ve been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We’ve also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2014/08/03/community-roundup-21.md", - "date": "2014-08-03", - "title": "Community Round-up #21", - "author": [ - "LoukaN" - ], - "excerpt": "

React Router

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/07/30/flux-actions-and-the-dispatcher.md", - "date": "2014-07-30", - "title": "Flux: Actions and the Dispatcher", - "author": [ - "fisherwebdev" - ], - "excerpt": "

Flux is the application architecture Facebook uses to build JavaScript applications. It’s based on a unidirectional data flow. We’ve built everything from small widgets to huge applications with Flux, and it’s handled everything we’ve thrown at it. Because we’ve found it to be a great way to structure our code, we’re excited to share it with the open source community. Jing Chen presented Flux at the F8 conference, and since that time we’ve seen a lot of interest in it. We’ve also published an overview of Flux and a TodoMVC example, with an accompanying tutorial.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/07/28/community-roundup-20.md", - "date": "2014-07-28", - "title": "Community Round-up #20", - "author": [ - "LoukaN" - ], - "excerpt": "

It’s an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/07/25/react-v0.11.1.md", - "date": "2014-07-25", - "title": "React v0.11.1", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they’ve begun upgrading.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/07/17/react-v0.11.md", - "date": "2014-07-17", - "title": "React v0.11", - "author": [ - "zpao" - ], - "excerpt": "

Update: We missed a few important changes in our initial post and changelog. We’ve updated this post with details about Descriptors and Prop Type Validation.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2014/07/13/react-v0.11-rc1.md", - "date": "2014-07-13", - "title": "React v0.11 RC", - "author": [ - "zpao" - ], - "excerpt": "

It’s that time again… we’re just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/06/27/community-roundup-19.md", - "date": "2014-06-27", - "title": "Community Round-up #19", - "author": [ - "chenglou" - ], - "excerpt": "

React Meetups!

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/05/29/one-year-of-open-source-react.md", - "date": "2014-05-29", - "title": "One Year of Open-Source React", - "author": [ - "chenglou" - ], - "excerpt": "

Today marks the one-year open-source anniversary of React.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/05/06/flux.md", - "date": "2014-05-06", - "title": "Flux: An Application Architecture for React", - "author": [ - "fisherwebdev", - "jingc" - ], - "excerpt": "

We recently spoke at one of f8’s breakout session about Flux, a data flow architecture that works well with React. Check out the video here:

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2014/04/04/reactnet.md", - "date": "2014-04-04", - "title": "Use React and JSX in ASP.NET MVC", - "author": [ - "Daniel15" - ], - "excerpt": "

Today we’re happy to announce the initial release of

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2014/03/28/the-road-to-1.0.md", - "date": "2014-03-28", - "title": "The Road to 1.0", - "author": [ - "zpao" - ], - "excerpt": "

When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We’ve learned a lot over the past 9 months and we’ve thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined [several projects][projects] that we have planned to take us to 1.0 and beyond. Today I’m writing a bit more about them to give our users a better insight into our plans.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/03/21/react-v0.10.md", - "date": "2014-03-21", - "title": "React v0.10", - "author": [ - "zpao" - ], - "excerpt": "

Hot on the heels of the release candidate earlier this week, we’re ready to call v0.10 done. The only major issue we discovered had to do with the react-tools package, which has been updated. We’ve copied over the changelog from the RC with some small clarifying changes.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/03/19/react-v0.10-rc1.md", - "date": "2014-03-19", - "title": "React v0.10 RC", - "author": [ - "zpao" - ], - "excerpt": "

v0.9 has only been out for a month, but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don’t have a long list of changes to talk about.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/03/14/community-roundup-18.md", - "date": "2014-03-14", - "title": "Community Round-up #18", - "author": [ - "jgebhardt" - ], - "excerpt": "

In this Round-up, we are taking a few closer looks at React’s interplay with different frameworks and architectures.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2014/02/24/community-roundup-17.md", - "date": "2014-02-24", - "title": "Community Round-up #17", - "author": [ - "jgebhardt" - ], - "excerpt": "

It’s exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/02/20/react-v0.9.md", - "date": "2014-02-20", - "title": "React v0.9", - "author": [ - "sophiebits" - ], - "excerpt": "

I’m excited to announce that today we’re releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2014/02/16/react-v0.9-rc1.md", - "date": "2014-02-16", - "title": "React v0.9 RC", - "author": [ - "sophiebits" - ], - "excerpt": "

We’re almost ready to release React v0.9! We’re posting a release candidate so that you can test your apps on it; we’d much prefer to find show-stopping bugs now rather than after we release.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2014/02/15/community-roundup-16.md", - "date": "2014-02-15", - "title": "Community Round-up #16", - "author": [ - "jgebhardt" - ], - "excerpt": "

There have been many posts recently covering the why and how of React. This week’s community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/02/05/community-roundup-15.md", - "date": "2014-02-05", - "title": "Community Round-up #15", - "author": [ - "jgebhardt" - ], - "excerpt": "

Interest in React seems to have surged ever since David Nolen (@swannodette)‘s introduction of Om in his post “The Future of JavaScript MVC Frameworks”.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2014/01/06/community-roundup-14.md", - "date": "2014-01-06", - "title": "Community Round-up #14", - "author": [ - "vjeux" - ], - "excerpt": "

The theme of this first round-up of 2014 is integration. I’ve tried to assemble a list of articles and projects that use React in various environments.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2014/01/02/react-chrome-developer-tools.md", - "date": "2014-01-02", - "title": "React Chrome Developer Tools", - "author": [ - "sebmarkbage" - ], - "excerpt": "

With the new year, we thought you’d enjoy some new tools for debugging React code. Today we’re releasing the React Developer Tools, an extension to the Chrome Developer Tools. Download them from the Chrome Web Store.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/12/30/community-roundup-13.md", - "date": "2013-12-30", - "title": "Community Round-up #13", - "author": [ - "vjeux" - ], - "excerpt": "

Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/12/23/community-roundup-12.md", - "date": "2013-12-23", - "title": "Community Round-up #12", - "author": [ - "vjeux" - ], - "excerpt": "

React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the docs and do not hesitate to ask questions on the Google Group, IRC or Stack Overflow. We are trying our best to help you out!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/12/19/react-v0.8.0.md", - "date": "2013-12-19", - "title": "React v0.8", - "author": [ - "zpao" - ], - "excerpt": "

I’ll start by answering the obvious question:

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/12/18/react-v0.5.2-v0.4.2.md", - "date": "2013-12-18", - "title": "React v0.5.2, v0.4.2", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing an update to address a potential XSS vulnerability that can arise when using user data as a key. Typically “safe” data is used for a key, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/11/18/community-roundup-11.md", - "date": "2013-11-18", - "title": "Community Round-up #11", - "author": [ - "vjeux" - ], - "excerpt": "

This round-up is the proof that React has taken off from its Facebook’s root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/11/06/community-roundup-10.md", - "date": "2013-11-06", - "title": "Community Round-up #10", - "author": [ - "vjeux" - ], - "excerpt": "

This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2013/10/29/react-v0-5-1.md", - "date": "2013-10-29", - "title": "React v0.5.1", - "author": [ - "zpao" - ], - "excerpt": "

This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to [Sophie Alpert][1], [Andrey Popp][2], and [Laurence Rowe][3] for their contributions!

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2013/10/16/react-v0.5.0.md", - "date": "2013-10-16", - "title": "React v0.5", - "author": [ - "zpao" - ], - "excerpt": "

This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we’ve worked hard to improve performance and memory usage. We’ve also worked hard to make sure we are being consistent in our usage of DOM properties.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/10/03/community-roundup-9.md", - "date": "2013-10-03", - "title": "Community Round-up #9", - "author": [ - "vjeux" - ], - "excerpt": "

We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we’ll probably organize more in the future.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/09/24/community-roundup-8.md", - "date": "2013-09-24", - "title": "Community Round-up #8", - "author": [ - "vjeux" - ], - "excerpt": "

A lot has happened in the month since our last update. Here are some of the more interesting things we’ve found. But first, we have a couple updates before we share links.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2013/08/26/community-roundup-7.md", - "date": "2013-08-26", - "title": "Community Round-up #7", - "author": [ - "vjeux" - ], - "excerpt": "

It’s been three months since we open sourced React and it is going well. Some stats so far:

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/08/19/use-react-and-jsx-in-python-applications.md", - "date": "2013-08-19", - "title": "Use React and JSX in Python Applications", - "author": [ - "kmeht" - ], - "excerpt": "

Today we’re happy to announce the initial release of PyReact, which makes it easier to use React and JSX in your Python applications. It’s designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/08/05/community-roundup-6.md", - "date": "2013-08-05", - "title": "Community Round-up #6", - "author": [ - "vjeux" - ], - "excerpt": "

This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It’s great to see the adoption of React growing.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.md", - "date": "2013-07-30", - "title": "Use React and JSX in Ruby on Rails", - "author": [ - "zpao" - ], - "excerpt": "

Today we’re releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: react-rails.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/07/26/react-v0-4-1.md", - "date": "2013-07-26", - "title": "React v0.4.1", - "author": [ - "zpao" - ], - "excerpt": "

React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2013/07/23/community-roundup-5.md", - "date": "2013-07-23", - "title": "Community Round-up #5", - "author": [ - "vjeux" - ], - "excerpt": "

We launched the React Facebook Page along with the React v0.4 launch. 700 people already liked it to get updated on the project :)

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/07/17/react-v0-4-0.md", - "date": "2013-07-17", - "title": "React v0.4.0", - "author": [ - "zpao" - ], - "excerpt": "

Over the past 2 months we’ve been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we’re proud to announce the availability of React v0.4!

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md", - "date": "2013-07-11", - "title": "New in React v0.4: Prop Validation and Default Values", - "author": [ - "zpao" - ], - "excerpt": "

Many of the questions we got following the public launch of React revolved around props, specifically that people wanted to do validation and to make sure their components had sensible defaults.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/07/03/community-roundup-4.md", - "date": "2013-07-03", - "title": "Community Round-up #4", - "author": [ - "vjeux" - ], - "excerpt": "

React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/07/02/react-v0-4-autobind-by-default.md", - "date": "2013-07-02", - "title": "New in React v0.4: Autobind by Default", - "author": [ - "zpao" - ], - "excerpt": "

React v0.4 is very close to completion. As we finish it off, we’d like to share with you some of the major changes we’ve made since v0.3. This is the first of several posts we’ll be making over the next week.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2013/06/27/community-roundup-3.md", - "date": "2013-06-27", - "title": "Community Round-up #3", - "author": [ - "vjeux" - ], - "excerpt": "

The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/06/21/react-v0-3-3.md", - "date": "2013-06-21", - "title": "React v0.3.3", - "author": [ - "zpao" - ], - "excerpt": "

We have a ton of great stuff coming in v0.4, but in the meantime we’re releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.

\n", - "readingTime": "1 min read" - }, - { - "path": "/blog/2013/06/19/community-roundup-2.md", - "date": "2013-06-19", - "title": "Community Round-up #2", - "author": [ - "vjeux" - ], - "excerpt": "

Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2013/06/12/community-roundup.md", - "date": "2013-06-12", - "title": "Community Round-up #1", - "author": [ - "vjeux" - ], - "excerpt": "

React was open sourced two weeks ago and it’s time for a little round-up of what has been going on.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/06/05/why-react.md", - "date": "2013-06-05", - "title": "Why did we build React?", - "author": [ - "petehunt" - ], - "excerpt": "

There are a lot of JavaScript MVC frameworks out there. Why did we build React

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2013/06/02/jsfiddle-integration.md", - "date": "2013-06-02", - "title": "JSFiddle Integration", - "author": [ - "vjeux" - ], - "excerpt": "

JSFiddle just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this base React JSFiddle, fork it and share it! A fiddle without JSX is also available.

\n", - "readingTime": "1 min read" - } - ] -} \ No newline at end of file diff --git a/beta/src/blogIndexRecent.json b/beta/src/blogIndexRecent.json deleted file mode 100644 index 8bf964b5c..000000000 --- a/beta/src/blogIndexRecent.json +++ /dev/null @@ -1,207 +0,0 @@ -{ - "title": "Recent Posts", - "heading": true, - "path": "/blog", - "routes": [ - { - "path": "/blog/2020/08/10/react-v17-rc.md", - "date": "2020-08-10", - "title": "React v17.0 Release Candidate: No New Features", - "author": ["gaearon", "rachelnabors"], - "excerpt": "

Today, we are publishing the first Release Candidate for React 17. It has been two and a half years since the previous major release of React, which is a long time even by our standards! In this blog post, we will describe the role of this major release, what changes you can expect in it, and how you can try this release.

\n", - "readingTime": "20 min read" - }, - { - "path": "/blog/2020/02/26/react-v16.13.0.md", - "date": "2020-02-26", - "title": "React v16.13.0", - "author": ["threepointone"], - "excerpt": "

Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.md", - "date": "2019-11-06", - "title": "Building Great User Experiences with Concurrent Mode and Suspense", - "author": ["josephsavona"], - "excerpt": "

At React Conf 2019 we announced an experimental release of React that supports Concurrent Mode and Suspense. In this post we’ll introduce best practices for using them that we’ve identified through the process of building the new facebook.com.

\n", - "readingTime": "17 min read" - }, - { - "path": "/blog/2019/10/22/react-release-channels.md", - "date": "2019-10-22", - "title": "Preparing for the Future with React Prereleases", - "author": ["acdlite"], - "excerpt": "

To share upcoming changes with our partners in the React ecosystem, we’re establishing official prerelease channels. We hope this process will help us make changes to React with confidence, and give developers the opportunity to try out experimental features.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/08/15/new-react-devtools.md", - "date": "2019-08-15", - "title": "Introducing the New React DevTools", - "author": ["bvaughn"], - "excerpt": "

We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2019/08/08/react-v16.9.0.md", - "date": "2019-08-08", - "title": "React v16.9.0 and the Roadmap Update", - "author": ["gaearon", "bvaughn"], - "excerpt": "

Today we are releasing React 16.9. It contains several new features, bugfixes, and new deprecation warnings to help prepare for a future major release.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2019/02/23/is-react-translated-yet.md", - "date": "2019-02-23", - "title": "Is React Translated Yet? ¡Sí! Sim! はい！", - "author": ["tesseralis"], - "excerpt": "

We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into over 30 languages! You can find them on the new Languages page.

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2019/02/06/react-v16.8.0.md", - "date": "2019-02-06", - "title": "React v16.8: The One With Hooks", - "author": ["gaearon"], - "excerpt": "

With React 16.8, React Hooks are available in a stable release!

\n", - "readingTime": "7 min read" - }, - { - "path": "/blog/2018/12/19/react-v-16-7.md", - "date": "2018-12-19", - "title": "React v16.7: No, This Is Not the One With Hooks", - "author": ["acdlite"], - "excerpt": "

Our latest release includes an important performance bugfix for React.lazy. Although there are no API changes, we’re releasing it as a minor instead of a patch.

\n", - "readingTime": "3 min read" - }, - { - "path": "/blog/2018/11/27/react-16-roadmap.md", - "date": "2018-11-27", - "title": "React 16.x Roadmap", - "author": ["gaearon"], - "excerpt": "

You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.

\n", - "readingTime": "14 min read" - }, - { - "path": "/blog/2018/11/13/react-conf-recap.md", - "date": "2018-11-13", - "title": "React Conf recap: Hooks, Suspense, and Concurrent Rendering", - "author": ["tomocchino"], - "excerpt": "

This year’s React Conf took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2018/10/23/react-v-16-6.md", - "date": "2018-10-23", - "title": "React v16.6.0: lazy, memo and contextType", - "author": ["sebmarkbage"], - "excerpt": "

Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2018/10/01/create-react-app-v2.md", - "date": "2018-10-01", - "title": "Create React App 2.0: Babel 7, Sass, and More", - "author": ["timer", "gaearon"], - "excerpt": "

Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2018/09/10/introducing-the-react-profiler.md", - "date": "2018-09-10", - "title": "Introducing the React Profiler", - "author": ["bvaughn"], - "excerpt": "

React 16.5 adds support for a new DevTools profiler plugin.

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2018/08/01/react-v-16-4-2.md", - "date": "2018-08-01", - "title": "React v16.4.2: Server-side vulnerability fix", - "author": ["gaearon"], - "excerpt": "

We discovered a minor vulnerability that might affect some apps using ReactDOMServer. We are releasing a patch version for every affected React minor release so that you can upgrade with no friction. Read on for more details.

\n", - "readingTime": "4 min read" - }, - { - "path": "/blog/2018/06/07/you-probably-dont-need-derived-state.md", - "date": "2018-06-07", - "title": "You Probably Don't Need Derived State", - "author": ["bvaughn"], - "excerpt": "

React 16.4 included a bugfix for getDerivedStateFromProps which caused some existing bugs in React components to reproduce more consistently. If this release exposed a case where your application was using an anti-pattern and didn’t work properly after the fix, we’re sorry for the churn. In this post, we will explain some common anti-patterns with derived state and our preferred alternatives.

\n", - "readingTime": "14 min read" - }, - { - "path": "/blog/2018/05/23/react-v-16-4.md", - "date": "2018-05-23", - "title": "React v16.4.0: Pointer Events", - "author": ["acdlite"], - "excerpt": "

The latest minor release adds support for an oft-requested feature: pointer events!

\n", - "readingTime": "5 min read" - }, - { - "path": "/blog/2018/03/29/react-v-16-3.md", - "date": "2018-03-29", - "title": "React v16.3.0: New lifecycles and context API", - "author": ["bvaughn"], - "excerpt": "

A few days ago, we wrote a post about upcoming changes to our legacy lifecycle methods, including gradual migration strategies. In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API.

\n", - "readingTime": "6 min read" - }, - { - "path": "/blog/2018/03/27/update-on-async-rendering.md", - "date": "2018-03-27", - "title": "Update on Async Rendering", - "author": ["bvaughn"], - "excerpt": "

For over a year, the React team has been working to implement asynchronous rendering. Last month during his talk at JSConf Iceland, Dan unveiled some of the exciting new possibilities async rendering unlocks. Now we’d like to share with you some of the lessons we’ve learned while working on these features, and some recipes to help prepare your components for async rendering when it launches.

\n", - "readingTime": "12 min read" - }, - { - "path": "/blog/2018/03/01/sneak-peek-beyond-react-16.md", - "date": "2018-03-01", - "title": "Sneak Peek: Beyond React 16", - "author": ["sophiebits"], - "excerpt": "

Dan Abramov from our team just spoke at JSConf Iceland 2018 with a preview of some new features we’ve been working on in React. The talk opens with a question: “With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?”

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2017/12/15/improving-the-repository-infrastructure.md", - "date": "2017-12-15", - "title": "Behind the Scenes: Improving the Repository Infrastructure", - "author": ["gaearon", "bvaughn"], - "excerpt": "

As we worked on React 16, we revamped the folder structure and much of the build tooling in the React repository. Among other things, we introduced projects such as Rollup, Prettier, and Google Closure Compiler into our workflow. People often ask us questions about how we use those tools. In this post, we would like to share some of the changes that we’ve made to our build and test infrastructure in 2017, and what motivated them.

\n", - "readingTime": "30 min read" - }, - { - "path": "/blog/2017/12/07/introducing-the-react-rfc-process.md", - "date": "2017-12-07", - "title": "Introducing the React RFC Process", - "author": ["acdlite"], - "excerpt": "

We’re adopting an RFC (“request for comments”) process for contributing ideas to React.

\n", - "readingTime": "2 min read" - }, - { - "path": "/blog/2017/11/28/react-v16.2.0-fragment-support.md", - "date": "2017-11-28", - "title": "React v16.2.0: Improved Support for Fragments", - "author": ["clemmy"], - "excerpt": "

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments:

\n", - "readingTime": "8 min read" - }, - { - "path": "/blog/2017/09/26/react-v16.0.md", - "date": "2017-09-26", - "title": "React v16.0", - "author": ["acdlite"], - "excerpt": "

We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.

\n", - "readingTime": "11 min read" - }, - { - "path": "/blog/2017/09/25/react-v15.6.2.md", - "date": "2017-09-25", - "title": "React v15.6.2", - "author": ["nhunzaker"], - "excerpt": "

Today we’re sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we’ve also included a few more fixes to improve the stability of React across all browsers.

\n", - "readingTime": "3 min read" - } - ] -} diff --git a/beta/src/components/Breadcrumbs.tsx b/beta/src/components/Breadcrumbs.tsx deleted file mode 100644 index beed182a4..000000000 --- a/beta/src/components/Breadcrumbs.tsx +++ /dev/null @@ -1,45 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {Fragment} from 'react'; -import {useRouteMeta} from 'components/Layout/useRouteMeta'; -import Link from 'next/link'; - -function Breadcrumbs() { - const {breadcrumbs} = useRouteMeta(); - if (!breadcrumbs) return null; - return ( -
- {breadcrumbs.map( - (crumb, i) => - crumb.path && ( -
- - - - {crumb.title} - - - - - - - - -
- ) - )} -
- ); -} - -export default Breadcrumbs; diff --git a/beta/src/components/Button.tsx b/beta/src/components/Button.tsx deleted file mode 100644 index 9d4d0cf2b..000000000 --- a/beta/src/components/Button.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; - -interface ButtonProps { - children: React.ReactNode; - onClick?: (event: React.MouseEvent) => void; - active: boolean; - className?: string; - style?: Record; -} - -export function Button({ - children, - onClick, - active, - className, - style, -}: ButtonProps) { - return ( - - ); -} - -Button.defaultProps = { - active: false, - style: {}, -}; - -export default Button; diff --git a/beta/src/components/ButtonLink.tsx b/beta/src/components/ButtonLink.tsx deleted file mode 100644 index b3fe73ad9..000000000 --- a/beta/src/components/ButtonLink.tsx +++ /dev/null @@ -1,45 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import cn from 'classnames'; -import NextLink from 'next/link'; - -interface ButtonLinkProps { - size?: 'md' | 'lg'; - type?: 'primary' | 'secondary'; - label?: string; - target?: '_self' | '_blank'; -} - -function ButtonLink({ - href, - className, - children, - type = 'primary', - size = 'md', - label, - target = '_self', - ...props -}: JSX.IntrinsicElements['a'] & ButtonLinkProps) { - const classes = cn( - className, - 'inline-flex font-bold items-center border-2 border-transparent outline-none focus:ring-1 focus:ring-offset-2 focus:ring-link active:bg-link active:text-white active:ring-0 active:ring-offset-0 leading-normal', - { - 'bg-link text-white hover:bg-opacity-80': type === 'primary', - 'bg-secondary-button dark:bg-secondary-button-dark text-primary dark:text-primary-dark hover:text-link focus:bg-link focus:text-white focus:border-link focus:border-2': - type === 'secondary', - 'text-lg rounded-lg p-4': size === 'lg', - 'text-base rounded-lg px-4 py-1.5': size === 'md', - } - ); - return ( - - - {children} - - - ); -} - -export default ButtonLink; diff --git a/beta/src/components/DocsFooter.tsx b/beta/src/components/DocsFooter.tsx deleted file mode 100644 index 6a8597705..000000000 --- a/beta/src/components/DocsFooter.tsx +++ /dev/null @@ -1,91 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import NextLink from 'next/link'; -import {memo} from 'react'; -import cn from 'classnames'; -import {removeFromLast} from 'utils/removeFromLast'; -import {IconNavArrow} from './Icon/IconNavArrow'; -import {RouteMeta} from './Layout/useRouteMeta'; - -export type DocsPageFooterProps = Pick< - RouteMeta, - 'route' | 'nextRoute' | 'prevRoute' ->; - -function areEqual(prevProps: DocsPageFooterProps, props: DocsPageFooterProps) { - return prevProps.route?.path === props.route?.path; -} - -export const DocsPageFooter = memo( - function DocsPageFooter({nextRoute, prevRoute, route}) { - if (!route || route?.heading) { - return null; - } - - return ( - <> - {prevRoute?.path || nextRoute?.path ? ( - <> -
- {prevRoute?.path ? ( - - ) : ( -
- )} - - {nextRoute?.path ? ( - - ) : ( -
- )} -
- - ) : null} - - ); - }, - areEqual -); - -function FooterLink({ - href, - title, - type, -}: { - href: string; - title: string; - type: 'Previous' | 'Next'; -}) { - return ( - - - - - - {type} - - {title} - - - - ); -} diff --git a/beta/src/components/ExternalLink.tsx b/beta/src/components/ExternalLink.tsx deleted file mode 100644 index 38b1f2c5f..000000000 --- a/beta/src/components/ExternalLink.tsx +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -export function ExternalLink({ - href, - target, - children, - ...props -}: JSX.IntrinsicElements['a']) { - return ( - - {children} - - ); -} diff --git a/beta/src/components/Icon/IconArrow.tsx b/beta/src/components/Icon/IconArrow.tsx deleted file mode 100644 index 53bde1326..000000000 --- a/beta/src/components/Icon/IconArrow.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; -import cn from 'classnames'; - -export const IconArrow = memo< - JSX.IntrinsicElements['svg'] & { - displayDirection: 'left' | 'right' | 'up' | 'down'; - } ->(function IconArrow({displayDirection, className, ...rest}) { - return ( - - - - - ); -}); diff --git a/beta/src/components/Icon/IconArrowSmall.tsx b/beta/src/components/Icon/IconArrowSmall.tsx deleted file mode 100644 index cf85988d2..000000000 --- a/beta/src/components/Icon/IconArrowSmall.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; -import cn from 'classnames'; - -export const IconArrowSmall = memo< - JSX.IntrinsicElements['svg'] & { - displayDirection: 'left' | 'right' | 'up' | 'down'; - } ->(function IconArrowSmall({displayDirection, className, ...rest}) { - const classes = cn(className, { - 'rotate-180': displayDirection === 'left', - 'rotate-90': displayDirection === 'down', - }); - return ( - - - - ); -}); diff --git a/beta/src/components/Icon/IconChevron.tsx b/beta/src/components/Icon/IconChevron.tsx deleted file mode 100644 index 1184d77d2..000000000 --- a/beta/src/components/Icon/IconChevron.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; -import cn from 'classnames'; - -export const IconChevron = memo< - JSX.IntrinsicElements['svg'] & { - displayDirection: 'up' | 'down' | 'left' | 'right'; - } ->(function IconChevron({className, displayDirection}) { - const classes = cn( - { - 'rotate-0': displayDirection === 'down', - 'rotate-90': displayDirection === 'left', - 'rotate-180': displayDirection === 'up', - '-rotate-90': displayDirection === 'right', - }, - className - ); - return ( - - - - - - - ); -}); diff --git a/beta/src/components/Icon/IconClose.tsx b/beta/src/components/Icon/IconClose.tsx deleted file mode 100644 index 5ad352cf0..000000000 --- a/beta/src/components/Icon/IconClose.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconClose = memo(function IconClose( - props -) { - return ( - - - - - ); -}); diff --git a/beta/src/components/Icon/IconCodeBlock.tsx b/beta/src/components/Icon/IconCodeBlock.tsx deleted file mode 100644 index 755a2ae34..000000000 --- a/beta/src/components/Icon/IconCodeBlock.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconCodeBlock = memo( - function IconCodeBlock({className}) { - return ( - - - - ); - } -); diff --git a/beta/src/components/Icon/IconCopy.tsx b/beta/src/components/Icon/IconCopy.tsx deleted file mode 100644 index 500cd4fda..000000000 --- a/beta/src/components/Icon/IconCopy.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconCopy = memo(function IconCopy({ - className, -}) { - return ( - - {' '} - - - ); -}); diff --git a/beta/src/components/Icon/IconDeepDive.tsx b/beta/src/components/Icon/IconDeepDive.tsx deleted file mode 100644 index fe3e7774c..000000000 --- a/beta/src/components/Icon/IconDeepDive.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconDeepDive = memo( - function IconDeepDive({className}) { - return ( - - - - ); - } -); diff --git a/beta/src/components/Icon/IconDownload.tsx b/beta/src/components/Icon/IconDownload.tsx deleted file mode 100644 index c0e7f49c2..000000000 --- a/beta/src/components/Icon/IconDownload.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconDownload = memo( - function IconDownload({className}) { - return ( - - - - - ); - } -); diff --git a/beta/src/components/Icon/IconError.tsx b/beta/src/components/Icon/IconError.tsx deleted file mode 100644 index f101f62b2..000000000 --- a/beta/src/components/Icon/IconError.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconError = memo(function IconError({ - className, -}) { - return ( - - - - - - ); -}); diff --git a/beta/src/components/Icon/IconFacebookCircle.tsx b/beta/src/components/Icon/IconFacebookCircle.tsx deleted file mode 100644 index 0900d6815..000000000 --- a/beta/src/components/Icon/IconFacebookCircle.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconFacebookCircle = memo( - function IconFacebookCircle(props) { - return ( - - - - - ); - } -); diff --git a/beta/src/components/Icon/IconGitHub.tsx b/beta/src/components/Icon/IconGitHub.tsx deleted file mode 100644 index fe6faf1bb..000000000 --- a/beta/src/components/Icon/IconGitHub.tsx +++ /dev/null @@ -1,20 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconGitHub = memo( - function IconGitHub(props) { - return ( - - - - ); - } -); diff --git a/beta/src/components/Icon/IconGotcha.tsx b/beta/src/components/Icon/IconGotcha.tsx deleted file mode 100644 index 7dd4c78d6..000000000 --- a/beta/src/components/Icon/IconGotcha.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconGotcha = memo( - function IconGotcha({className}) { - return ( - - - - ); - } -); diff --git a/beta/src/components/Icon/IconHamburger.tsx b/beta/src/components/Icon/IconHamburger.tsx deleted file mode 100644 index 5e6aa725a..000000000 --- a/beta/src/components/Icon/IconHamburger.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconHamburger = memo( - function IconHamburger(props) { - return ( - - - - - - ); - } -); diff --git a/beta/src/components/Icon/IconHint.tsx b/beta/src/components/Icon/IconHint.tsx deleted file mode 100644 index b802bc79c..000000000 --- a/beta/src/components/Icon/IconHint.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; -import cn from 'classnames'; - -export const IconHint = memo(function IconHint({ - className, -}) { - return ( - - - - ); -}); diff --git a/beta/src/components/Icon/IconInstagram.tsx b/beta/src/components/Icon/IconInstagram.tsx deleted file mode 100644 index 6868a0a75..000000000 --- a/beta/src/components/Icon/IconInstagram.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconInstagram = memo( - function IconInstagram(props) { - return ( - - - - - ); - } -); diff --git a/beta/src/components/Icon/IconNavArrow.tsx b/beta/src/components/Icon/IconNavArrow.tsx deleted file mode 100644 index 93eed6e3c..000000000 --- a/beta/src/components/Icon/IconNavArrow.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; -import cn from 'classnames'; - -export const IconNavArrow = memo< - JSX.IntrinsicElements['svg'] & { - displayDirection: 'right' | 'down' | 'left'; - } ->(function IconNavArrow({displayDirection = 'right', className}) { - const classes = cn( - 'duration-100 ease-in transition', - { - 'rotate-0': displayDirection === 'down', - '-rotate-90': displayDirection === 'right', - 'rotate-90': displayDirection === 'left', - }, - className - ); - - return ( - - - - - - - ); -}); diff --git a/beta/src/components/Icon/IconNewPage.tsx b/beta/src/components/Icon/IconNewPage.tsx deleted file mode 100644 index e32901c5a..000000000 --- a/beta/src/components/Icon/IconNewPage.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconNewPage = memo( - function IconNewPage(props) { - return ( - - - - - ); - } -); diff --git a/beta/src/components/Icon/IconNote.tsx b/beta/src/components/Icon/IconNote.tsx deleted file mode 100644 index a0ac1293e..000000000 --- a/beta/src/components/Icon/IconNote.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconNote = memo(function IconNote({ - className, -}) { - return ( - - - - ); -}); diff --git a/beta/src/components/Icon/IconRestart.tsx b/beta/src/components/Icon/IconRestart.tsx deleted file mode 100644 index b4a6b62f5..000000000 --- a/beta/src/components/Icon/IconRestart.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconRestart = memo( - function IconRestart({className}) { - return ( - - - - ); - } -); diff --git a/beta/src/components/Icon/IconRss.tsx b/beta/src/components/Icon/IconRss.tsx deleted file mode 100644 index f2a52ee25..000000000 --- a/beta/src/components/Icon/IconRss.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconRss = memo(function IconRss( - props -) { - return ( - - - - - - ); -}); diff --git a/beta/src/components/Icon/IconSearch.tsx b/beta/src/components/Icon/IconSearch.tsx deleted file mode 100644 index a2816991e..000000000 --- a/beta/src/components/Icon/IconSearch.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconSearch = memo( - function IconSearch(props) { - return ( - - - - ); - } -); diff --git a/beta/src/components/Icon/IconSolution.tsx b/beta/src/components/Icon/IconSolution.tsx deleted file mode 100644 index 668e41afe..000000000 --- a/beta/src/components/Icon/IconSolution.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; -import cn from 'classnames'; - -export const IconSolution = memo( - function IconSolution({className}) { - return ( - - - - ); - } -); diff --git a/beta/src/components/Icon/IconTerminal.tsx b/beta/src/components/Icon/IconTerminal.tsx deleted file mode 100644 index 7b3a97a8c..000000000 --- a/beta/src/components/Icon/IconTerminal.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconTerminal = memo( - function IconTerminal({className}) { - return ( - - - - ); - } -); diff --git a/beta/src/components/Icon/IconTwitter.tsx b/beta/src/components/Icon/IconTwitter.tsx deleted file mode 100644 index 951171524..000000000 --- a/beta/src/components/Icon/IconTwitter.tsx +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconTwitter = memo( - function IconTwitter(props) { - return ( - - - - - ); - } -); diff --git a/beta/src/components/Icon/IconWarning.tsx b/beta/src/components/Icon/IconWarning.tsx deleted file mode 100644 index d89b5678e..000000000 --- a/beta/src/components/Icon/IconWarning.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {memo} from 'react'; - -export const IconWarning = memo( - function IconWarning({className}) { - return ( - - - - - - - ); - } -); diff --git a/beta/src/components/Layout/Feedback.tsx b/beta/src/components/Layout/Feedback.tsx deleted file mode 100644 index 0832be686..000000000 --- a/beta/src/components/Layout/Feedback.tsx +++ /dev/null @@ -1,93 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {useState} from 'react'; -import {useRouter} from 'next/router'; -import {ga} from '../../utils/analytics'; - -export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) { - const {asPath} = useRouter(); - // Reset on route changes. - return ; -} - -const thumbsUpIcon = ( - - - -); - -const thumbsDownIcon = ( - - - -); - -function sendGAEvent(isPositive: boolean) { - // Fragile. Don't change unless you've tested the network payload - // and verified that the right events actually show up in GA. - ga( - 'send', - 'event', - 'button', - 'feedback', - window.location.pathname, - isPositive ? '1' : '0' - ); -} - -function SendFeedback({onSubmit}: {onSubmit: () => void}) { - const [isSubmitted, setIsSubmitted] = useState(false); - return ( -
-

- {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'} -

- {!isSubmitted && ( - - )} - {!isSubmitted && ( - - )} -
- ); -} diff --git a/beta/src/components/Layout/Footer.tsx b/beta/src/components/Layout/Footer.tsx deleted file mode 100644 index 889521e85..000000000 --- a/beta/src/components/Layout/Footer.tsx +++ /dev/null @@ -1,208 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import NextLink from 'next/link'; -import cn from 'classnames'; -import ButtonLink from 'components/ButtonLink'; -import {ExternalLink} from 'components/ExternalLink'; -import {IconFacebookCircle} from 'components/Icon/IconFacebookCircle'; -import {IconTwitter} from 'components/Icon/IconTwitter'; -import {IconNavArrow} from 'components/Icon/IconNavArrow'; - -export function Footer() { - const socialLinkClasses = 'hover:text-primary dark:text-primary-dark'; - return ( - <> -
-
-
-
-

- How do you like these docs? -

-
- - Take our survey! - - -
-
-
-
-
-
- -
- - - - - - - - - - - Open Source -
-
- ©{new Date().getFullYear()} -
- -
- - Learn React - - Quick Start - Installation - - Describing the UI - - - Adding Interactivity - - - Managing State - - - Escape Hatches - -
-
- - API Reference - - React APIs - React DOM APIs -
-
- - Community - - - Code of Conduct - - - Acknowledgements - - - Meet the Team - - Blog - {/* Community Resources */} -
-
- More - {/* Tutorial */} - {/* Blog */} - {/* Acknowledgements */} - - React Native - - - Privacy - - - Terms - -
- - - - - - -
-
-
-
-
- - ); -} - -function FooterLink({ - href, - children, - isHeader = false, -}: { - href?: string; - children: React.ReactNode; - isHeader?: boolean; -}) { - const classes = cn('border-b inline-block border-transparent', { - 'text-sm text-primary dark:text-primary-dark': !isHeader, - 'text-md text-secondary dark:text-secondary-dark my-2 font-bold': isHeader, - 'hover:border-gray-10': href, - }); - - if (!href) { - return
{children}
; - } - - if (href.startsWith('https://')) { - return ( -
- - {children} - -
- ); - } - - return ( -
- - {children} - -
- ); -} diff --git a/beta/src/components/Layout/MarkdownPage.tsx b/beta/src/components/Layout/MarkdownPage.tsx deleted file mode 100644 index 1c9750cfb..000000000 --- a/beta/src/components/Layout/MarkdownPage.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {DocsPageFooter} from 'components/DocsFooter'; -import {Seo} from 'components/Seo'; -import PageHeading from 'components/PageHeading'; -import {useRouteMeta} from './useRouteMeta'; -import {TocContext} from '../MDX/TocContext'; - -export interface MarkdownProps { - meta: Frontmatter & {description?: string}; - children?: React.ReactNode; - toc: Array<{ - url: string; - text: React.ReactNode; - depth: number; - }>; -} - -export function MarkdownPage< - T extends {title: string; status?: string} = {title: string; status?: string} ->({children, meta, toc}: MarkdownProps) { - const {route, nextRoute, prevRoute} = useRouteMeta(); - const title = meta.title || route?.title || ''; - const description = meta.description || route?.description || ''; - - if (!route) { - console.error('This page was not added to one of the sidebar JSON files.'); - } - const isHomePage = route?.path === '/'; - return ( - <> -
- - {!isHomePage && ( - - )} -
-
- {children} -
- -
-
- - ); -} diff --git a/beta/src/components/Layout/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx deleted file mode 100644 index 098b14a42..000000000 --- a/beta/src/components/Layout/Nav/Nav.tsx +++ /dev/null @@ -1,392 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {useState, useRef, useContext, useEffect, Suspense} from 'react'; -import * as React from 'react'; -import cn from 'classnames'; -import NextLink from 'next/link'; -import {useRouter} from 'next/router'; -import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock'; - -import {IconClose} from 'components/Icon/IconClose'; -import {IconHamburger} from 'components/Icon/IconHamburger'; -import {Search} from 'components/Search'; -import {useActiveSection} from 'hooks/useActiveSection'; -import {Logo} from '../../Logo'; -import {Feedback} from '../Feedback'; -import NavLink from './NavLink'; -import {SidebarContext} from 'components/Layout/useRouteMeta'; -import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree'; -import type {RouteItem} from '../useRouteMeta'; -import sidebarHome from '../../../sidebarHome.json'; -import sidebarLearn from '../../../sidebarLearn.json'; -import sidebarReference from '../../../sidebarReference.json'; - -declare global { - interface Window { - __theme: string; - __setPreferredTheme: (theme: string) => void; - } -} - -const feedbackIcon = ( - - - - -); - -const darkIcon = ( - - - - - - -); - -const lightIcon = ( - - - - - - - - - -); - -export default function Nav() { - const [isOpen, setIsOpen] = useState(false); - const [showFeedback, setShowFeedback] = useState(false); - const scrollParentRef = useRef(null); - const feedbackAutohideRef = useRef(null); - const section = useActiveSection(); - const {asPath} = useRouter(); - const feedbackPopupRef = useRef(null); - - // In desktop mode, use the route tree for current route. - let routeTree: RouteItem = useContext(SidebarContext); - // In mobile mode, let the user switch tabs there and back without navigating. - // Seed the tab state from the router, but keep it independent. - const [tab, setTab] = useState(section); - const [prevSection, setPrevSection] = useState(section); - if (prevSection !== section) { - setPrevSection(section); - setTab(section); - } - if (isOpen) { - switch (tab) { - case 'home': - routeTree = sidebarHome as RouteItem; - break; - case 'learn': - routeTree = sidebarLearn as RouteItem; - break; - case 'apis': - routeTree = sidebarReference as RouteItem; - break; - } - } - // HACK. Fix up the data structures instead. - if ((routeTree as any).routes.length === 1) { - routeTree = (routeTree as any).routes[0]; - } - - // While the overlay is open, disable body scroll. - useEffect(() => { - if (isOpen) { - const preferredScrollParent = scrollParentRef.current!; - disableBodyScroll(preferredScrollParent); - return () => enableBodyScroll(preferredScrollParent); - } else { - return undefined; - } - }, [isOpen]); - - // Close the overlay on any navigation. - useEffect(() => { - setIsOpen(false); - }, [asPath]); - - // Also close the overlay if the window gets resized past mobile layout. - // (This is also important because we don't want to keep the body locked!) - useEffect(() => { - const media = window.matchMedia(`(max-width: 1023px)`); - function closeIfNeeded() { - if (!media.matches) { - setIsOpen(false); - } - } - closeIfNeeded(); - media.addEventListener('change', closeIfNeeded); - return () => { - media.removeEventListener('change', closeIfNeeded); - }; - }, []); - - function handleFeedback() { - clearTimeout(feedbackAutohideRef.current); - setShowFeedback(!showFeedback); - } - - // Hide the Feedback widget on any click outside. - useEffect(() => { - if (!showFeedback) { - return; - } - function handleDocumentClickCapture(e: MouseEvent) { - if (!feedbackPopupRef.current!.contains(e.target as any)) { - e.stopPropagation(); - e.preventDefault(); - setShowFeedback(false); - } - } - document.addEventListener('click', handleDocumentClickCapture, { - capture: true, - }); - return () => - document.removeEventListener('click', handleDocumentClickCapture, { - capture: true, - }); - }, [showFeedback]); - - function selectTab(nextTab: 'learn' | 'apis' | 'home') { - setTab(nextTab); - scrollParentRef.current!.scrollTop = 0; - } - - return ( -
- - - {isOpen && ( -
- selectTab('home')}> - Home - - selectTab('learn')}> - Learn - - selectTab('apis')}> - API - -
- )} - -
- -
-
- ); -} - -function TabButton({ - children, - onClick, - isActive, -}: { - children: any; - onClick: (event: React.MouseEvent) => void; - isActive: boolean; -}) { - const classes = cn( - 'inline-flex items-center w-full border-b-2 justify-center text-base leading-9 px-3 pb-0.5 hover:text-link hover:gray-5', - { - 'text-link dark:text-link-dark dark:border-link-dark border-link font-bold': - isActive, - 'border-transparent': !isActive, - } - ); - return ( - - ); -} diff --git a/beta/src/components/Layout/Nav/NavLink.tsx b/beta/src/components/Layout/Nav/NavLink.tsx deleted file mode 100644 index 3fddc6e16..000000000 --- a/beta/src/components/Layout/Nav/NavLink.tsx +++ /dev/null @@ -1,39 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import {ExternalLink} from 'components/ExternalLink'; -import NextLink from 'next/link'; - -interface NavLinkProps { - href: string; - children: React.ReactNode; - isActive: boolean; -} - -export default function NavLink({href, children, isActive}: NavLinkProps) { - const classes = cn( - { - 'text-link border-link dark:text-link-dark dark:border-link-dark font-bold': - isActive, - }, - {'border-transparent': !isActive}, - 'inline-flex w-full items-center border-b-2 justify-center text-base leading-9 px-3 py-0.5 hover:text-link dark:hover:text-link-dark whitespace-nowrap' - ); - - if (href.startsWith('https://')) { - return ( - - {children} - - ); - } - - return ( - - {children} - - ); -} diff --git a/beta/src/components/Layout/Nav/index.tsx b/beta/src/components/Layout/Nav/index.tsx deleted file mode 100644 index 0f4d0e78e..000000000 --- a/beta/src/components/Layout/Nav/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -export {default as Nav} from './Nav'; diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx deleted file mode 100644 index cdea03b6e..000000000 --- a/beta/src/components/Layout/Page.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {Suspense} from 'react'; -import * as React from 'react'; -import {useRouter} from 'next/router'; -import {Nav} from './Nav'; -import {RouteItem, SidebarContext} from './useRouteMeta'; -import {useActiveSection} from 'hooks/useActiveSection'; -import {Footer} from './Footer'; -import {Toc} from './Toc'; -import SocialBanner from '../SocialBanner'; -import sidebarHome from '../../sidebarHome.json'; -import sidebarLearn from '../../sidebarLearn.json'; -import sidebarReference from '../../sidebarReference.json'; -import type {TocItem} from 'components/MDX/TocContext'; - -interface PageProps { - children: React.ReactNode; - toc: Array; -} - -export function Page({children, toc}: PageProps) { - const {asPath} = useRouter(); - const section = useActiveSection(); - let routeTree = sidebarHome as RouteItem; - switch (section) { - case 'apis': - routeTree = sidebarReference as RouteItem; - break; - case 'learn': - routeTree = sidebarLearn as RouteItem; - break; - } - return ( - <> - - -
-
-
- {/* No fallback UI so need to be careful not to suspend directly inside. */} - -
-
-
- {children} -
-
-
- -
- {toc.length > 0 && } -
-
- - - ); -} diff --git a/beta/src/components/Layout/Sidebar/SidebarButton.tsx b/beta/src/components/Layout/Sidebar/SidebarButton.tsx deleted file mode 100644 index b1276cdb8..000000000 --- a/beta/src/components/Layout/Sidebar/SidebarButton.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import {IconNavArrow} from 'components/Icon/IconNavArrow'; - -interface SidebarButtonProps { - title: string; - heading: boolean; - level: number; - onClick: (event: React.MouseEvent) => void; - isExpanded?: boolean; - isBreadcrumb?: boolean; -} - -export function SidebarButton({ - title, - heading, - level, - onClick, - isExpanded, - isBreadcrumb, -}: SidebarButtonProps) { - return ( -
1, - })}> - -
- ); -} diff --git a/beta/src/components/Layout/Sidebar/SidebarLink.tsx b/beta/src/components/Layout/Sidebar/SidebarLink.tsx deleted file mode 100644 index de5ea8ea7..000000000 --- a/beta/src/components/Layout/Sidebar/SidebarLink.tsx +++ /dev/null @@ -1,100 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -import {useRef, useEffect} from 'react'; -import * as React from 'react'; -import cn from 'classnames'; -import {IconNavArrow} from 'components/Icon/IconNavArrow'; -import Link from 'next/link'; - -interface SidebarLinkProps { - href: string; - selected?: boolean; - title: string; - level: number; - wip: boolean | undefined; - icon?: React.ReactNode; - heading?: boolean; - isExpanded?: boolean; - isBreadcrumb?: boolean; - hideArrow?: boolean; - isPending: boolean; -} - -export function SidebarLink({ - href, - selected = false, - title, - wip, - level, - heading = false, - isExpanded, - isBreadcrumb, - hideArrow, - isPending, -}: SidebarLinkProps) { - const ref = useRef(null); - - useEffect(() => { - if (selected && ref && ref.current) { - // @ts-ignore - if (typeof ref.current.scrollIntoViewIfNeeded === 'function') { - // @ts-ignore - ref.current.scrollIntoViewIfNeeded(); - } - } - }, [ref, selected]); - - let target = ''; - if (href.startsWith('https://')) { - target = '_blank'; - } - return ( - - 0, - 'pl-5': level < 2, - 'text-base font-bold': level === 0, - 'dark:text-primary-dark text-primary ': level === 0 && !selected, - 'text-base text-link dark:text-link-dark': level === 1 && selected, - 'dark:text-primary-dark text-primary': heading, - 'text-base text-secondary dark:text-secondary-dark': - !selected && !heading, - 'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark': - selected, - 'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3': - isPending, - } - )}> - {/* This here needs to be refactored ofc */} - - {title} - - {isExpanded != null && !heading && !hideArrow && ( - - - - )} - - - ); -} diff --git a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx deleted file mode 100644 index 3d27d05d3..000000000 --- a/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ /dev/null @@ -1,162 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {useRef, useLayoutEffect} from 'react'; - -import cn from 'classnames'; -import {RouteItem} from 'components/Layout/useRouteMeta'; -import {useRouter} from 'next/router'; -import {removeFromLast} from 'utils/removeFromLast'; -import {useRouteMeta} from '../useRouteMeta'; -import {SidebarLink} from './SidebarLink'; -import useCollapse from 'react-collapsed'; -import usePendingRoute from 'hooks/usePendingRoute'; - -interface SidebarRouteTreeProps { - isForceExpanded: boolean; - routeTree: RouteItem; - level?: number; -} - -function CollapseWrapper({ - isExpanded, - duration, - children, -}: { - isExpanded: boolean; - duration: number; - children: any; -}) { - const ref = useRef(null); - const timeoutRef = useRef(null); - const {getCollapseProps} = useCollapse({ - isExpanded, - duration, - }); - - // Disable pointer events while animating. - const isExpandedRef = useRef(isExpanded); - if (typeof window !== 'undefined') { - // eslint-disable-next-line react-hooks/rules-of-hooks - useLayoutEffect(() => { - const wasExpanded = isExpandedRef.current; - if (wasExpanded === isExpanded) { - return; - } - isExpandedRef.current = isExpanded; - if (ref.current !== null) { - const node: HTMLDivElement = ref.current; - node.style.pointerEvents = 'none'; - if (timeoutRef.current !== null) { - window.clearTimeout(timeoutRef.current); - } - timeoutRef.current = window.setTimeout(() => { - node.style.pointerEvents = ''; - }, duration + 100); - } - }); - } - - return ( -
-
{children}
-
- ); -} - -export function SidebarRouteTree({ - isForceExpanded, - routeTree, - level = 0, -}: SidebarRouteTreeProps) { - const {breadcrumbs} = useRouteMeta(routeTree); - const cleanedPath = useRouter().asPath.split(/[\?\#]/)[0]; - const pendingRoute = usePendingRoute(); - - const slug = cleanedPath; - const currentRoutes = routeTree.routes as RouteItem[]; - const expandedPath = currentRoutes.reduce( - (acc: string | undefined, curr: RouteItem) => { - if (acc) return acc; - const breadcrumb = breadcrumbs.find((b) => b.path === curr.path); - if (breadcrumb) { - return curr.path; - } - if (curr.path === cleanedPath) { - return cleanedPath; - } - return undefined; - }, - undefined - ); - - const expanded = expandedPath; - return ( -
    - {currentRoutes.map(({path, title, routes, wip, heading}) => { - const pagePath = path && removeFromLast(path, '.'); - const selected = slug === pagePath; - - // if current route item has no path and children treat it as an API sidebar heading - if (!path || !pagePath || heading) { - return ( - - ); - } - - // if route has a path and child routes, treat it as an expandable sidebar item - if (routes) { - const isExpanded = isForceExpanded || expanded === path; - return ( -
  • - - - - -
    • - ); - } - - // if route has a path and no child routes, treat it as a sidebar link - return ( -
  • - -
    • - ); - })} -
- ); -} diff --git a/beta/src/components/Layout/Sidebar/index.tsx b/beta/src/components/Layout/Sidebar/index.tsx deleted file mode 100644 index d0e291547..000000000 --- a/beta/src/components/Layout/Sidebar/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -export {SidebarButton} from './SidebarButton'; -export {SidebarLink} from './SidebarLink'; -export {SidebarRouteTree} from './SidebarRouteTree'; diff --git a/beta/src/components/Layout/Toc.tsx b/beta/src/components/Layout/Toc.tsx deleted file mode 100644 index 2ff779534..000000000 --- a/beta/src/components/Layout/Toc.tsx +++ /dev/null @@ -1,60 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import cx from 'classnames'; -import {useTocHighlight} from './useTocHighlight'; -import type {Toc} from '../MDX/TocContext'; - -export function Toc({headings}: {headings: Toc}) { - const {currentIndex} = useTocHighlight(); - // TODO: We currently have a mismatch between the headings in the document - // and the headings we find in MarkdownPage (i.e. we don't find Recap or Challenges). - // Select the max TOC item we have here for now, but remove this after the fix. - const selectedIndex = Math.min(currentIndex, headings.length - 1); - return ( - - ); -} diff --git a/beta/src/components/Layout/useRouteMeta.tsx b/beta/src/components/Layout/useRouteMeta.tsx deleted file mode 100644 index d333a1e6b..000000000 --- a/beta/src/components/Layout/useRouteMeta.tsx +++ /dev/null @@ -1,131 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {useContext, createContext} from 'react'; -import {useRouter} from 'next/router'; - -/** - * While Next.js provides file-based routing, we still need to construct - * a sidebar for navigation and provide each markdown page - * previous/next links and titles. To do this, we construct a nested - * route object that is infinitely nestable. - */ - -export type RouteTag = - | 'foundation' - | 'intermediate' - | 'advanced' - | 'experimental' - | 'deprecated'; - -export interface RouteItem { - /** Page title (for the sidebar) */ - title: string; - /** Optional page description for heading */ - description?: string; - /* Additional meta info for page tagging */ - tags?: RouteTag[]; - /** Path to page */ - path?: string; - /** Whether the entry is a heading */ - heading?: boolean; - /** Whether the page is under construction */ - wip?: boolean; - /** List of sub-routes */ - routes?: RouteItem[]; -} - -export interface Routes { - /** List of routes */ - routes: RouteItem[]; -} - -/** Routing metadata about a given route and it's siblings and parent */ -export interface RouteMeta { - /** The previous route */ - prevRoute?: RouteItem; - /** The next route */ - nextRoute?: RouteItem; - /** The current route */ - route?: RouteItem; - /** Trail of parent routes */ - breadcrumbs?: RouteItem[]; -} - -export function useRouteMeta(rootRoute?: RouteItem) { - const sidebarContext = useContext(SidebarContext); - const routeTree = rootRoute || sidebarContext; - const router = useRouter(); - if (router.pathname === '/404') { - return { - breadcrumbs: [], - }; - } - const cleanedPath = router.asPath.split(/[\?\#]/)[0]; - const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree); - return { - ...getRouteMeta(cleanedPath, routeTree), - breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree], - }; -} - -export const SidebarContext = createContext({title: 'root'}); - -// Performs a depth-first search to find the current route and its previous/next route -function getRouteMeta( - searchPath: string, - currentRoute: RouteItem, - ctx: RouteMeta = {} -): RouteMeta { - const {routes} = currentRoute; - - if (ctx.route && !ctx.nextRoute) { - ctx.nextRoute = currentRoute; - } - - if (currentRoute.path === searchPath) { - ctx.route = currentRoute; - } - - if (!ctx.route) { - ctx.prevRoute = currentRoute; - } - - if (!routes) { - return ctx; - } - - for (const route of routes) { - getRouteMeta(searchPath, route, ctx); - } - - return ctx; -} - -// iterates the route tree from the current route to find its ancestors for breadcrumbs -function getBreadcrumbs( - path: string, - currentRoute: RouteItem, - breadcrumbs: RouteItem[] = [] -): RouteItem[] { - if (currentRoute.path === path) { - return breadcrumbs; - } - - if (!currentRoute.routes) { - return []; - } - - for (const route of currentRoute.routes) { - const childRoute = getBreadcrumbs(path, route, [ - ...breadcrumbs, - currentRoute, - ]); - if (childRoute?.length) { - return childRoute; - } - } - - return []; -} diff --git a/beta/src/components/Layout/useTocHighlight.tsx b/beta/src/components/Layout/useTocHighlight.tsx deleted file mode 100644 index b0879a143..000000000 --- a/beta/src/components/Layout/useTocHighlight.tsx +++ /dev/null @@ -1,82 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {useState, useRef, useEffect} from 'react'; - -const TOP_OFFSET = 75; - -export function getHeaderAnchors(): HTMLAnchorElement[] { - return Array.prototype.filter.call( - document.getElementsByClassName('mdx-header-anchor'), - function (testElement) { - return ( - testElement.parentNode.nodeName === 'H1' || - testElement.parentNode.nodeName === 'H2' || - testElement.parentNode.nodeName === 'H3' - ); - } - ); -} - -/** - * Sets up Table of Contents highlighting. - */ -export function useTocHighlight() { - const [currentIndex, setCurrentIndex] = useState(0); - const timeoutRef = useRef(null); - - useEffect(() => { - function updateActiveLink() { - const pageHeight = document.body.scrollHeight; - const scrollPosition = window.scrollY + window.innerHeight; - const headersAnchors = getHeaderAnchors(); - - if (scrollPosition >= 0 && pageHeight - scrollPosition <= TOP_OFFSET) { - // Scrolled to bottom of page. - setCurrentIndex(headersAnchors.length - 1); - return; - } - - let index = -1; - while (index < headersAnchors.length - 1) { - const headerAnchor = headersAnchors[index + 1]; - const {top} = headerAnchor.getBoundingClientRect(); - - if (top >= TOP_OFFSET) { - break; - } - index += 1; - } - - setCurrentIndex(Math.max(index, 0)); - } - - function throttledUpdateActiveLink() { - if (timeoutRef.current === null) { - timeoutRef.current = window.setTimeout(() => { - timeoutRef.current = null; - updateActiveLink(); - }, 100); - } - } - - document.addEventListener('scroll', throttledUpdateActiveLink); - document.addEventListener('resize', throttledUpdateActiveLink); - - updateActiveLink(); - - return () => { - if (timeoutRef.current != null) { - clearTimeout(timeoutRef.current); - timeoutRef.current = null; - } - document.removeEventListener('scroll', throttledUpdateActiveLink); - document.removeEventListener('resize', throttledUpdateActiveLink); - }; - }, []); - - return { - currentIndex, - }; -} diff --git a/beta/src/components/Logo.tsx b/beta/src/components/Logo.tsx deleted file mode 100644 index 67469c0ed..000000000 --- a/beta/src/components/Logo.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -export function Logo(props: JSX.IntrinsicElements['svg']) { - return ( - - - - - ); -} diff --git a/beta/src/components/MDX/Challenges/Challenge.tsx b/beta/src/components/MDX/Challenges/Challenge.tsx deleted file mode 100644 index 82b3535ce..000000000 --- a/beta/src/components/MDX/Challenges/Challenge.tsx +++ /dev/null @@ -1,130 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {useState} from 'react'; -import cn from 'classnames'; -import {Button} from 'components/Button'; -import {ChallengeContents} from './Challenges'; -import {IconHint} from '../../Icon/IconHint'; -import {IconSolution} from '../../Icon/IconSolution'; -import {IconArrowSmall} from '../../Icon/IconArrowSmall'; - -interface ChallengeProps { - isRecipes?: boolean; - totalChallenges: number; - currentChallenge: ChallengeContents; - hasNextChallenge: boolean; - handleClickNextChallenge: () => void; -} - -export function Challenge({ - isRecipes, - totalChallenges, - currentChallenge, - hasNextChallenge, - handleClickNextChallenge, -}: ChallengeProps) { - const [showHint, setShowHint] = useState(false); - const [showSolution, setShowSolution] = useState(false); - - const toggleHint = () => { - if (showSolution && !showHint) { - setShowSolution(false); - } - setShowHint((hint) => !hint); - }; - - const toggleSolution = () => { - if (showHint && !showSolution) { - setShowHint(false); - } - setShowSolution((solution) => !solution); - }; - - return ( -
-
-

-
- {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order} of{' '} - {totalChallenges} - : -
- {currentChallenge.name} -

- {currentChallenge.content} -
-
- {currentChallenge.hint ? ( -
- - -
- ) : ( - !isRecipes && ( - - ) - )} - - {hasNextChallenge && ( - - )} -
- {showHint && currentChallenge.hint} - - {showSolution && ( -
-

- Solution -

- {currentChallenge.solution} -
- - {hasNextChallenge && ( - - )} -
-
- )} -
- ); -} diff --git a/beta/src/components/MDX/Challenges/Challenges.tsx b/beta/src/components/MDX/Challenges/Challenges.tsx deleted file mode 100644 index 70df4228b..000000000 --- a/beta/src/components/MDX/Challenges/Challenges.tsx +++ /dev/null @@ -1,138 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {Children, useRef, useEffect, useState} from 'react'; -import * as React from 'react'; -import cn from 'classnames'; -import {H2} from 'components/MDX/Heading'; -import {H4} from 'components/MDX/Heading'; -import {Challenge} from './Challenge'; -import {Navigation} from './Navigation'; - -interface ChallengesProps { - children: React.ReactElement[]; - isRecipes?: boolean; - titleText?: string; - titleId?: string; -} - -export interface ChallengeContents { - id: string; - name: string; - order: number; - content: React.ReactNode; - solution: React.ReactNode; - hint?: React.ReactNode; -} - -const parseChallengeContents = ( - children: React.ReactElement[] -): ChallengeContents[] => { - const contents: ChallengeContents[] = []; - - if (!children) { - return contents; - } - - let challenge: Partial = {}; - let content: React.ReactElement[] = []; - Children.forEach(children, (child) => { - const {props, type} = child; - switch ((type as any).mdxName) { - case 'Solution': { - challenge.solution = child; - challenge.content = content; - contents.push(challenge as ChallengeContents); - challenge = {}; - content = []; - break; - } - case 'Hint': { - challenge.hint = child; - break; - } - case 'h4': { - challenge.order = contents.length + 1; - challenge.name = props.children; - challenge.id = props.id; - break; - } - default: { - content.push(child); - } - } - }); - - return contents; -}; - -export function Challenges({ - children, - isRecipes, - titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges', - titleId = isRecipes ? 'examples' : 'challenges', -}: ChallengesProps) { - const challenges = parseChallengeContents(children); - const totalChallenges = challenges.length; - const scrollAnchorRef = useRef(null); - const queuedScrollRef = useRef(false); - const [activeIndex, setActiveIndex] = useState(0); - const currentChallenge = challenges[activeIndex]; - - useEffect(() => { - if (queuedScrollRef.current === true) { - queuedScrollRef.current = false; - scrollAnchorRef.current!.scrollIntoView({ - block: 'start', - behavior: 'smooth', - }); - } - }); - - const handleChallengeChange = (index: number) => { - setActiveIndex(index); - }; - - const Heading = isRecipes ? H4 : H2; - return ( -
-
-
- - {titleText} - - {totalChallenges > 1 && ( - - )} -
- { - setActiveIndex((i) => i + 1); - queuedScrollRef.current = true; - }} - /> -
-
- ); -} diff --git a/beta/src/components/MDX/Challenges/Navigation.tsx b/beta/src/components/MDX/Challenges/Navigation.tsx deleted file mode 100644 index 51cf5cb52..000000000 --- a/beta/src/components/MDX/Challenges/Navigation.tsx +++ /dev/null @@ -1,133 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {useRef, useCallback, useEffect, createRef} from 'react'; -import cn from 'classnames'; -import {IconChevron} from 'components/Icon/IconChevron'; -import {ChallengeContents} from './Challenges'; -import {debounce} from 'debounce'; - -export function Navigation({ - challenges, - handleChange, - currentChallenge, - isRecipes, -}: { - challenges: ChallengeContents[]; - handleChange: (index: number) => void; - currentChallenge: ChallengeContents; - isRecipes?: boolean; -}) { - const containerRef = useRef(null); - const challengesNavRef = useRef( - challenges.map(() => createRef()) - ); - const scrollPos = currentChallenge.order - 1; - const canScrollLeft = scrollPos > 0; - const canScrollRight = scrollPos < challenges.length - 1; - - const handleScrollRight = () => { - if (scrollPos < challenges.length - 1) { - const currentNavRef = challengesNavRef.current[scrollPos + 1].current; - if (!currentNavRef) { - return; - } - if (containerRef.current) { - containerRef.current.scrollLeft = currentNavRef.offsetLeft; - } - handleChange(scrollPos + 1); - } - }; - - const handleScrollLeft = () => { - if (scrollPos > 0) { - const currentNavRef = challengesNavRef.current[scrollPos - 1].current; - if (!currentNavRef) { - return; - } - if (containerRef.current) { - containerRef.current.scrollLeft = currentNavRef.offsetLeft; - } - handleChange(scrollPos - 1); - } - }; - - const handleSelectNav = (index: number) => { - const currentNavRef = challengesNavRef.current[index].current; - if (containerRef.current) { - containerRef.current.scrollLeft = currentNavRef?.offsetLeft || 0; - } - handleChange(index); - }; - - const handleResize = useCallback(() => { - if (containerRef.current) { - const el = containerRef.current; - el.scrollLeft = - challengesNavRef.current[scrollPos].current?.offsetLeft || 0; - } - }, [containerRef, challengesNavRef, scrollPos]); - - useEffect(() => { - handleResize(); - window.addEventListener('resize', debounce(handleResize, 200)); - return () => { - window.removeEventListener('resize', handleResize); - }; - }, [handleResize]); - - return ( -
-
-
- {challenges.map(({name, id, order}, index) => ( - - ))} -
-
-
- - -
-
- ); -} diff --git a/beta/src/components/MDX/Challenges/index.tsx b/beta/src/components/MDX/Challenges/index.tsx deleted file mode 100644 index 413fd4611..000000000 --- a/beta/src/components/MDX/Challenges/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -export {Challenges} from './Challenges'; - -export function Hint({children}: {children: React.ReactNode}) { - return
{children}
; -} - -export function Solution({children}: {children: React.ReactNode}) { - return
{children}
; -} diff --git a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx deleted file mode 100644 index 32d2054fc..000000000 --- a/beta/src/components/MDX/CodeBlock/CodeBlock.tsx +++ /dev/null @@ -1,389 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import cn from 'classnames'; -import {highlightTree} from '@codemirror/highlight'; -import {javascript} from '@codemirror/lang-javascript'; -import {html} from '@codemirror/lang-html'; -import {css} from '@codemirror/lang-css'; -import {HighlightStyle, tags} from '@codemirror/highlight'; -import rangeParser from 'parse-numeric-range'; -import {CustomTheme} from '../Sandpack/Themes'; - -interface InlineHiglight { - step: number; - line: number; - startColumn: number; - endColumn: number; -} - -const jsxLang = javascript({jsx: true, typescript: false}); -const cssLang = css(); -const htmlLang = html(); - -const CodeBlock = function CodeBlock({ - children: { - props: {className = 'language-js', children: code = '', meta}, - }, - noMargin, -}: { - children: React.ReactNode & { - props: { - className: string; - children?: string; - meta?: string; - }; - }; - className?: string; - noMargin?: boolean; -}) { - code = code.trimEnd(); - let lang = jsxLang; - if (className === 'language-css') { - lang = cssLang; - } else if (className === 'language-html') { - lang = htmlLang; - } - const tree = lang.language.parser.parse(code); - let tokenStarts = new Map(); - let tokenEnds = new Map(); - const highlightTheme = getSyntaxHighlight(CustomTheme); - highlightTree(tree, highlightTheme.match, (from, to, className) => { - tokenStarts.set(from, className); - tokenEnds.set(to, className); - }); - - const highlightedLines = new Map(); - const lines = code.split('\n'); - const lineDecorators = getLineDecorators(code, meta); - for (let decorator of lineDecorators) { - highlightedLines.set(decorator.line - 1, decorator.className); - } - - const inlineDecorators = getInlineDecorators(code, meta); - const decoratorStarts = new Map(); - const decoratorEnds = new Map(); - for (let decorator of inlineDecorators) { - // Find where inline highlight starts and ends. - let decoratorStart = 0; - for (let i = 0; i < decorator.line - 1; i++) { - decoratorStart += lines[i].length + 1; - } - decoratorStart += decorator.startColumn; - const decoratorEnd = - decoratorStart + (decorator.endColumn - decorator.startColumn); - if (decoratorStarts.has(decoratorStart)) { - throw Error('Already opened decorator at ' + decoratorStart); - } - decoratorStarts.set(decoratorStart, decorator.className); - if (decoratorEnds.has(decoratorEnd)) { - throw Error('Already closed decorator at ' + decoratorEnd); - } - decoratorEnds.set(decoratorEnd, decorator.className); - } - - // Produce output based on tokens and decorators. - // We assume tokens never overlap other tokens, and - // decorators never overlap with other decorators. - // However, tokens and decorators may mutually overlap. - // In that case, decorators always take precedence. - let currentDecorator = null; - let currentToken = null; - let buffer = ''; - let lineIndex = 0; - let lineOutput = []; - let finalOutput = []; - for (let i = 0; i < code.length; i++) { - if (tokenEnds.has(i)) { - if (!currentToken) { - throw Error('Cannot close token at ' + i + ' because it was not open.'); - } - if (!currentDecorator) { - lineOutput.push( - - {buffer} - - ); - buffer = ''; - } - currentToken = null; - } - if (decoratorEnds.has(i)) { - if (!currentDecorator) { - throw Error( - 'Cannot close decorator at ' + i + ' because it was not open.' - ); - } - lineOutput.push( - - {buffer} - - ); - buffer = ''; - currentDecorator = null; - } - if (decoratorStarts.has(i)) { - if (currentDecorator) { - throw Error( - 'Cannot open decorator at ' + i + ' before closing last one.' - ); - } - if (currentToken) { - lineOutput.push( - - {buffer} - - ); - buffer = ''; - } else { - lineOutput.push(buffer); - buffer = ''; - } - currentDecorator = decoratorStarts.get(i); - } - if (tokenStarts.has(i)) { - if (currentToken) { - throw Error('Cannot open token at ' + i + ' before closing last one.'); - } - currentToken = tokenStarts.get(i); - if (!currentDecorator) { - lineOutput.push(buffer); - buffer = ''; - } - } - if (code[i] === '\n') { - lineOutput.push(buffer); - buffer = ''; - finalOutput.push( -
- {lineOutput} -
-
- ); - lineOutput = []; - lineIndex++; - } else { - buffer += code[i]; - } - } - if (currentDecorator) { - lineOutput.push( - - {buffer} - - ); - } else if (currentToken) { - lineOutput.push( - - {buffer} - - ); - } else { - lineOutput.push(buffer); - } - finalOutput.push( -
- {lineOutput} -
- ); - - return ( -
-
-
-
- 
-              {finalOutput}
-
-
-
-
-
- ); -}; - -export default CodeBlock; - -function classNameToken(name: string): string { - return `sp-syntax-${name}`; -} - -function getSyntaxHighlight(theme: any): HighlightStyle { - return HighlightStyle.define([ - {tag: tags.link, textdecorator: 'underline'}, - {tag: tags.emphasis, fontStyle: 'italic'}, - {tag: tags.strong, fontWeight: 'bold'}, - - { - tag: tags.keyword, - class: classNameToken('keyword'), - }, - { - tag: [tags.atom, tags.number, tags.bool], - class: classNameToken('static'), - }, - { - tag: tags.tagName, - class: classNameToken('tag'), - }, - {tag: tags.variableName, class: classNameToken('plain')}, - { - // Highlight function call - tag: tags.function(tags.variableName), - class: classNameToken('definition'), - }, - { - // Highlight function definition differently (eg: functional component def in React) - tag: tags.definition(tags.function(tags.variableName)), - class: classNameToken('definition'), - }, - { - tag: tags.propertyName, - class: classNameToken('property'), - }, - { - tag: [tags.literal, tags.inserted], - class: classNameToken(theme.syntax.string ? 'string' : 'static'), - }, - { - tag: tags.punctuation, - class: classNameToken('punctuation'), - }, - { - tag: [tags.comment, tags.quote], - class: classNameToken('comment'), - }, - ]); -} - -function getLineDecorators( - code: string, - meta: string -): Array<{ - line: number; - className: string; -}> { - if (!meta) { - return []; - } - const linesToHighlight = getHighlightLines(meta); - const highlightedLineConfig = linesToHighlight.map((line) => { - return { - className: 'bg-github-highlight dark:bg-opacity-10', - line, - }; - }); - return highlightedLineConfig; -} - -function getInlineDecorators( - code: string, - meta: string -): Array<{ - step: number; - line: number; - startColumn: number; - endColumn: number; - className: string; -}> { - if (!meta) { - return []; - } - const inlineHighlightLines = getInlineHighlights(meta, code); - const inlineHighlightConfig = inlineHighlightLines.map( - (line: InlineHiglight) => ({ - ...line, - elementAttributes: {'data-step': `${line.step}`}, - className: cn( - 'code-step bg-opacity-10 dark:bg-opacity-20 relative rounded px-1 py-[1.5px] border-b-[2px] border-opacity-60', - { - 'bg-blue-40 border-blue-40 text-blue-60 dark:text-blue-30': - line.step === 1, - 'bg-yellow-40 border-yellow-40 text-yellow-60 dark:text-yellow-30': - line.step === 2, - 'bg-purple-40 border-purple-40 text-purple-60 dark:text-purple-30': - line.step === 3, - 'bg-green-40 border-green-40 text-green-60 dark:text-green-30': - line.step === 4, - } - ), - }) - ); - return inlineHighlightConfig; -} - -/** - * - * @param meta string provided after the language in a markdown block - * @returns array of lines to highlight - * @example - * ```js {1-3,7} [[1, 1, 20, 33], [2, 4, 4, 8]] App.js active - * ... - * ``` - * - * -> The meta is `{1-3,7} [[1, 1, 20, 33], [2, 4, 4, 8]] App.js active` - */ -function getHighlightLines(meta: string): number[] { - const HIGHLIGHT_REGEX = /{([\d,-]+)}/; - const parsedMeta = HIGHLIGHT_REGEX.exec(meta); - if (!parsedMeta) { - return []; - } - return rangeParser(parsedMeta[1]); -} - -/** - * - * @param meta string provided after the language in a markdown block - * @returns InlineHighlight[] - * @example - * ```js {1-3,7} [[1, 1, 'count'], [2, 4, 'setCount']] App.js active - * ... - * ``` - * - * -> The meta is `{1-3,7} [[1, 1, 'count', [2, 4, 'setCount']] App.js active` - */ -function getInlineHighlights(meta: string, code: string) { - const INLINE_HIGHT_REGEX = /(\[\[.*\]\])/; - const parsedMeta = INLINE_HIGHT_REGEX.exec(meta); - if (!parsedMeta) { - return []; - } - - const lines = code.split('\n'); - const encodedHiglights = JSON.parse(parsedMeta[1]); - return encodedHiglights.map(([step, lineNo, substr, fromIndex]: any[]) => { - const line = lines[lineNo - 1]; - let index = line.indexOf(substr); - const lastIndex = line.lastIndexOf(substr); - if (index !== lastIndex) { - if (fromIndex === undefined) { - throw Error( - "Found '" + - substr + - "' twice. Specify fromIndex as the fourth value in the tuple." - ); - } - index = line.indexOf(substr, fromIndex); - } - if (index === -1) { - throw Error("Could not find: '" + substr + "'"); - } - return { - step, - line: lineNo, - startColumn: index, - endColumn: index + substr.length, - }; - }); -} diff --git a/beta/src/components/MDX/CodeBlock/index.tsx b/beta/src/components/MDX/CodeBlock/index.tsx deleted file mode 100644 index e449e6b9e..000000000 --- a/beta/src/components/MDX/CodeBlock/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import {lazy, memo, Suspense} from 'react'; -const CodeBlock = lazy(() => import('./CodeBlock')); - -export default memo(function CodeBlockWrapper(props: { - children: React.ReactNode & { - props: { - className: string; - children: string; - meta?: string; - }; - }; - isFromPackageImport: boolean; - noMargin?: boolean; - noMarkers?: boolean; -}): any { - const {children, isFromPackageImport} = props; - return ( - -
-

{children}

-
- - }> - - - ); -}); diff --git a/beta/src/components/MDX/CodeDiagram.tsx b/beta/src/components/MDX/CodeDiagram.tsx deleted file mode 100644 index 7a503f068..000000000 --- a/beta/src/components/MDX/CodeDiagram.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {Children} from 'react'; -import * as React from 'react'; -import CodeBlock from './CodeBlock'; - -interface CodeDiagramProps { - children: React.ReactNode; - flip?: boolean; -} - -export function CodeDiagram({children, flip = false}: CodeDiagramProps) { - const illustration = Children.toArray(children).filter((child: any) => { - return child.type === 'img'; - }); - const content = Children.toArray(children).map((child: any) => { - if (child.type?.mdxName === 'pre') { - return ; - } else if (child.type === 'img') { - return null; - } else { - return child; - } - }); - if (flip) { - return ( -
- {illustration} -
{content}
-
- ); - } - return ( -
-
{content}
-
{illustration}
-
- ); -} diff --git a/beta/src/components/MDX/ConsoleBlock.tsx b/beta/src/components/MDX/ConsoleBlock.tsx deleted file mode 100644 index 8322468f6..000000000 --- a/beta/src/components/MDX/ConsoleBlock.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {isValidElement} from 'react'; -import * as React from 'react'; -import cn from 'classnames'; -import {IconWarning} from '../Icon/IconWarning'; -import {IconError} from '../Icon/IconError'; - -type LogLevel = 'warning' | 'error' | 'info'; - -interface ConsoleBlockProps { - level?: LogLevel; - children: React.ReactNode; -} - -const Box = ({ - width = '60px', - height = '17px', - className, - customStyles, -}: { - width?: string; - height?: string; - className?: string; - customStyles?: Record; -}) => ( -
-); - -function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) { - let message: React.ReactNode | null; - if (typeof children === 'string') { - message = children; - } else if (isValidElement(children)) { - message = children.props.children; - } - - return ( -
-
-
- -
-
-
- Console -
-
- - - -
-
-
-
- {level === 'error' && } - {level === 'warning' && } -
{message}
-
-
- ); -} - -export default ConsoleBlock; diff --git a/beta/src/components/MDX/Diagram.tsx b/beta/src/components/MDX/Diagram.tsx deleted file mode 100644 index 7920661da..000000000 --- a/beta/src/components/MDX/Diagram.tsx +++ /dev/null @@ -1,60 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import Image from 'next/image'; - -interface DiagramProps { - name: string; - alt: string; - height: number; - width: number; - children: string; - captionPosition: 'top' | 'bottom' | null; -} - -function Caption({text}: {text: string}) { - return ( -
-
- {text} -
-
- ); -} - -export function Diagram({ - name, - alt, - height, - width, - children, - captionPosition, -}: DiagramProps) { - return ( -
- {captionPosition === 'top' && } -
- {alt} -
-
- {alt} -
- {(!captionPosition || captionPosition === 'bottom') && ( - - )} -
- ); -} - -export default Diagram; diff --git a/beta/src/components/MDX/DiagramGroup.tsx b/beta/src/components/MDX/DiagramGroup.tsx deleted file mode 100644 index 6c5130a3d..000000000 --- a/beta/src/components/MDX/DiagramGroup.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {ReactNode} from 'react'; - -interface DiagramGroupProps { - children: ReactNode; -} - -export function DiagramGroup({children}: DiagramGroupProps) { - return ( -
- {children} -
- ); -} - -export default DiagramGroup; diff --git a/beta/src/components/MDX/ExpandableCallout.tsx b/beta/src/components/MDX/ExpandableCallout.tsx deleted file mode 100644 index 216f45427..000000000 --- a/beta/src/components/MDX/ExpandableCallout.tsx +++ /dev/null @@ -1,76 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {useRef} from 'react'; -import * as React from 'react'; -import cn from 'classnames'; -import {IconNote} from '../Icon/IconNote'; -import {IconGotcha} from '../Icon/IconGotcha'; - -type CalloutVariants = 'gotcha' | 'note' | 'wip'; - -interface ExpandableCalloutProps { - children: React.ReactNode; - type: CalloutVariants; -} - -const variantMap = { - note: { - title: 'Note', - Icon: IconNote, - containerClasses: - 'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg', - textColor: 'text-green-60 dark:text-green-40', - overlayGradient: - 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)', - }, - gotcha: { - title: 'Pitfall', - Icon: IconGotcha, - containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20', - textColor: 'text-yellow-50 dark:text-yellow-40', - overlayGradient: - 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', - }, - wip: { - title: 'Under Construction', - Icon: IconNote, - containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20', - textColor: 'text-yellow-50 dark:text-yellow-40', - overlayGradient: - 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', - }, -}; - -function ExpandableCallout({children, type}: ExpandableCalloutProps) { - const contentRef = useRef(null); - const variant = variantMap[type]; - - return ( -
-

- - {variant.title} -

-
-
- {children} -
-
-
- ); -} - -ExpandableCallout.defaultProps = { - type: 'note', -}; - -export default ExpandableCallout; diff --git a/beta/src/components/MDX/ExpandableExample.tsx b/beta/src/components/MDX/ExpandableExample.tsx deleted file mode 100644 index 435f91426..000000000 --- a/beta/src/components/MDX/ExpandableExample.tsx +++ /dev/null @@ -1,96 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import cn from 'classnames'; -import {IconChevron} from '../Icon/IconChevron'; -import {IconDeepDive} from '../Icon/IconDeepDive'; -import {IconCodeBlock} from '../Icon/IconCodeBlock'; -import {Button} from '../Button'; - -interface ExpandableExampleProps { - children: React.ReactNode; - title: string; - excerpt?: string; - type: 'DeepDive' | 'Example'; -} - -function ExpandableExample({ - children, - title, - excerpt, - type, -}: ExpandableExampleProps) { - const [isExpanded, setIsExpanded] = React.useState(false); - const isDeepDive = type === 'DeepDive'; - const isExample = type === 'Example'; - - return ( -
{ - setIsExpanded(e.currentTarget!.open); - }} - className={cn('my-12 rounded-lg shadow-inner relative', { - 'dark:bg-opacity-20 dark:bg-purple-60 bg-purple-5': isDeepDive, - 'dark:bg-opacity-20 dark:bg-yellow-60 bg-yellow-5': isExample, - })}> - { - // We toggle using a button instead of this whole area. - e.preventDefault(); - }}> -
- {isDeepDive && ( - <> - - Deep Dive - - )} - {isExample && ( - <> - - Example - - )} -
-
-

- {title} -

- {excerpt &&
{excerpt}
} -
- - -
- {children} -
-
- ); -} - -export default ExpandableExample; diff --git a/beta/src/components/MDX/Heading.tsx b/beta/src/components/MDX/Heading.tsx deleted file mode 100644 index 58fed55fe..000000000 --- a/beta/src/components/MDX/Heading.tsx +++ /dev/null @@ -1,90 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import cn from 'classnames'; -import * as React from 'react'; -import {forwardRefWithAs} from 'utils/forwardRefWithAs'; -export interface HeadingProps { - className?: string; - isPageAnchor?: boolean; - children: React.ReactNode; - id?: string; - as?: any; -} - -const Heading = forwardRefWithAs(function Heading( - {as: Comp = 'div', className, children, id, isPageAnchor = true, ...props}, - ref -) { - let label = 'Link for this heading'; - if (typeof children === 'string') { - label = 'Link for ' + children; - } - - return ( - - {children} - {isPageAnchor && ( - - - - - - - - - )} - - ); -}); - -export const H1 = ({className, ...props}: HeadingProps) => ( - -); - -export const H2 = ({className, ...props}: HeadingProps) => ( - -); - -export const H3 = ({className, ...props}: HeadingProps) => ( - -); - -export const H4 = ({className, ...props}: HeadingProps) => ( - -); diff --git a/beta/src/components/MDX/HomepageHero.tsx b/beta/src/components/MDX/HomepageHero.tsx deleted file mode 100644 index 4cfdecdd9..000000000 --- a/beta/src/components/MDX/HomepageHero.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {Logo} from 'components/Logo'; -import YouWillLearnCard from 'components/MDX/YouWillLearnCard'; - -function HomepageHero() { - return ( - <> -
- -
-

- React Docs -

-
- Beta -
-
-
-
-
- -

- Learn how to think in React with step-by-step explanations and - interactive examples. -

- -
-
- -

- Look up the API of React Hooks, and see their shape with - color-coded signatures. -

- -
-
- - ); -} - -export default HomepageHero; diff --git a/beta/src/components/MDX/InlineCode.tsx b/beta/src/components/MDX/InlineCode.tsx deleted file mode 100644 index 4a87c2a53..000000000 --- a/beta/src/components/MDX/InlineCode.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import cn from 'classnames'; - -interface InlineCodeProps { - isLink: boolean; -} -function InlineCode({ - isLink, - ...props -}: JSX.IntrinsicElements['code'] & InlineCodeProps) { - return ( - - ); -} - -export default InlineCode; diff --git a/beta/src/components/MDX/Intro.tsx b/beta/src/components/MDX/Intro.tsx deleted file mode 100644 index 6acde04d6..000000000 --- a/beta/src/components/MDX/Intro.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; - -export interface IntroProps { - children?: React.ReactNode; -} - -function Intro({children}: IntroProps) { - return ( -
- {children} -
- ); -} - -export default Intro; diff --git a/beta/src/components/MDX/Link.tsx b/beta/src/components/MDX/Link.tsx deleted file mode 100644 index b05ba47b5..000000000 --- a/beta/src/components/MDX/Link.tsx +++ /dev/null @@ -1,55 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {Children, cloneElement} from 'react'; -import NextLink from 'next/link'; -import cn from 'classnames'; - -import {ExternalLink} from 'components/ExternalLink'; - -function Link({ - href, - className, - children, - ...props -}: JSX.IntrinsicElements['a']) { - const classes = - 'inline text-link dark:text-link-dark break-normal border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal'; - const modifiedChildren = Children.toArray(children).map((child: any) => { - if (child.type?.mdxName && child.type?.mdxName === 'inlineCode') { - return cloneElement(child, { - isLink: true, - }); - } - return child; - }); - - if (!href) { - // eslint-disable-next-line jsx-a11y/anchor-has-content - return ; - } - return ( - <> - {href.startsWith('https://') ? ( - - {modifiedChildren} - - ) : href.startsWith('#') ? ( - // eslint-disable-next-line jsx-a11y/anchor-has-content - - {modifiedChildren} - - ) : ( - - {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} - - {modifiedChildren} - - - )} - - ); -} - -export default Link; diff --git a/beta/src/components/MDX/MDXComponents.module.css b/beta/src/components/MDX/MDXComponents.module.css deleted file mode 100644 index 9840e77ce..000000000 --- a/beta/src/components/MDX/MDXComponents.module.css +++ /dev/null @@ -1,43 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -/* Stop purging. */ -.markdown p { - @apply mb-4 leading-7 whitespace-pre-wrap text-gray-70; -} - -.markdown ol { - @apply mb-4 ml-8 list-decimal; -} - -.markdown ul { - @apply mb-4 ml-8 list-disc; -} - -.markdown h1 { - @apply mb-6 text-4xl font-extrabold tracking-tight; -} - -.markdown h2 { - @apply mt-12 mb-4 text-3xl font-extrabold tracking-tight; -} -.markdown h3 { - @apply mt-8 mb-3 text-2xl font-extrabold tracking-tight; -} -.markdown h4 { - @apply mt-8 mb-3 text-xl font-extrabold tracking-tight; -} - -.markdown code { - @apply text-gray-70 bg-card dark:bg-card-dark p-1 rounded-lg no-underline; - font-size: 90%; -} - -.markdown li { - @apply mb-2; -} - -.markdown a { - @apply inline text-link dark:text-link-dark break-normal border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal; -} diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx deleted file mode 100644 index 8280670b6..000000000 --- a/beta/src/components/MDX/MDXComponents.tsx +++ /dev/null @@ -1,400 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {Children, useContext, useMemo} from 'react'; -import * as React from 'react'; -import cn from 'classnames'; - -import CodeBlock from './CodeBlock'; -import {CodeDiagram} from './CodeDiagram'; -import ConsoleBlock from './ConsoleBlock'; -import ExpandableCallout from './ExpandableCallout'; -import ExpandableExample from './ExpandableExample'; -import {H1, H2, H3, H4} from './Heading'; -import HomepageHero from './HomepageHero'; -import InlineCode from './InlineCode'; -import Intro from './Intro'; -import Link from './Link'; -import {PackageImport} from './PackageImport'; -import Recap from './Recap'; -import Sandpack from './Sandpack'; -import Diagram from './Diagram'; -import DiagramGroup from './DiagramGroup'; -import SimpleCallout from './SimpleCallout'; -import TerminalBlock from './TerminalBlock'; -import YouWillLearnCard from './YouWillLearnCard'; -import {Challenges, Hint, Solution} from './Challenges'; -import {IconNavArrow} from '../Icon/IconNavArrow'; -import ButtonLink from 'components/ButtonLink'; -import {TocContext} from './TocContext'; -import type {Toc, TocItem} from './TocContext'; - -function CodeStep({children, step}: {children: any; step: number}) { - return ( - - {children} - - ); -} - -const P = (p: JSX.IntrinsicElements['p']) => ( -

-); - -const Strong = (strong: JSX.IntrinsicElements['strong']) => ( - -); - -const OL = (p: JSX.IntrinsicElements['ol']) => ( -

    -); -const LI = (p: JSX.IntrinsicElements['li']) => ( -
  1. -); -const UL = (p: JSX.IntrinsicElements['ul']) => ( -
      -); - -const Divider = () => ( -
      -); -const Wip = ({children}: {children: React.ReactNode}) => ( - {children} -); -const Gotcha = ({children}: {children: React.ReactNode}) => ( - {children} -); -const Note = ({children}: {children: React.ReactNode}) => ( - {children} -); - -const Blockquote = ({ - children, - ...props -}: JSX.IntrinsicElements['blockquote']) => { - return ( -
      - {children} -
      - ); -}; - -function LearnMore({ - children, - path, -}: { - title: string; - path?: string; - children: any; -}) { - return ( - <> -
      -
      -

      - Ready to learn this topic? -

      - {children} - {path ? ( - - Read More - - - ) : null} -
      -
      -
      - - ); -} - -function Math({children}: {children: any}) { - return ( - - {children} - - ); -} - -function MathI({children}: {children: any}) { - return ( - - {children} - - ); -} - -function YouWillLearn({ - children, - isChapter, -}: { - children: any; - isChapter?: boolean; -}) { - let title = isChapter ? 'In this chapter' : 'You will learn'; - return {children}; -} - -// TODO: typing. -function Recipes(props: any) { - return ; -} - -function AuthorCredit({ - author, - authorLink, -}: { - author: string; - authorLink: string; -}) { - return ( -

      - - Illustrated by{' '} - {authorLink ? ( - - {author} - - ) : ( - author - )} - -

      - ); -} - -function Illustration({ - caption, - src, - alt, - author, - authorLink, -}: { - caption: string; - src: string; - alt: string; - author: string; - authorLink: string; -}) { - return ( -
      -
      - {alt} - {caption ? ( -
      - {caption} -
      - ) : null} -
      - {author ? : null} -
      - ); -} - -function IllustrationBlock({ - title, - sequential, - author, - authorLink, - children, -}: { - title: string; - author: string; - authorLink: string; - sequential: boolean; - children: any; -}) { - const imageInfos = Children.toArray(children).map( - (child: any) => child.props - ); - const images = imageInfos.map((info, index) => ( -
      -
      - {info.alt} -
      - {info.caption ? ( -
      - {info.caption} -
      - ) : null} -
      - )); - return ( -
      - {title ? ( -

      - {title} -

      - ) : null} - {sequential ? ( -
        - {images.map((x: any, i: number) => ( -
      1. - {x} -
        2. - ))} -
      - ) : ( -
      {images}
      - )} - {author ? : null} -
      - ); -} - -type NestedTocRoot = { - item: null; - children: Array; -}; - -type NestedTocNode = { - item: TocItem; - children: Array; -}; - -function calculateNestedToc(toc: Toc): NestedTocRoot { - const currentAncestors = new Map(); - const root: NestedTocRoot = { - item: null, - children: [], - }; - const startIndex = 1; // Skip "Overview" - for (let i = startIndex; i < toc.length; i++) { - const item = toc[i]; - const currentParent: NestedTocNode | NestedTocRoot = - currentAncestors.get(item.depth - 1) || root; - const node: NestedTocNode = { - item, - children: [], - }; - currentParent.children.push(node); - currentAncestors.set(item.depth, node); - } - return root; -} - -function InlineToc() { - const toc = useContext(TocContext); - const root = useMemo(() => calculateNestedToc(toc), [toc]); - return ; -} - -function InlineTocItem({items}: {items: Array}) { - return ( -
        - {items.map((node) => ( -
      • - {node.item.text} - {node.children.length > 0 && } -
        • - ))} -
      - ); -} - -function LinkWithTodo({href, children, ...props}: JSX.IntrinsicElements['a']) { - if (href?.startsWith('TODO')) { - return children; - } - - return ( - - {children} - - ); -} - -export const MDXComponents = { - p: P, - strong: Strong, - blockquote: Blockquote, - ol: OL, - ul: UL, - li: LI, - h1: H1, - h2: H2, - h3: H3, - h4: H4, - hr: Divider, - a: LinkWithTodo, - code: InlineCode, - pre: CodeBlock, - CodeDiagram, - ConsoleBlock, - DeepDive: (props: { - children: React.ReactNode; - title: string; - excerpt: string; - }) => , - Diagram, - DiagramGroup, - FullWidth({children}: {children: any}) { - return children; - }, - MaxWidth({children}: {children: any}) { - return
      {children}
      ; - }, - Gotcha, - Wip, - HomepageHero, - Illustration, - IllustrationBlock, - Intro, - InlineToc, - LearnMore, - Math, - MathI, - Note, - PackageImport, - Recap, - Recipes, - Sandpack, - TerminalBlock, - YouWillLearn, - YouWillLearnCard, - Challenges, - Hint, - Solution, - CodeStep, -}; - -for (let key in MDXComponents) { - if (MDXComponents.hasOwnProperty(key)) { - const MDXComponent: any = (MDXComponents as any)[key]; - MDXComponent.mdxName = key; - } -} diff --git a/beta/src/components/MDX/PackageImport.tsx b/beta/src/components/MDX/PackageImport.tsx deleted file mode 100644 index 5e2da820e..000000000 --- a/beta/src/components/MDX/PackageImport.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {Children} from 'react'; -import * as React from 'react'; -import CodeBlock from './CodeBlock'; - -interface PackageImportProps { - children: React.ReactNode; -} - -export function PackageImport({children}: PackageImportProps) { - const terminal = Children.toArray(children).filter((child: any) => { - return child.type?.mdxName !== 'pre'; - }); - const code = Children.toArray(children).map((child: any, i: number) => { - if (child.type?.mdxName === 'pre') { - return ( - - ); - } else { - return null; - } - }); - return ( -
      -
      {terminal}
      -
      {code}
      -
      - ); -} diff --git a/beta/src/components/MDX/Recap.tsx b/beta/src/components/MDX/Recap.tsx deleted file mode 100644 index d91ed48b4..000000000 --- a/beta/src/components/MDX/Recap.tsx +++ /dev/null @@ -1,23 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import * as React from 'react'; -import {H2} from './Heading'; - -interface RecapProps { - children: React.ReactNode; -} - -function Recap({children}: RecapProps) { - return ( -
      -

      - Recap -

      - {children} -
      - ); -} - -export default Recap; diff --git a/beta/src/components/MDX/Sandpack/Console.tsx b/beta/src/components/MDX/Sandpack/Console.tsx deleted file mode 100644 index 04eaa89f6..000000000 --- a/beta/src/components/MDX/Sandpack/Console.tsx +++ /dev/null @@ -1,239 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ -import cn from 'classnames'; -import {useState, useRef, useEffect} from 'react'; -import {IconChevron} from 'components/Icon/IconChevron'; - -import {SandpackCodeViewer, useSandpack} from '@codesandbox/sandpack-react'; -import type {SandpackMessageConsoleMethods} from '@codesandbox/sandpack-client'; - -const getType = ( - message: SandpackMessageConsoleMethods -): 'info' | 'warning' | 'error' => { - if (message === 'log' || message === 'info') { - return 'info'; - } - - if (message === 'warn') { - return 'warning'; - } - - return 'error'; -}; - -const getColor = (message: SandpackMessageConsoleMethods): string => { - if (message === 'warn') { - return 'text-yellow-50'; - } else if (message === 'error') { - return 'text-red-40'; - } else { - return 'text-secondary dark:text-secondary-dark'; - } -}; - -// based on https://github.com/tmpfs/format-util/blob/0e62d430efb0a1c51448709abd3e2406c14d8401/format.js#L1 -// based on https://developer.mozilla.org/en-US/docs/Web/API/console#Using_string_substitutions -// Implements s, d, i and f placeholders -function formatStr(...inputArgs: any[]): any[] { - const maybeMessage = inputArgs[0]; - if (typeof maybeMessage !== 'string') { - return inputArgs; - } - // If the first argument is a string, check for substitutions. - const args = inputArgs.slice(1); - let formatted: string = String(maybeMessage); - if (args.length) { - const REGEXP = /(%?)(%([jds]))/g; - - formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => { - let arg = args.shift(); - switch (flag) { - case 's': - arg += ''; - break; - case 'd': - case 'i': - arg = parseInt(arg, 10).toString(); - break; - case 'f': - arg = parseFloat(arg).toString(); - break; - } - if (!escaped) { - return arg; - } - args.unshift(arg); - return match; - }); - } - - // Arguments that remain after formatting. - if (args.length) { - for (let i = 0; i < args.length; i++) { - formatted += ' ' + String(args[i]); - } - } - - // Update escaped %% values. - return [formatted.replace(/%{2,2}/g, '%')]; -} - -type ConsoleData = Array<{ - data: Array>; - id: string; - method: SandpackMessageConsoleMethods; -}>; - -const MAX_MESSAGE_COUNT = 100; - -export const SandpackConsole = ({visible}: {visible: boolean}) => { - const {listen} = useSandpack(); - const [logs, setLogs] = useState([]); - const wrapperRef = useRef(null); - - useEffect(() => { - let isActive = true; - const unsubscribe = listen((message) => { - if (!isActive) { - console.warn('Received an unexpected log from Sandpack.'); - return; - } - if ( - (message.type === 'start' && message.firstLoad) || - message.type === 'refresh' - ) { - setLogs([]); - } - if (message.type === 'console' && message.codesandbox) { - setLogs((prev) => { - const newLogs = message.log - .filter((consoleData) => { - if ( - typeof consoleData.data[0] === 'string' && - consoleData.data[0].indexOf('The above error occurred') !== -1 - ) { - // Don't show React error addendum because - // we have a custom error overlay. - return false; - } - return true; - }) - .map((consoleData) => { - return { - ...consoleData, - data: formatStr(...consoleData.data), - }; - }); - let messages = [...prev, ...newLogs]; - while (messages.length > MAX_MESSAGE_COUNT) { - messages.shift(); - } - return messages; - }); - } - }); - - return () => { - unsubscribe(); - isActive = false; - }; - }, [listen]); - - const [isExpanded, setIsExpanded] = useState(true); - - useEffect(() => { - if (wrapperRef.current) { - wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight; - } - }, [logs]); - - if (!visible || logs.length === 0) { - return null; - } - - return ( -
      -
      - - -
      - {isExpanded && ( -
      -
      - {logs.map(({data, id, method}) => { - return ( -
      - - {data.map((msg, index) => { - if (typeof msg === 'string') { - return {msg}; - } - - let children; - if (msg != null && typeof msg['@t'] === 'string') { - // CodeSandbox wraps custom types - children = msg['@t']; - } else { - try { - children = JSON.stringify(msg, null, 2); - } catch (error) { - try { - children = Object.prototype.toString.call(msg); - } catch (err) { - children = '[' + typeof msg + ']'; - } - } - } - - return ( - - - - ); - })} - -
      - ); - })} -
      -
      - )} -
      - ); -}; diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx deleted file mode 100644 index 97951ccb7..000000000 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ /dev/null @@ -1,148 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ -import {memo, useRef, useState} from 'react'; -import {flushSync} from 'react-dom'; -import { - useSandpack, - useActiveCode, - SandpackCodeEditor, - // SandpackReactDevTools, - SandpackLayout, -} from '@codesandbox/sandpack-react'; -import cn from 'classnames'; - -import {IconChevron} from 'components/Icon/IconChevron'; -import {NavigationBar} from './NavigationBar'; -import {Preview} from './Preview'; - -import {useSandpackLint} from './useSandpackLint'; - -export const CustomPreset = memo(function CustomPreset({ - showDevTools, - onDevToolsLoad, - devToolsLoaded, - providedFiles, -}: { - showDevTools: boolean; - devToolsLoaded: boolean; - onDevToolsLoad: () => void; - providedFiles: Array; -}) { - const {lintErrors, lintExtensions} = useSandpackLint(); - const {sandpack} = useSandpack(); - const {code} = useActiveCode(); - const {activeFile} = sandpack; - const lineCountRef = useRef<{[key: string]: number}>({}); - if (!lineCountRef.current[activeFile]) { - lineCountRef.current[activeFile] = code.split('\n').length; - } - const lineCount = lineCountRef.current[activeFile]; - const isExpandable = lineCount > 16; - return ( - - ); -}); - -const SandboxShell = memo(function SandboxShell({ - showDevTools, - onDevToolsLoad, - devToolsLoaded, - providedFiles, - lintErrors, - lintExtensions, - isExpandable, -}: { - showDevTools: boolean; - devToolsLoaded: boolean; - onDevToolsLoad: () => void; - providedFiles: Array; - lintErrors: Array; - lintExtensions: Array; - isExpandable: boolean; -}) { - const containerRef = useRef(null); - const [isExpanded, setIsExpanded] = useState(false); - return ( - <> -
      - - - - - {(isExpandable || isExpanded) && ( - - )} - - - {/* {showDevTools && ( - // @ts-ignore TODO(@danilowoz): support devtools - - )} */} -
      - - ); -}); - -const Editor = memo(function Editor({ - lintExtensions, -}: { - lintExtensions: Array; -}) { - return ( - - ); -}); diff --git a/beta/src/components/MDX/Sandpack/DownloadButton.tsx b/beta/src/components/MDX/Sandpack/DownloadButton.tsx deleted file mode 100644 index ef974b1af..000000000 --- a/beta/src/components/MDX/Sandpack/DownloadButton.tsx +++ /dev/null @@ -1,105 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {useSyncExternalStore} from 'react'; -import {useSandpack} from '@codesandbox/sandpack-react'; -import {IconDownload} from '../../Icon/IconDownload'; -export interface DownloadButtonProps {} - -let supportsImportMap: boolean | void; - -function useSupportsImportMap() { - function subscribe() { - // It never updates. - return () => {}; - } - function getCurrentValue() { - if (supportsImportMap === undefined) { - supportsImportMap = - (HTMLScriptElement as any).supports && - (HTMLScriptElement as any).supports('importmap'); - } - return supportsImportMap; - } - function getServerSnapshot() { - return false; - } - - return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot); -} - -const SUPPORTED_FILES = ['/App.js', '/styles.css']; - -export function DownloadButton({ - providedFiles, -}: { - providedFiles: Array; -}) { - const {sandpack} = useSandpack(); - const supported = useSupportsImportMap(); - if (!supported) { - return null; - } - if (providedFiles.some((file) => !SUPPORTED_FILES.includes(file))) { - return null; - } - - const downloadHTML = () => { - const css = sandpack.files['/styles.css']?.code ?? ''; - const code = sandpack.files['/App.js']?.code ?? ''; - const blob = new Blob([ - ` - - -
      - - - - - - - -`, - ]); - const url = window.URL.createObjectURL(blob); - const a = document.createElement('a'); - a.style.display = 'none'; - a.href = url; - a.download = 'sandbox.html'; - document.body.appendChild(a); - a.click(); - window.URL.revokeObjectURL(url); - }; - - return ( - - ); -} diff --git a/beta/src/components/MDX/Sandpack/Error.tsx b/beta/src/components/MDX/Sandpack/Error.tsx deleted file mode 100644 index 61344ebac..000000000 --- a/beta/src/components/MDX/Sandpack/Error.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -interface ErrorType { - title?: string; - message: string; - column?: number; - line?: number; - path?: string; -} - -export function Error({error}: {error: ErrorType}) { - const {message, title} = error; - - return ( -
      -

      {title || 'Error'}

      - 
      -        {message}
-
      -
      - ); -} diff --git a/beta/src/components/MDX/Sandpack/NavigationBar.tsx b/beta/src/components/MDX/Sandpack/NavigationBar.tsx deleted file mode 100644 index acc972fb0..000000000 --- a/beta/src/components/MDX/Sandpack/NavigationBar.tsx +++ /dev/null @@ -1,178 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import { - useRef, - useInsertionEffect, - useCallback, - useState, - useEffect, - Fragment, -} from 'react'; -import cn from 'classnames'; -import { - FileTabs, - useSandpack, - useSandpackNavigation, -} from '@codesandbox/sandpack-react'; -import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton'; -import {ResetButton} from './ResetButton'; -import {DownloadButton} from './DownloadButton'; -import {IconChevron} from '../../Icon/IconChevron'; -import {Listbox} from '@headlessui/react'; - -// TODO: Replace with real useEvent. -export function useEvent(fn: any): any { - const ref = useRef(null); - useInsertionEffect(() => { - ref.current = fn; - }, [fn]); - return useCallback((...args: any) => { - const f = ref.current!; - // @ts-ignore - return f(...args); - }, []); -} - -const getFileName = (filePath: string): string => { - const lastIndexOfSlash = filePath.lastIndexOf('/'); - return filePath.slice(lastIndexOfSlash + 1); -}; - -export function NavigationBar({providedFiles}: {providedFiles: Array}) { - const {sandpack} = useSandpack(); - const containerRef = useRef(null); - const tabsRef = useRef(null); - // By default, show the dropdown because all tabs may not fit. - // We don't know whether they'll fit or not until after hydration: - const [showDropdown, setShowDropdown] = useState(true); - const {activeFile, setActiveFile, visibleFiles, clients} = sandpack; - const clientId = Object.keys(clients)[0]; - const {refresh} = useSandpackNavigation(clientId); - const isMultiFile = visibleFiles.length > 1; - const hasJustToggledDropdown = useRef(false); - - // Keep track of whether we can show all tabs or just the dropdown. - const onContainerResize = useEvent((containerWidth: number) => { - if (hasJustToggledDropdown.current === true) { - // Ignore changes likely caused by ourselves. - hasJustToggledDropdown.current = false; - return; - } - if (tabsRef.current === null) { - // Some ResizeObserver calls come after unmount. - return; - } - const tabsWidth = tabsRef.current.getBoundingClientRect().width; - const needsDropdown = tabsWidth >= containerWidth; - if (needsDropdown !== showDropdown) { - hasJustToggledDropdown.current = true; - setShowDropdown(needsDropdown); - } - }); - - useEffect(() => { - if (isMultiFile) { - const resizeObserver = new ResizeObserver((entries) => { - for (const entry of entries) { - if (entry.contentBoxSize) { - const contentBoxSize = Array.isArray(entry.contentBoxSize) - ? entry.contentBoxSize[0] - : entry.contentBoxSize; - const width = contentBoxSize.inlineSize; - onContainerResize(width); - } - } - }); - const container = containerRef.current!; - resizeObserver.observe(container); - return () => resizeObserver.unobserve(container); - } else { - return; - } - }, [isMultiFile]); - - const handleReset = () => { - if (confirm('Reset all your edits too?')) { - sandpack.resetAllFiles(); - } - refresh(); - }; - - return ( -
      -
      - -
      -
      -
      - -
      - - {({open}) => ( - // If tabs don't fit, display the dropdown instead. - // The dropdown is absolutely positioned inside the - // space that's taken by the (invisible) tab list. - - )} - -
      -
      - {isMultiFile && showDropdown && ( - - {visibleFiles.map((filePath: string) => ( - - {({active}) => ( -
    • - {getFileName(filePath)} -
      • - )} -       - ))} -       - )} -       -
      -
      - - - -
      -
      - ); -} diff --git a/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx b/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx deleted file mode 100644 index 8b08b2300..000000000 --- a/beta/src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -import {UnstyledOpenInCodeSandboxButton} from '@codesandbox/sandpack-react'; -import {IconNewPage} from '../../Icon/IconNewPage'; - -export const OpenInCodeSandboxButton = () => { - return ( - - - Fork - - ); -}; diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx deleted file mode 100644 index 20c8311ee..000000000 --- a/beta/src/components/MDX/Sandpack/Preview.tsx +++ /dev/null @@ -1,228 +0,0 @@ -/* - * Copyright (c) Facebook, Inc. and its affiliates. - */ - -/* eslint-disable react-hooks/exhaustive-deps */ -import {useRef, useState, useEffect, useMemo} from 'react'; -import { - useSandpack, - LoadingOverlay, - SandpackStack, -} from '@codesandbox/sandpack-react'; -import cn from 'classnames'; -import {Error} from './Error'; -import {SandpackConsole} from './Console'; -import type {LintDiagnostic} from './useSandpackLint'; - -/** - * TODO: can we use React.useId? - */ -const generateRandomId = (): string => - Math.floor(Math.random() * 10000).toString(); - -type CustomPreviewProps = { - className?: string; - customStyle?: Record; - isExpanded: boolean; - lintErrors: LintDiagnostic; -}; - -function useDebounced(value: any): any { - const ref = useRef(null); - const [saved, setSaved] = useState(value); - useEffect(() => { - clearTimeout(ref.current); - ref.current = setTimeout(() => { - setSaved(value); - }, 300); - }, [value]); - return saved; -} - -export function Preview({ - customStyle, - isExpanded, - className, - lintErrors, -}: CustomPreviewProps) { - const {sandpack, listen} = useSandpack(); - const [isReady, setIsReady] = useState(false); - const [iframeComputedHeight, setComputedAutoHeight] = useState( - null - ); - - let { - error: rawError, - registerBundler, - unregisterBundler, - errorScreenRegisteredRef, - openInCSBRegisteredRef, - loadingScreenRegisteredRef, - status, - } = sandpack; - - if ( - rawError && - rawError.message === '_csbRefreshUtils.prelude is not a function' - ) { - // Work around a noisy internal error. - rawError = null; - } - - // Memoized because it's fed to debouncing. - const firstLintError = useMemo(() => { - if (lintErrors.length === 0) { - return null; - } else { - const {line, column, message} = lintErrors[0]; - return { - title: 'Lint Error', - message: `${line}:${column} - ${message}`, - }; - } - }, [lintErrors]); - - if (rawError == null || rawError.title === 'Runtime Exception') { - if (firstLintError !== null) { - rawError = firstLintError; - } - } - - if (rawError != null && rawError.title === 'Runtime Exception') { - rawError.title = 'Runtime Error'; - } - - // It changes too fast, causing flicker. - const error = useDebounced(rawError); - - const clientId = useRef(generateRandomId()); - const iframeRef = useRef(null); - - // SandpackPreview immediately registers the custom screens/components so the bundler does not render any of them - // TODO: why are we doing this during render? - openInCSBRegisteredRef.current = true; - errorScreenRegisteredRef.current = true; - loadingScreenRegisteredRef.current = true; - - useEffect(function createBundler() { - const iframeElement = iframeRef.current!; - registerBundler(iframeElement, clientId.current); - - return () => { - unregisterBundler(clientId.current); - }; - }, []); - - useEffect( - function bundlerListener() { - const unsubscribe = listen((message: any) => { - if (message.type === 'resize') { - setComputedAutoHeight(message.height); - } else if (message.type === 'start') { - if (message.firstLoad) { - setIsReady(false); - } - } else if (message.type === 'done') { - setIsReady(true); - } - }, clientId.current); - - return () => { - setIsReady(false); - setComputedAutoHeight(null); - unsubscribe(); - }; - }, - [status === 'idle'] - ); - - const overrideStyle = error - ? { - // Don't collapse errors - maxHeight: undefined, - } - : null; - const hideContent = !isReady || error; - - // WARNING: - // The layout and styling here is convoluted and really easy to break. - // If you make changes to it, you need to test different cases: - // - Content -> (compile | runtime) error -> content editing flow should work. - // - Errors should expand parent height rather than scroll. - // - Long sandboxes should scroll unless "show more" is toggled. - // - Expanded sandboxes ("show more") have sticky previews and errors. - // - Sandboxes have autoheight based on content. - // - That autoheight should be measured correctly! (Check some long ones.) - // - You shouldn't see nested scrolls (that means autoheight is borked). - // - Ideally you shouldn't see a blank preview tile while recompiling. - // - Container shouldn't be horizontally scrollable (even while loading). - // - It should work on mobile. - // The best way to test it is to actually go through some challenges. - - return ( - -
      -
      - - -## Snake in React {/*snake-in-react*/} - -[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React. - -> [Check the source on GitHub](https://github.com/tomocchino/react-snake/blob/master/src/snake.js) -> ->
      diff --git a/beta/src/content/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md b/beta/src/content/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md deleted file mode 100644 index 59a41733c..000000000 --- a/beta/src/content/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 'New in React v0.4: Prop Validation and Default Values' -author: [zpao] ---- - -Many of the questions we got following the public launch of React revolved around `props`, specifically that people wanted to do validation and to make sure their components had sensible defaults. - -## Validation {/*validation*/} - -Oftentimes you want to validate your `props` before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your `render` or `componentWillReceiveProps` functions, but that gets clunky fast. - -React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own. - -```js -React.createClass({ - propTypes: { - // An optional string prop named "description". - description: React.PropTypes.string, - - // A required enum prop named "category". - category: React.PropTypes.oneOf(['News','Photos']).isRequired, - - // A prop named "dialog" that requires an instance of Dialog. - dialog: React.PropTypes.instanceOf(Dialog).isRequired - }, - ... -}); -``` - -## Default Values {/*default-values*/} - -One common pattern we've seen with our React code is to do something like this: - -```js -React.createClass({ - render: function () { - var value = this.props.value || 'default value'; - return
      {value}
      ; - }, -}); -``` - -Do this for a few `props` across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way: - -```js -React.createClass({ - getDefaultProps: function() { - return { - value: 'default value' - }; - } - ... -}); -``` - -We will use the cached result of this function before each `render`. We also perform all validations before each `render` to ensure that you have all of the data you need in the right form before you try to use it. - ---- - -Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well. diff --git a/beta/src/content/blog/2013/07/17/react-v0-4-0.md b/beta/src/content/blog/2013/07/17/react-v0-4-0.md deleted file mode 100644 index 65a730234..000000000 --- a/beta/src/content/blog/2013/07/17/react-v0-4-0.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: 'React v0.4.0' -author: [zpao] ---- - -Over the past 2 months we've been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we're proud to announce the availability of React v0.4! - -This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](https://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next! - -React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful. - -When you're ready, [go download it](/docs/installation.html)! - -### React {/*react*/} - -- Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily. -- Support for more DOM elements and attributes (e.g., ``) -- Improved server-side rendering APIs. `React.renderComponentToString(, callback)` allows you to use React on the server and generate markup which can be sent down to the browser. -- `prop` improvements: validation and default values. [Read our blog post for details...](/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html) -- Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](/docs/multiple-components.html) -- Removed `React.autoBind`. [Read our blog post for details...](/blog/2013/07/02/react-v0-4-autobind-by-default.html) -- Improvements to forms. We've written wrappers around ``, ` -
      - - - - -

      That's right!

      - - -``` - - - -Manipulating the UI imperatively works well enough for isolated examples, but it gets exponentially more difficult to manage in more complex systems. Imagine updating a page full of different forms like this one. Adding a new UI element or a new interaction would require carefully checking all existing code to make sure you haven't introduced a bug (for example, forgetting to show or hide something). - -React was built to solve this problem. - -In React, you don't directly manipulate the UI--meaning you don't enable, disable, show, or hide components directly. Instead, you **declare what you want to show,** and React figures out how to update the UI. Think of getting into a taxi and telling the driver where you want to go instead of telling them exactly where to turn. It's the driver's job to get you there, and they might even know some shortcuts you haven't considered! - - - -## Thinking about UI declaratively {/*thinking-about-ui-declaratively*/} - -You've seen how to implement a form imperatively above. To better understand how to think in React, you'll walk through reimplementing this UI in React below: - -1. **Identify** your component's different visual states -2. **Determine** what triggers those state changes -3. **Represent** the state in memory using `useState` -4. **Remove** any non-essential state variables -5. **Connect** the event handlers to set the state - -### Step 1: Identify your component's different visual states {/*step-1-identify-your-components-different-visual-states*/} - -In computer science, you may hear about a ["state machine"](https://en.wikipedia.org/wiki/Finite-state_machine) being in one of several “states”. If you work with a designer, you may have seen mockups for different "visual states". React stands at the intersection of design and computer science, so both of these ideas are sources of inspiration. - -First, you need to visualize all the different "states" of the UI the user might see: - -* **Empty**: Form has a disabled "Submit" button. -* **Typing**: Form has an enabled "Submit" button. -* **Submitting**: Form is completely disabled. Spinner is shown. -* **Success**: "Thank you" message is shown instead of a form. -* **Error**: Same as Typing state, but with an extra error message. - -Just like a designer, you'll want to "mock up" or create "mocks" for the different states before you add logic. For example, here is a mock for just the visual part of the form. This mock is controlled by a prop called `status` with a default value of `'empty'`: - - - -```js -export default function Form({ - status = 'empty' -}) { - if (status === 'success') { - return

      That's right!

      - } - return ( - <> -

      City quiz

      -

      - In which city is there a billboard that turns air into drinkable water? -

      -
      -