diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index 028250472..000000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,20 +0,0 @@ -version: 2 -jobs: - build: - docker: - - image: circleci/node:12 - steps: - - checkout - - restore_cache: - keys: - - dependencies-{{ checksum "yarn.lock" }} - - run: - name: Install - command: yarn install --pure-lockfile - - save_cache: - paths: - - node_modules - key: dependencies-{{ checksum "yarn.lock" }} - - run: - name: Check Prettier, ESLint, Flow - command: yarn ci-check diff --git a/.eslintignore b/.eslintignore index 942541715..ee6604687 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,8 @@ node_modules/* +# Skip beta +beta/* + # Ignore markdown files and examples content/* diff --git a/.flowconfig b/.flowconfig index 836f6ec1e..baf4b0255 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,5 +1,6 @@ [ignore] +/beta/.* /content/.* /node_modules/.* /public/.* diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index d3c569401..e34dda4af 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,12 +1,10 @@ - - " + + - 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 new file mode 100644 index 000000000..a9cacd7f0 --- /dev/null +++ b/.github/workflows/beta_site_lint.yml @@ -0,0 +1,30 @@ +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 new file mode 100644 index 000000000..90a961d4c --- /dev/null +++ b/.github/workflows/label.yml @@ -0,0 +1,22 @@ +# 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/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml new file mode 100644 index 000000000..eed7b3d94 --- /dev/null +++ b/.github/workflows/nodejs.yml @@ -0,0 +1,27 @@ +name: Lint / Flow 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 + + - name: Lint codebase + run: yarn ci-check diff --git a/.gitignore b/.gitignore index d1bde99ce..e81f1af62 100644 --- a/.gitignore +++ b/.gitignore @@ -2,5 +2,5 @@ .DS_STORE .idea node_modules -public +/public yarn-error.log \ No newline at end of file diff --git a/.nvmrc b/.nvmrc index e1fcd1ea2..898e643b0 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -lts/erbium +12.22.0 diff --git a/README.md b/README.md index a10ba5f0d..0b91c9aa6 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ This repo contains the source code and documentation powering [reactjs.org](http 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. Yarn v1: 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 @@ -26,12 +26,12 @@ This repo contains the source code and documentation powering [reactjs.org](http ### 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/master/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. +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 master` from any folder in your local `reactjs.org` repository -1. `git pull origin master` to ensure you have the latest main code +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 @@ -53,11 +53,11 @@ The documentation is divided into several sections with a different tone and pur 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 Netlify build will also be automatically created once you make your PR so other people can see your change. +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 [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/). +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). @@ -67,4 +67,4 @@ If your language does not have a translation and you would like to create one, p - `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. +Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](LICENSE-DOCS.md) file. diff --git a/beta/.env.development b/beta/.env.development new file mode 100644 index 000000000..a692f21c7 --- /dev/null +++ b/beta/.env.development @@ -0,0 +1 @@ +SANDPACK_BARE_COMPONENTS=true \ No newline at end of file diff --git a/beta/.env.production b/beta/.env.production new file mode 100644 index 000000000..445c9c4d0 --- /dev/null +++ b/beta/.env.production @@ -0,0 +1,2 @@ +NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4' +SANDPACK_BARE_COMPONENTS=true \ No newline at end of file diff --git a/beta/.eslintignore b/beta/.eslintignore new file mode 100644 index 000000000..4738cb697 --- /dev/null +++ b/beta/.eslintignore @@ -0,0 +1,3 @@ +scripts +plugins +next.config.js diff --git a/beta/.eslintrc b/beta/.eslintrc new file mode 100644 index 000000000..147e54607 --- /dev/null +++ b/beta/.eslintrc @@ -0,0 +1,16 @@ +{ + "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 new file mode 100644 index 000000000..69060a26c --- /dev/null +++ b/beta/.gitignore @@ -0,0 +1,38 @@ +# 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_*.woff2 diff --git a/beta/.husky/pre-commit b/beta/.husky/pre-commit new file mode 100755 index 000000000..bbf64071e --- /dev/null +++ b/beta/.husky/pre-commit @@ -0,0 +1,5 @@ +#!/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 new file mode 100644 index 000000000..96f1f96d2 --- /dev/null +++ b/beta/.prettierignore @@ -0,0 +1 @@ +src/content/**/*.md diff --git a/beta/.prettierrc b/beta/.prettierrc new file mode 100644 index 000000000..19b54ad05 --- /dev/null +++ b/beta/.prettierrc @@ -0,0 +1,21 @@ +{ + "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 new file mode 100644 index 000000000..dd81c8546 --- /dev/null +++ b/beta/CONTRIBUTING.md @@ -0,0 +1,135 @@ +# 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 new file mode 100644 index 000000000..8208938ee --- /dev/null +++ b/beta/README.md @@ -0,0 +1,73 @@ +# 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 new file mode 100644 index 000000000..bac74d41e --- /dev/null +++ b/beta/colors.js @@ -0,0 +1,89 @@ +/* + * 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 new file mode 100644 index 000000000..4f11a03dc --- /dev/null +++ b/beta/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// 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 new file mode 100644 index 000000000..2ea3e916e --- /dev/null +++ b/beta/next.config.js @@ -0,0 +1,70 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +/** + * @type {import('next').NextConfig} + **/ +const nextConfig = { + pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'], + reactStrictMode: true, + experimental: { + plugins: true, + scrollRestoration: true, + legacyBrowsers: false, + browsersListForSwc: true, + }, + env: { + SANDPACK_BARE_COMPONENTS: process.env.SANDPACK_BARE_COMPONENTS, + }, + 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( + /^@stitches\/core$/, + require.resolve('./src/utils/emptyShim.js') + ), + new NormalModuleReplacementPlugin( + /^raf$/, + require.resolve('./src/utils/rafShim.js') + ), + new NormalModuleReplacementPlugin( + /^process$/, + require.resolve('./src/utils/processShim.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 new file mode 100644 index 000000000..acef2acfc --- /dev/null +++ b/beta/package.json @@ -0,0 +1,112 @@ +{ + "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/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.15.5", + "@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-frontmatter": "^4.0.1", + "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": "^0.0.0-experimental-fabef7a6b-20221215", + "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/@codemirror+lang-javascript+0.19.6.patch b/beta/patches/@codemirror+lang-javascript+0.19.6.patch new file mode 100644 index 000000000..3436b8e37 --- /dev/null +++ b/beta/patches/@codemirror+lang-javascript+0.19.6.patch @@ -0,0 +1,30 @@ +diff --git a/node_modules/@codemirror/lang-javascript/dist/index.cjs b/node_modules/@codemirror/lang-javascript/dist/index.cjs +index 4475e4f..e1255c9 100644 +--- a/node_modules/@codemirror/lang-javascript/dist/index.cjs ++++ b/node_modules/@codemirror/lang-javascript/dist/index.cjs +@@ -135,7 +135,9 @@ const javascriptLanguage = language.LRLanguage.define({ + JSXText: highlight.tags.content, + "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": highlight.tags.angleBracket, + "JSXIdentifier JSXNameSpacedName": highlight.tags.tagName, +- "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName ++ "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName, ++ "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName, ++ "JSXBuiltin/JSXIdentifier": highlight.tags.standard(highlight.tags.tagName) + }) + ] + }), +diff --git a/node_modules/@codemirror/lang-javascript/dist/index.js b/node_modules/@codemirror/lang-javascript/dist/index.js +index d089f6b..db09ea6 100644 +--- a/node_modules/@codemirror/lang-javascript/dist/index.js ++++ b/node_modules/@codemirror/lang-javascript/dist/index.js +@@ -131,7 +131,9 @@ const javascriptLanguage = /*@__PURE__*/LRLanguage.define({ + JSXText: tags.content, + "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": tags.angleBracket, + "JSXIdentifier JSXNameSpacedName": tags.tagName, +- "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName ++ "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName, ++ "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName, ++ "JSXBuiltin/JSXIdentifier": tags.standard(tags.tagName), + }) + ] + }), diff --git a/beta/patches/@codesandbox+sandpack-react+1.15.5.patch b/beta/patches/@codesandbox+sandpack-react+1.15.5.patch new file mode 100644 index 000000000..6a9a438dc --- /dev/null +++ b/beta/patches/@codesandbox+sandpack-react+1.15.5.patch @@ -0,0 +1,26 @@ +diff --git a/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js b/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js +index 6b8518e..86dd663 100644 +--- a/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js ++++ b/node_modules/@codesandbox/sandpack-react/dist/cjs/index.js +@@ -395,7 +395,7 @@ createApp(App).mount('#app') + + + +-`},"/package.json":{code:JSON.stringify({dependencies:{"core-js":"^3.6.5",vue:"^3.0.0-0","@vue/cli-plugin-babel":"4.5.0"},main:"/src/main.js"})}},main:"/src/App.vue",environment:"vue-cli"};var We={react:wt,"react-ts":Ft,vue:Ht,vanilla:Ot,"vanilla-ts":Dt,vue3:Bt,angular:Lt,svelte:Pt,solid:At,"test-ts":It};var pt=e=>{var c,p,d,h,y,S;let t=(0,Ee.normalizePath)(e.files),o=bn({template:e.template,customSetup:e.customSetup,files:t}),s=(0,Ee.normalizePath)((p=(c=e.options)==null?void 0:c.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Is((h=e.options)==null?void 0:h.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(v=>{let g=t[v];if(typeof g=="string"){s.push(v);return}!r&&g.active&&(r=v,g.hidden===!0&&s.push(v)),g.hidden||s.push(v)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Is(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=(0,Ee.addPackageJSONIfNeeded)(o.files,(y=o.dependencies)!=null?y:{},(S=o.devDependencies)!=null?S:{},o.entry);return{visibleFiles:s.filter(v=>n[v]),activeFile:r,files:n,environment:o.environment}},Is=(e,t)=>{let o=(0,Ee.normalizePath)(t),s=(0,Ee.normalizePath)(e);if(s in o)return s;if(!e)return null;let r=null,n=0,a=[".js",".jsx",".ts",".tsx"];for(;!r&&n{if(!t){if(!o)return We.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return M(u({},o),{files:_t(e)})}let s=We[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:_t(u(u({},s.files),e)),dependencies:u(u({},s.dependencies),o==null?void 0:o.dependencies),devDependencies:u(u({},s.devDependencies),o==null?void 0:o.devDependencies),entry:(0,Ee.normalizePath)((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},_t=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var mt=re.createContext(null),yn=3e4,$o=class extends re.PureComponent{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:(0,Ge.extractErrorDetails)(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s=M(u({},s),{[t]:{code:o}})}else typeof t=="object"&&(s=u(u({},s),_t(t)));this.setState({files:(0,Ge.normalizePath)(s)},this.updateClients)};this.updateClients=()=>{var n,a,c,p;let{files:t,sandpackStatus:o}=this.state,s=(a=(n=this.props.options)==null?void 0:n.recompileMode)!=null?a:"delayed",r=(p=(c=this.props.options)==null?void 0:c.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,a,c,p,d,h,y,S,v;let s=new Ge.SandpackClient(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(a=this.props.options)==null?void 0:a.bundlerURL,startRoute:(c=this.props.options)==null?void 0:c.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(h=(d=this.props.options)==null?void 0:d.skipEval)!=null?h:!1,logLevel:(y=this.props.options)==null?void 0:y.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(v=(S=this.props.customSetup)==null?void 0:S.npmRegistries)==null?void 0:v.map(g=>{var k;return(k=M(u({},g),{proxyEnabled:!1}))!=null?k:[]})});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},yn)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(g=>{let k=this.queuedListeners[o][g],$=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([g,k])=>{let $=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(c=>c())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(a=>a!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r=u({},s);return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=it();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=it();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(c=>c.listen(t));return()=>{n.forEach(c=>c())}}};this.resetFile=t=>{let{files:o}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:M(u({},s.files),{[t]:o[t]})}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:a,editorState:c,error:p,sandpackStatus:d,environment:h,initMode:y}=this.state;return{files:t,environment:h,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:a,status:d,editorState:c,initMode:y,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var a,c,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(a=this.props.options)==null?void 0:a.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(c=this.props.options)==null?void 0:c.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=re.createRef(),this.errorScreenRegistered=re.createRef(),this.openInCSBRegistered=re.createRef(),this.loadingScreenRegistered=re.createRef()}initializeSandpackIframe(){var s,r,n,a,c;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(a=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?a:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((c=this.intersectionObserver)==null||c.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(h=>h.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var c,p,d,h;((c=t.options)==null?void 0:c.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(h=this.props.options)==null?void 0:h.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!(0,dt.default)(t.options,this.props.options)||!(0,dt.default)(t.customSetup,this.props.customSetup)||!(0,dt.default)(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(y=>y.updatePreview({files:r,template:n}))}let a=(0,dt.default)(r,this.state.files)?"pristine":"dirty";a!==this.state.editorState&&this.setState({editorState:a})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return re.createElement(mt.Provider,{value:this._getSandpackState()},re.createElement(Os.ClasserProvider,{classes:(n=this.props.options)==null?void 0:n.classes},re.createElement(No,{className:s,style:r,theme:o},t)))}},Mo=$o,Sn=mt.Consumer;function T(){let e=Ds.useContext(mt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let r=e,{dispatch:t,listen:o}=r,s=N(r,["dispatch","listen"]);return{sandpack:u({},s),dispatch:t,listen:o}}var ut=()=>{var t,o,s;let{sandpack:e}=T();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};var Bs=f(require("@code-hike/classer")),Ye=f(require("react"));var me=m({svg:{margin:"auto"}}),F=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${me}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),te=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Hs=m({padding:0}),vn=Mt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),ft=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),jt=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),Ze=m({animation:`${vn} 150ms ease`,color:"$colors$error"});var kn=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),Cn=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),_s=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),js=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${_s}`]:{visibility:"unset"}}),ht=s=>{var r=s,{closableTabs:e,className:t}=r,o=N(r,["closableTabs","className"]);let{sandpack:n}=T(),a=(0,Bs.useClasser)(b),{activeFile:c,visibleFiles:p,setActiveFile:d}=n,h=S=>{S.stopPropagation();let v=S.target.closest("[data-active]"),g=v==null?void 0:v.getAttribute("title");!g||n.closeFile(g)},y=S=>{let v=Xe(S),g=p.reduce((k,$)=>($===S||Xe($)===v&&k.push($),k),[]);return g.length===0?v:Es(S,g)};return Ye.createElement("div",u({className:l(a("tabs"),kn,t),translate:"no"},o),Ye.createElement("div",{"aria-label":"Select active file",className:l(a("tabs-scrollable-container"),Cn),role:"tablist"},p.map(S=>Ye.createElement("button",{key:S,"aria-selected":S===c,className:l(a("tab-button"),F,js),"data-active":S===c,onClick:()=>d(S),role:"tab",title:S,type:"button"},y(S),e&&p.length>1&&Ye.createElement("span",{className:l(a("close-button"),_s),onClick:h},Ye.createElement(Ro,null))))))};var Us=f(require("@code-hike/classer")),Lo=f(require("react"));var xn=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),gt=s=>{var r=s,{className:e,onClick:t}=r,o=N(r,["className","onClick"]);let n=(0,Us.useClasser)(b),{sandpack:a}=T();return Lo.createElement("button",u({className:l(n("button"),F,te,xn,e),onClick:c=>{a.runSandpack(),t==null||t(c)},type:"button"},o),Lo.createElement(rt,null),"Run")};var zs=f(require("@code-hike/classer")),Vs=f(require("react"));var Te=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${b}-stack)`]:{backgroundColor:"$colors$surface2"}}),ne=o=>{var s=o,{className:e}=s,t=N(s,["className"]);let r=(0,zs.useClasser)(b);return Vs.createElement("div",u({className:l(r("stack"),Te,e)},t))};var ir=f(require("@code-hike/classer")),Xt=f(require("@codemirror/closebrackets")),Ne=f(require("@codemirror/commands")),cr=f(require("@codemirror/comment")),lr=f(require("@codemirror/gutter")),pr=f(require("@codemirror/highlight")),Wt=f(require("@codemirror/history")),dr=f(require("@codemirror/matchbrackets")),$e=f(require("@codemirror/state")),Io=f(require("@codemirror/state")),fe=f(require("@codemirror/view")),mr=f(require("@react-hook/intersection-observer")),L=f(require("react"));var Xs=f(require("react"));var Oe=()=>{let{theme:e,id:t,mode:o}=Xs.useContext(lt);return{theme:e,themeId:t,themeMode:o}};var wo=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;se.line(t).from+(o!=null?o:0)-1,Js=()=>Zs.EditorView.theme({"&":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${b}-colors-surface3)`,borderRadius:`var(--${b}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${b}-colors-errorSurface)`,borderRadius:`var(--${b}-border-radius)`},".cm-content":{caretColor:`var(--${b}-colors-accent)`,padding:`0 var(--${b}-space-4)`},".cm-scroller":{fontFamily:`var(--${b}-font-mono)`,lineHeight:`var(--${b}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-colors-disabled)`,border:"none",paddingLeft:`var(--${b}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${b}-font-lineHeight)`,minWidth:`var(--${b}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${b}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),ue=e=>`${b}-syntax-${e}`,qs=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>M(u({},t),{[`.${ue(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),Ks=e=>P.HighlightStyle.define([{tag:P.tags.link,textDecoration:"underline"},{tag:P.tags.emphasis,fontStyle:"italic"},{tag:P.tags.strong,fontWeight:"bold"},{tag:P.tags.keyword,class:ue("keyword")},{tag:[P.tags.atom,P.tags.number,P.tags.bool],class:ue("static")},{tag:P.tags.tagName,class:ue("tag")},{tag:P.tags.variableName,class:ue("plain")},{tag:P.tags.function(P.tags.variableName),class:ue("definition")},{tag:P.tags.definition(P.tags.function(P.tags.variableName)),class:ue("definition")},{tag:P.tags.propertyName,class:ue("property")},{tag:[P.tags.literal,P.tags.inserted],class:ue(e.syntax.string?"string":"static")},{tag:P.tags.punctuation,class:ue("punctuation")},{tag:[P.tags.comment,P.tags.quote],class:ue("comment")}]),Qs=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},er=(e,t)=>{let o={javascript:(0,Fo.javascript)({jsx:!0,typescript:!1}),typescript:(0,Fo.javascript)({jsx:!0,typescript:!0}),html:(0,Gs.html)(),css:(0,Ws.css)()};for(let s of t)if(e===s.name)return s.language;return o[e]},Ut=(...e)=>Ys.useCallback(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function tr(e){return De.ViewPlugin.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return De.Decoration.none;let o=e.map(s=>{var c,p,d;let r=De.Decoration.line({attributes:{class:(c=s.className)!=null?c:""}}),n=De.Decoration.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),a=bt(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let h=bt(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(a,h)}return r.range(a)});return De.Decoration.set(o)}},{decorations:t=>t.decorations})}var He=f(require("@codemirror/view"));function or(){return En}var Rn=He.Decoration.line({attributes:{class:"cm-errorLine"}}),En=He.ViewPlugin.fromClass(class{constructor(){this.decorations=He.Decoration.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=bt(e.view.state.doc,{line:o})+1;this.decorations=He.Decoration.set([Rn.range(s)])}else t.annotation("remove-errors")&&(this.decorations=He.Decoration.none)})}},{decorations:e=>e.decorations});var zt=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Ao=m(qs()),Vt=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${zt}`]:{padding:"$space$4 0"}}),Po=m({margin:"0",outline:"none",height:"100%"}),sr=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${F}`]:{right:"calc($space$11 * 2)"}});var rr=f(require("@codemirror/highlight")),nr=f(require("react")),ar=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],a=(c,p)=>{if(c>r){let d=o.slice(r,c);n.push(p?(0,nr.createElement)("span",{children:d,className:p,key:`${c}${r}`}):d),r=c}};return(0,rr.highlightTree)(s,t.match,(c,p,d)=>{a(c,""),a(p,d)}),r{var c,p,d,h,y,S;let t=(0,Ee.normalizePath)(e.files),o=bn({template:e.template,customSetup:e.customSetup,files:t}),s=(0,Ee.normalizePath)((p=(c=e.options)==null?void 0:c.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Is((h=e.options)==null?void 0:h.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(v=>{let g=t[v];if(typeof g=="string"){s.push(v);return}!r&&g.active&&(r=v,g.hidden===!0&&s.push(v)),g.hidden||s.push(v)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Is(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=(0,Ee.addPackageJSONIfNeeded)(o.files,(y=o.dependencies)!=null?y:{},(S=o.devDependencies)!=null?S:{},o.entry);return{visibleFiles:s.filter(v=>n[v]),activeFile:r,files:n,environment:o.environment}},Is=(e,t)=>{let o=(0,Ee.normalizePath)(t),s=(0,Ee.normalizePath)(e);if(s in o)return s;if(!e)return null;let r=null,n=0,a=[".js",".jsx",".ts",".tsx"];for(;!r&&n{if(!t){if(!o)return We.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return M(u({},o),{files:_t(e)})}let s=We[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:_t(u(u({},s.files),e)),dependencies:u(u({},s.dependencies),o==null?void 0:o.dependencies),devDependencies:u(u({},s.devDependencies),o==null?void 0:o.devDependencies),entry:(0,Ee.normalizePath)((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},_t=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var mt=re.createContext(null),yn=3e4,$o=class extends re.PureComponent{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:(0,Ge.extractErrorDetails)(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s=M(u({},s),{[t]:{code:o}})}else typeof t=="object"&&(s=u(u({},s),_t(t)));this.setState({files:(0,Ge.normalizePath)(s)},this.updateClients)};this.updateClients=()=>{var n,a,c,p;let{files:t,sandpackStatus:o}=this.state,s=(a=(n=this.props.options)==null?void 0:n.recompileMode)!=null?a:"delayed",r=(p=(c=this.props.options)==null?void 0:c.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,a,c,p,d,h,y,S,v;let s=new Ge.SandpackClient(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(a=this.props.options)==null?void 0:a.bundlerURL,startRoute:(c=this.props.options)==null?void 0:c.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(h=(d=this.props.options)==null?void 0:d.skipEval)!=null?h:!1,logLevel:(y=this.props.options)==null?void 0:y.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(v=(S=this.props.customSetup)==null?void 0:S.npmRegistries)==null?void 0:v.map(g=>{var k;return(k=M(u({},g),{proxyEnabled:!1}))!=null?k:[]})});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},yn)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(g=>{let k=this.queuedListeners[o][g],$=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([g,k])=>{let $=s.listen(k);this.unsubscribeClientListeners[o][g]=$}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(c=>c())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(a=>a!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r=u({},s);return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=it();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=it();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(c=>c.listen(t));return()=>{n.forEach(c=>c())}}};this.resetFile=t=>{let{files:o}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:M(u({},s.files),{[t]:o[t]})}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:a,editorState:c,error:p,sandpackStatus:d,environment:h,initMode:y}=this.state;return{files:t,environment:h,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:a,status:d,editorState:c,initMode:y,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var a,c,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(a=this.props.options)==null?void 0:a.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(c=this.props.options)==null?void 0:c.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=re.createRef(),this.errorScreenRegistered=re.createRef(),this.openInCSBRegistered=re.createRef(),this.loadingScreenRegistered=re.createRef()}initializeSandpackIframe(){var s,r,n,a,c;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(a=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?a:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((c=this.intersectionObserver)==null||c.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(h=>h.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var c,p,d,h;((c=t.options)==null?void 0:c.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(h=this.props.options)==null?void 0:h.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=pt({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!(0,dt.default)(t.options,this.props.options)||!(0,dt.default)(t.customSetup,this.props.customSetup)||!(0,dt.default)(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(y=>y.updatePreview({files:r,template:n}))}let a=(0,dt.default)(r,this.state.files)?"pristine":"dirty";a!==this.state.editorState&&this.setState({editorState:a})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return re.createElement(mt.Provider,{value:this._getSandpackState()},re.createElement(Os.ClasserProvider,{classes:(n=this.props.options)==null?void 0:n.classes},re.createElement(No,{className:s,style:r,theme:o},t)))}},Mo=$o,Sn=mt.Consumer;function T(){let e=Ds.useContext(mt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let r=e,{dispatch:t,listen:o}=r,s=N(r,["dispatch","listen"]);return{sandpack:u({},s),dispatch:t,listen:o}}var ut=()=>{var t,o,s;let{sandpack:e}=T();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};var Bs=f(require("@code-hike/classer")),Ye=f(require("react"));var me=m({svg:{margin:"auto"}}),F=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${me}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),te=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Hs=m({padding:0}),vn=Mt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),ft=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),jt=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),Ze=m({animation:`${vn} 150ms ease`,color:"$colors$error"});var kn=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),Cn=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),_s=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),js=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${_s}`]:{visibility:"unset"}}),ht=s=>{var r=s,{closableTabs:e,className:t}=r,o=N(r,["closableTabs","className"]);let{sandpack:n}=T(),a=(0,Bs.useClasser)(b),{activeFile:c,visibleFiles:p,setActiveFile:d}=n,h=S=>{S.stopPropagation();let v=S.target.closest("[data-active]"),g=v==null?void 0:v.getAttribute("title");!g||n.closeFile(g)},y=S=>{let v=Xe(S),g=p.reduce((k,$)=>($===S||Xe($)===v&&k.push($),k),[]);return g.length===0?v:Es(S,g)};return Ye.createElement("div",u({className:l(a("tabs"),kn,t),translate:"no"},o),Ye.createElement("div",{"aria-label":"Select active file",className:l(a("tabs-scrollable-container"),Cn),role:"tablist"},p.map(S=>Ye.createElement("button",{key:S,"aria-selected":S===c,className:l(a("tab-button"),F,js),"data-active":S===c,onClick:()=>d(S),role:"tab",title:S,type:"button"},y(S),e&&p.length>1&&Ye.createElement("span",{className:l(a("close-button"),_s),onClick:h},Ye.createElement(Ro,null))))))};var Us=f(require("@code-hike/classer")),Lo=f(require("react"));var xn=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),gt=s=>{var r=s,{className:e,onClick:t}=r,o=N(r,["className","onClick"]);let n=(0,Us.useClasser)(b),{sandpack:a}=T();return Lo.createElement("button",u({className:l(n("button"),F,te,xn,e),onClick:c=>{a.runSandpack(),t==null||t(c)},type:"button"},o),Lo.createElement(rt,null),"Run")};var zs=f(require("@code-hike/classer")),Vs=f(require("react"));var Te=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${b}-stack)`]:{backgroundColor:"$colors$surface2"}}),ne=o=>{var s=o,{className:e}=s,t=N(s,["className"]);let r=(0,zs.useClasser)(b);return Vs.createElement("div",u({className:l(r("stack"),Te,e)},t))};var ir=f(require("@code-hike/classer")),Xt=f(require("@codemirror/closebrackets")),Ne=f(require("@codemirror/commands")),cr=f(require("@codemirror/comment")),lr=f(require("@codemirror/gutter")),pr=f(require("@codemirror/highlight")),Wt=f(require("@codemirror/history")),dr=f(require("@codemirror/matchbrackets")),$e=f(require("@codemirror/state")),Io=f(require("@codemirror/state")),fe=f(require("@codemirror/view")),mr=f(require("@react-hook/intersection-observer")),L=f(require("react"));var Xs=f(require("react"));var Oe=()=>{let{theme:e,id:t,mode:o}=Xs.useContext(lt);return{theme:e,themeId:t,themeMode:o}};var wo=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;se.line(t).from+(o!=null?o:0)-1,Js=()=>Zs.EditorView.theme({"&":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${b}-colors-surface3)`,borderRadius:`var(--${b}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${b}-colors-errorSurface)`,borderRadius:`var(--${b}-border-radius)`},".cm-content":{caretColor:`var(--${b}-colors-accent)`,padding:`0 var(--${b}-space-4)`},".cm-scroller":{fontFamily:`var(--${b}-font-mono)`,lineHeight:`var(--${b}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${b}-colors-surface1)`,color:`var(--${b}-colors-disabled)`,border:"none",paddingLeft:`var(--${b}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${b}-font-lineHeight)`,minWidth:`var(--${b}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${b}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),ue=e=>`${b}-syntax-${e}`,qs=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>M(u({},t),{[`.${ue(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),Ks=e=>P.HighlightStyle.define([{tag:P.tags.link,textDecoration:"underline"},{tag:P.tags.emphasis,fontStyle:"italic"},{tag:P.tags.strong,fontWeight:"bold"},{tag:P.tags.keyword,class:ue("keyword")},{tag:[P.tags.atom,P.tags.number,P.tags.bool],class:ue("static")},{tag:P.tags.standard(P.tags.tagName),class:ue("tag")},{tag:P.tags.variableName,class:ue("plain")},{tag:P.tags.function(P.tags.variableName),class:ue("definition")},{tag:[P.tags.definition(P.tags.function(P.tags.variableName)),P.tags.tagName],class:ue("definition")},{tag:P.tags.propertyName,class:ue("property")},{tag:[P.tags.literal,P.tags.inserted],class:ue(e.syntax.string?"string":"static")},{tag:P.tags.punctuation,class:ue("punctuation")},{tag:[P.tags.comment,P.tags.quote],class:ue("comment")}]),Qs=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},er=(e,t)=>{let o={javascript:(0,Fo.javascript)({jsx:!0,typescript:!1}),typescript:(0,Fo.javascript)({jsx:!0,typescript:!0}),html:(0,Gs.html)(),css:(0,Ws.css)()};for(let s of t)if(e===s.name)return s.language;return o[e]},Ut=(...e)=>Ys.useCallback(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function tr(e){return De.ViewPlugin.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return De.Decoration.none;let o=e.map(s=>{var c,p,d;let r=De.Decoration.line({attributes:{class:(c=s.className)!=null?c:""}}),n=De.Decoration.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),a=bt(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let h=bt(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(a,h)}return r.range(a)});return De.Decoration.set(o)}},{decorations:t=>t.decorations})}var He=f(require("@codemirror/view"));function or(){return En}var Rn=He.Decoration.line({attributes:{class:"cm-errorLine"}}),En=He.ViewPlugin.fromClass(class{constructor(){this.decorations=He.Decoration.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=bt(e.view.state.doc,{line:o})+1;this.decorations=He.Decoration.set([Rn.range(s)])}else t.annotation("remove-errors")&&(this.decorations=He.Decoration.none)})}},{decorations:e=>e.decorations});var zt=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Ao=m(qs()),Vt=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${zt}`]:{padding:"$space$4 0"}}),Po=m({margin:"0",outline:"none",height:"100%"}),sr=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${F}`]:{right:"calc($space$11 * 2)"}});var rr=f(require("@codemirror/highlight")),nr=f(require("react")),ar=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],a=(c,p)=>{if(c>r){let d=o.slice(r,c);n.push(p?(0,nr.createElement)("span",{children:d,className:p,key:`${c}${r}`}):d),r=c}};return(0,rr.highlightTree)(s,t.match,(c,p,d)=>{a(c,""),a(p,d)}),r{let w=L.useRef(null),X=Ut(w,$),A=L.useRef(),{theme:ae,themeId:W}=Oe(),[Q,G]=L.useState(e),[q,C]=L.useState(y==="immediate"),O=(0,ir.useClasser)(b),{listen:be}=T(),x=L.useRef([]),R=L.useRef([]),{isIntersecting:z}=(0,mr.default)(w,{rootMargin:"600px 0px",threshold:.2});L.useImperativeHandle($,()=>({getCodemirror:()=>A.current})),L.useEffect(()=>{(y==="lazy"||y==="user-visible")&&z&&C(!0)},[y,z]);let D=Qs(t,o,k),V=er(D,k),le=Ks(ae),et=ar({langSupport:V,highlightTheme:le,code:e}),je=L.useMemo(()=>h&&h.sort((_,Z)=>_.line-Z.line),[h]);L.useEffect(()=>{if(!w.current||!q)return;let _=setTimeout(function(){let ee=[{key:"Tab",run:ie=>{var Ce;(0,Ne.indentMore)(ie);let pe=g.find(({key:Ae})=>Ae==="Tab");return(Ce=pe==null?void 0:pe.run(ie))!=null?Ce:!0}},{key:"Shift-Tab",run:({state:ie,dispatch:pe})=>{var Ae;(0,Ne.indentLess)({state:ie,dispatch:pe});let Ce=g.find(({key:Nt})=>Nt==="Shift-Tab");return(Ae=Ce==null?void 0:Ce.run(ye))!=null?Ae:!0}},{key:"Escape",run:()=>(p||w.current&&w.current.focus(),!0)},{key:"mod-Backspace",run:Ne.deleteGroupBackward}],j=[(0,fe.highlightSpecialChars)(),(0,Wt.history)(),(0,Xt.closeBrackets)(),...v,fe.keymap.of([...Xt.closeBracketsKeymap,...Ne.defaultKeymap,...Wt.historyKeymap,...cr.commentKeymap,...ee,...g]),V,pr.defaultHighlightStyle.fallback,Js(),le];p?(j.push($e.EditorState.readOnly.of(!0)),j.push(fe.EditorView.editable.of(!1))):(j.push((0,dr.bracketMatching)()),j.push((0,fe.highlightActiveLine)())),je&&j.push(tr(je)),a&&j.push(fe.EditorView.lineWrapping),r&&j.push((0,lr.lineNumbers)()),n&&j.push(or());let Ue=$e.EditorState.create({doc:e,extensions:j}),ze=w.current,ot=ze.querySelector(".sp-pre-placeholder");ot&&ze.removeChild(ot);let ye=new fe.EditorView({state:Ue,parent:ze,dispatch:ie=>{if(ye.update([ie]),ie.docChanged){let pe=ie.newDoc.sliceString(0,ie.newDoc.length);G(pe),s==null||s(pe)}}});ye.contentDOM.setAttribute("data-gramm","false"),ye.contentDOM.setAttribute("aria-label",t?`Code Editor for ${Xe(t)}`:"Code Editor"),p?ye.contentDOM.classList.add("cm-readonly"):ye.contentDOM.setAttribute("tabIndex","-1"),A.current=ye},0);return()=>{var Z;(Z=A.current)==null||Z.destroy(),clearTimeout(_)}},[q,r,a,W,je,p]),L.useEffect(function(){let Z=A.current,ee=!wo(v,x.current)||!wo(g,R.current);Z&&ee&&(Z.dispatch({effects:$e.StateEffect.appendConfig.of(v)}),Z.dispatch({effects:$e.StateEffect.appendConfig.of(fe.keymap.of([...g]))}),x.current=v,R.current=g)},[v,g]),L.useEffect(()=>{A.current&&c==="dirty"&&window.matchMedia("(min-width: 768px)").matches&&A.current.contentDOM.focus()},[]),L.useEffect(()=>{if(A.current&&e!==Q){let _=A.current,Z=_.state.selection.ranges.some(({to:j,from:Ue})=>j>e.length||Ue>e.length)?$e.EditorSelection.cursor(e.length):_.state.selection,ee={from:0,to:_.state.doc.length,insert:e};_.dispatch({changes:ee,selection:Z})}},[e]),L.useEffect(function(){if(!n)return;let Z=be(ee=>{let j=A.current;ee.type==="success"?j==null||j.dispatch({annotations:[new Io.Annotation("remove-errors",!0)]}):ee.type==="action"&&ee.action==="show-error"&&ee.line&&(j==null||j.dispatch({annotations:[new Io.Annotation("show-error",ee.line)]}))});return()=>Z()},[be,n]);let Tt=_=>{_.key==="Enter"&&A.current&&(_.preventDefault(),A.current.contentDOM.focus())},tt=()=>{let _=4;return r&&(_+=6),p||(_+=1),`var(--${b}-space-${_})`};return p?L.createElement(L.Fragment,null,L.createElement("pre",{ref:X,className:l(O("cm",c,D),Po,Ao),translate:"no"},L.createElement("code",{className:l(O("pre-placeholder"),zt),style:{marginLeft:tt()}},et)),p&&d&&L.createElement("span",u({className:l(O("read-only"),sr)},{}),"Read-only")):L.createElement("div",{ref:X,"aria-autocomplete":"list","aria-label":t?`Code Editor for ${Xe(t)}`:"Code Editor","aria-multiline":"true",className:l(O("cm",c,D),Po,Ao),onKeyDown:Tt,role:"textbox",tabIndex:0,translate:"no",suppressHydrationWarning:!0},L.createElement("pre",{className:l(O("pre-placeholder"),zt),style:{marginLeft:tt()}},et))});var Oo=Me.forwardRef(({style:e,showTabs:t,showLineNumbers:o=!1,showInlineErrors:s=!1,showRunButton:r=!0,wrapContent:n=!1,closableTabs:a=!1,initMode:c,extensions:p,extensionsKeymap:d,id:h,readOnly:y,showReadOnly:S,additionalLanguages:v},g)=>{let{sandpack:k}=T(),{code:$,updateCode:w,readOnly:X}=ut(),{activeFile:A,status:ae,editorState:W}=k,Q=t!=null?t:k.visibleFiles.length>1,G=(0,ur.useClasser)(b),q=C=>{w(C)};return Me.createElement(ne,{className:G("editor"),style:e},Q&&Me.createElement(ht,{closableTabs:a}),Me.createElement("div",{className:l(G("code-editor"),Vt)},Me.createElement(Be,{key:A,ref:g,additionalLanguages:v,code:$,editorState:W,extensions:p,extensionsKeymap:d,filePath:A,id:h,initMode:c||k.initMode,onCodeUpdate:q,readOnly:y||X,showInlineErrors:s,showLineNumbers:o,showReadOnly:S,wrapContent:n}),r&&ae==="idle"?Me.createElement(gt,null):null))});var fr=f(require("@code-hike/classer")),Le=f(require("react"));var Do=Le.forwardRef((p,c)=>{var d=p,{showTabs:e,showLineNumbers:t,decorators:o,code:s,initMode:r,wrapContent:n}=d,a=N(d,["showTabs","showLineNumbers","decorators","code","initMode","wrapContent"]);let{sandpack:h}=T(),{code:y}=ut(),S=(0,fr.useClasser)(b),v=e!=null?e:h.visibleFiles.length>1;return Le.createElement(ne,u({},a),v?Le.createElement(ht,null):null,Le.createElement("div",{className:l(S("code-editor"),Vt)},Le.createElement(Be,{ref:c,code:s!=null?s:y,decorators:o,filePath:h.activeFile,initMode:r||h.initMode,showLineNumbers:t,showReadOnly:!1,wrapContent:n,readOnly:!0})),h.status==="idle"?Le.createElement(gt,null):null)});var Ho=f(require("react"));var Yt=f(require("react"));var qe=f(require("react"));var hr=f(require("@code-hike/classer")),Je=f(require("react"));var Tn=m({borderRadius:"0",width:"100%",padding:0,marginBottom:"$space$2",span:{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},svg:{marginRight:"$space$1"}}),Gt=({selectFile:e,path:t,active:o,onClick:s,depth:r,isDirOpen:n})=>{let a=(0,hr.useClasser)(b),c=h=>{e&&e(t),s==null||s(h)},p=t.split("/").filter(Boolean).pop(),d=()=>e?Je.createElement(xo,null):n?Je.createElement(ko,null):Je.createElement(Co,null);return Je.createElement("button",{className:l(a("button","explorer"),F,Tn),"data-active":o,onClick:c,style:{paddingLeft:18*r+"px"},title:p,type:"button"},d(),Je.createElement("span",null,p))};var gr=({prefixedPath:e,files:t,selectFile:o,activeFile:s,depth:r,autoHiddenFiles:n,visibleFiles:a})=>{let[c,p]=qe.useState(!0);return qe.createElement("div",{key:e},qe.createElement(Gt,{depth:r,isDirOpen:c,onClick:()=>p(h=>!h),path:e+"/"}),c&&qe.createElement(Zt,{activeFile:s,autoHiddenFiles:n,depth:r+1,files:t,prefixedPath:e,selectFile:o,visibleFiles:a}))};var br=({autoHiddenFiles:e,visibleFiles:t,files:o,prefixedPath:s})=>{let r=t.length>0,n=e&&!r,a=e&&!!r,c=Object.keys(o).filter(h=>{var S;let y=h.startsWith(s);return a?y&&t.includes(h):n?y&&!((S=o[h])==null?void 0:S.hidden):y}).map(h=>h.substring(s.length)),p=new Set(c.filter(h=>h.includes("/")).map(h=>`${s}${h.split("/")[0]}/`)),d=c.filter(h=>!h.includes("/")).map(h=>`${s}${h}`);return{directories:Array.from(p),modules:d}};var Zt=({depth:e=0,activeFile:t,selectFile:o,prefixedPath:s,files:r,autoHiddenFiles:n,visibleFiles:a})=>{let{directories:c,modules:p}=br({visibleFiles:a,autoHiddenFiles:n,prefixedPath:s,files:r});return Yt.createElement("div",null,c.map(d=>Yt.createElement(gr,{key:d,activeFile:t,autoHiddenFiles:n,depth:e,files:r,prefixedPath:d,selectFile:o,visibleFiles:a})),p.map(d=>Yt.createElement(Gt,{key:d,active:t===d,depth:e,path:d,selectFile:o})))};var Nn=m({padding:"$space$3",overflow:"auto",height:"100%"}),$n=s=>{var r=s,{className:e,autoHiddenFiles:t=!1}=r,o=N(r,["className","autoHiddenFiles"]);let{sandpack:n}=T();return Ho.createElement("div",u({className:l(Te,Nn,`${b}-file-explorer`,e)},o),Ho.createElement(Zt,{activeFile:n.activeFile,autoHiddenFiles:t,files:n.files,prefixedPath:"/",selectFile:n.openFile,visibleFiles:n.visibleFilesFromProps}))};var Sr=f(require("@code-hike/classer")),Y=f(require("react"));var yr=e=>{let t=e.match(/(https?:\/\/.*?)\//);return t&&t[1]?[t[1],e.replace(t[1],"")]:[e,"/"]};var Mn=m({display:"flex",alignItems:"center",height:"$layout$headerHeight",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",background:"$colors$surface1"}),Ln=m({backgroundColor:"$colors$surface2",color:"$colors$clickable",padding:"$space$1 $space$3",borderRadius:"99999px",border:"1px solid $colors$surface2",height:"24px",lineHeight:"24px",fontSize:"inherit",outline:"none",flex:1,marginLeft:"$space$4",width:"0",transition:"background $transitions$default","&:hover":{backgroundColor:"$colors$surface3"},"&:focus":{backgroundColor:"$surface1",border:"1px solid $colors$accent",color:"$colors$base"}}),Bo=r=>{var n=r,{clientId:e,onURLChange:t,className:o}=n,s=N(n,["clientId","onURLChange","className"]);var q;let[a,c]=Y.useState(""),{sandpack:p,dispatch:d,listen:h}=T(),[y,S]=Y.useState((q=p.startRoute)!=null?q:"/"),[v,g]=Y.useState(!1),[k,$]=Y.useState(!1),w=(0,Sr.useClasser)(b);Y.useEffect(()=>{let C=h(O=>{if(O.type==="urlchange"){let{url:be,back:x,forward:R}=O,[z,D]=yr(be);c(z),S(D),g(x),$(R)}},e);return()=>C()},[]);let X=C=>{let O=C.target.value.startsWith("/")?C.target.value:`/${C.target.value}`;S(O)},A=C=>{C.code==="Enter"&&(C.preventDefault(),C.stopPropagation(),typeof t=="function"&&t(a+C.currentTarget.value))},ae=()=>{d({type:"refresh"})},W=()=>{d({type:"urlback"})},Q=()=>{d({type:"urlforward"})},G=l(w("button","icon"),F,Hs,m({minWidth:"$space$6",justifyContent:"center"}));return Y.createElement("div",u({className:l(w("navigator"),Mn,o)},s),Y.createElement("button",{"aria-label":"Go back one page",className:G,disabled:!v,onClick:W,type:"button"},Y.createElement(bo,null)),Y.createElement("button",{"aria-label":"Go forward one page",className:G,disabled:!k,onClick:Q,type:"button"},Y.createElement(yo,null)),Y.createElement("button",{"aria-label":"Refresh page",className:G,onClick:ae,type:"button"},Y.createElement(nt,null)),Y.createElement("input",{"aria-label":"Current Sandpack URL",className:l(w("input"),Ln),name:"Current Sandpack URL",onChange:X,onKeyDown:A,type:"text",value:y}))};var $r=f(require("@code-hike/classer")),U=f(require("react"));var vr=f(require("react"));var _o=()=>{var o;let{sandpack:e}=T(),{error:t}=e;return vr.useEffect(()=>{e.errorScreenRegisteredRef.current=!0},[]),(o=t==null?void 0:t.message)!=null?o:null};var yt=f(require("react"));var Jt=200,jo=(e,t)=>{let{sandpack:o,listen:s}=T(),[r,n]=yt.useState("LOADING");return yt.useEffect(()=>{o.loadingScreenRegisteredRef.current=!0;let a=s(c=>{c.type==="start"&&c.firstLoad===!0&&n("LOADING"),c.type==="done"&&n(p=>p==="LOADING"?"PRE_FADING":"HIDDEN")},e);return()=>{a()}},[e,o.status==="idle"]),yt.useEffect(()=>{let a;return r==="PRE_FADING"&&!t?n("FADING"):r==="FADING"&&(a=setTimeout(()=>n("HIDDEN"),Jt)),()=>{clearTimeout(a)}},[r,t]),o.status==="timeout"?"TIMEOUT":o.status!=="running"?"HIDDEN":r};var Uo=e=>{let{dispatch:t}=T();return{refresh:()=>t({type:"refresh"},e),back:()=>t({type:"urlback"},e),forward:()=>t({type:"urlforward"},e)}};function wn(e){var r,n;let{activeFile:t,bundlerState:o}=e;if(o==null)return null;let s=o.transpiledModules[t+":"];return(n=(r=s==null?void 0:s.source)==null?void 0:r.compiledCode)!=null?n:null}var zo=()=>{let{sandpack:e}=T();return e.status!=="running"?null:wn(e)};var St=f(require("react"));var vt=()=>{let{sandpack:e,listen:t,dispatch:o}=T(),s=St.useRef(null),r=St.useRef(it());return St.useEffect(()=>{let a=s.current,c=r.current;return a!==null&&e.registerBundler(a,c),()=>e.unregisterBundler(c)},[]),{sandpack:e,getClient:()=>e.clients[r.current]||null,clientId:r.current,iframe:s,listen:a=>t(a,r.current),dispatch:a=>o(a,r.current)}};var kr=f(require("@code-hike/classer")),Vo=f(require("react"));var kt=s=>{var r=s,{children:e,className:t}=r,o=N(r,["children","className"]);let n=_o(),a=(0,kr.useClasser)(b);return!n&&!e?null:Vo.createElement("div",u({className:l(a("overlay","error"),ft,jt,t),translate:"no"},o),Vo.createElement("div",{className:l(a("error-message"),Ze)},n||e))};var Tr=f(require("@code-hike/classer")),_e=f(require("react"));var Er=f(require("@code-hike/classer")),he=f(require("react"));var Rr=f(require("@code-hike/classer")),Xo=f(require("react"));var Cr=f(require("lz-string")),ce=f(require("react"));var Fn=e=>Cr.default.compressToBase64(JSON.stringify(e)).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""),xr="https://codesandbox.io/api/v1/sandboxes/define",An=(e,t)=>{let o=Object.keys(e).reduce((s,r)=>{let n=r.replace("/",""),a={content:e[r].code,isBinary:!1};return M(u({},s),{[n]:a})},{});return Fn(u({files:o},t?{template:t}:null))},qt=o=>{var s=o,{children:e}=s,t=N(s,["children"]);var p,d,h;let{sandpack:r}=T(),n=ce.useRef(null),[a,c]=ce.useState();return ce.useEffect(function(){let S=setTimeout(()=>{let v=An(r.files,r.environment),g=new URLSearchParams({parameters:v,query:new URLSearchParams({file:r.activeFile,utm_medium:"sandpack"}).toString()});c(g)},600);return()=>{clearTimeout(S)}},[r.activeFile,r.environment,r.files]),ce.useEffect(function(){r.openInCSBRegisteredRef.current=!0},[]),((h=(d=(p=a==null?void 0:a.get)==null?void 0:p.call(a,"parameters"))==null?void 0:d.length)!=null?h:0)>1500?ce.createElement("button",u({onClick:()=>{var y;return(y=n.current)==null?void 0:y.submit()},title:"Open in CodeSandbox"},t),ce.createElement("form",{ref:n,action:xr,method:"POST",style:{visibility:"hidden"},target:"_blank"},Array.from(a,([y,S])=>ce.createElement("input",{key:y,name:y,type:"hidden",value:S}))),e):ce.createElement("a",u({href:`${xr}?${a==null?void 0:a.toString()}`,rel:"noreferrer noopener",target:"_blank",title:"Open in CodeSandbox"},t),e)};var Ke=()=>{let e=(0,Rr.useClasser)(b);return Xo.createElement(qt,{className:l(e("button","icon-standalone"),F,me,te)},Xo.createElement(vo,null))};var Wo=m({transform:"translate(-4px, 9px) scale(0.13, 0.13)","*":{position:"absolute",width:"96px",height:"96px"}}),Pn=m({position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",width:"32px",height:"32px",borderRadius:"$border$radius",[`.${Wo}`]:{display:"flex"},[`.${F}`]:{display:"none"},[`&:hover .${F}`]:{display:"flex"},[`&:hover .${Wo}`]:{display:"none"}}),In=Mt({"0%":{transform:"rotateX(-25.5deg) rotateY(45deg)"},"100%":{transform:"rotateX(-25.5deg) rotateY(405deg)"}}),On=m({animation:`${In} 1s linear infinite`,animationFillMode:"forwards",transformStyle:"preserve-3d",transform:"rotateX(-25.5deg) rotateY(45deg)","*":{border:"10px solid $colors$clickable",borderRadius:"8px",background:"$colors$surface1"},".top":{transform:"rotateX(90deg) translateZ(44px)",transformOrigin:"50% 50%"},".bottom":{transform:"rotateX(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".front":{transform:"rotateY(0deg) translateZ(44px)",transformOrigin:"50% 50%"},".back":{transform:"rotateY(-180deg) translateZ(44px)",transformOrigin:"50% 50%"},".left":{transform:"rotateY(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".right":{transform:"rotateY(90deg) translateZ(44px)",transformOrigin:"50% 50%"}}),Kt=s=>{var r=s,{className:e,showOpenInCodeSandbox:t}=r,o=N(r,["className","showOpenInCodeSandbox"]);let n=(0,Er.useClasser)(b);return he.createElement("div",u({className:l(n("cube-wrapper"),Pn,e),title:"Open in CodeSandbox"},o),t&&he.createElement(Ke,null),he.createElement("div",{className:l(n("cube"),Wo)},he.createElement("div",{className:l(n("sides"),On)},he.createElement("div",{className:"top"}),he.createElement("div",{className:"right"}),he.createElement("div",{className:"bottom"}),he.createElement("div",{className:"left"}),he.createElement("div",{className:"front"}),he.createElement("div",{className:"back"}))))};var Dn=m({backgroundColor:"$colors$surface1"}),Ct=a=>{var c=a,{clientId:e,loading:t,className:o,style:s,showOpenInCodeSandbox:r}=c,n=N(c,["clientId","loading","className","style","showOpenInCodeSandbox"]);let p=jo(e,t),d=(0,Tr.useClasser)(b);if(p==="HIDDEN")return null;if(p==="TIMEOUT")return _e.createElement("div",u({className:l(d("overlay","error"),ft,jt,o)},n),_e.createElement("div",{className:l(d("error-message"),Ze)},"Unable to establish connection with the sandpack bundler. Make sure you are online or try again later. If the problem persists, please report it via"," ",_e.createElement("a",{className:l(d("error-message"),Ze),href:"mailto:hello@codesandbox.io?subject=Sandpack Timeout Error"},"email")," ","or submit an issue on"," ",_e.createElement("a",{className:l(d("error-message"),Ze),href:"https://github.com/codesandbox/sandpack/issues",rel:"noreferrer noopener",target:"_blank"},"GitHub.")));let h=p==="LOADING"||p==="PRE_FADING";return _e.createElement("div",u({className:l(d("overlay","loading"),ft,Dn,o),style:M(u({},s),{opacity:h?1:0,transition:`opacity ${Jt}ms ease-out`})},n),_e.createElement(Kt,{showOpenInCodeSandbox:r}))};var Nr=f(require("@code-hike/classer")),Go=f(require("react"));var Zo=({clientId:e})=>{let{refresh:t}=Uo(e),o=(0,Nr.useClasser)(b);return Go.createElement("button",{className:l(o("button","icon-standalone"),F,me,te),onClick:t,title:"Refresh Sandpack",type:"button"},Go.createElement(nt,null))};var Hn=m({flex:1,display:"flex",flexDirection:"column",background:"white",overflow:"auto",position:"relative"}),Bn=m({border:"0",outline:"0",width:"100%",height:"100%",minHeight:"160px",maxHeight:"2000px",flex:1}),_n=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),Yo=U.forwardRef((d,p)=>{var h=d,{showNavigator:e=!1,showRefreshButton:t=!0,showOpenInCodeSandbox:o=!0,showSandpackErrorOverlay:s=!0,actionsChildren:r=U.createElement(U.Fragment,null),children:n,className:a}=h,c=N(h,["showNavigator","showRefreshButton","showOpenInCodeSandbox","showSandpackErrorOverlay","actionsChildren","children","className"]);let{sandpack:y,listen:S,iframe:v,getClient:g,clientId:k}=vt(),[$,w]=U.useState(null),{status:X,errorScreenRegisteredRef:A,openInCSBRegisteredRef:ae,loadingScreenRegisteredRef:W}=y,Q=(0,$r.useClasser)(b);ae.current=!0,A.current=!0,W.current=!0,U.useEffect(()=>S(C=>{C.type==="resize"&&w(C.height)}),[]),U.useImperativeHandle(p,()=>({clientId:k,getClient:g}),[g,k]);let G=q=>{!v.current||(v.current.src=q)};return U.createElement(ne,u({className:l(`${b}-preview`,a)},c),e&&U.createElement(Bo,{clientId:k,onURLChange:G}),U.createElement("div",{className:l(Q("preview-container"),Hn)},U.createElement("iframe",{ref:v,className:l(Q("preview-iframe"),Bn),style:{height:$||void 0},title:"Sandpack Preview"}),s&&U.createElement(kt,null),U.createElement("div",{className:l(Q("preview-actions"),_n)},r,!e&&t&&X==="running"&&U.createElement(Zo,{clientId:k}),o&&U.createElement(Ke,null)),U.createElement(Ct,{clientId:k,showOpenInCodeSandbox:o}),n))});var Mr=f(require("@code-hike/classer")),Se=f(require("react"));var jn=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",overflow:"auto",minHeight:"160px",flex:1}),Un=o=>{var s=o,{className:e}=s,t=N(s,["className"]);let{sandpack:r}=T(),n=zo(),a=(0,Mr.useClasser)(b),c=Se.useRef(null);return Se.useEffect(()=>{let p=c.current;return p&&r.registerBundler(p,"hidden"),()=>{r.unregisterBundler("hidden")}},[]),Se.createElement("div",u({className:l(a("transpiled-code"),Te,jn,e)},t),Se.createElement(Do,u({code:n!=null?n:"",initMode:r.initMode},t)),Se.createElement("iframe",{ref:c,style:{display:"none"},title:"transpiled sandpack code"}),Se.createElement(kt,null),Se.createElement(Ct,{clientId:"hidden",showOpenInCodeSandbox:!1}))};var Lr=f(require("@code-hike/classer")),ge=f(require("react"));var zn=m({height:"$layout$height",width:"100%"}),Vn=r=>{var n=r,{clientId:e,theme:t,className:o}=n,s=N(n,["clientId","theme","className"]);let{listen:a,sandpack:c}=T(),{themeMode:p}=Oe(),d=(0,Lr.useClasser)(b),h=ge.useRef(),[y,S]=ge.useState(null);return ge.useEffect(()=>{import("react-devtools-inline/frontend").then(v=>{h.current=v})},[]),ge.useEffect(()=>a(g=>{var k;if(g.type==="activate-react-devtools"){let $=e?c.clients[e]:Object.values(c.clients)[0],w=(k=$==null?void 0:$.iframe)==null?void 0:k.contentWindow;h.current&&w&&S(h.current.initialize(w))}}),[h,e,a,c.clients]),ge.useEffect(()=>{c.registerReactDevTools("legacy")},[]),y?ge.createElement("div",u({className:l(d("devtools"),zn,o)},s),ge.createElement(y,{browserTheme:t!=null?t:p})):null};var H=f(require("react"));var wr=f(require("@code-hike/classer")),Qt=f(require("react"));var Fr=m({border:"1px solid $colors$surface2",display:"flex",flexWrap:"wrap",alignItems:"stretch",borderRadius:"$border$radius",overflow:"hidden",position:"relative",backgroundColor:"$colors$surface2",gap:1,[`> .${Te}`]:{flexGrow:1,flexShrink:1,flexBasis:"0",minWidth:"350px",height:"$layout$height","@media print":{height:"auto",display:"block"},"@media screen and (max-width: 768px)":{height:"auto",minWidth:"100% !important;"}},[`> .${b}-file-explorer`]:{flex:.2,minWidth:200}}),Jo=Qt.forwardRef((r,s)=>{var n=r,{children:e,className:t}=n,o=N(n,["children","className"]);let{sandpack:a}=T(),c=(0,wr.useClasser)(b),p=Ut(a.lazyAnchorRef,s);return Qt.createElement("div",u({ref:p,className:l(c("layout"),Fr,t)},o),e)});var Re=f(require("react"));var Xn=m({justifyContent:"space-between",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",fontFamily:"$font$mono",maxHeight:"$layout$headerHeight",overflowX:"auto",whiteSpace:"nowrap"}),qo=m({display:"flex",flexDirection:"row",alignItems:"center",gap:"$space$2"}),Ar=({status:e,suiteOnly:t,setSuiteOnly:o,setVerbose:s,verbose:r,watchMode:n,setWatchMode:a,showSuitesOnly:c})=>{let p=l(F,te,m({padding:"$space$1 $space$3"}));return Re.createElement("div",{className:l(Xn,qo)},Re.createElement("div",{className:l(qo)},Re.createElement("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},Re.createElement(Pe,null),"Tests")),Re.createElement("div",{className:l(qo)},c&&Re.createElement("button",{className:p,"data-active":t,disabled:e==="initialising",onClick:o},"Suite only"),Re.createElement("button",{className:p,"data-active":r,disabled:e==="initialising",onClick:s},"Verbose"),Re.createElement("button",{className:p,"data-active":n,disabled:e==="initialising",onClick:a},"Watch")))};var Pr=f(require("@code-hike/classer")),Ko=f(require("react"));var Ir=({onClick:e})=>{let t=(0,Pr.useClasser)(b);return Ko.createElement("button",{className:l(t("button","icon-standalone"),F,me,te),onClick:e,title:"Run tests",type:"button"},Ko.createElement(rt,null))};var I=f(require("react"));var Fe=f(require("react"));var we=f(require("react"));var Or=e=>({"--test-pass":e?"#18df16":"#15c213","--test-fail":e?"#df162b":"#c21325","--test-skip":e?"#eace2b":"#c2a813","--test-run":e?"#eace2b":"#c2a813","--test-title":e?"#3fbabe":"#256c6f"}),eo=m({variants:{status:{pass:{color:"var(--test-pass)"},fail:{color:"var(--test-fail)"},skip:{color:"var(--test-skip)"},title:{color:"var(--test-title)"}}}}),ve=eo({status:"pass"}),J=eo({status:"fail"}),to=eo({status:"skip"}),Dr=eo({status:"title"}),Qo=m({variants:{status:{pass:{background:"var(--test-pass)",color:"$colors$surface1"},fail:{background:"var(--test-fail)",color:"$colors$surface1"},run:{background:"var(--test-run)",color:"$colors$surface1"}}}}),Hr=Qo({status:"run"}),Br=Qo({status:"pass"}),es=Qo({status:"fail"});var Wn=m({marginLeft:"$space$4"}),Gn=m({marginBottom:"$space$2",color:"$colors$clickable"}),Zn=m({marginBottom:"$space$2",color:"$colors$hover"}),Yn=m({marginLeft:"$space$2"}),ts=m({marginRight:"$space$2"}),oo=({tests:e,style:t})=>we.default.createElement("div",{className:l(Wn)},e.map(o=>we.default.createElement("div",{key:o.name,className:l(Gn)},o.status==="pass"&&we.default.createElement("span",{className:l(ve,ts)},"\u2713"),o.status==="fail"&&we.default.createElement("span",{className:l(J,ts)},"\u2715"),o.status==="idle"&&we.default.createElement("span",{className:l(to,ts)},"\u25CB"),we.default.createElement("span",{className:l(Zn)},o.name),o.duration!==void 0&&we.default.createElement("span",{className:l(Yn)},"(",o.duration," ms)"))));var _r=f(require("clean-set")),jr=e=>so(e).filter(t=>t.status==="fail"),so=e=>Object.values(e.tests).concat(...Object.values(e.describes).map(so)),Ur=e=>e.map(ro).reduce((t,o)=>({pass:t.pass+o.pass,fail:t.fail+o.fail,skip:t.skip+o.skip,total:t.total+o.total}),{pass:0,skip:0,fail:0,total:0}),ro=e=>so(e).reduce((t,o)=>({pass:o.status==="pass"?t.pass+1:t.pass,fail:o.status==="fail"?t.fail+1:t.fail,skip:o.status==="idle"||o.status==="running"?t.skip+1:t.skip,total:t.total+1}),{pass:0,fail:0,skip:0,total:0}),zr=e=>e.filter(t=>Object.values(t.describes).length>0||Object.values(t.tests).length>0).map(ro).reduce((t,o)=>({pass:t.pass+(o.fail===0?1:0),fail:t.fail+(o.fail>0?1:0),total:t.total+1}),{pass:0,fail:0,total:0}),Vr=e=>Qe(e,so).reduce((t,o)=>t+(o.duration||0),0),no=e=>Object.values(e.describes).length===0&&Object.values(e.tests).length===0,xt=e=>{let t=e.length-1,o=e.slice(0,t),s=e[t];return[o,s]},Qe=(e,t)=>e.map(t).reduce((o,s)=>o.concat(s),[]),ke=(e,t)=>o=>(0,_r.default)(o,e,t);var Jn=m({color:"$colors$hover",marginBottom:"$space$2"}),qn=m({marginLeft:"$space$4"}),os=({describes:e})=>Fe.createElement(Fe.Fragment,null,e.map(t=>{if(no(t))return null;let o=Object.values(t.tests),s=Object.values(t.describes);return Fe.createElement("div",{key:t.name,className:l(qn)},Fe.createElement("div",{className:l(Jn)},t.name),Fe.createElement(oo,{tests:o}),Fe.createElement(os,{describes:s}))}));var Xr=f(require("react"));var Kn=m({color:"$colors$hover",fontSize:"$font$size",padding:"$space$2",whiteSpace:"pre-wrap"}),ss=({error:e,path:t})=>Xr.createElement("div",{className:l(Kn),dangerouslySetInnerHTML:{__html:Qn(e,t)}}),ao=e=>e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'"),Qn=(e,t)=>{let o="";if(e.matcherResult?o=`${ao(e.message).replace(/(expected)/m,`$1`).replace(/(received)/m,`$1`).replace(/(Difference:)/m,"$1").replace(/(Expected:)(.*)/m,`$1$2`).replace(/(Received:)(.*)/m,`$1$2`).replace(/^(-.*)/gm,`$1`).replace(/^(\+.*)/gm,`$1`)}`:o=ao(e.message),e.mappedErrors&&e.mappedErrors[0]&&e.mappedErrors[0].fileName.endsWith(t)&&e.mappedErrors[0]._originalScriptCode){let r=e.mappedErrors[0]._originalScriptCode||[],n=Math.max(...r.map(c=>(c.lineNumber+"").length))+2,a=Array.from({length:n}).map(()=>" ");o+="
",o+="
",o+="
",r.filter(c=>c.content.trim()).forEach(c=>{let p=(c.lineNumber+"").length,d=[...a];d.length-=p,c.highlight&&(d.length-=2);let h=c.content.indexOf(".to"),y=Array.from({length:a.length+h-(n-1)},()=>" "),S=ao(c.content).replace(/(describe|test|it)(\()('|"|`)(.*)('|"|`)/m,`$1$2$3$4$5`).replace(/(expect\()(.*)(\)\..*)(to[\w\d]*)(\()(.*)(\))/m,`$1$2$3$4$5$6$7`);o+=`
`+(c.highlight?`> `:"")+d.join("")+ao(""+c.lineNumber)+" | "+S+"
"+(c.highlight?"
"+a.join("")+" | "+y.join("")+`^
`:"")}),o+="
"}return o.replace(/(?:\r\n|\r|\n)/g,"
")};var ea=m({display:"flex",flexDirection:"row",alignItems:"center",marginBottom:"$space$2"}),rs=m({marginBottom:"$space$2"}),ta=m({fontWeight:"bold"}),io=m({borderRadius:"calc($border$radius / 2)"}),oa=m({padding:"$space$1 $space$2",fontFamily:"$font$mono",textTransform:"uppercase",marginRight:"$space$2"}),sa=m({fontFamily:"$font$mono",cursor:"pointer",display:"inline-block"}),ra=m({color:"$colors$clickable",textDecorationStyle:"dotted",textDecorationLine:"underline"}),na=m({color:"$colors$hover",fontWeight:"bold",textDecorationStyle:"dotted",textDecorationLine:"underline"}),Wr=({specs:e,openSpec:t,status:o,verbose:s})=>I.createElement(I.Fragment,null,e.map(r=>{if(r.error)return I.createElement("div",{key:r.name,className:l(rs)},I.createElement(co,{className:l(io,es)},"Error"),I.createElement(Gr,{onClick:()=>t(r.name),path:r.name}),I.createElement(ss,{error:r.error,path:r.name}));if(no(r))return null;let n=Object.values(r.tests),a=Object.values(r.describes),c=ro(r);return I.createElement("div",{key:r.name,className:l(rs)},I.createElement("div",{className:l(ea)},o==="complete"?c.fail>0?I.createElement(co,{className:l(io,es)},"Fail"):I.createElement(co,{className:l(io,Br)},"Pass"):I.createElement(co,{className:l(io,Hr)},"Run"),I.createElement(Gr,{onClick:()=>t(r.name),path:r.name})),s&&I.createElement(oo,{tests:n}),s&&I.createElement(os,{describes:a}),jr(r).map(p=>I.createElement("div",{key:`failing-${p.name}`,className:l(rs)},I.createElement("div",{className:l(ta,J)},"\u25CF ",p.blocks.join(" \u203A ")," \u203A ",p.name),p.errors.map(d=>I.createElement(ss,{key:`failing-${p.name}-error`,error:d,path:p.path})))))})),co=({children:e,className:t})=>I.createElement("span",{className:l(oa,t)},e),Gr=({onClick:e,path:t})=>{let o=t.split("/"),s=o.slice(0,o.length-1).join("/")+"/",r=o[o.length-1];return I.createElement("button",{className:l(F,sa),onClick:e},I.createElement("span",{className:l(ra)},s),I.createElement("span",{className:l(na)},r))};var oe=f(require("react"));var Zr=m({marginBottom:"$space$2"}),ns=m({fontWeight:"bold",color:"$colors$hover",whiteSpace:"pre-wrap"}),aa=m({fontWeight:"bold",color:"$colors$clickable"}),Yr=({suites:e,tests:t,duration:o})=>{let s="Test suites: ",r=n=>{let a=s.length-n.length,c=Array.from({length:a},()=>" ").join("");return n+c};return oe.createElement("div",{className:l(aa)},oe.createElement("div",{className:l(Zr)},oe.createElement("span",{className:l(ns)},s),e.fail>0&&oe.createElement("span",{className:l(J)},e.fail," failed,"," "),e.pass>0&&oe.createElement("span",{className:l(ve)},e.pass," passed,"," "),oe.createElement("span",null,e.total," total")),oe.createElement("div",{className:l(Zr)},oe.createElement("span",{className:l(ns)},r("Tests:")),t.fail>0&&oe.createElement("span",{className:l(J)},t.fail," failed,"," "),t.skip>0&&oe.createElement("span",{className:l(to)},t.skip," skipped,"," "),t.pass>0&&oe.createElement("span",{className:l(ve)},t.pass," passed,"," "),oe.createElement("span",null,t.total," total")),oe.createElement("div",{className:l(ns)},r("Time:"),o/1e3,"s"))};var ia=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),ca={specs:{},status:"initialising",verbose:!1,watchMode:!0,suiteOnly:!1,specsCount:0},lo=c=>{var p=c,{verbose:e=!1,watchMode:t=!0,style:o,className:s,onComplete:r,actionsChildren:n}=p,a=N(p,["verbose","watchMode","style","className","onComplete","actionsChildren"]);let d=Oe(),{getClient:h,iframe:y,listen:S,sandpack:v}=vt(),[g,k]=H.useState(M(u({},ca),{verbose:e,watchMode:t}));H.useEffect(()=>{let C=[],O="";return S(x=>{if(!(g.suiteOnly&&("path"in x&&x.path!==v.activeFile||"test"in x&&"path"in x.test&&x.test.path!==v.activeFile))){if(x.type==="action"&&x.action==="clear-errors"&&x.source==="jest"){O=x.path;return}if(x.type==="test"){if(x.event==="initialize_tests")return C=[],O="",g.watchMode?$():k(R=>M(u({},R),{status:"idle",specs:{}}));if(x.event==="test_count")return k(R=>M(u({},R),{specsCount:x.count}));if(x.event==="total_test_start")return C=[],k(R=>M(u({},R),{status:"running"}));if(x.event==="total_test_end")return k(R=>(r!==void 0&&r(R.specs),M(u({},R),{status:"complete"})));if(x.event==="add_file")return k(ke(["specs",x.path],{describes:{},tests:{},name:x.path}));if(x.event==="remove_file")return k(R=>{let z=Object.entries(R.specs).reduce((D,[V,le])=>V===x.path?D:M(u({},D),{[V]:le}),{});return M(u({},R),{specs:z})});if(x.event==="file_error")return k(ke(["specs",x.path,"error"],x.error));if(x.event==="describe_start"){C.push(x.blockName);let[R,z]=xt(C),D=O;return z===void 0?void 0:k(ke(["specs",D,"describes",...Qe(R,V=>[V,"describes"]),z],{name:x.blockName,tests:{},describes:{}}))}if(x.event==="describe_end"){C.pop();return}if(x.event==="add_test"){let[R,z]=xt(C),D={status:"idle",errors:[],name:x.testName,blocks:[...C],path:x.path};return k(z===void 0?ke(["specs",x.path,"tests",x.testName],D):ke(["specs",x.path,"describes",...Qe(R,V=>[V,"describes"]),z,"tests",x.testName],D))}if(x.event==="test_start"){let{test:R}=x,[z,D]=xt(R.blocks),V={status:"running",name:R.name,blocks:R.blocks,path:R.path,errors:[]};return k(D===void 0?ke(["specs",R.path,"tests",R.name],V):ke(["specs",R.path,"describes",...Qe(z,le=>[le,"describes"]),D,"tests",R.name],V))}if(x.event==="test_end"){let{test:R}=x,[z,D]=xt(R.blocks),V={status:R.status,errors:R.errors,duration:R.duration,name:R.name,blocks:R.blocks,path:R.path};return k(D===void 0?ke(["specs",R.path,"tests",R.name],V):ke(["specs",R.path,"describes",...Qe(z,le=>[le,"describes"]),D,"tests",R.name],V))}}}})},[g.suiteOnly,g.watchMode,v.activeFile]);let $=()=>{k(O=>M(u({},O),{status:"running",specs:{}}));let C=h();C&&C.dispatch({type:"run-all-tests"})},w=()=>{k(O=>M(u({},O),{status:"running",specs:{}}));let C=h();C&&C.dispatch({type:"run-tests",path:v.activeFile})},X=/.*\.(test|spec)\.[tj]sx?$/,A=v.activeFile.match(X)!==null;H.useEffect(function(){return S(({type:be})=>{be==="done"&&g.watchMode&&(A?w():$())})},[w,$,g.watchMode,A]);let ae=C=>{v.setActiveFile(C)},W=Object.values(g.specs),Q=Vr(W),G=Ur(W),q=zr(W);return H.createElement(ne,u({className:l(`${b}-tests`,s),style:u(u({},Or(d.themeMode==="dark")),o)},a),H.createElement("iframe",{ref:y,style:{display:"none"},title:"Sandpack Tests"}),H.createElement(Ar,{setSuiteOnly:()=>k(C=>M(u({},C),{suiteOnly:!C.suiteOnly})),setVerbose:()=>k(C=>M(u({},C),{verbose:!C.verbose})),setWatchMode:()=>{k(C=>M(u({},C),{watchMode:!C.watchMode}))},showSuitesOnly:g.specsCount>1,status:g.status,suiteOnly:g.suiteOnly,verbose:g.verbose,watchMode:g.watchMode}),g.status==="running"||g.status==="initialising"?H.createElement(Kt,{showOpenInCodeSandbox:!1}):H.createElement("div",{className:ia.toString()},n,H.createElement(Ir,{onClick:g.suiteOnly?w:$})),H.createElement("div",{className:l(la)},W.length===0&&g.status==="complete"?H.createElement("div",{className:l(pa)},H.createElement("p",null,"No test files found."),H.createElement("p",null,"Test match:"," ",H.createElement("span",{className:l(J)},X.toString()))):H.createElement(H.Fragment,null,H.createElement(Wr,{openSpec:ae,specs:W,status:g.status,verbose:g.verbose}),g.status==="complete"&&G.total>0&&H.createElement(Yr,{duration:Q,suites:q,tests:G}))))},la=m({padding:"$space$4",height:"100%",overflow:"auto",display:"flex",flexDirection:"column",position:"relative",fontFamily:"$font$mono"}),pa=m({fontWeight:"bold",color:"$colors$base"});var se=f(require("react"));var Jr=f(require("@code-hike/classer")),as=f(require("react"));var qr=({onClick:e})=>{let t=(0,Jr.useClasser)("sp");return as.default.createElement("button",{className:l(t("button","icon-standalone"),F,me,te,m({position:"absolute",bottom:"$space$2",right:"$space$2"})),onClick:e},as.default.createElement(So,null))};var po=f(require("react"));var Kr=()=>po.default.createElement("div",{className:l(m({borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",height:"$layout$headerHeight"}))},po.default.createElement("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},po.default.createElement(Pe,null),"Console"));var uo=f(require("react"));var Qr=["SyntaxError: ","Error in sandbox:"],en={id:"random",method:"clear",data:["Console was cleared"]},is="@t",cs="@r",ls=1e4,ps=2,mo=400,ds=mo*2;var fo=e=>{var a,c;let[t,o]=uo.useState([]),{listen:s}=T(),r=(a=e==null?void 0:e.showSyntaxError)!=null?a:!1,n=(c=e==null?void 0:e.maxMessageCount)!=null?c:ds;return uo.useEffect(()=>s(d=>{if(d.type==="console"&&d.codesandbox){if(d.log.find(({method:y})=>y==="clear"))return o([en]);let h=r?d.log:d.log.filter(y=>y.data.filter(v=>typeof v!="string"?!0:Qr.filter(k=>v.startsWith(k)).length===0).length>0);if(!h)return;o(y=>{let S=[...y,...h].filter((v,g,k)=>g===k.findIndex($=>$.id===v.id));for(;S.length>ds;)S.shift();return S})}},e==null?void 0:e.clientId),[s,n,e,r]),{logs:t,reset:()=>o([])}};var ms=function(){return(0,eval)("this")}(),da=typeof ArrayBuffer=="function",ma=typeof Map=="function",ua=typeof Set=="function",Rt;(function(s){s[s.infinity=0]="infinity",s[s.minusInfinity=1]="minusInfinity",s[s.minusZero=2]="minusZero"})(Rt||(Rt={}));var tn={Arithmetic:e=>e===0?1/0:e===1?-1/0:e===2?-0:e,HTMLElement:e=>{let t=document.implementation.createHTMLDocument("sandbox");try{let o=t.createElement(e.tagName);o.innerHTML=e.innerHTML;for(let s of Object.keys(e.attributes))try{o.setAttribute(s,e.attributes[s])}catch(r){}return o}catch(o){return e}},Function:e=>{let t=()=>{};return Object.defineProperty(t,"toString",{value:()=>`function ${e.name}() {${e.body}}`}),t},"[[NaN]]":()=>NaN,"[[undefined]]":()=>{},"[[Date]]":e=>{let t=new Date;return t.setTime(e),t},"[[RegExp]]":e=>new RegExp(e.src,e.flags),"[[Error]]":e=>{let t=ms[e.name]||Error,o=new t(e.message);return o.stack=e.stack,o},"[[ArrayBuffer]]":e=>{if(da){let t=new ArrayBuffer(e.length);return new Int8Array(t).set(e),t}return e},"[[TypedArray]]":e=>typeof ms[e.ctorName]=="function"?new ms[e.ctorName](e.arr):e.arr,"[[Map]]":e=>{if(ma){let o=new Map;for(let s=0;s{if(ua){let t=new Set;for(let o=0;o{if(typeof e=="string"||typeof e=="number"||e===null)return e;if(Array.isArray(e))return e.map(on);if(typeof e=="object"&&is in e){let t=e[is];return tn[t](e.data)}return e},fa=(e,t,o)=>`[${e.reduce((r,n,a)=>`${r}${a?", ":""}${Et(n,t,o)}`,"")}]`,ha=(e,t,o)=>{let s=e.constructor.name!=="Object"?`${e.constructor.name} `:"";if(o>ps)return s;let r=Object.entries(e),n=Object.entries(e).reduce((a,[c,p],d)=>{let h=d===0?"":", ",y=r.length>10?` + `:"",S=Et(p,t,o);return d===mo?a+y+"...":d>mo?a:a+`${h}${y}${c}: `+S},"");return`${s}{ ${n}${r.length>10?` +diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js +index 985904c..eb4bfe9 100644 +--- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js ++++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js +@@ -395,7 +395,7 @@ createApp(App).mount('#app') + + + +-`},"/package.json":{code:JSON.stringify({dependencies:{"core-js":"^3.6.5",vue:"^3.0.0-0","@vue/cli-plugin-babel":"4.5.0"},main:"/src/main.js"})}},main:"/src/App.vue",environment:"vue-cli"};var Ie={react:Dt,"react-ts":Ht,vue:Vt,vanilla:Ut,"vanilla-ts":zt,vue3:Xt,angular:Ot,svelte:_t,solid:Bt,"test-ts":jt};var De=e=>{var a,p,d,u,f,b;let t=Oe(e.files),o=Sr({template:e.template,customSetup:e.customSetup,files:t}),s=Oe((p=(a=e.options)==null?void 0:a.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Yo((u=e.options)==null?void 0:u.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(g=>{let y=t[g];if(typeof y=="string"){s.push(g);return}!r&&y.active&&(r=g,y.hidden===!0&&s.push(g)),y.hidden||s.push(g)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Yo(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=yr(o.files,(f=o.dependencies)!=null?f:{},(b=o.devDependencies)!=null?b:{},o.entry);return{visibleFiles:s.filter(g=>n[g]),activeFile:r,files:n,environment:o.environment}},Yo=(e,t)=>{let o=Oe(t),s=Oe(e);if(s in o)return s;if(!e)return null;let r=null,n=0,c=[".js",".jsx",".ts",".tsx"];for(;!r&&n{if(!t){if(!o)return Ie.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return{...o,files:st(e)}}let s=Ie[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:st({...s.files,...e}),dependencies:{...s.dependencies,...o==null?void 0:o.dependencies},devDependencies:{...s.devDependencies,...o==null?void 0:o.devDependencies},entry:Oe((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},st=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var nt=Er(null),Rr=3e4,Jo=class extends Tr{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:Cr(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s={...s,[t]:{code:o}}}else typeof t=="object"&&(s={...s,...st(t)});this.setState({files:xr(s)},this.updateClients)};this.updateClients=()=>{var n,c,a,p;let{files:t,sandpackStatus:o}=this.state,s=(c=(n=this.props.options)==null?void 0:n.recompileMode)!=null?c:"delayed",r=(p=(a=this.props.options)==null?void 0:a.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,c,a,p,d,u,f,b,g;let s=new kr(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(c=this.props.options)==null?void 0:c.bundlerURL,startRoute:(a=this.props.options)==null?void 0:a.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(u=(d=this.props.options)==null?void 0:d.skipEval)!=null?u:!1,logLevel:(f=this.props.options)==null?void 0:f.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(g=(b=this.props.customSetup)==null?void 0:b.npmRegistries)==null?void 0:g.map(y=>({...y,proxyEnabled:!1}))});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},Rr)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(y=>{let R=this.queuedListeners[o][y],N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([y,R])=>{let N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(a=>a())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(c=>c!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r={...s};return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=Ae();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=Ae();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(a=>a.listen(t));return()=>{n.forEach(a=>a())}}};this.resetFile=t=>{let{files:o}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:{...s.files,[t]:o[t]}}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:c,editorState:a,error:p,sandpackStatus:d,environment:u,initMode:f}=this.state;return{files:t,environment:u,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:c,status:d,editorState:a,initMode:f,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var c,a,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(c=this.props.options)==null?void 0:c.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(a=this.props.options)==null?void 0:a.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=at(),this.errorScreenRegistered=at(),this.openInCSBRegistered=at(),this.loadingScreenRegistered=at()}initializeSandpackIframe(){var s,r,n,c,a;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(c=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?c:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((a=this.intersectionObserver)==null||a.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(u=>u.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var a,p,d,u;((a=t.options)==null?void 0:a.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(u=this.props.options)==null?void 0:u.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!rt(t.options,this.props.options)||!rt(t.customSetup,this.props.customSetup)||!rt(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(f=>f.updatePreview({files:r,template:n}))}let c=rt(r,this.state.files)?"pristine":"dirty";c!==this.state.editorState&&this.setState({editorState:c})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return Wt(nt.Provider,{value:this._getSandpackState()},Wt(vr,{classes:(n=this.props.options)==null?void 0:n.classes},Wt(Go,{className:s,style:r,theme:o},t)))}},qo=Jo,dc=nt.Consumer;function x(){let e=Nr(nt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let{dispatch:t,listen:o,...s}=e;return{sandpack:{...s},dispatch:t,listen:o}}var it=()=>{var t,o,s;let{sandpack:e}=x();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};import{useClasser as Mr}from"@code-hike/classer";import{createElement as Be}from"react";var ee=m({svg:{margin:"auto"}}),T=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${ee}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),z=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Ko=m({padding:0}),$r=tt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),He=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),ct=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),ke=m({animation:`${$r} 150ms ease`,color:"$colors$error"});var Lr=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),wr=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),Qo=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),Fr=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${Qo}`]:{visibility:"unset"}}),lt=({closableTabs:e,className:t,...o})=>{let{sandpack:s}=x(),r=Mr(h),{activeFile:n,visibleFiles:c,setActiveFile:a}=s,p=u=>{u.stopPropagation();let f=u.target.closest("[data-active]"),b=f==null?void 0:f.getAttribute("title");!b||s.closeFile(b)},d=u=>{let f=ve(u),b=c.reduce((g,y)=>(y===u||ve(y)===f&&g.push(y),g),[]);return b.length===0?f:_o(u,b)};return Be("div",{className:l(r("tabs"),Lr,t),translate:"no",...o},Be("div",{"aria-label":"Select active file",className:l(r("tabs-scrollable-container"),wr),role:"tablist"},c.map(u=>Be("button",{key:u,"aria-selected":u===n,className:l(r("tab-button"),T,Fr),"data-active":u===n,onClick:()=>a(u),role:"tab",title:u,type:"button"},d(u),e&&c.length>1&&Be("span",{className:l(r("close-button"),Qo),onClick:p},Be(Do,null))))))};import{useClasser as Ar}from"@code-hike/classer";import{createElement as es}from"react";var Pr=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),pt=({className:e,onClick:t,...o})=>{let s=Ar(h),{sandpack:r}=x();return es("button",{className:l(s("button"),T,z,Pr,e),onClick:n=>{r.runSandpack(),t==null||t(n)},type:"button",...o},es(Ke,null),"Run")};import{useClasser as Ir}from"@code-hike/classer";import{createElement as Or}from"react";var me=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${h}-stack)`]:{backgroundColor:"$colors$surface2"}}),Y=({className:e,...t})=>{let o=Ir(h);return Or("div",{className:l(o("stack"),me,e),...t})};import{useClasser as Yr}from"@code-hike/classer";import{closeBrackets as Jr,closeBracketsKeymap as qr}from"@codemirror/closebrackets";import{defaultKeymap as Kr,indentLess as Qr,indentMore as en,deleteGroupBackward as tn}from"@codemirror/commands";import{commentKeymap as on}from"@codemirror/comment";import{lineNumbers as sn}from"@codemirror/gutter";import{defaultHighlightStyle as rn}from"@codemirror/highlight";import{history as nn,historyKeymap as an}from"@codemirror/history";import{bracketMatching as cn}from"@codemirror/matchbrackets";import{EditorState as ds,EditorSelection as ln,StateEffect as ms}from"@codemirror/state";import{Annotation as us}from"@codemirror/state";import{highlightSpecialChars as pn,highlightActiveLine as dn,keymap as fs,EditorView as Jt}from"@codemirror/view";import mn from"@react-hook/intersection-observer";import{Fragment as gn,createElement as Ee,forwardRef as un,useEffect as Re,useImperativeHandle as fn,useMemo as hn,useRef as gt,useState as hs}from"react";import{useContext as Dr}from"react";var Ce=()=>{let{theme:e,id:t,mode:o}=Dr(ot);return{theme:e,themeId:t,themeMode:o}};var Gt=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;se.line(t).from+(o!=null?o:0)-1,os=()=>jr.theme({"&":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${h}-colors-surface3)`,borderRadius:`var(--${h}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${h}-colors-errorSurface)`,borderRadius:`var(--${h}-border-radius)`},".cm-content":{caretColor:`var(--${h}-colors-accent)`,padding:`0 var(--${h}-space-4)`},".cm-scroller":{fontFamily:`var(--${h}-font-mono)`,lineHeight:`var(--${h}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-colors-disabled)`,border:"none",paddingLeft:`var(--${h}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${h}-font-lineHeight)`,minWidth:`var(--${h}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${h}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),te=e=>`${h}-syntax-${e}`,ss=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>({...t,[`.${te(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),rs=e=>Hr.define([{tag:A.link,textDecoration:"underline"},{tag:A.emphasis,fontStyle:"italic"},{tag:A.strong,fontWeight:"bold"},{tag:A.keyword,class:te("keyword")},{tag:[A.atom,A.number,A.bool],class:te("static")},{tag:A.tagName,class:te("tag")},{tag:A.variableName,class:te("plain")},{tag:A.function(A.variableName),class:te("definition")},{tag:A.definition(A.function(A.variableName)),class:te("definition")},{tag:A.propertyName,class:te("property")},{tag:[A.literal,A.inserted],class:te(e.syntax.string?"string":"static")},{tag:A.punctuation,class:te("punctuation")},{tag:[A.comment,A.quote],class:te("comment")}]),ns=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},as=(e,t)=>{let o={javascript:ts({jsx:!0,typescript:!1}),typescript:ts({jsx:!0,typescript:!0}),html:_r(),css:Br()};for(let s of t)if(e===s.name)return s.language;return o[e]},dt=(...e)=>Ur(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function is(e){return zr.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return mt.none;let o=e.map(s=>{var a,p,d;let r=mt.line({attributes:{class:(a=s.className)!=null?a:""}}),n=mt.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),c=_e(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let u=_e(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(c,u)}return r.range(c)});return mt.set(o)}},{decorations:t=>t.decorations})}import{Decoration as ut,ViewPlugin as Vr}from"@codemirror/view";function cs(){return Wr}var Xr=ut.line({attributes:{class:"cm-errorLine"}}),Wr=Vr.fromClass(class{constructor(){this.decorations=ut.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=_e(e.view.state.doc,{line:o})+1;this.decorations=ut.set([Xr.range(s)])}else t.annotation("remove-errors")&&(this.decorations=ut.none)})}},{decorations:e=>e.decorations});var ft=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Zt=m(ss()),ht=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${ft}`]:{padding:"$space$4 0"}}),Yt=m({margin:"0",outline:"none",height:"100%"}),ls=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${T}`]:{right:"calc($space$11 * 2)"}});import{highlightTree as Gr}from"@codemirror/highlight";import{createElement as Zr}from"react";var ps=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],c=(a,p)=>{if(a>r){let d=o.slice(r,a);n.push(p?Zr("span",{children:d,className:p,key:`${a}${r}`}):d),r=a}};return Gr(s,t.match,(a,p,d)=>{c(a,""),c(p,d)}),r{var a,p,d,u,f,b;let t=Oe(e.files),o=Sr({template:e.template,customSetup:e.customSetup,files:t}),s=Oe((p=(a=e.options)==null?void 0:a.visibleFiles)!=null?p:[]),r=((d=e.options)==null?void 0:d.activeFile)?Yo((u=e.options)==null?void 0:u.activeFile,t||{}):void 0;s.length===0&&t&&Object.keys(t).forEach(g=>{let y=t[g];if(typeof y=="string"){s.push(g);return}!r&&y.active&&(r=g,y.hidden===!0&&s.push(g)),y.hidden||s.push(g)}),s.length===0&&(s=[o.main]),o.files[o.entry]||(o.entry=Yo(o.entry,o.files)),!r&&o.main&&(r=o.main),(!r||!o.files[r])&&(r=s[0]),s.includes(r)||s.push(r);let n=yr(o.files,(f=o.dependencies)!=null?f:{},(b=o.devDependencies)!=null?b:{},o.entry);return{visibleFiles:s.filter(g=>n[g]),activeFile:r,files:n,environment:o.environment}},Yo=(e,t)=>{let o=Oe(t),s=Oe(e);if(s in o)return s;if(!e)return null;let r=null,n=0,c=[".js",".jsx",".ts",".tsx"];for(;!r&&n{if(!t){if(!o)return Ie.vanilla;if(!e||Object.keys(e).length===0)throw new Error("[sandpack-react]: without a template, you must pass at least one file");return{...o,files:st(e)}}let s=Ie[t];if(!s)throw new Error(`[sandpack-react]: invalid template "${t}" provided`);return!o&&!e?s:{files:st({...s.files,...e}),dependencies:{...s.dependencies,...o==null?void 0:o.dependencies},devDependencies:{...s.devDependencies,...o==null?void 0:o.devDependencies},entry:Oe((o==null?void 0:o.entry)||s.entry),main:s.main,environment:(o==null?void 0:o.environment)||s.environment}},st=e=>e?Object.keys(e).reduce((t,o)=>(typeof e[o]=="string"?t[o]={code:e[o]}:t[o]=e[o],t),{}):{};var nt=Er(null),Rr=3e4,Jo=class extends Tr{constructor(t){super(t);this.timeoutHook=null;this.initializeSandpackIframeHook=null;this.handleMessage=t=>{this.timeoutHook&&clearTimeout(this.timeoutHook),t.type==="state"?this.setState({bundlerState:t.state}):t.type==="done"&&!t.compilatonError?this.setState({error:null}):t.type==="action"&&t.action==="show-error"?this.setState({error:Cr(t)}):t.type==="action"&&t.action==="notification"&&t.notificationType==="error"&&this.setState({error:{message:t.title}})};this.registerReactDevTools=t=>{this.setState({reactDevTools:t})};this.updateCurrentFile=t=>{this.updateFile(this.state.activeFile,t)};this.updateFile=(t,o)=>{var r;let s=this.state.files;if(typeof t=="string"&&o){if(o===((r=this.state.files[t])==null?void 0:r.code))return;s={...s,[t]:{code:o}}}else typeof t=="object"&&(s={...s,...st(t)});this.setState({files:xr(s)},this.updateClients)};this.updateClients=()=>{var n,c,a,p;let{files:t,sandpackStatus:o}=this.state,s=(c=(n=this.props.options)==null?void 0:n.recompileMode)!=null?c:"delayed",r=(p=(a=this.props.options)==null?void 0:a.recompileDelay)!=null?p:500;o==="running"&&(s==="immediate"&&Object.values(this.clients).forEach(d=>{d.updatePreview({files:t})}),s==="delayed"&&(window.clearTimeout(this.debounceHook),this.debounceHook=window.setTimeout(()=>{Object.values(this.clients).forEach(d=>{d.updatePreview({files:this.state.files})})},r)))};this.createClient=(t,o)=>{var n,c,a,p,d,u,f,b,g;let s=new kr(t,{files:this.state.files,template:this.state.environment},{externalResources:(n=this.props.options)==null?void 0:n.externalResources,bundlerURL:(c=this.props.options)==null?void 0:c.bundlerURL,startRoute:(a=this.props.options)==null?void 0:a.startRoute,fileResolver:(p=this.props.options)==null?void 0:p.fileResolver,skipEval:(u=(d=this.props.options)==null?void 0:d.skipEval)!=null?u:!1,logLevel:(f=this.props.options)==null?void 0:f.logLevel,showOpenInCodeSandbox:!this.openInCSBRegistered.current,showErrorScreen:!this.errorScreenRegistered.current,showLoadingScreen:!this.loadingScreenRegistered.current,reactDevTools:this.state.reactDevTools,customNpmRegistries:(g=(b=this.props.customSetup)==null?void 0:b.npmRegistries)==null?void 0:g.map(y=>({...y,proxyEnabled:!1}))});return typeof this.unsubscribe!="function"&&(this.unsubscribe=s.listen(this.handleMessage),this.timeoutHook=setTimeout(()=>{this.setState({sandpackStatus:"timeout"})},Rr)),this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o]&&(Object.keys(this.queuedListeners[o]).forEach(y=>{let R=this.queuedListeners[o][y],N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),this.queuedListeners[o]={}),Object.entries(this.queuedListeners.global).forEach(([y,R])=>{let N=s.listen(R);this.unsubscribeClientListeners[o][y]=N}),s};this.runSandpack=()=>{Object.keys(this.preregisteredIframes).forEach(t=>{let o=this.preregisteredIframes[t];this.clients[t]=this.createClient(o,t)}),this.setState({sandpackStatus:"running"})};this.registerBundler=(t,o)=>{this.state.sandpackStatus==="running"?this.clients[o]=this.createClient(t,o):this.preregisteredIframes[o]=t};this.unregisterBundler=t=>{var r;let o=this.clients[t];o?(o.cleanup(),(r=o.iframe.contentWindow)==null||r.location.replace("about:blank"),delete this.clients[t]):delete this.preregisteredIframes[t],this.timeoutHook&&clearTimeout(this.timeoutHook),Object.values(this.unsubscribeClientListeners).forEach(n=>{Object.values(n).forEach(a=>a())}),this.setState({sandpackStatus:"idle"})};this.unregisterAllClients=()=>{Object.keys(this.clients).map(this.unregisterBundler),typeof this.unsubscribe=="function"&&(this.unsubscribe(),this.unsubscribe=void 0)};this.setActiveFile=t=>{this.setState({activeFile:t})};this.openFile=t=>{this.setState(({visibleFiles:o})=>{let s=o.includes(t)?o:[...o,t];return{activeFile:t,visibleFiles:s}})};this.closeFile=t=>{this.state.visibleFiles.length!==1&&this.setState(({visibleFiles:o,activeFile:s})=>{let r=o.indexOf(t),n=o.filter(c=>c!==t);return{activeFile:t===s?r===0?o[1]:o[r-1]:s,visibleFiles:n}})};this.deleteFile=t=>{this.setState(({visibleFiles:o,files:s})=>{let r={...s};return delete r[t],{visibleFiles:o.filter(n=>n!==t),files:r}},this.updateClients)};this.addFile=this.updateFile;this.dispatchMessage=(t,o)=>{if(this.state.sandpackStatus!=="running"){console.warn("[sandpack-react]: dispatch cannot be called while in idle mode");return}o?this.clients[o].dispatch(t):Object.values(this.clients).forEach(s=>{s.dispatch(t)})};this.addListener=(t,o)=>{if(o){if(this.clients[o])return this.clients[o].listen(t);{let s=Ae();return this.queuedListeners[o]=this.queuedListeners[o]||{},this.unsubscribeClientListeners[o]=this.unsubscribeClientListeners[o]||{},this.queuedListeners[o][s]=t,()=>{this.queuedListeners[o][s]?delete this.queuedListeners[o][s]:this.unsubscribeClientListeners[o][s]&&(this.unsubscribeClientListeners[o][s](),delete this.unsubscribeClientListeners[o][s])}}}else{let s=Ae();this.queuedListeners.global[s]=t;let n=Object.values(this.clients).map(a=>a.listen(t));return()=>{n.forEach(a=>a())}}};this.resetFile=t=>{let{files:o}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState(s=>({files:{...s.files,[t]:o[t]}}),this.updateClients)};this.resetAllFiles=()=>{let{files:t}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});this.setState({files:t},this.updateClients)};this._getSandpackState=()=>{let{files:t,activeFile:o,visibleFiles:s,visibleFilesFromProps:r,startRoute:n,bundlerState:c,editorState:a,error:p,sandpackStatus:d,environment:u,initMode:f}=this.state;return{files:t,environment:u,visibleFiles:s,visibleFilesFromProps:r,activeFile:o,startRoute:n,error:p,bundlerState:c,status:d,editorState:a,initMode:f,clients:this.clients,dispatch:this.dispatchMessage,errorScreenRegisteredRef:this.errorScreenRegistered,lazyAnchorRef:this.lazyAnchorRef,listen:this.addListener,loadingScreenRegisteredRef:this.loadingScreenRegistered,openInCSBRegisteredRef:this.openInCSBRegistered,registerBundler:this.registerBundler,runSandpack:this.runSandpack,unregisterBundler:this.unregisterBundler,registerReactDevTools:this.registerReactDevTools,openFile:this.openFile,resetFile:this.resetFile,resetAllFiles:this.resetAllFiles,setActiveFile:this.setActiveFile,updateCurrentFile:this.updateCurrentFile,updateFile:this.updateFile,addFile:this.addFile,closeFile:this.closeFile,deleteFile:this.deleteFile}};var c,a,p,d;let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:t.template,files:t.files,customSetup:t.customSetup,options:t.options});this.state={files:r,environment:n,visibleFiles:s,visibleFilesFromProps:s,activeFile:o,startRoute:(c=this.props.options)==null?void 0:c.startRoute,bundlerState:void 0,error:null,sandpackStatus:((p=(a=this.props.options)==null?void 0:a.autorun)!=null?p:!0)?"initial":"idle",editorState:"pristine",initMode:((d=this.props.options)==null?void 0:d.initMode)||"lazy",reactDevTools:void 0},this.queuedListeners={global:{}},this.unsubscribeClientListeners={},this.preregisteredIframes={},this.clients={},this.lazyAnchorRef=at(),this.errorScreenRegistered=at(),this.openInCSBRegistered=at(),this.loadingScreenRegistered=at()}initializeSandpackIframe(){var s,r,n,c,a;if(!((r=(s=this.props.options)==null?void 0:s.autorun)!=null?r:!0))return;let o=(c=(n=this.props.options)==null?void 0:n.initModeObserverOptions)!=null?c:{rootMargin:"1000px 0px"};this.intersectionObserver&&this.lazyAnchorRef.current&&((a=this.intersectionObserver)==null||a.unobserve(this.lazyAnchorRef.current)),this.lazyAnchorRef.current&&this.state.initMode==="lazy"?(this.intersectionObserver=new IntersectionObserver(p=>{var d;p.some(u=>u.isIntersecting)&&(this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50),this.lazyAnchorRef.current&&((d=this.intersectionObserver)==null||d.unobserve(this.lazyAnchorRef.current)))},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.lazyAnchorRef.current&&this.state.initMode==="user-visible"?(this.intersectionObserver=new IntersectionObserver(p=>{p.some(d=>d.isIntersecting)?this.initializeSandpackIframeHook=setTimeout(()=>{this.runSandpack()},50):(this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),Object.keys(this.clients).map(this.unregisterBundler),this.unregisterAllClients())},o),this.intersectionObserver.observe(this.lazyAnchorRef.current)):this.initializeSandpackIframeHook=setTimeout(()=>this.runSandpack(),50)}componentDidMount(){this.initializeSandpackIframe()}componentDidUpdate(t){var a,p,d,u;((a=t.options)==null?void 0:a.initMode)!==((p=this.props.options)==null?void 0:p.initMode)&&((d=this.props.options)==null?void 0:d.initMode)&&this.setState({initMode:(u=this.props.options)==null?void 0:u.initMode},this.initializeSandpackIframe);let{activeFile:o,visibleFiles:s,files:r,environment:n}=De({template:this.props.template,files:this.props.files,customSetup:this.props.customSetup,options:this.props.options});if(t.template!==this.props.template||!rt(t.options,this.props.options)||!rt(t.customSetup,this.props.customSetup)||!rt(t.files,this.props.files)){if(this.setState({activeFile:o,visibleFiles:s,visibleFilesFromProps:s,files:r,environment:n}),this.state.sandpackStatus!=="running")return;Object.values(this.clients).forEach(f=>f.updatePreview({files:r,template:n}))}let c=rt(r,this.state.files)?"pristine":"dirty";c!==this.state.editorState&&this.setState({editorState:c})}componentWillUnmount(){typeof this.unsubscribe=="function"&&this.unsubscribe(),this.timeoutHook&&clearTimeout(this.timeoutHook),this.debounceHook&&clearTimeout(this.debounceHook),this.initializeSandpackIframeHook&&clearTimeout(this.initializeSandpackIframeHook),this.intersectionObserver&&this.intersectionObserver.disconnect()}render(){var n;let{children:t,theme:o,className:s,style:r}=this.props;return Wt(nt.Provider,{value:this._getSandpackState()},Wt(vr,{classes:(n=this.props.options)==null?void 0:n.classes},Wt(Go,{className:s,style:r,theme:o},t)))}},qo=Jo,dc=nt.Consumer;function x(){let e=Nr(nt);if(e===null)throw new Error('[sandpack-react]: "useSandpack" must be wrapped by a "SandpackProvider"');let{dispatch:t,listen:o,...s}=e;return{sandpack:{...s},dispatch:t,listen:o}}var it=()=>{var t,o,s;let{sandpack:e}=x();return{code:(t=e.files[e.activeFile])==null?void 0:t.code,readOnly:(s=(o=e.files[e.activeFile])==null?void 0:o.readOnly)!=null?s:!1,updateCode:e.updateCurrentFile}};import{useClasser as Mr}from"@code-hike/classer";import{createElement as Be}from"react";var ee=m({svg:{margin:"auto"}}),T=m({appearance:"none",border:"0",outline:"none",display:"flex",alignItems:"center",fontSize:"inherit",fontFamily:"inherit",backgroundColor:"transparent",transition:"color $default, background $default",cursor:"pointer",color:"$colors$clickable","&:disabled":{color:"$colors$disabled"},"&:hover:not(:disabled,[data-active='true'])":{color:"$colors$hover"},'&[data-active="true"]':{color:"$colors$accent"},svg:{minWidth:"$space$4",width:"$space$4",height:"$space$4"},[`&.${ee}`]:{padding:"$space$1",width:"$space$7",height:"$space$7",display:"flex"}}),z=m({backgroundColor:"$colors$surface2",borderRadius:"99999px",'&[data-active="true"]':{color:"$colors$surface1",background:"$colors$accent"},"&:hover:not(:disabled,[data-active='true'])":{backgroundColor:"$colors$surface3"}}),Ko=m({padding:0}),$r=tt({"0%":{opacity:0,transform:"translateY(4px)"},"100%":{opacity:1,transform:"translateY(0)"}}),He=m({position:"absolute",bottom:"0",left:"0",right:"0",top:"0",margin:"0",overflow:"auto",height:"100%",zIndex:"$top"}),ct=m({padding:"$space$4",whiteSpace:"pre-wrap",fontFamily:"$font$mono",backgroundColor:"$colors$errorSurface"}),ke=m({animation:`${$r} 150ms ease`,color:"$colors$error"});var Lr=m({borderBottom:"1px solid $colors$surface2",background:"$colors$surface1"}),wr=m({padding:"0 $space$2",overflow:"auto",display:"flex",flexWrap:"nowrap",alignItems:"stretch",minHeight:"40px",marginBottom:"-1px"}),Qo=m({padding:"0 $space$1 0 $space$1",borderRadius:"$border$radius",marginLeft:"$space$1",width:"$space$5",visibility:"hidden",svg:{width:"$space$3",height:"$space$3",display:"block",position:"relative",top:1}}),Fr=m({padding:"0 $space$2",height:"$layout$headerHeight",whiteSpace:"nowrap","&:focus":{outline:"none"},[`&:hover > .${Qo}`]:{visibility:"unset"}}),lt=({closableTabs:e,className:t,...o})=>{let{sandpack:s}=x(),r=Mr(h),{activeFile:n,visibleFiles:c,setActiveFile:a}=s,p=u=>{u.stopPropagation();let f=u.target.closest("[data-active]"),b=f==null?void 0:f.getAttribute("title");!b||s.closeFile(b)},d=u=>{let f=ve(u),b=c.reduce((g,y)=>(y===u||ve(y)===f&&g.push(y),g),[]);return b.length===0?f:_o(u,b)};return Be("div",{className:l(r("tabs"),Lr,t),translate:"no",...o},Be("div",{"aria-label":"Select active file",className:l(r("tabs-scrollable-container"),wr),role:"tablist"},c.map(u=>Be("button",{key:u,"aria-selected":u===n,className:l(r("tab-button"),T,Fr),"data-active":u===n,onClick:()=>a(u),role:"tab",title:u,type:"button"},d(u),e&&c.length>1&&Be("span",{className:l(r("close-button"),Qo),onClick:p},Be(Do,null))))))};import{useClasser as Ar}from"@code-hike/classer";import{createElement as es}from"react";var Pr=m({position:"absolute",bottom:"$space$2",right:"$space$2",paddingRight:"$space$3"}),pt=({className:e,onClick:t,...o})=>{let s=Ar(h),{sandpack:r}=x();return es("button",{className:l(s("button"),T,z,Pr,e),onClick:n=>{r.runSandpack(),t==null||t(n)},type:"button",...o},es(Ke,null),"Run")};import{useClasser as Ir}from"@code-hike/classer";import{createElement as Or}from"react";var me=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",backgroundColor:"$colors$surface1",transition:"flex $transitions$default",gap:1,[`&:has(.${h}-stack)`]:{backgroundColor:"$colors$surface2"}}),Y=({className:e,...t})=>{let o=Ir(h);return Or("div",{className:l(o("stack"),me,e),...t})};import{useClasser as Yr}from"@code-hike/classer";import{closeBrackets as Jr,closeBracketsKeymap as qr}from"@codemirror/closebrackets";import{defaultKeymap as Kr,indentLess as Qr,indentMore as en,deleteGroupBackward as tn}from"@codemirror/commands";import{commentKeymap as on}from"@codemirror/comment";import{lineNumbers as sn}from"@codemirror/gutter";import{defaultHighlightStyle as rn}from"@codemirror/highlight";import{history as nn,historyKeymap as an}from"@codemirror/history";import{bracketMatching as cn}from"@codemirror/matchbrackets";import{EditorState as ds,EditorSelection as ln,StateEffect as ms}from"@codemirror/state";import{Annotation as us}from"@codemirror/state";import{highlightSpecialChars as pn,highlightActiveLine as dn,keymap as fs,EditorView as Jt}from"@codemirror/view";import mn from"@react-hook/intersection-observer";import{Fragment as gn,createElement as Ee,forwardRef as un,useEffect as Re,useImperativeHandle as fn,useMemo as hn,useRef as gt,useState as hs}from"react";import{useContext as Dr}from"react";var Ce=()=>{let{theme:e,id:t,mode:o}=Dr(ot);return{theme:e,themeId:t,themeMode:o}};var Gt=(e,t)=>{if(e.length!==t.length)return!1;let o=!0;for(let s=0;se.line(t).from+(o!=null?o:0)-1,os=()=>jr.theme({"&":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-syntax-color-plain)`,height:"100%"},".cm-matchingBracket, .cm-nonmatchingBracket, &.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{color:"inherit",backgroundColor:"rgba(128,128,128,.25)",backgroundBlendMode:"difference"},"&.cm-editor.cm-focused":{outline:"none"},".cm-activeLine":{backgroundColor:`var(--${h}-colors-surface3)`,borderRadius:`var(--${h}-border-radius)`},".cm-errorLine":{backgroundColor:`var(--${h}-colors-errorSurface)`,borderRadius:`var(--${h}-border-radius)`},".cm-content":{caretColor:`var(--${h}-colors-accent)`,padding:`0 var(--${h}-space-4)`},".cm-scroller":{fontFamily:`var(--${h}-font-mono)`,lineHeight:`var(--${h}-font-lineHeight)`},".cm-gutters":{backgroundColor:`var(--${h}-colors-surface1)`,color:`var(--${h}-colors-disabled)`,border:"none",paddingLeft:`var(--${h}-space-1)`},".cm-gutter.cm-lineNumbers":{fontSize:".6em"},".cm-lineNumbers .cm-gutterElement":{lineHeight:`var(--${h}-font-lineHeight)`,minWidth:`var(--${h}-space-5)`},".cm-content .cm-line":{paddingLeft:`var(--${h}-space-1)`},".cm-content.cm-readonly .cm-line":{paddingLeft:0}}),te=e=>`${h}-syntax-${e}`,ss=()=>["string","plain","comment","keyword","definition","punctuation","property","tag","static"].reduce((t,o)=>({...t,[`.${te(o)}`]:{color:`$syntax$color$${o}`,fontStyle:`$syntax$fontStyle$${o}`}}),{}),rs=e=>Hr.define([{tag:A.link,textDecoration:"underline"},{tag:A.emphasis,fontStyle:"italic"},{tag:A.strong,fontWeight:"bold"},{tag:A.keyword,class:te("keyword")},{tag:[A.atom,A.number,A.bool],class:te("static")},{tag:A.standard(A.tagName),class:te("tag")},{tag:A.variableName,class:te("plain")},{tag:A.function(A.variableName),class:te("definition")},{tag:[A.definition(A.function(A.variableName)),A.tagName],class:te("definition")},{tag:A.propertyName,class:te("property")},{tag:[A.literal,A.inserted],class:te(e.syntax.string?"string":"static")},{tag:A.punctuation,class:te("punctuation")},{tag:[A.comment,A.quote],class:te("comment")}]),ns=(e,t,o)=>{if(!e&&!t)return"javascript";let s=t;if(!s&&e){let r=e.lastIndexOf(".");s=e.slice(r+1)}for(let r of o)if(s===r.name||r.extensions.includes(s||""))return r.name;switch(s){case"ts":case"tsx":return"typescript";case"html":case"svelte":case"vue":return"html";case"css":case"less":case"scss":return"css";case"js":case"jsx":case"json":default:return"javascript"}},as=(e,t)=>{let o={javascript:ts({jsx:!0,typescript:!1}),typescript:ts({jsx:!0,typescript:!0}),html:_r(),css:Br()};for(let s of t)if(e===s.name)return s.language;return o[e]},dt=(...e)=>Ur(t=>e.forEach(o=>{if(!!o){if(typeof o=="function")return o(t);o.current=t}}),e);function is(e){return zr.fromClass(class{constructor(t){this.decorations=this.getDecoration(t)}update(t){}getDecoration(t){if(!e)return mt.none;let o=e.map(s=>{var a,p,d;let r=mt.line({attributes:{class:(a=s.className)!=null?a:""}}),n=mt.mark({class:(p=s.className)!=null?p:"",attributes:(d=s.elementAttributes)!=null?d:void 0}),c=_e(t.state.doc,{line:s.line,column:s.startColumn})+1;if(s.startColumn&&s.endColumn){let u=_e(t.state.doc,{line:s.line,column:s.endColumn})+1;return n.range(c,u)}return r.range(c)});return mt.set(o)}},{decorations:t=>t.decorations})}import{Decoration as ut,ViewPlugin as Vr}from"@codemirror/view";function cs(){return Wr}var Xr=ut.line({attributes:{class:"cm-errorLine"}}),Wr=Vr.fromClass(class{constructor(){this.decorations=ut.none}update(e){e.transactions.forEach(t=>{let o=t.annotation("show-error");if(o!==void 0){let s=_e(e.view.state.doc,{line:o})+1;this.decorations=ut.set([Xr.range(s)])}else t.annotation("remove-errors")&&(this.decorations=ut.none)})}},{decorations:e=>e.decorations});var ft=m({margin:"0",display:"block",fontFamily:"$font$mono",fontSize:"$font$size",color:"$syntax$color$plain",lineHeight:"$font$lineHeight"}),Zt=m(ss()),ht=m({flex:1,position:"relative",overflow:"auto",background:"$colors$surface1",".cm-scroller":{padding:"$space$4 0"},[`.${ft}`]:{padding:"$space$4 0"}}),Yt=m({margin:"0",outline:"none",height:"100%"}),ls=m({fontFamily:"$font$mono",fontSize:"0.8em",position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",color:"$colors$clickable",backgroundColor:"$colors$surface2",borderRadius:"99999px",padding:"calc($space$1 / 2) $space$2",[`& + .${T}`]:{right:"calc($space$11 * 2)"}});import{highlightTree as Gr}from"@codemirror/highlight";import{createElement as Zr}from"react";var ps=({langSupport:e,highlightTheme:t,code:o=""})=>{let s=e.language.parser.parse(o),r=0,n=[],c=(a,p)=>{if(a>r){let d=o.slice(r,a);n.push(p?Zr("span",{children:d,className:p,key:`${a}${r}`}):d),r=a}};return Gr(s,t.match,(a,p,d)=>{c(a,""),c(p,d)}),r{let F=gt(null),X=dt(F,N),E=gt(),{theme:_,themeId:B}=Ce(),[j,v]=hs(e),[$,q]=hs(f==="immediate"),S=Yr(h),{listen:k}=x(),I=gt([]),M=gt([]),{isIntersecting:O}=mn(F,{rootMargin:"600px 0px",threshold:.2});fn(N,()=>({getCodemirror:()=>E.current})),Re(()=>{(f==="lazy"||f==="user-visible")&&O&&q(!0)},[f,O]);let G=ns(t,o,R),$e=as(G,R),Me=rs(_),Le=ps({langSupport:$e,highlightTheme:Me,code:e}),he=hn(()=>u&&u.sort((L,D)=>L.line-D.line),[u]);Re(()=>{if(!F.current||!$)return;let L=setTimeout(function(){let U=[{key:"Tab",run:Z=>{var ie;en(Z);let K=y.find(({key:de})=>de==="Tab");return(ie=K==null?void 0:K.run(Z))!=null?ie:!0}},{key:"Shift-Tab",run:({state:Z,dispatch:K})=>{var de;Qr({state:Z,dispatch:K});let ie=y.find(({key:qe})=>qe==="Shift-Tab");return(de=ie==null?void 0:ie.run(oe))!=null?de:!0}},{key:"Escape",run:()=>(p||F.current&&F.current.focus(),!0)},{key:"mod-Backspace",run:tn}],w=[pn(),nn(),Jr(),...g,fs.of([...qr,...Kr,...an,...on,...U,...y]),$e,rn.fallback,os(),Me];p?(w.push(ds.readOnly.of(!0)),w.push(Jt.editable.of(!1))):(w.push(cn()),w.push(dn())),he&&w.push(is(he)),c&&w.push(Jt.lineWrapping),r&&w.push(sn()),n&&w.push(cs());let ge=ds.create({doc:e,extensions:w}),be=F.current,Fe=be.querySelector(".sp-pre-placeholder");Fe&&be.removeChild(Fe);let oe=new Jt({state:ge,parent:be,dispatch:Z=>{if(oe.update([Z]),Z.docChanged){let K=Z.newDoc.sliceString(0,Z.newDoc.length);v(K),s==null||s(K)}}});oe.contentDOM.setAttribute("data-gramm","false"),oe.contentDOM.setAttribute("aria-label",t?`Code Editor for ${ve(t)}`:"Code Editor"),p?oe.contentDOM.classList.add("cm-readonly"):oe.contentDOM.setAttribute("tabIndex","-1"),E.current=oe},0);return()=>{var D;(D=E.current)==null||D.destroy(),clearTimeout(L)}},[$,r,c,B,he,p]),Re(function(){let D=E.current,U=!Gt(g,I.current)||!Gt(y,M.current);D&&U&&(D.dispatch({effects:ms.appendConfig.of(g)}),D.dispatch({effects:ms.appendConfig.of(fs.of([...y]))}),I.current=g,M.current=y)},[g,y]),Re(()=>{E.current&&a==="dirty"&&window.matchMedia("(min-width: 768px)").matches&&E.current.contentDOM.focus()},[]),Re(()=>{if(E.current&&e!==j){let L=E.current,D=L.state.selection.ranges.some(({to:w,from:ge})=>w>e.length||ge>e.length)?ln.cursor(e.length):L.state.selection,U={from:0,to:L.state.doc.length,insert:e};L.dispatch({changes:U,selection:D})}},[e]),Re(function(){if(!n)return;let D=k(U=>{let w=E.current;U.type==="success"?w==null||w.dispatch({annotations:[new us("remove-errors",!0)]}):U.type==="action"&&U.action==="show-error"&&U.line&&(w==null||w.dispatch({annotations:[new us("show-error",U.line)]}))});return()=>D()},[k,n]);let Je=L=>{L.key==="Enter"&&E.current&&(L.preventDefault(),E.current.contentDOM.focus())},we=()=>{let L=4;return r&&(L+=6),p||(L+=1),`var(--${h}-space-${L})`};return p?Ee(gn,null,Ee("pre",{ref:X,className:l(S("cm",a,G),Yt,Zt),translate:"no"},Ee("code",{className:l(S("pre-placeholder"),ft),style:{marginLeft:we()}},Le)),p&&d&&Ee("span",{className:l(S("read-only"),ls),...{}},"Read-only")):Ee("div",{ref:X,"aria-autocomplete":"list","aria-label":t?`Code Editor for ${ve(t)}`:"Code Editor","aria-multiline":"true",className:l(S("cm",a,G),Yt,Zt),onKeyDown:Je,role:"textbox",tabIndex:0,translate:"no",suppressHydrationWarning:!0},Ee("pre",{className:l(S("pre-placeholder"),ft),style:{marginLeft:we()}},Le))});var gs=yn(({style:e,showTabs:t,showLineNumbers:o=!1,showInlineErrors:s=!1,showRunButton:r=!0,wrapContent:n=!1,closableTabs:c=!1,initMode:a,extensions:p,extensionsKeymap:d,id:u,readOnly:f,showReadOnly:b,additionalLanguages:g},y)=>{let{sandpack:R}=x(),{code:N,updateCode:F,readOnly:X}=it(),{activeFile:E,status:_,editorState:B}=R,j=t!=null?t:R.visibleFiles.length>1,v=bn(h),$=q=>{F(q)};return je(Y,{className:v("editor"),style:e},j&&je(lt,{closableTabs:c}),je("div",{className:l(v("code-editor"),ht)},je(xe,{key:E,ref:y,additionalLanguages:g,code:N,editorState:B,extensions:p,extensionsKeymap:d,filePath:E,id:u,initMode:a||R.initMode,onCodeUpdate:$,readOnly:f||X,showInlineErrors:s,showLineNumbers:o,showReadOnly:b,wrapContent:n}),r&&_==="idle"?je(pt,null):null))});import{useClasser as Sn}from"@code-hike/classer";import{createElement as Ue,forwardRef as vn}from"react";var bs=vn(({showTabs:e,showLineNumbers:t,decorators:o,code:s,initMode:r,wrapContent:n,...c},a)=>{let{sandpack:p}=x(),{code:d}=it(),u=Sn(h),f=e!=null?e:p.visibleFiles.length>1;return Ue(Y,{...c},f?Ue(lt,null):null,Ue("div",{className:l(u("code-editor"),ht)},Ue(xe,{ref:a,code:s!=null?s:d,decorators:o,filePath:p.activeFile,initMode:r||p.initMode,showLineNumbers:t,showReadOnly:!1,wrapContent:n,readOnly:!0})),p.status==="idle"?Ue(pt,null):null)});import{createElement as vs}from"react";import{createElement as Kt}from"react";import{createElement as qt,useState as xn}from"react";import{useClasser as kn}from"@code-hike/classer";import{createElement as ze}from"react";var Cn=m({borderRadius:"0",width:"100%",padding:0,marginBottom:"$space$2",span:{textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"},svg:{marginRight:"$space$1"}}),bt=({selectFile:e,path:t,active:o,onClick:s,depth:r,isDirOpen:n})=>{let c=kn(h),a=u=>{e&&e(t),s==null||s(u)},p=t.split("/").filter(Boolean).pop(),d=()=>e?ze(Oo,null):n?ze(Po,null):ze(Io,null);return ze("button",{className:l(c("button","explorer"),T,Cn),"data-active":o,onClick:a,style:{paddingLeft:18*r+"px"},title:p,type:"button"},d(),ze("span",null,p))};var ys=({prefixedPath:e,files:t,selectFile:o,activeFile:s,depth:r,autoHiddenFiles:n,visibleFiles:c})=>{let[a,p]=xn(!0);return qt("div",{key:e},qt(bt,{depth:r,isDirOpen:a,onClick:()=>p(u=>!u),path:e+"/"}),a&&qt(yt,{activeFile:s,autoHiddenFiles:n,depth:r+1,files:t,prefixedPath:e,selectFile:o,visibleFiles:c}))};var Ss=({autoHiddenFiles:e,visibleFiles:t,files:o,prefixedPath:s})=>{let r=t.length>0,n=e&&!r,c=e&&!!r,a=Object.keys(o).filter(u=>{var b;let f=u.startsWith(s);return c?f&&t.includes(u):n?f&&!((b=o[u])==null?void 0:b.hidden):f}).map(u=>u.substring(s.length)),p=new Set(a.filter(u=>u.includes("/")).map(u=>`${s}${u.split("/")[0]}/`)),d=a.filter(u=>!u.includes("/")).map(u=>`${s}${u}`);return{directories:Array.from(p),modules:d}};var yt=({depth:e=0,activeFile:t,selectFile:o,prefixedPath:s,files:r,autoHiddenFiles:n,visibleFiles:c})=>{let{directories:a,modules:p}=Ss({visibleFiles:c,autoHiddenFiles:n,prefixedPath:s,files:r});return Kt("div",null,a.map(d=>Kt(ys,{key:d,activeFile:t,autoHiddenFiles:n,depth:e,files:r,prefixedPath:d,selectFile:o,visibleFiles:c})),p.map(d=>Kt(bt,{key:d,active:t===d,depth:e,path:d,selectFile:o})))};var Rn=m({padding:"$space$3",overflow:"auto",height:"100%"}),wp=({className:e,autoHiddenFiles:t=!1,...o})=>{let{sandpack:s}=x();return vs("div",{className:l(me,Rn,`${h}-file-explorer`,e),...o},vs(yt,{activeFile:s.activeFile,autoHiddenFiles:t,files:s.files,prefixedPath:"/",selectFile:s.openFile,visibleFiles:s.visibleFilesFromProps}))};import{useClasser as En}from"@code-hike/classer";import{createElement as le,useEffect as $n,useState as St}from"react";var ks=e=>{let t=e.match(/(https?:\/\/.*?)\//);return t&&t[1]?[t[1],e.replace(t[1],"")]:[e,"/"]};var Tn=m({display:"flex",alignItems:"center",height:"$layout$headerHeight",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",background:"$colors$surface1"}),Nn=m({backgroundColor:"$colors$surface2",color:"$colors$clickable",padding:"$space$1 $space$3",borderRadius:"99999px",border:"1px solid $colors$surface2",height:"24px",lineHeight:"24px",fontSize:"inherit",outline:"none",flex:1,marginLeft:"$space$4",width:"0",transition:"background $transitions$default","&:hover":{backgroundColor:"$colors$surface3"},"&:focus":{backgroundColor:"$surface1",border:"1px solid $colors$accent",color:"$colors$base"}}),Cs=({clientId:e,onURLChange:t,className:o,...s})=>{var j;let[r,n]=St(""),{sandpack:c,dispatch:a,listen:p}=x(),[d,u]=St((j=c.startRoute)!=null?j:"/"),[f,b]=St(!1),[g,y]=St(!1),R=En(h);$n(()=>{let v=p($=>{if($.type==="urlchange"){let{url:q,back:S,forward:k}=$,[I,M]=ks(q);n(I),u(M),b(S),y(k)}},e);return()=>v()},[]);let N=v=>{let $=v.target.value.startsWith("/")?v.target.value:`/${v.target.value}`;u($)},F=v=>{v.code==="Enter"&&(v.preventDefault(),v.stopPropagation(),typeof t=="function"&&t(r+v.currentTarget.value))},X=()=>{a({type:"refresh"})},E=()=>{a({type:"urlback"})},_=()=>{a({type:"urlforward"})},B=l(R("button","icon"),T,Ko,m({minWidth:"$space$6",justifyContent:"center"}));return le("div",{className:l(R("navigator"),Tn,o),...s},le("button",{"aria-label":"Go back one page",className:B,disabled:!f,onClick:E,type:"button"},le(Lo,null)),le("button",{"aria-label":"Go forward one page",className:B,disabled:!g,onClick:_,type:"button"},le(wo,null)),le("button",{"aria-label":"Refresh page",className:B,onClick:X,type:"button"},le(Qe,null)),le("input",{"aria-label":"Current Sandpack URL",className:l(R("input"),Nn),name:"Current Sandpack URL",onChange:N,onKeyDown:F,type:"text",value:d}))};import{useClasser as Gn}from"@code-hike/classer";import{Fragment as Kn,createElement as re,forwardRef as qn,useEffect as ea,useImperativeHandle as ta,useState as Qn}from"react";import{useEffect as Mn}from"react";var xs=()=>{var o;let{sandpack:e}=x(),{error:t}=e;return Mn(()=>{e.errorScreenRegisteredRef.current=!0},[]),(o=t==null?void 0:t.message)!=null?o:null};import{useEffect as Es,useState as Ln}from"react";var Qt=200,Rs=(e,t)=>{let{sandpack:o,listen:s}=x(),[r,n]=Ln("LOADING");return Es(()=>{o.loadingScreenRegisteredRef.current=!0;let c=s(a=>{a.type==="start"&&a.firstLoad===!0&&n("LOADING"),a.type==="done"&&n(p=>p==="LOADING"?"PRE_FADING":"HIDDEN")},e);return()=>{c()}},[e,o.status==="idle"]),Es(()=>{let c;return r==="PRE_FADING"&&!t?n("FADING"):r==="FADING"&&(c=setTimeout(()=>n("HIDDEN"),Qt)),()=>{clearTimeout(c)}},[r,t]),o.status==="timeout"?"TIMEOUT":o.status!=="running"?"HIDDEN":r};var Ts=e=>{let{dispatch:t}=x();return{refresh:()=>t({type:"refresh"},e),back:()=>t({type:"urlback"},e),forward:()=>t({type:"urlforward"},e)}};function wn(e){var r,n;let{activeFile:t,bundlerState:o}=e;if(o==null)return null;let s=o.transpiledModules[t+":"];return(n=(r=s==null?void 0:s.source)==null?void 0:r.compiledCode)!=null?n:null}var Ns=()=>{let{sandpack:e}=x();return e.status!=="running"?null:wn(e)};import{useEffect as Fn,useRef as $s}from"react";var vt=()=>{let{sandpack:e,listen:t,dispatch:o}=x(),s=$s(null),r=$s(Ae());return Fn(()=>{let c=s.current,a=r.current;return c!==null&&e.registerBundler(c,a),()=>e.unregisterBundler(a)},[]),{sandpack:e,getClient:()=>e.clients[r.current]||null,clientId:r.current,iframe:s,listen:c=>t(c,r.current),dispatch:c=>o(c,r.current)}};import{useClasser as An}from"@code-hike/classer";import{createElement as Ms}from"react";var kt=({children:e,className:t,...o})=>{let s=xs(),r=An(h);return!s&&!e?null:Ms("div",{className:l(r("overlay","error"),He,ct,t),translate:"no",...o},Ms("div",{className:l(r("error-message"),ke)},s||e))};import{useClasser as Vn}from"@code-hike/classer";import{createElement as Te}from"react";import{useClasser as _n}from"@code-hike/classer";import{createElement as se}from"react";import{useClasser as Bn}from"@code-hike/classer";import{createElement as Fs}from"react";import Pn from"lz-string";import{createElement as Ct,useEffect as ws,useRef as Dn,useState as Hn}from"react";var In=e=>Pn.compressToBase64(JSON.stringify(e)).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""),Ls="https://codesandbox.io/api/v1/sandboxes/define",On=(e,t)=>{let o=Object.keys(e).reduce((s,r)=>{let n=r.replace("/",""),c={content:e[r].code,isBinary:!1};return{...s,[n]:c}},{});return In({files:o,...t?{template:t}:null})},eo=({children:e,...t})=>{var c,a,p;let{sandpack:o}=x(),s=Dn(null),[r,n]=Hn();return ws(function(){let u=setTimeout(()=>{let f=On(o.files,o.environment),b=new URLSearchParams({parameters:f,query:new URLSearchParams({file:o.activeFile,utm_medium:"sandpack"}).toString()});n(b)},600);return()=>{clearTimeout(u)}},[o.activeFile,o.environment,o.files]),ws(function(){o.openInCSBRegisteredRef.current=!0},[]),((p=(a=(c=r==null?void 0:r.get)==null?void 0:c.call(r,"parameters"))==null?void 0:a.length)!=null?p:0)>1500?Ct("button",{onClick:()=>{var d;return(d=s.current)==null?void 0:d.submit()},title:"Open in CodeSandbox",...t},Ct("form",{ref:s,action:Ls,method:"POST",style:{visibility:"hidden"},target:"_blank"},Array.from(r,([d,u])=>Ct("input",{key:d,name:d,type:"hidden",value:u}))),e):Ct("a",{href:`${Ls}?${r==null?void 0:r.toString()}`,rel:"noreferrer noopener",target:"_blank",title:"Open in CodeSandbox",...t},e)};var Ve=()=>{let e=Bn(h);return Fs(eo,{className:l(e("button","icon-standalone"),T,ee,z)},Fs(Ao,null))};var to=m({transform:"translate(-4px, 9px) scale(0.13, 0.13)","*":{position:"absolute",width:"96px",height:"96px"}}),jn=m({position:"absolute",right:"$space$2",bottom:"$space$2",zIndex:"$top",width:"32px",height:"32px",borderRadius:"$border$radius",[`.${to}`]:{display:"flex"},[`.${T}`]:{display:"none"},[`&:hover .${T}`]:{display:"flex"},[`&:hover .${to}`]:{display:"none"}}),Un=tt({"0%":{transform:"rotateX(-25.5deg) rotateY(45deg)"},"100%":{transform:"rotateX(-25.5deg) rotateY(405deg)"}}),zn=m({animation:`${Un} 1s linear infinite`,animationFillMode:"forwards",transformStyle:"preserve-3d",transform:"rotateX(-25.5deg) rotateY(45deg)","*":{border:"10px solid $colors$clickable",borderRadius:"8px",background:"$colors$surface1"},".top":{transform:"rotateX(90deg) translateZ(44px)",transformOrigin:"50% 50%"},".bottom":{transform:"rotateX(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".front":{transform:"rotateY(0deg) translateZ(44px)",transformOrigin:"50% 50%"},".back":{transform:"rotateY(-180deg) translateZ(44px)",transformOrigin:"50% 50%"},".left":{transform:"rotateY(-90deg) translateZ(44px)",transformOrigin:"50% 50%"},".right":{transform:"rotateY(90deg) translateZ(44px)",transformOrigin:"50% 50%"}}),xt=({className:e,showOpenInCodeSandbox:t,...o})=>{let s=_n(h);return se("div",{className:l(s("cube-wrapper"),jn,e),title:"Open in CodeSandbox",...o},t&&se(Ve,null),se("div",{className:l(s("cube"),to)},se("div",{className:l(s("sides"),zn)},se("div",{className:"top"}),se("div",{className:"right"}),se("div",{className:"bottom"}),se("div",{className:"left"}),se("div",{className:"front"}),se("div",{className:"back"}))))};var Xn=m({backgroundColor:"$colors$surface1"}),Rt=({clientId:e,loading:t,className:o,style:s,showOpenInCodeSandbox:r,...n})=>{let c=Rs(e,t),a=Vn(h);if(c==="HIDDEN")return null;if(c==="TIMEOUT")return Te("div",{className:l(a("overlay","error"),He,ct,o),...n},Te("div",{className:l(a("error-message"),ke)},"Unable to establish connection with the sandpack bundler. Make sure you are online or try again later. If the problem persists, please report it via"," ",Te("a",{className:l(a("error-message"),ke),href:"mailto:hello@codesandbox.io?subject=Sandpack Timeout Error"},"email")," ","or submit an issue on"," ",Te("a",{className:l(a("error-message"),ke),href:"https://github.com/codesandbox/sandpack/issues",rel:"noreferrer noopener",target:"_blank"},"GitHub.")));let p=c==="LOADING"||c==="PRE_FADING";return Te("div",{className:l(a("overlay","loading"),He,Xn,o),style:{...s,opacity:p?1:0,transition:`opacity ${Qt}ms ease-out`},...n},Te(xt,{showOpenInCodeSandbox:r}))};import{useClasser as Wn}from"@code-hike/classer";import{createElement as Ps}from"react";var As=({clientId:e})=>{let{refresh:t}=Ts(e),o=Wn(h);return Ps("button",{className:l(o("button","icon-standalone"),T,ee,z),onClick:t,title:"Refresh Sandpack",type:"button"},Ps(Qe,null))};var Zn=m({flex:1,display:"flex",flexDirection:"column",background:"white",overflow:"auto",position:"relative"}),Yn=m({border:"0",outline:"0",width:"100%",height:"100%",minHeight:"160px",maxHeight:"2000px",flex:1}),Jn=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),Is=qn(({showNavigator:e=!1,showRefreshButton:t=!0,showOpenInCodeSandbox:o=!0,showSandpackErrorOverlay:s=!0,actionsChildren:r=re(Kn,null),children:n,className:c,...a},p)=>{let{sandpack:d,listen:u,iframe:f,getClient:b,clientId:g}=vt(),[y,R]=Qn(null),{status:N,errorScreenRegisteredRef:F,openInCSBRegisteredRef:X,loadingScreenRegisteredRef:E}=d,_=Gn(h);X.current=!0,F.current=!0,E.current=!0,ea(()=>u(v=>{v.type==="resize"&&R(v.height)}),[]),ta(p,()=>({clientId:g,getClient:b}),[b,g]);let B=j=>{!f.current||(f.current.src=j)};return re(Y,{className:l(`${h}-preview`,c),...a},e&&re(Cs,{clientId:g,onURLChange:B}),re("div",{className:l(_("preview-container"),Zn)},re("iframe",{ref:f,className:l(_("preview-iframe"),Yn),style:{height:y||void 0},title:"Sandpack Preview"}),s&&re(kt,null),re("div",{className:l(_("preview-actions"),Jn)},r,!e&&t&&N==="running"&&re(As,{clientId:g}),o&&re(Ve,null)),re(Rt,{clientId:g,showOpenInCodeSandbox:o}),n))});import{useClasser as oa}from"@code-hike/classer";import{createElement as Xe,useEffect as na,useRef as ra}from"react";var sa=m({display:"flex",flexDirection:"column",width:"100%",position:"relative",overflow:"auto",minHeight:"160px",flex:1}),bm=({className:e,...t})=>{let{sandpack:o}=x(),s=Ns(),r=oa(h),n=ra(null);return na(()=>{let c=n.current;return c&&o.registerBundler(c,"hidden"),()=>{o.unregisterBundler("hidden")}},[]),Xe("div",{className:l(r("transpiled-code"),me,sa,e),...t},Xe(bs,{code:s!=null?s:"",initMode:o.initMode,...t}),Xe("iframe",{ref:n,style:{display:"none"},title:"transpiled sandpack code"}),Xe(kt,null),Xe(Rt,{clientId:"hidden",showOpenInCodeSandbox:!1}))};import{useClasser as aa}from"@code-hike/classer";import{createElement as Os,useEffect as oo,useRef as ca,useState as la}from"react";var ia=m({height:"$layout$height",width:"100%"}),Em=({clientId:e,theme:t,className:o,...s})=>{let{listen:r,sandpack:n}=x(),{themeMode:c}=Ce(),a=aa(h),p=ca(),[d,u]=la(null);return oo(()=>{import("react-devtools-inline/frontend").then(f=>{p.current=f})},[]),oo(()=>r(b=>{var g;if(b.type==="activate-react-devtools"){let y=e?n.clients[e]:Object.values(n.clients)[0],R=(g=y==null?void 0:y.iframe)==null?void 0:g.contentWindow;p.current&&R&&u(p.current.initialize(R))}}),[p,e,r,n.clients]),oo(()=>{n.registerReactDevTools("legacy")},[]),d?Os("div",{className:l(a("devtools"),ia,o),...s},Os(d,{browserTheme:t!=null?t:c})):null};import{Fragment as _a,createElement as V,useEffect as Qs,useState as Ba}from"react";import{useClasser as pa}from"@code-hike/classer";import{createElement as ua,forwardRef as ma}from"react";var da=m({border:"1px solid $colors$surface2",display:"flex",flexWrap:"wrap",alignItems:"stretch",borderRadius:"$border$radius",overflow:"hidden",position:"relative",backgroundColor:"$colors$surface2",gap:1,[`> .${me}`]:{flexGrow:1,flexShrink:1,flexBasis:"0",minWidth:"350px",height:"$layout$height","@media print":{height:"auto",display:"block"},"@media screen and (max-width: 768px)":{height:"auto",minWidth:"100% !important;"}},[`> .${h}-file-explorer`]:{flex:.2,minWidth:200}}),Ds=ma(({children:e,className:t,...o},s)=>{let{sandpack:r}=x(),n=pa(h),c=dt(r.lazyAnchorRef,s);return ua("div",{ref:c,className:l(n("layout"),da,t),...o},e)});import{createElement as pe}from"react";var fa=m({justifyContent:"space-between",borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",fontFamily:"$font$mono",maxHeight:"$layout$headerHeight",overflowX:"auto",whiteSpace:"nowrap"}),so=m({display:"flex",flexDirection:"row",alignItems:"center",gap:"$space$2"}),Hs=({status:e,suiteOnly:t,setSuiteOnly:o,setVerbose:s,verbose:r,watchMode:n,setWatchMode:c,showSuitesOnly:a})=>{let p=l(T,z,m({padding:"$space$1 $space$3"}));return pe("div",{className:l(fa,so)},pe("div",{className:l(so)},pe("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},pe(Se,null),"Tests")),pe("div",{className:l(so)},a&&pe("button",{className:p,"data-active":t,disabled:e==="initialising",onClick:o},"Suite only"),pe("button",{className:p,"data-active":r,disabled:e==="initialising",onClick:s},"Verbose"),pe("button",{className:p,"data-active":n,disabled:e==="initialising",onClick:c},"Watch")))};import{useClasser as ha}from"@code-hike/classer";import{createElement as _s}from"react";var Bs=({onClick:e})=>{let t=ha(h);return _s("button",{className:l(t("button","icon-standalone"),T,ee,z),onClick:e,title:"Run tests",type:"button"},_s(Ke,null))};import{Fragment as Aa,createElement as P}from"react";import{Fragment as xa,createElement as Ge}from"react";import ue from"react";var js=e=>({"--test-pass":e?"#18df16":"#15c213","--test-fail":e?"#df162b":"#c21325","--test-skip":e?"#eace2b":"#c2a813","--test-run":e?"#eace2b":"#c2a813","--test-title":e?"#3fbabe":"#256c6f"}),Et=m({variants:{status:{pass:{color:"var(--test-pass)"},fail:{color:"var(--test-fail)"},skip:{color:"var(--test-skip)"},title:{color:"var(--test-title)"}}}}),ne=Et({status:"pass"}),H=Et({status:"fail"}),Tt=Et({status:"skip"}),Us=Et({status:"title"}),ro=m({variants:{status:{pass:{background:"var(--test-pass)",color:"$colors$surface1"},fail:{background:"var(--test-fail)",color:"$colors$surface1"},run:{background:"var(--test-run)",color:"$colors$surface1"}}}}),zs=ro({status:"run"}),Vs=ro({status:"pass"}),no=ro({status:"fail"});var ga=m({marginLeft:"$space$4"}),ba=m({marginBottom:"$space$2",color:"$colors$clickable"}),ya=m({marginBottom:"$space$2",color:"$colors$hover"}),Sa=m({marginLeft:"$space$2"}),ao=m({marginRight:"$space$2"}),Nt=({tests:e,style:t})=>ue.createElement("div",{className:l(ga)},e.map(o=>ue.createElement("div",{key:o.name,className:l(ba)},o.status==="pass"&&ue.createElement("span",{className:l(ne,ao)},"\u2713"),o.status==="fail"&&ue.createElement("span",{className:l(H,ao)},"\u2715"),o.status==="idle"&&ue.createElement("span",{className:l(Tt,ao)},"\u25CB"),ue.createElement("span",{className:l(ya)},o.name),o.duration!==void 0&&ue.createElement("span",{className:l(Sa)},"(",o.duration," ms)"))));import va from"clean-set";var Xs=e=>$t(e).filter(t=>t.status==="fail"),$t=e=>Object.values(e.tests).concat(...Object.values(e.describes).map($t)),Ws=e=>e.map(Mt).reduce((t,o)=>({pass:t.pass+o.pass,fail:t.fail+o.fail,skip:t.skip+o.skip,total:t.total+o.total}),{pass:0,skip:0,fail:0,total:0}),Mt=e=>$t(e).reduce((t,o)=>({pass:o.status==="pass"?t.pass+1:t.pass,fail:o.status==="fail"?t.fail+1:t.fail,skip:o.status==="idle"||o.status==="running"?t.skip+1:t.skip,total:t.total+1}),{pass:0,fail:0,skip:0,total:0}),Gs=e=>e.filter(t=>Object.values(t.describes).length>0||Object.values(t.tests).length>0).map(Mt).reduce((t,o)=>({pass:t.pass+(o.fail===0?1:0),fail:t.fail+(o.fail>0?1:0),total:t.total+1}),{pass:0,fail:0,total:0}),Zs=e=>Ne(e,$t).reduce((t,o)=>t+(o.duration||0),0),Lt=e=>Object.values(e.describes).length===0&&Object.values(e.tests).length===0,We=e=>{let t=e.length-1,o=e.slice(0,t),s=e[t];return[o,s]},Ne=(e,t)=>e.map(t).reduce((o,s)=>o.concat(s),[]),ae=(e,t)=>o=>va(o,e,t);var ka=m({color:"$colors$hover",marginBottom:"$space$2"}),Ca=m({marginLeft:"$space$4"}),io=({describes:e})=>Ge(xa,null,e.map(t=>{if(Lt(t))return null;let o=Object.values(t.tests),s=Object.values(t.describes);return Ge("div",{key:t.name,className:l(Ca)},Ge("div",{className:l(ka)},t.name),Ge(Nt,{tests:o}),Ge(io,{describes:s}))}));import{createElement as Ta}from"react";var Ra=m({color:"$colors$hover",fontSize:"$font$size",padding:"$space$2",whiteSpace:"pre-wrap"}),co=({error:e,path:t})=>Ta("div",{className:l(Ra),dangerouslySetInnerHTML:{__html:Ea(e,t)}}),wt=e=>e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'"),Ea=(e,t)=>{let o="";if(e.matcherResult?o=`${wt(e.message).replace(/(expected)/m,`$1`).replace(/(received)/m,`$1`).replace(/(Difference:)/m,"$1").replace(/(Expected:)(.*)/m,`$1$2`).replace(/(Received:)(.*)/m,`$1$2`).replace(/^(-.*)/gm,`$1`).replace(/^(\+.*)/gm,`$1`)}`:o=wt(e.message),e.mappedErrors&&e.mappedErrors[0]&&e.mappedErrors[0].fileName.endsWith(t)&&e.mappedErrors[0]._originalScriptCode){let r=e.mappedErrors[0]._originalScriptCode||[],n=Math.max(...r.map(a=>(a.lineNumber+"").length))+2,c=Array.from({length:n}).map(()=>" ");o+="
",o+="
",o+="
",r.filter(a=>a.content.trim()).forEach(a=>{let p=(a.lineNumber+"").length,d=[...c];d.length-=p,a.highlight&&(d.length-=2);let u=a.content.indexOf(".to"),f=Array.from({length:c.length+u-(n-1)},()=>" "),b=wt(a.content).replace(/(describe|test|it)(\()('|"|`)(.*)('|"|`)/m,`$1$2$3$4$5`).replace(/(expect\()(.*)(\)\..*)(to[\w\d]*)(\()(.*)(\))/m,`$1$2$3$4$5$6$7`);o+=`
`+(a.highlight?`> `:"")+d.join("")+wt(""+a.lineNumber)+" | "+b+"
"+(a.highlight?"
"+c.join("")+" | "+f.join("")+`^
`:"")}),o+="
"}return o.replace(/(?:\r\n|\r|\n)/g,"
")};var Na=m({display:"flex",flexDirection:"row",alignItems:"center",marginBottom:"$space$2"}),lo=m({marginBottom:"$space$2"}),$a=m({fontWeight:"bold"}),Ft=m({borderRadius:"calc($border$radius / 2)"}),Ma=m({padding:"$space$1 $space$2",fontFamily:"$font$mono",textTransform:"uppercase",marginRight:"$space$2"}),La=m({fontFamily:"$font$mono",cursor:"pointer",display:"inline-block"}),wa=m({color:"$colors$clickable",textDecorationStyle:"dotted",textDecorationLine:"underline"}),Fa=m({color:"$colors$hover",fontWeight:"bold",textDecorationStyle:"dotted",textDecorationLine:"underline"}),Ys=({specs:e,openSpec:t,status:o,verbose:s})=>P(Aa,null,e.map(r=>{if(r.error)return P("div",{key:r.name,className:l(lo)},P(At,{className:l(Ft,no)},"Error"),P(Js,{onClick:()=>t(r.name),path:r.name}),P(co,{error:r.error,path:r.name}));if(Lt(r))return null;let n=Object.values(r.tests),c=Object.values(r.describes),a=Mt(r);return P("div",{key:r.name,className:l(lo)},P("div",{className:l(Na)},o==="complete"?a.fail>0?P(At,{className:l(Ft,no)},"Fail"):P(At,{className:l(Ft,Vs)},"Pass"):P(At,{className:l(Ft,zs)},"Run"),P(Js,{onClick:()=>t(r.name),path:r.name})),s&&P(Nt,{tests:n}),s&&P(io,{describes:c}),Xs(r).map(p=>P("div",{key:`failing-${p.name}`,className:l(lo)},P("div",{className:l($a,H)},"\u25CF ",p.blocks.join(" \u203A ")," \u203A ",p.name),p.errors.map(d=>P(co,{key:`failing-${p.name}-error`,error:d,path:p.path})))))})),At=({children:e,className:t})=>P("span",{className:l(Ma,t)},e),Js=({onClick:e,path:t})=>{let o=t.split("/"),s=o.slice(0,o.length-1).join("/")+"/",r=o[o.length-1];return P("button",{className:l(T,La),onClick:e},P("span",{className:l(wa)},s),P("span",{className:l(Fa)},r))};import{createElement as W}from"react";var qs=m({marginBottom:"$space$2"}),po=m({fontWeight:"bold",color:"$colors$hover",whiteSpace:"pre-wrap"}),Pa=m({fontWeight:"bold",color:"$colors$clickable"}),Ks=({suites:e,tests:t,duration:o})=>{let s="Test suites: ",r=n=>{let c=s.length-n.length,a=Array.from({length:c},()=>" ").join("");return n+a};return W("div",{className:l(Pa)},W("div",{className:l(qs)},W("span",{className:l(po)},s),e.fail>0&&W("span",{className:l(H)},e.fail," failed,"," "),e.pass>0&&W("span",{className:l(ne)},e.pass," passed,"," "),W("span",null,e.total," total")),W("div",{className:l(qs)},W("span",{className:l(po)},r("Tests:")),t.fail>0&&W("span",{className:l(H)},t.fail," failed,"," "),t.skip>0&&W("span",{className:l(Tt)},t.skip," skipped,"," "),t.pass>0&&W("span",{className:l(ne)},t.pass," passed,"," "),W("span",null,t.total," total")),W("div",{className:l(po)},r("Time:"),o/1e3,"s"))};var Ia=m({display:"flex",position:"absolute",bottom:"$space$2",right:"$space$2",zIndex:"$overlay","> *":{marginLeft:"$space$2"}}),Oa={specs:{},status:"initialising",verbose:!1,watchMode:!0,suiteOnly:!1,specsCount:0},mo=({verbose:e=!1,watchMode:t=!0,style:o,className:s,onComplete:r,actionsChildren:n,...c})=>{let a=Ce(),{getClient:p,iframe:d,listen:u,sandpack:f}=vt(),[b,g]=Ba({...Oa,verbose:e,watchMode:t});Qs(()=>{let v=[],$="";return u(S=>{if(!(b.suiteOnly&&("path"in S&&S.path!==f.activeFile||"test"in S&&"path"in S.test&&S.test.path!==f.activeFile))){if(S.type==="action"&&S.action==="clear-errors"&&S.source==="jest"){$=S.path;return}if(S.type==="test"){if(S.event==="initialize_tests")return v=[],$="",b.watchMode?y():g(k=>({...k,status:"idle",specs:{}}));if(S.event==="test_count")return g(k=>({...k,specsCount:S.count}));if(S.event==="total_test_start")return v=[],g(k=>({...k,status:"running"}));if(S.event==="total_test_end")return g(k=>(r!==void 0&&r(k.specs),{...k,status:"complete"}));if(S.event==="add_file")return g(ae(["specs",S.path],{describes:{},tests:{},name:S.path}));if(S.event==="remove_file")return g(k=>{let I=Object.entries(k.specs).reduce((M,[O,G])=>O===S.path?M:{...M,[O]:G},{});return{...k,specs:I}});if(S.event==="file_error")return g(ae(["specs",S.path,"error"],S.error));if(S.event==="describe_start"){v.push(S.blockName);let[k,I]=We(v),M=$;return I===void 0?void 0:g(ae(["specs",M,"describes",...Ne(k,O=>[O,"describes"]),I],{name:S.blockName,tests:{},describes:{}}))}if(S.event==="describe_end"){v.pop();return}if(S.event==="add_test"){let[k,I]=We(v),M={status:"idle",errors:[],name:S.testName,blocks:[...v],path:S.path};return g(I===void 0?ae(["specs",S.path,"tests",S.testName],M):ae(["specs",S.path,"describes",...Ne(k,O=>[O,"describes"]),I,"tests",S.testName],M))}if(S.event==="test_start"){let{test:k}=S,[I,M]=We(k.blocks),O={status:"running",name:k.name,blocks:k.blocks,path:k.path,errors:[]};return g(M===void 0?ae(["specs",k.path,"tests",k.name],O):ae(["specs",k.path,"describes",...Ne(I,G=>[G,"describes"]),M,"tests",k.name],O))}if(S.event==="test_end"){let{test:k}=S,[I,M]=We(k.blocks),O={status:k.status,errors:k.errors,duration:k.duration,name:k.name,blocks:k.blocks,path:k.path};return g(M===void 0?ae(["specs",k.path,"tests",k.name],O):ae(["specs",k.path,"describes",...Ne(I,G=>[G,"describes"]),M,"tests",k.name],O))}}}})},[b.suiteOnly,b.watchMode,f.activeFile]);let y=()=>{g($=>({...$,status:"running",specs:{}}));let v=p();v&&v.dispatch({type:"run-all-tests"})},R=()=>{g($=>({...$,status:"running",specs:{}}));let v=p();v&&v.dispatch({type:"run-tests",path:f.activeFile})},N=/.*\.(test|spec)\.[tj]sx?$/,F=f.activeFile.match(N)!==null;Qs(function(){return u(({type:q})=>{q==="done"&&b.watchMode&&(F?R():y())})},[R,y,b.watchMode,F]);let X=v=>{f.setActiveFile(v)},E=Object.values(b.specs),_=Zs(E),B=Ws(E),j=Gs(E);return V(Y,{className:l(`${h}-tests`,s),style:{...js(a.themeMode==="dark"),...o},...c},V("iframe",{ref:d,style:{display:"none"},title:"Sandpack Tests"}),V(Hs,{setSuiteOnly:()=>g(v=>({...v,suiteOnly:!v.suiteOnly})),setVerbose:()=>g(v=>({...v,verbose:!v.verbose})),setWatchMode:()=>{g(v=>({...v,watchMode:!v.watchMode}))},showSuitesOnly:b.specsCount>1,status:b.status,suiteOnly:b.suiteOnly,verbose:b.verbose,watchMode:b.watchMode}),b.status==="running"||b.status==="initialising"?V(xt,{showOpenInCodeSandbox:!1}):V("div",{className:Ia.toString()},n,V(Bs,{onClick:b.suiteOnly?R:y})),V("div",{className:l(Da)},E.length===0&&b.status==="complete"?V("div",{className:l(Ha)},V("p",null,"No test files found."),V("p",null,"Test match:"," ",V("span",{className:l(H)},N.toString()))):V(_a,null,V(Ys,{openSpec:X,specs:E,status:b.status,verbose:b.verbose}),b.status==="complete"&&B.total>0&&V(Ks,{duration:_,suites:j,tests:B}))))},Da=m({padding:"$space$4",height:"100%",overflow:"auto",display:"flex",flexDirection:"column",position:"relative",fontFamily:"$font$mono"}),Ha=m({fontWeight:"bold",color:"$colors$base"});import{Fragment as Ka,createElement as fe,useEffect as qa,useRef as Ja}from"react";import{useClasser as ja}from"@code-hike/classer";import er from"react";var tr=({onClick:e})=>{let t=ja("sp");return er.createElement("button",{className:l(t("button","icon-standalone"),T,ee,z,m({position:"absolute",bottom:"$space$2",right:"$space$2"})),onClick:e},er.createElement(Fo,null))};import uo from"react";var or=()=>uo.createElement("div",{className:l(m({borderBottom:"1px solid $colors$surface2",padding:"$space$3 $space$2",height:"$layout$headerHeight"}))},uo.createElement("p",{className:l(m({lineHeight:1,margin:0,color:"$colors$base",fontSize:"$font$size",display:"flex",alignItems:"center",gap:"$space$2"}))},uo.createElement(Se,null),"Console"));import{useEffect as za,useState as Ua}from"react";var sr=["SyntaxError: ","Error in sandbox:"],rr={id:"random",method:"clear",data:["Console was cleared"]},fo="@t",ho="@r",go=1e4,bo=2,Pt=400,yo=Pt*2;var So=e=>{var c,a;let[t,o]=Ua([]),{listen:s}=x(),r=(c=e==null?void 0:e.showSyntaxError)!=null?c:!1,n=(a=e==null?void 0:e.maxMessageCount)!=null?a:yo;return za(()=>s(d=>{if(d.type==="console"&&d.codesandbox){if(d.log.find(({method:f})=>f==="clear"))return o([rr]);let u=r?d.log:d.log.filter(f=>f.data.filter(g=>typeof g!="string"?!0:sr.filter(R=>g.startsWith(R)).length===0).length>0);if(!u)return;o(f=>{let b=[...f,...u].filter((g,y,R)=>y===R.findIndex(N=>N.id===g.id));for(;b.length>yo;)b.shift();return b})}},e==null?void 0:e.clientId),[s,n,e,r]),{logs:t,reset:()=>o([])}};var vo=function(){return(0,eval)("this")}(),Va=typeof ArrayBuffer=="function",Xa=typeof Map=="function",Wa=typeof Set=="function",Ze;(function(s){s[s.infinity=0]="infinity",s[s.minusInfinity=1]="minusInfinity",s[s.minusZero=2]="minusZero"})(Ze||(Ze={}));var nr={Arithmetic:e=>e===0?1/0:e===1?-1/0:e===2?-0:e,HTMLElement:e=>{let t=document.implementation.createHTMLDocument("sandbox");try{let o=t.createElement(e.tagName);o.innerHTML=e.innerHTML;for(let s of Object.keys(e.attributes))try{o.setAttribute(s,e.attributes[s])}catch{}return o}catch(o){return e}},Function:e=>{let t=()=>{};return Object.defineProperty(t,"toString",{value:()=>`function ${e.name}() {${e.body}}`}),t},"[[NaN]]":()=>NaN,"[[undefined]]":()=>{},"[[Date]]":e=>{let t=new Date;return t.setTime(e),t},"[[RegExp]]":e=>new RegExp(e.src,e.flags),"[[Error]]":e=>{let t=vo[e.name]||Error,o=new t(e.message);return o.stack=e.stack,o},"[[ArrayBuffer]]":e=>{if(Va){let t=new ArrayBuffer(e.length);return new Int8Array(t).set(e),t}return e},"[[TypedArray]]":e=>typeof vo[e.ctorName]=="function"?new vo[e.ctorName](e.arr):e.arr,"[[Map]]":e=>{if(Xa){let o=new Map;for(let s=0;s{if(Wa){let t=new Set;for(let o=0;o{if(typeof e=="string"||typeof e=="number"||e===null)return e;if(Array.isArray(e))return e.map(ar);if(typeof e=="object"&&fo in e){let t=e[fo];return nr[t](e.data)}return e},Ga=(e,t,o)=>`[${e.reduce((r,n,c)=>`${r}${c?", ":""}${Ye(n,t,o)}`,"")}]`,Za=(e,t,o)=>{let s=e.constructor.name!=="Object"?`${e.constructor.name} `:"";if(o>bo)return s;let r=Object.entries(e),n=Object.entries(e).reduce((c,[a,p],d)=>{let u=d===0?"":", ",f=r.length>10?` + `:"",b=Ye(p,t,o);return d===Pt?c+f+"...":d>Pt?c:c+`${u}${f}${a}: `+b},"");return`${s}{ ${n}${r.length>10?` diff --git a/beta/patches/@lezer+javascript+0.15.2.patch b/beta/patches/@lezer+javascript+0.15.2.patch new file mode 100644 index 000000000..c7ecd94c4 --- /dev/null +++ b/beta/patches/@lezer+javascript+0.15.2.patch @@ -0,0 +1,345 @@ +diff --git a/node_modules/@lezer/javascript/dist/index.cjs b/node_modules/@lezer/javascript/dist/index.cjs +index 2d4ede8..622851f 100644 +--- a/node_modules/@lezer/javascript/dist/index.cjs ++++ b/node_modules/@lezer/javascript/dist/index.cjs +@@ -6,16 +6,16 @@ var lr = require('@lezer/lr'); + var common = require('@lezer/common'); + + // This file was generated by lezer-generator. You probably shouldn't edit it. +-const noSemi = 275, ++const noSemi = 277, + incdec = 1, + incdecPrefix = 2, +- templateContent = 276, +- templateDollarBrace = 277, +- templateEnd = 278, +- insertSemi = 279, ++ templateContent = 278, ++ templateDollarBrace = 279, ++ templateEnd = 280, ++ insertSemi = 281, + TSExtends = 3, +- spaces = 281, +- newline = 282, ++ spaces = 283, ++ newline = 284, + LineComment = 4, + BlockComment = 5, + Dialect_ts = 1; +@@ -95,31 +95,31 @@ function tsExtends(value, stack) { + } + + // This file was generated by lezer-generator. You probably shouldn't edit it. +-const spec_identifier = {__proto__:null,export:16, as:21, from:25, default:30, async:35, function:36, this:46, true:54, false:54, void:60, typeof:64, null:78, super:80, new:114, await:131, yield:133, delete:134, class:144, extends:146, public:189, private:189, protected:189, readonly:191, instanceof:212, in:214, const:216, import:248, keyof:299, unique:303, infer:309, is:343, abstract:363, implements:365, type:367, let:370, var:372, interface:379, enum:383, namespace:389, module:391, declare:395, global:399, for:420, of:429, while:432, with:436, do:440, if:444, else:446, switch:450, case:456, try:462, catch:464, finally:466, return:470, throw:474, break:478, continue:482, debugger:486}; +-const spec_word = {__proto__:null,async:101, get:103, set:105, public:153, private:153, protected:153, static:155, abstract:157, override:159, readonly:165, new:347}; ++const spec_identifier = {__proto__:null,export:16, as:21, from:25, default:30, async:35, function:36, this:46, true:54, false:54, void:60, typeof:64, null:78, super:80, new:114, await:131, yield:133, delete:134, class:144, extends:146, public:189, private:189, protected:189, readonly:191, instanceof:212, in:214, const:216, import:248, keyof:303, unique:307, infer:313, is:347, abstract:367, implements:369, type:371, let:374, var:376, interface:383, enum:387, namespace:393, module:395, declare:399, global:403, for:424, of:433, while:436, with:440, do:444, if:448, else:450, switch:454, case:460, try:466, catch:468, finally:470, return:474, throw:478, break:482, continue:486, debugger:490}; ++const spec_word = {__proto__:null,async:101, get:103, set:105, public:153, private:153, protected:153, static:155, abstract:157, override:159, readonly:165, new:351}; + const spec_LessThan = {__proto__:null,"<":121}; + const parser = lr.LRParser.deserialize({ + version: 13, +- states: "$1WO`QYOOO'QQ!LdO'#CgO'XOSO'#DSO)dQYO'#DXO)tQYO'#DdO){QYO'#DnO-xQYO'#DtOOQO'#EX'#EXO.]QWO'#EWO.bQWO'#EWOOQ!LS'#Eb'#EbO0aQ!LdO'#IqO2wQ!LdO'#IrO3eQWO'#EvO3jQpO'#F]OOQ!LS'#FO'#FOO3rO!bO'#FOO4QQWO'#FdO5_QWO'#FcOOQ!LS'#Ir'#IrOOQ!LQ'#Iq'#IqOOQQ'#J['#J[O5dQWO'#HjO5iQ!LYO'#HkOOQQ'#Ic'#IcOOQQ'#Hl'#HlQ`QYOOO){QYO'#DfO5qQWO'#GWO5vQ#tO'#ClO6UQWO'#EVO6aQWO'#EcO6fQ#tO'#E}O7QQWO'#GWO7VQWO'#G[O7bQWO'#G[O7pQWO'#G_O7pQWO'#G`O7pQWO'#GbO5qQWO'#GeO8aQWO'#GhO9oQWO'#CcO:PQWO'#GuO:XQWO'#G{O:XQWO'#G}O`QYO'#HPO:XQWO'#HRO:XQWO'#HUO:^QWO'#H[O:cQ!LZO'#H`O){QYO'#HbO:nQ!LZO'#HdO:yQ!LZO'#HfO5iQ!LYO'#HhO){QYO'#IsOOOS'#Hn'#HnO;UOSO,59nOOQ!LS,59n,59nO=gQbO'#CgO=qQYO'#HoO>OQWO'#ItO?}QbO'#ItO'dQYO'#ItO@UQWO,59sO@lQ&jO'#D^OAeQWO'#EXOArQWO'#JPOA}QWO'#JOOBVQWO,5:uOB[QWO'#I}OBcQWO'#DuO5vQ#tO'#EVOBqQWO'#EVOB|Q`O'#E}OOQ!LS,5:O,5:OOCUQYO,5:OOESQ!LdO,5:YOEpQWO,5:`OFZQ!LYO'#I|O7VQWO'#I{OFbQWO'#I{OFjQWO,5:tOFoQWO'#I{OF}QYO,5:rOH}QWO'#ESOJXQWO,5:rOKhQWO'#DhOKoQYO'#DmOKyQ&jO,5:{O){QYO,5:{OOQQ'#En'#EnOOQQ'#Ep'#EpO){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}OOQQ'#Et'#EtOLRQYO,5;_OOQ!LS,5;d,5;dOOQ!LS,5;e,5;eONRQWO,5;eOOQ!LS,5;f,5;fO){QYO'#HyONWQ!LYO,5UOOQQ'#If'#IfOOQQ,5>V,5>VOOQQ-E;j-E;jO!+SQ!LdO,5:QOOQ!LQ'#Co'#CoO!+sQ#tO,5O,5>OO!7yQWO,5>OOOQQ,5>Q,5>QO!7yQWO,5>QOOQQ,5>S,5>SO!8OQ`O,5?_OOOS-E;l-E;lOOQ!LS1G/Y1G/YO!8TQbO,5>ZO){QYO,5>ZOOQO-E;m-E;mO!8_QWO,5?`O!8gQbO,5?`O!8nQWO,5?jOOQ!LS1G/_1G/_O!8vQpO'#DQOOQO'#Iv'#IvO){QYO'#IvO!9eQpO'#IvO!:SQpO'#D_O!:eQ&jO'#D_O!SQ&jO'#D_O){QYO,5?kO!>^QWO'#HtO!8nQWO,5?jOOQ!LQ1G0a1G0aO!?jQ&jO'#DxOOQ!LS,5:a,5:aO){QYO,5:aOH}QWO,5:aO!?qQWO,5:aO:^QWO,5:qO!,lQpO,5:qO!,tQ#tO,5:qO5vQ#tO,5:qOOQ!LS1G/j1G/jOOQ!LS1G/z1G/zOOQ!LQ'#ER'#ERO){QYO,5?hO!?|Q!LYO,5?hO!@_Q!LYO,5?hO!@fQWO,5?gO!@nQWO'#HvO!@fQWO,5?gOOQ!LQ1G0`1G0`O7VQWO,5?gOOQ!LS1G0^1G0^O!AYQ!LdO1G0^O!AyQ!LbO,5:nOOQ!LS'#Fm'#FmO!BgQ!LdO'#IlOF}QYO1G0^O!DfQ#tO'#IwO!DpQWO,5:SO!DuQbO'#IxO){QYO'#IxO!EPQWO,5:XOOQ!LS'#DQ'#DQOOQ!LS1G0g1G0gO!EUQWO1G0gO!GgQ!LdO1G0iO!GnQ!LdO1G0iO!JRQ!LdO1G0iO!JYQ!LdO1G0iO!LaQ!LdO1G0iO!LtQ!LdO1G0iO# eQ!LdO1G0iO# lQ!LdO1G0iO#$PQ!LdO1G0iO#$WQ!LdO1G0iO#%{Q!LdO1G0iO#(uQ7^O'#CgO#*pQ7^O1G0yO#,kQ7^O'#IrOOQ!LS1G1P1G1PO#-OQ!LdO,5>eOOQ!LQ-E;w-E;wO#-oQ!LdO1G0iOOQ!LS1G0i1G0iO#/qQ!LdO1G0|O#0bQpO,5;oO#0gQpO,5;pO#0lQpO'#FWO#1QQWO'#FVOOQO'#JU'#JUOOQO'#Hw'#HwO#1VQpO1G1XOOQ!LS1G1X1G1XOOOO1G1b1G1bO#1eQ7^O'#IqO#1oQWO,5;yOLRQYO,5;yOOOO-E;v-E;vOOQ!LS1G1U1G1UOOQ!LS,5;{,5;{O#1tQpO,5;{OOQ!LS,59`,59`OH}QWO'#InOOOS'#Hm'#HmO#1yOSO,59dOOQ!LS,59d,59dO){QYO1G1hO!(eQWO'#H{O#2UQWO,5SQWO'#J_O#>_QWO,5=[OOQQ1G.i1G.iO#>dQ!LYO1G.iO#>oQWO1G.iO!(ZQWO1G.iO5iQ!LYO1G.iO#>tQbO,5?|O#?OQWO,5?|O#?ZQYO,5=cO#?bQWO,5=cO7VQWO,5?|OOQQ1G2{1G2{O`QYO1G2{OOQQ1G3R1G3ROOQQ1G3T1G3TO:XQWO1G3VO#?gQYO1G3XO#CbQYO'#HWOOQQ1G3[1G3[O:^QWO1G3bO#CoQWO1G3bO5iQ!LYO1G3fOOQQ1G3h1G3hOOQ!LQ'#Ft'#FtO5iQ!LYO1G3jO5iQ!LYO1G3lOOOS1G4y1G4yO#CwQ`O,5`,5>`O7VQWO,5>`OOQO-E;r-E;rOOQ!LQ'#EO'#EOO#FbQ!LrO'#EPO!?bQ&jO'#DyOOQO'#Hs'#HsO#F|Q&jO,5:dOOQ!LS,5:d,5:dO#GTQ&jO'#DyO#GfQ&jO'#DyO#GmQ&jO'#EUO#GpQ&jO'#EPO#G}Q&jO'#EPO!?bQ&jO'#EPO#HbQWO1G/{O#HgQ`O1G/{OOQ!LS1G/{1G/{O){QYO1G/{OH}QWO1G/{OOQ!LS1G0]1G0]O:^QWO1G0]O!,lQpO1G0]O!,tQ#tO1G0]O#HnQ!LdO1G5SO){QYO1G5SO#IOQ!LYO1G5SO#IaQWO1G5RO7VQWO,5>bOOQO,5>b,5>bO#IiQWO,5>bOOQO-E;t-E;tO#IaQWO1G5RO#IwQ!LdO,59gO#KvQ!LdO,5g,5>gO$'gQWO,5>gOOQ!LS1G1{1G1{P$'lQWO'#H{POQ!LS-E;y-E;yO$(]Q#tO1G2WO$)OQ#tO1G2YO$)YQ#tO1G2[OOQ!LS1G1t1G1tO$)aQWO'#HzO$)oQWO,5?sO$)oQWO,5?sO$)wQWO,5?sO$*SQWO,5?sOOQO1G1v1G1vO$*bQ#tO1G1uO$*rQWO'#H|O$+SQWO,5?tOH}QWO,5?tO$+[Q`O,5?tOOQ!LS1G1y1G1yO5iQ!LYO,5j,5>jOOQO-E;|-E;|O!-lQ&jO,59iO){QYO,59iO$,gQWO1G1pOJ^QWO1G1wO$,lQ!LdO7+'TOOQ!LS7+'T7+'TOF}QYO7+'TOOQ!LS7+%W7+%WO$-]Q`O'#JZO#HbQWO7+'xO$-gQWO7+'xO$-oQ`O7+'xOOQQ7+'x7+'xOH}QWO7+'xO){QYO7+'xOH}QWO7+'xOOQO1G.v1G.vO$-yQ!LbO'#CgO$.ZQ!LbO,5r,5>rOOQO-El,5>lOOQ!LQ-En,5>nOOQO-E[,5>[OOQO-E;n-E;nOOQO,5>a,5>aOOQO-E;s-E;sO!,lQpO1G/eOOQO1G3z1G3zO:^QWO,5:eOOQO,5:k,5:kO){QYO,5:kO$8tQ!LYO,5:kO$9PQ!LYO,5:kO!,lQpO,5:eOOQO-E;q-E;qOOQ!LS1G0O1G0OO!?bQ&jO,5:eO$9_Q&jO,5:eO$9pQ!LrO,5:kO$:[Q&jO,5:eO!?bQ&jO,5:kOOQO,5:p,5:pO$:cQ&jO,5:kO$:pQ!LYO,5:kOOQ!LS7+%g7+%gO#HbQWO7+%gO#HgQ`O7+%gOOQ!LS7+%w7+%wO:^QWO7+%wO!,lQpO7+%wO$;UQ!LdO7+*nO){QYO7+*nOOQO1G3|1G3|O7VQWO1G3|O$;fQWO7+*mO$;nQ!LdO1G2WO$=pQ!LdO1G2YO$?rQ!LdO1G1uO$AzQ#tO,5>]OOQO-E;o-E;oO$BUQbO,5>^O){QYO,5>^OOQO-E;p-E;pO$B`QWO1G5OO$BhQ7^O1G0^O$DoQ7^O1G0iO$DvQ7^O1G0iO$FwQ7^O1G0iO$GOQ7^O1G0iO$HsQ7^O1G0iO$IWQ7^O1G0iO$KeQ7^O1G0iO$KlQ7^O1G0iO$MmQ7^O1G0iO$MtQ7^O1G0iO% iQ7^O1G0iO% |Q!LdO<eOOOO7+'P7+'POOOS1G4t1G4tOOQ!LS1G4R1G4ROJ^QWO7+'vO%&vQWO,5>fO5qQWO,5>fOOQO-E;x-E;xO%'UQWO1G5_O%'UQWO1G5_O%'^QWO1G5_O%'iQ`O,5>hO%'sQWO,5>hOH}QWO,5>hOOQO-E;z-E;zO%'xQ`O1G5`O%(SQWO1G5`OOQO1G2O1G2OOOQO1G2P1G2PO5iQ!LYO1G2PO$+fQWO1G2PO5iQ!LYO1G2OO%([QWO1G2QOH}QWO1G2QOOQO1G2R1G2RO5iQ!LYO1G2UO!,lQpO1G2OO#4jQWO1G2PO%(aQWO1G2QO%(iQWO1G2POJ^QWO7+*]OOQ!LS1G/T1G/TO%(tQWO1G/TOOQ!LS7+'[7+'[O%(yQ#tO7+'cO%)ZQ!LdO<q,5>qO%+VQWO,5>qO#;kQWO,5>qOOQO-EpOOQO-EQQ`O1G4SO%>[QWO7+*zOOQO7+'k7+'kO5iQ!LYO7+'kOOQO7+'j7+'jO$+fQWO7+'lO%>dQ`O7+'lOOQO7+'p7+'pO5iQ!LYO7+'jO$+fQWO7+'kO%>kQWO7+'lOH}QWO7+'lO#4jQWO7+'kO%>pQ#tO<zQ`O,5>kOOQO-E;}-E;}O#HbQWOANAOOOQQANAOANAOOH}QWOANAOO%?UQ!LbO7+'nOOQQAN=dAN=dO5qQWO1G4]OOQO1G4]1G4]O%?cQWO1G4]O%?hQWO7++RO%?hQWO7++RO5iQ!LYOANAkO%?pQWOANAkOOQQANAkANAkO%?uQWOANAOO%?}Q`OANAOOOQQANAVANAVOOQQANAWANAWO%@XQWO,5>mOOQO-E}AN>}O%C|Q!LdO<wAN>wOOQOAN>qAN>qO%/yQ!LdOAN>wO:^QWOAN>qO){QYOAN>wO!,lQpOAN>qO&&xQ!LYOAN>wO&'TQ7^O<WOz%{O~Ou&OO!S&YO!T&RO!U&RO'X$aO~O]&POj&PO|&SO'd%|O!O'iP!O'tP~P@ZOz'qX}'qX!X'qX!_'qX'n'qX~O!w'qX#S!{X!O'qX~PASO!w&ZOz'sX}'sX~O}&[Oz'rX~Oz&^O~O!w#dO~PASOR&bO!P&_O!k&aO'W$_O~Ob&gO!`$WO'W$_O~Or$mO!`$lO~O!O&hO~P`Or!zOs!zOu!{O!^!xO!`!yO'aQOP!baY!bai!ba}!ba!]!ba!f!ba#W!ba#X!ba#Y!ba#Z!ba#[!ba#]!ba#^!ba#_!ba#a!ba#c!ba#e!ba#f!ba'n!ba'u!ba'v!ba~O^!ba'R!baz!ba!_!ba'c!ba!P!ba$|!ba!X!ba~PC]O!_&iO~O!X!vO!w&kO'n&jO}'pX^'pX'R'pX~O!_'pX~PEuO}&oO!_'oX~O!_&qO~Ou$sO!P$tO#R&rO'W$_O~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'W9VO'aQO'mYO'zaO~O]#pOg#}Oi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'W&vO'a#rO~O#S&xO~O]#pOg#}Oi#qOj#pOk#pOn$OOp$POu#wO!P#xO!Z$UO!`#uO#R$VO#p$SO$Z$QO$]$RO$`$TO'W&vO'a#rO~O'['kP~PJ^O|&|O!_'lP~P){O'd'OO'mYO~OP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!P!bO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'W'^O'aQO'mYO'z:hO~O!`!yO~O}#aO^$Xa'R$Xa!_$Xaz$Xa!P$Xa$|$Xa!X$Xa~O#`'eO~PH}O!X'gO!P'wX#s'wX#v'wX#}'wX~Or'hO~PNyOr'hO!P'wX#s'wX#v'wX#}'wX~O!P'jO#s'nO#v'iO#}'oO~O|'rO~PLRO#v#eO#}'uO~Or$aXu$aX!^$aX'n$aX'u$aX'v$aX~OReX}eX!weX'[eX'[$aX~P!!cOj'wO~O'O'yO'P'xO'Q'{O~Or'}Ou(OO'n#ZO'u(QO'v(SO~O'['|O~P!#lO'[(VO~O]#pOg#}Oi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'a#rO~O|(ZO'W(WO!_'{P~P!$ZO#S(]O~O|(aO'W(^Oz'|P~P!$ZO^(jOi(oOu(gO!S(mO!T(fO!U(fO!`(dO!t(nO$s(iO'X$aO'd(cO~O!O(lO~P!&RO!^!xOr'`Xu'`X'n'`X'u'`X'v'`X}'`X!w'`X~O'['`X#i'`X~P!&}OR(rO!w(qO}'_X'['_X~O}(sO'['^X~O'W(uO~O!`(zO~O'W&vO~O!`(dO~Ou$sO|!qO!P$tO#Q!tO#R!qO'W$_O!_'oP~O!X!vO#S)OO~OP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'aQO'n#ZO'u!|O'v!}O~O^!Ya}!Ya'R!Yaz!Ya!_!Ya'c!Ya!P!Ya$|!Ya!X!Ya~P!)`OR)WO!P&_O!k)VO$|)UO']$bO~O'W$yO'['^P~O!X)ZO!P'ZX^'ZX'R'ZX~O!`$WO']$bO~O!`$WO'W$_O']$bO~O!X!vO#S&xO~O$})gO'W)cO!O(TP~O})hO[(SX~O'd'OO~OY)lO~O[)mO~O!P$jO'W$_O'X$aO[(SP~Ou$sO|)rO!P$tO'W$_Oz'rP~O]&VOj&VO|)sO'd'OO!O'tP~O})tO^(PX'R(PX~O!w)xO']$bO~OR){O!P#xO']$bO~O!P)}O~Or*PO!PSO~O!j*UO~Ob*ZO~O'W(uO!O(RP~Ob$hO~O$}tO'W$yO~P8tOY*aO[*`O~OPTOQTO]cOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#t^O${qO'aQO'mYO'zaO~O!P!bO#p!kO'W9VO~P!0uO[*`O^$ZO'R$ZO~O^*eO#`*gO%P*gO%Q*gO~P){O!`%^O~O%p*lO~O!P*nO~O&Q*qO&R*pOP&OaQ&OaW&Oa]&Oa^&Oaa&Oab&Oag&Oai&Oaj&Oak&Oan&Oap&Oau&Oaw&Oax&Oay&Oa!P&Oa!Z&Oa!`&Oa!c&Oa!d&Oa!e&Oa!f&Oa!g&Oa!j&Oa#`&Oa#p&Oa#t&Oa${&Oa$}&Oa%P&Oa%Q&Oa%T&Oa%V&Oa%Y&Oa%Z&Oa%]&Oa%j&Oa%p&Oa%r&Oa%t&Oa%v&Oa%y&Oa&P&Oa&T&Oa&V&Oa&X&Oa&Z&Oa&]&Oa&|&Oa'W&Oa'a&Oa'm&Oa'z&Oa!O&Oa%w&Oa_&Oa%|&Oa~O'W*tO~O'c*wO~Oz&ca}&ca~P!)`O}!]Oz'ha~Oz'ha~P>WO}&[Oz'ra~O}tX}!VX!OtX!O!VX!XtX!X!VX!`!VX!wtX']!VX~O!X+OO!w*}O}#PX}'jX!O#PX!O'jX!X'jX!`'jX']'jX~O!X+QO!`$WO']$bO}!RX!O!RX~O]%}Oj%}Ou&OO'd(cO~OP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!P!bO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'aQO'mYO'z:hO~O'W9sO~P!:sO}+UO!O'iX~O!O+WO~O!X+OO!w*}O}#PX!O#PX~O}+XO!O'tX~O!O+ZO~O]%}Oj%}Ou&OO'X$aO'd(cO~O!T+[O!U+[O~P!=qOu$sO|+_O!P$tO'W$_Oz&hX}&hX~O^+dO!S+gO!T+cO!U+cO!n+kO!o+iO!p+jO!q+hO!t+lO'X$aO'd(cO'm+aO~O!O+fO~P!>rOR+qO!P&_O!k+pO~O!w+wO}'pa!_'pa^'pa'R'pa~O!X!vO~P!?|O}&oO!_'oa~Ou$sO|+zO!P$tO#Q+|O#R+zO'W$_O}&jX!_&jX~O^!zi}!zi'R!ziz!zi!_!zi'c!zi!P!zi$|!zi!X!zi~P!)`O#S!va}!va!_!va!w!va!P!va^!va'R!vaz!va~P!#lO#S'`XP'`XY'`X^'`Xi'`Xs'`X!]'`X!`'`X!f'`X#W'`X#X'`X#Y'`X#Z'`X#['`X#]'`X#^'`X#_'`X#a'`X#c'`X#e'`X#f'`X'R'`X'a'`X!_'`Xz'`X!P'`X'c'`X$|'`X!X'`X~P!&}O},VO'['kX~P!#lO'[,XO~O},YO!_'lX~P!)`O!_,]O~Oz,^O~OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'aQOY#Vi^#Vii#Vi}#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O#W#Vi~P!EZO#W#OO~P!EZOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO'aQOY#Vi^#Vi}#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~Oi#Vi~P!GuOi#QO~P!GuOP#]Oi#QOr!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO'aQO^#Vi}#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P!JaOY#cO!]#SO#]#SO#^#SO#_#SO~P!JaOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO'aQO^#Vi}#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O'u#Vi~P!MXO'u!|O~P!MXOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO'aQO'u!|O^#Vi}#Vi#e#Vi#f#Vi'R#Vi'n#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O'v#Vi~P# sO'v!}O~P# sOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO'aQO'u!|O'v!}O~O^#Vi}#Vi#f#Vi'R#Vi'n#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~P#$_OPZXYZXiZXrZXsZXuZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'aZX'nZX'uZX'vZX}ZX!OZX~O#iZX~P#&rOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO#e9cO#f9dO'aQO'n#ZO'u!|O'v!}O~O#i,`O~P#(|OP'fXY'fXi'fXr'fXs'fXu'fX!]'fX!^'fX!`'fX!f'fX#W'fX#X'fX#Y'fX#Z'fX#['fX#]'fX#^'fX#a'fX#c'fX#e'fX#f'fX'a'fX'n'fX'u'fX'v'fX}'fX~O!w9hO#k9hO#_'fX#i'fX!O'fX~P#*wO^&ma}&ma'R&ma!_&ma'c&maz&ma!P&ma$|&ma!X&ma~P!)`OP#ViY#Vi^#Vii#Vis#Vi}#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'a#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~P!#lO^#ji}#ji'R#jiz#ji!_#ji'c#ji!P#ji$|#ji!X#ji~P!)`O#v,bO~O#v,cO~O!X'gO!w,dO!P#zX#s#zX#v#zX#}#zX~O|,eO~O!P'jO#s,gO#v'iO#},hO~O}9eO!O'eX~P#(|O!O,iO~O#},kO~O'O'yO'P'xO'Q,nO~O],qOj,qOz,rO~O}cX!XcX!_cX!_$aX'ncX~P!!cO!_,xO~P!#lO},yO!X!vO'n&jO!_'{X~O!_-OO~Oz$aX}$aX!X$hX~P!!cO}-QOz'|X~P!#lO!X-SO~Oz-UO~O|(ZO'W$_O!_'{P~Oi-YO!X!vO!`$WO']$bO'n&jO~O!X)ZO~O!O-`O~P!&RO!T-aO!U-aO'X$aO'd(cO~Ou-cO'd(cO~O!t-dO~O'W$yO}&rX'[&rX~O}(sO'['^a~Or-iOs-iOu-jO'noa'uoa'voa}oa!woa~O'[oa#ioa~P#5{Or'}Ou(OO'n$Ya'u$Ya'v$Ya}$Ya!w$Ya~O'[$Ya#i$Ya~P#6qOr'}Ou(OO'n$[a'u$[a'v$[a}$[a!w$[a~O'[$[a#i$[a~P#7dO]-kO~O#S-lO~O'[$ja}$ja#i$ja!w$ja~P!#lO#S-oO~OR-xO!P&_O!k-wO$|-vO~O'[-yO~O]#pOi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'a#rO~Og-{O'W-zO~P#9ZO!X)ZO!P'Za^'Za'R'Za~O#S.RO~OYZX}cX!OcX~O}.SO!O(TX~O!O.UO~OY.VO~O'W)cO~O!P$jO'W$_O[&zX}&zX~O})hO[(Sa~O!_.[O~P!)`O].^O~OY._O~O[.`O~OR-xO!P&_O!k-wO$|-vO']$bO~O})tO^(Pa'R(Pa~O!w.fO~OR.iO!P#xO~O'd'OO!O(QP~OR.sO!P.oO!k.rO$|.qO']$bO~OY.}O}.{O!O(RX~O!O/OO~O[/QO^$ZO'R$ZO~O]/RO~O#_/TO%n/UO~P0zO!w#dO#_/TO%n/UO~O^/VO~P){O^/XO~O%w/]OP%uiQ%uiW%ui]%ui^%uia%uib%uig%uii%uij%uik%uin%uip%uiu%uiw%uix%uiy%ui!P%ui!Z%ui!`%ui!c%ui!d%ui!e%ui!f%ui!g%ui!j%ui#`%ui#p%ui#t%ui${%ui$}%ui%P%ui%Q%ui%T%ui%V%ui%Y%ui%Z%ui%]%ui%j%ui%p%ui%r%ui%t%ui%v%ui%y%ui&P%ui&T%ui&V%ui&X%ui&Z%ui&]%ui&|%ui'W%ui'a%ui'm%ui'z%ui!O%ui_%ui%|%ui~O_/cO!O/aO%|/bO~P`O!PSO!`/fO~O}#aO'c$Xa~Oz&ci}&ci~P!)`O}!]Oz'hi~O}&[Oz'ri~Oz/jO~O}!Ra!O!Ra~P#(|O]%}Oj%}O|/pO'd(cO}&dX!O&dX~P@ZO}+UO!O'ia~O]&VOj&VO|)sO'd'OO}&iX!O&iX~O}+XO!O'ta~Oz'si}'si~P!)`O^$ZO!X!vO!`$WO!f/{O!w/yO'R$ZO']$bO'n&jO~O!O0OO~P!>rO!T0PO!U0PO'X$aO'd(cO'm+aO~O!S0QO~P#GTO!PSO!S0QO!q0SO!t0TO~P#GTO!S0QO!o0VO!p0VO!q0SO!t0TO~P#GTO!P&_O~O!P&_O~P!#lO}'pi!_'pi^'pi'R'pi~P!)`O!w0`O}'pi!_'pi^'pi'R'pi~O}&oO!_'oi~Ou$sO!P$tO#R0bO'W$_O~O#SoaPoaYoa^oaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa'Roa'aoa!_oazoa!Poa'coa$|oa!Xoa~P#5{O#S$YaP$YaY$Ya^$Yai$Yas$Ya!]$Ya!^$Ya!`$Ya!f$Ya#W$Ya#X$Ya#Y$Ya#Z$Ya#[$Ya#]$Ya#^$Ya#_$Ya#a$Ya#c$Ya#e$Ya#f$Ya'R$Ya'a$Ya!_$Yaz$Ya!P$Ya'c$Ya$|$Ya!X$Ya~P#6qO#S$[aP$[aY$[a^$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a'R$[a'a$[a!_$[az$[a!P$[a'c$[a$|$[a!X$[a~P#7dO#S$jaP$jaY$ja^$jai$jas$ja}$ja!]$ja!^$ja!`$ja!f$ja#W$ja#X$ja#Y$ja#Z$ja#[$ja#]$ja#^$ja#_$ja#a$ja#c$ja#e$ja#f$ja'R$ja'a$ja!_$jaz$ja!P$ja!w$ja'c$ja$|$ja!X$ja~P!#lO^!zq}!zq'R!zqz!zq!_!zq'c!zq!P!zq$|!zq!X!zq~P!)`O}&eX'[&eX~PJ^O},VO'['ka~O|0jO}&fX!_&fX~P){O},YO!_'la~O},YO!_'la~P!)`O#i!ba!O!ba~PC]O#i!Ya}!Ya!O!Ya~P#(|O!P0}O#t^O#{1OO~O!O1SO~O'c1TO~P!#lO^$Uq}$Uq'R$Uqz$Uq!_$Uq'c$Uq!P$Uq$|$Uq!X$Uq~P!)`Oz1UO~O],qOj,qO~Or'}Ou(OO'v(SO'n$ti'u$ti}$ti!w$ti~O'[$ti#i$ti~P$'tOr'}Ou(OO'n$vi'u$vi'v$vi}$vi!w$vi~O'[$vi#i$vi~P$(gO#i1VO~P!#lO|1XO'W$_O}&nX!_&nX~O},yO!_'{a~O},yO!X!vO!_'{a~O},yO!X!vO'n&jO!_'{a~O'[$ci}$ci#i$ci!w$ci~P!#lO|1`O'W(^Oz&pX}&pX~P!$ZO}-QOz'|a~O}-QOz'|a~P!#lO!X!vO~O!X!vO#_1jO~Oi1nO!X!vO'n&jO~O}'_i'['_i~P!#lO!w1qO}'_i'['_i~P!#lO!_1tO~O^$Vq}$Vq'R$Vqz$Vq!_$Vq'c$Vq!P$Vq$|$Vq!X$Vq~P!)`O}1xO!P'}X~P!#lO!P&_O$|1{O~O!P&_O$|1{O~P!#lO!P$aX$qZX^$aX'R$aX~P!!cO$q2POrfXufX!PfX'nfX'ufX'vfX^fX'RfX~O$q2PO~O$}2WO'W)cO}&yX!O&yX~O}.SO!O(Ta~OY2[O~O[2]O~O]2`O~OR2bO!P&_O!k2aO$|1{O~O^$ZO'R$ZO~P!#lO!P#xO~P!#lO}2gO!w2iO!O(QX~O!O2jO~Ou(gO!S2sO!T2lO!U2lO!n2rO!o2qO!p2qO!t2pO'X$aO'd(cO'm+aO~O!O2oO~P$0uOR2zO!P.oO!k2yO$|2xO~OR2zO!P.oO!k2yO$|2xO']$bO~O'W(uO}&xX!O&xX~O}.{O!O(Ra~O'd3TO~O]3VO~O[3XO~O!_3[O~P){O^3^O~O^3^O~P){O#_3`O%n3aO~PEuO_/cO!O3eO%|/bO~P`O!X3gO~O&R3hOP&OqQ&OqW&Oq]&Oq^&Oqa&Oqb&Oqg&Oqi&Oqj&Oqk&Oqn&Oqp&Oqu&Oqw&Oqx&Oqy&Oq!P&Oq!Z&Oq!`&Oq!c&Oq!d&Oq!e&Oq!f&Oq!g&Oq!j&Oq#`&Oq#p&Oq#t&Oq${&Oq$}&Oq%P&Oq%Q&Oq%T&Oq%V&Oq%Y&Oq%Z&Oq%]&Oq%j&Oq%p&Oq%r&Oq%t&Oq%v&Oq%y&Oq&P&Oq&T&Oq&V&Oq&X&Oq&Z&Oq&]&Oq&|&Oq'W&Oq'a&Oq'm&Oq'z&Oq!O&Oq%w&Oq_&Oq%|&Oq~O}#Pi!O#Pi~P#(|O!w3jO}#Pi!O#Pi~O}!Ri!O!Ri~P#(|O^$ZO!w3qO'R$ZO~O^$ZO!X!vO!w3qO'R$ZO~O!T3uO!U3uO'X$aO'd(cO'm+aO~O^$ZO!X!vO!`$WO!f3vO!w3qO'R$ZO']$bO'n&jO~O!S3wO~P$9_O!S3wO!q3zO!t3{O~P$9_O^$ZO!X!vO!f3vO!w3qO'R$ZO'n&jO~O}'pq!_'pq^'pq'R'pq~P!)`O}&oO!_'oq~O#S$tiP$tiY$ti^$tii$tis$ti!]$ti!^$ti!`$ti!f$ti#W$ti#X$ti#Y$ti#Z$ti#[$ti#]$ti#^$ti#_$ti#a$ti#c$ti#e$ti#f$ti'R$ti'a$ti!_$tiz$ti!P$ti'c$ti$|$ti!X$ti~P$'tO#S$viP$viY$vi^$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi'R$vi'a$vi!_$viz$vi!P$vi'c$vi$|$vi!X$vi~P$(gO#S$ciP$ciY$ci^$cii$cis$ci}$ci!]$ci!^$ci!`$ci!f$ci#W$ci#X$ci#Y$ci#Z$ci#[$ci#]$ci#^$ci#_$ci#a$ci#c$ci#e$ci#f$ci'R$ci'a$ci!_$ciz$ci!P$ci!w$ci'c$ci$|$ci!X$ci~P!#lO}&ea'[&ea~P!#lO}&fa!_&fa~P!)`O},YO!_'li~O#i!zi}!zi!O!zi~P#(|OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'aQOY#Vii#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~O#W#Vi~P$BuO#W9YO~P$BuOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO'aQOY#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~Oi#Vi~P$D}Oi9[O~P$D}OP#]Oi9[Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O'aQO#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P$GVOY9gO!]9^O#]9^O#^9^O#_9^O~P$GVOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O'aQO#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'v#Vi}#Vi!O#Vi~O'u#Vi~P$IkO'u!|O~P$IkOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO'aQO'u!|O#e#Vi#f#Vi#i#Vi'n#Vi}#Vi!O#Vi~O'v#Vi~P$KsO'v!}O~P$KsOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO#e9cO'aQO'u!|O'v!}O~O#f#Vi#i#Vi'n#Vi}#Vi!O#Vi~P$M{O^#gy}#gy'R#gyz#gy!_#gy'c#gy!P#gy$|#gy!X#gy~P!)`OP#ViY#Vii#Vis#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'a#Vi}#Vi!O#Vi~P!#lO!^!xOP'`XY'`Xi'`Xr'`Xs'`Xu'`X!]'`X!`'`X!f'`X#W'`X#X'`X#Y'`X#Z'`X#['`X#]'`X#^'`X#_'`X#a'`X#c'`X#e'`X#f'`X#i'`X'a'`X'n'`X'u'`X'v'`X}'`X!O'`X~O#i#ji}#ji!O#ji~P#(|O!O4]O~O}&ma!O&ma~P#(|O!X!vO'n&jO}&na!_&na~O},yO!_'{i~O},yO!X!vO!_'{i~Oz&pa}&pa~P!#lO!X4dO~O}-QOz'|i~P!#lO}-QOz'|i~Oz4jO~O!X!vO#_4pO~Oi4qO!X!vO'n&jO~Oz4sO~O'[$eq}$eq#i$eq!w$eq~P!#lO^$Vy}$Vy'R$Vyz$Vy!_$Vy'c$Vy!P$Vy$|$Vy!X$Vy~P!)`O}1xO!P'}a~O!P&_O$|4xO~O!P&_O$|4xO~P!#lO^!zy}!zy'R!zyz!zy!_!zy'c!zy!P!zy$|!zy!X!zy~P!)`OY4{O~O}.SO!O(Ti~O]5QO~O[5RO~O'd'OO}&uX!O&uX~O}2gO!O(Qa~O!O5`O~P$0uOu-cO'd(cO'm+aO~O!S5cO!T5bO!U5bO!t0TO'X$aO'd(cO'm+aO~O!o5dO!p5dO~P%,eO!T5bO!U5bO'X$aO'd(cO'm+aO~O!P.oO~O!P.oO$|5fO~O!P.oO$|5fO~P!#lOR5kO!P.oO!k5jO$|5fO~OY5pO}&xa!O&xa~O}.{O!O(Ri~O]5sO~O!_5tO~O!_5uO~O!_5vO~O!_5vO~P){O^5xO~O!X5{O~O!_5}O~O}'si!O'si~P#(|O^$ZO'R$ZO~P!)`O^$ZO!w6SO'R$ZO~O^$ZO!X!vO!w6SO'R$ZO~O!T6XO!U6XO'X$aO'd(cO'm+aO~O^$ZO!X!vO!f6YO!w6SO'R$ZO'n&jO~O!`$WO']$bO~P%1PO!S6ZO~P%0nO}'py!_'py^'py'R'py~P!)`O#S$eqP$eqY$eq^$eqi$eqs$eq}$eq!]$eq!^$eq!`$eq!f$eq#W$eq#X$eq#Y$eq#Z$eq#[$eq#]$eq#^$eq#_$eq#a$eq#c$eq#e$eq#f$eq'R$eq'a$eq!_$eqz$eq!P$eq!w$eq'c$eq$|$eq!X$eq~P!#lO}&fi!_&fi~P!)`O#i!zq}!zq!O!zq~P#(|Or-iOs-iOu-jOPoaYoaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa#ioa'aoa'noa'uoa'voa}oa!Ooa~Or'}Ou(OOP$YaY$Yai$Yas$Ya!]$Ya!^$Ya!`$Ya!f$Ya#W$Ya#X$Ya#Y$Ya#Z$Ya#[$Ya#]$Ya#^$Ya#_$Ya#a$Ya#c$Ya#e$Ya#f$Ya#i$Ya'a$Ya'n$Ya'u$Ya'v$Ya}$Ya!O$Ya~Or'}Ou(OOP$[aY$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a#i$[a'a$[a'n$[a'u$[a'v$[a}$[a!O$[a~OP$jaY$jai$jas$ja!]$ja!^$ja!`$ja!f$ja#W$ja#X$ja#Y$ja#Z$ja#[$ja#]$ja#^$ja#_$ja#a$ja#c$ja#e$ja#f$ja#i$ja'a$ja}$ja!O$ja~P!#lO#i$Uq}$Uq!O$Uq~P#(|O#i$Vq}$Vq!O$Vq~P#(|O!O6eO~O'[$xy}$xy#i$xy!w$xy~P!#lO!X!vO}&ni!_&ni~O!X!vO'n&jO}&ni!_&ni~O},yO!_'{q~Oz&pi}&pi~P!#lO}-QOz'|q~Oz6lO~P!#lOz6lO~O}'_y'['_y~P!#lO}&sa!P&sa~P!#lO!P$pq^$pq'R$pq~P!#lOY6tO~O}.SO!O(Tq~O]6wO~O!P&_O$|6xO~O!P&_O$|6xO~P!#lO!w6yO}&ua!O&ua~O}2gO!O(Qi~P#(|O!T7PO!U7PO'X$aO'd(cO'm+aO~O!S7RO!t3{O~P%@nO!P.oO$|7UO~O!P.oO$|7UO~P!#lO'd7[O~O}.{O!O(Rq~O!_7_O~O!_7_O~P){O!_7aO~O!_7bO~O}#Py!O#Py~P#(|O^$ZO!w7hO'R$ZO~O^$ZO!X!vO!w7hO'R$ZO~O!T7kO!U7kO'X$aO'd(cO'm+aO~O^$ZO!X!vO!f7lO!w7hO'R$ZO'n&jO~O#S$xyP$xyY$xy^$xyi$xys$xy}$xy!]$xy!^$xy!`$xy!f$xy#W$xy#X$xy#Y$xy#Z$xy#[$xy#]$xy#^$xy#_$xy#a$xy#c$xy#e$xy#f$xy'R$xy'a$xy!_$xyz$xy!P$xy!w$xy'c$xy$|$xy!X$xy~P!#lO#i#gy}#gy!O#gy~P#(|OP$ciY$cii$cis$ci!]$ci!^$ci!`$ci!f$ci#W$ci#X$ci#Y$ci#Z$ci#[$ci#]$ci#^$ci#_$ci#a$ci#c$ci#e$ci#f$ci#i$ci'a$ci}$ci!O$ci~P!#lOr'}Ou(OO'v(SOP$tiY$tii$tis$ti!]$ti!^$ti!`$ti!f$ti#W$ti#X$ti#Y$ti#Z$ti#[$ti#]$ti#^$ti#_$ti#a$ti#c$ti#e$ti#f$ti#i$ti'a$ti'n$ti'u$ti}$ti!O$ti~Or'}Ou(OOP$viY$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi#i$vi'a$vi'n$vi'u$vi'v$vi}$vi!O$vi~O#i$Vy}$Vy!O$Vy~P#(|O#i!zy}!zy!O!zy~P#(|O!X!vO}&nq!_&nq~O},yO!_'{y~Oz&pq}&pq~P!#lOz7rO~P!#lO}.SO!O(Ty~O}2gO!O(Qq~O!T8OO!U8OO'X$aO'd(cO'm+aO~O!P.oO$|8RO~O!P.oO$|8RO~P!#lO!_8UO~O&R8VOP&O!ZQ&O!ZW&O!Z]&O!Z^&O!Za&O!Zb&O!Zg&O!Zi&O!Zj&O!Zk&O!Zn&O!Zp&O!Zu&O!Zw&O!Zx&O!Zy&O!Z!P&O!Z!Z&O!Z!`&O!Z!c&O!Z!d&O!Z!e&O!Z!f&O!Z!g&O!Z!j&O!Z#`&O!Z#p&O!Z#t&O!Z${&O!Z$}&O!Z%P&O!Z%Q&O!Z%T&O!Z%V&O!Z%Y&O!Z%Z&O!Z%]&O!Z%j&O!Z%p&O!Z%r&O!Z%t&O!Z%v&O!Z%y&O!Z&P&O!Z&T&O!Z&V&O!Z&X&O!Z&Z&O!Z&]&O!Z&|&O!Z'W&O!Z'a&O!Z'm&O!Z'z&O!Z!O&O!Z%w&O!Z_&O!Z%|&O!Z~O^$ZO!w8[O'R$ZO~O^$ZO!X!vO!w8[O'R$ZO~OP$eqY$eqi$eqs$eq!]$eq!^$eq!`$eq!f$eq#W$eq#X$eq#Y$eq#Z$eq#[$eq#]$eq#^$eq#_$eq#a$eq#c$eq#e$eq#f$eq#i$eq'a$eq}$eq!O$eq~P!#lO}&uq!O&uq~P#(|O^$ZO!w8qO'R$ZO~OP$xyY$xyi$xys$xy!]$xy!^$xy!`$xy!f$xy#W$xy#X$xy#Y$xy#Z$xy#[$xy#]$xy#^$xy#_$xy#a$xy#c$xy#e$xy#f$xy#i$xy'a$xy}$xy!O$xy~P!#lO'c'eX~P.jO'cZXzZX!_ZX%nZX!PZX$|ZX!XZX~P$zO!XcX!_ZX!_cX'ncX~P;aOP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!PSO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'W'^O'aQO'mYO'z:hO~O}9eO!O$Xa~O]#pOg#}Oi#qOj#pOk#pOn$OOp9jOu#wO!P#xO!Z:mO!`#uO#R9pO#p$SO$Z9lO$]9nO$`$TO'W&vO'a#rO~O#`'eO~P&+}O!OZX!OcX~P;aO#S9XO~O!X!vO#S9XO~O!w9hO~O#_9^O~O!w9qO}'sX!O'sX~O!w9hO}'qX!O'qX~O#S9rO~O'[9tO~P!#lO#S9yO~O#S9zO~O!X!vO#S9{O~O!X!vO#S9rO~O#i9|O~P#(|O#S9}O~O#S:OO~O#S:PO~O#S:QO~O#i:RO~P!#lO#i:SO~P!#lO#t~!^!n!p!q#Q#R'z$Z$]$`$q${$|$}%T%V%Y%Z%]%_~TS#t'z#Xy'T'U#v'T'W'd~", +- goto: "#Dk(XPPPPPPP(YP(jP*^PPPP-sPP.Y3j5^5qP5qPPP5q5qP5qP7_PP7dP7xPPPPwPPP>}AYP`!>h!>l!>lP!;jP!>p!>pP!AcP!AgRQWO'#IvO@QQbO'#IvO'dQYO'#IvO@XQWO,59sO@oQ&jO'#D^OAhQWO'#EXOAuQWO'#JROBQQWO'#JQOBYQWO,5:uOB_QWO'#JPOBfQWO'#DuO5yQ#tO'#EVOBtQWO'#EVOCPQ`O'#E}OOQ!LS,5:O,5:OOCXQYO,5:OOEVQ!LdO,5:YOEsQWO,5:`OF^Q!LYO'#JOO7YQWO'#I}OFeQWO'#I}OFmQWO,5:tOFrQWO'#I}OGQQYO,5:rOIQQWO'#ESOJ[QWO,5:rOKkQWO'#DhOKrQYO'#DmOK|Q&jO,5:{O){QYO,5:{OOQQ'#En'#EnOOQQ'#Ep'#EpO){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}OOQQ'#Et'#EtOLUQYO,5;_OOQ!LS,5;d,5;dOOQ!LS,5;e,5;eONUQWO,5;eOOQ!LS,5;f,5;fO){QYO'#H{ONZQ!LYO,5WOOQQ'#Ih'#IhOOQQ,5>X,5>XOOQQ-E;l-E;lO!+zQ!LdO,5:QOOQ!LQ'#Co'#CoO!,kQ#tO,5OOOQQ,5>Q,5>QO!8qQWO,5>QOOQQ,5>S,5>SO!8qQWO,5>SOOQQ,5>U,5>UO!8vQ`O,5?aOOOS-E;n-E;nOOQ!LS1G/Y1G/YO!8{QbO,5>]O){QYO,5>]OOQO-E;o-E;oO!9VQWO,5?bO!9_QbO,5?bO!9fQWO,5?lOOQ!LS1G/_1G/_O!9nQpO'#DQOOQO'#Ix'#IxO){QYO'#IxO!:]QpO'#IxO!:zQpO'#D_O!;]Q&jO'#D_O!=hQYO'#D_O!=oQWO'#IwO!=wQWO,59xO!=|QWO'#E]O!>[QWO'#JSO!>dQWO,5:vO!>zQ&jO'#D_O){QYO,5?mO!?UQWO'#HvO!9fQWO,5?lOOQ!LQ1G0a1G0aO!@bQ&jO'#DxOOQ!LS,5:a,5:aO){QYO,5:aOIQQWO,5:aO!@iQWO,5:aO:aQWO,5:qO!-dQpO,5:qO!-lQ#tO,5:qO5yQ#tO,5:qOOQ!LS1G/j1G/jOOQ!LS1G/z1G/zOOQ!LQ'#ER'#ERO){QYO,5?jO!@tQ!LYO,5?jO!AVQ!LYO,5?jO!A^QWO,5?iO!AfQWO'#HxO!A^QWO,5?iOOQ!LQ1G0`1G0`O7YQWO,5?iOOQ!LS1G0^1G0^O!BQQ!LdO1G0^O!BqQ!LbO,5:nOOQ!LS'#Fo'#FoO!C_Q!LdO'#InOGQQYO1G0^O!E^Q#tO'#IyO!EhQWO,5:SO!EmQbO'#IzO){QYO'#IzO!EwQWO,5:XOOQ!LS'#DQ'#DQOOQ!LS1G0g1G0gO!E|QWO1G0gO!H_Q!LdO1G0iO!HfQ!LdO1G0iO!JyQ!LdO1G0iO!KQQ!LdO1G0iO!MXQ!LdO1G0iO!MlQ!LdO1G0iO#!]Q!LdO1G0iO#!dQ!LdO1G0iO#$wQ!LdO1G0iO#%OQ!LdO1G0iO#&sQ!LdO1G0iO#)mQ7^O'#CgO#+hQ7^O1G0yO#-cQ7^O'#ItOOQ!LS1G1P1G1PO#-vQ!LdO,5>gOOQ!LQ-E;y-E;yO#.gQ!LdO1G0iOOQ!LS1G0i1G0iO#0iQ!LdO1G0|O#1YQpO,5;qO#1bQpO,5;rO#1jQpO'#FYO#2RQWO'#FXOOQO'#JW'#JWOOQO'#Hy'#HyO#2WQpO1G1XOOQ!LS1G1X1G1XOOOO1G1d1G1dO#2iQ7^O'#IsO#2sQWO,5;{OLUQYO,5;{OOOO-E;x-E;xOOQ!LS1G1U1G1UOOQ!LS,5;},5;}O#2xQpO,5;}OOQ!LS,59`,59`OIQQWO'#IpOOOS'#Ho'#HoO#2}OSO,59dOOQ!LS,59d,59dO){QYO1G1jO!)]QWO'#H}O#3YQWO,5TQ!LYO,5?yOOQQ1G2d1G2dO!0eQWO1G2jOIQQWO1G2gO#>`QWO1G2gOOQQ1G2h1G2hOIQQWO1G2hO#>eQWO1G2hO#>mQ&jO'#GfOOQQ1G2j1G2jO!'iQ&jO'#IUO!0jQ`O1G2mOOQQ1G2m1G2mOOQQ,5=W,5=WO#>uQ#tO,5=YO5tQWO,5=YO#5sQWO,5=]O5bQWO,5=]O!-dQpO,5=]O!-lQ#tO,5=]O5yQ#tO,5=]O#?WQWO'#JaO#?cQWO,5=^OOQQ1G.i1G.iO#?hQ!LYO1G.iO#?sQWO1G.iO!)RQWO1G.iO5lQ!LYO1G.iO#?xQbO,5@OO#@SQWO,5@OO#@_QYO,5=eO#@fQWO,5=eO7YQWO,5@OOOQQ1G2}1G2}O`QYO1G2}OOQQ1G3T1G3TOOQQ1G3V1G3VO:[QWO1G3XO#@kQYO1G3ZO#DfQYO'#HYOOQQ1G3^1G3^O:aQWO1G3dO#DsQWO1G3dO5lQ!LYO1G3hOOQQ1G3j1G3jOOQ!LQ'#Fv'#FvO5lQ!LYO1G3lO5lQ!LYO1G3nOOOS1G4{1G4{O#D{Q`O,5b,5>bO7YQWO,5>bOOQO-E;t-E;tOOQ!LQ'#EO'#EOO#GfQ!LrO'#EPO!@YQ&jO'#DyOOQO'#Hu'#HuO#HQQ&jO,5:dOOQ!LS,5:d,5:dO#HXQ&jO'#DyO#HjQ&jO'#DyO#HqQ&jO'#EUO#HtQ&jO'#EPO#IRQ&jO'#EPO!@YQ&jO'#EPO#IfQWO1G/{O#IkQ`O1G/{OOQ!LS1G/{1G/{O){QYO1G/{OIQQWO1G/{OOQ!LS1G0]1G0]O:aQWO1G0]O!-dQpO1G0]O!-lQ#tO1G0]O#IrQ!LdO1G5UO){QYO1G5UO#JSQ!LYO1G5UO#JeQWO1G5TO7YQWO,5>dOOQO,5>d,5>dO#JmQWO,5>dOOQO-E;v-E;vO#JeQWO1G5TO#J{Q!LdO,59gO#LzQ!LdO,5i,5>iO$(kQWO,5>iOOQ!LS1G1}1G1}P$(pQWO'#H}POQ!LS-E;{-E;{O$)aQ#tO1G2YO$*SQ#tO1G2[O$*^Q#tO1G2^OOQ!LS1G1v1G1vO$*eQWO'#H|O$*sQWO,5?uO$*sQWO,5?uO$*{QWO,5?uO$+WQWO,5?uOOQO1G1x1G1xO$+fQ#tO1G1wO$+vQWO'#IOO$,WQWO,5?vOIQQWO,5?vO$,`Q`O,5?vOOQ!LS1G1{1G1{O5lQ!LYO,5l,5>lOOQO-Et,5>tOOQO-En,5>nOOQ!LQ-Ep,5>pOOQO-E^,5>^OOQO-E;p-E;pOOQO,5>c,5>cOOQO-E;u-E;uO!-dQpO1G/eOOQO1G3|1G3|O:aQWO,5:eOOQO,5:k,5:kO){QYO,5:kO$9xQ!LYO,5:kO$:TQ!LYO,5:kO!-dQpO,5:eOOQO-E;s-E;sOOQ!LS1G0O1G0OO!@YQ&jO,5:eO$:cQ&jO,5:eO$:tQ!LrO,5:kO$;`Q&jO,5:eO!@YQ&jO,5:kOOQO,5:p,5:pO$;gQ&jO,5:kO$;tQ!LYO,5:kOOQ!LS7+%g7+%gO#IfQWO7+%gO#IkQ`O7+%gOOQ!LS7+%w7+%wO:aQWO7+%wO!-dQpO7+%wO$tQ!LdO1G2[O$@vQ!LdO1G1wO$COQ#tO,5>_OOQO-E;q-E;qO$CYQbO,5>`O){QYO,5>`OOQO-E;r-E;rO$CdQWO1G5QO$ClQ7^O1G0^O$EsQ7^O1G0iO$EzQ7^O1G0iO$G{Q7^O1G0iO$HSQ7^O1G0iO$IwQ7^O1G0iO$J[Q7^O1G0iO$LiQ7^O1G0iO$LpQ7^O1G0iO$NqQ7^O1G0iO$NxQ7^O1G0iO%!mQ7^O1G0iO%#QQ!LdO<gOOOO7+'R7+'ROOOS1G4v1G4vOOQ!LS1G4T1G4TOJaQWO7+'xO%'zQWO,5>hO5tQWO,5>hOOQO-E;z-E;zO%(YQWO1G5aO%(YQWO1G5aO%(bQWO1G5aO%(mQ`O,5>jO%(wQWO,5>jOIQQWO,5>jOOQO-E;|-E;|O%(|Q`O1G5bO%)WQWO1G5bOOQO1G2Q1G2QOOQO1G2R1G2RO5lQ!LYO1G2RO$,jQWO1G2RO5lQ!LYO1G2QO%)`QWO1G2SOIQQWO1G2SOOQO1G2T1G2TO5lQ!LYO1G2WO!-dQpO1G2QO#5nQWO1G2RO%)eQWO1G2SO%)mQWO1G2ROJaQWO7+*_OOQ!LS1G/T1G/TO%)xQWO1G/TOOQ!LS7+'^7+'^O%)}Q#tO7+'eO%*_Q!LdO<s,5>sO%,ZQWO,5>sO#sOOQO-ErOOQO-ERQ#tO<cQWO1G4SO%>nQWO1G4SO%>|QWO7+*{O%>|QWO7+*{OIQQWO1G4UO%?UQ`O1G4UO%?`QWO7+*|OOQO7+'m7+'mO5lQ!LYO7+'mOOQO7+'l7+'lO$,jQWO7+'nO%?hQ`O7+'nOOQO7+'r7+'rO5lQ!LYO7+'lO$,jQWO7+'mO%?oQWO7+'nOIQQWO7+'nO#5nQWO7+'mO%?tQ#tO<mOOQO-EoOOQO-E}AN>}O%EQQ!LdO<wAN>wOOQOAN>qAN>qO%0}Q!LdOAN>wO:aQWOAN>qO){QYOAN>wO!-dQpOAN>qO&'|Q!LYOAN>wO&(XQ7^O<ZOz%}O~Ou&QO!S&[O!T&TO!U&TO'Z$cO~O]&ROj&RO|&UO'f&OO!O'kP!O'vP~P@^Oz'sX}'sX!X'sX!_'sX'p'sX~O!w'sX#S!{X!O'sX~PAVO!w&]Oz'uX}'uX~O}&^Oz'tX~Oz&`O~O!w#dO~PAVOR&dO!P&aO!k&cO'Y$aO~Ob&iO!`$YO'Y$aO~Or$oO!`$nO~O!O&jO~P`Or!zOs!zOu!{O!^!xO!`!yO'cQOP!baY!bai!ba}!ba!]!ba!f!ba#W!ba#X!ba#Y!ba#Z!ba#[!ba#]!ba#^!ba#_!ba#a!ba#c!ba#e!ba#f!ba'p!ba'w!ba'x!ba~O^!ba'T!baz!ba!_!ba'e!ba!P!ba%O!ba!X!ba~PC`O!_&kO~O!X!vO!w&mO'p&lO}'rX^'rX'T'rX~O!_'rX~PExO}&qO!_'qX~O!_&sO~Ou$uO!P$vO#R&tO'Y$aO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'Y9XO'cQO'oYO'|aO~O]#rOg$POi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'Y&xO'c#tO~O#S&zO~O]#rOg$POi#sOj#rOk#rOn$QOp$ROu#yO!P#zO!Z$WO!`#wO#R$XO#p$UO$]$SO$_$TO$b$VO'Y&xO'c#tO~O'^'mP~PJaO|'OO!_'nP~P){O'f'QO'oYO~OP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!P!bO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'Y'`O'cQO'oYO'|:jO~O!`!yO~O}#aO^$Za'T$Za!_$Zaz$Za!P$Za%O$Za!X$Za~O#`'gO~PIQOr'jO!X'iO!P#wX#s#wX#v#wX#x#wX$P#wX~O!X'iO!P'yX#s'yX#v'yX#x'yX$P'yX~Or'jO~P! eOr'jO!P'yX#s'yX#v'yX#x'yX$P'yX~O!P'lO#s'pO#v'kO#x'kO$P'qO~O|'tO~PLUO#v#fO#x#eO$P'wO~Or$cXu$cX!^$cX'p$cX'w$cX'x$cX~OReX}eX!weX'^eX'^$cX~P!#ZOj'yO~O'Q'{O'R'zO'S'}O~Or(POu(QO'p#ZO'w(SO'x(UO~O'^(OO~P!$dO'^(XO~O]#rOg$POi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'c#tO~O|(]O'Y(YO!_'}P~P!%RO#S(_O~O|(cO'Y(`Oz(OP~P!%RO^(lOi(qOu(iO!S(oO!T(hO!U(hO!`(fO!t(pO$u(kO'Z$cO'f(eO~O!O(nO~P!&yO!^!xOr'bXu'bX'p'bX'w'bX'x'bX}'bX!w'bX~O'^'bX#i'bX~P!'uOR(tO!w(sO}'aX'^'aX~O}(uO'^'`X~O'Y(wO~O!`(|O~O'Y&xO~O!`(fO~Ou$uO|!qO!P$vO#Q!tO#R!qO'Y$aO!_'qP~O!X!vO#S)QO~OP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'cQO'p#ZO'w!|O'x!}O~O^!Ya}!Ya'T!Yaz!Ya!_!Ya'e!Ya!P!Ya%O!Ya!X!Ya~P!*WOR)YO!P&aO!k)XO%O)WO'_$dO~O'Y${O'^'`P~O!X)]O!P']X^']X'T']X~O!`$YO'_$dO~O!`$YO'Y$aO'_$dO~O!X!vO#S&zO~O%P)iO'Y)eO!O(VP~O})jO[(UX~O'f'QO~OY)nO~O[)oO~O!P$lO'Y$aO'Z$cO[(UP~Ou$uO|)tO!P$vO'Y$aOz'tP~O]&XOj&XO|)uO'f'QO!O'vP~O})vO^(RX'T(RX~O!w)zO'_$dO~OR)}O!P#zO'_$dO~O!P*PO~Or*RO!PSO~O!j*WO~Ob*]O~O'Y(wO!O(TP~Ob$jO~O%PtO'Y${O~P8wOY*cO[*bO~OPTOQTO]cOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#t^O$}qO'cQO'oYO'|aO~O!P!bO#p!kO'Y9XO~P!1mO[*bO^$]O'T$]O~O^*gO#`*iO%R*iO%S*iO~P){O!`%`O~O%r*nO~O!P*pO~O&S*sO&T*rOP&QaQ&QaW&Qa]&Qa^&Qaa&Qab&Qag&Qai&Qaj&Qak&Qan&Qap&Qau&Qaw&Qax&Qay&Qa!P&Qa!Z&Qa!`&Qa!c&Qa!d&Qa!e&Qa!f&Qa!g&Qa!j&Qa#`&Qa#p&Qa#t&Qa$}&Qa%P&Qa%R&Qa%S&Qa%V&Qa%X&Qa%[&Qa%]&Qa%_&Qa%l&Qa%r&Qa%t&Qa%v&Qa%x&Qa%{&Qa&R&Qa&V&Qa&X&Qa&Z&Qa&]&Qa&_&Qa'O&Qa'Y&Qa'c&Qa'o&Qa'|&Qa!O&Qa%y&Qa_&Qa&O&Qa~O'Y*vO~O'e*yO~Oz&ea}&ea~P!*WO}!]Oz'ja~Oz'ja~P>ZO}&^Oz'ta~O}tX}!VX!OtX!O!VX!XtX!X!VX!`!VX!wtX'_!VX~O!X+QO!w+PO}#PX}'lX!O#PX!O'lX!X'lX!`'lX'_'lX~O!X+SO!`$YO'_$dO}!RX!O!RX~O]&POj&POu&QO'f(eO~OP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!P!bO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'cQO'oYO'|:jO~O'Y9uO~P!;kO}+WO!O'kX~O!O+YO~O!X+QO!w+PO}#PX!O#PX~O}+ZO!O'vX~O!O+]O~O]&POj&POu&QO'Z$cO'f(eO~O!T+^O!U+^O~P!>iOu$uO|+aO!P$vO'Y$aOz&jX}&jX~O^+fO!S+iO!T+eO!U+eO!n+mO!o+kO!p+lO!q+jO!t+nO'Z$cO'f(eO'o+cO~O!O+hO~P!?jOR+sO!P&aO!k+rO~O!w+yO}'ra!_'ra^'ra'T'ra~O!X!vO~P!@tO}&qO!_'qa~Ou$uO|+|O!P$vO#Q,OO#R+|O'Y$aO}&lX!_&lX~O^!zi}!zi'T!ziz!zi!_!zi'e!zi!P!zi%O!zi!X!zi~P!*WO#S!va}!va!_!va!w!va!P!va^!va'T!vaz!va~P!$dO#S'bXP'bXY'bX^'bXi'bXs'bX!]'bX!`'bX!f'bX#W'bX#X'bX#Y'bX#Z'bX#['bX#]'bX#^'bX#_'bX#a'bX#c'bX#e'bX#f'bX'T'bX'c'bX!_'bXz'bX!P'bX'e'bX%O'bX!X'bX~P!'uO},XO'^'mX~P!$dO'^,ZO~O},[O!_'nX~P!*WO!_,_O~Oz,`O~OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'cQOY#Vi^#Vii#Vi}#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O#W#Vi~P!FRO#W#OO~P!FROP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO'cQOY#Vi^#Vi}#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~Oi#Vi~P!HmOi#QO~P!HmOP#]Oi#QOr!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO'cQO^#Vi}#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P!KXOY#cO!]#SO#]#SO#^#SO#_#SO~P!KXOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO'cQO^#Vi}#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O'w#Vi~P!NPO'w!|O~P!NPOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO'cQO'w!|O^#Vi}#Vi#e#Vi#f#Vi'T#Vi'p#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O'x#Vi~P#!kO'x!}O~P#!kOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO'cQO'w!|O'x!}O~O^#Vi}#Vi#f#Vi'T#Vi'p#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~P#%VOPZXYZXiZXrZXsZXuZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'cZX'pZX'wZX'xZX}ZX!OZX~O#iZX~P#'jOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO#e9eO#f9fO'cQO'p#ZO'w!|O'x!}O~O#i,bO~P#)tOP'hXY'hXi'hXr'hXs'hXu'hX!]'hX!^'hX!`'hX!f'hX#W'hX#X'hX#Y'hX#Z'hX#['hX#]'hX#^'hX#a'hX#c'hX#e'hX#f'hX'c'hX'p'hX'w'hX'x'hX}'hX~O!w9jO#k9jO#_'hX#i'hX!O'hX~P#+oO^&oa}&oa'T&oa!_&oa'e&oaz&oa!P&oa%O&oa!X&oa~P!*WOP#ViY#Vi^#Vii#Vis#Vi}#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'c#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~P!$dO^#ji}#ji'T#jiz#ji!_#ji'e#ji!P#ji%O#ji!X#ji~P!*WO#v,dO#x,dO~O#v,eO#x,eO~O!X'iO!w,fO!P#|X#s#|X#v#|X#x#|X$P#|X~O|,gO~O!P'lO#s,iO#v'kO#x'kO$P,jO~O}9gO!O'gX~P#)tO!O,kO~O$P,mO~O'Q'{O'R'zO'S,pO~O],sOj,sOz,tO~O}cX!XcX!_cX!_$cX'pcX~P!#ZO!_,zO~P!$dO},{O!X!vO'p&lO!_'}X~O!_-QO~Oz$cX}$cX!X$jX~P!#ZO}-SOz(OX~P!$dO!X-UO~Oz-WO~O|(]O'Y$aO!_'}P~Oi-[O!X!vO!`$YO'_$dO'p&lO~O!X)]O~O!O-bO~P!&yO!T-cO!U-cO'Z$cO'f(eO~Ou-eO'f(eO~O!t-fO~O'Y${O}&tX'^&tX~O}(uO'^'`a~Or-kOs-kOu-lO'poa'woa'xoa}oa!woa~O'^oa#ioa~P#7POr(POu(QO'p$[a'w$[a'x$[a}$[a!w$[a~O'^$[a#i$[a~P#7uOr(POu(QO'p$^a'w$^a'x$^a}$^a!w$^a~O'^$^a#i$^a~P#8hO]-mO~O#S-nO~O'^$la}$la#i$la!w$la~P!$dO#S-qO~OR-zO!P&aO!k-yO%O-xO~O'^-{O~O]#rOi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'c#tO~Og-}O'Y-|O~P#:_O!X)]O!P']a^']a'T']a~O#S.TO~OYZX}cX!OcX~O}.UO!O(VX~O!O.WO~OY.XO~O'Y)eO~O!P$lO'Y$aO[&|X}&|X~O})jO[(Ua~O!_.^O~P!*WO].`O~OY.aO~O[.bO~OR-zO!P&aO!k-yO%O-xO'_$dO~O})vO^(Ra'T(Ra~O!w.hO~OR.kO!P#zO~O'f'QO!O(SP~OR.uO!P.qO!k.tO%O.sO'_$dO~OY/PO}.}O!O(TX~O!O/QO~O[/SO^$]O'T$]O~O]/TO~O#_/VO%p/WO~P0zO!w#dO#_/VO%p/WO~O^/XO~P){O^/ZO~O%y/_OP%wiQ%wiW%wi]%wi^%wia%wib%wig%wii%wij%wik%win%wip%wiu%wiw%wix%wiy%wi!P%wi!Z%wi!`%wi!c%wi!d%wi!e%wi!f%wi!g%wi!j%wi#`%wi#p%wi#t%wi$}%wi%P%wi%R%wi%S%wi%V%wi%X%wi%[%wi%]%wi%_%wi%l%wi%r%wi%t%wi%v%wi%x%wi%{%wi&R%wi&V%wi&X%wi&Z%wi&]%wi&_%wi'O%wi'Y%wi'c%wi'o%wi'|%wi!O%wi_%wi&O%wi~O_/eO!O/cO&O/dO~P`O!PSO!`/hO~O}#aO'e$Za~Oz&ei}&ei~P!*WO}!]Oz'ji~O}&^Oz'ti~Oz/lO~O}!Ra!O!Ra~P#)tO]&POj&PO|/rO'f(eO}&fX!O&fX~P@^O}+WO!O'ka~O]&XOj&XO|)uO'f'QO}&kX!O&kX~O}+ZO!O'va~Oz'ui}'ui~P!*WO^$]O!X!vO!`$YO!f/}O!w/{O'T$]O'_$dO'p&lO~O!O0QO~P!?jO!T0RO!U0RO'Z$cO'f(eO'o+cO~O!S0SO~P#HXO!PSO!S0SO!q0UO!t0VO~P#HXO!S0SO!o0XO!p0XO!q0UO!t0VO~P#HXO!P&aO~O!P&aO~P!$dO}'ri!_'ri^'ri'T'ri~P!*WO!w0bO}'ri!_'ri^'ri'T'ri~O}&qO!_'qi~Ou$uO!P$vO#R0dO'Y$aO~O#SoaPoaYoa^oaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa'Toa'coa!_oazoa!Poa'eoa%Ooa!Xoa~P#7PO#S$[aP$[aY$[a^$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a'T$[a'c$[a!_$[az$[a!P$[a'e$[a%O$[a!X$[a~P#7uO#S$^aP$^aY$^a^$^ai$^as$^a!]$^a!^$^a!`$^a!f$^a#W$^a#X$^a#Y$^a#Z$^a#[$^a#]$^a#^$^a#_$^a#a$^a#c$^a#e$^a#f$^a'T$^a'c$^a!_$^az$^a!P$^a'e$^a%O$^a!X$^a~P#8hO#S$laP$laY$la^$lai$las$la}$la!]$la!^$la!`$la!f$la#W$la#X$la#Y$la#Z$la#[$la#]$la#^$la#_$la#a$la#c$la#e$la#f$la'T$la'c$la!_$laz$la!P$la!w$la'e$la%O$la!X$la~P!$dO^!zq}!zq'T!zqz!zq!_!zq'e!zq!P!zq%O!zq!X!zq~P!*WO}&gX'^&gX~PJaO},XO'^'ma~O|0lO}&hX!_&hX~P){O},[O!_'na~O},[O!_'na~P!*WO#i!ba!O!ba~PC`O#i!Ya}!Ya!O!Ya~P#)tO!P1PO#t^O#}1QO~O!O1UO~O'e1VO~P!$dO^$Wq}$Wq'T$Wqz$Wq!_$Wq'e$Wq!P$Wq%O$Wq!X$Wq~P!*WOz1WO~O],sOj,sO~Or(POu(QO'x(UO'p$vi'w$vi}$vi!w$vi~O'^$vi#i$vi~P$(xOr(POu(QO'p$xi'w$xi'x$xi}$xi!w$xi~O'^$xi#i$xi~P$)kO#i1XO~P!$dO|1ZO'Y$aO}&pX!_&pX~O},{O!_'}a~O},{O!X!vO!_'}a~O},{O!X!vO'p&lO!_'}a~O'^$ei}$ei#i$ei!w$ei~P!$dO|1bO'Y(`Oz&rX}&rX~P!%RO}-SOz(Oa~O}-SOz(Oa~P!$dO!X!vO~O!X!vO#_1lO~Oi1pO!X!vO'p&lO~O}'ai'^'ai~P!$dO!w1sO}'ai'^'ai~P!$dO!_1vO~O^$Xq}$Xq'T$Xqz$Xq!_$Xq'e$Xq!P$Xq%O$Xq!X$Xq~P!*WO}1zO!P(PX~P!$dO!P&aO%O1}O~O!P&aO%O1}O~P!$dO!P$cX$sZX^$cX'T$cX~P!#ZO$s2ROrfXufX!PfX'pfX'wfX'xfX^fX'TfX~O$s2RO~O%P2YO'Y)eO}&{X!O&{X~O}.UO!O(Va~OY2^O~O[2_O~O]2bO~OR2dO!P&aO!k2cO%O1}O~O^$]O'T$]O~P!$dO!P#zO~P!$dO}2iO!w2kO!O(SX~O!O2lO~Ou(iO!S2uO!T2nO!U2nO!n2tO!o2sO!p2sO!t2rO'Z$cO'f(eO'o+cO~O!O2qO~P$1yOR2|O!P.qO!k2{O%O2zO~OR2|O!P.qO!k2{O%O2zO'_$dO~O'Y(wO}&zX!O&zX~O}.}O!O(Ta~O'f3VO~O]3XO~O[3ZO~O!_3^O~P){O^3`O~O^3`O~P){O#_3bO%p3cO~PExO_/eO!O3gO&O/dO~P`O!X3iO~O&T3jOP&QqQ&QqW&Qq]&Qq^&Qqa&Qqb&Qqg&Qqi&Qqj&Qqk&Qqn&Qqp&Qqu&Qqw&Qqx&Qqy&Qq!P&Qq!Z&Qq!`&Qq!c&Qq!d&Qq!e&Qq!f&Qq!g&Qq!j&Qq#`&Qq#p&Qq#t&Qq$}&Qq%P&Qq%R&Qq%S&Qq%V&Qq%X&Qq%[&Qq%]&Qq%_&Qq%l&Qq%r&Qq%t&Qq%v&Qq%x&Qq%{&Qq&R&Qq&V&Qq&X&Qq&Z&Qq&]&Qq&_&Qq'O&Qq'Y&Qq'c&Qq'o&Qq'|&Qq!O&Qq%y&Qq_&Qq&O&Qq~O}#Pi!O#Pi~P#)tO!w3lO}#Pi!O#Pi~O}!Ri!O!Ri~P#)tO^$]O!w3sO'T$]O~O^$]O!X!vO!w3sO'T$]O~O!T3wO!U3wO'Z$cO'f(eO'o+cO~O^$]O!X!vO!`$YO!f3xO!w3sO'T$]O'_$dO'p&lO~O!S3yO~P$:cO!S3yO!q3|O!t3}O~P$:cO^$]O!X!vO!f3xO!w3sO'T$]O'p&lO~O}'rq!_'rq^'rq'T'rq~P!*WO}&qO!_'qq~O#S$viP$viY$vi^$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi'T$vi'c$vi!_$viz$vi!P$vi'e$vi%O$vi!X$vi~P$(xO#S$xiP$xiY$xi^$xii$xis$xi!]$xi!^$xi!`$xi!f$xi#W$xi#X$xi#Y$xi#Z$xi#[$xi#]$xi#^$xi#_$xi#a$xi#c$xi#e$xi#f$xi'T$xi'c$xi!_$xiz$xi!P$xi'e$xi%O$xi!X$xi~P$)kO#S$eiP$eiY$ei^$eii$eis$ei}$ei!]$ei!^$ei!`$ei!f$ei#W$ei#X$ei#Y$ei#Z$ei#[$ei#]$ei#^$ei#_$ei#a$ei#c$ei#e$ei#f$ei'T$ei'c$ei!_$eiz$ei!P$ei!w$ei'e$ei%O$ei!X$ei~P!$dO}&ga'^&ga~P!$dO}&ha!_&ha~P!*WO},[O!_'ni~O#i!zi}!zi!O!zi~P#)tOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'cQOY#Vii#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~O#W#Vi~P$CyO#W9[O~P$CyOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O'cQOY#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~Oi#Vi~P$FROi9^O~P$FROP#]Oi9^Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O'cQO#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P$HZOY9iO!]9`O#]9`O#^9`O#_9`O~P$HZOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO'cQO#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'x#Vi}#Vi!O#Vi~O'w#Vi~P$JoO'w!|O~P$JoOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO'cQO'w!|O#e#Vi#f#Vi#i#Vi'p#Vi}#Vi!O#Vi~O'x#Vi~P$LwO'x!}O~P$LwOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO#e9eO'cQO'w!|O'x!}O~O#f#Vi#i#Vi'p#Vi}#Vi!O#Vi~P% PO^#gy}#gy'T#gyz#gy!_#gy'e#gy!P#gy%O#gy!X#gy~P!*WOP#ViY#Vii#Vis#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'c#Vi}#Vi!O#Vi~P!$dO!^!xOP'bXY'bXi'bXr'bXs'bXu'bX!]'bX!`'bX!f'bX#W'bX#X'bX#Y'bX#Z'bX#['bX#]'bX#^'bX#_'bX#a'bX#c'bX#e'bX#f'bX#i'bX'c'bX'p'bX'w'bX'x'bX}'bX!O'bX~O#i#ji}#ji!O#ji~P#)tO!O4_O~O}&oa!O&oa~P#)tO!X!vO'p&lO}&pa!_&pa~O},{O!_'}i~O},{O!X!vO!_'}i~Oz&ra}&ra~P!$dO!X4fO~O}-SOz(Oi~P!$dO}-SOz(Oi~Oz4lO~O!X!vO#_4rO~Oi4sO!X!vO'p&lO~Oz4uO~O'^$gq}$gq#i$gq!w$gq~P!$dO^$Xy}$Xy'T$Xyz$Xy!_$Xy'e$Xy!P$Xy%O$Xy!X$Xy~P!*WO}1zO!P(Pa~O!P&aO%O4zO~O!P&aO%O4zO~P!$dO^!zy}!zy'T!zyz!zy!_!zy'e!zy!P!zy%O!zy!X!zy~P!*WOY4}O~O}.UO!O(Vi~O]5SO~O[5TO~O'f'QO}&wX!O&wX~O}2iO!O(Sa~O!O5bO~P$1yOu-eO'f(eO'o+cO~O!S5eO!T5dO!U5dO!t0VO'Z$cO'f(eO'o+cO~O!o5fO!p5fO~P%-iO!T5dO!U5dO'Z$cO'f(eO'o+cO~O!P.qO~O!P.qO%O5hO~O!P.qO%O5hO~P!$dOR5mO!P.qO!k5lO%O5hO~OY5rO}&za!O&za~O}.}O!O(Ti~O]5uO~O!_5vO~O!_5wO~O!_5xO~O!_5xO~P){O^5zO~O!X5}O~O!_6PO~O}'ui!O'ui~P#)tO^$]O'T$]O~P!*WO^$]O!w6UO'T$]O~O^$]O!X!vO!w6UO'T$]O~O!T6ZO!U6ZO'Z$cO'f(eO'o+cO~O^$]O!X!vO!f6[O!w6UO'T$]O'p&lO~O!`$YO'_$dO~P%2TO!S6]O~P%1rO}'ry!_'ry^'ry'T'ry~P!*WO#S$gqP$gqY$gq^$gqi$gqs$gq}$gq!]$gq!^$gq!`$gq!f$gq#W$gq#X$gq#Y$gq#Z$gq#[$gq#]$gq#^$gq#_$gq#a$gq#c$gq#e$gq#f$gq'T$gq'c$gq!_$gqz$gq!P$gq!w$gq'e$gq%O$gq!X$gq~P!$dO}&hi!_&hi~P!*WO#i!zq}!zq!O!zq~P#)tOr-kOs-kOu-lOPoaYoaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa#ioa'coa'poa'woa'xoa}oa!Ooa~Or(POu(QOP$[aY$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a#i$[a'c$[a'p$[a'w$[a'x$[a}$[a!O$[a~Or(POu(QOP$^aY$^ai$^as$^a!]$^a!^$^a!`$^a!f$^a#W$^a#X$^a#Y$^a#Z$^a#[$^a#]$^a#^$^a#_$^a#a$^a#c$^a#e$^a#f$^a#i$^a'c$^a'p$^a'w$^a'x$^a}$^a!O$^a~OP$laY$lai$las$la!]$la!^$la!`$la!f$la#W$la#X$la#Y$la#Z$la#[$la#]$la#^$la#_$la#a$la#c$la#e$la#f$la#i$la'c$la}$la!O$la~P!$dO#i$Wq}$Wq!O$Wq~P#)tO#i$Xq}$Xq!O$Xq~P#)tO!O6gO~O'^$zy}$zy#i$zy!w$zy~P!$dO!X!vO}&pi!_&pi~O!X!vO'p&lO}&pi!_&pi~O},{O!_'}q~Oz&ri}&ri~P!$dO}-SOz(Oq~Oz6nO~P!$dOz6nO~O}'ay'^'ay~P!$dO}&ua!P&ua~P!$dO!P$rq^$rq'T$rq~P!$dOY6vO~O}.UO!O(Vq~O]6yO~O!P&aO%O6zO~O!P&aO%O6zO~P!$dO!w6{O}&wa!O&wa~O}2iO!O(Si~P#)tO!T7RO!U7RO'Z$cO'f(eO'o+cO~O!S7TO!t3}O~P%ArO!P.qO%O7WO~O!P.qO%O7WO~P!$dO'f7^O~O}.}O!O(Tq~O!_7aO~O!_7aO~P){O!_7cO~O!_7dO~O}#Py!O#Py~P#)tO^$]O!w7jO'T$]O~O^$]O!X!vO!w7jO'T$]O~O!T7mO!U7mO'Z$cO'f(eO'o+cO~O^$]O!X!vO!f7nO!w7jO'T$]O'p&lO~O#S$zyP$zyY$zy^$zyi$zys$zy}$zy!]$zy!^$zy!`$zy!f$zy#W$zy#X$zy#Y$zy#Z$zy#[$zy#]$zy#^$zy#_$zy#a$zy#c$zy#e$zy#f$zy'T$zy'c$zy!_$zyz$zy!P$zy!w$zy'e$zy%O$zy!X$zy~P!$dO#i#gy}#gy!O#gy~P#)tOP$eiY$eii$eis$ei!]$ei!^$ei!`$ei!f$ei#W$ei#X$ei#Y$ei#Z$ei#[$ei#]$ei#^$ei#_$ei#a$ei#c$ei#e$ei#f$ei#i$ei'c$ei}$ei!O$ei~P!$dOr(POu(QO'x(UOP$viY$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi#i$vi'c$vi'p$vi'w$vi}$vi!O$vi~Or(POu(QOP$xiY$xii$xis$xi!]$xi!^$xi!`$xi!f$xi#W$xi#X$xi#Y$xi#Z$xi#[$xi#]$xi#^$xi#_$xi#a$xi#c$xi#e$xi#f$xi#i$xi'c$xi'p$xi'w$xi'x$xi}$xi!O$xi~O#i$Xy}$Xy!O$Xy~P#)tO#i!zy}!zy!O!zy~P#)tO!X!vO}&pq!_&pq~O},{O!_'}y~Oz&rq}&rq~P!$dOz7tO~P!$dO}.UO!O(Vy~O}2iO!O(Sq~O!T8QO!U8QO'Z$cO'f(eO'o+cO~O!P.qO%O8TO~O!P.qO%O8TO~P!$dO!_8WO~O&T8XOP&Q!ZQ&Q!ZW&Q!Z]&Q!Z^&Q!Za&Q!Zb&Q!Zg&Q!Zi&Q!Zj&Q!Zk&Q!Zn&Q!Zp&Q!Zu&Q!Zw&Q!Zx&Q!Zy&Q!Z!P&Q!Z!Z&Q!Z!`&Q!Z!c&Q!Z!d&Q!Z!e&Q!Z!f&Q!Z!g&Q!Z!j&Q!Z#`&Q!Z#p&Q!Z#t&Q!Z$}&Q!Z%P&Q!Z%R&Q!Z%S&Q!Z%V&Q!Z%X&Q!Z%[&Q!Z%]&Q!Z%_&Q!Z%l&Q!Z%r&Q!Z%t&Q!Z%v&Q!Z%x&Q!Z%{&Q!Z&R&Q!Z&V&Q!Z&X&Q!Z&Z&Q!Z&]&Q!Z&_&Q!Z'O&Q!Z'Y&Q!Z'c&Q!Z'o&Q!Z'|&Q!Z!O&Q!Z%y&Q!Z_&Q!Z&O&Q!Z~O^$]O!w8^O'T$]O~O^$]O!X!vO!w8^O'T$]O~OP$gqY$gqi$gqs$gq!]$gq!^$gq!`$gq!f$gq#W$gq#X$gq#Y$gq#Z$gq#[$gq#]$gq#^$gq#_$gq#a$gq#c$gq#e$gq#f$gq#i$gq'c$gq}$gq!O$gq~P!$dO}&wq!O&wq~P#)tO^$]O!w8sO'T$]O~OP$zyY$zyi$zys$zy!]$zy!^$zy!`$zy!f$zy#W$zy#X$zy#Y$zy#Z$zy#[$zy#]$zy#^$zy#_$zy#a$zy#c$zy#e$zy#f$zy#i$zy'c$zy}$zy!O$zy~P!$dO'e'gX~P.jO'eZXzZX!_ZX%pZX!PZX%OZX!XZX~P$zO!XcX!_ZX!_cX'pcX~P;dOP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!PSO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'Y'`O'cQO'oYO'|:jO~O}9gO!O$Za~O]#rOg$POi#sOj#rOk#rOn$QOp9lOu#yO!P#zO!Z:oO!`#wO#R9rO#p$UO$]9nO$_9pO$b$VO'Y&xO'c#tO~O#`'gO~P&-RO!OZX!OcX~P;dO#S9ZO~O!X!vO#S9ZO~O!w9jO~O#_9`O~O!w9sO}'uX!O'uX~O!w9jO}'sX!O'sX~O#S9tO~O'^9vO~P!$dO#S9{O~O#S9|O~O!X!vO#S9}O~O!X!vO#S9tO~O#i:OO~P#)tO#S:PO~O#S:QO~O#S:RO~O#S:SO~O#i:TO~P!$dO#i:UO~P!$dO#t~!^!n!p!q#Q#R'|$]$_$b$s$}%O%P%V%X%[%]%_%a~TS#t'|#Xy'V'W'f'W'Y#v#x#v~", ++ goto: "#Dq(ZPPPPPPP([P(lP*`PPPP-uPP.[3l5`5sP5sPPP5s5sP5sP7aPP7fP7zPPPPyPPP?PA[PbP!>f!>n!>r!>rP!;lP!>v!>vP!AiP!Amk|}?O}!O>k!O!P?`!P!QCl!Q!R!0[!R![!1q![!]!7s!]!^!8V!^!_!8g!_!`!9d!`!a!:[!a!b!U#R#S2`#S#T!>i#T#o2`#o#p!>y#p#q!?O#q#r!?f#r#s!?x#s$f%T$f$g%c$g#BY2`#BY#BZ!@Y#BZ$IS2`$IS$I_!@Y$I_$I|2`$I|$I}!Bq$I}$JO!Bq$JO$JT2`$JT$JU!@Y$JU$KV2`$KV$KW!@Y$KW&FU2`&FU&FV!@Y&FV?HT2`?HT?HU!@Y?HU~2`W%YR$QWO!^%T!_#o%T#p~%T,T%jg$QW'T+{OX%TXY%cYZ%TZ[%c[p%Tpq%cq!^%T!_#o%T#p$f%T$f$g%c$g#BY%T#BY#BZ%c#BZ$IS%T$IS$I_%c$I_$JT%T$JT$JU%c$JU$KV%T$KV$KW%c$KW&FU%T&FU&FV%c&FV?HT%T?HT?HU%c?HU~%T,T'YR$QW'U+{O!^%T!_#o%T#p~%T$T'jS$QW!f#{O!^%T!_!`'v!`#o%T#p~%T$O'}S#a#v$QWO!^%T!_!`(Z!`#o%T#p~%T$O(bR#a#v$QWO!^%T!_#o%T#p~%T'u(rZ$QW]!ROY(kYZ)eZr(krs*rs!^(k!^!_+U!_#O(k#O#P-b#P#o(k#o#p+U#p~(k&r)jV$QWOr)ers*Ps!^)e!^!_*a!_#o)e#o#p*a#p~)e&r*WR#{&j$QWO!^%T!_#o%T#p~%T&j*dROr*ars*ms~*a&j*rO#{&j'u*{R#{&j$QW]!RO!^%T!_#o%T#p~%T'm+ZV]!ROY+UYZ*aZr+Urs+ps#O+U#O#P+w#P~+U'm+wO#{&j]!R'm+zROr+Urs,Ts~+U'm,[U#{&j]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R,sU]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R-[O]!R!R-_PO~,n'u-gV$QWOr(krs-|s!^(k!^!_+U!_#o(k#o#p+U#p~(k'u.VZ#{&j$QW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/PZ$QW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/yR$QW]!RO!^%T!_#o%T#p~%T!Z0XT$QWO!^.x!^!_,n!_#o.x#o#p,n#p~.xy0mZ$QWOt%Ttu1`u!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`y1g]$QW'mqOt%Ttu1`u!Q%T!Q![1`![!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`&i2k_$QW#vS'W%k'dpOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`[3q_$QW#vSOt%Ttu3ju}%T}!O3j!O!Q%T!Q![3j![!^%T!_!c%T!c!}3j!}#R%T#R#S3j#S#T%T#T#o3j#p$g%T$g~3j$O4wS#Y#v$QWO!^%T!_!`5T!`#o%T#p~%T$O5[R$QW#k#vO!^%T!_#o%T#p~%T%r5lU'v%j$QWOv%Tvw6Ow!^%T!_!`5T!`#o%T#p~%T$O6VS$QW#e#vO!^%T!_!`5T!`#o%T#p~%T'u6jZ$QW]!ROY6cYZ7]Zw6cwx*rx!^6c!^!_8T!_#O6c#O#P:T#P#o6c#o#p8T#p~6c&r7bV$QWOw7]wx*Px!^7]!^!_7w!_#o7]#o#p7w#p~7]&j7zROw7wwx*mx~7w'm8YV]!ROY8TYZ7wZw8Twx+px#O8T#O#P8o#P~8T'm8rROw8Twx8{x~8T'm9SU#{&j]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R9kU]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R:QPO~9f'u:YV$QWOw6cwx:ox!^6c!^!_8T!_#o6c#o#p8T#p~6c'u:xZ#{&j$QW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#PW{!^%T!_!`5T!`#o%T#p~%T$O>_S#W#v$QWO!^%T!_!`5T!`#o%T#p~%T$u>rSi$m$QWO!^%T!_!`5T!`#o%T#p~%T&i?VR}&a$QWO!^%T!_#o%T#p~%T&i?gVr%n$QWO!O%T!O!P?|!P!Q%T!Q![@r![!^%T!_#o%T#p~%Ty@RT$QWO!O%T!O!P@b!P!^%T!_#o%T#p~%Ty@iR|q$QWO!^%T!_#o%T#p~%Ty@yZ$QWjqO!Q%T!Q![@r![!^%T!_!g%T!g!hAl!h#R%T#R#S@r#S#X%T#X#YAl#Y#o%T#p~%TyAqZ$QWO{%T{|Bd|}%T}!OBd!O!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyBiV$QWO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyCVV$QWjqO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%T,TCs`$QW#X#vOYDuYZ%TZzDuz{Jl{!PDu!P!Q!-e!Q!^Du!^!_Fx!_!`!.^!`!a!/]!a!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXD|[$QWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXEy_$QWyPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%TPF}VyPOYFxZ!PFx!P!QGd!Q!}Fx!}#OG{#O#PHh#P~FxPGiUyP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGdPHOTOYG{Z#OG{#O#PH_#P#QFx#Q~G{PHbQOYG{Z~G{PHkQOYFxZ~FxXHvY$QWOYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~HqXIkV$QWOYHqYZ%TZ!^Hq!^!_G{!_#oHq#o#pG{#p~HqXJVV$QWOYDuYZ%TZ!^Du!^!_Fx!_#oDu#o#pFx#p~Du,TJs^$QWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q!,R!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,TKtV$QWOzKoz{LZ{!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TL`X$QWOzKoz{LZ{!PKo!P!QL{!Q!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TMSR$QWT+{O!^%T!_#o%T#p~%T+{M`ROzM]z{Mi{~M]+{MlTOzM]z{Mi{!PM]!P!QM{!Q~M]+{NQOT+{,TNX^$QWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q! T!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,T! ^_$QWT+{yPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%T+{!!bYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!&x!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#VYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!#u!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#|UT+{yP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGd+{!$cWOY!$`YZM]Zz!$`z{!${{#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%OYOY!$`YZM]Zz!$`z{!${{!P!$`!P!Q!%n!Q#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%sTT+{OYG{Z#OG{#O#PH_#P#QFx#Q~G{+{!&VTOY!$`YZM]Zz!$`z{!${{~!$`+{!&iTOY!!]YZM]Zz!!]z{!#Q{~!!]+{!&}_yPOzM]z{Mi{#ZM]#Z#[!&x#[#]M]#]#^!&x#^#aM]#a#b!&x#b#gM]#g#h!&x#h#iM]#i#j!&x#j#mM]#m#n!&x#n~M],T!(R[$QWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!(|^$QWOY!'|YZKoZz!'|z{!(w{!P!'|!P!Q!)x!Q!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!*PY$QWT+{OYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~Hq,T!*tX$QWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#o!'|#o#p!$`#p~!'|,T!+fX$QWOYJlYZKoZzJlz{NQ{!^Jl!^!_!!]!_#oJl#o#p!!]#p~Jl,T!,Yc$QWyPOzKoz{LZ{!^Ko!^!_M]!_#ZKo#Z#[!,R#[#]Ko#]#^!,R#^#aKo#a#b!,R#b#gKo#g#h!,R#h#iKo#i#j!,R#j#mKo#m#n!,R#n#oKo#o#pM]#p~Ko,T!-lV$QWS+{OY!-eYZ%TZ!^!-e!^!_!.R!_#o!-e#o#p!.R#p~!-e+{!.WQS+{OY!.RZ~!.R$P!.g[$QW#k#vyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Du]!/f[#sS$QWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Duy!0cd$QWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#U%T#U#V!3X#V#X%T#X#YAl#Y#b%T#b#c!2w#c#d!4m#d#l%T#l#m!5{#m#o%T#p~%Ty!1x_$QWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#X%T#X#YAl#Y#b%T#b#c!2w#c#o%T#p~%Ty!3OR$QWjqO!^%T!_#o%T#p~%Ty!3^W$QWO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#o%T#p~%Ty!3}Y$QWjqO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#b%T#b#c!2w#c#o%T#p~%Ty!4rV$QWO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#o%T#p~%Ty!5`X$QWjqO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#b%T#b#c!2w#c#o%T#p~%Ty!6QZ$QWO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#o%T#p~%Ty!6z]$QWjqO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#b%T#b#c!2w#c#o%T#p~%T%w!7|R!XV$QW#i%hO!^%T!_#o%T#p~%T!P!8^R^w$QWO!^%T!_#o%T#p~%T+c!8rR']d!]%Y#t&s'zP!P!Q!8{!^!_!9Q!_!`!9_W!9QO$SW#v!9VP#[#v!_!`!9Y#v!9_O#k#v#v!9dO#]#v%w!9kT!w%o$QWO!^%T!_!`'v!`!a!9z!a#o%T#p~%T$P!:RR#S#w$QWO!^%T!_#o%T#p~%T%w!:gT'[!s#]#v#}S$QWO!^%T!_!`!:v!`!a!;W!a#o%T#p~%T$O!:}R#]#v$QWO!^%T!_#o%T#p~%T$O!;_T#[#v$QWO!^%T!_!`5T!`!a!;n!a#o%T#p~%T$O!;uS#[#v$QWO!^%T!_!`5T!`#o%T#p~%T%w!]S#c#v$QWO!^%T!_!`5T!`#o%T#p~%T$P!>pR$QW'a#wO!^%T!_#o%T#p~%T~!?OO!P~%r!?VT'u%j$QWO!^%T!_!`5T!`#o%T#p#q!=P#q~%T$u!?oR!O$k$QW'cQO!^%T!_#o%T#p~%TX!@PR!gP$QWO!^%T!_#o%T#p~%T,T!@gr$QW'T+{#vS'W%k'dpOX%TXY%cYZ%TZ[%c[p%Tpq%cqt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$f%T$f$g%c$g#BY2`#BY#BZ!@Y#BZ$IS2`$IS$I_!@Y$I_$JT2`$JT$JU!@Y$JU$KV2`$KV$KW!@Y$KW&FU2`&FU&FV!@Y&FV?HT2`?HT?HU!@Y?HU~2`,T!CO_$QW'U+{#vS'W%k'dpOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`", ++ tokenData: "!F_~R!`OX%TXY%cYZ'RZ[%c[]%T]^'R^p%Tpq%cqr'crs(kst0htu2`uv4pvw5ewx6cxyk|}?O}!O>k!O!P?`!P!QCl!Q!R!0[!R![!1q![!]!7s!]!^!8V!^!_!8g!_!`!9d!`!a!:[!a!b!U#R#S2`#S#T!>i#T#o!>y#o#p!AZ#p#q!A`#q#r!Av#r#s!BY#s$f%T$f$g%c$g#BY2`#BY#BZ!Bj#BZ$IS2`$IS$I_!Bj$I_$I|2`$I|$I}!ER$I}$JO!ER$JO$JT2`$JT$JU!Bj$JU$KV2`$KV$KW!Bj$KW&FU2`&FU&FV!Bj&FV?HT2`?HT?HU!Bj?HU~2`W%YR$SWO!^%T!_#o%T#p~%T,T%jg$SW'V+{OX%TXY%cYZ%TZ[%c[p%Tpq%cq!^%T!_#o%T#p$f%T$f$g%c$g#BY%T#BY#BZ%c#BZ$IS%T$IS$I_%c$I_$JT%T$JT$JU%c$JU$KV%T$KV$KW%c$KW&FU%T&FU&FV%c&FV?HT%T?HT?HU%c?HU~%T,T'YR$SW'W+{O!^%T!_#o%T#p~%T$T'jS$SW!f#{O!^%T!_!`'v!`#o%T#p~%T$O'}S#a#v$SWO!^%T!_!`(Z!`#o%T#p~%T$O(bR#a#v$SWO!^%T!_#o%T#p~%T'u(rZ$SW]!ROY(kYZ)eZr(krs*rs!^(k!^!_+U!_#O(k#O#P-b#P#o(k#o#p+U#p~(k&r)jV$SWOr)ers*Ps!^)e!^!_*a!_#o)e#o#p*a#p~)e&r*WR#}&j$SWO!^%T!_#o%T#p~%T&j*dROr*ars*ms~*a&j*rO#}&j'u*{R#}&j$SW]!RO!^%T!_#o%T#p~%T'm+ZV]!ROY+UYZ*aZr+Urs+ps#O+U#O#P+w#P~+U'm+wO#}&j]!R'm+zROr+Urs,Ts~+U'm,[U#}&j]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R,sU]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R-[O]!R!R-_PO~,n'u-gV$SWOr(krs-|s!^(k!^!_+U!_#o(k#o#p+U#p~(k'u.VZ#}&j$SW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/PZ$SW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/yR$SW]!RO!^%T!_#o%T#p~%T!Z0XT$SWO!^.x!^!_,n!_#o.x#o#p,n#p~.xy0mZ$SWOt%Ttu1`u!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`y1g]$SW'oqOt%Ttu1`u!Q%T!Q![1`![!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`&i2k_$SW'fp'Y%k#vSOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`[3q_$SW#vSOt%Ttu3ju}%T}!O3j!O!Q%T!Q![3j![!^%T!_!c%T!c!}3j!}#R%T#R#S3j#S#T%T#T#o3j#p$g%T$g~3j$O4wS#Y#v$SWO!^%T!_!`5T!`#o%T#p~%T$O5[R$SW#k#vO!^%T!_#o%T#p~%T%r5lU'x%j$SWOv%Tvw6Ow!^%T!_!`5T!`#o%T#p~%T$O6VS$SW#e#vO!^%T!_!`5T!`#o%T#p~%T'u6jZ$SW]!ROY6cYZ7]Zw6cwx*rx!^6c!^!_8T!_#O6c#O#P:T#P#o6c#o#p8T#p~6c&r7bV$SWOw7]wx*Px!^7]!^!_7w!_#o7]#o#p7w#p~7]&j7zROw7wwx*mx~7w'm8YV]!ROY8TYZ7wZw8Twx+px#O8T#O#P8o#P~8T'm8rROw8Twx8{x~8T'm9SU#}&j]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R9kU]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R:QPO~9f'u:YV$SWOw6cwx:ox!^6c!^!_8T!_#o6c#o#p8T#p~6c'u:xZ#}&j$SW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#PW{!^%T!_!`5T!`#o%T#p~%T$O>_S#W#v$SWO!^%T!_!`5T!`#o%T#p~%T$u>rSi$m$SWO!^%T!_!`5T!`#o%T#p~%T&i?VR}&a$SWO!^%T!_#o%T#p~%T&i?gVr%n$SWO!O%T!O!P?|!P!Q%T!Q![@r![!^%T!_#o%T#p~%Ty@RT$SWO!O%T!O!P@b!P!^%T!_#o%T#p~%Ty@iR|q$SWO!^%T!_#o%T#p~%Ty@yZ$SWjqO!Q%T!Q![@r![!^%T!_!g%T!g!hAl!h#R%T#R#S@r#S#X%T#X#YAl#Y#o%T#p~%TyAqZ$SWO{%T{|Bd|}%T}!OBd!O!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyBiV$SWO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyCVV$SWjqO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%T,TCs`$SW#X#vOYDuYZ%TZzDuz{Jl{!PDu!P!Q!-e!Q!^Du!^!_Fx!_!`!.^!`!a!/]!a!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXD|[$SWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXEy_$SWyPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%TPF}VyPOYFxZ!PFx!P!QGd!Q!}Fx!}#OG{#O#PHh#P~FxPGiUyP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGdPHOTOYG{Z#OG{#O#PH_#P#QFx#Q~G{PHbQOYG{Z~G{PHkQOYFxZ~FxXHvY$SWOYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~HqXIkV$SWOYHqYZ%TZ!^Hq!^!_G{!_#oHq#o#pG{#p~HqXJVV$SWOYDuYZ%TZ!^Du!^!_Fx!_#oDu#o#pFx#p~Du,TJs^$SWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q!,R!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,TKtV$SWOzKoz{LZ{!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TL`X$SWOzKoz{LZ{!PKo!P!QL{!Q!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TMSR$SWT+{O!^%T!_#o%T#p~%T+{M`ROzM]z{Mi{~M]+{MlTOzM]z{Mi{!PM]!P!QM{!Q~M]+{NQOT+{,TNX^$SWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q! T!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,T! ^_$SWT+{yPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%T+{!!bYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!&x!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#VYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!#u!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#|UT+{yP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGd+{!$cWOY!$`YZM]Zz!$`z{!${{#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%OYOY!$`YZM]Zz!$`z{!${{!P!$`!P!Q!%n!Q#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%sTT+{OYG{Z#OG{#O#PH_#P#QFx#Q~G{+{!&VTOY!$`YZM]Zz!$`z{!${{~!$`+{!&iTOY!!]YZM]Zz!!]z{!#Q{~!!]+{!&}_yPOzM]z{Mi{#ZM]#Z#[!&x#[#]M]#]#^!&x#^#aM]#a#b!&x#b#gM]#g#h!&x#h#iM]#i#j!&x#j#mM]#m#n!&x#n~M],T!(R[$SWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!(|^$SWOY!'|YZKoZz!'|z{!(w{!P!'|!P!Q!)x!Q!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!*PY$SWT+{OYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~Hq,T!*tX$SWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#o!'|#o#p!$`#p~!'|,T!+fX$SWOYJlYZKoZzJlz{NQ{!^Jl!^!_!!]!_#oJl#o#p!!]#p~Jl,T!,Yc$SWyPOzKoz{LZ{!^Ko!^!_M]!_#ZKo#Z#[!,R#[#]Ko#]#^!,R#^#aKo#a#b!,R#b#gKo#g#h!,R#h#iKo#i#j!,R#j#mKo#m#n!,R#n#oKo#o#pM]#p~Ko,T!-lV$SWS+{OY!-eYZ%TZ!^!-e!^!_!.R!_#o!-e#o#p!.R#p~!-e+{!.WQS+{OY!.RZ~!.R$P!.g[$SW#k#vyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Du]!/f[#sS$SWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Duy!0cd$SWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#U%T#U#V!3X#V#X%T#X#YAl#Y#b%T#b#c!2w#c#d!4m#d#l%T#l#m!5{#m#o%T#p~%Ty!1x_$SWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#X%T#X#YAl#Y#b%T#b#c!2w#c#o%T#p~%Ty!3OR$SWjqO!^%T!_#o%T#p~%Ty!3^W$SWO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#o%T#p~%Ty!3}Y$SWjqO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#b%T#b#c!2w#c#o%T#p~%Ty!4rV$SWO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#o%T#p~%Ty!5`X$SWjqO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#b%T#b#c!2w#c#o%T#p~%Ty!6QZ$SWO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#o%T#p~%Ty!6z]$SWjqO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#b%T#b#c!2w#c#o%T#p~%T%w!7|R!XV$SW#i%hO!^%T!_#o%T#p~%T!P!8^R^w$SWO!^%T!_#o%T#p~%T+c!8rR'_d!]%Y#t&s'|P!P!Q!8{!^!_!9Q!_!`!9_W!9QO$UW#v!9VP#[#v!_!`!9Y#v!9_O#k#v#v!9dO#]#v%w!9kT!w%o$SWO!^%T!_!`'v!`!a!9z!a#o%T#p~%T$P!:RR#S#w$SWO!^%T!_#o%T#p~%T%w!:gT'^!s#]#v$PS$SWO!^%T!_!`!:v!`!a!;W!a#o%T#p~%T$O!:}R#]#v$SWO!^%T!_#o%T#p~%T$O!;_T#[#v$SWO!^%T!_!`5T!`!a!;n!a#o%T#p~%T$O!;uS#[#v$SWO!^%T!_!`5T!`#o%T#p~%T%w!]S#c#v$SWO!^%T!_!`5T!`#o%T#p~%T$P!>pR$SW'c#wO!^%T!_#o%T#p~%T&i!?U_$SW'fp'Y%k#xSOt%Ttu!>yu}%T}!O!@T!O!Q%T!Q![!>y![!^%T!_!c%T!c!}!>y!}#R%T#R#S!>y#S#T%T#T#o!>y#p$g%T$g~!>y[!@[_$SW#xSOt%Ttu!@Tu}%T}!O!@T!O!Q%T!Q![!@T![!^%T!_!c%T!c!}!@T!}#R%T#R#S!@T#S#T%T#T#o!@T#p$g%T$g~!@T~!A`O!P~%r!AgT'w%j$SWO!^%T!_!`5T!`#o%T#p#q!=P#q~%T$u!BPR!O$k$SW'eQO!^%T!_#o%T#p~%TX!BaR!gP$SWO!^%T!_#o%T#p~%T,T!Bwr$SW'V+{'fp'Y%k#vSOX%TXY%cYZ%TZ[%c[p%Tpq%cqt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$f%T$f$g%c$g#BY2`#BY#BZ!Bj#BZ$IS2`$IS$I_!Bj$I_$JT2`$JT$JU!Bj$JU$KV2`$KV$KW!Bj$KW&FU2`&FU&FV!Bj&FV?HT2`?HT?HU!Bj?HU~2`,T!E`_$SW'W+{'fp'Y%k#vSOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`", + tokenizers: [noSemicolon, incdecToken, template, 0, 1, 2, 3, 4, 5, 6, 7, 8, insertSemicolon], + topRules: {"Script":[0,6]}, +- dialects: {jsx: 11282, ts: 11284}, +- dynamicPrecedences: {"145":1,"172":1}, +- specialized: [{term: 284, get: (value, stack) => (tsExtends(value, stack) << 1)},{term: 284, get: value => spec_identifier[value] || -1},{term: 296, get: value => spec_word[value] || -1},{term: 59, get: value => spec_LessThan[value] || -1}], +- tokenPrec: 11305 ++ dialects: {jsx: 11332, ts: 11334}, ++ dynamicPrecedences: {"147":1,"174":1}, ++ specialized: [{term: 286, get: (value, stack) => (tsExtends(value, stack) << 1)},{term: 286, get: value => spec_identifier[value] || -1},{term: 298, get: value => spec_word[value] || -1},{term: 59, get: value => spec_LessThan[value] || -1}], ++ tokenPrec: 11355 + }); + + exports.parser = parser; +diff --git a/node_modules/@lezer/javascript/dist/index.es.js b/node_modules/@lezer/javascript/dist/index.es.js +index 94d1df0..489e965 100644 +--- a/node_modules/@lezer/javascript/dist/index.es.js ++++ b/node_modules/@lezer/javascript/dist/index.es.js +@@ -2,16 +2,16 @@ import { ContextTracker, ExternalTokenizer, LRParser } from '@lezer/lr'; + import { NodeProp } from '@lezer/common'; + + // This file was generated by lezer-generator. You probably shouldn't edit it. +-const noSemi = 275, ++const noSemi = 277, + incdec = 1, + incdecPrefix = 2, +- templateContent = 276, +- templateDollarBrace = 277, +- templateEnd = 278, +- insertSemi = 279, ++ templateContent = 278, ++ templateDollarBrace = 279, ++ templateEnd = 280, ++ insertSemi = 281, + TSExtends = 3, +- spaces = 281, +- newline = 282, ++ spaces = 283, ++ newline = 284, + LineComment = 4, + BlockComment = 5, + Dialect_ts = 1; +@@ -91,31 +91,31 @@ function tsExtends(value, stack) { + } + + // This file was generated by lezer-generator. You probably shouldn't edit it. +-const spec_identifier = {__proto__:null,export:16, as:21, from:25, default:30, async:35, function:36, this:46, true:54, false:54, void:60, typeof:64, null:78, super:80, new:114, await:131, yield:133, delete:134, class:144, extends:146, public:189, private:189, protected:189, readonly:191, instanceof:212, in:214, const:216, import:248, keyof:299, unique:303, infer:309, is:343, abstract:363, implements:365, type:367, let:370, var:372, interface:379, enum:383, namespace:389, module:391, declare:395, global:399, for:420, of:429, while:432, with:436, do:440, if:444, else:446, switch:450, case:456, try:462, catch:464, finally:466, return:470, throw:474, break:478, continue:482, debugger:486}; +-const spec_word = {__proto__:null,async:101, get:103, set:105, public:153, private:153, protected:153, static:155, abstract:157, override:159, readonly:165, new:347}; ++const spec_identifier = {__proto__:null,export:16, as:21, from:25, default:30, async:35, function:36, this:46, true:54, false:54, void:60, typeof:64, null:78, super:80, new:114, await:131, yield:133, delete:134, class:144, extends:146, public:189, private:189, protected:189, readonly:191, instanceof:212, in:214, const:216, import:248, keyof:303, unique:307, infer:313, is:347, abstract:367, implements:369, type:371, let:374, var:376, interface:383, enum:387, namespace:393, module:395, declare:399, global:403, for:424, of:433, while:436, with:440, do:444, if:448, else:450, switch:454, case:460, try:466, catch:468, finally:470, return:474, throw:478, break:482, continue:486, debugger:490}; ++const spec_word = {__proto__:null,async:101, get:103, set:105, public:153, private:153, protected:153, static:155, abstract:157, override:159, readonly:165, new:351}; + const spec_LessThan = {__proto__:null,"<":121}; + const parser = LRParser.deserialize({ + version: 13, +- states: "$1WO`QYOOO'QQ!LdO'#CgO'XOSO'#DSO)dQYO'#DXO)tQYO'#DdO){QYO'#DnO-xQYO'#DtOOQO'#EX'#EXO.]QWO'#EWO.bQWO'#EWOOQ!LS'#Eb'#EbO0aQ!LdO'#IqO2wQ!LdO'#IrO3eQWO'#EvO3jQpO'#F]OOQ!LS'#FO'#FOO3rO!bO'#FOO4QQWO'#FdO5_QWO'#FcOOQ!LS'#Ir'#IrOOQ!LQ'#Iq'#IqOOQQ'#J['#J[O5dQWO'#HjO5iQ!LYO'#HkOOQQ'#Ic'#IcOOQQ'#Hl'#HlQ`QYOOO){QYO'#DfO5qQWO'#GWO5vQ#tO'#ClO6UQWO'#EVO6aQWO'#EcO6fQ#tO'#E}O7QQWO'#GWO7VQWO'#G[O7bQWO'#G[O7pQWO'#G_O7pQWO'#G`O7pQWO'#GbO5qQWO'#GeO8aQWO'#GhO9oQWO'#CcO:PQWO'#GuO:XQWO'#G{O:XQWO'#G}O`QYO'#HPO:XQWO'#HRO:XQWO'#HUO:^QWO'#H[O:cQ!LZO'#H`O){QYO'#HbO:nQ!LZO'#HdO:yQ!LZO'#HfO5iQ!LYO'#HhO){QYO'#IsOOOS'#Hn'#HnO;UOSO,59nOOQ!LS,59n,59nO=gQbO'#CgO=qQYO'#HoO>OQWO'#ItO?}QbO'#ItO'dQYO'#ItO@UQWO,59sO@lQ&jO'#D^OAeQWO'#EXOArQWO'#JPOA}QWO'#JOOBVQWO,5:uOB[QWO'#I}OBcQWO'#DuO5vQ#tO'#EVOBqQWO'#EVOB|Q`O'#E}OOQ!LS,5:O,5:OOCUQYO,5:OOESQ!LdO,5:YOEpQWO,5:`OFZQ!LYO'#I|O7VQWO'#I{OFbQWO'#I{OFjQWO,5:tOFoQWO'#I{OF}QYO,5:rOH}QWO'#ESOJXQWO,5:rOKhQWO'#DhOKoQYO'#DmOKyQ&jO,5:{O){QYO,5:{OOQQ'#En'#EnOOQQ'#Ep'#EpO){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}OOQQ'#Et'#EtOLRQYO,5;_OOQ!LS,5;d,5;dOOQ!LS,5;e,5;eONRQWO,5;eOOQ!LS,5;f,5;fO){QYO'#HyONWQ!LYO,5UOOQQ'#If'#IfOOQQ,5>V,5>VOOQQ-E;j-E;jO!+SQ!LdO,5:QOOQ!LQ'#Co'#CoO!+sQ#tO,5O,5>OO!7yQWO,5>OOOQQ,5>Q,5>QO!7yQWO,5>QOOQQ,5>S,5>SO!8OQ`O,5?_OOOS-E;l-E;lOOQ!LS1G/Y1G/YO!8TQbO,5>ZO){QYO,5>ZOOQO-E;m-E;mO!8_QWO,5?`O!8gQbO,5?`O!8nQWO,5?jOOQ!LS1G/_1G/_O!8vQpO'#DQOOQO'#Iv'#IvO){QYO'#IvO!9eQpO'#IvO!:SQpO'#D_O!:eQ&jO'#D_O!SQ&jO'#D_O){QYO,5?kO!>^QWO'#HtO!8nQWO,5?jOOQ!LQ1G0a1G0aO!?jQ&jO'#DxOOQ!LS,5:a,5:aO){QYO,5:aOH}QWO,5:aO!?qQWO,5:aO:^QWO,5:qO!,lQpO,5:qO!,tQ#tO,5:qO5vQ#tO,5:qOOQ!LS1G/j1G/jOOQ!LS1G/z1G/zOOQ!LQ'#ER'#ERO){QYO,5?hO!?|Q!LYO,5?hO!@_Q!LYO,5?hO!@fQWO,5?gO!@nQWO'#HvO!@fQWO,5?gOOQ!LQ1G0`1G0`O7VQWO,5?gOOQ!LS1G0^1G0^O!AYQ!LdO1G0^O!AyQ!LbO,5:nOOQ!LS'#Fm'#FmO!BgQ!LdO'#IlOF}QYO1G0^O!DfQ#tO'#IwO!DpQWO,5:SO!DuQbO'#IxO){QYO'#IxO!EPQWO,5:XOOQ!LS'#DQ'#DQOOQ!LS1G0g1G0gO!EUQWO1G0gO!GgQ!LdO1G0iO!GnQ!LdO1G0iO!JRQ!LdO1G0iO!JYQ!LdO1G0iO!LaQ!LdO1G0iO!LtQ!LdO1G0iO# eQ!LdO1G0iO# lQ!LdO1G0iO#$PQ!LdO1G0iO#$WQ!LdO1G0iO#%{Q!LdO1G0iO#(uQ7^O'#CgO#*pQ7^O1G0yO#,kQ7^O'#IrOOQ!LS1G1P1G1PO#-OQ!LdO,5>eOOQ!LQ-E;w-E;wO#-oQ!LdO1G0iOOQ!LS1G0i1G0iO#/qQ!LdO1G0|O#0bQpO,5;oO#0gQpO,5;pO#0lQpO'#FWO#1QQWO'#FVOOQO'#JU'#JUOOQO'#Hw'#HwO#1VQpO1G1XOOQ!LS1G1X1G1XOOOO1G1b1G1bO#1eQ7^O'#IqO#1oQWO,5;yOLRQYO,5;yOOOO-E;v-E;vOOQ!LS1G1U1G1UOOQ!LS,5;{,5;{O#1tQpO,5;{OOQ!LS,59`,59`OH}QWO'#InOOOS'#Hm'#HmO#1yOSO,59dOOQ!LS,59d,59dO){QYO1G1hO!(eQWO'#H{O#2UQWO,5SQWO'#J_O#>_QWO,5=[OOQQ1G.i1G.iO#>dQ!LYO1G.iO#>oQWO1G.iO!(ZQWO1G.iO5iQ!LYO1G.iO#>tQbO,5?|O#?OQWO,5?|O#?ZQYO,5=cO#?bQWO,5=cO7VQWO,5?|OOQQ1G2{1G2{O`QYO1G2{OOQQ1G3R1G3ROOQQ1G3T1G3TO:XQWO1G3VO#?gQYO1G3XO#CbQYO'#HWOOQQ1G3[1G3[O:^QWO1G3bO#CoQWO1G3bO5iQ!LYO1G3fOOQQ1G3h1G3hOOQ!LQ'#Ft'#FtO5iQ!LYO1G3jO5iQ!LYO1G3lOOOS1G4y1G4yO#CwQ`O,5`,5>`O7VQWO,5>`OOQO-E;r-E;rOOQ!LQ'#EO'#EOO#FbQ!LrO'#EPO!?bQ&jO'#DyOOQO'#Hs'#HsO#F|Q&jO,5:dOOQ!LS,5:d,5:dO#GTQ&jO'#DyO#GfQ&jO'#DyO#GmQ&jO'#EUO#GpQ&jO'#EPO#G}Q&jO'#EPO!?bQ&jO'#EPO#HbQWO1G/{O#HgQ`O1G/{OOQ!LS1G/{1G/{O){QYO1G/{OH}QWO1G/{OOQ!LS1G0]1G0]O:^QWO1G0]O!,lQpO1G0]O!,tQ#tO1G0]O#HnQ!LdO1G5SO){QYO1G5SO#IOQ!LYO1G5SO#IaQWO1G5RO7VQWO,5>bOOQO,5>b,5>bO#IiQWO,5>bOOQO-E;t-E;tO#IaQWO1G5RO#IwQ!LdO,59gO#KvQ!LdO,5g,5>gO$'gQWO,5>gOOQ!LS1G1{1G1{P$'lQWO'#H{POQ!LS-E;y-E;yO$(]Q#tO1G2WO$)OQ#tO1G2YO$)YQ#tO1G2[OOQ!LS1G1t1G1tO$)aQWO'#HzO$)oQWO,5?sO$)oQWO,5?sO$)wQWO,5?sO$*SQWO,5?sOOQO1G1v1G1vO$*bQ#tO1G1uO$*rQWO'#H|O$+SQWO,5?tOH}QWO,5?tO$+[Q`O,5?tOOQ!LS1G1y1G1yO5iQ!LYO,5j,5>jOOQO-E;|-E;|O!-lQ&jO,59iO){QYO,59iO$,gQWO1G1pOJ^QWO1G1wO$,lQ!LdO7+'TOOQ!LS7+'T7+'TOF}QYO7+'TOOQ!LS7+%W7+%WO$-]Q`O'#JZO#HbQWO7+'xO$-gQWO7+'xO$-oQ`O7+'xOOQQ7+'x7+'xOH}QWO7+'xO){QYO7+'xOH}QWO7+'xOOQO1G.v1G.vO$-yQ!LbO'#CgO$.ZQ!LbO,5r,5>rOOQO-El,5>lOOQ!LQ-En,5>nOOQO-E[,5>[OOQO-E;n-E;nOOQO,5>a,5>aOOQO-E;s-E;sO!,lQpO1G/eOOQO1G3z1G3zO:^QWO,5:eOOQO,5:k,5:kO){QYO,5:kO$8tQ!LYO,5:kO$9PQ!LYO,5:kO!,lQpO,5:eOOQO-E;q-E;qOOQ!LS1G0O1G0OO!?bQ&jO,5:eO$9_Q&jO,5:eO$9pQ!LrO,5:kO$:[Q&jO,5:eO!?bQ&jO,5:kOOQO,5:p,5:pO$:cQ&jO,5:kO$:pQ!LYO,5:kOOQ!LS7+%g7+%gO#HbQWO7+%gO#HgQ`O7+%gOOQ!LS7+%w7+%wO:^QWO7+%wO!,lQpO7+%wO$;UQ!LdO7+*nO){QYO7+*nOOQO1G3|1G3|O7VQWO1G3|O$;fQWO7+*mO$;nQ!LdO1G2WO$=pQ!LdO1G2YO$?rQ!LdO1G1uO$AzQ#tO,5>]OOQO-E;o-E;oO$BUQbO,5>^O){QYO,5>^OOQO-E;p-E;pO$B`QWO1G5OO$BhQ7^O1G0^O$DoQ7^O1G0iO$DvQ7^O1G0iO$FwQ7^O1G0iO$GOQ7^O1G0iO$HsQ7^O1G0iO$IWQ7^O1G0iO$KeQ7^O1G0iO$KlQ7^O1G0iO$MmQ7^O1G0iO$MtQ7^O1G0iO% iQ7^O1G0iO% |Q!LdO<eOOOO7+'P7+'POOOS1G4t1G4tOOQ!LS1G4R1G4ROJ^QWO7+'vO%&vQWO,5>fO5qQWO,5>fOOQO-E;x-E;xO%'UQWO1G5_O%'UQWO1G5_O%'^QWO1G5_O%'iQ`O,5>hO%'sQWO,5>hOH}QWO,5>hOOQO-E;z-E;zO%'xQ`O1G5`O%(SQWO1G5`OOQO1G2O1G2OOOQO1G2P1G2PO5iQ!LYO1G2PO$+fQWO1G2PO5iQ!LYO1G2OO%([QWO1G2QOH}QWO1G2QOOQO1G2R1G2RO5iQ!LYO1G2UO!,lQpO1G2OO#4jQWO1G2PO%(aQWO1G2QO%(iQWO1G2POJ^QWO7+*]OOQ!LS1G/T1G/TO%(tQWO1G/TOOQ!LS7+'[7+'[O%(yQ#tO7+'cO%)ZQ!LdO<q,5>qO%+VQWO,5>qO#;kQWO,5>qOOQO-EpOOQO-EQQ`O1G4SO%>[QWO7+*zOOQO7+'k7+'kO5iQ!LYO7+'kOOQO7+'j7+'jO$+fQWO7+'lO%>dQ`O7+'lOOQO7+'p7+'pO5iQ!LYO7+'jO$+fQWO7+'kO%>kQWO7+'lOH}QWO7+'lO#4jQWO7+'kO%>pQ#tO<zQ`O,5>kOOQO-E;}-E;}O#HbQWOANAOOOQQANAOANAOOH}QWOANAOO%?UQ!LbO7+'nOOQQAN=dAN=dO5qQWO1G4]OOQO1G4]1G4]O%?cQWO1G4]O%?hQWO7++RO%?hQWO7++RO5iQ!LYOANAkO%?pQWOANAkOOQQANAkANAkO%?uQWOANAOO%?}Q`OANAOOOQQANAVANAVOOQQANAWANAWO%@XQWO,5>mOOQO-E}AN>}O%C|Q!LdO<wAN>wOOQOAN>qAN>qO%/yQ!LdOAN>wO:^QWOAN>qO){QYOAN>wO!,lQpOAN>qO&&xQ!LYOAN>wO&'TQ7^O<WOz%{O~Ou&OO!S&YO!T&RO!U&RO'X$aO~O]&POj&PO|&SO'd%|O!O'iP!O'tP~P@ZOz'qX}'qX!X'qX!_'qX'n'qX~O!w'qX#S!{X!O'qX~PASO!w&ZOz'sX}'sX~O}&[Oz'rX~Oz&^O~O!w#dO~PASOR&bO!P&_O!k&aO'W$_O~Ob&gO!`$WO'W$_O~Or$mO!`$lO~O!O&hO~P`Or!zOs!zOu!{O!^!xO!`!yO'aQOP!baY!bai!ba}!ba!]!ba!f!ba#W!ba#X!ba#Y!ba#Z!ba#[!ba#]!ba#^!ba#_!ba#a!ba#c!ba#e!ba#f!ba'n!ba'u!ba'v!ba~O^!ba'R!baz!ba!_!ba'c!ba!P!ba$|!ba!X!ba~PC]O!_&iO~O!X!vO!w&kO'n&jO}'pX^'pX'R'pX~O!_'pX~PEuO}&oO!_'oX~O!_&qO~Ou$sO!P$tO#R&rO'W$_O~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'W9VO'aQO'mYO'zaO~O]#pOg#}Oi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'W&vO'a#rO~O#S&xO~O]#pOg#}Oi#qOj#pOk#pOn$OOp$POu#wO!P#xO!Z$UO!`#uO#R$VO#p$SO$Z$QO$]$RO$`$TO'W&vO'a#rO~O'['kP~PJ^O|&|O!_'lP~P){O'd'OO'mYO~OP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!P!bO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'W'^O'aQO'mYO'z:hO~O!`!yO~O}#aO^$Xa'R$Xa!_$Xaz$Xa!P$Xa$|$Xa!X$Xa~O#`'eO~PH}O!X'gO!P'wX#s'wX#v'wX#}'wX~Or'hO~PNyOr'hO!P'wX#s'wX#v'wX#}'wX~O!P'jO#s'nO#v'iO#}'oO~O|'rO~PLRO#v#eO#}'uO~Or$aXu$aX!^$aX'n$aX'u$aX'v$aX~OReX}eX!weX'[eX'[$aX~P!!cOj'wO~O'O'yO'P'xO'Q'{O~Or'}Ou(OO'n#ZO'u(QO'v(SO~O'['|O~P!#lO'[(VO~O]#pOg#}Oi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'a#rO~O|(ZO'W(WO!_'{P~P!$ZO#S(]O~O|(aO'W(^Oz'|P~P!$ZO^(jOi(oOu(gO!S(mO!T(fO!U(fO!`(dO!t(nO$s(iO'X$aO'd(cO~O!O(lO~P!&RO!^!xOr'`Xu'`X'n'`X'u'`X'v'`X}'`X!w'`X~O'['`X#i'`X~P!&}OR(rO!w(qO}'_X'['_X~O}(sO'['^X~O'W(uO~O!`(zO~O'W&vO~O!`(dO~Ou$sO|!qO!P$tO#Q!tO#R!qO'W$_O!_'oP~O!X!vO#S)OO~OP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'aQO'n#ZO'u!|O'v!}O~O^!Ya}!Ya'R!Yaz!Ya!_!Ya'c!Ya!P!Ya$|!Ya!X!Ya~P!)`OR)WO!P&_O!k)VO$|)UO']$bO~O'W$yO'['^P~O!X)ZO!P'ZX^'ZX'R'ZX~O!`$WO']$bO~O!`$WO'W$_O']$bO~O!X!vO#S&xO~O$})gO'W)cO!O(TP~O})hO[(SX~O'd'OO~OY)lO~O[)mO~O!P$jO'W$_O'X$aO[(SP~Ou$sO|)rO!P$tO'W$_Oz'rP~O]&VOj&VO|)sO'd'OO!O'tP~O})tO^(PX'R(PX~O!w)xO']$bO~OR){O!P#xO']$bO~O!P)}O~Or*PO!PSO~O!j*UO~Ob*ZO~O'W(uO!O(RP~Ob$hO~O$}tO'W$yO~P8tOY*aO[*`O~OPTOQTO]cOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#t^O${qO'aQO'mYO'zaO~O!P!bO#p!kO'W9VO~P!0uO[*`O^$ZO'R$ZO~O^*eO#`*gO%P*gO%Q*gO~P){O!`%^O~O%p*lO~O!P*nO~O&Q*qO&R*pOP&OaQ&OaW&Oa]&Oa^&Oaa&Oab&Oag&Oai&Oaj&Oak&Oan&Oap&Oau&Oaw&Oax&Oay&Oa!P&Oa!Z&Oa!`&Oa!c&Oa!d&Oa!e&Oa!f&Oa!g&Oa!j&Oa#`&Oa#p&Oa#t&Oa${&Oa$}&Oa%P&Oa%Q&Oa%T&Oa%V&Oa%Y&Oa%Z&Oa%]&Oa%j&Oa%p&Oa%r&Oa%t&Oa%v&Oa%y&Oa&P&Oa&T&Oa&V&Oa&X&Oa&Z&Oa&]&Oa&|&Oa'W&Oa'a&Oa'm&Oa'z&Oa!O&Oa%w&Oa_&Oa%|&Oa~O'W*tO~O'c*wO~Oz&ca}&ca~P!)`O}!]Oz'ha~Oz'ha~P>WO}&[Oz'ra~O}tX}!VX!OtX!O!VX!XtX!X!VX!`!VX!wtX']!VX~O!X+OO!w*}O}#PX}'jX!O#PX!O'jX!X'jX!`'jX']'jX~O!X+QO!`$WO']$bO}!RX!O!RX~O]%}Oj%}Ou&OO'd(cO~OP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!P!bO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'aQO'mYO'z:hO~O'W9sO~P!:sO}+UO!O'iX~O!O+WO~O!X+OO!w*}O}#PX!O#PX~O}+XO!O'tX~O!O+ZO~O]%}Oj%}Ou&OO'X$aO'd(cO~O!T+[O!U+[O~P!=qOu$sO|+_O!P$tO'W$_Oz&hX}&hX~O^+dO!S+gO!T+cO!U+cO!n+kO!o+iO!p+jO!q+hO!t+lO'X$aO'd(cO'm+aO~O!O+fO~P!>rOR+qO!P&_O!k+pO~O!w+wO}'pa!_'pa^'pa'R'pa~O!X!vO~P!?|O}&oO!_'oa~Ou$sO|+zO!P$tO#Q+|O#R+zO'W$_O}&jX!_&jX~O^!zi}!zi'R!ziz!zi!_!zi'c!zi!P!zi$|!zi!X!zi~P!)`O#S!va}!va!_!va!w!va!P!va^!va'R!vaz!va~P!#lO#S'`XP'`XY'`X^'`Xi'`Xs'`X!]'`X!`'`X!f'`X#W'`X#X'`X#Y'`X#Z'`X#['`X#]'`X#^'`X#_'`X#a'`X#c'`X#e'`X#f'`X'R'`X'a'`X!_'`Xz'`X!P'`X'c'`X$|'`X!X'`X~P!&}O},VO'['kX~P!#lO'[,XO~O},YO!_'lX~P!)`O!_,]O~Oz,^O~OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'aQOY#Vi^#Vii#Vi}#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O#W#Vi~P!EZO#W#OO~P!EZOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO'aQOY#Vi^#Vi}#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~Oi#Vi~P!GuOi#QO~P!GuOP#]Oi#QOr!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO'aQO^#Vi}#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P!JaOY#cO!]#SO#]#SO#^#SO#_#SO~P!JaOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO'aQO^#Vi}#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O'u#Vi~P!MXO'u!|O~P!MXOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO'aQO'u!|O^#Vi}#Vi#e#Vi#f#Vi'R#Vi'n#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O'v#Vi~P# sO'v!}O~P# sOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO'aQO'u!|O'v!}O~O^#Vi}#Vi#f#Vi'R#Vi'n#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~P#$_OPZXYZXiZXrZXsZXuZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'aZX'nZX'uZX'vZX}ZX!OZX~O#iZX~P#&rOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO#e9cO#f9dO'aQO'n#ZO'u!|O'v!}O~O#i,`O~P#(|OP'fXY'fXi'fXr'fXs'fXu'fX!]'fX!^'fX!`'fX!f'fX#W'fX#X'fX#Y'fX#Z'fX#['fX#]'fX#^'fX#a'fX#c'fX#e'fX#f'fX'a'fX'n'fX'u'fX'v'fX}'fX~O!w9hO#k9hO#_'fX#i'fX!O'fX~P#*wO^&ma}&ma'R&ma!_&ma'c&maz&ma!P&ma$|&ma!X&ma~P!)`OP#ViY#Vi^#Vii#Vis#Vi}#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'a#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~P!#lO^#ji}#ji'R#jiz#ji!_#ji'c#ji!P#ji$|#ji!X#ji~P!)`O#v,bO~O#v,cO~O!X'gO!w,dO!P#zX#s#zX#v#zX#}#zX~O|,eO~O!P'jO#s,gO#v'iO#},hO~O}9eO!O'eX~P#(|O!O,iO~O#},kO~O'O'yO'P'xO'Q,nO~O],qOj,qOz,rO~O}cX!XcX!_cX!_$aX'ncX~P!!cO!_,xO~P!#lO},yO!X!vO'n&jO!_'{X~O!_-OO~Oz$aX}$aX!X$hX~P!!cO}-QOz'|X~P!#lO!X-SO~Oz-UO~O|(ZO'W$_O!_'{P~Oi-YO!X!vO!`$WO']$bO'n&jO~O!X)ZO~O!O-`O~P!&RO!T-aO!U-aO'X$aO'd(cO~Ou-cO'd(cO~O!t-dO~O'W$yO}&rX'[&rX~O}(sO'['^a~Or-iOs-iOu-jO'noa'uoa'voa}oa!woa~O'[oa#ioa~P#5{Or'}Ou(OO'n$Ya'u$Ya'v$Ya}$Ya!w$Ya~O'[$Ya#i$Ya~P#6qOr'}Ou(OO'n$[a'u$[a'v$[a}$[a!w$[a~O'[$[a#i$[a~P#7dO]-kO~O#S-lO~O'[$ja}$ja#i$ja!w$ja~P!#lO#S-oO~OR-xO!P&_O!k-wO$|-vO~O'[-yO~O]#pOi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'a#rO~Og-{O'W-zO~P#9ZO!X)ZO!P'Za^'Za'R'Za~O#S.RO~OYZX}cX!OcX~O}.SO!O(TX~O!O.UO~OY.VO~O'W)cO~O!P$jO'W$_O[&zX}&zX~O})hO[(Sa~O!_.[O~P!)`O].^O~OY._O~O[.`O~OR-xO!P&_O!k-wO$|-vO']$bO~O})tO^(Pa'R(Pa~O!w.fO~OR.iO!P#xO~O'd'OO!O(QP~OR.sO!P.oO!k.rO$|.qO']$bO~OY.}O}.{O!O(RX~O!O/OO~O[/QO^$ZO'R$ZO~O]/RO~O#_/TO%n/UO~P0zO!w#dO#_/TO%n/UO~O^/VO~P){O^/XO~O%w/]OP%uiQ%uiW%ui]%ui^%uia%uib%uig%uii%uij%uik%uin%uip%uiu%uiw%uix%uiy%ui!P%ui!Z%ui!`%ui!c%ui!d%ui!e%ui!f%ui!g%ui!j%ui#`%ui#p%ui#t%ui${%ui$}%ui%P%ui%Q%ui%T%ui%V%ui%Y%ui%Z%ui%]%ui%j%ui%p%ui%r%ui%t%ui%v%ui%y%ui&P%ui&T%ui&V%ui&X%ui&Z%ui&]%ui&|%ui'W%ui'a%ui'm%ui'z%ui!O%ui_%ui%|%ui~O_/cO!O/aO%|/bO~P`O!PSO!`/fO~O}#aO'c$Xa~Oz&ci}&ci~P!)`O}!]Oz'hi~O}&[Oz'ri~Oz/jO~O}!Ra!O!Ra~P#(|O]%}Oj%}O|/pO'd(cO}&dX!O&dX~P@ZO}+UO!O'ia~O]&VOj&VO|)sO'd'OO}&iX!O&iX~O}+XO!O'ta~Oz'si}'si~P!)`O^$ZO!X!vO!`$WO!f/{O!w/yO'R$ZO']$bO'n&jO~O!O0OO~P!>rO!T0PO!U0PO'X$aO'd(cO'm+aO~O!S0QO~P#GTO!PSO!S0QO!q0SO!t0TO~P#GTO!S0QO!o0VO!p0VO!q0SO!t0TO~P#GTO!P&_O~O!P&_O~P!#lO}'pi!_'pi^'pi'R'pi~P!)`O!w0`O}'pi!_'pi^'pi'R'pi~O}&oO!_'oi~Ou$sO!P$tO#R0bO'W$_O~O#SoaPoaYoa^oaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa'Roa'aoa!_oazoa!Poa'coa$|oa!Xoa~P#5{O#S$YaP$YaY$Ya^$Yai$Yas$Ya!]$Ya!^$Ya!`$Ya!f$Ya#W$Ya#X$Ya#Y$Ya#Z$Ya#[$Ya#]$Ya#^$Ya#_$Ya#a$Ya#c$Ya#e$Ya#f$Ya'R$Ya'a$Ya!_$Yaz$Ya!P$Ya'c$Ya$|$Ya!X$Ya~P#6qO#S$[aP$[aY$[a^$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a'R$[a'a$[a!_$[az$[a!P$[a'c$[a$|$[a!X$[a~P#7dO#S$jaP$jaY$ja^$jai$jas$ja}$ja!]$ja!^$ja!`$ja!f$ja#W$ja#X$ja#Y$ja#Z$ja#[$ja#]$ja#^$ja#_$ja#a$ja#c$ja#e$ja#f$ja'R$ja'a$ja!_$jaz$ja!P$ja!w$ja'c$ja$|$ja!X$ja~P!#lO^!zq}!zq'R!zqz!zq!_!zq'c!zq!P!zq$|!zq!X!zq~P!)`O}&eX'[&eX~PJ^O},VO'['ka~O|0jO}&fX!_&fX~P){O},YO!_'la~O},YO!_'la~P!)`O#i!ba!O!ba~PC]O#i!Ya}!Ya!O!Ya~P#(|O!P0}O#t^O#{1OO~O!O1SO~O'c1TO~P!#lO^$Uq}$Uq'R$Uqz$Uq!_$Uq'c$Uq!P$Uq$|$Uq!X$Uq~P!)`Oz1UO~O],qOj,qO~Or'}Ou(OO'v(SO'n$ti'u$ti}$ti!w$ti~O'[$ti#i$ti~P$'tOr'}Ou(OO'n$vi'u$vi'v$vi}$vi!w$vi~O'[$vi#i$vi~P$(gO#i1VO~P!#lO|1XO'W$_O}&nX!_&nX~O},yO!_'{a~O},yO!X!vO!_'{a~O},yO!X!vO'n&jO!_'{a~O'[$ci}$ci#i$ci!w$ci~P!#lO|1`O'W(^Oz&pX}&pX~P!$ZO}-QOz'|a~O}-QOz'|a~P!#lO!X!vO~O!X!vO#_1jO~Oi1nO!X!vO'n&jO~O}'_i'['_i~P!#lO!w1qO}'_i'['_i~P!#lO!_1tO~O^$Vq}$Vq'R$Vqz$Vq!_$Vq'c$Vq!P$Vq$|$Vq!X$Vq~P!)`O}1xO!P'}X~P!#lO!P&_O$|1{O~O!P&_O$|1{O~P!#lO!P$aX$qZX^$aX'R$aX~P!!cO$q2POrfXufX!PfX'nfX'ufX'vfX^fX'RfX~O$q2PO~O$}2WO'W)cO}&yX!O&yX~O}.SO!O(Ta~OY2[O~O[2]O~O]2`O~OR2bO!P&_O!k2aO$|1{O~O^$ZO'R$ZO~P!#lO!P#xO~P!#lO}2gO!w2iO!O(QX~O!O2jO~Ou(gO!S2sO!T2lO!U2lO!n2rO!o2qO!p2qO!t2pO'X$aO'd(cO'm+aO~O!O2oO~P$0uOR2zO!P.oO!k2yO$|2xO~OR2zO!P.oO!k2yO$|2xO']$bO~O'W(uO}&xX!O&xX~O}.{O!O(Ra~O'd3TO~O]3VO~O[3XO~O!_3[O~P){O^3^O~O^3^O~P){O#_3`O%n3aO~PEuO_/cO!O3eO%|/bO~P`O!X3gO~O&R3hOP&OqQ&OqW&Oq]&Oq^&Oqa&Oqb&Oqg&Oqi&Oqj&Oqk&Oqn&Oqp&Oqu&Oqw&Oqx&Oqy&Oq!P&Oq!Z&Oq!`&Oq!c&Oq!d&Oq!e&Oq!f&Oq!g&Oq!j&Oq#`&Oq#p&Oq#t&Oq${&Oq$}&Oq%P&Oq%Q&Oq%T&Oq%V&Oq%Y&Oq%Z&Oq%]&Oq%j&Oq%p&Oq%r&Oq%t&Oq%v&Oq%y&Oq&P&Oq&T&Oq&V&Oq&X&Oq&Z&Oq&]&Oq&|&Oq'W&Oq'a&Oq'm&Oq'z&Oq!O&Oq%w&Oq_&Oq%|&Oq~O}#Pi!O#Pi~P#(|O!w3jO}#Pi!O#Pi~O}!Ri!O!Ri~P#(|O^$ZO!w3qO'R$ZO~O^$ZO!X!vO!w3qO'R$ZO~O!T3uO!U3uO'X$aO'd(cO'm+aO~O^$ZO!X!vO!`$WO!f3vO!w3qO'R$ZO']$bO'n&jO~O!S3wO~P$9_O!S3wO!q3zO!t3{O~P$9_O^$ZO!X!vO!f3vO!w3qO'R$ZO'n&jO~O}'pq!_'pq^'pq'R'pq~P!)`O}&oO!_'oq~O#S$tiP$tiY$ti^$tii$tis$ti!]$ti!^$ti!`$ti!f$ti#W$ti#X$ti#Y$ti#Z$ti#[$ti#]$ti#^$ti#_$ti#a$ti#c$ti#e$ti#f$ti'R$ti'a$ti!_$tiz$ti!P$ti'c$ti$|$ti!X$ti~P$'tO#S$viP$viY$vi^$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi'R$vi'a$vi!_$viz$vi!P$vi'c$vi$|$vi!X$vi~P$(gO#S$ciP$ciY$ci^$cii$cis$ci}$ci!]$ci!^$ci!`$ci!f$ci#W$ci#X$ci#Y$ci#Z$ci#[$ci#]$ci#^$ci#_$ci#a$ci#c$ci#e$ci#f$ci'R$ci'a$ci!_$ciz$ci!P$ci!w$ci'c$ci$|$ci!X$ci~P!#lO}&ea'[&ea~P!#lO}&fa!_&fa~P!)`O},YO!_'li~O#i!zi}!zi!O!zi~P#(|OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'aQOY#Vii#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~O#W#Vi~P$BuO#W9YO~P$BuOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO'aQOY#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~Oi#Vi~P$D}Oi9[O~P$D}OP#]Oi9[Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O'aQO#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P$GVOY9gO!]9^O#]9^O#^9^O#_9^O~P$GVOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O'aQO#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'v#Vi}#Vi!O#Vi~O'u#Vi~P$IkO'u!|O~P$IkOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO'aQO'u!|O#e#Vi#f#Vi#i#Vi'n#Vi}#Vi!O#Vi~O'v#Vi~P$KsO'v!}O~P$KsOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO#e9cO'aQO'u!|O'v!}O~O#f#Vi#i#Vi'n#Vi}#Vi!O#Vi~P$M{O^#gy}#gy'R#gyz#gy!_#gy'c#gy!P#gy$|#gy!X#gy~P!)`OP#ViY#Vii#Vis#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'a#Vi}#Vi!O#Vi~P!#lO!^!xOP'`XY'`Xi'`Xr'`Xs'`Xu'`X!]'`X!`'`X!f'`X#W'`X#X'`X#Y'`X#Z'`X#['`X#]'`X#^'`X#_'`X#a'`X#c'`X#e'`X#f'`X#i'`X'a'`X'n'`X'u'`X'v'`X}'`X!O'`X~O#i#ji}#ji!O#ji~P#(|O!O4]O~O}&ma!O&ma~P#(|O!X!vO'n&jO}&na!_&na~O},yO!_'{i~O},yO!X!vO!_'{i~Oz&pa}&pa~P!#lO!X4dO~O}-QOz'|i~P!#lO}-QOz'|i~Oz4jO~O!X!vO#_4pO~Oi4qO!X!vO'n&jO~Oz4sO~O'[$eq}$eq#i$eq!w$eq~P!#lO^$Vy}$Vy'R$Vyz$Vy!_$Vy'c$Vy!P$Vy$|$Vy!X$Vy~P!)`O}1xO!P'}a~O!P&_O$|4xO~O!P&_O$|4xO~P!#lO^!zy}!zy'R!zyz!zy!_!zy'c!zy!P!zy$|!zy!X!zy~P!)`OY4{O~O}.SO!O(Ti~O]5QO~O[5RO~O'd'OO}&uX!O&uX~O}2gO!O(Qa~O!O5`O~P$0uOu-cO'd(cO'm+aO~O!S5cO!T5bO!U5bO!t0TO'X$aO'd(cO'm+aO~O!o5dO!p5dO~P%,eO!T5bO!U5bO'X$aO'd(cO'm+aO~O!P.oO~O!P.oO$|5fO~O!P.oO$|5fO~P!#lOR5kO!P.oO!k5jO$|5fO~OY5pO}&xa!O&xa~O}.{O!O(Ri~O]5sO~O!_5tO~O!_5uO~O!_5vO~O!_5vO~P){O^5xO~O!X5{O~O!_5}O~O}'si!O'si~P#(|O^$ZO'R$ZO~P!)`O^$ZO!w6SO'R$ZO~O^$ZO!X!vO!w6SO'R$ZO~O!T6XO!U6XO'X$aO'd(cO'm+aO~O^$ZO!X!vO!f6YO!w6SO'R$ZO'n&jO~O!`$WO']$bO~P%1PO!S6ZO~P%0nO}'py!_'py^'py'R'py~P!)`O#S$eqP$eqY$eq^$eqi$eqs$eq}$eq!]$eq!^$eq!`$eq!f$eq#W$eq#X$eq#Y$eq#Z$eq#[$eq#]$eq#^$eq#_$eq#a$eq#c$eq#e$eq#f$eq'R$eq'a$eq!_$eqz$eq!P$eq!w$eq'c$eq$|$eq!X$eq~P!#lO}&fi!_&fi~P!)`O#i!zq}!zq!O!zq~P#(|Or-iOs-iOu-jOPoaYoaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa#ioa'aoa'noa'uoa'voa}oa!Ooa~Or'}Ou(OOP$YaY$Yai$Yas$Ya!]$Ya!^$Ya!`$Ya!f$Ya#W$Ya#X$Ya#Y$Ya#Z$Ya#[$Ya#]$Ya#^$Ya#_$Ya#a$Ya#c$Ya#e$Ya#f$Ya#i$Ya'a$Ya'n$Ya'u$Ya'v$Ya}$Ya!O$Ya~Or'}Ou(OOP$[aY$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a#i$[a'a$[a'n$[a'u$[a'v$[a}$[a!O$[a~OP$jaY$jai$jas$ja!]$ja!^$ja!`$ja!f$ja#W$ja#X$ja#Y$ja#Z$ja#[$ja#]$ja#^$ja#_$ja#a$ja#c$ja#e$ja#f$ja#i$ja'a$ja}$ja!O$ja~P!#lO#i$Uq}$Uq!O$Uq~P#(|O#i$Vq}$Vq!O$Vq~P#(|O!O6eO~O'[$xy}$xy#i$xy!w$xy~P!#lO!X!vO}&ni!_&ni~O!X!vO'n&jO}&ni!_&ni~O},yO!_'{q~Oz&pi}&pi~P!#lO}-QOz'|q~Oz6lO~P!#lOz6lO~O}'_y'['_y~P!#lO}&sa!P&sa~P!#lO!P$pq^$pq'R$pq~P!#lOY6tO~O}.SO!O(Tq~O]6wO~O!P&_O$|6xO~O!P&_O$|6xO~P!#lO!w6yO}&ua!O&ua~O}2gO!O(Qi~P#(|O!T7PO!U7PO'X$aO'd(cO'm+aO~O!S7RO!t3{O~P%@nO!P.oO$|7UO~O!P.oO$|7UO~P!#lO'd7[O~O}.{O!O(Rq~O!_7_O~O!_7_O~P){O!_7aO~O!_7bO~O}#Py!O#Py~P#(|O^$ZO!w7hO'R$ZO~O^$ZO!X!vO!w7hO'R$ZO~O!T7kO!U7kO'X$aO'd(cO'm+aO~O^$ZO!X!vO!f7lO!w7hO'R$ZO'n&jO~O#S$xyP$xyY$xy^$xyi$xys$xy}$xy!]$xy!^$xy!`$xy!f$xy#W$xy#X$xy#Y$xy#Z$xy#[$xy#]$xy#^$xy#_$xy#a$xy#c$xy#e$xy#f$xy'R$xy'a$xy!_$xyz$xy!P$xy!w$xy'c$xy$|$xy!X$xy~P!#lO#i#gy}#gy!O#gy~P#(|OP$ciY$cii$cis$ci!]$ci!^$ci!`$ci!f$ci#W$ci#X$ci#Y$ci#Z$ci#[$ci#]$ci#^$ci#_$ci#a$ci#c$ci#e$ci#f$ci#i$ci'a$ci}$ci!O$ci~P!#lOr'}Ou(OO'v(SOP$tiY$tii$tis$ti!]$ti!^$ti!`$ti!f$ti#W$ti#X$ti#Y$ti#Z$ti#[$ti#]$ti#^$ti#_$ti#a$ti#c$ti#e$ti#f$ti#i$ti'a$ti'n$ti'u$ti}$ti!O$ti~Or'}Ou(OOP$viY$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi#i$vi'a$vi'n$vi'u$vi'v$vi}$vi!O$vi~O#i$Vy}$Vy!O$Vy~P#(|O#i!zy}!zy!O!zy~P#(|O!X!vO}&nq!_&nq~O},yO!_'{y~Oz&pq}&pq~P!#lOz7rO~P!#lO}.SO!O(Ty~O}2gO!O(Qq~O!T8OO!U8OO'X$aO'd(cO'm+aO~O!P.oO$|8RO~O!P.oO$|8RO~P!#lO!_8UO~O&R8VOP&O!ZQ&O!ZW&O!Z]&O!Z^&O!Za&O!Zb&O!Zg&O!Zi&O!Zj&O!Zk&O!Zn&O!Zp&O!Zu&O!Zw&O!Zx&O!Zy&O!Z!P&O!Z!Z&O!Z!`&O!Z!c&O!Z!d&O!Z!e&O!Z!f&O!Z!g&O!Z!j&O!Z#`&O!Z#p&O!Z#t&O!Z${&O!Z$}&O!Z%P&O!Z%Q&O!Z%T&O!Z%V&O!Z%Y&O!Z%Z&O!Z%]&O!Z%j&O!Z%p&O!Z%r&O!Z%t&O!Z%v&O!Z%y&O!Z&P&O!Z&T&O!Z&V&O!Z&X&O!Z&Z&O!Z&]&O!Z&|&O!Z'W&O!Z'a&O!Z'm&O!Z'z&O!Z!O&O!Z%w&O!Z_&O!Z%|&O!Z~O^$ZO!w8[O'R$ZO~O^$ZO!X!vO!w8[O'R$ZO~OP$eqY$eqi$eqs$eq!]$eq!^$eq!`$eq!f$eq#W$eq#X$eq#Y$eq#Z$eq#[$eq#]$eq#^$eq#_$eq#a$eq#c$eq#e$eq#f$eq#i$eq'a$eq}$eq!O$eq~P!#lO}&uq!O&uq~P#(|O^$ZO!w8qO'R$ZO~OP$xyY$xyi$xys$xy!]$xy!^$xy!`$xy!f$xy#W$xy#X$xy#Y$xy#Z$xy#[$xy#]$xy#^$xy#_$xy#a$xy#c$xy#e$xy#f$xy#i$xy'a$xy}$xy!O$xy~P!#lO'c'eX~P.jO'cZXzZX!_ZX%nZX!PZX$|ZX!XZX~P$zO!XcX!_ZX!_cX'ncX~P;aOP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!PSO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'W'^O'aQO'mYO'z:hO~O}9eO!O$Xa~O]#pOg#}Oi#qOj#pOk#pOn$OOp9jOu#wO!P#xO!Z:mO!`#uO#R9pO#p$SO$Z9lO$]9nO$`$TO'W&vO'a#rO~O#`'eO~P&+}O!OZX!OcX~P;aO#S9XO~O!X!vO#S9XO~O!w9hO~O#_9^O~O!w9qO}'sX!O'sX~O!w9hO}'qX!O'qX~O#S9rO~O'[9tO~P!#lO#S9yO~O#S9zO~O!X!vO#S9{O~O!X!vO#S9rO~O#i9|O~P#(|O#S9}O~O#S:OO~O#S:PO~O#S:QO~O#i:RO~P!#lO#i:SO~P!#lO#t~!^!n!p!q#Q#R'z$Z$]$`$q${$|$}%T%V%Y%Z%]%_~TS#t'z#Xy'T'U#v'T'W'd~", +- goto: "#Dk(XPPPPPPP(YP(jP*^PPPP-sPP.Y3j5^5qP5qPPP5q5qP5qP7_PP7dP7xPPPPwPPP>}AYP`!>h!>l!>lP!;jP!>p!>pP!AcP!AgRQWO'#IvO@QQbO'#IvO'dQYO'#IvO@XQWO,59sO@oQ&jO'#D^OAhQWO'#EXOAuQWO'#JROBQQWO'#JQOBYQWO,5:uOB_QWO'#JPOBfQWO'#DuO5yQ#tO'#EVOBtQWO'#EVOCPQ`O'#E}OOQ!LS,5:O,5:OOCXQYO,5:OOEVQ!LdO,5:YOEsQWO,5:`OF^Q!LYO'#JOO7YQWO'#I}OFeQWO'#I}OFmQWO,5:tOFrQWO'#I}OGQQYO,5:rOIQQWO'#ESOJ[QWO,5:rOKkQWO'#DhOKrQYO'#DmOK|Q&jO,5:{O){QYO,5:{OOQQ'#En'#EnOOQQ'#Ep'#EpO){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}OOQQ'#Et'#EtOLUQYO,5;_OOQ!LS,5;d,5;dOOQ!LS,5;e,5;eONUQWO,5;eOOQ!LS,5;f,5;fO){QYO'#H{ONZQ!LYO,5WOOQQ'#Ih'#IhOOQQ,5>X,5>XOOQQ-E;l-E;lO!+zQ!LdO,5:QOOQ!LQ'#Co'#CoO!,kQ#tO,5OOOQQ,5>Q,5>QO!8qQWO,5>QOOQQ,5>S,5>SO!8qQWO,5>SOOQQ,5>U,5>UO!8vQ`O,5?aOOOS-E;n-E;nOOQ!LS1G/Y1G/YO!8{QbO,5>]O){QYO,5>]OOQO-E;o-E;oO!9VQWO,5?bO!9_QbO,5?bO!9fQWO,5?lOOQ!LS1G/_1G/_O!9nQpO'#DQOOQO'#Ix'#IxO){QYO'#IxO!:]QpO'#IxO!:zQpO'#D_O!;]Q&jO'#D_O!=hQYO'#D_O!=oQWO'#IwO!=wQWO,59xO!=|QWO'#E]O!>[QWO'#JSO!>dQWO,5:vO!>zQ&jO'#D_O){QYO,5?mO!?UQWO'#HvO!9fQWO,5?lOOQ!LQ1G0a1G0aO!@bQ&jO'#DxOOQ!LS,5:a,5:aO){QYO,5:aOIQQWO,5:aO!@iQWO,5:aO:aQWO,5:qO!-dQpO,5:qO!-lQ#tO,5:qO5yQ#tO,5:qOOQ!LS1G/j1G/jOOQ!LS1G/z1G/zOOQ!LQ'#ER'#ERO){QYO,5?jO!@tQ!LYO,5?jO!AVQ!LYO,5?jO!A^QWO,5?iO!AfQWO'#HxO!A^QWO,5?iOOQ!LQ1G0`1G0`O7YQWO,5?iOOQ!LS1G0^1G0^O!BQQ!LdO1G0^O!BqQ!LbO,5:nOOQ!LS'#Fo'#FoO!C_Q!LdO'#InOGQQYO1G0^O!E^Q#tO'#IyO!EhQWO,5:SO!EmQbO'#IzO){QYO'#IzO!EwQWO,5:XOOQ!LS'#DQ'#DQOOQ!LS1G0g1G0gO!E|QWO1G0gO!H_Q!LdO1G0iO!HfQ!LdO1G0iO!JyQ!LdO1G0iO!KQQ!LdO1G0iO!MXQ!LdO1G0iO!MlQ!LdO1G0iO#!]Q!LdO1G0iO#!dQ!LdO1G0iO#$wQ!LdO1G0iO#%OQ!LdO1G0iO#&sQ!LdO1G0iO#)mQ7^O'#CgO#+hQ7^O1G0yO#-cQ7^O'#ItOOQ!LS1G1P1G1PO#-vQ!LdO,5>gOOQ!LQ-E;y-E;yO#.gQ!LdO1G0iOOQ!LS1G0i1G0iO#0iQ!LdO1G0|O#1YQpO,5;qO#1bQpO,5;rO#1jQpO'#FYO#2RQWO'#FXOOQO'#JW'#JWOOQO'#Hy'#HyO#2WQpO1G1XOOQ!LS1G1X1G1XOOOO1G1d1G1dO#2iQ7^O'#IsO#2sQWO,5;{OLUQYO,5;{OOOO-E;x-E;xOOQ!LS1G1U1G1UOOQ!LS,5;},5;}O#2xQpO,5;}OOQ!LS,59`,59`OIQQWO'#IpOOOS'#Ho'#HoO#2}OSO,59dOOQ!LS,59d,59dO){QYO1G1jO!)]QWO'#H}O#3YQWO,5TQ!LYO,5?yOOQQ1G2d1G2dO!0eQWO1G2jOIQQWO1G2gO#>`QWO1G2gOOQQ1G2h1G2hOIQQWO1G2hO#>eQWO1G2hO#>mQ&jO'#GfOOQQ1G2j1G2jO!'iQ&jO'#IUO!0jQ`O1G2mOOQQ1G2m1G2mOOQQ,5=W,5=WO#>uQ#tO,5=YO5tQWO,5=YO#5sQWO,5=]O5bQWO,5=]O!-dQpO,5=]O!-lQ#tO,5=]O5yQ#tO,5=]O#?WQWO'#JaO#?cQWO,5=^OOQQ1G.i1G.iO#?hQ!LYO1G.iO#?sQWO1G.iO!)RQWO1G.iO5lQ!LYO1G.iO#?xQbO,5@OO#@SQWO,5@OO#@_QYO,5=eO#@fQWO,5=eO7YQWO,5@OOOQQ1G2}1G2}O`QYO1G2}OOQQ1G3T1G3TOOQQ1G3V1G3VO:[QWO1G3XO#@kQYO1G3ZO#DfQYO'#HYOOQQ1G3^1G3^O:aQWO1G3dO#DsQWO1G3dO5lQ!LYO1G3hOOQQ1G3j1G3jOOQ!LQ'#Fv'#FvO5lQ!LYO1G3lO5lQ!LYO1G3nOOOS1G4{1G4{O#D{Q`O,5b,5>bO7YQWO,5>bOOQO-E;t-E;tOOQ!LQ'#EO'#EOO#GfQ!LrO'#EPO!@YQ&jO'#DyOOQO'#Hu'#HuO#HQQ&jO,5:dOOQ!LS,5:d,5:dO#HXQ&jO'#DyO#HjQ&jO'#DyO#HqQ&jO'#EUO#HtQ&jO'#EPO#IRQ&jO'#EPO!@YQ&jO'#EPO#IfQWO1G/{O#IkQ`O1G/{OOQ!LS1G/{1G/{O){QYO1G/{OIQQWO1G/{OOQ!LS1G0]1G0]O:aQWO1G0]O!-dQpO1G0]O!-lQ#tO1G0]O#IrQ!LdO1G5UO){QYO1G5UO#JSQ!LYO1G5UO#JeQWO1G5TO7YQWO,5>dOOQO,5>d,5>dO#JmQWO,5>dOOQO-E;v-E;vO#JeQWO1G5TO#J{Q!LdO,59gO#LzQ!LdO,5i,5>iO$(kQWO,5>iOOQ!LS1G1}1G1}P$(pQWO'#H}POQ!LS-E;{-E;{O$)aQ#tO1G2YO$*SQ#tO1G2[O$*^Q#tO1G2^OOQ!LS1G1v1G1vO$*eQWO'#H|O$*sQWO,5?uO$*sQWO,5?uO$*{QWO,5?uO$+WQWO,5?uOOQO1G1x1G1xO$+fQ#tO1G1wO$+vQWO'#IOO$,WQWO,5?vOIQQWO,5?vO$,`Q`O,5?vOOQ!LS1G1{1G1{O5lQ!LYO,5l,5>lOOQO-Et,5>tOOQO-En,5>nOOQ!LQ-Ep,5>pOOQO-E^,5>^OOQO-E;p-E;pOOQO,5>c,5>cOOQO-E;u-E;uO!-dQpO1G/eOOQO1G3|1G3|O:aQWO,5:eOOQO,5:k,5:kO){QYO,5:kO$9xQ!LYO,5:kO$:TQ!LYO,5:kO!-dQpO,5:eOOQO-E;s-E;sOOQ!LS1G0O1G0OO!@YQ&jO,5:eO$:cQ&jO,5:eO$:tQ!LrO,5:kO$;`Q&jO,5:eO!@YQ&jO,5:kOOQO,5:p,5:pO$;gQ&jO,5:kO$;tQ!LYO,5:kOOQ!LS7+%g7+%gO#IfQWO7+%gO#IkQ`O7+%gOOQ!LS7+%w7+%wO:aQWO7+%wO!-dQpO7+%wO$tQ!LdO1G2[O$@vQ!LdO1G1wO$COQ#tO,5>_OOQO-E;q-E;qO$CYQbO,5>`O){QYO,5>`OOQO-E;r-E;rO$CdQWO1G5QO$ClQ7^O1G0^O$EsQ7^O1G0iO$EzQ7^O1G0iO$G{Q7^O1G0iO$HSQ7^O1G0iO$IwQ7^O1G0iO$J[Q7^O1G0iO$LiQ7^O1G0iO$LpQ7^O1G0iO$NqQ7^O1G0iO$NxQ7^O1G0iO%!mQ7^O1G0iO%#QQ!LdO<gOOOO7+'R7+'ROOOS1G4v1G4vOOQ!LS1G4T1G4TOJaQWO7+'xO%'zQWO,5>hO5tQWO,5>hOOQO-E;z-E;zO%(YQWO1G5aO%(YQWO1G5aO%(bQWO1G5aO%(mQ`O,5>jO%(wQWO,5>jOIQQWO,5>jOOQO-E;|-E;|O%(|Q`O1G5bO%)WQWO1G5bOOQO1G2Q1G2QOOQO1G2R1G2RO5lQ!LYO1G2RO$,jQWO1G2RO5lQ!LYO1G2QO%)`QWO1G2SOIQQWO1G2SOOQO1G2T1G2TO5lQ!LYO1G2WO!-dQpO1G2QO#5nQWO1G2RO%)eQWO1G2SO%)mQWO1G2ROJaQWO7+*_OOQ!LS1G/T1G/TO%)xQWO1G/TOOQ!LS7+'^7+'^O%)}Q#tO7+'eO%*_Q!LdO<s,5>sO%,ZQWO,5>sO#sOOQO-ErOOQO-ERQ#tO<cQWO1G4SO%>nQWO1G4SO%>|QWO7+*{O%>|QWO7+*{OIQQWO1G4UO%?UQ`O1G4UO%?`QWO7+*|OOQO7+'m7+'mO5lQ!LYO7+'mOOQO7+'l7+'lO$,jQWO7+'nO%?hQ`O7+'nOOQO7+'r7+'rO5lQ!LYO7+'lO$,jQWO7+'mO%?oQWO7+'nOIQQWO7+'nO#5nQWO7+'mO%?tQ#tO<mOOQO-EoOOQO-E}AN>}O%EQQ!LdO<wAN>wOOQOAN>qAN>qO%0}Q!LdOAN>wO:aQWOAN>qO){QYOAN>wO!-dQpOAN>qO&'|Q!LYOAN>wO&(XQ7^O<ZOz%}O~Ou&QO!S&[O!T&TO!U&TO'Z$cO~O]&ROj&RO|&UO'f&OO!O'kP!O'vP~P@^Oz'sX}'sX!X'sX!_'sX'p'sX~O!w'sX#S!{X!O'sX~PAVO!w&]Oz'uX}'uX~O}&^Oz'tX~Oz&`O~O!w#dO~PAVOR&dO!P&aO!k&cO'Y$aO~Ob&iO!`$YO'Y$aO~Or$oO!`$nO~O!O&jO~P`Or!zOs!zOu!{O!^!xO!`!yO'cQOP!baY!bai!ba}!ba!]!ba!f!ba#W!ba#X!ba#Y!ba#Z!ba#[!ba#]!ba#^!ba#_!ba#a!ba#c!ba#e!ba#f!ba'p!ba'w!ba'x!ba~O^!ba'T!baz!ba!_!ba'e!ba!P!ba%O!ba!X!ba~PC`O!_&kO~O!X!vO!w&mO'p&lO}'rX^'rX'T'rX~O!_'rX~PExO}&qO!_'qX~O!_&sO~Ou$uO!P$vO#R&tO'Y$aO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'Y9XO'cQO'oYO'|aO~O]#rOg$POi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'Y&xO'c#tO~O#S&zO~O]#rOg$POi#sOj#rOk#rOn$QOp$ROu#yO!P#zO!Z$WO!`#wO#R$XO#p$UO$]$SO$_$TO$b$VO'Y&xO'c#tO~O'^'mP~PJaO|'OO!_'nP~P){O'f'QO'oYO~OP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!P!bO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'Y'`O'cQO'oYO'|:jO~O!`!yO~O}#aO^$Za'T$Za!_$Zaz$Za!P$Za%O$Za!X$Za~O#`'gO~PIQOr'jO!X'iO!P#wX#s#wX#v#wX#x#wX$P#wX~O!X'iO!P'yX#s'yX#v'yX#x'yX$P'yX~Or'jO~P! eOr'jO!P'yX#s'yX#v'yX#x'yX$P'yX~O!P'lO#s'pO#v'kO#x'kO$P'qO~O|'tO~PLUO#v#fO#x#eO$P'wO~Or$cXu$cX!^$cX'p$cX'w$cX'x$cX~OReX}eX!weX'^eX'^$cX~P!#ZOj'yO~O'Q'{O'R'zO'S'}O~Or(POu(QO'p#ZO'w(SO'x(UO~O'^(OO~P!$dO'^(XO~O]#rOg$POi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'c#tO~O|(]O'Y(YO!_'}P~P!%RO#S(_O~O|(cO'Y(`Oz(OP~P!%RO^(lOi(qOu(iO!S(oO!T(hO!U(hO!`(fO!t(pO$u(kO'Z$cO'f(eO~O!O(nO~P!&yO!^!xOr'bXu'bX'p'bX'w'bX'x'bX}'bX!w'bX~O'^'bX#i'bX~P!'uOR(tO!w(sO}'aX'^'aX~O}(uO'^'`X~O'Y(wO~O!`(|O~O'Y&xO~O!`(fO~Ou$uO|!qO!P$vO#Q!tO#R!qO'Y$aO!_'qP~O!X!vO#S)QO~OP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'cQO'p#ZO'w!|O'x!}O~O^!Ya}!Ya'T!Yaz!Ya!_!Ya'e!Ya!P!Ya%O!Ya!X!Ya~P!*WOR)YO!P&aO!k)XO%O)WO'_$dO~O'Y${O'^'`P~O!X)]O!P']X^']X'T']X~O!`$YO'_$dO~O!`$YO'Y$aO'_$dO~O!X!vO#S&zO~O%P)iO'Y)eO!O(VP~O})jO[(UX~O'f'QO~OY)nO~O[)oO~O!P$lO'Y$aO'Z$cO[(UP~Ou$uO|)tO!P$vO'Y$aOz'tP~O]&XOj&XO|)uO'f'QO!O'vP~O})vO^(RX'T(RX~O!w)zO'_$dO~OR)}O!P#zO'_$dO~O!P*PO~Or*RO!PSO~O!j*WO~Ob*]O~O'Y(wO!O(TP~Ob$jO~O%PtO'Y${O~P8wOY*cO[*bO~OPTOQTO]cOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#t^O$}qO'cQO'oYO'|aO~O!P!bO#p!kO'Y9XO~P!1mO[*bO^$]O'T$]O~O^*gO#`*iO%R*iO%S*iO~P){O!`%`O~O%r*nO~O!P*pO~O&S*sO&T*rOP&QaQ&QaW&Qa]&Qa^&Qaa&Qab&Qag&Qai&Qaj&Qak&Qan&Qap&Qau&Qaw&Qax&Qay&Qa!P&Qa!Z&Qa!`&Qa!c&Qa!d&Qa!e&Qa!f&Qa!g&Qa!j&Qa#`&Qa#p&Qa#t&Qa$}&Qa%P&Qa%R&Qa%S&Qa%V&Qa%X&Qa%[&Qa%]&Qa%_&Qa%l&Qa%r&Qa%t&Qa%v&Qa%x&Qa%{&Qa&R&Qa&V&Qa&X&Qa&Z&Qa&]&Qa&_&Qa'O&Qa'Y&Qa'c&Qa'o&Qa'|&Qa!O&Qa%y&Qa_&Qa&O&Qa~O'Y*vO~O'e*yO~Oz&ea}&ea~P!*WO}!]Oz'ja~Oz'ja~P>ZO}&^Oz'ta~O}tX}!VX!OtX!O!VX!XtX!X!VX!`!VX!wtX'_!VX~O!X+QO!w+PO}#PX}'lX!O#PX!O'lX!X'lX!`'lX'_'lX~O!X+SO!`$YO'_$dO}!RX!O!RX~O]&POj&POu&QO'f(eO~OP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!P!bO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'cQO'oYO'|:jO~O'Y9uO~P!;kO}+WO!O'kX~O!O+YO~O!X+QO!w+PO}#PX!O#PX~O}+ZO!O'vX~O!O+]O~O]&POj&POu&QO'Z$cO'f(eO~O!T+^O!U+^O~P!>iOu$uO|+aO!P$vO'Y$aOz&jX}&jX~O^+fO!S+iO!T+eO!U+eO!n+mO!o+kO!p+lO!q+jO!t+nO'Z$cO'f(eO'o+cO~O!O+hO~P!?jOR+sO!P&aO!k+rO~O!w+yO}'ra!_'ra^'ra'T'ra~O!X!vO~P!@tO}&qO!_'qa~Ou$uO|+|O!P$vO#Q,OO#R+|O'Y$aO}&lX!_&lX~O^!zi}!zi'T!ziz!zi!_!zi'e!zi!P!zi%O!zi!X!zi~P!*WO#S!va}!va!_!va!w!va!P!va^!va'T!vaz!va~P!$dO#S'bXP'bXY'bX^'bXi'bXs'bX!]'bX!`'bX!f'bX#W'bX#X'bX#Y'bX#Z'bX#['bX#]'bX#^'bX#_'bX#a'bX#c'bX#e'bX#f'bX'T'bX'c'bX!_'bXz'bX!P'bX'e'bX%O'bX!X'bX~P!'uO},XO'^'mX~P!$dO'^,ZO~O},[O!_'nX~P!*WO!_,_O~Oz,`O~OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'cQOY#Vi^#Vii#Vi}#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O#W#Vi~P!FRO#W#OO~P!FROP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO'cQOY#Vi^#Vi}#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~Oi#Vi~P!HmOi#QO~P!HmOP#]Oi#QOr!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO'cQO^#Vi}#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P!KXOY#cO!]#SO#]#SO#^#SO#_#SO~P!KXOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO'cQO^#Vi}#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O'w#Vi~P!NPO'w!|O~P!NPOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO'cQO'w!|O^#Vi}#Vi#e#Vi#f#Vi'T#Vi'p#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O'x#Vi~P#!kO'x!}O~P#!kOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO'cQO'w!|O'x!}O~O^#Vi}#Vi#f#Vi'T#Vi'p#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~P#%VOPZXYZXiZXrZXsZXuZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'cZX'pZX'wZX'xZX}ZX!OZX~O#iZX~P#'jOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO#e9eO#f9fO'cQO'p#ZO'w!|O'x!}O~O#i,bO~P#)tOP'hXY'hXi'hXr'hXs'hXu'hX!]'hX!^'hX!`'hX!f'hX#W'hX#X'hX#Y'hX#Z'hX#['hX#]'hX#^'hX#a'hX#c'hX#e'hX#f'hX'c'hX'p'hX'w'hX'x'hX}'hX~O!w9jO#k9jO#_'hX#i'hX!O'hX~P#+oO^&oa}&oa'T&oa!_&oa'e&oaz&oa!P&oa%O&oa!X&oa~P!*WOP#ViY#Vi^#Vii#Vis#Vi}#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'c#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~P!$dO^#ji}#ji'T#jiz#ji!_#ji'e#ji!P#ji%O#ji!X#ji~P!*WO#v,dO#x,dO~O#v,eO#x,eO~O!X'iO!w,fO!P#|X#s#|X#v#|X#x#|X$P#|X~O|,gO~O!P'lO#s,iO#v'kO#x'kO$P,jO~O}9gO!O'gX~P#)tO!O,kO~O$P,mO~O'Q'{O'R'zO'S,pO~O],sOj,sOz,tO~O}cX!XcX!_cX!_$cX'pcX~P!#ZO!_,zO~P!$dO},{O!X!vO'p&lO!_'}X~O!_-QO~Oz$cX}$cX!X$jX~P!#ZO}-SOz(OX~P!$dO!X-UO~Oz-WO~O|(]O'Y$aO!_'}P~Oi-[O!X!vO!`$YO'_$dO'p&lO~O!X)]O~O!O-bO~P!&yO!T-cO!U-cO'Z$cO'f(eO~Ou-eO'f(eO~O!t-fO~O'Y${O}&tX'^&tX~O}(uO'^'`a~Or-kOs-kOu-lO'poa'woa'xoa}oa!woa~O'^oa#ioa~P#7POr(POu(QO'p$[a'w$[a'x$[a}$[a!w$[a~O'^$[a#i$[a~P#7uOr(POu(QO'p$^a'w$^a'x$^a}$^a!w$^a~O'^$^a#i$^a~P#8hO]-mO~O#S-nO~O'^$la}$la#i$la!w$la~P!$dO#S-qO~OR-zO!P&aO!k-yO%O-xO~O'^-{O~O]#rOi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'c#tO~Og-}O'Y-|O~P#:_O!X)]O!P']a^']a'T']a~O#S.TO~OYZX}cX!OcX~O}.UO!O(VX~O!O.WO~OY.XO~O'Y)eO~O!P$lO'Y$aO[&|X}&|X~O})jO[(Ua~O!_.^O~P!*WO].`O~OY.aO~O[.bO~OR-zO!P&aO!k-yO%O-xO'_$dO~O})vO^(Ra'T(Ra~O!w.hO~OR.kO!P#zO~O'f'QO!O(SP~OR.uO!P.qO!k.tO%O.sO'_$dO~OY/PO}.}O!O(TX~O!O/QO~O[/SO^$]O'T$]O~O]/TO~O#_/VO%p/WO~P0zO!w#dO#_/VO%p/WO~O^/XO~P){O^/ZO~O%y/_OP%wiQ%wiW%wi]%wi^%wia%wib%wig%wii%wij%wik%win%wip%wiu%wiw%wix%wiy%wi!P%wi!Z%wi!`%wi!c%wi!d%wi!e%wi!f%wi!g%wi!j%wi#`%wi#p%wi#t%wi$}%wi%P%wi%R%wi%S%wi%V%wi%X%wi%[%wi%]%wi%_%wi%l%wi%r%wi%t%wi%v%wi%x%wi%{%wi&R%wi&V%wi&X%wi&Z%wi&]%wi&_%wi'O%wi'Y%wi'c%wi'o%wi'|%wi!O%wi_%wi&O%wi~O_/eO!O/cO&O/dO~P`O!PSO!`/hO~O}#aO'e$Za~Oz&ei}&ei~P!*WO}!]Oz'ji~O}&^Oz'ti~Oz/lO~O}!Ra!O!Ra~P#)tO]&POj&PO|/rO'f(eO}&fX!O&fX~P@^O}+WO!O'ka~O]&XOj&XO|)uO'f'QO}&kX!O&kX~O}+ZO!O'va~Oz'ui}'ui~P!*WO^$]O!X!vO!`$YO!f/}O!w/{O'T$]O'_$dO'p&lO~O!O0QO~P!?jO!T0RO!U0RO'Z$cO'f(eO'o+cO~O!S0SO~P#HXO!PSO!S0SO!q0UO!t0VO~P#HXO!S0SO!o0XO!p0XO!q0UO!t0VO~P#HXO!P&aO~O!P&aO~P!$dO}'ri!_'ri^'ri'T'ri~P!*WO!w0bO}'ri!_'ri^'ri'T'ri~O}&qO!_'qi~Ou$uO!P$vO#R0dO'Y$aO~O#SoaPoaYoa^oaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa'Toa'coa!_oazoa!Poa'eoa%Ooa!Xoa~P#7PO#S$[aP$[aY$[a^$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a'T$[a'c$[a!_$[az$[a!P$[a'e$[a%O$[a!X$[a~P#7uO#S$^aP$^aY$^a^$^ai$^as$^a!]$^a!^$^a!`$^a!f$^a#W$^a#X$^a#Y$^a#Z$^a#[$^a#]$^a#^$^a#_$^a#a$^a#c$^a#e$^a#f$^a'T$^a'c$^a!_$^az$^a!P$^a'e$^a%O$^a!X$^a~P#8hO#S$laP$laY$la^$lai$las$la}$la!]$la!^$la!`$la!f$la#W$la#X$la#Y$la#Z$la#[$la#]$la#^$la#_$la#a$la#c$la#e$la#f$la'T$la'c$la!_$laz$la!P$la!w$la'e$la%O$la!X$la~P!$dO^!zq}!zq'T!zqz!zq!_!zq'e!zq!P!zq%O!zq!X!zq~P!*WO}&gX'^&gX~PJaO},XO'^'ma~O|0lO}&hX!_&hX~P){O},[O!_'na~O},[O!_'na~P!*WO#i!ba!O!ba~PC`O#i!Ya}!Ya!O!Ya~P#)tO!P1PO#t^O#}1QO~O!O1UO~O'e1VO~P!$dO^$Wq}$Wq'T$Wqz$Wq!_$Wq'e$Wq!P$Wq%O$Wq!X$Wq~P!*WOz1WO~O],sOj,sO~Or(POu(QO'x(UO'p$vi'w$vi}$vi!w$vi~O'^$vi#i$vi~P$(xOr(POu(QO'p$xi'w$xi'x$xi}$xi!w$xi~O'^$xi#i$xi~P$)kO#i1XO~P!$dO|1ZO'Y$aO}&pX!_&pX~O},{O!_'}a~O},{O!X!vO!_'}a~O},{O!X!vO'p&lO!_'}a~O'^$ei}$ei#i$ei!w$ei~P!$dO|1bO'Y(`Oz&rX}&rX~P!%RO}-SOz(Oa~O}-SOz(Oa~P!$dO!X!vO~O!X!vO#_1lO~Oi1pO!X!vO'p&lO~O}'ai'^'ai~P!$dO!w1sO}'ai'^'ai~P!$dO!_1vO~O^$Xq}$Xq'T$Xqz$Xq!_$Xq'e$Xq!P$Xq%O$Xq!X$Xq~P!*WO}1zO!P(PX~P!$dO!P&aO%O1}O~O!P&aO%O1}O~P!$dO!P$cX$sZX^$cX'T$cX~P!#ZO$s2ROrfXufX!PfX'pfX'wfX'xfX^fX'TfX~O$s2RO~O%P2YO'Y)eO}&{X!O&{X~O}.UO!O(Va~OY2^O~O[2_O~O]2bO~OR2dO!P&aO!k2cO%O1}O~O^$]O'T$]O~P!$dO!P#zO~P!$dO}2iO!w2kO!O(SX~O!O2lO~Ou(iO!S2uO!T2nO!U2nO!n2tO!o2sO!p2sO!t2rO'Z$cO'f(eO'o+cO~O!O2qO~P$1yOR2|O!P.qO!k2{O%O2zO~OR2|O!P.qO!k2{O%O2zO'_$dO~O'Y(wO}&zX!O&zX~O}.}O!O(Ta~O'f3VO~O]3XO~O[3ZO~O!_3^O~P){O^3`O~O^3`O~P){O#_3bO%p3cO~PExO_/eO!O3gO&O/dO~P`O!X3iO~O&T3jOP&QqQ&QqW&Qq]&Qq^&Qqa&Qqb&Qqg&Qqi&Qqj&Qqk&Qqn&Qqp&Qqu&Qqw&Qqx&Qqy&Qq!P&Qq!Z&Qq!`&Qq!c&Qq!d&Qq!e&Qq!f&Qq!g&Qq!j&Qq#`&Qq#p&Qq#t&Qq$}&Qq%P&Qq%R&Qq%S&Qq%V&Qq%X&Qq%[&Qq%]&Qq%_&Qq%l&Qq%r&Qq%t&Qq%v&Qq%x&Qq%{&Qq&R&Qq&V&Qq&X&Qq&Z&Qq&]&Qq&_&Qq'O&Qq'Y&Qq'c&Qq'o&Qq'|&Qq!O&Qq%y&Qq_&Qq&O&Qq~O}#Pi!O#Pi~P#)tO!w3lO}#Pi!O#Pi~O}!Ri!O!Ri~P#)tO^$]O!w3sO'T$]O~O^$]O!X!vO!w3sO'T$]O~O!T3wO!U3wO'Z$cO'f(eO'o+cO~O^$]O!X!vO!`$YO!f3xO!w3sO'T$]O'_$dO'p&lO~O!S3yO~P$:cO!S3yO!q3|O!t3}O~P$:cO^$]O!X!vO!f3xO!w3sO'T$]O'p&lO~O}'rq!_'rq^'rq'T'rq~P!*WO}&qO!_'qq~O#S$viP$viY$vi^$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi'T$vi'c$vi!_$viz$vi!P$vi'e$vi%O$vi!X$vi~P$(xO#S$xiP$xiY$xi^$xii$xis$xi!]$xi!^$xi!`$xi!f$xi#W$xi#X$xi#Y$xi#Z$xi#[$xi#]$xi#^$xi#_$xi#a$xi#c$xi#e$xi#f$xi'T$xi'c$xi!_$xiz$xi!P$xi'e$xi%O$xi!X$xi~P$)kO#S$eiP$eiY$ei^$eii$eis$ei}$ei!]$ei!^$ei!`$ei!f$ei#W$ei#X$ei#Y$ei#Z$ei#[$ei#]$ei#^$ei#_$ei#a$ei#c$ei#e$ei#f$ei'T$ei'c$ei!_$eiz$ei!P$ei!w$ei'e$ei%O$ei!X$ei~P!$dO}&ga'^&ga~P!$dO}&ha!_&ha~P!*WO},[O!_'ni~O#i!zi}!zi!O!zi~P#)tOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'cQOY#Vii#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~O#W#Vi~P$CyO#W9[O~P$CyOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O'cQOY#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~Oi#Vi~P$FROi9^O~P$FROP#]Oi9^Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O'cQO#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P$HZOY9iO!]9`O#]9`O#^9`O#_9`O~P$HZOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO'cQO#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'x#Vi}#Vi!O#Vi~O'w#Vi~P$JoO'w!|O~P$JoOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO'cQO'w!|O#e#Vi#f#Vi#i#Vi'p#Vi}#Vi!O#Vi~O'x#Vi~P$LwO'x!}O~P$LwOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO#e9eO'cQO'w!|O'x!}O~O#f#Vi#i#Vi'p#Vi}#Vi!O#Vi~P% PO^#gy}#gy'T#gyz#gy!_#gy'e#gy!P#gy%O#gy!X#gy~P!*WOP#ViY#Vii#Vis#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'c#Vi}#Vi!O#Vi~P!$dO!^!xOP'bXY'bXi'bXr'bXs'bXu'bX!]'bX!`'bX!f'bX#W'bX#X'bX#Y'bX#Z'bX#['bX#]'bX#^'bX#_'bX#a'bX#c'bX#e'bX#f'bX#i'bX'c'bX'p'bX'w'bX'x'bX}'bX!O'bX~O#i#ji}#ji!O#ji~P#)tO!O4_O~O}&oa!O&oa~P#)tO!X!vO'p&lO}&pa!_&pa~O},{O!_'}i~O},{O!X!vO!_'}i~Oz&ra}&ra~P!$dO!X4fO~O}-SOz(Oi~P!$dO}-SOz(Oi~Oz4lO~O!X!vO#_4rO~Oi4sO!X!vO'p&lO~Oz4uO~O'^$gq}$gq#i$gq!w$gq~P!$dO^$Xy}$Xy'T$Xyz$Xy!_$Xy'e$Xy!P$Xy%O$Xy!X$Xy~P!*WO}1zO!P(Pa~O!P&aO%O4zO~O!P&aO%O4zO~P!$dO^!zy}!zy'T!zyz!zy!_!zy'e!zy!P!zy%O!zy!X!zy~P!*WOY4}O~O}.UO!O(Vi~O]5SO~O[5TO~O'f'QO}&wX!O&wX~O}2iO!O(Sa~O!O5bO~P$1yOu-eO'f(eO'o+cO~O!S5eO!T5dO!U5dO!t0VO'Z$cO'f(eO'o+cO~O!o5fO!p5fO~P%-iO!T5dO!U5dO'Z$cO'f(eO'o+cO~O!P.qO~O!P.qO%O5hO~O!P.qO%O5hO~P!$dOR5mO!P.qO!k5lO%O5hO~OY5rO}&za!O&za~O}.}O!O(Ti~O]5uO~O!_5vO~O!_5wO~O!_5xO~O!_5xO~P){O^5zO~O!X5}O~O!_6PO~O}'ui!O'ui~P#)tO^$]O'T$]O~P!*WO^$]O!w6UO'T$]O~O^$]O!X!vO!w6UO'T$]O~O!T6ZO!U6ZO'Z$cO'f(eO'o+cO~O^$]O!X!vO!f6[O!w6UO'T$]O'p&lO~O!`$YO'_$dO~P%2TO!S6]O~P%1rO}'ry!_'ry^'ry'T'ry~P!*WO#S$gqP$gqY$gq^$gqi$gqs$gq}$gq!]$gq!^$gq!`$gq!f$gq#W$gq#X$gq#Y$gq#Z$gq#[$gq#]$gq#^$gq#_$gq#a$gq#c$gq#e$gq#f$gq'T$gq'c$gq!_$gqz$gq!P$gq!w$gq'e$gq%O$gq!X$gq~P!$dO}&hi!_&hi~P!*WO#i!zq}!zq!O!zq~P#)tOr-kOs-kOu-lOPoaYoaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa#ioa'coa'poa'woa'xoa}oa!Ooa~Or(POu(QOP$[aY$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a#i$[a'c$[a'p$[a'w$[a'x$[a}$[a!O$[a~Or(POu(QOP$^aY$^ai$^as$^a!]$^a!^$^a!`$^a!f$^a#W$^a#X$^a#Y$^a#Z$^a#[$^a#]$^a#^$^a#_$^a#a$^a#c$^a#e$^a#f$^a#i$^a'c$^a'p$^a'w$^a'x$^a}$^a!O$^a~OP$laY$lai$las$la!]$la!^$la!`$la!f$la#W$la#X$la#Y$la#Z$la#[$la#]$la#^$la#_$la#a$la#c$la#e$la#f$la#i$la'c$la}$la!O$la~P!$dO#i$Wq}$Wq!O$Wq~P#)tO#i$Xq}$Xq!O$Xq~P#)tO!O6gO~O'^$zy}$zy#i$zy!w$zy~P!$dO!X!vO}&pi!_&pi~O!X!vO'p&lO}&pi!_&pi~O},{O!_'}q~Oz&ri}&ri~P!$dO}-SOz(Oq~Oz6nO~P!$dOz6nO~O}'ay'^'ay~P!$dO}&ua!P&ua~P!$dO!P$rq^$rq'T$rq~P!$dOY6vO~O}.UO!O(Vq~O]6yO~O!P&aO%O6zO~O!P&aO%O6zO~P!$dO!w6{O}&wa!O&wa~O}2iO!O(Si~P#)tO!T7RO!U7RO'Z$cO'f(eO'o+cO~O!S7TO!t3}O~P%ArO!P.qO%O7WO~O!P.qO%O7WO~P!$dO'f7^O~O}.}O!O(Tq~O!_7aO~O!_7aO~P){O!_7cO~O!_7dO~O}#Py!O#Py~P#)tO^$]O!w7jO'T$]O~O^$]O!X!vO!w7jO'T$]O~O!T7mO!U7mO'Z$cO'f(eO'o+cO~O^$]O!X!vO!f7nO!w7jO'T$]O'p&lO~O#S$zyP$zyY$zy^$zyi$zys$zy}$zy!]$zy!^$zy!`$zy!f$zy#W$zy#X$zy#Y$zy#Z$zy#[$zy#]$zy#^$zy#_$zy#a$zy#c$zy#e$zy#f$zy'T$zy'c$zy!_$zyz$zy!P$zy!w$zy'e$zy%O$zy!X$zy~P!$dO#i#gy}#gy!O#gy~P#)tOP$eiY$eii$eis$ei!]$ei!^$ei!`$ei!f$ei#W$ei#X$ei#Y$ei#Z$ei#[$ei#]$ei#^$ei#_$ei#a$ei#c$ei#e$ei#f$ei#i$ei'c$ei}$ei!O$ei~P!$dOr(POu(QO'x(UOP$viY$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi#i$vi'c$vi'p$vi'w$vi}$vi!O$vi~Or(POu(QOP$xiY$xii$xis$xi!]$xi!^$xi!`$xi!f$xi#W$xi#X$xi#Y$xi#Z$xi#[$xi#]$xi#^$xi#_$xi#a$xi#c$xi#e$xi#f$xi#i$xi'c$xi'p$xi'w$xi'x$xi}$xi!O$xi~O#i$Xy}$Xy!O$Xy~P#)tO#i!zy}!zy!O!zy~P#)tO!X!vO}&pq!_&pq~O},{O!_'}y~Oz&rq}&rq~P!$dOz7tO~P!$dO}.UO!O(Vy~O}2iO!O(Sq~O!T8QO!U8QO'Z$cO'f(eO'o+cO~O!P.qO%O8TO~O!P.qO%O8TO~P!$dO!_8WO~O&T8XOP&Q!ZQ&Q!ZW&Q!Z]&Q!Z^&Q!Za&Q!Zb&Q!Zg&Q!Zi&Q!Zj&Q!Zk&Q!Zn&Q!Zp&Q!Zu&Q!Zw&Q!Zx&Q!Zy&Q!Z!P&Q!Z!Z&Q!Z!`&Q!Z!c&Q!Z!d&Q!Z!e&Q!Z!f&Q!Z!g&Q!Z!j&Q!Z#`&Q!Z#p&Q!Z#t&Q!Z$}&Q!Z%P&Q!Z%R&Q!Z%S&Q!Z%V&Q!Z%X&Q!Z%[&Q!Z%]&Q!Z%_&Q!Z%l&Q!Z%r&Q!Z%t&Q!Z%v&Q!Z%x&Q!Z%{&Q!Z&R&Q!Z&V&Q!Z&X&Q!Z&Z&Q!Z&]&Q!Z&_&Q!Z'O&Q!Z'Y&Q!Z'c&Q!Z'o&Q!Z'|&Q!Z!O&Q!Z%y&Q!Z_&Q!Z&O&Q!Z~O^$]O!w8^O'T$]O~O^$]O!X!vO!w8^O'T$]O~OP$gqY$gqi$gqs$gq!]$gq!^$gq!`$gq!f$gq#W$gq#X$gq#Y$gq#Z$gq#[$gq#]$gq#^$gq#_$gq#a$gq#c$gq#e$gq#f$gq#i$gq'c$gq}$gq!O$gq~P!$dO}&wq!O&wq~P#)tO^$]O!w8sO'T$]O~OP$zyY$zyi$zys$zy!]$zy!^$zy!`$zy!f$zy#W$zy#X$zy#Y$zy#Z$zy#[$zy#]$zy#^$zy#_$zy#a$zy#c$zy#e$zy#f$zy#i$zy'c$zy}$zy!O$zy~P!$dO'e'gX~P.jO'eZXzZX!_ZX%pZX!PZX%OZX!XZX~P$zO!XcX!_ZX!_cX'pcX~P;dOP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!PSO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'Y'`O'cQO'oYO'|:jO~O}9gO!O$Za~O]#rOg$POi#sOj#rOk#rOn$QOp9lOu#yO!P#zO!Z:oO!`#wO#R9rO#p$UO$]9nO$_9pO$b$VO'Y&xO'c#tO~O#`'gO~P&-RO!OZX!OcX~P;dO#S9ZO~O!X!vO#S9ZO~O!w9jO~O#_9`O~O!w9sO}'uX!O'uX~O!w9jO}'sX!O'sX~O#S9tO~O'^9vO~P!$dO#S9{O~O#S9|O~O!X!vO#S9}O~O!X!vO#S9tO~O#i:OO~P#)tO#S:PO~O#S:QO~O#S:RO~O#S:SO~O#i:TO~P!$dO#i:UO~P!$dO#t~!^!n!p!q#Q#R'|$]$_$b$s$}%O%P%V%X%[%]%_%a~TS#t'|#Xy'V'W'f'W'Y#v#x#v~", ++ goto: "#Dq(ZPPPPPPP([P(lP*`PPPP-uPP.[3l5`5sP5sPPP5s5sP5sP7aPP7fP7zPPPPyPPP?PA[PbP!>f!>n!>r!>rP!;lP!>v!>vP!AiP!Amk|}?O}!O>k!O!P?`!P!QCl!Q!R!0[!R![!1q![!]!7s!]!^!8V!^!_!8g!_!`!9d!`!a!:[!a!b!U#R#S2`#S#T!>i#T#o2`#o#p!>y#p#q!?O#q#r!?f#r#s!?x#s$f%T$f$g%c$g#BY2`#BY#BZ!@Y#BZ$IS2`$IS$I_!@Y$I_$I|2`$I|$I}!Bq$I}$JO!Bq$JO$JT2`$JT$JU!@Y$JU$KV2`$KV$KW!@Y$KW&FU2`&FU&FV!@Y&FV?HT2`?HT?HU!@Y?HU~2`W%YR$QWO!^%T!_#o%T#p~%T,T%jg$QW'T+{OX%TXY%cYZ%TZ[%c[p%Tpq%cq!^%T!_#o%T#p$f%T$f$g%c$g#BY%T#BY#BZ%c#BZ$IS%T$IS$I_%c$I_$JT%T$JT$JU%c$JU$KV%T$KV$KW%c$KW&FU%T&FU&FV%c&FV?HT%T?HT?HU%c?HU~%T,T'YR$QW'U+{O!^%T!_#o%T#p~%T$T'jS$QW!f#{O!^%T!_!`'v!`#o%T#p~%T$O'}S#a#v$QWO!^%T!_!`(Z!`#o%T#p~%T$O(bR#a#v$QWO!^%T!_#o%T#p~%T'u(rZ$QW]!ROY(kYZ)eZr(krs*rs!^(k!^!_+U!_#O(k#O#P-b#P#o(k#o#p+U#p~(k&r)jV$QWOr)ers*Ps!^)e!^!_*a!_#o)e#o#p*a#p~)e&r*WR#{&j$QWO!^%T!_#o%T#p~%T&j*dROr*ars*ms~*a&j*rO#{&j'u*{R#{&j$QW]!RO!^%T!_#o%T#p~%T'm+ZV]!ROY+UYZ*aZr+Urs+ps#O+U#O#P+w#P~+U'm+wO#{&j]!R'm+zROr+Urs,Ts~+U'm,[U#{&j]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R,sU]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R-[O]!R!R-_PO~,n'u-gV$QWOr(krs-|s!^(k!^!_+U!_#o(k#o#p+U#p~(k'u.VZ#{&j$QW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/PZ$QW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/yR$QW]!RO!^%T!_#o%T#p~%T!Z0XT$QWO!^.x!^!_,n!_#o.x#o#p,n#p~.xy0mZ$QWOt%Ttu1`u!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`y1g]$QW'mqOt%Ttu1`u!Q%T!Q![1`![!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`&i2k_$QW#vS'W%k'dpOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`[3q_$QW#vSOt%Ttu3ju}%T}!O3j!O!Q%T!Q![3j![!^%T!_!c%T!c!}3j!}#R%T#R#S3j#S#T%T#T#o3j#p$g%T$g~3j$O4wS#Y#v$QWO!^%T!_!`5T!`#o%T#p~%T$O5[R$QW#k#vO!^%T!_#o%T#p~%T%r5lU'v%j$QWOv%Tvw6Ow!^%T!_!`5T!`#o%T#p~%T$O6VS$QW#e#vO!^%T!_!`5T!`#o%T#p~%T'u6jZ$QW]!ROY6cYZ7]Zw6cwx*rx!^6c!^!_8T!_#O6c#O#P:T#P#o6c#o#p8T#p~6c&r7bV$QWOw7]wx*Px!^7]!^!_7w!_#o7]#o#p7w#p~7]&j7zROw7wwx*mx~7w'm8YV]!ROY8TYZ7wZw8Twx+px#O8T#O#P8o#P~8T'm8rROw8Twx8{x~8T'm9SU#{&j]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R9kU]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R:QPO~9f'u:YV$QWOw6cwx:ox!^6c!^!_8T!_#o6c#o#p8T#p~6c'u:xZ#{&j$QW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#PW{!^%T!_!`5T!`#o%T#p~%T$O>_S#W#v$QWO!^%T!_!`5T!`#o%T#p~%T$u>rSi$m$QWO!^%T!_!`5T!`#o%T#p~%T&i?VR}&a$QWO!^%T!_#o%T#p~%T&i?gVr%n$QWO!O%T!O!P?|!P!Q%T!Q![@r![!^%T!_#o%T#p~%Ty@RT$QWO!O%T!O!P@b!P!^%T!_#o%T#p~%Ty@iR|q$QWO!^%T!_#o%T#p~%Ty@yZ$QWjqO!Q%T!Q![@r![!^%T!_!g%T!g!hAl!h#R%T#R#S@r#S#X%T#X#YAl#Y#o%T#p~%TyAqZ$QWO{%T{|Bd|}%T}!OBd!O!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyBiV$QWO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyCVV$QWjqO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%T,TCs`$QW#X#vOYDuYZ%TZzDuz{Jl{!PDu!P!Q!-e!Q!^Du!^!_Fx!_!`!.^!`!a!/]!a!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXD|[$QWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXEy_$QWyPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%TPF}VyPOYFxZ!PFx!P!QGd!Q!}Fx!}#OG{#O#PHh#P~FxPGiUyP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGdPHOTOYG{Z#OG{#O#PH_#P#QFx#Q~G{PHbQOYG{Z~G{PHkQOYFxZ~FxXHvY$QWOYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~HqXIkV$QWOYHqYZ%TZ!^Hq!^!_G{!_#oHq#o#pG{#p~HqXJVV$QWOYDuYZ%TZ!^Du!^!_Fx!_#oDu#o#pFx#p~Du,TJs^$QWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q!,R!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,TKtV$QWOzKoz{LZ{!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TL`X$QWOzKoz{LZ{!PKo!P!QL{!Q!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TMSR$QWT+{O!^%T!_#o%T#p~%T+{M`ROzM]z{Mi{~M]+{MlTOzM]z{Mi{!PM]!P!QM{!Q~M]+{NQOT+{,TNX^$QWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q! T!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,T! ^_$QWT+{yPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%T+{!!bYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!&x!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#VYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!#u!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#|UT+{yP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGd+{!$cWOY!$`YZM]Zz!$`z{!${{#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%OYOY!$`YZM]Zz!$`z{!${{!P!$`!P!Q!%n!Q#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%sTT+{OYG{Z#OG{#O#PH_#P#QFx#Q~G{+{!&VTOY!$`YZM]Zz!$`z{!${{~!$`+{!&iTOY!!]YZM]Zz!!]z{!#Q{~!!]+{!&}_yPOzM]z{Mi{#ZM]#Z#[!&x#[#]M]#]#^!&x#^#aM]#a#b!&x#b#gM]#g#h!&x#h#iM]#i#j!&x#j#mM]#m#n!&x#n~M],T!(R[$QWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!(|^$QWOY!'|YZKoZz!'|z{!(w{!P!'|!P!Q!)x!Q!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!*PY$QWT+{OYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~Hq,T!*tX$QWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#o!'|#o#p!$`#p~!'|,T!+fX$QWOYJlYZKoZzJlz{NQ{!^Jl!^!_!!]!_#oJl#o#p!!]#p~Jl,T!,Yc$QWyPOzKoz{LZ{!^Ko!^!_M]!_#ZKo#Z#[!,R#[#]Ko#]#^!,R#^#aKo#a#b!,R#b#gKo#g#h!,R#h#iKo#i#j!,R#j#mKo#m#n!,R#n#oKo#o#pM]#p~Ko,T!-lV$QWS+{OY!-eYZ%TZ!^!-e!^!_!.R!_#o!-e#o#p!.R#p~!-e+{!.WQS+{OY!.RZ~!.R$P!.g[$QW#k#vyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Du]!/f[#sS$QWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Duy!0cd$QWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#U%T#U#V!3X#V#X%T#X#YAl#Y#b%T#b#c!2w#c#d!4m#d#l%T#l#m!5{#m#o%T#p~%Ty!1x_$QWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#X%T#X#YAl#Y#b%T#b#c!2w#c#o%T#p~%Ty!3OR$QWjqO!^%T!_#o%T#p~%Ty!3^W$QWO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#o%T#p~%Ty!3}Y$QWjqO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#b%T#b#c!2w#c#o%T#p~%Ty!4rV$QWO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#o%T#p~%Ty!5`X$QWjqO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#b%T#b#c!2w#c#o%T#p~%Ty!6QZ$QWO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#o%T#p~%Ty!6z]$QWjqO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#b%T#b#c!2w#c#o%T#p~%T%w!7|R!XV$QW#i%hO!^%T!_#o%T#p~%T!P!8^R^w$QWO!^%T!_#o%T#p~%T+c!8rR']d!]%Y#t&s'zP!P!Q!8{!^!_!9Q!_!`!9_W!9QO$SW#v!9VP#[#v!_!`!9Y#v!9_O#k#v#v!9dO#]#v%w!9kT!w%o$QWO!^%T!_!`'v!`!a!9z!a#o%T#p~%T$P!:RR#S#w$QWO!^%T!_#o%T#p~%T%w!:gT'[!s#]#v#}S$QWO!^%T!_!`!:v!`!a!;W!a#o%T#p~%T$O!:}R#]#v$QWO!^%T!_#o%T#p~%T$O!;_T#[#v$QWO!^%T!_!`5T!`!a!;n!a#o%T#p~%T$O!;uS#[#v$QWO!^%T!_!`5T!`#o%T#p~%T%w!]S#c#v$QWO!^%T!_!`5T!`#o%T#p~%T$P!>pR$QW'a#wO!^%T!_#o%T#p~%T~!?OO!P~%r!?VT'u%j$QWO!^%T!_!`5T!`#o%T#p#q!=P#q~%T$u!?oR!O$k$QW'cQO!^%T!_#o%T#p~%TX!@PR!gP$QWO!^%T!_#o%T#p~%T,T!@gr$QW'T+{#vS'W%k'dpOX%TXY%cYZ%TZ[%c[p%Tpq%cqt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$f%T$f$g%c$g#BY2`#BY#BZ!@Y#BZ$IS2`$IS$I_!@Y$I_$JT2`$JT$JU!@Y$JU$KV2`$KV$KW!@Y$KW&FU2`&FU&FV!@Y&FV?HT2`?HT?HU!@Y?HU~2`,T!CO_$QW'U+{#vS'W%k'dpOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`", ++ tokenData: "!F_~R!`OX%TXY%cYZ'RZ[%c[]%T]^'R^p%Tpq%cqr'crs(kst0htu2`uv4pvw5ewx6cxyk|}?O}!O>k!O!P?`!P!QCl!Q!R!0[!R![!1q![!]!7s!]!^!8V!^!_!8g!_!`!9d!`!a!:[!a!b!U#R#S2`#S#T!>i#T#o!>y#o#p!AZ#p#q!A`#q#r!Av#r#s!BY#s$f%T$f$g%c$g#BY2`#BY#BZ!Bj#BZ$IS2`$IS$I_!Bj$I_$I|2`$I|$I}!ER$I}$JO!ER$JO$JT2`$JT$JU!Bj$JU$KV2`$KV$KW!Bj$KW&FU2`&FU&FV!Bj&FV?HT2`?HT?HU!Bj?HU~2`W%YR$SWO!^%T!_#o%T#p~%T,T%jg$SW'V+{OX%TXY%cYZ%TZ[%c[p%Tpq%cq!^%T!_#o%T#p$f%T$f$g%c$g#BY%T#BY#BZ%c#BZ$IS%T$IS$I_%c$I_$JT%T$JT$JU%c$JU$KV%T$KV$KW%c$KW&FU%T&FU&FV%c&FV?HT%T?HT?HU%c?HU~%T,T'YR$SW'W+{O!^%T!_#o%T#p~%T$T'jS$SW!f#{O!^%T!_!`'v!`#o%T#p~%T$O'}S#a#v$SWO!^%T!_!`(Z!`#o%T#p~%T$O(bR#a#v$SWO!^%T!_#o%T#p~%T'u(rZ$SW]!ROY(kYZ)eZr(krs*rs!^(k!^!_+U!_#O(k#O#P-b#P#o(k#o#p+U#p~(k&r)jV$SWOr)ers*Ps!^)e!^!_*a!_#o)e#o#p*a#p~)e&r*WR#}&j$SWO!^%T!_#o%T#p~%T&j*dROr*ars*ms~*a&j*rO#}&j'u*{R#}&j$SW]!RO!^%T!_#o%T#p~%T'm+ZV]!ROY+UYZ*aZr+Urs+ps#O+U#O#P+w#P~+U'm+wO#}&j]!R'm+zROr+Urs,Ts~+U'm,[U#}&j]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R,sU]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R-[O]!R!R-_PO~,n'u-gV$SWOr(krs-|s!^(k!^!_+U!_#o(k#o#p+U#p~(k'u.VZ#}&j$SW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/PZ$SW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/yR$SW]!RO!^%T!_#o%T#p~%T!Z0XT$SWO!^.x!^!_,n!_#o.x#o#p,n#p~.xy0mZ$SWOt%Ttu1`u!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`y1g]$SW'oqOt%Ttu1`u!Q%T!Q![1`![!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`&i2k_$SW'fp'Y%k#vSOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`[3q_$SW#vSOt%Ttu3ju}%T}!O3j!O!Q%T!Q![3j![!^%T!_!c%T!c!}3j!}#R%T#R#S3j#S#T%T#T#o3j#p$g%T$g~3j$O4wS#Y#v$SWO!^%T!_!`5T!`#o%T#p~%T$O5[R$SW#k#vO!^%T!_#o%T#p~%T%r5lU'x%j$SWOv%Tvw6Ow!^%T!_!`5T!`#o%T#p~%T$O6VS$SW#e#vO!^%T!_!`5T!`#o%T#p~%T'u6jZ$SW]!ROY6cYZ7]Zw6cwx*rx!^6c!^!_8T!_#O6c#O#P:T#P#o6c#o#p8T#p~6c&r7bV$SWOw7]wx*Px!^7]!^!_7w!_#o7]#o#p7w#p~7]&j7zROw7wwx*mx~7w'm8YV]!ROY8TYZ7wZw8Twx+px#O8T#O#P8o#P~8T'm8rROw8Twx8{x~8T'm9SU#}&j]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R9kU]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R:QPO~9f'u:YV$SWOw6cwx:ox!^6c!^!_8T!_#o6c#o#p8T#p~6c'u:xZ#}&j$SW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#PW{!^%T!_!`5T!`#o%T#p~%T$O>_S#W#v$SWO!^%T!_!`5T!`#o%T#p~%T$u>rSi$m$SWO!^%T!_!`5T!`#o%T#p~%T&i?VR}&a$SWO!^%T!_#o%T#p~%T&i?gVr%n$SWO!O%T!O!P?|!P!Q%T!Q![@r![!^%T!_#o%T#p~%Ty@RT$SWO!O%T!O!P@b!P!^%T!_#o%T#p~%Ty@iR|q$SWO!^%T!_#o%T#p~%Ty@yZ$SWjqO!Q%T!Q![@r![!^%T!_!g%T!g!hAl!h#R%T#R#S@r#S#X%T#X#YAl#Y#o%T#p~%TyAqZ$SWO{%T{|Bd|}%T}!OBd!O!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyBiV$SWO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyCVV$SWjqO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%T,TCs`$SW#X#vOYDuYZ%TZzDuz{Jl{!PDu!P!Q!-e!Q!^Du!^!_Fx!_!`!.^!`!a!/]!a!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXD|[$SWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXEy_$SWyPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%TPF}VyPOYFxZ!PFx!P!QGd!Q!}Fx!}#OG{#O#PHh#P~FxPGiUyP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGdPHOTOYG{Z#OG{#O#PH_#P#QFx#Q~G{PHbQOYG{Z~G{PHkQOYFxZ~FxXHvY$SWOYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~HqXIkV$SWOYHqYZ%TZ!^Hq!^!_G{!_#oHq#o#pG{#p~HqXJVV$SWOYDuYZ%TZ!^Du!^!_Fx!_#oDu#o#pFx#p~Du,TJs^$SWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q!,R!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,TKtV$SWOzKoz{LZ{!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TL`X$SWOzKoz{LZ{!PKo!P!QL{!Q!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TMSR$SWT+{O!^%T!_#o%T#p~%T+{M`ROzM]z{Mi{~M]+{MlTOzM]z{Mi{!PM]!P!QM{!Q~M]+{NQOT+{,TNX^$SWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q! T!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,T! ^_$SWT+{yPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%T+{!!bYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!&x!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#VYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!#u!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#|UT+{yP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGd+{!$cWOY!$`YZM]Zz!$`z{!${{#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%OYOY!$`YZM]Zz!$`z{!${{!P!$`!P!Q!%n!Q#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%sTT+{OYG{Z#OG{#O#PH_#P#QFx#Q~G{+{!&VTOY!$`YZM]Zz!$`z{!${{~!$`+{!&iTOY!!]YZM]Zz!!]z{!#Q{~!!]+{!&}_yPOzM]z{Mi{#ZM]#Z#[!&x#[#]M]#]#^!&x#^#aM]#a#b!&x#b#gM]#g#h!&x#h#iM]#i#j!&x#j#mM]#m#n!&x#n~M],T!(R[$SWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!(|^$SWOY!'|YZKoZz!'|z{!(w{!P!'|!P!Q!)x!Q!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!*PY$SWT+{OYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~Hq,T!*tX$SWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#o!'|#o#p!$`#p~!'|,T!+fX$SWOYJlYZKoZzJlz{NQ{!^Jl!^!_!!]!_#oJl#o#p!!]#p~Jl,T!,Yc$SWyPOzKoz{LZ{!^Ko!^!_M]!_#ZKo#Z#[!,R#[#]Ko#]#^!,R#^#aKo#a#b!,R#b#gKo#g#h!,R#h#iKo#i#j!,R#j#mKo#m#n!,R#n#oKo#o#pM]#p~Ko,T!-lV$SWS+{OY!-eYZ%TZ!^!-e!^!_!.R!_#o!-e#o#p!.R#p~!-e+{!.WQS+{OY!.RZ~!.R$P!.g[$SW#k#vyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Du]!/f[#sS$SWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Duy!0cd$SWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#U%T#U#V!3X#V#X%T#X#YAl#Y#b%T#b#c!2w#c#d!4m#d#l%T#l#m!5{#m#o%T#p~%Ty!1x_$SWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#X%T#X#YAl#Y#b%T#b#c!2w#c#o%T#p~%Ty!3OR$SWjqO!^%T!_#o%T#p~%Ty!3^W$SWO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#o%T#p~%Ty!3}Y$SWjqO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#b%T#b#c!2w#c#o%T#p~%Ty!4rV$SWO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#o%T#p~%Ty!5`X$SWjqO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#b%T#b#c!2w#c#o%T#p~%Ty!6QZ$SWO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#o%T#p~%Ty!6z]$SWjqO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#b%T#b#c!2w#c#o%T#p~%T%w!7|R!XV$SW#i%hO!^%T!_#o%T#p~%T!P!8^R^w$SWO!^%T!_#o%T#p~%T+c!8rR'_d!]%Y#t&s'|P!P!Q!8{!^!_!9Q!_!`!9_W!9QO$UW#v!9VP#[#v!_!`!9Y#v!9_O#k#v#v!9dO#]#v%w!9kT!w%o$SWO!^%T!_!`'v!`!a!9z!a#o%T#p~%T$P!:RR#S#w$SWO!^%T!_#o%T#p~%T%w!:gT'^!s#]#v$PS$SWO!^%T!_!`!:v!`!a!;W!a#o%T#p~%T$O!:}R#]#v$SWO!^%T!_#o%T#p~%T$O!;_T#[#v$SWO!^%T!_!`5T!`!a!;n!a#o%T#p~%T$O!;uS#[#v$SWO!^%T!_!`5T!`#o%T#p~%T%w!]S#c#v$SWO!^%T!_!`5T!`#o%T#p~%T$P!>pR$SW'c#wO!^%T!_#o%T#p~%T&i!?U_$SW'fp'Y%k#xSOt%Ttu!>yu}%T}!O!@T!O!Q%T!Q![!>y![!^%T!_!c%T!c!}!>y!}#R%T#R#S!>y#S#T%T#T#o!>y#p$g%T$g~!>y[!@[_$SW#xSOt%Ttu!@Tu}%T}!O!@T!O!Q%T!Q![!@T![!^%T!_!c%T!c!}!@T!}#R%T#R#S!@T#S#T%T#T#o!@T#p$g%T$g~!@T~!A`O!P~%r!AgT'w%j$SWO!^%T!_!`5T!`#o%T#p#q!=P#q~%T$u!BPR!O$k$SW'eQO!^%T!_#o%T#p~%TX!BaR!gP$SWO!^%T!_#o%T#p~%T,T!Bwr$SW'V+{'fp'Y%k#vSOX%TXY%cYZ%TZ[%c[p%Tpq%cqt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$f%T$f$g%c$g#BY2`#BY#BZ!Bj#BZ$IS2`$IS$I_!Bj$I_$JT2`$JT$JU!Bj$JU$KV2`$KV$KW!Bj$KW&FU2`&FU&FV!Bj&FV?HT2`?HT?HU!Bj?HU~2`,T!E`_$SW'W+{'fp'Y%k#vSOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`", + tokenizers: [noSemicolon, incdecToken, template, 0, 1, 2, 3, 4, 5, 6, 7, 8, insertSemicolon], + topRules: {"Script":[0,6]}, +- dialects: {jsx: 11282, ts: 11284}, +- dynamicPrecedences: {"145":1,"172":1}, +- specialized: [{term: 284, get: (value, stack) => (tsExtends(value, stack) << 1)},{term: 284, get: value => spec_identifier[value] || -1},{term: 296, get: value => spec_word[value] || -1},{term: 59, get: value => spec_LessThan[value] || -1}], +- tokenPrec: 11305 ++ dialects: {jsx: 11332, ts: 11334}, ++ dynamicPrecedences: {"147":1,"174":1}, ++ specialized: [{term: 286, get: (value, stack) => (tsExtends(value, stack) << 1)},{term: 286, get: value => spec_identifier[value] || -1},{term: 298, get: value => spec_word[value] || -1},{term: 59, get: value => spec_LessThan[value] || -1}], ++ tokenPrec: 11355 + }); + + export { parser }; +diff --git a/node_modules/@lezer/javascript/src/javascript.grammar b/node_modules/@lezer/javascript/src/javascript.grammar +index a45c690..1870aa7 100644 +--- a/node_modules/@lezer/javascript/src/javascript.grammar ++++ b/node_modules/@lezer/javascript/src/javascript.grammar +@@ -460,17 +460,18 @@ JSXCloseTag { JSXStartCloseTag jsxElementName? JSXEndTag } + + jsxElementName { + JSXIdentifier | ++ JSXBuiltin { JSXLowerIdentifier } | + JSXNamespacedName | + JSXMemberExpression + } + +-JSXMemberExpression { (JSXMemberExpression | JSXIdentifier) "." JSXIdentifier } ++JSXMemberExpression { (JSXMemberExpression | JSXIdentifier | JSXLowerIdentifier) "." (JSXIdentifier | JSXLowerIdentifier) } + +-JSXNamespacedName { (JSXIdentifier | JSXNamespacedName) ":" JSXIdentifier } ++JSXNamespacedName { (JSXIdentifier | JSXNamespacedName | JSXLowerIdentifier) ":" (JSXIdentifier | JSXLowerIdentifier) } + + jsxAttribute { + JSXSpreadAttribute { "{" "..." expression "}" } | +- JSXAttribute { (JSXIdentifier | JSXNamespacedName) ("=" jsxAttributeValue)? } ++ JSXAttribute { (JSXIdentifier | JSXNamespacedName | JSXLowerIdentifier) ("=" jsxAttributeValue)? } + } + + jsxAttributeValue { +@@ -583,7 +584,7 @@ questionOp[@name=LogicOp] { "?" } + + @precedence { spaces, newline, identifier } + +- @precedence { spaces, newline, JSXIdentifier } ++ @precedence { spaces, newline, JSXIdentifier, JSXLowerIdentifier } + + @precedence { spaces, newline, word } + +@@ -623,7 +624,9 @@ questionOp[@name=LogicOp] { "?" } + + "?." "." "," ";" ":" + +- JSXIdentifier { identifierChar (identifierChar | std.digit | "-")* } ++ JSXIdentifier { $[A-Z_$\u{a1}-\u{10ffff}] (identifierChar | std.digit | "-")* } ++ ++ JSXLowerIdentifier[@name=JSXIdentifier] { $[a-z] (identifierChar | std.digit | "-")* } + + JSXAttributeValue { '"' !["]* '"' | "'" ![']* "'" } + +diff --git a/node_modules/@lezer/javascript/src/parser.js b/node_modules/@lezer/javascript/src/parser.js +index 53f4486..0ee4c3f 100644 +--- a/node_modules/@lezer/javascript/src/parser.js ++++ b/node_modules/@lezer/javascript/src/parser.js +@@ -3,29 +3,29 @@ import {LRParser} from "@lezer/lr" + import {noSemicolon, incdecToken, template, insertSemicolon, tsExtends} from "./tokens" + import {trackNewline} from "./tokens.js" + import {NodeProp} from "@lezer/common" +-const spec_identifier = {__proto__:null,export:16, as:21, from:25, default:30, async:35, function:36, this:46, true:54, false:54, void:60, typeof:64, null:78, super:80, new:114, await:131, yield:133, delete:134, class:144, extends:146, public:189, private:189, protected:189, readonly:191, instanceof:212, in:214, const:216, import:248, keyof:299, unique:303, infer:309, is:343, abstract:363, implements:365, type:367, let:370, var:372, interface:379, enum:383, namespace:389, module:391, declare:395, global:399, for:420, of:429, while:432, with:436, do:440, if:444, else:446, switch:450, case:456, try:462, catch:464, finally:466, return:470, throw:474, break:478, continue:482, debugger:486} +-const spec_word = {__proto__:null,async:101, get:103, set:105, public:153, private:153, protected:153, static:155, abstract:157, override:159, readonly:165, new:347} ++const spec_identifier = {__proto__:null,export:16, as:21, from:25, default:30, async:35, function:36, this:46, true:54, false:54, void:60, typeof:64, null:78, super:80, new:114, await:131, yield:133, delete:134, class:144, extends:146, public:189, private:189, protected:189, readonly:191, instanceof:212, in:214, const:216, import:248, keyof:303, unique:307, infer:313, is:347, abstract:367, implements:369, type:371, let:374, var:376, interface:383, enum:387, namespace:393, module:395, declare:399, global:403, for:424, of:433, while:436, with:440, do:444, if:448, else:450, switch:454, case:460, try:466, catch:468, finally:470, return:474, throw:478, break:482, continue:486, debugger:490} ++const spec_word = {__proto__:null,async:101, get:103, set:105, public:153, private:153, protected:153, static:155, abstract:157, override:159, readonly:165, new:351} + const spec_LessThan = {__proto__:null,"<":121} + export const parser = LRParser.deserialize({ + version: 13, +- states: "$1WO`QYOOO'QQ!LdO'#CgO'XOSO'#DSO)dQYO'#DXO)tQYO'#DdO){QYO'#DnO-xQYO'#DtOOQO'#EX'#EXO.]QWO'#EWO.bQWO'#EWOOQ!LS'#Eb'#EbO0aQ!LdO'#IqO2wQ!LdO'#IrO3eQWO'#EvO3jQpO'#F]OOQ!LS'#FO'#FOO3rO!bO'#FOO4QQWO'#FdO5_QWO'#FcOOQ!LS'#Ir'#IrOOQ!LQ'#Iq'#IqOOQQ'#J['#J[O5dQWO'#HjO5iQ!LYO'#HkOOQQ'#Ic'#IcOOQQ'#Hl'#HlQ`QYOOO){QYO'#DfO5qQWO'#GWO5vQ#tO'#ClO6UQWO'#EVO6aQWO'#EcO6fQ#tO'#E}O7QQWO'#GWO7VQWO'#G[O7bQWO'#G[O7pQWO'#G_O7pQWO'#G`O7pQWO'#GbO5qQWO'#GeO8aQWO'#GhO9oQWO'#CcO:PQWO'#GuO:XQWO'#G{O:XQWO'#G}O`QYO'#HPO:XQWO'#HRO:XQWO'#HUO:^QWO'#H[O:cQ!LZO'#H`O){QYO'#HbO:nQ!LZO'#HdO:yQ!LZO'#HfO5iQ!LYO'#HhO){QYO'#IsOOOS'#Hn'#HnO;UOSO,59nOOQ!LS,59n,59nO=gQbO'#CgO=qQYO'#HoO>OQWO'#ItO?}QbO'#ItO'dQYO'#ItO@UQWO,59sO@lQ&jO'#D^OAeQWO'#EXOArQWO'#JPOA}QWO'#JOOBVQWO,5:uOB[QWO'#I}OBcQWO'#DuO5vQ#tO'#EVOBqQWO'#EVOB|Q`O'#E}OOQ!LS,5:O,5:OOCUQYO,5:OOESQ!LdO,5:YOEpQWO,5:`OFZQ!LYO'#I|O7VQWO'#I{OFbQWO'#I{OFjQWO,5:tOFoQWO'#I{OF}QYO,5:rOH}QWO'#ESOJXQWO,5:rOKhQWO'#DhOKoQYO'#DmOKyQ&jO,5:{O){QYO,5:{OOQQ'#En'#EnOOQQ'#Ep'#EpO){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}OOQQ'#Et'#EtOLRQYO,5;_OOQ!LS,5;d,5;dOOQ!LS,5;e,5;eONRQWO,5;eOOQ!LS,5;f,5;fO){QYO'#HyONWQ!LYO,5UOOQQ'#If'#IfOOQQ,5>V,5>VOOQQ-E;j-E;jO!+SQ!LdO,5:QOOQ!LQ'#Co'#CoO!+sQ#tO,5O,5>OO!7yQWO,5>OOOQQ,5>Q,5>QO!7yQWO,5>QOOQQ,5>S,5>SO!8OQ`O,5?_OOOS-E;l-E;lOOQ!LS1G/Y1G/YO!8TQbO,5>ZO){QYO,5>ZOOQO-E;m-E;mO!8_QWO,5?`O!8gQbO,5?`O!8nQWO,5?jOOQ!LS1G/_1G/_O!8vQpO'#DQOOQO'#Iv'#IvO){QYO'#IvO!9eQpO'#IvO!:SQpO'#D_O!:eQ&jO'#D_O!SQ&jO'#D_O){QYO,5?kO!>^QWO'#HtO!8nQWO,5?jOOQ!LQ1G0a1G0aO!?jQ&jO'#DxOOQ!LS,5:a,5:aO){QYO,5:aOH}QWO,5:aO!?qQWO,5:aO:^QWO,5:qO!,lQpO,5:qO!,tQ#tO,5:qO5vQ#tO,5:qOOQ!LS1G/j1G/jOOQ!LS1G/z1G/zOOQ!LQ'#ER'#ERO){QYO,5?hO!?|Q!LYO,5?hO!@_Q!LYO,5?hO!@fQWO,5?gO!@nQWO'#HvO!@fQWO,5?gOOQ!LQ1G0`1G0`O7VQWO,5?gOOQ!LS1G0^1G0^O!AYQ!LdO1G0^O!AyQ!LbO,5:nOOQ!LS'#Fm'#FmO!BgQ!LdO'#IlOF}QYO1G0^O!DfQ#tO'#IwO!DpQWO,5:SO!DuQbO'#IxO){QYO'#IxO!EPQWO,5:XOOQ!LS'#DQ'#DQOOQ!LS1G0g1G0gO!EUQWO1G0gO!GgQ!LdO1G0iO!GnQ!LdO1G0iO!JRQ!LdO1G0iO!JYQ!LdO1G0iO!LaQ!LdO1G0iO!LtQ!LdO1G0iO# eQ!LdO1G0iO# lQ!LdO1G0iO#$PQ!LdO1G0iO#$WQ!LdO1G0iO#%{Q!LdO1G0iO#(uQ7^O'#CgO#*pQ7^O1G0yO#,kQ7^O'#IrOOQ!LS1G1P1G1PO#-OQ!LdO,5>eOOQ!LQ-E;w-E;wO#-oQ!LdO1G0iOOQ!LS1G0i1G0iO#/qQ!LdO1G0|O#0bQpO,5;oO#0gQpO,5;pO#0lQpO'#FWO#1QQWO'#FVOOQO'#JU'#JUOOQO'#Hw'#HwO#1VQpO1G1XOOQ!LS1G1X1G1XOOOO1G1b1G1bO#1eQ7^O'#IqO#1oQWO,5;yOLRQYO,5;yOOOO-E;v-E;vOOQ!LS1G1U1G1UOOQ!LS,5;{,5;{O#1tQpO,5;{OOQ!LS,59`,59`OH}QWO'#InOOOS'#Hm'#HmO#1yOSO,59dOOQ!LS,59d,59dO){QYO1G1hO!(eQWO'#H{O#2UQWO,5SQWO'#J_O#>_QWO,5=[OOQQ1G.i1G.iO#>dQ!LYO1G.iO#>oQWO1G.iO!(ZQWO1G.iO5iQ!LYO1G.iO#>tQbO,5?|O#?OQWO,5?|O#?ZQYO,5=cO#?bQWO,5=cO7VQWO,5?|OOQQ1G2{1G2{O`QYO1G2{OOQQ1G3R1G3ROOQQ1G3T1G3TO:XQWO1G3VO#?gQYO1G3XO#CbQYO'#HWOOQQ1G3[1G3[O:^QWO1G3bO#CoQWO1G3bO5iQ!LYO1G3fOOQQ1G3h1G3hOOQ!LQ'#Ft'#FtO5iQ!LYO1G3jO5iQ!LYO1G3lOOOS1G4y1G4yO#CwQ`O,5`,5>`O7VQWO,5>`OOQO-E;r-E;rOOQ!LQ'#EO'#EOO#FbQ!LrO'#EPO!?bQ&jO'#DyOOQO'#Hs'#HsO#F|Q&jO,5:dOOQ!LS,5:d,5:dO#GTQ&jO'#DyO#GfQ&jO'#DyO#GmQ&jO'#EUO#GpQ&jO'#EPO#G}Q&jO'#EPO!?bQ&jO'#EPO#HbQWO1G/{O#HgQ`O1G/{OOQ!LS1G/{1G/{O){QYO1G/{OH}QWO1G/{OOQ!LS1G0]1G0]O:^QWO1G0]O!,lQpO1G0]O!,tQ#tO1G0]O#HnQ!LdO1G5SO){QYO1G5SO#IOQ!LYO1G5SO#IaQWO1G5RO7VQWO,5>bOOQO,5>b,5>bO#IiQWO,5>bOOQO-E;t-E;tO#IaQWO1G5RO#IwQ!LdO,59gO#KvQ!LdO,5g,5>gO$'gQWO,5>gOOQ!LS1G1{1G1{P$'lQWO'#H{POQ!LS-E;y-E;yO$(]Q#tO1G2WO$)OQ#tO1G2YO$)YQ#tO1G2[OOQ!LS1G1t1G1tO$)aQWO'#HzO$)oQWO,5?sO$)oQWO,5?sO$)wQWO,5?sO$*SQWO,5?sOOQO1G1v1G1vO$*bQ#tO1G1uO$*rQWO'#H|O$+SQWO,5?tOH}QWO,5?tO$+[Q`O,5?tOOQ!LS1G1y1G1yO5iQ!LYO,5j,5>jOOQO-E;|-E;|O!-lQ&jO,59iO){QYO,59iO$,gQWO1G1pOJ^QWO1G1wO$,lQ!LdO7+'TOOQ!LS7+'T7+'TOF}QYO7+'TOOQ!LS7+%W7+%WO$-]Q`O'#JZO#HbQWO7+'xO$-gQWO7+'xO$-oQ`O7+'xOOQQ7+'x7+'xOH}QWO7+'xO){QYO7+'xOH}QWO7+'xOOQO1G.v1G.vO$-yQ!LbO'#CgO$.ZQ!LbO,5r,5>rOOQO-El,5>lOOQ!LQ-En,5>nOOQO-E[,5>[OOQO-E;n-E;nOOQO,5>a,5>aOOQO-E;s-E;sO!,lQpO1G/eOOQO1G3z1G3zO:^QWO,5:eOOQO,5:k,5:kO){QYO,5:kO$8tQ!LYO,5:kO$9PQ!LYO,5:kO!,lQpO,5:eOOQO-E;q-E;qOOQ!LS1G0O1G0OO!?bQ&jO,5:eO$9_Q&jO,5:eO$9pQ!LrO,5:kO$:[Q&jO,5:eO!?bQ&jO,5:kOOQO,5:p,5:pO$:cQ&jO,5:kO$:pQ!LYO,5:kOOQ!LS7+%g7+%gO#HbQWO7+%gO#HgQ`O7+%gOOQ!LS7+%w7+%wO:^QWO7+%wO!,lQpO7+%wO$;UQ!LdO7+*nO){QYO7+*nOOQO1G3|1G3|O7VQWO1G3|O$;fQWO7+*mO$;nQ!LdO1G2WO$=pQ!LdO1G2YO$?rQ!LdO1G1uO$AzQ#tO,5>]OOQO-E;o-E;oO$BUQbO,5>^O){QYO,5>^OOQO-E;p-E;pO$B`QWO1G5OO$BhQ7^O1G0^O$DoQ7^O1G0iO$DvQ7^O1G0iO$FwQ7^O1G0iO$GOQ7^O1G0iO$HsQ7^O1G0iO$IWQ7^O1G0iO$KeQ7^O1G0iO$KlQ7^O1G0iO$MmQ7^O1G0iO$MtQ7^O1G0iO% iQ7^O1G0iO% |Q!LdO<eOOOO7+'P7+'POOOS1G4t1G4tOOQ!LS1G4R1G4ROJ^QWO7+'vO%&vQWO,5>fO5qQWO,5>fOOQO-E;x-E;xO%'UQWO1G5_O%'UQWO1G5_O%'^QWO1G5_O%'iQ`O,5>hO%'sQWO,5>hOH}QWO,5>hOOQO-E;z-E;zO%'xQ`O1G5`O%(SQWO1G5`OOQO1G2O1G2OOOQO1G2P1G2PO5iQ!LYO1G2PO$+fQWO1G2PO5iQ!LYO1G2OO%([QWO1G2QOH}QWO1G2QOOQO1G2R1G2RO5iQ!LYO1G2UO!,lQpO1G2OO#4jQWO1G2PO%(aQWO1G2QO%(iQWO1G2POJ^QWO7+*]OOQ!LS1G/T1G/TO%(tQWO1G/TOOQ!LS7+'[7+'[O%(yQ#tO7+'cO%)ZQ!LdO<q,5>qO%+VQWO,5>qO#;kQWO,5>qOOQO-EpOOQO-EQQ`O1G4SO%>[QWO7+*zOOQO7+'k7+'kO5iQ!LYO7+'kOOQO7+'j7+'jO$+fQWO7+'lO%>dQ`O7+'lOOQO7+'p7+'pO5iQ!LYO7+'jO$+fQWO7+'kO%>kQWO7+'lOH}QWO7+'lO#4jQWO7+'kO%>pQ#tO<zQ`O,5>kOOQO-E;}-E;}O#HbQWOANAOOOQQANAOANAOOH}QWOANAOO%?UQ!LbO7+'nOOQQAN=dAN=dO5qQWO1G4]OOQO1G4]1G4]O%?cQWO1G4]O%?hQWO7++RO%?hQWO7++RO5iQ!LYOANAkO%?pQWOANAkOOQQANAkANAkO%?uQWOANAOO%?}Q`OANAOOOQQANAVANAVOOQQANAWANAWO%@XQWO,5>mOOQO-E}AN>}O%C|Q!LdO<wAN>wOOQOAN>qAN>qO%/yQ!LdOAN>wO:^QWOAN>qO){QYOAN>wO!,lQpOAN>qO&&xQ!LYOAN>wO&'TQ7^O<WOz%{O~Ou&OO!S&YO!T&RO!U&RO'X$aO~O]&POj&PO|&SO'd%|O!O'iP!O'tP~P@ZOz'qX}'qX!X'qX!_'qX'n'qX~O!w'qX#S!{X!O'qX~PASO!w&ZOz'sX}'sX~O}&[Oz'rX~Oz&^O~O!w#dO~PASOR&bO!P&_O!k&aO'W$_O~Ob&gO!`$WO'W$_O~Or$mO!`$lO~O!O&hO~P`Or!zOs!zOu!{O!^!xO!`!yO'aQOP!baY!bai!ba}!ba!]!ba!f!ba#W!ba#X!ba#Y!ba#Z!ba#[!ba#]!ba#^!ba#_!ba#a!ba#c!ba#e!ba#f!ba'n!ba'u!ba'v!ba~O^!ba'R!baz!ba!_!ba'c!ba!P!ba$|!ba!X!ba~PC]O!_&iO~O!X!vO!w&kO'n&jO}'pX^'pX'R'pX~O!_'pX~PEuO}&oO!_'oX~O!_&qO~Ou$sO!P$tO#R&rO'W$_O~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'W9VO'aQO'mYO'zaO~O]#pOg#}Oi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'W&vO'a#rO~O#S&xO~O]#pOg#}Oi#qOj#pOk#pOn$OOp$POu#wO!P#xO!Z$UO!`#uO#R$VO#p$SO$Z$QO$]$RO$`$TO'W&vO'a#rO~O'['kP~PJ^O|&|O!_'lP~P){O'd'OO'mYO~OP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!P!bO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'W'^O'aQO'mYO'z:hO~O!`!yO~O}#aO^$Xa'R$Xa!_$Xaz$Xa!P$Xa$|$Xa!X$Xa~O#`'eO~PH}O!X'gO!P'wX#s'wX#v'wX#}'wX~Or'hO~PNyOr'hO!P'wX#s'wX#v'wX#}'wX~O!P'jO#s'nO#v'iO#}'oO~O|'rO~PLRO#v#eO#}'uO~Or$aXu$aX!^$aX'n$aX'u$aX'v$aX~OReX}eX!weX'[eX'[$aX~P!!cOj'wO~O'O'yO'P'xO'Q'{O~Or'}Ou(OO'n#ZO'u(QO'v(SO~O'['|O~P!#lO'[(VO~O]#pOg#}Oi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'a#rO~O|(ZO'W(WO!_'{P~P!$ZO#S(]O~O|(aO'W(^Oz'|P~P!$ZO^(jOi(oOu(gO!S(mO!T(fO!U(fO!`(dO!t(nO$s(iO'X$aO'd(cO~O!O(lO~P!&RO!^!xOr'`Xu'`X'n'`X'u'`X'v'`X}'`X!w'`X~O'['`X#i'`X~P!&}OR(rO!w(qO}'_X'['_X~O}(sO'['^X~O'W(uO~O!`(zO~O'W&vO~O!`(dO~Ou$sO|!qO!P$tO#Q!tO#R!qO'W$_O!_'oP~O!X!vO#S)OO~OP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'aQO'n#ZO'u!|O'v!}O~O^!Ya}!Ya'R!Yaz!Ya!_!Ya'c!Ya!P!Ya$|!Ya!X!Ya~P!)`OR)WO!P&_O!k)VO$|)UO']$bO~O'W$yO'['^P~O!X)ZO!P'ZX^'ZX'R'ZX~O!`$WO']$bO~O!`$WO'W$_O']$bO~O!X!vO#S&xO~O$})gO'W)cO!O(TP~O})hO[(SX~O'd'OO~OY)lO~O[)mO~O!P$jO'W$_O'X$aO[(SP~Ou$sO|)rO!P$tO'W$_Oz'rP~O]&VOj&VO|)sO'd'OO!O'tP~O})tO^(PX'R(PX~O!w)xO']$bO~OR){O!P#xO']$bO~O!P)}O~Or*PO!PSO~O!j*UO~Ob*ZO~O'W(uO!O(RP~Ob$hO~O$}tO'W$yO~P8tOY*aO[*`O~OPTOQTO]cOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#t^O${qO'aQO'mYO'zaO~O!P!bO#p!kO'W9VO~P!0uO[*`O^$ZO'R$ZO~O^*eO#`*gO%P*gO%Q*gO~P){O!`%^O~O%p*lO~O!P*nO~O&Q*qO&R*pOP&OaQ&OaW&Oa]&Oa^&Oaa&Oab&Oag&Oai&Oaj&Oak&Oan&Oap&Oau&Oaw&Oax&Oay&Oa!P&Oa!Z&Oa!`&Oa!c&Oa!d&Oa!e&Oa!f&Oa!g&Oa!j&Oa#`&Oa#p&Oa#t&Oa${&Oa$}&Oa%P&Oa%Q&Oa%T&Oa%V&Oa%Y&Oa%Z&Oa%]&Oa%j&Oa%p&Oa%r&Oa%t&Oa%v&Oa%y&Oa&P&Oa&T&Oa&V&Oa&X&Oa&Z&Oa&]&Oa&|&Oa'W&Oa'a&Oa'm&Oa'z&Oa!O&Oa%w&Oa_&Oa%|&Oa~O'W*tO~O'c*wO~Oz&ca}&ca~P!)`O}!]Oz'ha~Oz'ha~P>WO}&[Oz'ra~O}tX}!VX!OtX!O!VX!XtX!X!VX!`!VX!wtX']!VX~O!X+OO!w*}O}#PX}'jX!O#PX!O'jX!X'jX!`'jX']'jX~O!X+QO!`$WO']$bO}!RX!O!RX~O]%}Oj%}Ou&OO'd(cO~OP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!P!bO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'aQO'mYO'z:hO~O'W9sO~P!:sO}+UO!O'iX~O!O+WO~O!X+OO!w*}O}#PX!O#PX~O}+XO!O'tX~O!O+ZO~O]%}Oj%}Ou&OO'X$aO'd(cO~O!T+[O!U+[O~P!=qOu$sO|+_O!P$tO'W$_Oz&hX}&hX~O^+dO!S+gO!T+cO!U+cO!n+kO!o+iO!p+jO!q+hO!t+lO'X$aO'd(cO'm+aO~O!O+fO~P!>rOR+qO!P&_O!k+pO~O!w+wO}'pa!_'pa^'pa'R'pa~O!X!vO~P!?|O}&oO!_'oa~Ou$sO|+zO!P$tO#Q+|O#R+zO'W$_O}&jX!_&jX~O^!zi}!zi'R!ziz!zi!_!zi'c!zi!P!zi$|!zi!X!zi~P!)`O#S!va}!va!_!va!w!va!P!va^!va'R!vaz!va~P!#lO#S'`XP'`XY'`X^'`Xi'`Xs'`X!]'`X!`'`X!f'`X#W'`X#X'`X#Y'`X#Z'`X#['`X#]'`X#^'`X#_'`X#a'`X#c'`X#e'`X#f'`X'R'`X'a'`X!_'`Xz'`X!P'`X'c'`X$|'`X!X'`X~P!&}O},VO'['kX~P!#lO'[,XO~O},YO!_'lX~P!)`O!_,]O~Oz,^O~OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'aQOY#Vi^#Vii#Vi}#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O#W#Vi~P!EZO#W#OO~P!EZOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO'aQOY#Vi^#Vi}#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~Oi#Vi~P!GuOi#QO~P!GuOP#]Oi#QOr!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO'aQO^#Vi}#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'u#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P!JaOY#cO!]#SO#]#SO#^#SO#_#SO~P!JaOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO'aQO^#Vi}#Vi#c#Vi#e#Vi#f#Vi'R#Vi'n#Vi'v#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O'u#Vi~P!MXO'u!|O~P!MXOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO'aQO'u!|O^#Vi}#Vi#e#Vi#f#Vi'R#Vi'n#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~O'v#Vi~P# sO'v!}O~P# sOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO'aQO'u!|O'v!}O~O^#Vi}#Vi#f#Vi'R#Vi'n#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~P#$_OPZXYZXiZXrZXsZXuZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'aZX'nZX'uZX'vZX}ZX!OZX~O#iZX~P#&rOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO#e9cO#f9dO'aQO'n#ZO'u!|O'v!}O~O#i,`O~P#(|OP'fXY'fXi'fXr'fXs'fXu'fX!]'fX!^'fX!`'fX!f'fX#W'fX#X'fX#Y'fX#Z'fX#['fX#]'fX#^'fX#a'fX#c'fX#e'fX#f'fX'a'fX'n'fX'u'fX'v'fX}'fX~O!w9hO#k9hO#_'fX#i'fX!O'fX~P#*wO^&ma}&ma'R&ma!_&ma'c&maz&ma!P&ma$|&ma!X&ma~P!)`OP#ViY#Vi^#Vii#Vis#Vi}#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'R#Vi'a#Viz#Vi!_#Vi'c#Vi!P#Vi$|#Vi!X#Vi~P!#lO^#ji}#ji'R#jiz#ji!_#ji'c#ji!P#ji$|#ji!X#ji~P!)`O#v,bO~O#v,cO~O!X'gO!w,dO!P#zX#s#zX#v#zX#}#zX~O|,eO~O!P'jO#s,gO#v'iO#},hO~O}9eO!O'eX~P#(|O!O,iO~O#},kO~O'O'yO'P'xO'Q,nO~O],qOj,qOz,rO~O}cX!XcX!_cX!_$aX'ncX~P!!cO!_,xO~P!#lO},yO!X!vO'n&jO!_'{X~O!_-OO~Oz$aX}$aX!X$hX~P!!cO}-QOz'|X~P!#lO!X-SO~Oz-UO~O|(ZO'W$_O!_'{P~Oi-YO!X!vO!`$WO']$bO'n&jO~O!X)ZO~O!O-`O~P!&RO!T-aO!U-aO'X$aO'd(cO~Ou-cO'd(cO~O!t-dO~O'W$yO}&rX'[&rX~O}(sO'['^a~Or-iOs-iOu-jO'noa'uoa'voa}oa!woa~O'[oa#ioa~P#5{Or'}Ou(OO'n$Ya'u$Ya'v$Ya}$Ya!w$Ya~O'[$Ya#i$Ya~P#6qOr'}Ou(OO'n$[a'u$[a'v$[a}$[a!w$[a~O'[$[a#i$[a~P#7dO]-kO~O#S-lO~O'[$ja}$ja#i$ja!w$ja~P!#lO#S-oO~OR-xO!P&_O!k-wO$|-vO~O'[-yO~O]#pOi#qOj#pOk#pOn$OOp9iOu#wO!P#xO!Z:lO!`#uO#R9oO#p$SO$Z9kO$]9mO$`$TO'a#rO~Og-{O'W-zO~P#9ZO!X)ZO!P'Za^'Za'R'Za~O#S.RO~OYZX}cX!OcX~O}.SO!O(TX~O!O.UO~OY.VO~O'W)cO~O!P$jO'W$_O[&zX}&zX~O})hO[(Sa~O!_.[O~P!)`O].^O~OY._O~O[.`O~OR-xO!P&_O!k-wO$|-vO']$bO~O})tO^(Pa'R(Pa~O!w.fO~OR.iO!P#xO~O'd'OO!O(QP~OR.sO!P.oO!k.rO$|.qO']$bO~OY.}O}.{O!O(RX~O!O/OO~O[/QO^$ZO'R$ZO~O]/RO~O#_/TO%n/UO~P0zO!w#dO#_/TO%n/UO~O^/VO~P){O^/XO~O%w/]OP%uiQ%uiW%ui]%ui^%uia%uib%uig%uii%uij%uik%uin%uip%uiu%uiw%uix%uiy%ui!P%ui!Z%ui!`%ui!c%ui!d%ui!e%ui!f%ui!g%ui!j%ui#`%ui#p%ui#t%ui${%ui$}%ui%P%ui%Q%ui%T%ui%V%ui%Y%ui%Z%ui%]%ui%j%ui%p%ui%r%ui%t%ui%v%ui%y%ui&P%ui&T%ui&V%ui&X%ui&Z%ui&]%ui&|%ui'W%ui'a%ui'm%ui'z%ui!O%ui_%ui%|%ui~O_/cO!O/aO%|/bO~P`O!PSO!`/fO~O}#aO'c$Xa~Oz&ci}&ci~P!)`O}!]Oz'hi~O}&[Oz'ri~Oz/jO~O}!Ra!O!Ra~P#(|O]%}Oj%}O|/pO'd(cO}&dX!O&dX~P@ZO}+UO!O'ia~O]&VOj&VO|)sO'd'OO}&iX!O&iX~O}+XO!O'ta~Oz'si}'si~P!)`O^$ZO!X!vO!`$WO!f/{O!w/yO'R$ZO']$bO'n&jO~O!O0OO~P!>rO!T0PO!U0PO'X$aO'd(cO'm+aO~O!S0QO~P#GTO!PSO!S0QO!q0SO!t0TO~P#GTO!S0QO!o0VO!p0VO!q0SO!t0TO~P#GTO!P&_O~O!P&_O~P!#lO}'pi!_'pi^'pi'R'pi~P!)`O!w0`O}'pi!_'pi^'pi'R'pi~O}&oO!_'oi~Ou$sO!P$tO#R0bO'W$_O~O#SoaPoaYoa^oaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa'Roa'aoa!_oazoa!Poa'coa$|oa!Xoa~P#5{O#S$YaP$YaY$Ya^$Yai$Yas$Ya!]$Ya!^$Ya!`$Ya!f$Ya#W$Ya#X$Ya#Y$Ya#Z$Ya#[$Ya#]$Ya#^$Ya#_$Ya#a$Ya#c$Ya#e$Ya#f$Ya'R$Ya'a$Ya!_$Yaz$Ya!P$Ya'c$Ya$|$Ya!X$Ya~P#6qO#S$[aP$[aY$[a^$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a'R$[a'a$[a!_$[az$[a!P$[a'c$[a$|$[a!X$[a~P#7dO#S$jaP$jaY$ja^$jai$jas$ja}$ja!]$ja!^$ja!`$ja!f$ja#W$ja#X$ja#Y$ja#Z$ja#[$ja#]$ja#^$ja#_$ja#a$ja#c$ja#e$ja#f$ja'R$ja'a$ja!_$jaz$ja!P$ja!w$ja'c$ja$|$ja!X$ja~P!#lO^!zq}!zq'R!zqz!zq!_!zq'c!zq!P!zq$|!zq!X!zq~P!)`O}&eX'[&eX~PJ^O},VO'['ka~O|0jO}&fX!_&fX~P){O},YO!_'la~O},YO!_'la~P!)`O#i!ba!O!ba~PC]O#i!Ya}!Ya!O!Ya~P#(|O!P0}O#t^O#{1OO~O!O1SO~O'c1TO~P!#lO^$Uq}$Uq'R$Uqz$Uq!_$Uq'c$Uq!P$Uq$|$Uq!X$Uq~P!)`Oz1UO~O],qOj,qO~Or'}Ou(OO'v(SO'n$ti'u$ti}$ti!w$ti~O'[$ti#i$ti~P$'tOr'}Ou(OO'n$vi'u$vi'v$vi}$vi!w$vi~O'[$vi#i$vi~P$(gO#i1VO~P!#lO|1XO'W$_O}&nX!_&nX~O},yO!_'{a~O},yO!X!vO!_'{a~O},yO!X!vO'n&jO!_'{a~O'[$ci}$ci#i$ci!w$ci~P!#lO|1`O'W(^Oz&pX}&pX~P!$ZO}-QOz'|a~O}-QOz'|a~P!#lO!X!vO~O!X!vO#_1jO~Oi1nO!X!vO'n&jO~O}'_i'['_i~P!#lO!w1qO}'_i'['_i~P!#lO!_1tO~O^$Vq}$Vq'R$Vqz$Vq!_$Vq'c$Vq!P$Vq$|$Vq!X$Vq~P!)`O}1xO!P'}X~P!#lO!P&_O$|1{O~O!P&_O$|1{O~P!#lO!P$aX$qZX^$aX'R$aX~P!!cO$q2POrfXufX!PfX'nfX'ufX'vfX^fX'RfX~O$q2PO~O$}2WO'W)cO}&yX!O&yX~O}.SO!O(Ta~OY2[O~O[2]O~O]2`O~OR2bO!P&_O!k2aO$|1{O~O^$ZO'R$ZO~P!#lO!P#xO~P!#lO}2gO!w2iO!O(QX~O!O2jO~Ou(gO!S2sO!T2lO!U2lO!n2rO!o2qO!p2qO!t2pO'X$aO'd(cO'm+aO~O!O2oO~P$0uOR2zO!P.oO!k2yO$|2xO~OR2zO!P.oO!k2yO$|2xO']$bO~O'W(uO}&xX!O&xX~O}.{O!O(Ra~O'd3TO~O]3VO~O[3XO~O!_3[O~P){O^3^O~O^3^O~P){O#_3`O%n3aO~PEuO_/cO!O3eO%|/bO~P`O!X3gO~O&R3hOP&OqQ&OqW&Oq]&Oq^&Oqa&Oqb&Oqg&Oqi&Oqj&Oqk&Oqn&Oqp&Oqu&Oqw&Oqx&Oqy&Oq!P&Oq!Z&Oq!`&Oq!c&Oq!d&Oq!e&Oq!f&Oq!g&Oq!j&Oq#`&Oq#p&Oq#t&Oq${&Oq$}&Oq%P&Oq%Q&Oq%T&Oq%V&Oq%Y&Oq%Z&Oq%]&Oq%j&Oq%p&Oq%r&Oq%t&Oq%v&Oq%y&Oq&P&Oq&T&Oq&V&Oq&X&Oq&Z&Oq&]&Oq&|&Oq'W&Oq'a&Oq'm&Oq'z&Oq!O&Oq%w&Oq_&Oq%|&Oq~O}#Pi!O#Pi~P#(|O!w3jO}#Pi!O#Pi~O}!Ri!O!Ri~P#(|O^$ZO!w3qO'R$ZO~O^$ZO!X!vO!w3qO'R$ZO~O!T3uO!U3uO'X$aO'd(cO'm+aO~O^$ZO!X!vO!`$WO!f3vO!w3qO'R$ZO']$bO'n&jO~O!S3wO~P$9_O!S3wO!q3zO!t3{O~P$9_O^$ZO!X!vO!f3vO!w3qO'R$ZO'n&jO~O}'pq!_'pq^'pq'R'pq~P!)`O}&oO!_'oq~O#S$tiP$tiY$ti^$tii$tis$ti!]$ti!^$ti!`$ti!f$ti#W$ti#X$ti#Y$ti#Z$ti#[$ti#]$ti#^$ti#_$ti#a$ti#c$ti#e$ti#f$ti'R$ti'a$ti!_$tiz$ti!P$ti'c$ti$|$ti!X$ti~P$'tO#S$viP$viY$vi^$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi'R$vi'a$vi!_$viz$vi!P$vi'c$vi$|$vi!X$vi~P$(gO#S$ciP$ciY$ci^$cii$cis$ci}$ci!]$ci!^$ci!`$ci!f$ci#W$ci#X$ci#Y$ci#Z$ci#[$ci#]$ci#^$ci#_$ci#a$ci#c$ci#e$ci#f$ci'R$ci'a$ci!_$ciz$ci!P$ci!w$ci'c$ci$|$ci!X$ci~P!#lO}&ea'[&ea~P!#lO}&fa!_&fa~P!)`O},YO!_'li~O#i!zi}!zi!O!zi~P#(|OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'aQOY#Vii#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~O#W#Vi~P$BuO#W9YO~P$BuOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO'aQOY#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~Oi#Vi~P$D}Oi9[O~P$D}OP#]Oi9[Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O'aQO#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'u#Vi'v#Vi}#Vi!O#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P$GVOY9gO!]9^O#]9^O#^9^O#_9^O~P$GVOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O'aQO#c#Vi#e#Vi#f#Vi#i#Vi'n#Vi'v#Vi}#Vi!O#Vi~O'u#Vi~P$IkO'u!|O~P$IkOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO'aQO'u!|O#e#Vi#f#Vi#i#Vi'n#Vi}#Vi!O#Vi~O'v#Vi~P$KsO'v!}O~P$KsOP#]OY9gOi9[Or!zOs!zOu!{O!]9^O!^!xO!`!yO!f#]O#W9YO#X9ZO#Y9ZO#Z9ZO#[9]O#]9^O#^9^O#_9^O#a9_O#c9aO#e9cO'aQO'u!|O'v!}O~O#f#Vi#i#Vi'n#Vi}#Vi!O#Vi~P$M{O^#gy}#gy'R#gyz#gy!_#gy'c#gy!P#gy$|#gy!X#gy~P!)`OP#ViY#Vii#Vis#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'a#Vi}#Vi!O#Vi~P!#lO!^!xOP'`XY'`Xi'`Xr'`Xs'`Xu'`X!]'`X!`'`X!f'`X#W'`X#X'`X#Y'`X#Z'`X#['`X#]'`X#^'`X#_'`X#a'`X#c'`X#e'`X#f'`X#i'`X'a'`X'n'`X'u'`X'v'`X}'`X!O'`X~O#i#ji}#ji!O#ji~P#(|O!O4]O~O}&ma!O&ma~P#(|O!X!vO'n&jO}&na!_&na~O},yO!_'{i~O},yO!X!vO!_'{i~Oz&pa}&pa~P!#lO!X4dO~O}-QOz'|i~P!#lO}-QOz'|i~Oz4jO~O!X!vO#_4pO~Oi4qO!X!vO'n&jO~Oz4sO~O'[$eq}$eq#i$eq!w$eq~P!#lO^$Vy}$Vy'R$Vyz$Vy!_$Vy'c$Vy!P$Vy$|$Vy!X$Vy~P!)`O}1xO!P'}a~O!P&_O$|4xO~O!P&_O$|4xO~P!#lO^!zy}!zy'R!zyz!zy!_!zy'c!zy!P!zy$|!zy!X!zy~P!)`OY4{O~O}.SO!O(Ti~O]5QO~O[5RO~O'd'OO}&uX!O&uX~O}2gO!O(Qa~O!O5`O~P$0uOu-cO'd(cO'm+aO~O!S5cO!T5bO!U5bO!t0TO'X$aO'd(cO'm+aO~O!o5dO!p5dO~P%,eO!T5bO!U5bO'X$aO'd(cO'm+aO~O!P.oO~O!P.oO$|5fO~O!P.oO$|5fO~P!#lOR5kO!P.oO!k5jO$|5fO~OY5pO}&xa!O&xa~O}.{O!O(Ri~O]5sO~O!_5tO~O!_5uO~O!_5vO~O!_5vO~P){O^5xO~O!X5{O~O!_5}O~O}'si!O'si~P#(|O^$ZO'R$ZO~P!)`O^$ZO!w6SO'R$ZO~O^$ZO!X!vO!w6SO'R$ZO~O!T6XO!U6XO'X$aO'd(cO'm+aO~O^$ZO!X!vO!f6YO!w6SO'R$ZO'n&jO~O!`$WO']$bO~P%1PO!S6ZO~P%0nO}'py!_'py^'py'R'py~P!)`O#S$eqP$eqY$eq^$eqi$eqs$eq}$eq!]$eq!^$eq!`$eq!f$eq#W$eq#X$eq#Y$eq#Z$eq#[$eq#]$eq#^$eq#_$eq#a$eq#c$eq#e$eq#f$eq'R$eq'a$eq!_$eqz$eq!P$eq!w$eq'c$eq$|$eq!X$eq~P!#lO}&fi!_&fi~P!)`O#i!zq}!zq!O!zq~P#(|Or-iOs-iOu-jOPoaYoaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa#ioa'aoa'noa'uoa'voa}oa!Ooa~Or'}Ou(OOP$YaY$Yai$Yas$Ya!]$Ya!^$Ya!`$Ya!f$Ya#W$Ya#X$Ya#Y$Ya#Z$Ya#[$Ya#]$Ya#^$Ya#_$Ya#a$Ya#c$Ya#e$Ya#f$Ya#i$Ya'a$Ya'n$Ya'u$Ya'v$Ya}$Ya!O$Ya~Or'}Ou(OOP$[aY$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a#i$[a'a$[a'n$[a'u$[a'v$[a}$[a!O$[a~OP$jaY$jai$jas$ja!]$ja!^$ja!`$ja!f$ja#W$ja#X$ja#Y$ja#Z$ja#[$ja#]$ja#^$ja#_$ja#a$ja#c$ja#e$ja#f$ja#i$ja'a$ja}$ja!O$ja~P!#lO#i$Uq}$Uq!O$Uq~P#(|O#i$Vq}$Vq!O$Vq~P#(|O!O6eO~O'[$xy}$xy#i$xy!w$xy~P!#lO!X!vO}&ni!_&ni~O!X!vO'n&jO}&ni!_&ni~O},yO!_'{q~Oz&pi}&pi~P!#lO}-QOz'|q~Oz6lO~P!#lOz6lO~O}'_y'['_y~P!#lO}&sa!P&sa~P!#lO!P$pq^$pq'R$pq~P!#lOY6tO~O}.SO!O(Tq~O]6wO~O!P&_O$|6xO~O!P&_O$|6xO~P!#lO!w6yO}&ua!O&ua~O}2gO!O(Qi~P#(|O!T7PO!U7PO'X$aO'd(cO'm+aO~O!S7RO!t3{O~P%@nO!P.oO$|7UO~O!P.oO$|7UO~P!#lO'd7[O~O}.{O!O(Rq~O!_7_O~O!_7_O~P){O!_7aO~O!_7bO~O}#Py!O#Py~P#(|O^$ZO!w7hO'R$ZO~O^$ZO!X!vO!w7hO'R$ZO~O!T7kO!U7kO'X$aO'd(cO'm+aO~O^$ZO!X!vO!f7lO!w7hO'R$ZO'n&jO~O#S$xyP$xyY$xy^$xyi$xys$xy}$xy!]$xy!^$xy!`$xy!f$xy#W$xy#X$xy#Y$xy#Z$xy#[$xy#]$xy#^$xy#_$xy#a$xy#c$xy#e$xy#f$xy'R$xy'a$xy!_$xyz$xy!P$xy!w$xy'c$xy$|$xy!X$xy~P!#lO#i#gy}#gy!O#gy~P#(|OP$ciY$cii$cis$ci!]$ci!^$ci!`$ci!f$ci#W$ci#X$ci#Y$ci#Z$ci#[$ci#]$ci#^$ci#_$ci#a$ci#c$ci#e$ci#f$ci#i$ci'a$ci}$ci!O$ci~P!#lOr'}Ou(OO'v(SOP$tiY$tii$tis$ti!]$ti!^$ti!`$ti!f$ti#W$ti#X$ti#Y$ti#Z$ti#[$ti#]$ti#^$ti#_$ti#a$ti#c$ti#e$ti#f$ti#i$ti'a$ti'n$ti'u$ti}$ti!O$ti~Or'}Ou(OOP$viY$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi#i$vi'a$vi'n$vi'u$vi'v$vi}$vi!O$vi~O#i$Vy}$Vy!O$Vy~P#(|O#i!zy}!zy!O!zy~P#(|O!X!vO}&nq!_&nq~O},yO!_'{y~Oz&pq}&pq~P!#lOz7rO~P!#lO}.SO!O(Ty~O}2gO!O(Qq~O!T8OO!U8OO'X$aO'd(cO'm+aO~O!P.oO$|8RO~O!P.oO$|8RO~P!#lO!_8UO~O&R8VOP&O!ZQ&O!ZW&O!Z]&O!Z^&O!Za&O!Zb&O!Zg&O!Zi&O!Zj&O!Zk&O!Zn&O!Zp&O!Zu&O!Zw&O!Zx&O!Zy&O!Z!P&O!Z!Z&O!Z!`&O!Z!c&O!Z!d&O!Z!e&O!Z!f&O!Z!g&O!Z!j&O!Z#`&O!Z#p&O!Z#t&O!Z${&O!Z$}&O!Z%P&O!Z%Q&O!Z%T&O!Z%V&O!Z%Y&O!Z%Z&O!Z%]&O!Z%j&O!Z%p&O!Z%r&O!Z%t&O!Z%v&O!Z%y&O!Z&P&O!Z&T&O!Z&V&O!Z&X&O!Z&Z&O!Z&]&O!Z&|&O!Z'W&O!Z'a&O!Z'm&O!Z'z&O!Z!O&O!Z%w&O!Z_&O!Z%|&O!Z~O^$ZO!w8[O'R$ZO~O^$ZO!X!vO!w8[O'R$ZO~OP$eqY$eqi$eqs$eq!]$eq!^$eq!`$eq!f$eq#W$eq#X$eq#Y$eq#Z$eq#[$eq#]$eq#^$eq#_$eq#a$eq#c$eq#e$eq#f$eq#i$eq'a$eq}$eq!O$eq~P!#lO}&uq!O&uq~P#(|O^$ZO!w8qO'R$ZO~OP$xyY$xyi$xys$xy!]$xy!^$xy!`$xy!f$xy#W$xy#X$xy#Y$xy#Z$xy#[$xy#]$xy#^$xy#_$xy#a$xy#c$xy#e$xy#f$xy#i$xy'a$xy}$xy!O$xy~P!#lO'c'eX~P.jO'cZXzZX!_ZX%nZX!PZX$|ZX!XZX~P$zO!XcX!_ZX!_cX'ncX~P;aOP9SOQ9SO]cOa:jOb!iOgcOi9SOjcOkcOn9SOp9SOuROwcOxcOycO!PSO!Z9UO!`UO!c9SO!d9SO!e9SO!f9SO!g9SO!j!hO#p!kO#t^O'W'^O'aQO'mYO'z:hO~O}9eO!O$Xa~O]#pOg#}Oi#qOj#pOk#pOn$OOp9jOu#wO!P#xO!Z:mO!`#uO#R9pO#p$SO$Z9lO$]9nO$`$TO'W&vO'a#rO~O#`'eO~P&+}O!OZX!OcX~P;aO#S9XO~O!X!vO#S9XO~O!w9hO~O#_9^O~O!w9qO}'sX!O'sX~O!w9hO}'qX!O'qX~O#S9rO~O'[9tO~P!#lO#S9yO~O#S9zO~O!X!vO#S9{O~O!X!vO#S9rO~O#i9|O~P#(|O#S9}O~O#S:OO~O#S:PO~O#S:QO~O#i:RO~P!#lO#i:SO~P!#lO#t~!^!n!p!q#Q#R'z$Z$]$`$q${$|$}%T%V%Y%Z%]%_~TS#t'z#Xy'T'U#v'T'W'd~", +- goto: "#Dk(XPPPPPPP(YP(jP*^PPPP-sPP.Y3j5^5qP5qPPP5q5qP5qP7_PP7dP7xPPPPwPPP>}AYP`!>h!>l!>lP!;jP!>p!>pP!AcP!AgRQWO'#IvO@QQbO'#IvO'dQYO'#IvO@XQWO,59sO@oQ&jO'#D^OAhQWO'#EXOAuQWO'#JROBQQWO'#JQOBYQWO,5:uOB_QWO'#JPOBfQWO'#DuO5yQ#tO'#EVOBtQWO'#EVOCPQ`O'#E}OOQ!LS,5:O,5:OOCXQYO,5:OOEVQ!LdO,5:YOEsQWO,5:`OF^Q!LYO'#JOO7YQWO'#I}OFeQWO'#I}OFmQWO,5:tOFrQWO'#I}OGQQYO,5:rOIQQWO'#ESOJ[QWO,5:rOKkQWO'#DhOKrQYO'#DmOK|Q&jO,5:{O){QYO,5:{OOQQ'#En'#EnOOQQ'#Ep'#EpO){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}O){QYO,5:}OOQQ'#Et'#EtOLUQYO,5;_OOQ!LS,5;d,5;dOOQ!LS,5;e,5;eONUQWO,5;eOOQ!LS,5;f,5;fO){QYO'#H{ONZQ!LYO,5WOOQQ'#Ih'#IhOOQQ,5>X,5>XOOQQ-E;l-E;lO!+zQ!LdO,5:QOOQ!LQ'#Co'#CoO!,kQ#tO,5OOOQQ,5>Q,5>QO!8qQWO,5>QOOQQ,5>S,5>SO!8qQWO,5>SOOQQ,5>U,5>UO!8vQ`O,5?aOOOS-E;n-E;nOOQ!LS1G/Y1G/YO!8{QbO,5>]O){QYO,5>]OOQO-E;o-E;oO!9VQWO,5?bO!9_QbO,5?bO!9fQWO,5?lOOQ!LS1G/_1G/_O!9nQpO'#DQOOQO'#Ix'#IxO){QYO'#IxO!:]QpO'#IxO!:zQpO'#D_O!;]Q&jO'#D_O!=hQYO'#D_O!=oQWO'#IwO!=wQWO,59xO!=|QWO'#E]O!>[QWO'#JSO!>dQWO,5:vO!>zQ&jO'#D_O){QYO,5?mO!?UQWO'#HvO!9fQWO,5?lOOQ!LQ1G0a1G0aO!@bQ&jO'#DxOOQ!LS,5:a,5:aO){QYO,5:aOIQQWO,5:aO!@iQWO,5:aO:aQWO,5:qO!-dQpO,5:qO!-lQ#tO,5:qO5yQ#tO,5:qOOQ!LS1G/j1G/jOOQ!LS1G/z1G/zOOQ!LQ'#ER'#ERO){QYO,5?jO!@tQ!LYO,5?jO!AVQ!LYO,5?jO!A^QWO,5?iO!AfQWO'#HxO!A^QWO,5?iOOQ!LQ1G0`1G0`O7YQWO,5?iOOQ!LS1G0^1G0^O!BQQ!LdO1G0^O!BqQ!LbO,5:nOOQ!LS'#Fo'#FoO!C_Q!LdO'#InOGQQYO1G0^O!E^Q#tO'#IyO!EhQWO,5:SO!EmQbO'#IzO){QYO'#IzO!EwQWO,5:XOOQ!LS'#DQ'#DQOOQ!LS1G0g1G0gO!E|QWO1G0gO!H_Q!LdO1G0iO!HfQ!LdO1G0iO!JyQ!LdO1G0iO!KQQ!LdO1G0iO!MXQ!LdO1G0iO!MlQ!LdO1G0iO#!]Q!LdO1G0iO#!dQ!LdO1G0iO#$wQ!LdO1G0iO#%OQ!LdO1G0iO#&sQ!LdO1G0iO#)mQ7^O'#CgO#+hQ7^O1G0yO#-cQ7^O'#ItOOQ!LS1G1P1G1PO#-vQ!LdO,5>gOOQ!LQ-E;y-E;yO#.gQ!LdO1G0iOOQ!LS1G0i1G0iO#0iQ!LdO1G0|O#1YQpO,5;qO#1bQpO,5;rO#1jQpO'#FYO#2RQWO'#FXOOQO'#JW'#JWOOQO'#Hy'#HyO#2WQpO1G1XOOQ!LS1G1X1G1XOOOO1G1d1G1dO#2iQ7^O'#IsO#2sQWO,5;{OLUQYO,5;{OOOO-E;x-E;xOOQ!LS1G1U1G1UOOQ!LS,5;},5;}O#2xQpO,5;}OOQ!LS,59`,59`OIQQWO'#IpOOOS'#Ho'#HoO#2}OSO,59dOOQ!LS,59d,59dO){QYO1G1jO!)]QWO'#H}O#3YQWO,5TQ!LYO,5?yOOQQ1G2d1G2dO!0eQWO1G2jOIQQWO1G2gO#>`QWO1G2gOOQQ1G2h1G2hOIQQWO1G2hO#>eQWO1G2hO#>mQ&jO'#GfOOQQ1G2j1G2jO!'iQ&jO'#IUO!0jQ`O1G2mOOQQ1G2m1G2mOOQQ,5=W,5=WO#>uQ#tO,5=YO5tQWO,5=YO#5sQWO,5=]O5bQWO,5=]O!-dQpO,5=]O!-lQ#tO,5=]O5yQ#tO,5=]O#?WQWO'#JaO#?cQWO,5=^OOQQ1G.i1G.iO#?hQ!LYO1G.iO#?sQWO1G.iO!)RQWO1G.iO5lQ!LYO1G.iO#?xQbO,5@OO#@SQWO,5@OO#@_QYO,5=eO#@fQWO,5=eO7YQWO,5@OOOQQ1G2}1G2}O`QYO1G2}OOQQ1G3T1G3TOOQQ1G3V1G3VO:[QWO1G3XO#@kQYO1G3ZO#DfQYO'#HYOOQQ1G3^1G3^O:aQWO1G3dO#DsQWO1G3dO5lQ!LYO1G3hOOQQ1G3j1G3jOOQ!LQ'#Fv'#FvO5lQ!LYO1G3lO5lQ!LYO1G3nOOOS1G4{1G4{O#D{Q`O,5b,5>bO7YQWO,5>bOOQO-E;t-E;tOOQ!LQ'#EO'#EOO#GfQ!LrO'#EPO!@YQ&jO'#DyOOQO'#Hu'#HuO#HQQ&jO,5:dOOQ!LS,5:d,5:dO#HXQ&jO'#DyO#HjQ&jO'#DyO#HqQ&jO'#EUO#HtQ&jO'#EPO#IRQ&jO'#EPO!@YQ&jO'#EPO#IfQWO1G/{O#IkQ`O1G/{OOQ!LS1G/{1G/{O){QYO1G/{OIQQWO1G/{OOQ!LS1G0]1G0]O:aQWO1G0]O!-dQpO1G0]O!-lQ#tO1G0]O#IrQ!LdO1G5UO){QYO1G5UO#JSQ!LYO1G5UO#JeQWO1G5TO7YQWO,5>dOOQO,5>d,5>dO#JmQWO,5>dOOQO-E;v-E;vO#JeQWO1G5TO#J{Q!LdO,59gO#LzQ!LdO,5i,5>iO$(kQWO,5>iOOQ!LS1G1}1G1}P$(pQWO'#H}POQ!LS-E;{-E;{O$)aQ#tO1G2YO$*SQ#tO1G2[O$*^Q#tO1G2^OOQ!LS1G1v1G1vO$*eQWO'#H|O$*sQWO,5?uO$*sQWO,5?uO$*{QWO,5?uO$+WQWO,5?uOOQO1G1x1G1xO$+fQ#tO1G1wO$+vQWO'#IOO$,WQWO,5?vOIQQWO,5?vO$,`Q`O,5?vOOQ!LS1G1{1G1{O5lQ!LYO,5l,5>lOOQO-Et,5>tOOQO-En,5>nOOQ!LQ-Ep,5>pOOQO-E^,5>^OOQO-E;p-E;pOOQO,5>c,5>cOOQO-E;u-E;uO!-dQpO1G/eOOQO1G3|1G3|O:aQWO,5:eOOQO,5:k,5:kO){QYO,5:kO$9xQ!LYO,5:kO$:TQ!LYO,5:kO!-dQpO,5:eOOQO-E;s-E;sOOQ!LS1G0O1G0OO!@YQ&jO,5:eO$:cQ&jO,5:eO$:tQ!LrO,5:kO$;`Q&jO,5:eO!@YQ&jO,5:kOOQO,5:p,5:pO$;gQ&jO,5:kO$;tQ!LYO,5:kOOQ!LS7+%g7+%gO#IfQWO7+%gO#IkQ`O7+%gOOQ!LS7+%w7+%wO:aQWO7+%wO!-dQpO7+%wO$tQ!LdO1G2[O$@vQ!LdO1G1wO$COQ#tO,5>_OOQO-E;q-E;qO$CYQbO,5>`O){QYO,5>`OOQO-E;r-E;rO$CdQWO1G5QO$ClQ7^O1G0^O$EsQ7^O1G0iO$EzQ7^O1G0iO$G{Q7^O1G0iO$HSQ7^O1G0iO$IwQ7^O1G0iO$J[Q7^O1G0iO$LiQ7^O1G0iO$LpQ7^O1G0iO$NqQ7^O1G0iO$NxQ7^O1G0iO%!mQ7^O1G0iO%#QQ!LdO<gOOOO7+'R7+'ROOOS1G4v1G4vOOQ!LS1G4T1G4TOJaQWO7+'xO%'zQWO,5>hO5tQWO,5>hOOQO-E;z-E;zO%(YQWO1G5aO%(YQWO1G5aO%(bQWO1G5aO%(mQ`O,5>jO%(wQWO,5>jOIQQWO,5>jOOQO-E;|-E;|O%(|Q`O1G5bO%)WQWO1G5bOOQO1G2Q1G2QOOQO1G2R1G2RO5lQ!LYO1G2RO$,jQWO1G2RO5lQ!LYO1G2QO%)`QWO1G2SOIQQWO1G2SOOQO1G2T1G2TO5lQ!LYO1G2WO!-dQpO1G2QO#5nQWO1G2RO%)eQWO1G2SO%)mQWO1G2ROJaQWO7+*_OOQ!LS1G/T1G/TO%)xQWO1G/TOOQ!LS7+'^7+'^O%)}Q#tO7+'eO%*_Q!LdO<s,5>sO%,ZQWO,5>sO#sOOQO-ErOOQO-ERQ#tO<cQWO1G4SO%>nQWO1G4SO%>|QWO7+*{O%>|QWO7+*{OIQQWO1G4UO%?UQ`O1G4UO%?`QWO7+*|OOQO7+'m7+'mO5lQ!LYO7+'mOOQO7+'l7+'lO$,jQWO7+'nO%?hQ`O7+'nOOQO7+'r7+'rO5lQ!LYO7+'lO$,jQWO7+'mO%?oQWO7+'nOIQQWO7+'nO#5nQWO7+'mO%?tQ#tO<mOOQO-EoOOQO-E}AN>}O%EQQ!LdO<wAN>wOOQOAN>qAN>qO%0}Q!LdOAN>wO:aQWOAN>qO){QYOAN>wO!-dQpOAN>qO&'|Q!LYOAN>wO&(XQ7^O<ZOz%}O~Ou&QO!S&[O!T&TO!U&TO'Z$cO~O]&ROj&RO|&UO'f&OO!O'kP!O'vP~P@^Oz'sX}'sX!X'sX!_'sX'p'sX~O!w'sX#S!{X!O'sX~PAVO!w&]Oz'uX}'uX~O}&^Oz'tX~Oz&`O~O!w#dO~PAVOR&dO!P&aO!k&cO'Y$aO~Ob&iO!`$YO'Y$aO~Or$oO!`$nO~O!O&jO~P`Or!zOs!zOu!{O!^!xO!`!yO'cQOP!baY!bai!ba}!ba!]!ba!f!ba#W!ba#X!ba#Y!ba#Z!ba#[!ba#]!ba#^!ba#_!ba#a!ba#c!ba#e!ba#f!ba'p!ba'w!ba'x!ba~O^!ba'T!baz!ba!_!ba'e!ba!P!ba%O!ba!X!ba~PC`O!_&kO~O!X!vO!w&mO'p&lO}'rX^'rX'T'rX~O!_'rX~PExO}&qO!_'qX~O!_&sO~Ou$uO!P$vO#R&tO'Y$aO~OPTOQTO]cOa!jOb!iOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!PSO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!j!hO#p!kO#t^O'Y9XO'cQO'oYO'|aO~O]#rOg$POi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'Y&xO'c#tO~O#S&zO~O]#rOg$POi#sOj#rOk#rOn$QOp$ROu#yO!P#zO!Z$WO!`#wO#R$XO#p$UO$]$SO$_$TO$b$VO'Y&xO'c#tO~O'^'mP~PJaO|'OO!_'nP~P){O'f'QO'oYO~OP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!P!bO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'Y'`O'cQO'oYO'|:jO~O!`!yO~O}#aO^$Za'T$Za!_$Zaz$Za!P$Za%O$Za!X$Za~O#`'gO~PIQOr'jO!X'iO!P#wX#s#wX#v#wX#x#wX$P#wX~O!X'iO!P'yX#s'yX#v'yX#x'yX$P'yX~Or'jO~P! eOr'jO!P'yX#s'yX#v'yX#x'yX$P'yX~O!P'lO#s'pO#v'kO#x'kO$P'qO~O|'tO~PLUO#v#fO#x#eO$P'wO~Or$cXu$cX!^$cX'p$cX'w$cX'x$cX~OReX}eX!weX'^eX'^$cX~P!#ZOj'yO~O'Q'{O'R'zO'S'}O~Or(POu(QO'p#ZO'w(SO'x(UO~O'^(OO~P!$dO'^(XO~O]#rOg$POi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'c#tO~O|(]O'Y(YO!_'}P~P!%RO#S(_O~O|(cO'Y(`Oz(OP~P!%RO^(lOi(qOu(iO!S(oO!T(hO!U(hO!`(fO!t(pO$u(kO'Z$cO'f(eO~O!O(nO~P!&yO!^!xOr'bXu'bX'p'bX'w'bX'x'bX}'bX!w'bX~O'^'bX#i'bX~P!'uOR(tO!w(sO}'aX'^'aX~O}(uO'^'`X~O'Y(wO~O!`(|O~O'Y&xO~O!`(fO~Ou$uO|!qO!P$vO#Q!tO#R!qO'Y$aO!_'qP~O!X!vO#S)QO~OP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO#f#YO'cQO'p#ZO'w!|O'x!}O~O^!Ya}!Ya'T!Yaz!Ya!_!Ya'e!Ya!P!Ya%O!Ya!X!Ya~P!*WOR)YO!P&aO!k)XO%O)WO'_$dO~O'Y${O'^'`P~O!X)]O!P']X^']X'T']X~O!`$YO'_$dO~O!`$YO'Y$aO'_$dO~O!X!vO#S&zO~O%P)iO'Y)eO!O(VP~O})jO[(UX~O'f'QO~OY)nO~O[)oO~O!P$lO'Y$aO'Z$cO[(UP~Ou$uO|)tO!P$vO'Y$aOz'tP~O]&XOj&XO|)uO'f'QO!O'vP~O})vO^(RX'T(RX~O!w)zO'_$dO~OR)}O!P#zO'_$dO~O!P*PO~Or*RO!PSO~O!j*WO~Ob*]O~O'Y(wO!O(TP~Ob$jO~O%PtO'Y${O~P8wOY*cO[*bO~OPTOQTO]cOanObmOgcOiTOjcOkcOnTOpTOuROwcOxcOycO!ZkO!`UO!cTO!dTO!eTO!fTO!gTO!jlO#t^O$}qO'cQO'oYO'|aO~O!P!bO#p!kO'Y9XO~P!1mO[*bO^$]O'T$]O~O^*gO#`*iO%R*iO%S*iO~P){O!`%`O~O%r*nO~O!P*pO~O&S*sO&T*rOP&QaQ&QaW&Qa]&Qa^&Qaa&Qab&Qag&Qai&Qaj&Qak&Qan&Qap&Qau&Qaw&Qax&Qay&Qa!P&Qa!Z&Qa!`&Qa!c&Qa!d&Qa!e&Qa!f&Qa!g&Qa!j&Qa#`&Qa#p&Qa#t&Qa$}&Qa%P&Qa%R&Qa%S&Qa%V&Qa%X&Qa%[&Qa%]&Qa%_&Qa%l&Qa%r&Qa%t&Qa%v&Qa%x&Qa%{&Qa&R&Qa&V&Qa&X&Qa&Z&Qa&]&Qa&_&Qa'O&Qa'Y&Qa'c&Qa'o&Qa'|&Qa!O&Qa%y&Qa_&Qa&O&Qa~O'Y*vO~O'e*yO~Oz&ea}&ea~P!*WO}!]Oz'ja~Oz'ja~P>ZO}&^Oz'ta~O}tX}!VX!OtX!O!VX!XtX!X!VX!`!VX!wtX'_!VX~O!X+QO!w+PO}#PX}'lX!O#PX!O'lX!X'lX!`'lX'_'lX~O!X+SO!`$YO'_$dO}!RX!O!RX~O]&POj&POu&QO'f(eO~OP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!P!bO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'cQO'oYO'|:jO~O'Y9uO~P!;kO}+WO!O'kX~O!O+YO~O!X+QO!w+PO}#PX!O#PX~O}+ZO!O'vX~O!O+]O~O]&POj&POu&QO'Z$cO'f(eO~O!T+^O!U+^O~P!>iOu$uO|+aO!P$vO'Y$aOz&jX}&jX~O^+fO!S+iO!T+eO!U+eO!n+mO!o+kO!p+lO!q+jO!t+nO'Z$cO'f(eO'o+cO~O!O+hO~P!?jOR+sO!P&aO!k+rO~O!w+yO}'ra!_'ra^'ra'T'ra~O!X!vO~P!@tO}&qO!_'qa~Ou$uO|+|O!P$vO#Q,OO#R+|O'Y$aO}&lX!_&lX~O^!zi}!zi'T!ziz!zi!_!zi'e!zi!P!zi%O!zi!X!zi~P!*WO#S!va}!va!_!va!w!va!P!va^!va'T!vaz!va~P!$dO#S'bXP'bXY'bX^'bXi'bXs'bX!]'bX!`'bX!f'bX#W'bX#X'bX#Y'bX#Z'bX#['bX#]'bX#^'bX#_'bX#a'bX#c'bX#e'bX#f'bX'T'bX'c'bX!_'bXz'bX!P'bX'e'bX%O'bX!X'bX~P!'uO},XO'^'mX~P!$dO'^,ZO~O},[O!_'nX~P!*WO!_,_O~Oz,`O~OP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'cQOY#Vi^#Vii#Vi}#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O#W#Vi~P!FRO#W#OO~P!FROP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO'cQOY#Vi^#Vi}#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~Oi#Vi~P!HmOi#QO~P!HmOP#]Oi#QOr!zOs!zOu!{O!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO'cQO^#Vi}#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'w#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P!KXOY#cO!]#SO#]#SO#^#SO#_#SO~P!KXOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO'cQO^#Vi}#Vi#c#Vi#e#Vi#f#Vi'T#Vi'p#Vi'x#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O'w#Vi~P!NPO'w!|O~P!NPOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO'cQO'w!|O^#Vi}#Vi#e#Vi#f#Vi'T#Vi'p#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~O'x#Vi~P#!kO'x!}O~P#!kOP#]OY#cOi#QOr!zOs!zOu!{O!]#SO!^!xO!`!yO!f#]O#W#OO#X#PO#Y#PO#Z#PO#[#RO#]#SO#^#SO#_#SO#a#TO#c#VO#e#XO'cQO'w!|O'x!}O~O^#Vi}#Vi#f#Vi'T#Vi'p#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~P#%VOPZXYZXiZXrZXsZXuZX!]ZX!^ZX!`ZX!fZX!wZX#ScX#WZX#XZX#YZX#ZZX#[ZX#]ZX#^ZX#_ZX#aZX#cZX#eZX#fZX#kZX'cZX'pZX'wZX'xZX}ZX!OZX~O#iZX~P#'jOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO#e9eO#f9fO'cQO'p#ZO'w!|O'x!}O~O#i,bO~P#)tOP'hXY'hXi'hXr'hXs'hXu'hX!]'hX!^'hX!`'hX!f'hX#W'hX#X'hX#Y'hX#Z'hX#['hX#]'hX#^'hX#a'hX#c'hX#e'hX#f'hX'c'hX'p'hX'w'hX'x'hX}'hX~O!w9jO#k9jO#_'hX#i'hX!O'hX~P#+oO^&oa}&oa'T&oa!_&oa'e&oaz&oa!P&oa%O&oa!X&oa~P!*WOP#ViY#Vi^#Vii#Vis#Vi}#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi'T#Vi'c#Viz#Vi!_#Vi'e#Vi!P#Vi%O#Vi!X#Vi~P!$dO^#ji}#ji'T#jiz#ji!_#ji'e#ji!P#ji%O#ji!X#ji~P!*WO#v,dO#x,dO~O#v,eO#x,eO~O!X'iO!w,fO!P#|X#s#|X#v#|X#x#|X$P#|X~O|,gO~O!P'lO#s,iO#v'kO#x'kO$P,jO~O}9gO!O'gX~P#)tO!O,kO~O$P,mO~O'Q'{O'R'zO'S,pO~O],sOj,sOz,tO~O}cX!XcX!_cX!_$cX'pcX~P!#ZO!_,zO~P!$dO},{O!X!vO'p&lO!_'}X~O!_-QO~Oz$cX}$cX!X$jX~P!#ZO}-SOz(OX~P!$dO!X-UO~Oz-WO~O|(]O'Y$aO!_'}P~Oi-[O!X!vO!`$YO'_$dO'p&lO~O!X)]O~O!O-bO~P!&yO!T-cO!U-cO'Z$cO'f(eO~Ou-eO'f(eO~O!t-fO~O'Y${O}&tX'^&tX~O}(uO'^'`a~Or-kOs-kOu-lO'poa'woa'xoa}oa!woa~O'^oa#ioa~P#7POr(POu(QO'p$[a'w$[a'x$[a}$[a!w$[a~O'^$[a#i$[a~P#7uOr(POu(QO'p$^a'w$^a'x$^a}$^a!w$^a~O'^$^a#i$^a~P#8hO]-mO~O#S-nO~O'^$la}$la#i$la!w$la~P!$dO#S-qO~OR-zO!P&aO!k-yO%O-xO~O'^-{O~O]#rOi#sOj#rOk#rOn$QOp9kOu#yO!P#zO!Z:nO!`#wO#R9qO#p$UO$]9mO$_9oO$b$VO'c#tO~Og-}O'Y-|O~P#:_O!X)]O!P']a^']a'T']a~O#S.TO~OYZX}cX!OcX~O}.UO!O(VX~O!O.WO~OY.XO~O'Y)eO~O!P$lO'Y$aO[&|X}&|X~O})jO[(Ua~O!_.^O~P!*WO].`O~OY.aO~O[.bO~OR-zO!P&aO!k-yO%O-xO'_$dO~O})vO^(Ra'T(Ra~O!w.hO~OR.kO!P#zO~O'f'QO!O(SP~OR.uO!P.qO!k.tO%O.sO'_$dO~OY/PO}.}O!O(TX~O!O/QO~O[/SO^$]O'T$]O~O]/TO~O#_/VO%p/WO~P0zO!w#dO#_/VO%p/WO~O^/XO~P){O^/ZO~O%y/_OP%wiQ%wiW%wi]%wi^%wia%wib%wig%wii%wij%wik%win%wip%wiu%wiw%wix%wiy%wi!P%wi!Z%wi!`%wi!c%wi!d%wi!e%wi!f%wi!g%wi!j%wi#`%wi#p%wi#t%wi$}%wi%P%wi%R%wi%S%wi%V%wi%X%wi%[%wi%]%wi%_%wi%l%wi%r%wi%t%wi%v%wi%x%wi%{%wi&R%wi&V%wi&X%wi&Z%wi&]%wi&_%wi'O%wi'Y%wi'c%wi'o%wi'|%wi!O%wi_%wi&O%wi~O_/eO!O/cO&O/dO~P`O!PSO!`/hO~O}#aO'e$Za~Oz&ei}&ei~P!*WO}!]Oz'ji~O}&^Oz'ti~Oz/lO~O}!Ra!O!Ra~P#)tO]&POj&PO|/rO'f(eO}&fX!O&fX~P@^O}+WO!O'ka~O]&XOj&XO|)uO'f'QO}&kX!O&kX~O}+ZO!O'va~Oz'ui}'ui~P!*WO^$]O!X!vO!`$YO!f/}O!w/{O'T$]O'_$dO'p&lO~O!O0QO~P!?jO!T0RO!U0RO'Z$cO'f(eO'o+cO~O!S0SO~P#HXO!PSO!S0SO!q0UO!t0VO~P#HXO!S0SO!o0XO!p0XO!q0UO!t0VO~P#HXO!P&aO~O!P&aO~P!$dO}'ri!_'ri^'ri'T'ri~P!*WO!w0bO}'ri!_'ri^'ri'T'ri~O}&qO!_'qi~Ou$uO!P$vO#R0dO'Y$aO~O#SoaPoaYoa^oaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa'Toa'coa!_oazoa!Poa'eoa%Ooa!Xoa~P#7PO#S$[aP$[aY$[a^$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a'T$[a'c$[a!_$[az$[a!P$[a'e$[a%O$[a!X$[a~P#7uO#S$^aP$^aY$^a^$^ai$^as$^a!]$^a!^$^a!`$^a!f$^a#W$^a#X$^a#Y$^a#Z$^a#[$^a#]$^a#^$^a#_$^a#a$^a#c$^a#e$^a#f$^a'T$^a'c$^a!_$^az$^a!P$^a'e$^a%O$^a!X$^a~P#8hO#S$laP$laY$la^$lai$las$la}$la!]$la!^$la!`$la!f$la#W$la#X$la#Y$la#Z$la#[$la#]$la#^$la#_$la#a$la#c$la#e$la#f$la'T$la'c$la!_$laz$la!P$la!w$la'e$la%O$la!X$la~P!$dO^!zq}!zq'T!zqz!zq!_!zq'e!zq!P!zq%O!zq!X!zq~P!*WO}&gX'^&gX~PJaO},XO'^'ma~O|0lO}&hX!_&hX~P){O},[O!_'na~O},[O!_'na~P!*WO#i!ba!O!ba~PC`O#i!Ya}!Ya!O!Ya~P#)tO!P1PO#t^O#}1QO~O!O1UO~O'e1VO~P!$dO^$Wq}$Wq'T$Wqz$Wq!_$Wq'e$Wq!P$Wq%O$Wq!X$Wq~P!*WOz1WO~O],sOj,sO~Or(POu(QO'x(UO'p$vi'w$vi}$vi!w$vi~O'^$vi#i$vi~P$(xOr(POu(QO'p$xi'w$xi'x$xi}$xi!w$xi~O'^$xi#i$xi~P$)kO#i1XO~P!$dO|1ZO'Y$aO}&pX!_&pX~O},{O!_'}a~O},{O!X!vO!_'}a~O},{O!X!vO'p&lO!_'}a~O'^$ei}$ei#i$ei!w$ei~P!$dO|1bO'Y(`Oz&rX}&rX~P!%RO}-SOz(Oa~O}-SOz(Oa~P!$dO!X!vO~O!X!vO#_1lO~Oi1pO!X!vO'p&lO~O}'ai'^'ai~P!$dO!w1sO}'ai'^'ai~P!$dO!_1vO~O^$Xq}$Xq'T$Xqz$Xq!_$Xq'e$Xq!P$Xq%O$Xq!X$Xq~P!*WO}1zO!P(PX~P!$dO!P&aO%O1}O~O!P&aO%O1}O~P!$dO!P$cX$sZX^$cX'T$cX~P!#ZO$s2ROrfXufX!PfX'pfX'wfX'xfX^fX'TfX~O$s2RO~O%P2YO'Y)eO}&{X!O&{X~O}.UO!O(Va~OY2^O~O[2_O~O]2bO~OR2dO!P&aO!k2cO%O1}O~O^$]O'T$]O~P!$dO!P#zO~P!$dO}2iO!w2kO!O(SX~O!O2lO~Ou(iO!S2uO!T2nO!U2nO!n2tO!o2sO!p2sO!t2rO'Z$cO'f(eO'o+cO~O!O2qO~P$1yOR2|O!P.qO!k2{O%O2zO~OR2|O!P.qO!k2{O%O2zO'_$dO~O'Y(wO}&zX!O&zX~O}.}O!O(Ta~O'f3VO~O]3XO~O[3ZO~O!_3^O~P){O^3`O~O^3`O~P){O#_3bO%p3cO~PExO_/eO!O3gO&O/dO~P`O!X3iO~O&T3jOP&QqQ&QqW&Qq]&Qq^&Qqa&Qqb&Qqg&Qqi&Qqj&Qqk&Qqn&Qqp&Qqu&Qqw&Qqx&Qqy&Qq!P&Qq!Z&Qq!`&Qq!c&Qq!d&Qq!e&Qq!f&Qq!g&Qq!j&Qq#`&Qq#p&Qq#t&Qq$}&Qq%P&Qq%R&Qq%S&Qq%V&Qq%X&Qq%[&Qq%]&Qq%_&Qq%l&Qq%r&Qq%t&Qq%v&Qq%x&Qq%{&Qq&R&Qq&V&Qq&X&Qq&Z&Qq&]&Qq&_&Qq'O&Qq'Y&Qq'c&Qq'o&Qq'|&Qq!O&Qq%y&Qq_&Qq&O&Qq~O}#Pi!O#Pi~P#)tO!w3lO}#Pi!O#Pi~O}!Ri!O!Ri~P#)tO^$]O!w3sO'T$]O~O^$]O!X!vO!w3sO'T$]O~O!T3wO!U3wO'Z$cO'f(eO'o+cO~O^$]O!X!vO!`$YO!f3xO!w3sO'T$]O'_$dO'p&lO~O!S3yO~P$:cO!S3yO!q3|O!t3}O~P$:cO^$]O!X!vO!f3xO!w3sO'T$]O'p&lO~O}'rq!_'rq^'rq'T'rq~P!*WO}&qO!_'qq~O#S$viP$viY$vi^$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi'T$vi'c$vi!_$viz$vi!P$vi'e$vi%O$vi!X$vi~P$(xO#S$xiP$xiY$xi^$xii$xis$xi!]$xi!^$xi!`$xi!f$xi#W$xi#X$xi#Y$xi#Z$xi#[$xi#]$xi#^$xi#_$xi#a$xi#c$xi#e$xi#f$xi'T$xi'c$xi!_$xiz$xi!P$xi'e$xi%O$xi!X$xi~P$)kO#S$eiP$eiY$ei^$eii$eis$ei}$ei!]$ei!^$ei!`$ei!f$ei#W$ei#X$ei#Y$ei#Z$ei#[$ei#]$ei#^$ei#_$ei#a$ei#c$ei#e$ei#f$ei'T$ei'c$ei!_$eiz$ei!P$ei!w$ei'e$ei%O$ei!X$ei~P!$dO}&ga'^&ga~P!$dO}&ha!_&ha~P!*WO},[O!_'ni~O#i!zi}!zi!O!zi~P#)tOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O'cQOY#Vii#Vi!]#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~O#W#Vi~P$CyO#W9[O~P$CyOP#]Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O'cQOY#Vi!]#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~Oi#Vi~P$FROi9^O~P$FROP#]Oi9^Or!zOs!zOu!{O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O'cQO#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'w#Vi'x#Vi}#Vi!O#Vi~OY#Vi!]#Vi#]#Vi#^#Vi#_#Vi~P$HZOY9iO!]9`O#]9`O#^9`O#_9`O~P$HZOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO'cQO#c#Vi#e#Vi#f#Vi#i#Vi'p#Vi'x#Vi}#Vi!O#Vi~O'w#Vi~P$JoO'w!|O~P$JoOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO'cQO'w!|O#e#Vi#f#Vi#i#Vi'p#Vi}#Vi!O#Vi~O'x#Vi~P$LwO'x!}O~P$LwOP#]OY9iOi9^Or!zOs!zOu!{O!]9`O!^!xO!`!yO!f#]O#W9[O#X9]O#Y9]O#Z9]O#[9_O#]9`O#^9`O#_9`O#a9aO#c9cO#e9eO'cQO'w!|O'x!}O~O#f#Vi#i#Vi'p#Vi}#Vi!O#Vi~P% PO^#gy}#gy'T#gyz#gy!_#gy'e#gy!P#gy%O#gy!X#gy~P!*WOP#ViY#Vii#Vis#Vi!]#Vi!^#Vi!`#Vi!f#Vi#W#Vi#X#Vi#Y#Vi#Z#Vi#[#Vi#]#Vi#^#Vi#_#Vi#a#Vi#c#Vi#e#Vi#f#Vi#i#Vi'c#Vi}#Vi!O#Vi~P!$dO!^!xOP'bXY'bXi'bXr'bXs'bXu'bX!]'bX!`'bX!f'bX#W'bX#X'bX#Y'bX#Z'bX#['bX#]'bX#^'bX#_'bX#a'bX#c'bX#e'bX#f'bX#i'bX'c'bX'p'bX'w'bX'x'bX}'bX!O'bX~O#i#ji}#ji!O#ji~P#)tO!O4_O~O}&oa!O&oa~P#)tO!X!vO'p&lO}&pa!_&pa~O},{O!_'}i~O},{O!X!vO!_'}i~Oz&ra}&ra~P!$dO!X4fO~O}-SOz(Oi~P!$dO}-SOz(Oi~Oz4lO~O!X!vO#_4rO~Oi4sO!X!vO'p&lO~Oz4uO~O'^$gq}$gq#i$gq!w$gq~P!$dO^$Xy}$Xy'T$Xyz$Xy!_$Xy'e$Xy!P$Xy%O$Xy!X$Xy~P!*WO}1zO!P(Pa~O!P&aO%O4zO~O!P&aO%O4zO~P!$dO^!zy}!zy'T!zyz!zy!_!zy'e!zy!P!zy%O!zy!X!zy~P!*WOY4}O~O}.UO!O(Vi~O]5SO~O[5TO~O'f'QO}&wX!O&wX~O}2iO!O(Sa~O!O5bO~P$1yOu-eO'f(eO'o+cO~O!S5eO!T5dO!U5dO!t0VO'Z$cO'f(eO'o+cO~O!o5fO!p5fO~P%-iO!T5dO!U5dO'Z$cO'f(eO'o+cO~O!P.qO~O!P.qO%O5hO~O!P.qO%O5hO~P!$dOR5mO!P.qO!k5lO%O5hO~OY5rO}&za!O&za~O}.}O!O(Ti~O]5uO~O!_5vO~O!_5wO~O!_5xO~O!_5xO~P){O^5zO~O!X5}O~O!_6PO~O}'ui!O'ui~P#)tO^$]O'T$]O~P!*WO^$]O!w6UO'T$]O~O^$]O!X!vO!w6UO'T$]O~O!T6ZO!U6ZO'Z$cO'f(eO'o+cO~O^$]O!X!vO!f6[O!w6UO'T$]O'p&lO~O!`$YO'_$dO~P%2TO!S6]O~P%1rO}'ry!_'ry^'ry'T'ry~P!*WO#S$gqP$gqY$gq^$gqi$gqs$gq}$gq!]$gq!^$gq!`$gq!f$gq#W$gq#X$gq#Y$gq#Z$gq#[$gq#]$gq#^$gq#_$gq#a$gq#c$gq#e$gq#f$gq'T$gq'c$gq!_$gqz$gq!P$gq!w$gq'e$gq%O$gq!X$gq~P!$dO}&hi!_&hi~P!*WO#i!zq}!zq!O!zq~P#)tOr-kOs-kOu-lOPoaYoaioa!]oa!^oa!`oa!foa#Woa#Xoa#Yoa#Zoa#[oa#]oa#^oa#_oa#aoa#coa#eoa#foa#ioa'coa'poa'woa'xoa}oa!Ooa~Or(POu(QOP$[aY$[ai$[as$[a!]$[a!^$[a!`$[a!f$[a#W$[a#X$[a#Y$[a#Z$[a#[$[a#]$[a#^$[a#_$[a#a$[a#c$[a#e$[a#f$[a#i$[a'c$[a'p$[a'w$[a'x$[a}$[a!O$[a~Or(POu(QOP$^aY$^ai$^as$^a!]$^a!^$^a!`$^a!f$^a#W$^a#X$^a#Y$^a#Z$^a#[$^a#]$^a#^$^a#_$^a#a$^a#c$^a#e$^a#f$^a#i$^a'c$^a'p$^a'w$^a'x$^a}$^a!O$^a~OP$laY$lai$las$la!]$la!^$la!`$la!f$la#W$la#X$la#Y$la#Z$la#[$la#]$la#^$la#_$la#a$la#c$la#e$la#f$la#i$la'c$la}$la!O$la~P!$dO#i$Wq}$Wq!O$Wq~P#)tO#i$Xq}$Xq!O$Xq~P#)tO!O6gO~O'^$zy}$zy#i$zy!w$zy~P!$dO!X!vO}&pi!_&pi~O!X!vO'p&lO}&pi!_&pi~O},{O!_'}q~Oz&ri}&ri~P!$dO}-SOz(Oq~Oz6nO~P!$dOz6nO~O}'ay'^'ay~P!$dO}&ua!P&ua~P!$dO!P$rq^$rq'T$rq~P!$dOY6vO~O}.UO!O(Vq~O]6yO~O!P&aO%O6zO~O!P&aO%O6zO~P!$dO!w6{O}&wa!O&wa~O}2iO!O(Si~P#)tO!T7RO!U7RO'Z$cO'f(eO'o+cO~O!S7TO!t3}O~P%ArO!P.qO%O7WO~O!P.qO%O7WO~P!$dO'f7^O~O}.}O!O(Tq~O!_7aO~O!_7aO~P){O!_7cO~O!_7dO~O}#Py!O#Py~P#)tO^$]O!w7jO'T$]O~O^$]O!X!vO!w7jO'T$]O~O!T7mO!U7mO'Z$cO'f(eO'o+cO~O^$]O!X!vO!f7nO!w7jO'T$]O'p&lO~O#S$zyP$zyY$zy^$zyi$zys$zy}$zy!]$zy!^$zy!`$zy!f$zy#W$zy#X$zy#Y$zy#Z$zy#[$zy#]$zy#^$zy#_$zy#a$zy#c$zy#e$zy#f$zy'T$zy'c$zy!_$zyz$zy!P$zy!w$zy'e$zy%O$zy!X$zy~P!$dO#i#gy}#gy!O#gy~P#)tOP$eiY$eii$eis$ei!]$ei!^$ei!`$ei!f$ei#W$ei#X$ei#Y$ei#Z$ei#[$ei#]$ei#^$ei#_$ei#a$ei#c$ei#e$ei#f$ei#i$ei'c$ei}$ei!O$ei~P!$dOr(POu(QO'x(UOP$viY$vii$vis$vi!]$vi!^$vi!`$vi!f$vi#W$vi#X$vi#Y$vi#Z$vi#[$vi#]$vi#^$vi#_$vi#a$vi#c$vi#e$vi#f$vi#i$vi'c$vi'p$vi'w$vi}$vi!O$vi~Or(POu(QOP$xiY$xii$xis$xi!]$xi!^$xi!`$xi!f$xi#W$xi#X$xi#Y$xi#Z$xi#[$xi#]$xi#^$xi#_$xi#a$xi#c$xi#e$xi#f$xi#i$xi'c$xi'p$xi'w$xi'x$xi}$xi!O$xi~O#i$Xy}$Xy!O$Xy~P#)tO#i!zy}!zy!O!zy~P#)tO!X!vO}&pq!_&pq~O},{O!_'}y~Oz&rq}&rq~P!$dOz7tO~P!$dO}.UO!O(Vy~O}2iO!O(Sq~O!T8QO!U8QO'Z$cO'f(eO'o+cO~O!P.qO%O8TO~O!P.qO%O8TO~P!$dO!_8WO~O&T8XOP&Q!ZQ&Q!ZW&Q!Z]&Q!Z^&Q!Za&Q!Zb&Q!Zg&Q!Zi&Q!Zj&Q!Zk&Q!Zn&Q!Zp&Q!Zu&Q!Zw&Q!Zx&Q!Zy&Q!Z!P&Q!Z!Z&Q!Z!`&Q!Z!c&Q!Z!d&Q!Z!e&Q!Z!f&Q!Z!g&Q!Z!j&Q!Z#`&Q!Z#p&Q!Z#t&Q!Z$}&Q!Z%P&Q!Z%R&Q!Z%S&Q!Z%V&Q!Z%X&Q!Z%[&Q!Z%]&Q!Z%_&Q!Z%l&Q!Z%r&Q!Z%t&Q!Z%v&Q!Z%x&Q!Z%{&Q!Z&R&Q!Z&V&Q!Z&X&Q!Z&Z&Q!Z&]&Q!Z&_&Q!Z'O&Q!Z'Y&Q!Z'c&Q!Z'o&Q!Z'|&Q!Z!O&Q!Z%y&Q!Z_&Q!Z&O&Q!Z~O^$]O!w8^O'T$]O~O^$]O!X!vO!w8^O'T$]O~OP$gqY$gqi$gqs$gq!]$gq!^$gq!`$gq!f$gq#W$gq#X$gq#Y$gq#Z$gq#[$gq#]$gq#^$gq#_$gq#a$gq#c$gq#e$gq#f$gq#i$gq'c$gq}$gq!O$gq~P!$dO}&wq!O&wq~P#)tO^$]O!w8sO'T$]O~OP$zyY$zyi$zys$zy!]$zy!^$zy!`$zy!f$zy#W$zy#X$zy#Y$zy#Z$zy#[$zy#]$zy#^$zy#_$zy#a$zy#c$zy#e$zy#f$zy#i$zy'c$zy}$zy!O$zy~P!$dO'e'gX~P.jO'eZXzZX!_ZX%pZX!PZX%OZX!XZX~P$zO!XcX!_ZX!_cX'pcX~P;dOP9UOQ9UO]cOa:lOb!iOgcOi9UOjcOkcOn9UOp9UOuROwcOxcOycO!PSO!Z9WO!`UO!c9UO!d9UO!e9UO!f9UO!g9UO!j!hO#p!kO#t^O'Y'`O'cQO'oYO'|:jO~O}9gO!O$Za~O]#rOg$POi#sOj#rOk#rOn$QOp9lOu#yO!P#zO!Z:oO!`#wO#R9rO#p$UO$]9nO$_9pO$b$VO'Y&xO'c#tO~O#`'gO~P&-RO!OZX!OcX~P;dO#S9ZO~O!X!vO#S9ZO~O!w9jO~O#_9`O~O!w9sO}'uX!O'uX~O!w9jO}'sX!O'sX~O#S9tO~O'^9vO~P!$dO#S9{O~O#S9|O~O!X!vO#S9}O~O!X!vO#S9tO~O#i:OO~P#)tO#S:PO~O#S:QO~O#S:RO~O#S:SO~O#i:TO~P!$dO#i:UO~P!$dO#t~!^!n!p!q#Q#R'|$]$_$b$s$}%O%P%V%X%[%]%_%a~TS#t'|#Xy'V'W'f'W'Y#v#x#v~", ++ goto: "#Dq(ZPPPPPPP([P(lP*`PPPP-uPP.[3l5`5sP5sPPP5s5sP5sP7aPP7fP7zPPPPyPPP?PA[PbP!>f!>n!>r!>rP!;lP!>v!>vP!AiP!Amk|}?O}!O>k!O!P?`!P!QCl!Q!R!0[!R![!1q![!]!7s!]!^!8V!^!_!8g!_!`!9d!`!a!:[!a!b!U#R#S2`#S#T!>i#T#o2`#o#p!>y#p#q!?O#q#r!?f#r#s!?x#s$f%T$f$g%c$g#BY2`#BY#BZ!@Y#BZ$IS2`$IS$I_!@Y$I_$I|2`$I|$I}!Bq$I}$JO!Bq$JO$JT2`$JT$JU!@Y$JU$KV2`$KV$KW!@Y$KW&FU2`&FU&FV!@Y&FV?HT2`?HT?HU!@Y?HU~2`W%YR$QWO!^%T!_#o%T#p~%T,T%jg$QW'T+{OX%TXY%cYZ%TZ[%c[p%Tpq%cq!^%T!_#o%T#p$f%T$f$g%c$g#BY%T#BY#BZ%c#BZ$IS%T$IS$I_%c$I_$JT%T$JT$JU%c$JU$KV%T$KV$KW%c$KW&FU%T&FU&FV%c&FV?HT%T?HT?HU%c?HU~%T,T'YR$QW'U+{O!^%T!_#o%T#p~%T$T'jS$QW!f#{O!^%T!_!`'v!`#o%T#p~%T$O'}S#a#v$QWO!^%T!_!`(Z!`#o%T#p~%T$O(bR#a#v$QWO!^%T!_#o%T#p~%T'u(rZ$QW]!ROY(kYZ)eZr(krs*rs!^(k!^!_+U!_#O(k#O#P-b#P#o(k#o#p+U#p~(k&r)jV$QWOr)ers*Ps!^)e!^!_*a!_#o)e#o#p*a#p~)e&r*WR#{&j$QWO!^%T!_#o%T#p~%T&j*dROr*ars*ms~*a&j*rO#{&j'u*{R#{&j$QW]!RO!^%T!_#o%T#p~%T'm+ZV]!ROY+UYZ*aZr+Urs+ps#O+U#O#P+w#P~+U'm+wO#{&j]!R'm+zROr+Urs,Ts~+U'm,[U#{&j]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R,sU]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R-[O]!R!R-_PO~,n'u-gV$QWOr(krs-|s!^(k!^!_+U!_#o(k#o#p+U#p~(k'u.VZ#{&j$QW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/PZ$QW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/yR$QW]!RO!^%T!_#o%T#p~%T!Z0XT$QWO!^.x!^!_,n!_#o.x#o#p,n#p~.xy0mZ$QWOt%Ttu1`u!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`y1g]$QW'mqOt%Ttu1`u!Q%T!Q![1`![!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`&i2k_$QW#vS'W%k'dpOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`[3q_$QW#vSOt%Ttu3ju}%T}!O3j!O!Q%T!Q![3j![!^%T!_!c%T!c!}3j!}#R%T#R#S3j#S#T%T#T#o3j#p$g%T$g~3j$O4wS#Y#v$QWO!^%T!_!`5T!`#o%T#p~%T$O5[R$QW#k#vO!^%T!_#o%T#p~%T%r5lU'v%j$QWOv%Tvw6Ow!^%T!_!`5T!`#o%T#p~%T$O6VS$QW#e#vO!^%T!_!`5T!`#o%T#p~%T'u6jZ$QW]!ROY6cYZ7]Zw6cwx*rx!^6c!^!_8T!_#O6c#O#P:T#P#o6c#o#p8T#p~6c&r7bV$QWOw7]wx*Px!^7]!^!_7w!_#o7]#o#p7w#p~7]&j7zROw7wwx*mx~7w'm8YV]!ROY8TYZ7wZw8Twx+px#O8T#O#P8o#P~8T'm8rROw8Twx8{x~8T'm9SU#{&j]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R9kU]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R:QPO~9f'u:YV$QWOw6cwx:ox!^6c!^!_8T!_#o6c#o#p8T#p~6c'u:xZ#{&j$QW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#PW{!^%T!_!`5T!`#o%T#p~%T$O>_S#W#v$QWO!^%T!_!`5T!`#o%T#p~%T$u>rSi$m$QWO!^%T!_!`5T!`#o%T#p~%T&i?VR}&a$QWO!^%T!_#o%T#p~%T&i?gVr%n$QWO!O%T!O!P?|!P!Q%T!Q![@r![!^%T!_#o%T#p~%Ty@RT$QWO!O%T!O!P@b!P!^%T!_#o%T#p~%Ty@iR|q$QWO!^%T!_#o%T#p~%Ty@yZ$QWjqO!Q%T!Q![@r![!^%T!_!g%T!g!hAl!h#R%T#R#S@r#S#X%T#X#YAl#Y#o%T#p~%TyAqZ$QWO{%T{|Bd|}%T}!OBd!O!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyBiV$QWO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyCVV$QWjqO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%T,TCs`$QW#X#vOYDuYZ%TZzDuz{Jl{!PDu!P!Q!-e!Q!^Du!^!_Fx!_!`!.^!`!a!/]!a!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXD|[$QWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXEy_$QWyPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%TPF}VyPOYFxZ!PFx!P!QGd!Q!}Fx!}#OG{#O#PHh#P~FxPGiUyP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGdPHOTOYG{Z#OG{#O#PH_#P#QFx#Q~G{PHbQOYG{Z~G{PHkQOYFxZ~FxXHvY$QWOYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~HqXIkV$QWOYHqYZ%TZ!^Hq!^!_G{!_#oHq#o#pG{#p~HqXJVV$QWOYDuYZ%TZ!^Du!^!_Fx!_#oDu#o#pFx#p~Du,TJs^$QWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q!,R!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,TKtV$QWOzKoz{LZ{!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TL`X$QWOzKoz{LZ{!PKo!P!QL{!Q!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TMSR$QWT+{O!^%T!_#o%T#p~%T+{M`ROzM]z{Mi{~M]+{MlTOzM]z{Mi{!PM]!P!QM{!Q~M]+{NQOT+{,TNX^$QWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q! T!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,T! ^_$QWT+{yPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%T+{!!bYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!&x!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#VYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!#u!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#|UT+{yP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGd+{!$cWOY!$`YZM]Zz!$`z{!${{#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%OYOY!$`YZM]Zz!$`z{!${{!P!$`!P!Q!%n!Q#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%sTT+{OYG{Z#OG{#O#PH_#P#QFx#Q~G{+{!&VTOY!$`YZM]Zz!$`z{!${{~!$`+{!&iTOY!!]YZM]Zz!!]z{!#Q{~!!]+{!&}_yPOzM]z{Mi{#ZM]#Z#[!&x#[#]M]#]#^!&x#^#aM]#a#b!&x#b#gM]#g#h!&x#h#iM]#i#j!&x#j#mM]#m#n!&x#n~M],T!(R[$QWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!(|^$QWOY!'|YZKoZz!'|z{!(w{!P!'|!P!Q!)x!Q!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!*PY$QWT+{OYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~Hq,T!*tX$QWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#o!'|#o#p!$`#p~!'|,T!+fX$QWOYJlYZKoZzJlz{NQ{!^Jl!^!_!!]!_#oJl#o#p!!]#p~Jl,T!,Yc$QWyPOzKoz{LZ{!^Ko!^!_M]!_#ZKo#Z#[!,R#[#]Ko#]#^!,R#^#aKo#a#b!,R#b#gKo#g#h!,R#h#iKo#i#j!,R#j#mKo#m#n!,R#n#oKo#o#pM]#p~Ko,T!-lV$QWS+{OY!-eYZ%TZ!^!-e!^!_!.R!_#o!-e#o#p!.R#p~!-e+{!.WQS+{OY!.RZ~!.R$P!.g[$QW#k#vyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Du]!/f[#sS$QWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Duy!0cd$QWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#U%T#U#V!3X#V#X%T#X#YAl#Y#b%T#b#c!2w#c#d!4m#d#l%T#l#m!5{#m#o%T#p~%Ty!1x_$QWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#X%T#X#YAl#Y#b%T#b#c!2w#c#o%T#p~%Ty!3OR$QWjqO!^%T!_#o%T#p~%Ty!3^W$QWO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#o%T#p~%Ty!3}Y$QWjqO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#b%T#b#c!2w#c#o%T#p~%Ty!4rV$QWO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#o%T#p~%Ty!5`X$QWjqO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#b%T#b#c!2w#c#o%T#p~%Ty!6QZ$QWO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#o%T#p~%Ty!6z]$QWjqO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#b%T#b#c!2w#c#o%T#p~%T%w!7|R!XV$QW#i%hO!^%T!_#o%T#p~%T!P!8^R^w$QWO!^%T!_#o%T#p~%T+c!8rR']d!]%Y#t&s'zP!P!Q!8{!^!_!9Q!_!`!9_W!9QO$SW#v!9VP#[#v!_!`!9Y#v!9_O#k#v#v!9dO#]#v%w!9kT!w%o$QWO!^%T!_!`'v!`!a!9z!a#o%T#p~%T$P!:RR#S#w$QWO!^%T!_#o%T#p~%T%w!:gT'[!s#]#v#}S$QWO!^%T!_!`!:v!`!a!;W!a#o%T#p~%T$O!:}R#]#v$QWO!^%T!_#o%T#p~%T$O!;_T#[#v$QWO!^%T!_!`5T!`!a!;n!a#o%T#p~%T$O!;uS#[#v$QWO!^%T!_!`5T!`#o%T#p~%T%w!]S#c#v$QWO!^%T!_!`5T!`#o%T#p~%T$P!>pR$QW'a#wO!^%T!_#o%T#p~%T~!?OO!P~%r!?VT'u%j$QWO!^%T!_!`5T!`#o%T#p#q!=P#q~%T$u!?oR!O$k$QW'cQO!^%T!_#o%T#p~%TX!@PR!gP$QWO!^%T!_#o%T#p~%T,T!@gr$QW'T+{#vS'W%k'dpOX%TXY%cYZ%TZ[%c[p%Tpq%cqt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$f%T$f$g%c$g#BY2`#BY#BZ!@Y#BZ$IS2`$IS$I_!@Y$I_$JT2`$JT$JU!@Y$JU$KV2`$KV$KW!@Y$KW&FU2`&FU&FV!@Y&FV?HT2`?HT?HU!@Y?HU~2`,T!CO_$QW'U+{#vS'W%k'dpOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`", ++ tokenData: "!F_~R!`OX%TXY%cYZ'RZ[%c[]%T]^'R^p%Tpq%cqr'crs(kst0htu2`uv4pvw5ewx6cxyk|}?O}!O>k!O!P?`!P!QCl!Q!R!0[!R![!1q![!]!7s!]!^!8V!^!_!8g!_!`!9d!`!a!:[!a!b!U#R#S2`#S#T!>i#T#o!>y#o#p!AZ#p#q!A`#q#r!Av#r#s!BY#s$f%T$f$g%c$g#BY2`#BY#BZ!Bj#BZ$IS2`$IS$I_!Bj$I_$I|2`$I|$I}!ER$I}$JO!ER$JO$JT2`$JT$JU!Bj$JU$KV2`$KV$KW!Bj$KW&FU2`&FU&FV!Bj&FV?HT2`?HT?HU!Bj?HU~2`W%YR$SWO!^%T!_#o%T#p~%T,T%jg$SW'V+{OX%TXY%cYZ%TZ[%c[p%Tpq%cq!^%T!_#o%T#p$f%T$f$g%c$g#BY%T#BY#BZ%c#BZ$IS%T$IS$I_%c$I_$JT%T$JT$JU%c$JU$KV%T$KV$KW%c$KW&FU%T&FU&FV%c&FV?HT%T?HT?HU%c?HU~%T,T'YR$SW'W+{O!^%T!_#o%T#p~%T$T'jS$SW!f#{O!^%T!_!`'v!`#o%T#p~%T$O'}S#a#v$SWO!^%T!_!`(Z!`#o%T#p~%T$O(bR#a#v$SWO!^%T!_#o%T#p~%T'u(rZ$SW]!ROY(kYZ)eZr(krs*rs!^(k!^!_+U!_#O(k#O#P-b#P#o(k#o#p+U#p~(k&r)jV$SWOr)ers*Ps!^)e!^!_*a!_#o)e#o#p*a#p~)e&r*WR#}&j$SWO!^%T!_#o%T#p~%T&j*dROr*ars*ms~*a&j*rO#}&j'u*{R#}&j$SW]!RO!^%T!_#o%T#p~%T'm+ZV]!ROY+UYZ*aZr+Urs+ps#O+U#O#P+w#P~+U'm+wO#}&j]!R'm+zROr+Urs,Ts~+U'm,[U#}&j]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R,sU]!ROY,nZr,nrs-Vs#O,n#O#P-[#P~,n!R-[O]!R!R-_PO~,n'u-gV$SWOr(krs-|s!^(k!^!_+U!_#o(k#o#p+U#p~(k'u.VZ#}&j$SW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/PZ$SW]!ROY.xYZ%TZr.xrs/rs!^.x!^!_,n!_#O.x#O#P0S#P#o.x#o#p,n#p~.x!Z/yR$SW]!RO!^%T!_#o%T#p~%T!Z0XT$SWO!^.x!^!_,n!_#o.x#o#p,n#p~.xy0mZ$SWOt%Ttu1`u!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`y1g]$SW'oqOt%Ttu1`u!Q%T!Q![1`![!^%T!_!c%T!c!}1`!}#R%T#R#S1`#S#T%T#T#o1`#p$g%T$g~1`&i2k_$SW'fp'Y%k#vSOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`[3q_$SW#vSOt%Ttu3ju}%T}!O3j!O!Q%T!Q![3j![!^%T!_!c%T!c!}3j!}#R%T#R#S3j#S#T%T#T#o3j#p$g%T$g~3j$O4wS#Y#v$SWO!^%T!_!`5T!`#o%T#p~%T$O5[R$SW#k#vO!^%T!_#o%T#p~%T%r5lU'x%j$SWOv%Tvw6Ow!^%T!_!`5T!`#o%T#p~%T$O6VS$SW#e#vO!^%T!_!`5T!`#o%T#p~%T'u6jZ$SW]!ROY6cYZ7]Zw6cwx*rx!^6c!^!_8T!_#O6c#O#P:T#P#o6c#o#p8T#p~6c&r7bV$SWOw7]wx*Px!^7]!^!_7w!_#o7]#o#p7w#p~7]&j7zROw7wwx*mx~7w'm8YV]!ROY8TYZ7wZw8Twx+px#O8T#O#P8o#P~8T'm8rROw8Twx8{x~8T'm9SU#}&j]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R9kU]!ROY9fZw9fwx-Vx#O9f#O#P9}#P~9f!R:QPO~9f'u:YV$SWOw6cwx:ox!^6c!^!_8T!_#o6c#o#p8T#p~6c'u:xZ#}&j$SW]!ROY;kYZ%TZw;kwx/rx!^;k!^!_9f!_#O;k#O#PW{!^%T!_!`5T!`#o%T#p~%T$O>_S#W#v$SWO!^%T!_!`5T!`#o%T#p~%T$u>rSi$m$SWO!^%T!_!`5T!`#o%T#p~%T&i?VR}&a$SWO!^%T!_#o%T#p~%T&i?gVr%n$SWO!O%T!O!P?|!P!Q%T!Q![@r![!^%T!_#o%T#p~%Ty@RT$SWO!O%T!O!P@b!P!^%T!_#o%T#p~%Ty@iR|q$SWO!^%T!_#o%T#p~%Ty@yZ$SWjqO!Q%T!Q![@r![!^%T!_!g%T!g!hAl!h#R%T#R#S@r#S#X%T#X#YAl#Y#o%T#p~%TyAqZ$SWO{%T{|Bd|}%T}!OBd!O!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyBiV$SWO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%TyCVV$SWjqO!Q%T!Q![CO![!^%T!_#R%T#R#SCO#S#o%T#p~%T,TCs`$SW#X#vOYDuYZ%TZzDuz{Jl{!PDu!P!Q!-e!Q!^Du!^!_Fx!_!`!.^!`!a!/]!a!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXD|[$SWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~DuXEy_$SWyPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%TPF}VyPOYFxZ!PFx!P!QGd!Q!}Fx!}#OG{#O#PHh#P~FxPGiUyP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGdPHOTOYG{Z#OG{#O#PH_#P#QFx#Q~G{PHbQOYG{Z~G{PHkQOYFxZ~FxXHvY$SWOYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~HqXIkV$SWOYHqYZ%TZ!^Hq!^!_G{!_#oHq#o#pG{#p~HqXJVV$SWOYDuYZ%TZ!^Du!^!_Fx!_#oDu#o#pFx#p~Du,TJs^$SWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q!,R!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,TKtV$SWOzKoz{LZ{!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TL`X$SWOzKoz{LZ{!PKo!P!QL{!Q!^Ko!^!_M]!_#oKo#o#pM]#p~Ko,TMSR$SWT+{O!^%T!_#o%T#p~%T+{M`ROzM]z{Mi{~M]+{MlTOzM]z{Mi{!PM]!P!QM{!Q~M]+{NQOT+{,TNX^$SWyPOYJlYZKoZzJlz{NQ{!PJl!P!Q! T!Q!^Jl!^!_!!]!_!}Jl!}#O!'|#O#P!+a#P#oJl#o#p!!]#p~Jl,T! ^_$SWT+{yPO!^%T!_#Z%T#Z#[Er#[#]%T#]#^Er#^#a%T#a#bEr#b#g%T#g#hEr#h#i%T#i#jEr#j#m%T#m#nEr#n#o%T#p~%T+{!!bYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!&x!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#VYyPOY!!]YZM]Zz!!]z{!#Q{!P!!]!P!Q!#u!Q!}!!]!}#O!$`#O#P!&f#P~!!]+{!#|UT+{yP#Z#[Gd#]#^Gd#a#bGd#g#hGd#i#jGd#m#nGd+{!$cWOY!$`YZM]Zz!$`z{!${{#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%OYOY!$`YZM]Zz!$`z{!${{!P!$`!P!Q!%n!Q#O!$`#O#P!&S#P#Q!!]#Q~!$`+{!%sTT+{OYG{Z#OG{#O#PH_#P#QFx#Q~G{+{!&VTOY!$`YZM]Zz!$`z{!${{~!$`+{!&iTOY!!]YZM]Zz!!]z{!#Q{~!!]+{!&}_yPOzM]z{Mi{#ZM]#Z#[!&x#[#]M]#]#^!&x#^#aM]#a#b!&x#b#gM]#g#h!&x#h#iM]#i#j!&x#j#mM]#m#n!&x#n~M],T!(R[$SWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!(|^$SWOY!'|YZKoZz!'|z{!(w{!P!'|!P!Q!)x!Q!^!'|!^!_!$`!_#O!'|#O#P!*o#P#QJl#Q#o!'|#o#p!$`#p~!'|,T!*PY$SWT+{OYHqYZ%TZ!^Hq!^!_G{!_#OHq#O#PIf#P#QDu#Q#oHq#o#pG{#p~Hq,T!*tX$SWOY!'|YZKoZz!'|z{!(w{!^!'|!^!_!$`!_#o!'|#o#p!$`#p~!'|,T!+fX$SWOYJlYZKoZzJlz{NQ{!^Jl!^!_!!]!_#oJl#o#p!!]#p~Jl,T!,Yc$SWyPOzKoz{LZ{!^Ko!^!_M]!_#ZKo#Z#[!,R#[#]Ko#]#^!,R#^#aKo#a#b!,R#b#gKo#g#h!,R#h#iKo#i#j!,R#j#mKo#m#n!,R#n#oKo#o#pM]#p~Ko,T!-lV$SWS+{OY!-eYZ%TZ!^!-e!^!_!.R!_#o!-e#o#p!.R#p~!-e+{!.WQS+{OY!.RZ~!.R$P!.g[$SW#k#vyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Du]!/f[#sS$SWyPOYDuYZ%TZ!PDu!P!QEr!Q!^Du!^!_Fx!_!}Du!}#OHq#O#PJQ#P#oDu#o#pFx#p~Duy!0cd$SWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#U%T#U#V!3X#V#X%T#X#YAl#Y#b%T#b#c!2w#c#d!4m#d#l%T#l#m!5{#m#o%T#p~%Ty!1x_$SWjqO!O%T!O!P@r!P!Q%T!Q![!1q![!^%T!_!g%T!g!hAl!h#R%T#R#S!1q#S#X%T#X#YAl#Y#b%T#b#c!2w#c#o%T#p~%Ty!3OR$SWjqO!^%T!_#o%T#p~%Ty!3^W$SWO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#o%T#p~%Ty!3}Y$SWjqO!Q%T!Q!R!3v!R!S!3v!S!^%T!_#R%T#R#S!3v#S#b%T#b#c!2w#c#o%T#p~%Ty!4rV$SWO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#o%T#p~%Ty!5`X$SWjqO!Q%T!Q!Y!5X!Y!^%T!_#R%T#R#S!5X#S#b%T#b#c!2w#c#o%T#p~%Ty!6QZ$SWO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#o%T#p~%Ty!6z]$SWjqO!Q%T!Q![!6s![!^%T!_!c%T!c!i!6s!i#R%T#R#S!6s#S#T%T#T#Z!6s#Z#b%T#b#c!2w#c#o%T#p~%T%w!7|R!XV$SW#i%hO!^%T!_#o%T#p~%T!P!8^R^w$SWO!^%T!_#o%T#p~%T+c!8rR'_d!]%Y#t&s'|P!P!Q!8{!^!_!9Q!_!`!9_W!9QO$UW#v!9VP#[#v!_!`!9Y#v!9_O#k#v#v!9dO#]#v%w!9kT!w%o$SWO!^%T!_!`'v!`!a!9z!a#o%T#p~%T$P!:RR#S#w$SWO!^%T!_#o%T#p~%T%w!:gT'^!s#]#v$PS$SWO!^%T!_!`!:v!`!a!;W!a#o%T#p~%T$O!:}R#]#v$SWO!^%T!_#o%T#p~%T$O!;_T#[#v$SWO!^%T!_!`5T!`!a!;n!a#o%T#p~%T$O!;uS#[#v$SWO!^%T!_!`5T!`#o%T#p~%T%w!]S#c#v$SWO!^%T!_!`5T!`#o%T#p~%T$P!>pR$SW'c#wO!^%T!_#o%T#p~%T&i!?U_$SW'fp'Y%k#xSOt%Ttu!>yu}%T}!O!@T!O!Q%T!Q![!>y![!^%T!_!c%T!c!}!>y!}#R%T#R#S!>y#S#T%T#T#o!>y#p$g%T$g~!>y[!@[_$SW#xSOt%Ttu!@Tu}%T}!O!@T!O!Q%T!Q![!@T![!^%T!_!c%T!c!}!@T!}#R%T#R#S!@T#S#T%T#T#o!@T#p$g%T$g~!@T~!A`O!P~%r!AgT'w%j$SWO!^%T!_!`5T!`#o%T#p#q!=P#q~%T$u!BPR!O$k$SW'eQO!^%T!_#o%T#p~%TX!BaR!gP$SWO!^%T!_#o%T#p~%T,T!Bwr$SW'V+{'fp'Y%k#vSOX%TXY%cYZ%TZ[%c[p%Tpq%cqt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$f%T$f$g%c$g#BY2`#BY#BZ!Bj#BZ$IS2`$IS$I_!Bj$I_$JT2`$JT$JU!Bj$JU$KV2`$KV$KW!Bj$KW&FU2`&FU&FV!Bj&FV?HT2`?HT?HU!Bj?HU~2`,T!E`_$SW'W+{'fp'Y%k#vSOt%Ttu2`u}%T}!O3j!O!Q%T!Q![2`![!^%T!_!c%T!c!}2`!}#R%T#R#S2`#S#T%T#T#o2`#p$g%T$g~2`", + tokenizers: [noSemicolon, incdecToken, template, 0, 1, 2, 3, 4, 5, 6, 7, 8, insertSemicolon], + topRules: {"Script":[0,6]}, +- dialects: {jsx: 11282, ts: 11284}, +- dynamicPrecedences: {"145":1,"172":1}, +- specialized: [{term: 284, get: (value, stack) => (tsExtends(value, stack) << 1)},{term: 284, get: value => spec_identifier[value] || -1},{term: 296, get: value => spec_word[value] || -1},{term: 59, get: value => spec_LessThan[value] || -1}], +- tokenPrec: 11305 ++ dialects: {jsx: 11332, ts: 11334}, ++ dynamicPrecedences: {"147":1,"174":1}, ++ specialized: [{term: 286, get: (value, stack) => (tsExtends(value, stack) << 1)},{term: 286, get: value => spec_identifier[value] || -1},{term: 298, get: value => spec_word[value] || -1},{term: 59, get: value => spec_LessThan[value] || -1}], ++ tokenPrec: 11355 + }) +diff --git a/node_modules/@lezer/javascript/src/parser.terms.js b/node_modules/@lezer/javascript/src/parser.terms.js +index fc7710f..49e292f 100644 +--- a/node_modules/@lezer/javascript/src/parser.terms.js ++++ b/node_modules/@lezer/javascript/src/parser.terms.js +@@ -1,15 +1,15 @@ + // This file was generated by lezer-generator. You probably shouldn't edit it. + export const +- noSemi = 275, ++ noSemi = 277, + incdec = 1, + incdecPrefix = 2, +- templateContent = 276, +- templateDollarBrace = 277, +- templateEnd = 278, +- insertSemi = 279, ++ templateContent = 278, ++ templateDollarBrace = 279, ++ templateEnd = 280, ++ insertSemi = 281, + TSExtends = 3, +- spaces = 281, +- newline = 282, ++ spaces = 283, ++ newline = 284, + LineComment = 4, + BlockComment = 5, + Script = 6, +@@ -61,38 +61,39 @@ export const + JSXStartTag = 128, + JSXSelfClosingTag = 129, + JSXIdentifier = 130, +- JSXNamespacedName = 131, +- JSXMemberExpression = 132, +- JSXAttributeValue = 135, +- JSXEndTag = 137, +- JSXOpenTag = 138, +- JSXFragmentTag = 139, +- JSXText = 140, +- JSXEscape = 141, +- JSXStartCloseTag = 142, +- JSXCloseTag = 143, +- SequenceExpression = 147, +- TypeName = 155, +- ParamTypeList = 158, +- IndexedType = 160, +- Label = 162, +- ObjectType = 165, +- MethodType = 166, +- PropertyType = 167, +- IndexSignature = 168, +- TypePredicate = 170, +- ClassDeclaration = 180, +- VariableDeclaration = 184, +- TypeAliasDeclaration = 187, +- InterfaceDeclaration = 188, +- EnumDeclaration = 190, +- NamespaceDeclaration = 193, +- AmbientDeclaration = 196, +- ExportGroup = 204, +- ImportDeclaration = 207, +- ImportGroup = 208, +- ForSpec = 211, +- ForInSpec = 212, +- ForOfSpec = 213, ++ JSXLowerIdentifier = 132, ++ JSXNamespacedName = 133, ++ JSXMemberExpression = 134, ++ JSXAttributeValue = 137, ++ JSXEndTag = 139, ++ JSXOpenTag = 140, ++ JSXFragmentTag = 141, ++ JSXText = 142, ++ JSXEscape = 143, ++ JSXStartCloseTag = 144, ++ JSXCloseTag = 145, ++ SequenceExpression = 149, ++ TypeName = 157, ++ ParamTypeList = 160, ++ IndexedType = 162, ++ Label = 164, ++ ObjectType = 167, ++ MethodType = 168, ++ PropertyType = 169, ++ IndexSignature = 170, ++ TypePredicate = 172, ++ ClassDeclaration = 182, ++ VariableDeclaration = 186, ++ TypeAliasDeclaration = 189, ++ InterfaceDeclaration = 190, ++ EnumDeclaration = 192, ++ NamespaceDeclaration = 195, ++ AmbientDeclaration = 198, ++ ExportGroup = 206, ++ ImportDeclaration = 209, ++ ImportGroup = 210, ++ ForSpec = 213, ++ ForInSpec = 214, ++ ForOfSpec = 215, + Dialect_jsx = 0, + Dialect_ts = 1 diff --git a/beta/patches/next+12.3.2-canary.7.patch b/beta/patches/next+12.3.2-canary.7.patch new file mode 100644 index 000000000..ee8d132de --- /dev/null +++ b/beta/patches/next+12.3.2-canary.7.patch @@ -0,0 +1,22 @@ +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 new file mode 100644 index 000000000..c9ecef84d --- /dev/null +++ b/beta/patches/next-remote-watch+1.0.0.patch @@ -0,0 +1,16 @@ +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 new file mode 100644 index 000000000..0d5fe7afb --- /dev/null +++ b/beta/plugins/markdownToHtml.js @@ -0,0 +1,30 @@ +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 new file mode 100644 index 000000000..356de1bf1 --- /dev/null +++ b/beta/plugins/remark-header-custom-ids.js @@ -0,0 +1,76 @@ +/** + * 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 new file mode 100644 index 000000000..7dd1b0c4a --- /dev/null +++ b/beta/plugins/remark-smartypants.js @@ -0,0 +1,21 @@ +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 new file mode 100644 index 000000000..427294522 --- /dev/null +++ b/beta/postcss.config.js @@ -0,0 +1,20 @@ +/* + * 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 new file mode 100644 index 000000000..423ec131b Binary files /dev/null and b/beta/public/external.png differ diff --git a/beta/public/favicon.ico b/beta/public/favicon.ico new file mode 100644 index 000000000..38fd8641c Binary files /dev/null and b/beta/public/favicon.ico differ diff --git a/beta/public/favicon_dark.ico b/beta/public/favicon_dark.ico new file mode 100644 index 000000000..9bcfdcd7b Binary files /dev/null and b/beta/public/favicon_dark.ico differ diff --git a/beta/public/fonts/Source-Code-Pro-Regular.woff2 b/beta/public/fonts/Source-Code-Pro-Regular.woff2 new file mode 100644 index 000000000..655cd9e81 Binary files /dev/null and b/beta/public/fonts/Source-Code-Pro-Regular.woff2 differ diff --git a/beta/public/html/single-file-example.html b/beta/public/html/single-file-example.html new file mode 100644 index 000000000..380a169f5 --- /dev/null +++ b/beta/public/html/single-file-example.html @@ -0,0 +1,36 @@ + + + + + Hello World + + + + + + + +

+ + + + diff --git a/beta/public/icons/logo-white.svg b/beta/public/icons/logo-white.svg new file mode 100644 index 000000000..7ed0e8b05 --- /dev/null +++ b/beta/public/icons/logo-white.svg @@ -0,0 +1,9 @@ + + React Logo + + + + + + + diff --git a/beta/public/icons/logo.svg b/beta/public/icons/logo.svg new file mode 100644 index 000000000..ea77a618d --- /dev/null +++ b/beta/public/icons/logo.svg @@ -0,0 +1,9 @@ + + React Logo + + + + + + + diff --git a/beta/public/images/blog/animal-sounds.jpg b/beta/public/images/blog/animal-sounds.jpg new file mode 100644 index 000000000..abe6d815e Binary files /dev/null and b/beta/public/images/blog/animal-sounds.jpg differ diff --git a/beta/public/images/blog/chatapp.png b/beta/public/images/blog/chatapp.png new file mode 100644 index 000000000..de8c09ff3 Binary files /dev/null and b/beta/public/images/blog/chatapp.png differ diff --git a/beta/public/images/blog/cra-better-output.png b/beta/public/images/blog/cra-better-output.png new file mode 100644 index 000000000..44ed320ff Binary files /dev/null and b/beta/public/images/blog/cra-better-output.png differ diff --git a/beta/public/images/blog/cra-dynamic-import.gif b/beta/public/images/blog/cra-dynamic-import.gif new file mode 100644 index 000000000..88db2896f Binary files /dev/null and b/beta/public/images/blog/cra-dynamic-import.gif differ diff --git a/beta/public/images/blog/cra-jest-search.gif b/beta/public/images/blog/cra-jest-search.gif new file mode 100644 index 000000000..ed6819d89 Binary files /dev/null and b/beta/public/images/blog/cra-jest-search.gif differ diff --git a/beta/public/images/blog/cra-pwa.png b/beta/public/images/blog/cra-pwa.png new file mode 100644 index 000000000..9862ae565 Binary files /dev/null and b/beta/public/images/blog/cra-pwa.png differ diff --git a/beta/public/images/blog/cra-runtime-error.gif b/beta/public/images/blog/cra-runtime-error.gif new file mode 100644 index 000000000..7b4405f62 Binary files /dev/null and b/beta/public/images/blog/cra-runtime-error.gif differ diff --git a/beta/public/images/blog/cra-update-exports.gif b/beta/public/images/blog/cra-update-exports.gif new file mode 100644 index 000000000..2820d63df Binary files /dev/null and b/beta/public/images/blog/cra-update-exports.gif 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 new file mode 100644 index 000000000..223f5abf2 Binary files /dev/null and b/beta/public/images/blog/create-apps-with-no-configuration/compiled-successfully.png 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 new file mode 100644 index 000000000..20aa25e3c Binary files /dev/null and b/beta/public/images/blog/create-apps-with-no-configuration/compiled-with-warnings.png 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 new file mode 100644 index 000000000..44aff6dcd Binary files /dev/null and b/beta/public/images/blog/create-apps-with-no-configuration/created-folder.png 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 new file mode 100644 index 000000000..a72b5fb2e Binary files /dev/null and b/beta/public/images/blog/create-apps-with-no-configuration/failed-to-compile.png 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 new file mode 100644 index 000000000..a7b931e12 Binary files /dev/null and b/beta/public/images/blog/create-apps-with-no-configuration/npm-run-build.png differ diff --git a/beta/public/images/blog/devtools-component-filters.gif b/beta/public/images/blog/devtools-component-filters.gif new file mode 100644 index 000000000..287c66757 Binary files /dev/null and b/beta/public/images/blog/devtools-component-filters.gif differ diff --git a/beta/public/images/blog/devtools-full.gif b/beta/public/images/blog/devtools-full.gif new file mode 100644 index 000000000..fd7ed9493 Binary files /dev/null and b/beta/public/images/blog/devtools-full.gif differ diff --git a/beta/public/images/blog/devtools-highlight-updates.png b/beta/public/images/blog/devtools-highlight-updates.png new file mode 100644 index 000000000..780bcf2ef Binary files /dev/null and b/beta/public/images/blog/devtools-highlight-updates.png differ diff --git a/beta/public/images/blog/devtools-search.gif b/beta/public/images/blog/devtools-search.gif new file mode 100644 index 000000000..22d80051d Binary files /dev/null and b/beta/public/images/blog/devtools-search.gif differ diff --git a/beta/public/images/blog/devtools-side-pane.gif b/beta/public/images/blog/devtools-side-pane.gif new file mode 100644 index 000000000..381e3554e Binary files /dev/null and b/beta/public/images/blog/devtools-side-pane.gif differ diff --git a/beta/public/images/blog/devtools-tree-view.png b/beta/public/images/blog/devtools-tree-view.png new file mode 100644 index 000000000..854a39f8f Binary files /dev/null and b/beta/public/images/blog/devtools-tree-view.png differ diff --git a/beta/public/images/blog/devtools-v4-screenshot.png b/beta/public/images/blog/devtools-v4-screenshot.png new file mode 100644 index 000000000..83a67d548 Binary files /dev/null and b/beta/public/images/blog/devtools-v4-screenshot.png differ diff --git a/beta/public/images/blog/dog-tutorial.png b/beta/public/images/blog/dog-tutorial.png new file mode 100644 index 000000000..72f8b4341 Binary files /dev/null and b/beta/public/images/blog/dog-tutorial.png differ diff --git a/beta/public/images/blog/first-look.png b/beta/public/images/blog/first-look.png new file mode 100644 index 000000000..d36aa1f35 Binary files /dev/null and b/beta/public/images/blog/first-look.png differ diff --git a/beta/public/images/blog/flux-chart.png b/beta/public/images/blog/flux-chart.png new file mode 100644 index 000000000..fbfdf94ea Binary files /dev/null and b/beta/public/images/blog/flux-chart.png differ diff --git a/beta/public/images/blog/flux-diagram.png b/beta/public/images/blog/flux-diagram.png new file mode 100644 index 000000000..69cf64e0b Binary files /dev/null and b/beta/public/images/blog/flux-diagram.png differ diff --git a/beta/public/images/blog/genesis_skeleton.png b/beta/public/images/blog/genesis_skeleton.png new file mode 100644 index 000000000..4b7c51e29 Binary files /dev/null and b/beta/public/images/blog/genesis_skeleton.png differ diff --git a/beta/public/images/blog/gpu-cursor-move.gif b/beta/public/images/blog/gpu-cursor-move.gif new file mode 100644 index 000000000..b3a621f78 Binary files /dev/null and b/beta/public/images/blog/gpu-cursor-move.gif differ diff --git a/beta/public/images/blog/guess_filter.jpg b/beta/public/images/blog/guess_filter.jpg new file mode 100644 index 000000000..1983df1c8 Binary files /dev/null and b/beta/public/images/blog/guess_filter.jpg differ diff --git a/beta/public/images/blog/hacker-news-react-native.png b/beta/public/images/blog/hacker-news-react-native.png new file mode 100644 index 000000000..a65679aba Binary files /dev/null and b/beta/public/images/blog/hacker-news-react-native.png differ diff --git a/beta/public/images/blog/highlight-updates-example.gif b/beta/public/images/blog/highlight-updates-example.gif new file mode 100644 index 000000000..ab0c87d0c Binary files /dev/null and b/beta/public/images/blog/highlight-updates-example.gif 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 new file mode 100644 index 000000000..9c027444d Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/commit-selector.png 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 new file mode 100644 index 000000000..3a3615db2 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/component-chart.png 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 new file mode 100644 index 000000000..eabb3e500 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/devtools-profiler-tab.png 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 new file mode 100644 index 000000000..1d73258e3 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/filtering-commits.gif 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 new file mode 100644 index 000000000..80840b55c Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/flame-chart.png 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 new file mode 100644 index 000000000..8f1a14c61 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/interactions-for-commit.png 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 new file mode 100644 index 000000000..5683ac94a Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/interactions.png 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 new file mode 100644 index 000000000..e500459c3 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/navigate-between-interactions-and-commits.gif 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 new file mode 100644 index 000000000..d70199fc7 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/no-interactions.png 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 new file mode 100644 index 000000000..e56fd4128 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/no-profiler-data-multi-root.png 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 new file mode 100644 index 000000000..f77b42f85 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/no-render-times-for-selected-component.png 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 new file mode 100644 index 000000000..84a4dcac2 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/no-timing-data-for-commit.png 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 new file mode 100644 index 000000000..b0b05b127 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/props-and-state.gif 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 new file mode 100644 index 000000000..01246f5e5 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/ranked-chart.png 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 new file mode 100644 index 000000000..dac21e249 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif 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 new file mode 100644 index 000000000..ae965be9b Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/see-which-props-changed.gif 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 new file mode 100644 index 000000000..b53f31025 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/select-a-root-to-view-profiling-data.gif 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 new file mode 100644 index 000000000..7256474c0 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/start-profiling.png 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 new file mode 100644 index 000000000..4ef27f333 Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/stop-profiling.png 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 new file mode 100644 index 000000000..3a8be2c9b Binary files /dev/null and b/beta/public/images/blog/introducing-the-react-profiler/zoom-in-and-out.gif differ diff --git a/beta/public/images/blog/jsx-compiler.png b/beta/public/images/blog/jsx-compiler.png new file mode 100644 index 000000000..9b5e169c0 Binary files /dev/null and b/beta/public/images/blog/jsx-compiler.png differ diff --git a/beta/public/images/blog/kendoui.png b/beta/public/images/blog/kendoui.png new file mode 100644 index 000000000..8b18bf438 Binary files /dev/null and b/beta/public/images/blog/kendoui.png differ diff --git a/beta/public/images/blog/khan-academy-editor.png b/beta/public/images/blog/khan-academy-editor.png new file mode 100644 index 000000000..f0413939d Binary files /dev/null and b/beta/public/images/blog/khan-academy-editor.png differ diff --git a/beta/public/images/blog/landoflisp.png b/beta/public/images/blog/landoflisp.png new file mode 100644 index 000000000..42bad2d4b Binary files /dev/null and b/beta/public/images/blog/landoflisp.png differ diff --git a/beta/public/images/blog/lights-out.png b/beta/public/images/blog/lights-out.png new file mode 100644 index 000000000..78c545e7e Binary files /dev/null and b/beta/public/images/blog/lights-out.png differ diff --git a/beta/public/images/blog/makona-editor.png b/beta/public/images/blog/makona-editor.png new file mode 100644 index 000000000..4fc4ece99 Binary files /dev/null and b/beta/public/images/blog/makona-editor.png differ diff --git a/beta/public/images/blog/markdown_refactor.png b/beta/public/images/blog/markdown_refactor.png new file mode 100644 index 000000000..b81679541 Binary files /dev/null and b/beta/public/images/blog/markdown_refactor.png differ diff --git a/beta/public/images/blog/modus-create.gif b/beta/public/images/blog/modus-create.gif new file mode 100644 index 000000000..194252ad1 Binary files /dev/null and b/beta/public/images/blog/modus-create.gif differ diff --git a/beta/public/images/blog/monkeys.gif b/beta/public/images/blog/monkeys.gif new file mode 100644 index 000000000..3da6185ce Binary files /dev/null and b/beta/public/images/blog/monkeys.gif differ diff --git a/beta/public/images/blog/ngreact.png b/beta/public/images/blog/ngreact.png new file mode 100644 index 000000000..6ce7e3418 Binary files /dev/null and b/beta/public/images/blog/ngreact.png differ diff --git a/beta/public/images/blog/om-backbone.png b/beta/public/images/blog/om-backbone.png new file mode 100644 index 000000000..df411b280 Binary files /dev/null and b/beta/public/images/blog/om-backbone.png differ diff --git a/beta/public/images/blog/parse-react.jpg b/beta/public/images/blog/parse-react.jpg new file mode 100644 index 000000000..15e45d2ae Binary files /dev/null and b/beta/public/images/blog/parse-react.jpg differ diff --git a/beta/public/images/blog/polarr.jpg b/beta/public/images/blog/polarr.jpg new file mode 100644 index 000000000..1cfb3cc90 Binary files /dev/null and b/beta/public/images/blog/polarr.jpg differ diff --git a/beta/public/images/blog/propeller-logo.png b/beta/public/images/blog/propeller-logo.png new file mode 100644 index 000000000..81cfaa181 Binary files /dev/null and b/beta/public/images/blog/propeller-logo.png differ diff --git a/beta/public/images/blog/property-finder.png b/beta/public/images/blog/property-finder.png new file mode 100644 index 000000000..709448b4f Binary files /dev/null and b/beta/public/images/blog/property-finder.png differ diff --git a/beta/public/images/blog/quiztime.png b/beta/public/images/blog/quiztime.png new file mode 100644 index 000000000..7021036e6 Binary files /dev/null and b/beta/public/images/blog/quiztime.png differ diff --git a/beta/public/images/blog/react-50k-mock-full.jpg b/beta/public/images/blog/react-50k-mock-full.jpg new file mode 100644 index 000000000..1ebac0063 Binary files /dev/null and b/beta/public/images/blog/react-50k-mock-full.jpg differ diff --git a/beta/public/images/blog/react-50k-mock.jpg b/beta/public/images/blog/react-50k-mock.jpg new file mode 100644 index 000000000..bc2de61d4 Binary files /dev/null and b/beta/public/images/blog/react-50k-mock.jpg differ diff --git a/beta/public/images/blog/react-50k-tshirt.jpg b/beta/public/images/blog/react-50k-tshirt.jpg new file mode 100644 index 000000000..c96b44ca5 Binary files /dev/null and b/beta/public/images/blog/react-50k-tshirt.jpg differ diff --git a/beta/public/images/blog/react-browserify-gulp.jpg b/beta/public/images/blog/react-browserify-gulp.jpg new file mode 100644 index 000000000..d4389d6e9 Binary files /dev/null and b/beta/public/images/blog/react-browserify-gulp.jpg differ diff --git a/beta/public/images/blog/react-dev-tools.jpg b/beta/public/images/blog/react-dev-tools.jpg new file mode 100644 index 000000000..7eef44629 Binary files /dev/null and b/beta/public/images/blog/react-dev-tools.jpg differ diff --git a/beta/public/images/blog/react-diff-tree.png b/beta/public/images/blog/react-diff-tree.png new file mode 100644 index 000000000..9935e4ae1 Binary files /dev/null and b/beta/public/images/blog/react-diff-tree.png differ diff --git a/beta/public/images/blog/react-draggable.png b/beta/public/images/blog/react-draggable.png new file mode 100644 index 000000000..c0cb61f16 Binary files /dev/null and b/beta/public/images/blog/react-draggable.png differ diff --git a/beta/public/images/blog/react-hackathon.jpg b/beta/public/images/blog/react-hackathon.jpg new file mode 100644 index 000000000..2537d9865 Binary files /dev/null and b/beta/public/images/blog/react-hackathon.jpg differ diff --git a/beta/public/images/blog/react-page.png b/beta/public/images/blog/react-page.png new file mode 100644 index 000000000..3249fb370 Binary files /dev/null and b/beta/public/images/blog/react-page.png differ diff --git a/beta/public/images/blog/react-perf-chrome-timeline.png b/beta/public/images/blog/react-perf-chrome-timeline.png new file mode 100644 index 000000000..e9db8acfb Binary files /dev/null and b/beta/public/images/blog/react-perf-chrome-timeline.png differ diff --git a/beta/public/images/blog/react-php.png b/beta/public/images/blog/react-php.png new file mode 100644 index 000000000..cb7e69abc Binary files /dev/null and b/beta/public/images/blog/react-php.png differ diff --git a/beta/public/images/blog/react-svg-fbp.png b/beta/public/images/blog/react-svg-fbp.png new file mode 100644 index 000000000..ef89babad Binary files /dev/null and b/beta/public/images/blog/react-svg-fbp.png 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 new file mode 100644 index 000000000..92b6c9919 Binary files /dev/null and b/beta/public/images/blog/react-v16.13.0/hydration-warning-after.png 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 new file mode 100644 index 000000000..381ab8677 Binary files /dev/null and b/beta/public/images/blog/react-v16.13.0/hydration-warning-before.png 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 new file mode 100644 index 000000000..955b30fdc Binary files /dev/null and b/beta/public/images/blog/react-v16.9.0/codemod.gif 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 new file mode 100644 index 000000000..3ee69d748 Binary files /dev/null and b/beta/public/images/blog/react-v16.9.0/cwm-warning.png 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 new file mode 100644 index 000000000..c8b23c0d6 Binary files /dev/null and b/beta/public/images/blog/react-v17-rc/react_17_delegation.png differ diff --git a/beta/public/images/blog/reactive-bookmarklet.png b/beta/public/images/blog/reactive-bookmarklet.png new file mode 100644 index 000000000..25351e717 Binary files /dev/null and b/beta/public/images/blog/reactive-bookmarklet.png differ diff --git a/beta/public/images/blog/reflux-flux.png b/beta/public/images/blog/reflux-flux.png new file mode 100644 index 000000000..dad38c7d1 Binary files /dev/null and b/beta/public/images/blog/reflux-flux.png differ diff --git a/beta/public/images/blog/relay-components/relay-architecture.png b/beta/public/images/blog/relay-components/relay-architecture.png new file mode 100644 index 000000000..0cfbff0d8 Binary files /dev/null and b/beta/public/images/blog/relay-components/relay-architecture.png 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 new file mode 100644 index 000000000..2f062dd65 Binary files /dev/null and b/beta/public/images/blog/relay-components/relay-containers-data-flow.png differ diff --git a/beta/public/images/blog/relay-components/relay-containers.png b/beta/public/images/blog/relay-components/relay-containers.png new file mode 100644 index 000000000..be7dee719 Binary files /dev/null and b/beta/public/images/blog/relay-components/relay-containers.png differ diff --git a/beta/public/images/blog/relay-components/sample-newsfeed.png b/beta/public/images/blog/relay-components/sample-newsfeed.png new file mode 100644 index 000000000..0e7f5b5de Binary files /dev/null and b/beta/public/images/blog/relay-components/sample-newsfeed.png differ diff --git a/beta/public/images/blog/relay-visual-architecture-tour.png b/beta/public/images/blog/relay-visual-architecture-tour.png new file mode 100644 index 000000000..b35c4978f Binary files /dev/null and b/beta/public/images/blog/relay-visual-architecture-tour.png differ diff --git a/beta/public/images/blog/release-script-build-confirmation.png b/beta/public/images/blog/release-script-build-confirmation.png new file mode 100644 index 000000000..02026d172 Binary files /dev/null and b/beta/public/images/blog/release-script-build-confirmation.png differ diff --git a/beta/public/images/blog/release-script-build-overview.png b/beta/public/images/blog/release-script-build-overview.png new file mode 100644 index 000000000..d726be464 Binary files /dev/null and b/beta/public/images/blog/release-script-build-overview.png differ diff --git a/beta/public/images/blog/release-script-publish-confirmation.png b/beta/public/images/blog/release-script-publish-confirmation.png new file mode 100644 index 000000000..e05e64830 Binary files /dev/null and b/beta/public/images/blog/release-script-publish-confirmation.png differ diff --git a/beta/public/images/blog/resistance-calculator.png b/beta/public/images/blog/resistance-calculator.png new file mode 100644 index 000000000..16e8b3536 Binary files /dev/null and b/beta/public/images/blog/resistance-calculator.png differ diff --git a/beta/public/images/blog/skills-matter.png b/beta/public/images/blog/skills-matter.png new file mode 100644 index 000000000..4a4858c3d Binary files /dev/null and b/beta/public/images/blog/skills-matter.png differ diff --git a/beta/public/images/blog/snake.png b/beta/public/images/blog/snake.png new file mode 100644 index 000000000..96d72b38a Binary files /dev/null and b/beta/public/images/blog/snake.png differ diff --git a/beta/public/images/blog/steve_reverse.gif b/beta/public/images/blog/steve_reverse.gif new file mode 100644 index 000000000..a442fbbd9 Binary files /dev/null and b/beta/public/images/blog/steve_reverse.gif 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 new file mode 100644 index 000000000..fbdeccde6 Binary files /dev/null and b/beta/public/images/blog/strict-mode-unsafe-lifecycles-warning.png differ diff --git a/beta/public/images/blog/sweet-jsx.png b/beta/public/images/blog/sweet-jsx.png new file mode 100644 index 000000000..f20aeede4 Binary files /dev/null and b/beta/public/images/blog/sweet-jsx.png differ diff --git a/beta/public/images/blog/tcomb-react-native.png b/beta/public/images/blog/tcomb-react-native.png new file mode 100644 index 000000000..98120c758 Binary files /dev/null and b/beta/public/images/blog/tcomb-react-native.png differ diff --git a/beta/public/images/blog/thinking-in-react-components.png b/beta/public/images/blog/thinking-in-react-components.png new file mode 100644 index 000000000..c71a86bcb Binary files /dev/null and b/beta/public/images/blog/thinking-in-react-components.png differ diff --git a/beta/public/images/blog/thinking-in-react-mock.png b/beta/public/images/blog/thinking-in-react-mock.png new file mode 100644 index 000000000..78bd00a4a Binary files /dev/null and b/beta/public/images/blog/thinking-in-react-mock.png differ diff --git a/beta/public/images/blog/todomvc.png b/beta/public/images/blog/todomvc.png new file mode 100644 index 000000000..ee78eb1cd Binary files /dev/null and b/beta/public/images/blog/todomvc.png differ diff --git a/beta/public/images/blog/turboreact.png b/beta/public/images/blog/turboreact.png new file mode 100644 index 000000000..e8ef8cd3a Binary files /dev/null and b/beta/public/images/blog/turboreact.png differ diff --git a/beta/public/images/blog/tutsplus.png b/beta/public/images/blog/tutsplus.png new file mode 100644 index 000000000..771653086 Binary files /dev/null and b/beta/public/images/blog/tutsplus.png differ diff --git a/beta/public/images/blog/unite.png b/beta/public/images/blog/unite.png new file mode 100644 index 000000000..ab45a5355 Binary files /dev/null and b/beta/public/images/blog/unite.png differ diff --git a/beta/public/images/blog/versioning-1.png b/beta/public/images/blog/versioning-1.png new file mode 100644 index 000000000..c13f98fd1 Binary files /dev/null and b/beta/public/images/blog/versioning-1.png differ diff --git a/beta/public/images/blog/versioning-2.png b/beta/public/images/blog/versioning-2.png new file mode 100644 index 000000000..39de2a010 Binary files /dev/null and b/beta/public/images/blog/versioning-2.png differ diff --git a/beta/public/images/blog/versioning-3.png b/beta/public/images/blog/versioning-3.png new file mode 100644 index 000000000..1824e89a9 Binary files /dev/null and b/beta/public/images/blog/versioning-3.png differ diff --git a/beta/public/images/blog/versioning-4.png b/beta/public/images/blog/versioning-4.png new file mode 100644 index 000000000..13ba32e39 Binary files /dev/null and b/beta/public/images/blog/versioning-4.png differ diff --git a/beta/public/images/blog/versioning-5.png b/beta/public/images/blog/versioning-5.png new file mode 100644 index 000000000..542a3926b Binary files /dev/null and b/beta/public/images/blog/versioning-5.png differ diff --git a/beta/public/images/blog/versioning-6.png b/beta/public/images/blog/versioning-6.png new file mode 100644 index 000000000..e82bc7136 Binary files /dev/null and b/beta/public/images/blog/versioning-6.png differ diff --git a/beta/public/images/blog/versioning-poll.png b/beta/public/images/blog/versioning-poll.png new file mode 100644 index 000000000..8b3e18d93 Binary files /dev/null and b/beta/public/images/blog/versioning-poll.png 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 new file mode 100644 index 000000000..e061325ac Binary files /dev/null and b/beta/public/images/blog/warn-legacy-context-in-strict-mode.png differ diff --git a/beta/public/images/blog/weather.png b/beta/public/images/blog/weather.png new file mode 100644 index 000000000..90c5e6fea Binary files /dev/null and b/beta/public/images/blog/weather.png differ diff --git a/beta/public/images/blog/wolfenstein_react.png b/beta/public/images/blog/wolfenstein_react.png new file mode 100644 index 000000000..98241b864 Binary files /dev/null and b/beta/public/images/blog/wolfenstein_react.png differ diff --git a/beta/public/images/blog/xoxo2013.png b/beta/public/images/blog/xoxo2013.png new file mode 100644 index 000000000..d35989095 Binary files /dev/null and b/beta/public/images/blog/xoxo2013.png differ diff --git a/beta/public/images/blog/xreact.png b/beta/public/images/blog/xreact.png new file mode 100644 index 000000000..ba23489d5 Binary files /dev/null and b/beta/public/images/blog/xreact.png differ diff --git a/beta/public/images/docs/blur-popover-close.gif b/beta/public/images/docs/blur-popover-close.gif new file mode 100644 index 000000000..fefc6b8a4 Binary files /dev/null and b/beta/public/images/docs/blur-popover-close.gif differ diff --git a/beta/public/images/docs/cdn-cors-header.png b/beta/public/images/docs/cdn-cors-header.png new file mode 100644 index 000000000..31b047cbd Binary files /dev/null and b/beta/public/images/docs/cdn-cors-header.png differ diff --git a/beta/public/images/docs/cm-steps-simple.png b/beta/public/images/docs/cm-steps-simple.png new file mode 100644 index 000000000..e5683f9e6 Binary files /dev/null and b/beta/public/images/docs/cm-steps-simple.png differ diff --git a/beta/public/images/docs/codewinds-004.png b/beta/public/images/docs/codewinds-004.png new file mode 100644 index 000000000..6c4bc997f Binary files /dev/null and b/beta/public/images/docs/codewinds-004.png differ diff --git a/beta/public/images/docs/devtools-dev.png b/beta/public/images/docs/devtools-dev.png new file mode 100644 index 000000000..5347b4b8d Binary files /dev/null and b/beta/public/images/docs/devtools-dev.png differ diff --git a/beta/public/images/docs/devtools-prod.png b/beta/public/images/docs/devtools-prod.png new file mode 100644 index 000000000..4e200fb48 Binary files /dev/null and b/beta/public/images/docs/devtools-prod.png 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 new file mode 100644 index 000000000..59045299d Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_context_close.dark.png 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 new file mode 100644 index 000000000..4591aacce Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_context_close.png 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 new file mode 100644 index 000000000..7e0d0bc58 Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_context_far.dark.png 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 new file mode 100644 index 000000000..7a4c85150 Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_context_far.png 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 new file mode 100644 index 000000000..dd7b48556 Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_lifting_state.dark.png 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 new file mode 100644 index 000000000..919b4e684 Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_lifting_state.png 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 new file mode 100644 index 000000000..1cbd5a2f8 Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_prop_drilling.dark.png 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 new file mode 100644 index 000000000..c22cb2c52 Binary files /dev/null and b/beta/public/images/docs/diagrams/passing_data_prop_drilling.png 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 new file mode 100644 index 000000000..24155f936 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_add_component.dark.png 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 new file mode 100644 index 000000000..d98e7bd3d Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_add_component.png 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 new file mode 100644 index 000000000..b2c2efc67 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.dark.png 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 new file mode 100644 index 000000000..84d4ef52d Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_position_p1.png 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 new file mode 100644 index 000000000..9472414cf Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.dark.png 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 new file mode 100644 index 000000000..fad05b2e2 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_position_p2.png 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 new file mode 100644 index 000000000..2b520eb6a Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.dark.png 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 new file mode 100644 index 000000000..1fbbe510a Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_position_p3.png 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 new file mode 100644 index 000000000..0bb042c94 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_pt1.dark.png 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 new file mode 100644 index 000000000..1cbc6874f Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_pt1.png 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 new file mode 100644 index 000000000..ae6bdf95b Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_pt2.dark.png 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 new file mode 100644 index 000000000..3d52b278e Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_pt2.png 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 new file mode 100644 index 000000000..f0eb4a786 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.dark.png 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 new file mode 100644 index 000000000..3d22270d8 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt1.png 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 new file mode 100644 index 000000000..07ef5a761 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.dark.png 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 new file mode 100644 index 000000000..1bbc87a3e Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_diff_same_pt2.png 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 new file mode 100644 index 000000000..4f7c8afdc Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_dom_tree.dark.png 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 new file mode 100644 index 000000000..3b38a1bd3 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_dom_tree.png 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 new file mode 100644 index 000000000..5bc133611 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_increment.dark.png differ diff --git a/beta/public/images/docs/diagrams/preserving_state_increment.png b/beta/public/images/docs/diagrams/preserving_state_increment.png new file mode 100644 index 000000000..9b9ce9ca8 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_increment.png 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 new file mode 100644 index 000000000..cb6a466ac Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_remove_component.dark.png 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 new file mode 100644 index 000000000..966c1744b Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_remove_component.png 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 new file mode 100644 index 000000000..013fcaa80 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_same_component.dark.png 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 new file mode 100644 index 000000000..4cb1b32ed Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_same_component.png 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 new file mode 100644 index 000000000..452343857 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_tree.dark.png differ diff --git a/beta/public/images/docs/diagrams/preserving_state_tree.png b/beta/public/images/docs/diagrams/preserving_state_tree.png new file mode 100644 index 000000000..a77e49ab2 Binary files /dev/null and b/beta/public/images/docs/diagrams/preserving_state_tree.png 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 new file mode 100644 index 000000000..60e5c8f36 Binary files /dev/null and b/beta/public/images/docs/diagrams/responding_to_input_flow.dark.png 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 new file mode 100644 index 000000000..cbbec9ac3 Binary files /dev/null and b/beta/public/images/docs/diagrams/responding_to_input_flow.png 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 new file mode 100644 index 000000000..3efdc29fe Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_child.dark.png differ diff --git a/beta/public/images/docs/diagrams/sharing_data_child.png b/beta/public/images/docs/diagrams/sharing_data_child.png new file mode 100644 index 000000000..afc794bcd Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_child.png 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 new file mode 100644 index 000000000..cf60c235f Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_child_clicked.dark.png 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 new file mode 100644 index 000000000..c14fb4a8f Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_child_clicked.png 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 new file mode 100644 index 000000000..d4f369835 Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_parent.dark.png differ diff --git a/beta/public/images/docs/diagrams/sharing_data_parent.png b/beta/public/images/docs/diagrams/sharing_data_parent.png new file mode 100644 index 000000000..8c7b70305 Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_parent.png 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 new file mode 100644 index 000000000..ac4c765de Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_parent_clicked.dark.png 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 new file mode 100644 index 000000000..ca16cb8dd Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_data_parent_clicked.png 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 new file mode 100644 index 000000000..dfaf897b0 Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_child.dark.png differ diff --git a/beta/public/images/docs/diagrams/sharing_state_child.png b/beta/public/images/docs/diagrams/sharing_state_child.png new file mode 100644 index 000000000..c3a9f0ec9 Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_child.png 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 new file mode 100644 index 000000000..bc6b3c89a Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_child_clicked.dark.png 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 new file mode 100644 index 000000000..d4dddbd9b Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_child_clicked.png 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 new file mode 100644 index 000000000..ba937de7e Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_parent.dark.png differ diff --git a/beta/public/images/docs/diagrams/sharing_state_parent.png b/beta/public/images/docs/diagrams/sharing_state_parent.png new file mode 100644 index 000000000..3aaaef724 Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_parent.png 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 new file mode 100644 index 000000000..22ef522b4 Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_parent_clicked.dark.png 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 new file mode 100644 index 000000000..406cd8314 Binary files /dev/null and b/beta/public/images/docs/diagrams/sharing_state_parent_clicked.png 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 new file mode 100644 index 000000000..3f7184239 Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_form.dark.png differ diff --git a/beta/public/images/docs/diagrams/writing_jsx_form.png b/beta/public/images/docs/diagrams/writing_jsx_form.png new file mode 100644 index 000000000..21baa97fc Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_form.png 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 new file mode 100644 index 000000000..c73d3fb42 Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_html.dark.png differ diff --git a/beta/public/images/docs/diagrams/writing_jsx_html.png b/beta/public/images/docs/diagrams/writing_jsx_html.png new file mode 100644 index 000000000..6f30314a3 Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_html.png 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 new file mode 100644 index 000000000..aee00cb98 Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_js.dark.png differ diff --git a/beta/public/images/docs/diagrams/writing_jsx_js.png b/beta/public/images/docs/diagrams/writing_jsx_js.png new file mode 100644 index 000000000..9c3d44216 Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_js.png 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 new file mode 100644 index 000000000..5fa45be1c Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_sidebar.dark.png differ diff --git a/beta/public/images/docs/diagrams/writing_jsx_sidebar.png b/beta/public/images/docs/diagrams/writing_jsx_sidebar.png new file mode 100644 index 000000000..b1474562d Binary files /dev/null and b/beta/public/images/docs/diagrams/writing_jsx_sidebar.png 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 new file mode 100644 index 000000000..db828905a Binary files /dev/null and b/beta/public/images/docs/error-boundaries-stack-trace-line-numbers.png differ diff --git a/beta/public/images/docs/error-boundaries-stack-trace.png b/beta/public/images/docs/error-boundaries-stack-trace.png new file mode 100644 index 000000000..f0d49d903 Binary files /dev/null and b/beta/public/images/docs/error-boundaries-stack-trace.png differ diff --git a/beta/public/images/docs/granular-dom-updates.gif b/beta/public/images/docs/granular-dom-updates.gif new file mode 100644 index 000000000..1651b0dae Binary files /dev/null and b/beta/public/images/docs/granular-dom-updates.gif differ diff --git a/beta/public/images/docs/illustrations/i_browser-paint.png b/beta/public/images/docs/illustrations/i_browser-paint.png new file mode 100644 index 000000000..b0d61fa8f Binary files /dev/null and b/beta/public/images/docs/illustrations/i_browser-paint.png differ diff --git a/beta/public/images/docs/illustrations/i_children-prop.png b/beta/public/images/docs/illustrations/i_children-prop.png new file mode 100644 index 000000000..296c626dc Binary files /dev/null and b/beta/public/images/docs/illustrations/i_children-prop.png 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 new file mode 100644 index 000000000..206d73e51 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_declarative-ui-programming.png differ diff --git a/beta/public/images/docs/illustrations/i_html_js.svg b/beta/public/images/docs/illustrations/i_html_js.svg new file mode 100644 index 000000000..9b6f5bad8 --- /dev/null +++ b/beta/public/images/docs/illustrations/i_html_js.svg @@ -0,0 +1,95 @@ + + + + + + + + + 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 new file mode 100644 index 000000000..1e3b5fdd8 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_imperative-ui-programming.png differ diff --git a/beta/public/images/docs/illustrations/i_import-export.svg b/beta/public/images/docs/illustrations/i_import-export.svg new file mode 100644 index 000000000..eb62e2b8c --- /dev/null +++ b/beta/public/images/docs/illustrations/i_import-export.svg @@ -0,0 +1,100 @@ + + + + + + + + + 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 new file mode 100644 index 000000000..35150b22d Binary files /dev/null and b/beta/public/images/docs/illustrations/i_inputs1.png differ diff --git a/beta/public/images/docs/illustrations/i_inputs2.png b/beta/public/images/docs/illustrations/i_inputs2.png new file mode 100644 index 000000000..f519af36e Binary files /dev/null and b/beta/public/images/docs/illustrations/i_inputs2.png differ diff --git a/beta/public/images/docs/illustrations/i_jsx.svg b/beta/public/images/docs/illustrations/i_jsx.svg new file mode 100644 index 000000000..629cad665 --- /dev/null +++ b/beta/public/images/docs/illustrations/i_jsx.svg @@ -0,0 +1,55 @@ + + + + + + + + + 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 new file mode 100644 index 000000000..46dba7b24 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_puritea-recipe.png differ diff --git a/beta/public/images/docs/illustrations/i_react-batching.png b/beta/public/images/docs/illustrations/i_react-batching.png new file mode 100644 index 000000000..e213ba3ad Binary files /dev/null and b/beta/public/images/docs/illustrations/i_react-batching.png differ diff --git a/beta/public/images/docs/illustrations/i_ref.png b/beta/public/images/docs/illustrations/i_ref.png new file mode 100644 index 000000000..c391e57e4 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_ref.png 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 new file mode 100644 index 000000000..d62ba5806 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_render-and-commit1.png 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 new file mode 100644 index 000000000..e01d0cce7 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_render-and-commit2.png 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 new file mode 100644 index 000000000..bdf58c0e0 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_render-and-commit3.png differ diff --git a/beta/public/images/docs/illustrations/i_render1.png b/beta/public/images/docs/illustrations/i_render1.png new file mode 100644 index 000000000..3613c7691 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_render1.png differ diff --git a/beta/public/images/docs/illustrations/i_render2.png b/beta/public/images/docs/illustrations/i_render2.png new file mode 100644 index 000000000..ca53a7785 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_render2.png differ diff --git a/beta/public/images/docs/illustrations/i_render3.png b/beta/public/images/docs/illustrations/i_render3.png new file mode 100644 index 000000000..797860a7c Binary files /dev/null and b/beta/public/images/docs/illustrations/i_render3.png differ diff --git a/beta/public/images/docs/illustrations/i_rerender1.png b/beta/public/images/docs/illustrations/i_rerender1.png new file mode 100644 index 000000000..e94361e7b Binary files /dev/null and b/beta/public/images/docs/illustrations/i_rerender1.png differ diff --git a/beta/public/images/docs/illustrations/i_rerender2.png b/beta/public/images/docs/illustrations/i_rerender2.png new file mode 100644 index 000000000..6d85cae84 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_rerender2.png differ diff --git a/beta/public/images/docs/illustrations/i_rerender3.png b/beta/public/images/docs/illustrations/i_rerender3.png new file mode 100644 index 000000000..d589a9b93 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_rerender3.png differ diff --git a/beta/public/images/docs/illustrations/i_state-snapshot1.png b/beta/public/images/docs/illustrations/i_state-snapshot1.png new file mode 100644 index 000000000..69bbf2b72 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_state-snapshot1.png differ diff --git a/beta/public/images/docs/illustrations/i_state-snapshot2.png b/beta/public/images/docs/illustrations/i_state-snapshot2.png new file mode 100644 index 000000000..eea48a218 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_state-snapshot2.png differ diff --git a/beta/public/images/docs/illustrations/i_state-snapshot3.png b/beta/public/images/docs/illustrations/i_state-snapshot3.png new file mode 100644 index 000000000..a393528e2 Binary files /dev/null and b/beta/public/images/docs/illustrations/i_state-snapshot3.png differ diff --git a/beta/public/images/docs/implementation-notes-tree.png b/beta/public/images/docs/implementation-notes-tree.png new file mode 100644 index 000000000..923ef5d0d Binary files /dev/null and b/beta/public/images/docs/implementation-notes-tree.png differ diff --git a/beta/public/images/docs/javascript-jabber.png b/beta/public/images/docs/javascript-jabber.png new file mode 100644 index 000000000..57d63c41c Binary files /dev/null and b/beta/public/images/docs/javascript-jabber.png differ diff --git a/beta/public/images/docs/keyboard-focus.png b/beta/public/images/docs/keyboard-focus.png new file mode 100644 index 000000000..65a8dc300 Binary files /dev/null and b/beta/public/images/docs/keyboard-focus.png differ diff --git a/beta/public/images/docs/outerclick-with-keyboard.gif b/beta/public/images/docs/outerclick-with-keyboard.gif new file mode 100644 index 000000000..c82d299f8 Binary files /dev/null and b/beta/public/images/docs/outerclick-with-keyboard.gif differ diff --git a/beta/public/images/docs/outerclick-with-mouse.gif b/beta/public/images/docs/outerclick-with-mouse.gif new file mode 100644 index 000000000..e562e0324 Binary files /dev/null and b/beta/public/images/docs/outerclick-with-mouse.gif differ diff --git a/beta/public/images/docs/perf-dom.png b/beta/public/images/docs/perf-dom.png new file mode 100644 index 000000000..9a843c6ca Binary files /dev/null and b/beta/public/images/docs/perf-dom.png differ diff --git a/beta/public/images/docs/perf-exclusive.png b/beta/public/images/docs/perf-exclusive.png new file mode 100644 index 000000000..a8ad5003c Binary files /dev/null and b/beta/public/images/docs/perf-exclusive.png differ diff --git a/beta/public/images/docs/perf-inclusive.png b/beta/public/images/docs/perf-inclusive.png new file mode 100644 index 000000000..e46b370aa Binary files /dev/null and b/beta/public/images/docs/perf-inclusive.png differ diff --git a/beta/public/images/docs/perf-wasted.png b/beta/public/images/docs/perf-wasted.png new file mode 100644 index 000000000..c73131818 Binary files /dev/null and b/beta/public/images/docs/perf-wasted.png differ diff --git a/beta/public/images/docs/react-devtools-extension.png b/beta/public/images/docs/react-devtools-extension.png new file mode 100644 index 000000000..6ea2aad8d Binary files /dev/null and b/beta/public/images/docs/react-devtools-extension.png differ diff --git a/beta/public/images/docs/react-devtools-standalone.png b/beta/public/images/docs/react-devtools-standalone.png new file mode 100644 index 000000000..07da74137 Binary files /dev/null and b/beta/public/images/docs/react-devtools-standalone.png differ diff --git a/beta/public/images/docs/react-devtools-state.gif b/beta/public/images/docs/react-devtools-state.gif new file mode 100644 index 000000000..c9ff6cd35 Binary files /dev/null and b/beta/public/images/docs/react-devtools-state.gif differ diff --git a/beta/public/images/docs/react-devtools-usedebugvalue.png b/beta/public/images/docs/react-devtools-usedebugvalue.png new file mode 100644 index 000000000..854044318 Binary files /dev/null and b/beta/public/images/docs/react-devtools-usedebugvalue.png 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 new file mode 100644 index 000000000..21802352c Binary files /dev/null and b/beta/public/images/docs/s_thinking-in-react_ui.png 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 new file mode 100644 index 000000000..d38f3e19f Binary files /dev/null and b/beta/public/images/docs/s_thinking-in-react_ui_outline.png differ diff --git a/beta/public/images/docs/should-component-update.png b/beta/public/images/docs/should-component-update.png new file mode 100644 index 000000000..590af60b8 Binary files /dev/null and b/beta/public/images/docs/should-component-update.png differ diff --git a/beta/public/images/docs/source/i_browser-paint.psd b/beta/public/images/docs/source/i_browser-paint.psd new file mode 100644 index 000000000..bb541e889 Binary files /dev/null and b/beta/public/images/docs/source/i_browser-paint.psd differ diff --git a/beta/public/images/docs/source/i_children-prop.psd b/beta/public/images/docs/source/i_children-prop.psd new file mode 100644 index 000000000..2577c0aa0 Binary files /dev/null and b/beta/public/images/docs/source/i_children-prop.psd 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 new file mode 100644 index 000000000..3b1a9a4d1 Binary files /dev/null and b/beta/public/images/docs/source/i_declarative-ui-programming.psd 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 new file mode 100644 index 000000000..c1511b022 Binary files /dev/null and b/beta/public/images/docs/source/i_imperative-ui-programming.psd 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 new file mode 100644 index 000000000..bab04dc08 Binary files /dev/null and b/beta/public/images/docs/source/i_keys-in-trees.psd differ diff --git a/beta/public/images/docs/source/i_puritea-recipe.psd b/beta/public/images/docs/source/i_puritea-recipe.psd new file mode 100644 index 000000000..72a33ab30 Binary files /dev/null and b/beta/public/images/docs/source/i_puritea-recipe.psd differ diff --git a/beta/public/images/docs/source/i_react-batching.psd b/beta/public/images/docs/source/i_react-batching.psd new file mode 100644 index 000000000..88bcd617b Binary files /dev/null and b/beta/public/images/docs/source/i_react-batching.psd 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 new file mode 100644 index 000000000..5e422ba63 Binary files /dev/null and b/beta/public/images/docs/source/i_react-is-blind-to-ui-swap.psd differ diff --git a/beta/public/images/docs/source/i_ref.psd b/beta/public/images/docs/source/i_ref.psd new file mode 100644 index 000000000..12349b431 Binary files /dev/null and b/beta/public/images/docs/source/i_ref.psd differ diff --git a/beta/public/images/docs/source/i_render-commit.psd b/beta/public/images/docs/source/i_render-commit.psd new file mode 100644 index 000000000..99f62802a Binary files /dev/null and b/beta/public/images/docs/source/i_render-commit.psd differ diff --git a/beta/public/images/docs/source/i_rerender.psd b/beta/public/images/docs/source/i_rerender.psd new file mode 100644 index 000000000..9dc83d5ed Binary files /dev/null and b/beta/public/images/docs/source/i_rerender.psd differ diff --git a/beta/public/images/docs/source/i_rerendering.psd b/beta/public/images/docs/source/i_rerendering.psd new file mode 100644 index 000000000..2ba1cba58 Binary files /dev/null and b/beta/public/images/docs/source/i_rerendering.psd differ diff --git a/beta/public/images/docs/source/i_state-snapshot.psd b/beta/public/images/docs/source/i_state-snapshot.psd new file mode 100644 index 000000000..b8d54ddcc Binary files /dev/null and b/beta/public/images/docs/source/i_state-snapshot.psd differ diff --git a/beta/public/images/docs/source/s_inputs.psd b/beta/public/images/docs/source/s_inputs.psd new file mode 100644 index 000000000..60354742a Binary files /dev/null and b/beta/public/images/docs/source/s_inputs.psd differ diff --git a/beta/public/images/docs/source/s_ui-snapshot.psd b/beta/public/images/docs/source/s_ui-snapshot.psd new file mode 100644 index 000000000..41c65f8fe Binary files /dev/null and b/beta/public/images/docs/source/s_ui-snapshot.psd differ diff --git a/beta/public/images/docs/thinking-in-react-tagtree.png b/beta/public/images/docs/thinking-in-react-tagtree.png new file mode 100644 index 000000000..3d4db2d23 Binary files /dev/null and b/beta/public/images/docs/thinking-in-react-tagtree.png differ diff --git a/beta/public/images/external.png b/beta/public/images/external.png new file mode 100644 index 000000000..748a27e44 Binary files /dev/null and b/beta/public/images/external.png differ diff --git a/beta/public/images/external_2x.png b/beta/public/images/external_2x.png new file mode 100644 index 000000000..66230854d Binary files /dev/null and b/beta/public/images/external_2x.png differ diff --git a/beta/public/images/g_arrow.png b/beta/public/images/g_arrow.png new file mode 100644 index 000000000..36258add5 Binary files /dev/null and b/beta/public/images/g_arrow.png differ diff --git a/beta/public/images/history.png b/beta/public/images/history.png new file mode 100644 index 000000000..4ca56a866 Binary files /dev/null and b/beta/public/images/history.png differ diff --git a/beta/public/images/noise.png b/beta/public/images/noise.png new file mode 100644 index 000000000..698f924f4 Binary files /dev/null and b/beta/public/images/noise.png differ diff --git a/beta/public/images/og-blog.png b/beta/public/images/og-blog.png new file mode 100644 index 000000000..33407683b Binary files /dev/null and b/beta/public/images/og-blog.png differ diff --git a/beta/public/images/og-community.png b/beta/public/images/og-community.png new file mode 100644 index 000000000..f68af3c0f Binary files /dev/null and b/beta/public/images/og-community.png differ diff --git a/beta/public/images/og-home.png b/beta/public/images/og-home.png new file mode 100644 index 000000000..c1f759ce3 Binary files /dev/null and b/beta/public/images/og-home.png differ diff --git a/beta/public/images/og-learn.png b/beta/public/images/og-learn.png new file mode 100644 index 000000000..d1f7d0801 Binary files /dev/null and b/beta/public/images/og-learn.png differ diff --git a/beta/public/images/og-reference.png b/beta/public/images/og-reference.png new file mode 100644 index 000000000..7fcf87147 Binary files /dev/null and b/beta/public/images/og-reference.png differ diff --git a/beta/public/images/og-unknown.png b/beta/public/images/og-unknown.png new file mode 100644 index 000000000..c1f759ce3 Binary files /dev/null and b/beta/public/images/og-unknown.png differ diff --git a/beta/public/images/oss_logo.png b/beta/public/images/oss_logo.png new file mode 100644 index 000000000..3f376bee9 Binary files /dev/null and b/beta/public/images/oss_logo.png differ diff --git a/beta/public/images/search.png b/beta/public/images/search.png new file mode 100644 index 000000000..151377693 Binary files /dev/null and b/beta/public/images/search.png differ diff --git a/beta/public/images/team/acdlite.jpg b/beta/public/images/team/acdlite.jpg new file mode 100644 index 000000000..19ddb901f Binary files /dev/null and b/beta/public/images/team/acdlite.jpg differ diff --git a/beta/public/images/team/gaearon.jpg b/beta/public/images/team/gaearon.jpg new file mode 100644 index 000000000..dff5a5173 Binary files /dev/null and b/beta/public/images/team/gaearon.jpg differ diff --git a/beta/public/images/team/jasonbonta.jpg b/beta/public/images/team/jasonbonta.jpg new file mode 100644 index 000000000..139eb5ece Binary files /dev/null and b/beta/public/images/team/jasonbonta.jpg differ diff --git a/beta/public/images/team/joe.jpg b/beta/public/images/team/joe.jpg new file mode 100644 index 000000000..7eb702e79 Binary files /dev/null and b/beta/public/images/team/joe.jpg differ diff --git a/beta/public/images/team/josh.jpg b/beta/public/images/team/josh.jpg new file mode 100644 index 000000000..ebed23562 Binary files /dev/null and b/beta/public/images/team/josh.jpg differ diff --git a/beta/public/images/team/lauren.jpg b/beta/public/images/team/lauren.jpg new file mode 100644 index 000000000..1485cf8ff Binary files /dev/null and b/beta/public/images/team/lauren.jpg differ diff --git a/beta/public/images/team/lunaruan.jpg b/beta/public/images/team/lunaruan.jpg new file mode 100644 index 000000000..f6de76d4e Binary files /dev/null and b/beta/public/images/team/lunaruan.jpg differ diff --git a/beta/public/images/team/mofei-zhang.png b/beta/public/images/team/mofei-zhang.png new file mode 100644 index 000000000..9f957ada3 Binary files /dev/null and b/beta/public/images/team/mofei-zhang.png differ diff --git a/beta/public/images/team/rickhanlonii.jpg b/beta/public/images/team/rickhanlonii.jpg new file mode 100644 index 000000000..9165db5bc Binary files /dev/null and b/beta/public/images/team/rickhanlonii.jpg differ diff --git a/beta/public/images/team/sam.jpg b/beta/public/images/team/sam.jpg new file mode 100644 index 000000000..f73474b91 Binary files /dev/null and b/beta/public/images/team/sam.jpg differ diff --git a/beta/public/images/team/sathya.jpg b/beta/public/images/team/sathya.jpg new file mode 100644 index 000000000..3d8ca7d58 Binary files /dev/null and b/beta/public/images/team/sathya.jpg differ diff --git a/beta/public/images/team/sebmarkbage.jpg b/beta/public/images/team/sebmarkbage.jpg new file mode 100644 index 000000000..b73e13cd7 Binary files /dev/null and b/beta/public/images/team/sebmarkbage.jpg differ diff --git a/beta/public/images/team/sebsilbermann.jpg b/beta/public/images/team/sebsilbermann.jpg new file mode 100644 index 000000000..f6fa04b37 Binary files /dev/null and b/beta/public/images/team/sebsilbermann.jpg differ diff --git a/beta/public/images/team/seth.jpg b/beta/public/images/team/seth.jpg new file mode 100644 index 000000000..c665a0b00 Binary files /dev/null and b/beta/public/images/team/seth.jpg differ diff --git a/beta/public/images/team/sophiebits.jpg b/beta/public/images/team/sophiebits.jpg new file mode 100644 index 000000000..da5548aca Binary files /dev/null and b/beta/public/images/team/sophiebits.jpg differ diff --git a/beta/public/images/team/tianyu.jpg b/beta/public/images/team/tianyu.jpg new file mode 100644 index 000000000..aeb6ed9fa Binary files /dev/null and b/beta/public/images/team/tianyu.jpg differ diff --git a/beta/public/images/team/yuzhi.jpg b/beta/public/images/team/yuzhi.jpg new file mode 100644 index 000000000..c3f4175d7 Binary files /dev/null and b/beta/public/images/team/yuzhi.jpg differ diff --git a/beta/public/images/tutorial/board-filled-with-ones.png b/beta/public/images/tutorial/board-filled-with-ones.png new file mode 100644 index 000000000..d4ed6805a Binary files /dev/null and b/beta/public/images/tutorial/board-filled-with-ones.png differ diff --git a/beta/public/images/tutorial/board-filled-with-value.png b/beta/public/images/tutorial/board-filled-with-value.png new file mode 100644 index 000000000..f3badc7f6 Binary files /dev/null and b/beta/public/images/tutorial/board-filled-with-value.png differ diff --git a/beta/public/images/tutorial/codesandbox-devtools.png b/beta/public/images/tutorial/codesandbox-devtools.png new file mode 100644 index 000000000..3ef9b2f8f Binary files /dev/null and b/beta/public/images/tutorial/codesandbox-devtools.png differ diff --git a/beta/public/images/tutorial/devtools-select.gif b/beta/public/images/tutorial/devtools-select.gif new file mode 100644 index 000000000..dd1e1aa61 Binary files /dev/null and b/beta/public/images/tutorial/devtools-select.gif differ diff --git a/beta/public/images/tutorial/empty-board.png b/beta/public/images/tutorial/empty-board.png new file mode 100644 index 000000000..f10f05046 Binary files /dev/null and b/beta/public/images/tutorial/empty-board.png differ diff --git a/beta/public/images/tutorial/nine-x-filled-squares.png b/beta/public/images/tutorial/nine-x-filled-squares.png new file mode 100644 index 000000000..164334e6b Binary files /dev/null and b/beta/public/images/tutorial/nine-x-filled-squares.png differ diff --git a/beta/public/images/tutorial/number-filled-board.png b/beta/public/images/tutorial/number-filled-board.png new file mode 100644 index 000000000..f510d00bb Binary files /dev/null and b/beta/public/images/tutorial/number-filled-board.png differ diff --git a/beta/public/images/tutorial/o-replaces-x.gif b/beta/public/images/tutorial/o-replaces-x.gif new file mode 100644 index 000000000..cb0c63691 Binary files /dev/null and b/beta/public/images/tutorial/o-replaces-x.gif differ diff --git a/beta/public/images/tutorial/react-starter-code-codesandbox.png b/beta/public/images/tutorial/react-starter-code-codesandbox.png new file mode 100644 index 000000000..66fb0fdf1 Binary files /dev/null and b/beta/public/images/tutorial/react-starter-code-codesandbox.png differ diff --git a/beta/public/images/tutorial/tictac-adding-x-s.gif b/beta/public/images/tutorial/tictac-adding-x-s.gif new file mode 100644 index 000000000..0f17188c8 Binary files /dev/null and b/beta/public/images/tutorial/tictac-adding-x-s.gif differ diff --git a/beta/public/images/tutorial/two-x-filled-squares.png b/beta/public/images/tutorial/two-x-filled-squares.png new file mode 100644 index 000000000..35638bc0d Binary files /dev/null and b/beta/public/images/tutorial/two-x-filled-squares.png differ diff --git a/beta/public/images/tutorial/x-filled-square.png b/beta/public/images/tutorial/x-filled-square.png new file mode 100644 index 000000000..2b42baad9 Binary files /dev/null and b/beta/public/images/tutorial/x-filled-square.png differ diff --git a/beta/public/js/jsfiddle-integration-babel.js b/beta/public/js/jsfiddle-integration-babel.js new file mode 100644 index 000000000..006c79c8a --- /dev/null +++ b/beta/public/js/jsfiddle-integration-babel.js @@ -0,0 +1,16 @@ +/** + * 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(/^\/\/ 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 new file mode 100644 index 000000000..c3cf1ab8c --- /dev/null +++ b/beta/scripts/headingIDHelpers/validateHeadingIDs.js @@ -0,0 +1,66 @@ +/** + * 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 new file mode 100644 index 000000000..721274e09 --- /dev/null +++ b/beta/scripts/headingIDHelpers/walk.js @@ -0,0 +1,24 @@ +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 new file mode 100644 index 000000000..037e4945f --- /dev/null +++ b/beta/scripts/headingIdLinter.js @@ -0,0 +1,16 @@ +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/src/components/Breadcrumbs.tsx b/beta/src/components/Breadcrumbs.tsx new file mode 100644 index 000000000..96b50cd30 --- /dev/null +++ b/beta/src/components/Breadcrumbs.tsx @@ -0,0 +1,43 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {Fragment} from 'react'; +import Link from 'next/link'; +import type {RouteItem} from 'components/Layout/getRouteMeta'; + +function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) { + 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 new file mode 100644 index 000000000..9d4d0cf2b --- /dev/null +++ b/beta/src/components/Button.tsx @@ -0,0 +1,51 @@ +/* + * 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 new file mode 100644 index 000000000..b3fe73ad9 --- /dev/null +++ b/beta/src/components/ButtonLink.tsx @@ -0,0 +1,45 @@ +/* + * 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 new file mode 100644 index 000000000..3932d0910 --- /dev/null +++ b/beta/src/components/DocsFooter.tsx @@ -0,0 +1,90 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import NextLink from 'next/link'; +import {memo} from 'react'; +import cn from 'classnames'; +import {IconNavArrow} from './Icon/IconNavArrow'; +import type {RouteMeta} from './Layout/getRouteMeta'; + +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 new file mode 100644 index 000000000..38b1f2c5f --- /dev/null +++ b/beta/src/components/ExternalLink.tsx @@ -0,0 +1,16 @@ +/* + * 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 new file mode 100644 index 000000000..53bde1326 --- /dev/null +++ b/beta/src/components/Icon/IconArrow.tsx @@ -0,0 +1,28 @@ +/* + * 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 new file mode 100644 index 000000000..cf85988d2 --- /dev/null +++ b/beta/src/components/Icon/IconArrowSmall.tsx @@ -0,0 +1,31 @@ +/* + * 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 new file mode 100644 index 000000000..1184d77d2 --- /dev/null +++ b/beta/src/components/Icon/IconChevron.tsx @@ -0,0 +1,40 @@ +/* + * 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 new file mode 100644 index 000000000..5ad352cf0 --- /dev/null +++ b/beta/src/components/Icon/IconClose.tsx @@ -0,0 +1,26 @@ +/* + * 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 new file mode 100644 index 000000000..755a2ae34 --- /dev/null +++ b/beta/src/components/Icon/IconCodeBlock.tsx @@ -0,0 +1,24 @@ +/* + * 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 new file mode 100644 index 000000000..500cd4fda --- /dev/null +++ b/beta/src/components/Icon/IconCopy.tsx @@ -0,0 +1,32 @@ +/* + * 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 new file mode 100644 index 000000000..fe3e7774c --- /dev/null +++ b/beta/src/components/Icon/IconDeepDive.tsx @@ -0,0 +1,24 @@ +/* + * 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 new file mode 100644 index 000000000..c0e7f49c2 --- /dev/null +++ b/beta/src/components/Icon/IconDownload.tsx @@ -0,0 +1,28 @@ +/* + * 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 new file mode 100644 index 000000000..f101f62b2 --- /dev/null +++ b/beta/src/components/Icon/IconError.tsx @@ -0,0 +1,22 @@ +/* + * 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 new file mode 100644 index 000000000..0900d6815 --- /dev/null +++ b/beta/src/components/Icon/IconFacebookCircle.tsx @@ -0,0 +1,22 @@ +/* + * 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 new file mode 100644 index 000000000..de2a982bd --- /dev/null +++ b/beta/src/components/Icon/IconGitHub.tsx @@ -0,0 +1,21 @@ +/* + * 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/IconHamburger.tsx b/beta/src/components/Icon/IconHamburger.tsx new file mode 100644 index 000000000..5e6aa725a --- /dev/null +++ b/beta/src/components/Icon/IconHamburger.tsx @@ -0,0 +1,26 @@ +/* + * 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 new file mode 100644 index 000000000..b802bc79c --- /dev/null +++ b/beta/src/components/Icon/IconHint.tsx @@ -0,0 +1,24 @@ +/* + * 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 new file mode 100644 index 000000000..6868a0a75 --- /dev/null +++ b/beta/src/components/Icon/IconInstagram.tsx @@ -0,0 +1,22 @@ +/* + * 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/IconLink.tsx b/beta/src/components/Icon/IconLink.tsx new file mode 100644 index 000000000..587b4e6ed --- /dev/null +++ b/beta/src/components/Icon/IconLink.tsx @@ -0,0 +1,25 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {memo} from 'react'; + +export const IconLink = memo(function IconLink( + props +) { + return ( + + + + ); +}); diff --git a/beta/src/components/Icon/IconNavArrow.tsx b/beta/src/components/Icon/IconNavArrow.tsx new file mode 100644 index 000000000..93eed6e3c --- /dev/null +++ b/beta/src/components/Icon/IconNavArrow.tsx @@ -0,0 +1,42 @@ +/* + * 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 new file mode 100644 index 000000000..e32901c5a --- /dev/null +++ b/beta/src/components/Icon/IconNewPage.tsx @@ -0,0 +1,28 @@ +/* + * 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 new file mode 100644 index 000000000..a0ac1293e --- /dev/null +++ b/beta/src/components/Icon/IconNote.tsx @@ -0,0 +1,24 @@ +/* + * 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/IconPitfall.tsx b/beta/src/components/Icon/IconPitfall.tsx new file mode 100644 index 000000000..7c0b41dfc --- /dev/null +++ b/beta/src/components/Icon/IconPitfall.tsx @@ -0,0 +1,24 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {memo} from 'react'; + +export const IconPitfall = memo( + function IconPitfall({className}) { + return ( + + + + ); + } +); diff --git a/beta/src/components/Icon/IconRestart.tsx b/beta/src/components/Icon/IconRestart.tsx new file mode 100644 index 000000000..b4a6b62f5 --- /dev/null +++ b/beta/src/components/Icon/IconRestart.tsx @@ -0,0 +1,24 @@ +/* + * 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 new file mode 100644 index 000000000..f2a52ee25 --- /dev/null +++ b/beta/src/components/Icon/IconRss.tsx @@ -0,0 +1,27 @@ +/* + * 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 new file mode 100644 index 000000000..a2816991e --- /dev/null +++ b/beta/src/components/Icon/IconSearch.tsx @@ -0,0 +1,22 @@ +/* + * 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 new file mode 100644 index 000000000..668e41afe --- /dev/null +++ b/beta/src/components/Icon/IconSolution.tsx @@ -0,0 +1,24 @@ +/* + * 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 new file mode 100644 index 000000000..7b3a97a8c --- /dev/null +++ b/beta/src/components/Icon/IconTerminal.tsx @@ -0,0 +1,24 @@ +/* + * 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 new file mode 100644 index 000000000..951171524 --- /dev/null +++ b/beta/src/components/Icon/IconTwitter.tsx @@ -0,0 +1,22 @@ +/* + * 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 new file mode 100644 index 000000000..d89b5678e --- /dev/null +++ b/beta/src/components/Icon/IconWarning.tsx @@ -0,0 +1,26 @@ +/* + * 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 new file mode 100644 index 000000000..6bb8a4aac --- /dev/null +++ b/beta/src/components/Layout/Feedback.tsx @@ -0,0 +1,94 @@ +/* + * 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(); + const cleanedPath = asPath.split(/[\?\#]/)[0]; + // 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 new file mode 100644 index 000000000..e6dd303b9 --- /dev/null +++ b/beta/src/components/Layout/Footer.tsx @@ -0,0 +1,218 @@ +/* + * 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 {IconGitHub} from 'components/Icon/IconGitHub'; +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 + + + Docs Contributors + + 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/Nav/Nav.tsx b/beta/src/components/Layout/Nav/Nav.tsx new file mode 100644 index 000000000..4285ece7f --- /dev/null +++ b/beta/src/components/Layout/Nav/Nav.tsx @@ -0,0 +1,387 @@ +/* + * 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 {Logo} from '../../Logo'; +import {Feedback} from '../Feedback'; +import NavLink from './NavLink'; +import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree'; +import type {RouteItem} from '../getRouteMeta'; +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({ + routeTree, + breadcrumbs, + section, +}: { + routeTree: RouteItem; + breadcrumbs: RouteItem[]; + section: 'learn' | 'reference' | 'home'; +}) { + const [isOpen, setIsOpen] = useState(false); + const [showFeedback, setShowFeedback] = useState(false); + const scrollParentRef = useRef(null); + const feedbackAutohideRef = useRef(null); + const {asPath} = useRouter(); + const feedbackPopupRef = useRef(null); + + // 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': + case 'learn': + routeTree = sidebarLearn as RouteItem; + break; + case 'reference': + 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' | 'reference') { + setTab(nextTab); + scrollParentRef.current!.scrollTop = 0; + } + + return ( +
+ + + {isOpen && ( +
+ selectTab('learn')}> + Learn + + selectTab('reference')}> + Reference + +
+ )} + +
+ +
+
+ ); +} + +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 new file mode 100644 index 000000000..3fddc6e16 --- /dev/null +++ b/beta/src/components/Layout/Nav/NavLink.tsx @@ -0,0 +1,39 @@ +/* + * 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 new file mode 100644 index 000000000..0f4d0e78e --- /dev/null +++ b/beta/src/components/Layout/Nav/index.tsx @@ -0,0 +1,5 @@ +/* + * 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 new file mode 100644 index 000000000..ecb6cc903 --- /dev/null +++ b/beta/src/components/Layout/Page.tsx @@ -0,0 +1,91 @@ +/* + * 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 {Footer} from './Footer'; +import {Toc} from './Toc'; +import SocialBanner from '../SocialBanner'; +import {DocsPageFooter} from 'components/DocsFooter'; +import {Seo} from 'components/Seo'; +import PageHeading from 'components/PageHeading'; +import {getRouteMeta} from './getRouteMeta'; +import {TocContext} from '../MDX/TocContext'; +import sidebarLearn from '../../sidebarLearn.json'; +import sidebarReference from '../../sidebarReference.json'; +import type {TocItem} from 'components/MDX/TocContext'; +import type {RouteItem} from 'components/Layout/getRouteMeta'; + +import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock'); + +interface PageProps { + children: React.ReactNode; + toc: Array; + routeTree: RouteItem; + meta: {title?: string; description?: string}; + section: 'learn' | 'reference' | 'home'; +} + +export function Page({children, toc, routeTree, meta, section}: PageProps) { + const {asPath} = useRouter(); + const cleanedPath = asPath.split(/[\?\#]/)[0]; + const {route, nextRoute, prevRoute, breadcrumbs} = getRouteMeta( + cleanedPath, + routeTree + ); + const title = meta.title || route?.title || ''; + const description = meta.description || route?.description || ''; + const isHomePage = cleanedPath === '/'; + return ( + <> + +
+
+
+ {/* No fallback UI so need to be careful not to suspend directly inside. */} + +
+
+
+
+ + {!isHomePage && ( + + )} +
+
+ + {children} + +
+ +
+
+
+
+
+ +
+ {toc.length > 0 && } +
+
+ + ); +} diff --git a/beta/src/components/Layout/Sidebar/SidebarButton.tsx b/beta/src/components/Layout/Sidebar/SidebarButton.tsx new file mode 100644 index 000000000..b1276cdb8 --- /dev/null +++ b/beta/src/components/Layout/Sidebar/SidebarButton.tsx @@ -0,0 +1,57 @@ +/* + * 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 new file mode 100644 index 000000000..de5ea8ea7 --- /dev/null +++ b/beta/src/components/Layout/Sidebar/SidebarLink.tsx @@ -0,0 +1,100 @@ +/* + * 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 new file mode 100644 index 000000000..5a3b519c2 --- /dev/null +++ b/beta/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -0,0 +1,170 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {useRef, useLayoutEffect, Fragment} from 'react'; + +import cn from 'classnames'; +import {useRouter} from 'next/router'; +import {SidebarLink} from './SidebarLink'; +import useCollapse from 'react-collapsed'; +import usePendingRoute from 'hooks/usePendingRoute'; +import type {RouteItem} from 'components/Layout/getRouteMeta'; + +interface SidebarRouteTreeProps { + isForceExpanded: boolean; + breadcrumbs: RouteItem[]; + 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, + breadcrumbs, + routeTree, + level = 0, +}: SidebarRouteTreeProps) { + const slug = useRouter().asPath.split(/[\?\#]/)[0]; + const pendingRoute = usePendingRoute(); + const currentRoutes = routeTree.routes as RouteItem[]; + return ( +
    + {currentRoutes.map( + ( + {path, title, routes, wip, heading, hasSectionHeader, sectionHeader}, + index + ) => { + const selected = slug === path; + let listItem = null; + if (!path || !path || heading) { + // if current route item has no path and children treat it as an API sidebar heading + listItem = ( + + ); + } else if (routes) { + // if route has a path and child routes, treat it as an expandable sidebar item + const isBreadcrumb = + breadcrumbs.length > 1 && + breadcrumbs[breadcrumbs.length - 1].path === path; + const isExpanded = isForceExpanded || isBreadcrumb || selected; + listItem = ( +
  • + + + + +
    • + ); + } else { + // if route has a path and no child routes, treat it as a sidebar link + listItem = ( +
  • + +
    • + ); + } + if (hasSectionHeader) { + return ( + + {index !== 0 && ( +
  • + )} +

    + {sectionHeader} +

    + + ); + } else { + return listItem; + } + } + )} +
+ ); +} diff --git a/beta/src/components/Layout/Sidebar/index.tsx b/beta/src/components/Layout/Sidebar/index.tsx new file mode 100644 index 000000000..d0e291547 --- /dev/null +++ b/beta/src/components/Layout/Sidebar/index.tsx @@ -0,0 +1,7 @@ +/* + * 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 new file mode 100644 index 000000000..2ff779534 --- /dev/null +++ b/beta/src/components/Layout/Toc.tsx @@ -0,0 +1,60 @@ +/* + * 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/getRouteMeta.tsx b/beta/src/components/Layout/getRouteMeta.tsx new file mode 100644 index 000000000..83432d5e9 --- /dev/null +++ b/beta/src/components/Layout/getRouteMeta.tsx @@ -0,0 +1,121 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +/** + * 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[]; + /** Adds a section header above the route item */ + hasSectionHeader?: boolean; + /** Title of section header */ + sectionHeader?: string; +} + +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 getRouteMeta(cleanedPath: string, routeTree: RouteItem) { + const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree); + return { + ...buildRouteMeta(cleanedPath, routeTree, {}), + breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree], + }; +} + +// Performs a depth-first search to find the current route and its previous/next route +function buildRouteMeta( + 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) { + buildRouteMeta(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 new file mode 100644 index 000000000..b0879a143 --- /dev/null +++ b/beta/src/components/Layout/useTocHighlight.tsx @@ -0,0 +1,82 @@ +/* + * 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 new file mode 100644 index 000000000..67469c0ed --- /dev/null +++ b/beta/src/components/Logo.tsx @@ -0,0 +1,24 @@ +/* + * 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 new file mode 100644 index 000000000..24e99541c --- /dev/null +++ b/beta/src/components/MDX/Challenges/Challenge.tsx @@ -0,0 +1,133 @@ +/* + * 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'; +import {H4} from '../Heading'; + +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 new file mode 100644 index 000000000..25b1979fd --- /dev/null +++ b/beta/src/components/MDX/Challenges/Challenges.tsx @@ -0,0 +1,157 @@ +/* + * 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'; +import {useRouter} from 'next/router'; + +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; +}; + +enum QueuedScroll { + INIT = 'init', + NEXT = 'next', +} + +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(QueuedScroll.INIT); + const [activeIndex, setActiveIndex] = useState(0); + const currentChallenge = challenges[activeIndex]; + const {asPath} = useRouter(); + + useEffect(() => { + if (queuedScrollRef.current === QueuedScroll.INIT) { + const initIndex = challenges.findIndex( + (challenge) => challenge.id === asPath.split('#')[1] + ); + if (initIndex === -1) { + queuedScrollRef.current = undefined; + } else if (initIndex !== activeIndex) { + setActiveIndex(initIndex); + } + } + if (queuedScrollRef.current) { + scrollAnchorRef.current!.scrollIntoView({ + block: 'start', + ...(queuedScrollRef.current === QueuedScroll.NEXT && { + behavior: 'smooth', + }), + }); + queuedScrollRef.current = undefined; + } + }, [activeIndex, asPath, challenges]); + + const handleChallengeChange = (index: number) => { + setActiveIndex(index); + }; + + const Heading = isRecipes ? H4 : H2; + return ( +
+
+
+ + {titleText} + + {totalChallenges > 1 && ( + + )} +
+ { + setActiveIndex((i) => i + 1); + queuedScrollRef.current = QueuedScroll.NEXT; + }} + /> +
+
+ ); +} diff --git a/beta/src/components/MDX/Challenges/Navigation.tsx b/beta/src/components/MDX/Challenges/Navigation.tsx new file mode 100644 index 000000000..e448828cf --- /dev/null +++ b/beta/src/components/MDX/Challenges/Navigation.tsx @@ -0,0 +1,134 @@ +/* + * 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(); + const debouncedHandleResize = debounce(handleResize, 200); + window.addEventListener('resize', debouncedHandleResize); + return () => { + window.removeEventListener('resize', debouncedHandleResize); + }; + }, [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 new file mode 100644 index 000000000..413fd4611 --- /dev/null +++ b/beta/src/components/MDX/Challenges/index.tsx @@ -0,0 +1,14 @@ +/* + * 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 new file mode 100644 index 000000000..dfd680563 --- /dev/null +++ b/beta/src/components/MDX/CodeBlock/CodeBlock.tsx @@ -0,0 +1,388 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import cn from 'classnames'; +import {highlightTree, HighlightStyle, tags} from '@codemirror/highlight'; +import {javascript} from '@codemirror/lang-javascript'; +import {html} from '@codemirror/lang-html'; +import {css} from '@codemirror/lang-css'; +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.standard(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)), tags.tagName], + 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 new file mode 100644 index 000000000..e449e6b9e --- /dev/null +++ b/beta/src/components/MDX/CodeBlock/index.tsx @@ -0,0 +1,39 @@ +/* + * 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 new file mode 100644 index 000000000..7a503f068 --- /dev/null +++ b/beta/src/components/MDX/CodeDiagram.tsx @@ -0,0 +1,41 @@ +/* + * 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 new file mode 100644 index 000000000..2ec393f03 --- /dev/null +++ b/beta/src/components/MDX/ConsoleBlock.tsx @@ -0,0 +1,76 @@ +/* + * 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 new file mode 100644 index 000000000..7920661da --- /dev/null +++ b/beta/src/components/MDX/Diagram.tsx @@ -0,0 +1,60 @@ +/* + * 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 new file mode 100644 index 000000000..6c5130a3d --- /dev/null +++ b/beta/src/components/MDX/DiagramGroup.tsx @@ -0,0 +1,19 @@ +/* + * 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 new file mode 100644 index 000000000..6662cbd75 --- /dev/null +++ b/beta/src/components/MDX/ExpandableCallout.tsx @@ -0,0 +1,85 @@ +/* + * 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 {IconWarning} from '../Icon/IconWarning'; +import {IconPitfall} from '../Icon/IconPitfall'; + +type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip'; + +interface ExpandableCalloutProps { + children: React.ReactNode; + type: CalloutVariants; +} + +const variantMap = { + deprecated: { + title: 'Deprecated', + Icon: IconWarning, + containerClasses: 'bg-red-5 dark:bg-red-60 dark:bg-opacity-20', + textColor: 'text-red-50 dark:text-red-40', + overlayGradient: + 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', + }, + 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)', + }, + pitfall: { + title: 'Pitfall', + Icon: IconPitfall, + 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 new file mode 100644 index 000000000..1056c52b7 --- /dev/null +++ b/beta/src/components/MDX/ExpandableExample.tsx @@ -0,0 +1,115 @@ +/* + * 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'; +import {H4} from './Heading'; +import {useRouter} from 'next/router'; +import {useEffect, useRef, useState} from 'react'; + +interface ExpandableExampleProps { + children: React.ReactNode; + excerpt?: string; + type: 'DeepDive' | 'Example'; +} + +function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) { + if (!Array.isArray(children) || children[0].type.mdxName !== 'h4') { + throw Error( + `Expandable content ${type} is missing a corresponding title at the beginning` + ); + } + const isDeepDive = type === 'DeepDive'; + const isExample = type === 'Example'; + const id = children[0].props.id; + + const {asPath} = useRouter(); + const shouldAutoExpand = id === asPath.split('#')[1]; + const queuedExpandRef = useRef(shouldAutoExpand); + const [isExpanded, setIsExpanded] = useState(false); + + useEffect(() => { + if (queuedExpandRef.current) { + queuedExpandRef.current = false; + setIsExpanded(true); + } + }, []); + + 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, + // with an escape case for the header anchor link + if (!(e.target instanceof SVGElement)) { + e.preventDefault(); + } + }}> +
+ {isDeepDive && ( + <> + + Deep Dive + + )} + {isExample && ( + <> + + Example + + )} +
+
+

+ {children[0].props.children} +

+ {excerpt &&
{excerpt}
} +
+ + +
+ {children.slice(1)} +
+
+ ); +} + +export default ExpandableExample; diff --git a/beta/src/components/MDX/Heading.tsx b/beta/src/components/MDX/Heading.tsx new file mode 100644 index 000000000..58fed55fe --- /dev/null +++ b/beta/src/components/MDX/Heading.tsx @@ -0,0 +1,90 @@ +/* + * 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 new file mode 100644 index 000000000..65c5c32a8 --- /dev/null +++ b/beta/src/components/MDX/HomepageHero.tsx @@ -0,0 +1,44 @@ +/* + * 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 new file mode 100644 index 000000000..4a87c2a53 --- /dev/null +++ b/beta/src/components/MDX/InlineCode.tsx @@ -0,0 +1,28 @@ +/* + * 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 new file mode 100644 index 000000000..6acde04d6 --- /dev/null +++ b/beta/src/components/MDX/Intro.tsx @@ -0,0 +1,19 @@ +/* + * 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 new file mode 100644 index 000000000..8986d07a5 --- /dev/null +++ b/beta/src/components/MDX/Link.tsx @@ -0,0 +1,55 @@ +/* + * 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 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 new file mode 100644 index 000000000..9840e77ce --- /dev/null +++ b/beta/src/components/MDX/MDXComponents.module.css @@ -0,0 +1,43 @@ +/* + * 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 new file mode 100644 index 000000000..194986798 --- /dev/null +++ b/beta/src/components/MDX/MDXComponents.tsx @@ -0,0 +1,434 @@ +/* + * 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'; +import {TeamMember} from './TeamMember'; + +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 Pitfall = ({children}: {children: React.ReactNode}) => ( + {children} +); +const Deprecated = ({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 ReadBlogPost({path}: {path: string}) { + return ( + + Read Post + + + ); +} + +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 = 'Rachel Lee Nabors', + authorLink = 'http://rachelnabors.com/', +}: { + author: string; + authorLink: string; +}) { + return ( +
      +

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

      +
      + ); +} + +const IllustrationContext = React.createContext<{ + isInBlock?: boolean; +}>({ + isInBlock: false, +}); + +function Illustration({ + caption, + src, + alt, + author, + authorLink, +}: { + caption: string; + src: string; + alt: string; + author: string; + authorLink: string; +}) { + const {isInBlock} = React.useContext(IllustrationContext); + + return ( +
      +
      + {alt} + {caption ? ( +
      + {caption} +
      + ) : null} +
      + {!isInBlock && } +
      + ); +} + +const isInBlockTrue = {isInBlock: true}; + +function IllustrationBlock({ + sequential, + author, + authorLink, + children, +}: { + 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 ( + +
      + {sequential ? ( +
        + {images.map((x: any, i: number) => ( +
      1. + {x} +
        2. + ))} +
      + ) : ( +
      {images}
      + )} + +
      +       + ); +} + +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]); + if (root.children.length < 2) { + return null; + } + return ; +} + +function InlineTocItem({items}: {items: Array}) { + return ( +
        + {items.map((node) => ( +
      • + {node.item.text} + {node.children.length > 0 && } +
        • + ))} +
      + ); +} + +function YouTubeIframe(props: any) { + return ( +
      + + +**React Server Components are still in research and development.** We are sharing this work in the spirit of transparency and to get initial feedback from the React community. There will be plenty of time for that, so **don't feel like you have to catch up right now!** + +If you want to check them out, we recommend to go in the following order: + +1. **Watch the talk** to learn about React Server Components and see the demo. + +2. **[Clone the demo](http://github.com/reactjs/server-components-demo)** to play with React Server Components on your computer. + +3. **[Read the RFC (with FAQ at the end)](https://github.com/reactjs/rfcs/pull/188)** for a deeper technical breakdown and to provide feedback. + +We are excited to hear from you on the RFC or in replies to the [@reactjs](https://twitter.com/reactjs) Twitter handle. Happy holidays, stay safe, and see you next year! diff --git a/content/blog/2021-06-08-the-plan-for-react-18.md b/content/blog/2021-06-08-the-plan-for-react-18.md new file mode 100644 index 000000000..795159da5 --- /dev/null +++ b/content/blog/2021-06-08-the-plan-for-react-18.md @@ -0,0 +1,63 @@ +--- +title: "The Plan for React 18" +author: [acdlite, bvaughn, abernathyca, gaearon, rachelnabors, rickhanlonii, sebmarkbage, sethwebster] +--- + +> Update Nov. 15th, 2021 +> +> React 18 is now in beta. More information about the status of the release is [available in the React 18 Working Group post](https://github.com/reactwg/react-18/discussions/112). + +The React team is excited to share a few updates: + +1. We’ve started work on the React 18 release, which will be our next major version. +2. We’ve created a Working Group to prepare the community for gradual adoption of new features in React 18. +3. We’ve published a React 18 Alpha so that library authors can try it and provide feedback. + +These updates are primarily aimed at maintainers of third-party libraries. If you’re learning, teaching, or using React to build user-facing applications, you can safely ignore this post. But you are welcome to follow the discussions in the React 18 Working Group if you're curious! + +## What’s coming in React 18 {#whats-coming-in-react-18} + +When it’s released, React 18 will include out-of-the-box improvements (like [automatic batching](https://github.com/reactwg/react-18/discussions/21)), new APIs (like [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), and a [new streaming server renderer](https://github.com/reactwg/react-18/discussions/37) with built-in support for `React.lazy`. + +These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app. + +If you've been following our research into the future of React (we don't expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means **you will be able to adopt React 18 without rewrites and try the new features at your own pace.** + +## A gradual adoption strategy {#a-gradual-adoption-strategy} + +Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. **You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release**. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon. + +We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we've found that most React components “just work” without additional changes. We're committed to making sure this is a smooth upgrade for the entire community, so today we're announcing the React 18 Working Group. + +## Working with the community {#working-with-the-community} + +We’re trying something new for this release: We've invited a panel of experts, developers, library authors, and educators from across the React community to participate in our [React 18 Working Group](https://github.com/reactwg/react-18) to provide feedback, ask questions, and collaborate on the release. We couldn't invite everyone we wanted to this initial, small group, but if this experiment works out, we hope there will be more in the future! + +**The goal of the React 18 Working Group is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries.** The Working Group is hosted on [GitHub Discussions](https://github.com/reactwg/react-18/discussions) and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog. + +For more information on upgrading to React 18, or additional resources about the release, see the [React 18 announcement post](https://github.com/reactwg/react-18/discussions/4). + +## Accessing the React 18 Working Group {#accessing-the-react-18-working-group} + +Everyone can read the discussions in the [React 18 Working Group repo](https://github.com/reactwg/react-18). + +Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community. + +As always, you can submit bug reports, questions, and general feedback to our [issue tracker](https://github.com/facebook/react/issues). + +## How to try React 18 Alpha today {#how-to-try-react-18-alpha-today} + +New alphas are [regularly published to npm using the `@alpha` tag](https://github.com/reactwg/react-18/discussions/9). These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in an alpha the following weekday. + +There may be significant behavioral or API changes between alpha releases. Please remember that **alpha releases are not recommended for user-facing, production applications**. + +## Projected React 18 release timeline {#projected-react-18-release-timeline} + +We don't have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications. + +* Library Alpha: Available today +* Public Beta: At least several months +* Release Candidate (RC): At least several weeks after Beta +* General Availability: At least several weeks after RC + +More details about our projected release timeline are [available in the Working Group](https://github.com/reactwg/react-18/discussions/9). We'll post updates on this blog when we're closer to a public release. diff --git a/content/blog/2021-12-17-react-conf-2021-recap.md b/content/blog/2021-12-17-react-conf-2021-recap.md new file mode 100644 index 000000000..f5ccd245c --- /dev/null +++ b/content/blog/2021-12-17-react-conf-2021-recap.md @@ -0,0 +1,148 @@ +--- +title: "React Conf 2021 Recap" +author: [jtannady, rickhanlonii] +--- + +Last week we hosted our 6th React Conf. In previous years, we've used the React Conf stage to deliver industry changing announcements such as [_React Native_](https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/) and [_React Hooks_](https://reactjs.org/docs/hooks-intro.html). This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features. + +This was the first time React Conf was hosted online, and it was streamed for free, translated to 8 different languages. Participants from all over the world joined our conference Discord and the replay event for accessibility in all timezones. Over 50,000 people registered, with over 60,000 views of 19 talks, and 5,000 participants in Discord across both events. + +All the talks are [available to stream online](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa). + +Here’s a summary of what was shared on stage: + +## React 18 and concurrent features {#react-18-and-concurrent-features} + +In the keynote, we shared our vision for the future of React starting with React 18. + +React 18 adds the long-awaited concurrent renderer and updates to Suspense without any major breaking changes. Apps can upgrade to React 18 and begin gradually adopting concurrent features with the amount of effort on par with any other major release. + +**This means there is no concurrent mode, only concurrent features.** + +In the keynote, we also shared our vision for Suspense, Server Components, new React working groups, and our long-term many-platform vision for React Native. + +Watch the full keynote from [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), and [Rick Hanlon](https://twitter.com/rickhanlonii) here: + + + +## React 18 for Application Developers {#react-18-for-application-developers} + +In the keynote, we also announced that the React 18 RC is available to try now. Pending further feedback, this is the exact version of React that we will publish to stable early next year. + +To try the React 18 RC, upgrade your dependencies: + +```bash +npm install react@rc react-dom@rc +``` + +and switch to the new `createRoot` API: + +```js +// before +const container = document.getElementById('root'); +ReactDOM.render(, container); + +// after +const container = document.getElementById('root'); +const root = ReactDOM.createRoot(container); +root.render(); +``` + +For a demo of upgrading to React 18, see [Shruti Kapoor](https://twitter.com/shrutikapoor08)’s talk here: + + + +## Streaming Server Rendering with Suspense {#streaming-server-rendering-with-suspense} + +React 18 also includes improvements to server-side rendering performance using Suspense. + +Streaming server rendering lets you generate HTML from React components on the server, and stream that HTML to your users. In React 18, you can use `Suspense` to break down your app into smaller independent units which can be streamed independently of each other without blocking the rest of the app. This means users will see your content sooner and be able to start interacting with it much faster. + +For a deep dive, see [Shaundai Person](https://twitter.com/shaundai)’s talk here: + + + +## The first React working group {#the-first-react-working-group} + +For React 18, we created our first Working Group to collaborate with a panel of experts, developers, library maintainers, and educators. Together we worked to create our gradual adoption strategy and refine new APIs such as `useId`, `useSyncExternalStore`, and `useInsertionEffect`. + +For an overview of this work, see [Aakansha' Doshi](https://twitter.com/aakansha1216)'s talk: + + + +## React Developer Tooling {#react-developer-tooling} + +To support the new features in this release, we also announced the newly formed React DevTools team and a new Timeline Profiler to help developers debug their React apps. + +For more information and a demo of new DevTools features, see [Brian Vaughn](https://twitter.com/brian_d_vaughn)’s talk: + + + +## React without memo {#react-without-memo} + +Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) shared an update from our React Labs research into an auto-memoizing compiler. Check out this talk for more information and a demo of the compiler prototype: + + + +## React docs keynote {#react-docs-keynote} + +[Rachel Nabors](https://twitter.com/rachelnabors) kicked off a section of talks about learning and designing with React with a keynote about our investment in React's [new docs](https://beta.reactjs.org/): + + + +# And more... {#and-more} + +**We also heard talks on learning and designing with React:** + +* Debbie O'Brien: [Things I learnt from the new React docs](https://youtu.be/-7odLW_hG7s). +* Sarah Rainsberger: [Learning in the Browser](https://youtu.be/5X-WEQflCL0). +* Linton Ye: [The ROI of Designing with React](https://youtu.be/7cPWmID5XAk). +* Delba de Oliveira: [Interactive playgrounds with React](https://youtu.be/zL8cz2W0z34). + +**Talks from the Relay, React Native, and PyTorch teams:** + +* Robert Balicki: [Re-introducing Relay](https://youtu.be/lhVGdErZuN4). +* Eric Rozell and Steven Moyes: [React Native Desktop](https://youtu.be/9L4FFrvwJwY). +* Roman Rädle: [On-device Machine Learning for React Native](https://youtu.be/NLj73vrc2I8) + +**And talks from the community on accessibility, tooling, and Server Components:** + +* Daishi Kato: [React 18 for External Store Libraries](https://youtu.be/oPfSC5bQPR8). +* Diego Haz: [Building Accessible Components in React 18](https://youtu.be/dcm8fjBfro8). +* Tafu Nakazaki: [Accessible Japanese Form Components with React](https://youtu.be/S4a0QlsH0pU). +* Lyle Troxell: [UI tools for artists](https://youtu.be/b3l4WxipFsE). +* Helen Lin: [Hydrogen + React 18](https://youtu.be/HS6vIYkSNks). + +# Thank you {#thank-you} + +This was our first year planning a conference ourselves, and we have a lot of people to thank. + +First, thanks to all of our speakers [Aakansha Doshi](https://twitter.com/aakansha1216), [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://twitter.com/brian_d_vaughn), [Daishi Kato](https://twitter.com/dai_shi), [Debbie O'Brien](https://twitter.com/debs_obrien), [Delba de Oliveira](https://twitter.com/delba_oliveira), [Diego Haz](https://twitter.com/diegohaz), [Eric Rozell](https://twitter.com/EricRozell), [Helen Lin](https://twitter.com/wizardlyhel), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Linton Ye](https://twitter.com/lintonye), [Lyle Troxell](https://twitter.com/lyle), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Balicki](https://twitter.com/StatisticsFTW), [Roman Rädle](https://twitter.com/raedle), [Sarah Rainsberger](https://twitter.com/sarah11918), [Shaundai Person](https://twitter.com/shaundai), [Shruti Kapoor](https://twitter.com/shrutikapoor08), [Steven Moyes](https://twitter.com/moyessa), [Tafu Nakazaki](https://twitter.com/hawaiiman0), and [Xuan Huang (黄玄)](https://twitter.com/Huxpro). + +Thanks to everyone who helped provide feedback on talks including [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors), and [Tim Yung](https://twitter.com/yungsters). + +Thanks to [Lauren Tan](https://twitter.com/potetotes) for setting up the conference Discord and serving as our Discord admin. + +Thanks to [Seth Webster](https://twitter.com/sethwebster) for feedback on overall direction and making sure we were focused on diversity and inclusion. + +Thanks to [Rachel Nabors](https://twitter.com/rachelnabors) for spearheading our moderation effort, and [Aisha Blake](https://twitter.com/AishaBlake) for creating our moderation guide, leading our moderation team, training the translators and moderators, and helping to moderate both events. + +Thanks to our moderators [Jesslyn Tannady](https://twitter.com/jtannady), [Suzie Grange](https://twitter.com/missuze), [Becca Bailey](https://twitter.com/beccaliz), [Luna Wei](https://twitter.com/lunaleaps), [Joe Previte](https://twitter.com/jsjoeio), [Nicola Corti](https://twitter.com/Cortinico), [Gijs Weterings](https://twitter.com/gweterings), [Claudio Procida](https://twitter.com/claudiopro), Julia Neumann, Mengdi Chen, Jean Zhang, Ricky Li, and [Xuan Huang (黄玄)](https://twitter.com/Huxpro). + +Thanks to [Manjula Dube](https://twitter.com/manjula_dube), [Sahil Mhapsekar](https://twitter.com/apheri0), and Vihang Patel from [React India](https://www.reactindia.io/), and [Jasmine Xie](https://twitter.com/jasmine_xby), [QiChang Li](https://twitter.com/QCL15), and [YanLun Li](https://twitter.com/anneincoding) from [React China](https://twitter.com/ReactChina) for helping moderate our replay event and keep it engaging for the community. + +Thanks to Vercel for publishing their [Virtual Event Starter Kit](https://vercel.com/virtual-event-starter-kit), which the conference website was built on, and to [Lee Robinson](https://twitter.com/leeerob) and [Delba de Oliveira](https://twitter.com/delba_oliveira) for sharing their experience running Next.js Conf. + +Thanks to [Leah Silber](https://twitter.com/wifelette) for sharing her experience running conferences, learnings from running [RustConf](https://rustconf.com/), and for her book [Event Driven](https://leanpub.com/eventdriven/) and the advice it contains for running conferences. + +Thanks to [Kevin Lewis](https://twitter.com/_phzn) and [Rachel Nabors](https://twitter.com/rachelnabors) for sharing their experience running Women of React Conf. + +Thanks to [Aakansha Doshi](https://twitter.com/aakansha1216), [Laurie Barth](https://twitter.com/laurieontech), [Michael Chan](https://twitter.com/chantastic), and [Shaundai Person](https://twitter.com/shaundai) for their advice and ideas throughout planning. + +Thanks to [Dan Lebowitz](https://twitter.com/lebo) for help designing and building the conference website and tickets. + +Thanks to Laura Podolak Waddell, Desmond Osei-Acheampong, Mark Rossi, Josh Toberman and others on the Facebook Video Productions team for recording the videos for the Keynote and Meta employee talks. + +Thanks to our partner HitPlay for helping to organize the conference, editing all the videos in the stream, translating all the talks, and moderating the Discord in multiple languages. + +Finally, thanks to all of our participants for making this a great React Conf! diff --git a/content/blog/2022-03-08-react-18-upgrade-guide.md b/content/blog/2022-03-08-react-18-upgrade-guide.md new file mode 100644 index 000000000..40637eacd --- /dev/null +++ b/content/blog/2022-03-08-react-18-upgrade-guide.md @@ -0,0 +1,303 @@ +--- +title: "How to Upgrade to React 18" +author: [rickhanlonii] +--- + +As we shared in the [release post](/blog/2022/03/29/react-v18.html), React 18 introduces features powered by our new concurrent renderer, with a gradual adoption strategy for existing applications. In this post, we will guide you through the steps for upgrading to React 18. + +Please [report any issues](https://github.com/facebook/react/issues/new/choose) you encounter while upgrading to React 18. + +*Note for React Native users: React 18 will ship in a future version of React Native. This is because React 18 relies on the New React Native Architecture to benefit from the new capabilities presented in this blogpost. For more information, see the [React Conf keynote here](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s).* + +## Installing {#installing} + +To install the latest version of React: + +```bash +npm install react react-dom +``` + +Or if you’re using yarn: + +```bash +yarn add react react-dom +``` + +## Updates to Client Rendering APIs {#updates-to-client-rendering-apis} + +When you first install React 18, you will see a warning in the console: + +> ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot + +React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features. + +```js +// Before +import { render } from 'react-dom'; +const container = document.getElementById('app'); +render(, container); + +// After +import { createRoot } from 'react-dom/client'; +const container = document.getElementById('app'); +const root = createRoot(container); // createRoot(container!) if you use TypeScript +root.render(); +``` + +We’ve also changed `unmountComponentAtNode` to `root.unmount`: + +```js +// Before +unmountComponentAtNode(container); + +// After +root.unmount(); +``` + +We've also removed the callback from render, since it usually does not have the expected result when using Suspense: + +```js +// Before +const container = document.getElementById('app'); +render(, container, () => { + console.log('rendered'); +}); + +// After +function AppWithCallbackAfterRender() { + useEffect(() => { + console.log('rendered'); + }); + + return +} + +const container = document.getElementById('app'); +const root = createRoot(container); +root.render(); +``` + +> Note: +> +> There is no one-to-one replacement for the old render callback API — it depends on your use case. See the working group post for [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5) for more information. + +Finally, if your app uses server-side rendering with hydration, upgrade `hydrate` to `hydrateRoot`: + +```js +// Before +import { hydrate } from 'react-dom'; +const container = document.getElementById('app'); +hydrate(, container); + +// After +import { hydrateRoot } from 'react-dom/client'; +const container = document.getElementById('app'); +const root = hydrateRoot(container, ); +// Unlike with createRoot, you don't need a separate root.render() call here. +``` + +For more information, see the [working group discussion here](https://github.com/reactwg/react-18/discussions/5). + +> Note +> +> **If your app doesn't work after upgrading, check whether it's wrapped in ``.** [Strict Mode has gotten stricter in React 18](#updates-to-strict-mode), and not all your components may be resilient to the new checks it adds in development mode. If removing Strict Mode fixes your app, you can remove it during the upgrade, and then add it back (either at the top or for a part of the tree) after you fix the issues that it's pointing out. + +## Updates to Server Rendering APIs {#updates-to-server-rendering-apis} + +In this release, we’re revamping our `react-dom/server` APIs to fully support Suspense on the server and Streaming SSR. As part of these changes, we're deprecating the old Node streaming API, which does not support incremental Suspense streaming on the server. + +Using this API will now warn: + +* `renderToNodeStream`: **Deprecated ⛔️️** + +Instead, for streaming in Node environments, use: +* `renderToPipeableStream`: **New ✨** + +We're also introducing a new API to support streaming SSR with Suspense for modern edge runtime environments, such as Deno and Cloudflare workers: +* `renderToReadableStream`: **New ✨** + +The following APIs will continue working, but with limited support for Suspense: +* `renderToString`: **Limited** ⚠️ +* `renderToStaticMarkup`: **Limited** ⚠️ + +Finally, this API will continue to work for rendering e-mails: +* `renderToStaticNodeStream` + +For more information on the changes to server rendering APIs, see the working group post on [Upgrading to React 18 on the server](https://github.com/reactwg/react-18/discussions/22), a [deep dive on the new Suspense SSR Architecture](https://github.com/reactwg/react-18/discussions/37), and [Shaundai Person’s](https://twitter.com/shaundai) talk on [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) at React Conf 2021. + +## Updates to TypeScript definitions + +If your project uses TypeScript, you will need to update your `@types/react` and `@types/react-dom` dependencies to the latest versions. The new types are safer and catch issues that used to be ignored by the type checker. The most notable change is that the `children` prop now needs to be listed explicitly when defining props, for example: + +```typescript{3} +interface MyButtonProps { + color: string; + children?: React.ReactNode; +} +``` + +See the [React 18 typings pull request](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210) for a full list of type-only changes. It links to example fixes in library types so you can see how to adjust your code. You can use the [automated migration script](https://github.com/eps1lon/types-react-codemod) to help port your application code to the new and safer typings faster. + +If you find a bug in the typings, please [file an issue](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package) in the DefinitelyTyped repo. + +## Automatic Batching {#automatic-batching} + +React 18 adds out-of-the-box performance improvements by doing more batching by default. Batching is when React groups multiple state updates into a single re-render for better performance. Before React 18, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default: + +```js +// Before React 18 only React events were batched + +function handleClick() { + setCount(c => c + 1); + setFlag(f => !f); + // React will only re-render once at the end (that's batching!) +} + +setTimeout(() => { + setCount(c => c + 1); + setFlag(f => !f); + // React will render twice, once for each state update (no batching) +}, 1000); +``` + + +Starting in React 18 with `createRoot`, all updates will be automatically batched, no matter where they originate from. This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events: + +```js +// After React 18 updates inside of timeouts, promises, +// native event handlers or any other event are batched. + +function handleClick() { + setCount(c => c + 1); + setFlag(f => !f); + // React will only re-render once at the end (that's batching!) +} + +setTimeout(() => { + setCount(c => c + 1); + setFlag(f => !f); + // React will only re-render once at the end (that's batching!) +}, 1000); +``` + +This is a breaking change, but we expect this to result in less work rendering, and therefore better performance in your applications. To opt-out of automatic batching, you can use `flushSync`: + +```js +import { flushSync } from 'react-dom'; + +function handleClick() { + flushSync(() => { + setCounter(c => c + 1); + }); + // React has updated the DOM by now + flushSync(() => { + setFlag(f => !f); + }); + // React has updated the DOM by now +} +``` + +For more information, see the [Automatic batching deep dive](https://github.com/reactwg/react-18/discussions/21). + +## New APIs for Libraries {#new-apis-for-libraries} + +In the React 18 Working Group we worked with library maintainers to create new APIs needed to support concurrent rendering for use cases specific to their use case in areas like styles, and external stores. To support React 18, some libraries may need to switch to one of the following APIs: + +* `useSyncExternalStore` is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. This new API is recommended for any library that integrates with state external to React. For more information, see the [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70) and [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86). +* `useInsertionEffect` is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you've already built a CSS-in-JS library we don't expect you to ever use this. This hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. For more information, see the [Library Upgrade Guide for ` - -
      - ->Caution: -> ->This page describes **experimental features that are not yet available in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. -> ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. - -
      - -- [Installation](#installation) - - [Who Is This Experimental Release For?](#who-is-this-experimental-release-for) - - [Enabling Concurrent Mode](#enabling-concurrent-mode) -- [What to Expect](#what-to-expect) - - [Migration Step: Blocking Mode](#migration-step-blocking-mode) - - [Why So Many Modes?](#why-so-many-modes) - - [Feature Comparison](#feature-comparison) - -## Installation {#installation} - -Concurrent Mode is only available in the [experimental builds](/blog/2019/10/22/react-release-channels.html#experimental-channel) of React. To install them, run: - -``` -npm install react@experimental react-dom@experimental -``` - -**There are no semantic versioning guarantees for the experimental builds.** -APIs may be added, changed, or removed with any `@experimental` release. - -**Experimental releases will have frequent breaking changes.** - -You can try these builds on personal projects or in a branch, but we don't recommend running them in production. At Facebook, we *do* run them in production, but that's because we're also there to fix bugs when something breaks. You've been warned! - -### Who Is This Experimental Release For? {#who-is-this-experimental-release-for} - -This release is primarily aimed at early adopters, library authors, and curious people. - -We're using this code in production (and it works for us) but there are still some bugs, missing features, and gaps in the documentation. We'd like to hear more about what breaks in Concurrent Mode so we can better prepare it for an official stable release in the future. - -### Enabling Concurrent Mode {#enabling-concurrent-mode} - -Normally, when we add features to React, you can start using them immediately. Fragments, Context, and even Hooks are examples of such features. You can use them in new code without making any changes to the existing code. - -Concurrent Mode is different. It introduces semantic changes to how React works. Otherwise, the [new features](/docs/concurrent-mode-patterns.html) enabled by it *wouldn't be possible*. This is why they're grouped into a new "mode" rather than released one by one in isolation. - -You can't opt into Concurrent Mode on a per-subtree basis. Instead, to opt in, you have to do it in the place where today you call `ReactDOM.render()`. - -**This will enable Concurrent Mode for the whole `` tree:** - -```js -import ReactDOM from 'react-dom'; - -// If you previously had: -// -// ReactDOM.render(, document.getElementById('root')); -// -// You can opt into Concurrent Mode by writing: - -ReactDOM.createRoot( - document.getElementById('root') -).render(); -``` - ->Note: -> ->Concurrent Mode APIs such as `createRoot` only exist in the experimental builds of React. - -In Concurrent Mode, the lifecycle methods [previously marked](/blog/2018/03/27/update-on-async-rendering.html) as "unsafe" actually *are* unsafe, and lead to bugs even more than in today's React. We don't recommend trying Concurrent Mode until your app is [Strict Mode](/docs/strict-mode.html)-compatible. - -## What to Expect {#what-to-expect} - -If you have a large existing app, or if your app depends on a lot of third-party packages, please don't expect that you can use the Concurrent Mode immediately. **For example, at Facebook we are using Concurrent Mode for the new website, but we're not planning to enable it on the old website.** This is because our old website still uses unsafe lifecycle methods in the product code, incompatible third-party libraries, and patterns that don't work well with the Concurrent Mode. - -In our experience, code that uses idiomatic React patterns and doesn't rely on external state management solutions is the easiest to get running in the Concurrent Mode. We will describe common problems we've seen and the solutions to them separately in the coming weeks. - -### Migration Step: Blocking Mode {#migration-step-blocking-mode} - -For older codebases, Concurrent Mode might be a step too far. This is why we also provide a new "Blocking Mode" in the experimental React builds. You can try it by substituting `createRoot` with `createBlockingRoot`. It only offers a *small subset* of the Concurrent Mode features, but it is closer to how React works today and can serve as a migration step. - -To recap: - -* **Legacy Mode:** `ReactDOM.render(, rootNode)`. This is what React apps use today. There are no plans to remove the legacy mode in the observable future — but it won't be able to support these new features. -* **Blocking Mode:** `ReactDOM.createBlockingRoot(rootNode).render()`. It is currently experimental. It is intended as a first migration step for apps that want to get a subset of Concurrent Mode features. -* **Concurrent Mode:** `ReactDOM.createRoot(rootNode).render()`. It is currently experimental. In the future, after it stabilizes, we intend to make it the default React mode. This mode enables *all* the new features. - -### Why So Many Modes? {#why-so-many-modes} - -We think it is better to offer a [gradual migration strategy](/docs/faq-versioning.html#commitment-to-stability) than to make huge breaking changes — or to let React stagnate into irrelevance. - -In practice, we expect that most apps using Legacy Mode today should be able to migrate at least to the Blocking Mode (if not Concurrent Mode). This fragmentation can be annoying for libraries that aim to support all Modes in the short term. However, gradually moving the ecosystem away from the Legacy Mode will also *solve* problems that affect major libraries in the React ecosystem, such as [confusing Suspense behavior when reading layout](https://github.com/facebook/react/issues/14536) and [lack of consistent batching guarantees](https://github.com/facebook/react/issues/15080). There's a number of bugs that can't be fixed in Legacy Mode without changing semantics, but don't exist in Blocking and Concurrent Modes. - -You can think of the Blocking Mode as a "gracefully degraded" version of the Concurrent Mode. **As a result, in longer term we should be able to converge and stop thinking about different Modes altogether.** But for now, Modes are an important migration strategy. They let everyone decide when a migration is worth it, and upgrade at their own pace. - -### Feature Comparison {#feature-comparison} - - - -
      - -| |Legacy Mode |Blocking Mode |Concurrent Mode | -|--- |--- |--- |--- | -|[String Refs](/docs/refs-and-the-dom.html#legacy-api-string-refs) |✅ |🚫** |🚫** | -|[Legacy Context](/docs/legacy-context.html) |✅ |🚫** |🚫** | -|[findDOMNode](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) |✅ |🚫** |🚫** | -|[Suspense](/docs/concurrent-mode-suspense.html#what-is-suspense-exactly) |✅ |✅ |✅ | -|[SuspenseList](/docs/concurrent-mode-patterns.html#suspenselist) |🚫 |✅ |✅ | -|Suspense SSR + Hydration |🚫 |✅ |✅ | -|Progressive Hydration |🚫 |✅ |✅ | -|Selective Hydration |🚫 |🚫 |✅ | -|Cooperative Multitasking |🚫 |🚫 |✅ | -|Automatic batching of multiple setStates    |🚫* |✅ |✅ | -|[Priority-based Rendering](/docs/concurrent-mode-patterns.html#splitting-high-and-low-priority-state) |🚫 |🚫 |✅ | -|[Interruptible Prerendering](/docs/concurrent-mode-intro.html#interruptible-rendering) |🚫 |🚫 |✅ | -|[useTransition](/docs/concurrent-mode-patterns.html#transitions) |🚫 |🚫 |✅ | -|[useDeferredValue](/docs/concurrent-mode-patterns.html#deferring-a-value) |🚫 |🚫 |✅ | -|[Suspense Reveal "Train"](/docs/concurrent-mode-patterns.html#suspense-reveal-train) |🚫 |🚫 |✅ | - -
      - -\*: Legacy mode has automatic batching in React-managed events but it's limited to one browser task. Non-React events must opt-in using `unstable_batchedUpdates`. In Blocking Mode and Concurrent Mode, all `setState`s are batched by default. - -\*\*: Warns in development. diff --git a/content/docs/concurrent-mode-intro.md b/content/docs/concurrent-mode-intro.md deleted file mode 100644 index b2980ce3d..000000000 --- a/content/docs/concurrent-mode-intro.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: concurrent-mode-intro -title: Introducing Concurrent Mode (Experimental) -permalink: docs/concurrent-mode-intro.html -next: concurrent-mode-suspense.html ---- - - - -
      - ->Caution: -> ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. -> ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. - -
      - -This page provides a theoretical overview of Concurrent Mode. **For a more practical introduction, you might want to check out the next sections:** - -* [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html) describes a new mechanism for fetching data in React components. -* [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html) shows some UI patterns made possible by Concurrent Mode and Suspense. -* [Adopting Concurrent Mode](/docs/concurrent-mode-adoption.html) explains how you can try Concurrent Mode in your project. -* [Concurrent Mode API Reference](/docs/concurrent-mode-reference.html) documents the new APIs available in experimental builds. - -## What Is Concurrent Mode? {#what-is-concurrent-mode} - -Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user's device capabilities and network speed. - -These features are still experimental and are subject to change. They are not yet a part of a stable React release, but you can try them in an experimental build. - -## Blocking vs Interruptible Rendering {#blocking-vs-interruptible-rendering} - -**To explain Concurrent Mode, we'll use version control as a metaphor.** If you work on a team, you probably use a version control system like Git and work on branches. When a branch is ready, you can merge your work into master so that other people can pull it. - -Before version control existed, the development workflow was very different. There was no concept of branches. If you wanted to edit some files, you had to tell everyone not to touch those files until you've finished your work. You couldn't even start working on them concurrently with that person — you were literally *blocked* by them. - -This illustrates how UI libraries, including React, typically work today. Once they start rendering an update, including creating new DOM nodes and running the code inside components, they can't interrupt this work. We'll call this approach "blocking rendering". - -In Concurrent Mode, rendering is not blocking. It is interruptible. This improves the user experience. It also unlocks new features that weren't possible before. Before we look at concrete examples in the [next](/docs/concurrent-mode-suspense.html) [chapters](/docs/concurrent-mode-patterns.html), we'll do a high-level overview of new features. - -### Interruptible Rendering {#interruptible-rendering} - -Consider a filterable product list. Have you ever typed into a list filter and felt that it stutters on every key press? Some of the work to update the product list might be unavoidable, such as creating new DOM nodes or the browser performing layout. However, *when* and *how* we perform that work plays a big role. - -A common way to work around the stutter is to "debounce" the input. When debouncing, we only update the list *after* the user stops typing. However, it can be frustrating that the UI doesn't update while we're typing. As an alternative, we could "throttle" the input, and update the list with a certain maximum frequency. But then on lower-powered devices we'd still end up with stutter. Both debouncing and throttling create a suboptimal user experience. - -The reason for the stutter is simple: once rendering begins, it can't be interrupted. So the browser can't update the text input right after the key press. No matter how good a UI library (such as React) might look on a benchmark, if it uses blocking rendering, a certain amount of work in your components will always cause stutter. And, often, there is no easy fix. - -**Concurrent Mode fixes this fundamental limitation by making rendering interruptible.** This means when the user presses another key, React doesn't need to block the browser from updating the text input. Instead, it can let the browser paint an update to the input, and then continue rendering the updated list *in memory*. When the rendering is finished, React updates the DOM, and changes are reflected on the screen. - -Conceptually, you can think of this as React preparing every update "on a branch". Just like you can abandon work in branches or switch between them, React in Concurrent Mode can interrupt an ongoing update to do something more important, and then come back to what it was doing earlier. This technique might also remind you of [double buffering](https://wiki.osdev.org/Double_Buffering) in video games. - -Concurrent Mode techniques reduce the need for debouncing and throttling in UI. Because rendering is interruptible, React doesn't need to artificially *delay* work to avoid stutter. It can start rendering right away, but interrupt this work when needed to keep the app responsive. - -### Intentional Loading Sequences {#intentional-loading-sequences} - -We've said before that Concurrent Mode is like React working "on a branch". Branches are useful not only for short-term fixes, but also for long-running features. Sometimes you might work on a feature, but it could take weeks before it's in a "good enough state" to merge into master. This side of our version control metaphor applies to rendering too. - -Imagine we're navigating between two screens in an app. Sometimes, we might not have enough code and data loaded to show a "good enough" loading state to the user on the new screen. Transitioning to an empty screen or a large spinner can be a jarring experience. However, it's also common that the necessary code and data doesn't take too long to fetch. **Wouldn't it be nicer if React could stay on the old screen for a little longer, and "skip" the "bad loading state" before showing the new screen?** - -While this is possible today, it can be difficult to orchestrate. In Concurrent Mode, this feature is built-in. React starts preparing the new screen in memory first — or, as our metaphor goes, "on a different branch". So React can wait before updating the DOM so that more content can load. In Concurrent Mode, we can tell React to keep showing the old screen, fully interactive, with an inline loading indicator. And when the new screen is ready, React can take us to it. - -### Concurrency {#concurrency} - -Let's recap the two examples above and see how Concurrent Mode unifies them. **In Concurrent Mode, React can work on several state updates *concurrently*** — just like branches let different team members work independently: - -* For CPU-bound updates (such as creating DOM nodes and running component code), concurrency means that a more urgent update can "interrupt" rendering that has already started. -* For IO-bound updates (such as fetching code or data from the network), concurrency means that React can start rendering in memory even before all the data arrives, and skip showing jarring empty loading states. - -Importantly, the way you *use* React is the same. Concepts like components, props, and state fundamentally work the same way. When you want to update the screen, you set the state. - -React uses a heuristic to decide how "urgent" an update is, and lets you adjust it with a few lines of code so that you can achieve the desired user experience for every interaction. - -## Putting Research into Production {#putting-research-into-production} - -There is a common theme around Concurrent Mode features. **Its mission is to help integrate the findings from the Human-Computer Interaction research into real UIs.** - -For example, research shows that displaying too many intermediate loading states when transitioning between screens makes a transition feel *slower*. This is why Concurrent Mode shows new loading states on a fixed "schedule" to avoid jarring and too frequent updates. - -Similarly, we know from research that interactions like hover and text input need to be handled within a very short period of time, while clicks and page transitions can wait a little longer without feeling laggy. The different "priorities" that Concurrent Mode uses internally roughly correspond to the interaction categories in the human perception research. - -Teams with a strong focus on user experience sometimes solve similar problems with one-off solutions. However, those solutions rarely survive for a long time, as they're hard to maintain. With Concurrent Mode, our goal is to bake the UI research findings into the abstraction itself, and provide idiomatic ways to use them. As a UI library, React is well-positioned to do that. - -## Next Steps {#next-steps} - -Now you know what Concurrent Mode is all about! - -On the next pages, you'll learn more details about specific topics: - -* [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html) describes a new mechanism for fetching data in React components. -* [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html) shows some UI patterns made possible by Concurrent Mode and Suspense. -* [Adopting Concurrent Mode](/docs/concurrent-mode-adoption.html) explains how you can try Concurrent Mode in your project. -* [Concurrent Mode API Reference](/docs/concurrent-mode-reference.html) documents the new APIs available in experimental builds. diff --git a/content/docs/concurrent-mode-patterns.md b/content/docs/concurrent-mode-patterns.md deleted file mode 100644 index 3f863e497..000000000 --- a/content/docs/concurrent-mode-patterns.md +++ /dev/null @@ -1,937 +0,0 @@ ---- -id: concurrent-mode-patterns -title: Concurrent UI Patterns (Experimental) -permalink: docs/concurrent-mode-patterns.html -prev: concurrent-mode-suspense.html -next: concurrent-mode-adoption.html ---- - - - -
      - ->Caution: -> ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. -> ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. For example, if you're looking for a data fetching tutorial that works today, read [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) instead. - -
      - -Usually, when we update the state, we expect to see changes on the screen immediately. This makes sense because we want to keep our app responsive to user input. However, there are cases where we might prefer to **defer an update from appearing on the screen**. - -For example, if we switch from one page to another, and none of the code or data for the next screen has loaded yet, it might be frustrating to immediately see a blank page with a loading indicator. We might prefer to stay longer on the previous screen. Implementing this pattern has historically been difficult in React. Concurrent Mode offers a new set of tools to do that. - -- [Transitions](#transitions) - - [Wrapping setState in a Transition](#wrapping-setstate-in-a-transition) - - [Adding a Pending Indicator](#adding-a-pending-indicator) - - [Reviewing the Changes](#reviewing-the-changes) - - [Where Does the Update Happen?](#where-does-the-update-happen) - - [Transitions Are Everywhere](#transitions-are-everywhere) - - [Baking Transitions Into the Design System](#baking-transitions-into-the-design-system) -- [The Three Steps](#the-three-steps) - - [Default: Receded → Skeleton → Complete](#default-receded-skeleton-complete) - - [Preferred: Pending → Skeleton → Complete](#preferred-pending-skeleton-complete) - - [Wrap Lazy Features in ``](#wrap-lazy-features-in-suspense) - - [Suspense Reveal “Train”](#suspense-reveal-train) - - [Delaying a Pending Indicator](#delaying-a-pending-indicator) - - [Recap](#recap) -- [Other Patterns](#other-patterns) - - [Splitting High and Low Priority State](#splitting-high-and-low-priority-state) - - [Deferring a Value](#deferring-a-value) - - [SuspenseList](#suspenselist) -- [Next Steps](#next-steps) - -## Transitions {#transitions} - -Let's revisit [this demo](https://codesandbox.io/s/infallible-feather-xjtbu) from the previous page about [Suspense for Data Fetching](/docs/concurrent-mode-suspense.html). - -When we click the "Next" button to switch the active profile, the existing page data immediately disappears, and we see the loading indicator for the whole page again. We can call this an "undesirable" loading state. **It would be nice if we could "skip" it and wait for some content to load before transitioning to the new screen.** - -React offers a new built-in `useTransition()` Hook to help with this. - -We can use it in three steps. - -First, we'll make sure that we're actually using Concurrent Mode. We'll talk more about [adopting Concurrent Mode](/docs/concurrent-mode-adoption.html) later, but for now it's sufficient to know that we need to use `ReactDOM.createRoot()` rather than `ReactDOM.render()` for this feature to work: - -```js -const rootElement = document.getElementById("root"); -// Opt into Concurrent Mode -ReactDOM.createRoot(rootElement).render(); -``` - -Next, we'll add an import for the `useTransition` Hook from React: - -```js -import React, { useState, useTransition, Suspense } from "react"; -``` - -Finally, we'll use it inside the `App` component: - -```js{3-5} -function App() { - const [resource, setResource] = useState(initialResource); - const [startTransition, isPending] = useTransition({ - timeoutMs: 3000 - }); - // ... -``` - -**By itself, this code doesn't do anything yet.** We will need to use this Hook's return values to set up our state transition. There are two values returned from `useTransition`: - -* `startTransition` is a function. We'll use it to tell React *which* state update we want to defer. -* `isPending` is a boolean. It's React telling us whether that transition is ongoing at the moment. - -We will use them right below. - -Note we passed a configuration object to `useTransition`. Its `timeoutMs` property specifies **how long we're willing to wait for the transition to finish**. By passing `{timeoutMs: 3000}`, we say "If the next profile takes more than 3 seconds to load, show the big spinner -- but before that timeout it's okay to keep showing the previous screen". - -### Wrapping setState in a Transition {#wrapping-setstate-in-a-transition} - -Our "Next" button click handler sets the state that switches the current profile in the state: - -```js{4} - - {isPending ? " Loading..." : null} - - -); -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/jovial-lalande-26yep)** - -Now, this feels a lot better! When we click Next, it gets disabled because clicking it multiple times doesn't make sense. And the new "Loading..." tells the user that the app didn't freeze. - -### Reviewing the Changes {#reviewing-the-changes} - -Let's take another look at all the changes we've made since the [original example](https://codesandbox.io/s/infallible-feather-xjtbu): - -```js{3-5,9,11,14,19} -function App() { - const [resource, setResource] = useState(initialResource); - const [startTransition, isPending] = useTransition({ - timeoutMs: 3000 - }); - return ( - <> - - {isPending ? " Loading..." : null} - - - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/jovial-lalande-26yep)** - -It took us only seven lines of code to add this transition: - -* We've imported the `useTransition` Hook and used it the component that updates the state. -* We've passed `{timeoutMs: 3000}` to stay on the previous screen for at most 3 seconds. -* We've wrapped our state update into `startTransition` to tell React it's okay to delay it. -* We're using `isPending` to communicate the state transition progress to the user and to disable the button. - -As a result, clicking "Next" doesn't perform an immediate state transition to an "undesirable" loading state, but instead stays on the previous screen and communicates progress there. - -### Where Does the Update Happen? {#where-does-the-update-happen} - -This wasn't very difficult to implement. However, if you start thinking about how this could possibly work, it might become a little mindbending. If we set the state, how come we don't see the result right away? *Where* is the next `` rendering? - -Clearly, both "versions" of `` exist at the same time. We know the old one exists because we see it on the screen and even display a progress indicator on it. And we know the new version also exists *somewhere*, because it's the one that we're waiting for! - -**But how can two versions of the same component exist at the same time?** - -This gets at the root of what Concurrent Mode is. We've [previously said](/docs/concurrent-mode-intro.html#intentional-loading-sequences) it's a bit like React working on state update on a "branch". Another way we can conceptualize is that wrapping a state update in `startTransition` begins rendering it *"in a different universe"*, much like in science fiction movies. We don't "see" that universe directly -- but we can get a signal from it that tells us something is happening (`isPending`). When the update is ready, our "universes" merge back together, and we see the result on the screen! - -Play a bit more with the [demo](https://codesandbox.io/s/jovial-lalande-26yep), and try to imagine it happening. - -Of course, two versions of the tree rendering *at the same time* is an illusion, just like the idea that all programs run on your computer at the same time is an illusion. An operating system switches between different applications very fast. Similarly, React can switch between the version of the tree you see on the screen and the version that it's "preparing" to show next. - -An API like `useTransition` lets you focus on the desired user experience, and not think about the mechanics of how it's implemented. Still, it can be a helpful metaphor to imagine that updates wrapped in `startTransition` happen "on a branch" or "in a different world". - -### Transitions Are Everywhere {#transitions-are-everywhere} - -As we learned from the [Suspense walkthrough](/docs/concurrent-mode-suspense.html), any component can "suspend" any time if some data it needs is not ready yet. We can strategically place `` boundaries in different parts of the tree to handle this, but it won't always be enough. - -Let's get back to our [first Suspense demo](https://codesandbox.io/s/frosty-hermann-bztrp) where there was just one profile. Currently, it fetches the data only once. We'll add a "Refresh" button to check for server updates. - -Our first attempt might look like this: - -```js{6-8,13-15} -const initialResource = fetchUserAndPosts(); - -function ProfilePage() { - const [resource, setResource] = useState(initialResource); - - function handleRefreshClick() { - setResource(fetchUserAndPosts()); - } - - return ( - Loading profile...}> - - - Loading posts...}> - - - - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/boring-shadow-100tf)** - -In this example, we start data fetching at the load *and* every time you press "Refresh". We put the result of calling `fetchUserAndPosts()` into state so that components below can start reading the new data from the request we just kicked off. - -We can see in [this example](https://codesandbox.io/s/boring-shadow-100tf) that pressing "Refresh" works. The `` and `` components receive a new `resource` prop that represents the fresh data, they "suspend" because we don't have a response yet, and we see the fallbacks. When the response loads, we can see the updated posts (our fake API adds them every 3 seconds). - -However, the experience feels really jarring. We were browsing a page, but it got replaced by a loading state right as we were interacting with it. It's disorienting. **Just like before, to avoid showing an undesirable loading state, we can wrap the state update in a transition:** - -```js{2-5,9-11,21} -function ProfilePage() { - const [startTransition, isPending] = useTransition({ - // Wait 10 seconds before fallback - timeoutMs: 10000 - }); - const [resource, setResource] = useState(initialResource); - - function handleRefreshClick() { - startTransition(() => { - setResource(fetchProfileData()); - }); - } - - return ( - Loading profile...}> - - - Loading posts...}> - - - - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/sleepy-field-mohzb)** - -This feels a lot better! Clicking "Refresh" doesn't pull us away from the page we're browsing anymore. We see something is loading "inline", and when the data is ready, it's displayed. - -### Baking Transitions Into the Design System {#baking-transitions-into-the-design-system} - -We can now see that the need for `useTransition` is *very* common. Pretty much any button click or interaction that can lead to a component suspending needs to be wrapped in `useTransition` to avoid accidentally hiding something the user is interacting with. - -This can lead to a lot of repetitive code across components. This is why **we generally recommend to bake `useTransition` into the *design system* components of your app**. For example, we can extract the transition logic into our own ` - {isPending ? spinner : null} - - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/modest-ritchie-iufrh)** - -Note that the button doesn't care *what* state we're updating. It's wrapping *any* state updates that happen during its `onClick` handler into a transition. Now that our ` - Loading posts...}> - - - - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/modest-ritchie-iufrh)** - -When a button gets clicked, it starts a transition and calls `props.onClick()` inside of it -- which triggers `handleRefreshClick` in the `` component. We start fetching the fresh data, but it doesn't trigger a fallback because we're inside a transition, and the 10 second timeout specified in the `useTransition` call hasn't passed yet. While a transition is pending, the button displays an inline loading indicator. - -We can see now how Concurrent Mode helps us achieve a good user experience without sacrificing isolation and modularity of components. React coordinates the transition. - -## The Three Steps {#the-three-steps} - -By now we have discussed all of the different visual states that an update may go through. In this section, we will give them names and talk about the progression between them. - -
      - -Three steps - -At the very end, we have the **Complete** state. That's where we want to eventually get to. It represents the moment when the next screen is fully rendered and isn't loading more data. - -But before our screen can be Complete, we might need to load some data or code. When we're on the next screen, but some parts of it are still loading, we call that a **Skeleton** state. - -Finally, there are two primary ways that lead us to the Skeleton state. We will illustrate the difference between them with a concrete example. - -### Default: Receded → Skeleton → Complete {#default-receded-skeleton-complete} - -Open [this example](https://codesandbox.io/s/prod-grass-g1lh5) and click "Open Profile". You will see several visual states one by one: - -* **Receded**: For a second, you will see the `

      Loading the app...

      ` fallback. -* **Skeleton:** You will see the `` component with `

      Loading posts...

      ` inside. -* **Complete:** You will see the `` component with no fallbacks inside. Everything was fetched. - -How do we separate the Receded and the Skeleton states? The difference between them is that the **Receded** state feels like "taking a step back" to the user, while the **Skeleton** state feels like "taking a step forward" in our progress to show more content. - -In this example, we started our journey on the ``: - -```js - - {/* previous screen */} - - -``` - -After the click, React started rendering the next screen: - -```js - - {/* next screen */} - - - - - - - -``` - -Both `` and `` need data to render, so they suspend: - -```js{4,6} - - {/* next screen */} - - {/* suspends! */} - Loading posts...}> - {/* suspends! */} - - - -``` - -When a component suspends, React needs to show the closest fallback. But the closest fallback to `` is at the top level: - -```js{2,3,7} - -

      Loading the app...

      -}> - {/* next screen */} - - {/* suspends! */} - - - - -       -``` - -This is why when we click the button, it feels like we've "taken a step back". The `` boundary which was previously showing useful content (``) had to "recede" to showing the fallback (`

      Loading the app...

      `). We call that a **Receded** state. - -As we load more data, React will retry rendering, and `` can render successfully. Finally, we're in the **Skeleton** state. We see the new page with missing parts: - -```js{6,7,9} - - {/* next screen */} - - - -

      Loading posts...

      - }> - {/* suspends! */} -       -       -       -``` - -Eventually, they load too, and we get to the **Complete** state. - -This scenario (Receded → Skeleton → Complete) is the default one. However, the Receded state is not very pleasant because it "hides" existing information. This is why React lets us opt into a different sequence (**Pending** → Skeleton → Complete) with `useTransition`. - -### Preferred: Pending → Skeleton → Complete {#preferred-pending-skeleton-complete} - -When we `useTransition`, React will let us "stay" on the previous screen -- and show a progress indicator there. We call that a **Pending** state. It feels much better than the Receded state because none of our existing content disappears, and the page stays interactive. - -You can compare these two examples to feel the difference: - -* Default: [Receded → Skeleton → Complete](https://codesandbox.io/s/prod-grass-g1lh5) -* **Preferred: [Pending → Skeleton → Complete](https://codesandbox.io/s/focused-snow-xbkvl)** - -The only difference between these two examples is that the first uses regular ` - {isPending ? spinner : null} - - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/floral-thunder-iy826)** - -This signals to the user that some work is happening. However, if the transition is relatively short (less than 500ms), it might be too distracting and make the transition itself feel *slower*. - -One possible solution to this is to *delay the spinner itself* from displaying: - -```css -.DelayedSpinner { - animation: 0s linear 0.5s forwards makeVisible; - visibility: hidden; -} - -@keyframes makeVisible { - to { - visibility: visible; - } -} -``` - -```js{2-4,10} -const spinner = ( - - {/* ... */} - -); - -return ( - <> - - {isPending ? spinner : null} - -); -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/gallant-spence-l6wbk)** - -With this change, even though we're in the Pending state, we don't display any indication to the user until 500ms has passed. This may not seem like much of an improvement when the API responses are slow. But compare how it feels [before](https://codesandbox.io/s/thirsty-liskov-1ygph) and [after](https://codesandbox.io/s/hardcore-http-s18xr) when the API call is fast. Even though the rest of the code hasn't changed, suppressing a "too fast" loading state improves the perceived performance by not calling attention to the delay. - -### Recap {#recap} - -The most important things we learned so far are: - -* By default, our loading sequence is Receded → Skeleton → Complete. -* The Receded state doesn't feel very nice because it hides existing content. -* With `useTransition`, we can opt into showing a Pending state first instead. This will keep us on the previous screen while the next screen is being prepared. -* If we don't want some component to delay the transition, we can wrap it in its own `` boundary. -* Instead of doing `useTransition` in every other component, we can build it into our design system. - -## Other Patterns {#other-patterns} - -Transitions are probably the most common Concurrent Mode pattern you'll encounter, but there are a few more patterns you might find useful. - -### Splitting High and Low Priority State {#splitting-high-and-low-priority-state} - -When you design React components, it is usually best to find the "minimal representation" of state. For example, instead of keeping `firstName`, `lastName`, and `fullName` in state, it's usually better keep only `firstName` and `lastName`, and then calculate `fullName` during rendering. This lets us avoid mistakes where we update one state but forget the other state. - -However, in Concurrent Mode there are cases where you might *want* to "duplicate" some data in different state variables. Consider this tiny translation app: - -```js -const initialQuery = "Hello, world"; -const initialResource = fetchTranslation(initialQuery); - -function App() { - const [query, setQuery] = useState(initialQuery); - const [resource, setResource] = useState(initialResource); - - function handleChange(e) { - const value = e.target.value; - setQuery(value); - setResource(fetchTranslation(value)); - } - - return ( - <> - - Loading...

      }> - -       - - ); -} - -function Translation({ resource }) { - return ( -

      - {resource.read()} -

      - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/brave-villani-ypxvf)** - -Notice how when you type into the input, the `` component suspends, and we see the `

      Loading...

      ` fallback until we get fresh results. This is not ideal. It would be better if we could see the *previous* translation for a bit while we're fetching the next one. - -In fact, if we open the console, we'll see a warning: - -``` -Warning: App triggered a user-blocking update that suspended. - -The fix is to split the update into multiple parts: a user-blocking update to provide immediate feedback, and another update that triggers the bulk of the changes. - -Refer to the documentation for useTransition to learn how to implement this pattern. -``` - -As we mentioned earlier, if some state update causes a component to suspend, that state update should be wrapped in a transition. Let's add `useTransition` to our component: - -```js{4-6,10,13} -function App() { - const [query, setQuery] = useState(initialQuery); - const [resource, setResource] = useState(initialResource); - const [startTransition, isPending] = useTransition({ - timeoutMs: 5000 - }); - - function handleChange(e) { - const value = e.target.value; - startTransition(() => { - setQuery(value); - setResource(fetchTranslation(value)); - }); - } - - // ... - -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/zen-keldysh-rifos)** - -Try typing into the input now. Something's wrong! The input is updating very slowly. - -We've fixed the first problem (suspending outside of a transition). But now because of the transition, our state doesn't update immediately, and it can't "drive" a controlled input! - -The answer to this problem **is to split the state in two parts:** a "high priority" part that updates immediately, and a "low priority" part that may wait for a transition. - -In our example, we already have two state variables. The input text is in `query`, and we read the translation from `resource`. We want changes to the `query` state to happen immediately, but changes to the `resource` (i.e. fetching a new translation) should trigger a transition. - -So the correct fix is to put `setQuery` (which doesn't suspend) *outside* the transition, but `setResource` (which will suspend) *inside* of it. - -```js{4,5} -function handleChange(e) { - const value = e.target.value; - - // Outside the transition (urgent) - setQuery(value); - - startTransition(() => { - // Inside the transition (may be delayed) - setResource(fetchTranslation(value)); - }); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/lively-smoke-fdf93)** - -With this change, it works as expected. We can type into the input immediately, and the translation later "catches up" to what we have typed. - -### Deferring a Value {#deferring-a-value} - -By default, React always renders a consistent UI. Consider code like this: - -```js -<> - - - -``` - -React guarantees that whenever we look at these components on the screen, they will reflect data from the same `user`. If a different `user` is passed down because of a state update, you would see them changing together. You can't ever record a screen and find a frame where they would show values from different `user`s. (If you ever run into a case like this, file a bug!) - -This makes sense in the vast majority of situations. Inconsistent UI is confusing and can mislead users. (For example, it would be terrible if a messenger's Send button and the conversation picker pane "disagreed" about which thread is currently selected.) - -However, sometimes it might be helpful to intentionally introduce an inconsistency. We could do it manually by "splitting" the state like above, but React also offers a built-in Hook for this: - -```js -import { useDeferredValue } from 'react'; - -const deferredValue = useDeferredValue(value, { - timeoutMs: 5000 -}); -``` - -To demonstrate this feature, we'll use [the profile switcher example](https://codesandbox.io/s/musing-ramanujan-bgw2o). Click the "Next" button and notice how it takes 1 second to do a transition. - -Let's say that fetching the user details is very fast and only takes 300 milliseconds. Currently, we're waiting a whole second because we need both user details and posts to display a consistent profile page. But what if we want to show the details faster? - -If we're willing to sacrifice consistency, we could **pass potentially stale data to the components that delay our transition**. That's what `useDeferredValue()` lets us do: - -```js{2-4,10,11,21} -function ProfilePage({ resource }) { - const deferredResource = useDeferredValue(resource, { - timeoutMs: 1000 - }); - return ( - Loading profile...}> - - Loading posts...}> - - - - ); -} - -function ProfileTimeline({ isStale, resource }) { - const posts = resource.posts.read(); - return ( -
        - {posts.map(post => ( -
      • {post.text}
        • - ))} -
      - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/vigorous-keller-3ed2b)** - -The tradeoff we're making here is that `` will be inconsistent with other components and potentially show an older item. Click "Next" a few times, and you'll notice it. But thanks to that, we were able to cut down the transition time from 1000ms to 300ms. - -Whether or not it's an appropriate tradeoff depends on the situation. But it's a handy tool, especially when the content doesn't change noticeably between items, and the user might not even realize they were looking at a stale version for a second. - -It's worth noting that `useDeferredValue` is not *only* useful for data fetching. It also helps when an expensive component tree causes an interaction (e.g. typing in an input) to be sluggish. Just like we can "defer" a value that takes too long to fetch (and show its old value despite others components updating), we can do this with trees that take too long to render. - -For example, consider a filterable list like this: - -```js -function App() { - const [text, setText] = useState("hello"); - - function handleChange(e) { - setText(e.target.value); - } - - return ( -
      - - ... - -
      - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/pensive-shirley-wkp46)** - -In this example, **every item in `` has an artificial slowdown -- each of them blocks the thread for a few milliseconds**. We'd never do this in a real app, but this helps us simulate what can happen in a deep component tree with no single obvious place to optimize. - -We can see how typing in the input causes stutter. Now let's add `useDeferredValue`: - -```js{3-5,18} -function App() { - const [text, setText] = useState("hello"); - const deferredText = useDeferredValue(text, { - timeoutMs: 5000 - }); - - function handleChange(e) { - setText(e.target.value); - } - - return ( -
      - - ... - -
      - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/infallible-dewdney-9fkv9)** - -Now typing has a lot less stutter -- although we pay for this by showing the results with a lag. - -How is this different from debouncing? Our example has a fixed artificial delay (3ms for every one of 80 items), so there is always a delay, no matter how fast our computer is. However, the `useDeferredValue` value only "lags behind" if the rendering takes a while. There is no minimal lag imposed by React. With a more realistic workload, you can expect the lag to adjust to the user’s device. On fast machines, the lag would be smaller or non-existent, and on slow machines, it would be more noticeable. In both cases, the app would remain responsive. That’s the advantage of this mechanism over debouncing or throttling, which always impose a minimal delay and can't avoid blocking the thread while rendering. - -Even though there is an improvement in responsiveness, this example isn't as compelling yet because Concurrent Mode is missing some crucial optimizations for this use case. Still, it is interesting to see that features like `useDeferredValue` (or `useTransition`) are useful regardless of whether we're waiting for network or for computational work to finish. - -### SuspenseList {#suspenselist} - -`` is the last pattern that's related to orchestrating loading states. - -Consider this example: - -```js{5-10} -function ProfilePage({ resource }) { - return ( - <> - - Loading posts...}> - - - Loading fun facts...}> - - - - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/proud-tree-exg5t)** - -The API call duration in this example is randomized. If you keep refreshing it, you will notice that sometimes the posts arrive first, and sometimes the "fun facts" arrive first. - -This presents a problem. If the response for fun facts arrives first, we'll see the fun facts below the `

      Loading posts...

      ` fallback for posts. We might start reading them, but then the *posts* response will come back, and shift all the facts down. This is jarring. - -One way we could fix it is by putting them both in a single boundary: - -```js -Loading posts and fun facts...}> - - - -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/currying-violet-5jsiy)** - -The problem with this is that now we *always* wait for both of them to be fetched. However, if it's the *posts* that came back first, there's no reason to delay showing them. When fun facts load later, they won't shift the layout because they're already below the posts. - -Other approaches to this, such as composing Promises in a special way, are increasingly difficult to pull off when the loading states are located in different components down the tree. - -To solve this, we will import `SuspenseList`: - -```js -import { SuspenseList } from 'react'; -``` - -`` coordinates the "reveal order" of the closest `` nodes below it: - -```js{3,11} -function ProfilePage({ resource }) { - return ( - - - Loading posts...}> - - - Loading fun facts...}> - - - - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/black-wind-byilt)** - -The `revealOrder="forwards"` option means that the closest `` nodes inside this list **will only "reveal" their content in the order they appear in the tree -- even if the data for them arrives in a different order**. `` has other interesting modes: try changing `"forwards"` to `"backwards"` or `"together"` and see what happens. - -You can control how many loading states are visible at once with the `tail` prop. If we specify `tail="collapsed"`, we'll see *at most one* fallback at the time. You can play with it [here](https://codesandbox.io/s/adoring-almeida-1zzjh). - -Keep in mind that `` is composable, like anything in React. For example, you can create a grid by putting several `` rows inside a `` table. - -## Next Steps {#next-steps} - -Concurrent Mode offers a powerful UI programming model and a set of new composable primitives to help you orchestrate delightful user experiences. - -It's a result of several years of research and development, but it's not finished. In the section on [adopting Concurrent Mode](/docs/concurrent-mode-adoption.html), we'll describe how you can try it and what you can expect. diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md deleted file mode 100644 index 663af1b3b..000000000 --- a/content/docs/concurrent-mode-reference.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: concurrent-mode-reference -title: Concurrent Mode API Reference (Experimental) -permalink: docs/concurrent-mode-reference.html -prev: concurrent-mode-adoption.html ---- - - - -
      - ->Caution: -> ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. -> ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. - -
      - -This page is an API reference for the React [Concurrent Mode](/docs/concurrent-mode-intro.html). If you're looking for a guided introduction instead, check out [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html). - -**Note: This is a Community Preview and not the final stable version. There will likely be future changes to these APIs. Use at your own risk!** - -- [Enabling Concurrent Mode](#concurrent-mode) - - [`createRoot`](#createroot) - - [`createBlockingRoot`](#createblockingroot) -- [Suspense](#suspense) - - [`Suspense`](#suspensecomponent) - - [`SuspenseList`](#suspenselist) - - [`useTransition`](#usetransition) - - [`useDeferredValue`](#usedeferredvalue) - -## Enabling Concurrent Mode {#concurrent-mode} - -### `createRoot` {#createroot} - -```js -ReactDOM.createRoot(rootNode).render(); -``` - -Replaces `ReactDOM.render(, rootNode)` and enables Concurrent Mode. - -For more information on Concurrent Mode, check out the [Concurrent Mode documentation.](/docs/concurrent-mode-intro.html) - -### `createBlockingRoot` {#createblockingroot} - -```js -ReactDOM.createBlockingRoot(rootNode).render() -``` - -Replaces `ReactDOM.render(, rootNode)` and enables [Blocking Mode](/docs/concurrent-mode-adoption.html#migration-step-blocking-mode). - -Opting into Concurrent Mode introduces semantic changes to how React works. This means that you can't use Concurrent Mode in just a few components. Because of this, some apps may not be able to migrate directly to Concurrent Mode. - -Blocking Mode only contains a small subset of Concurrent Mode features and is intended as an intermediary migration step for apps that are unable to migrate directly. - -## Suspense API {#suspense} - -### `Suspense` {#suspensecomponent} - -```js -Loading...}> - - - -``` - -`Suspense` lets your components "wait" for something before they can render, showing a fallback while waiting. - -In this example, `ProfileDetails` is waiting for an asynchronous API call to fetch some data. While we wait for `ProfileDetails` and `ProfilePhoto`, we will show the `Loading...` fallback instead. It is important to note that until all children inside `` has loaded, we will continue to show the fallback. - -`Suspense` takes two props: -* **fallback** takes a loading indicator. The fallback is shown until all of the children of the `Suspense` component have finished rendering. -* **unstable_avoidThisFallback** takes a boolean. It tells React whether to "skip" revealing this boundary during the initial load. This API will likely be removed in a future release. - -### `` {#suspenselist} - -```js - - - - - - - - - - - ... - -``` - -`SuspenseList` helps coordinate many components that can suspend by orchestrating the order in which these components are revealed to the user. - -When multiple components need to fetch data, this data may arrive in an unpredictable order. However, if you wrap these items in a `SuspenseList`, React will not show an item in the list until previous items have been displayed (this behavior is adjustable). - -`SuspenseList` takes two props: -* **revealOrder (forwards, backwards, together)** defines the order in which the `SuspenseList` children should be revealed. - * `together` reveals *all* of them when they're ready instead of one by one. -* **tail (collapsed, hidden)** dictates how unloaded items in a `SuspenseList` is shown. - * By default, `SuspenseList` will show all fallbacks in the list. - * `collapsed` shows only the next fallback in the list. - * `hidden` doesn't show any unloaded items. - -Note that `SuspenseList` only operates on the closest `Suspense` and `SuspenseList` components below it. It does not search for boundaries deeper than one level. However, it is possible to nest multiple `SuspenseList` components in each other to build grids. - -### `useTransition` {#usetransition} - -```js -const SUSPENSE_CONFIG = { timeoutMs: 2000 }; - -const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG); -``` - -`useTransition` allows components to avoid undesirable loading states by waiting for content to load before **transitioning to the next screen**. It also allows components to defer slower, data fetching updates until subsequent renders so that more crucial updates can be rendered immediately. - -The `useTransition` hook returns two values in an array. -* `startTransition` is a function that takes a callback. We can use it to tell React which state we want to defer. -* `isPending` is a boolean. It's React's way of informing us whether we're waiting for the transition to finish. - -**If some state update causes a component to suspend, that state update should be wrapped in a transition.** - -```js -const SUSPENSE_CONFIG = { timeoutMs: 2000 }; - -function App() { - const [resource, setResource] = useState(initialResource); - const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG); - return ( - <> - - {isPending ? " Loading..." : null} - }> - - - - ); -} -``` - -In this code, we've wrapped our data fetching with `startTransition`. This allows us to start fetching the profile data right away, while deferring the render of the next profile page and its associated `Spinner` for 2 seconds (the time shown in `timeoutMs`). - -The `isPending` boolean lets React know that our component is transitioning, so we are able to let the user know this by showing some loading text on the previous profile page. - -**For an in-depth look at transitions, you can read [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html#transitions).** - -#### useTransition Config {#usetransition-config} - -```js -const SUSPENSE_CONFIG = { timeoutMs: 2000 }; -``` - -`useTransition` accepts an **optional Suspense Config** with a `timeoutMs`. This timeout (in milliseconds) tells React how long to wait before showing the next state (the new Profile Page in the above example). - -**Note: We recommend that you share Suspense Config between different modules.** - - -### `useDeferredValue` {#usedeferredvalue} - -```js -const deferredValue = useDeferredValue(value, { timeoutMs: 2000 }); -``` - -Returns a deferred version of the value that may "lag behind" it for at most `timeoutMs`. - -This is commonly used to keep the interface responsive when you have something that renders immediately based on user input and something that needs to wait for a data fetch. - -A good example of this is a text input. - -```js -function App() { - const [text, setText] = useState("hello"); - const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); - - return ( -
      - {/* Keep passing the current text to the input */} - - ... - {/* But the list is allowed to "lag behind" when necessary */} - -
      - ); - } -``` - -This allows us to start showing the new text for the `input` immediately, which allows the webpage to feel responsive. Meanwhile, `MySlowList` "lags behind" for up to 2 seconds according to the `timeoutMs` before updating, allowing it to render with the current text in the background. - -**For an in-depth look at deferring values, you can read [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html#deferring-a-value).** - -#### useDeferredValue Config {#usedeferredvalue-config} - -```js -const SUSPENSE_CONFIG = { timeoutMs: 2000 }; -``` - -`useDeferredValue` accepts an **optional Suspense Config** with a `timeoutMs`. This timeout (in milliseconds) tells React how long the deferred value is allowed to lag behind. - -React will always try to use a shorter lag when network and device allows it. diff --git a/content/docs/concurrent-mode-suspense.md b/content/docs/concurrent-mode-suspense.md deleted file mode 100644 index 12ad112b2..000000000 --- a/content/docs/concurrent-mode-suspense.md +++ /dev/null @@ -1,736 +0,0 @@ ---- -id: concurrent-mode-suspense -title: Suspense for Data Fetching (Experimental) -permalink: docs/concurrent-mode-suspense.html -prev: concurrent-mode-intro.html -next: concurrent-mode-patterns.html ---- - - - -
      - ->Caution: -> ->This page describes **experimental features that are [not yet available](/docs/concurrent-mode-adoption.html) in a stable release**. Don't rely on experimental builds of React in production apps. These features may change significantly and without a warning before they become a part of React. -> ->This documentation is aimed at early adopters and people who are curious. **If you're new to React, don't worry about these features** -- you don't need to learn them right now. For example, if you're looking for a data fetching tutorial that works today, read [this article](https://www.robinwieruch.de/react-hooks-fetch-data/) instead. - -
      - -React 16.6 added a `` component that lets you "wait" for some code to load and declaratively specify a loading state (like a spinner) while we're waiting: - -```jsx -const ProfilePage = React.lazy(() => import('./ProfilePage')); // Lazy-loaded - -// Show a spinner while the profile is loading -}> - - -``` - -Suspense for Data Fetching is a new feature that lets you also use `` to **declaratively "wait" for anything else, including data.** This page focuses on the data fetching use case, but it can also wait for images, scripts, or other asynchronous work. - -- [What Is Suspense, Exactly?](#what-is-suspense-exactly) - - [What Suspense Is Not](#what-suspense-is-not) - - [What Suspense Lets You Do](#what-suspense-lets-you-do) -- [Using Suspense in Practice](#using-suspense-in-practice) - - [What If I Don’t Use Relay?](#what-if-i-dont-use-relay) - - [For Library Authors](#for-library-authors) -- [Traditional Approaches vs Suspense](#traditional-approaches-vs-suspense) - - [Approach 1: Fetch-on-Render (not using Suspense)](#approach-1-fetch-on-render-not-using-suspense) - - [Approach 2: Fetch-Then-Render (not using Suspense)](#approach-2-fetch-then-render-not-using-suspense) - - [Approach 3: Render-as-You-Fetch (using Suspense)](#approach-3-render-as-you-fetch-using-suspense) -- [Start Fetching Early](#start-fetching-early) - - [We’re Still Figuring This Out](#were-still-figuring-this-out) -- [Suspense and Race Conditions](#suspense-and-race-conditions) - - [Race Conditions with useEffect](#race-conditions-with-useeffect) - - [Race Conditions with componentDidUpdate](#race-conditions-with-componentdidupdate) - - [The Problem](#the-problem) - - [Solving Race Conditions with Suspense](#solving-race-conditions-with-suspense) -- [Handling Errors](#handling-errors) -- [Next Steps](#next-steps) - -## What Is Suspense, Exactly? {#what-is-suspense-exactly} - -Suspense lets your components "wait" for something before they can render. In [this example](https://codesandbox.io/s/frosty-hermann-bztrp), two components wait for an asynchronous API call to fetch some data: - -```js -const resource = fetchProfileData(); - -function ProfilePage() { - return ( - Loading profile...}> - - Loading posts...}> - - - - ); -} - -function ProfileDetails() { - // Try to read user info, although it might not have loaded yet - const user = resource.user.read(); - return

      {user.name}

      ; -} - -function ProfileTimeline() { - // Try to read posts, although they might not have loaded yet - const posts = resource.posts.read(); - return ( -
        - {posts.map(post => ( -
      • {post.text}
        • - ))} -
      - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/frosty-hermann-bztrp)** - -This demo is a teaser. Don't worry if it doesn't quite make sense yet. We'll talk more about how it works below. Keep in mind that Suspense is more of a *mechanism*, and particular APIs like `fetchProfileData()` or `resource.posts.read()` in the above example are not very important. If you're curious, you can find their definitions right in the [demo sandbox](https://codesandbox.io/s/frosty-hermann-bztrp). - -Suspense is not a data fetching library. It's a **mechanism for data fetching libraries** to communicate to React that *the data a component is reading is not ready yet*. React can then wait for it to be ready and update the UI. At Facebook, we use Relay and its [new Suspense integration](https://relay.dev/docs/en/experimental/step-by-step). We expect that other libraries like Apollo can provide similar integrations. - -In the long term, we intend Suspense to become the primary way to read asynchronous data from components -- no matter where that data is coming from. - -### What Suspense Is Not {#what-suspense-is-not} - -Suspense is significantly different from existing approaches to these problems, so reading about it for the first time often leads to misconceptions. Let's clarify the most common ones: - - * **It is not a data fetching implementation.** It does not assume that you use GraphQL, REST, or any other particular data format, library, transport, or protocol. - - * **It is not a ready-to-use client.** You can't "replace" `fetch` or Relay with Suspense. But you can use a library that's integrated with Suspense (for example, [new Relay APIs](https://relay.dev/docs/en/experimental/api-reference)). - - * **It does not couple data fetching to the view layer.** It helps orchestrate displaying the loading states in your UI, but it doesn't tie your network logic to React components. - -### What Suspense Lets You Do {#what-suspense-lets-you-do} - -So what's the point of Suspense? There are a few ways we can answer this: - -* **It lets data fetching libraries deeply integrate with React.** If a data fetching library implements Suspense support, using it from React components feels very natural. - -* **It lets you orchestrate intentionally designed loading states.** It doesn't say _how_ the data is fetched, but it lets you closely control the visual loading sequence of your app. - -* **It helps you avoid race conditions.** Even with `await`, asynchronous code is often error-prone. Suspense feels more like reading data *synchronously* — as if it were already loaded. - -## Using Suspense in Practice {#using-suspense-in-practice} - -At Facebook, so far we have only used the Relay integration with Suspense in production. **If you're looking for a practical guide to get started today, [check out the Relay Guide](https://relay.dev/docs/en/experimental/step-by-step)!** It demonstrates patterns that have already worked well for us in production. - -**The code demos on this page use a "fake" API implementation rather than Relay.** This makes them easier to understand if you're not familiar with GraphQL, but they won't tell you the "right way" to build an app with Suspense. This page is more conceptual and is intended to help you see *why* Suspense works in a certain way, and which problems it solves. - -### What If I Don't Use Relay? {#what-if-i-dont-use-relay} - -If you don't use Relay today, you might have to wait before you can really try Suspense in your app. So far, it's the only implementation that we tested in production and are confident in. - -Over the next several months, many libraries will appear with different takes on Suspense APIs. **If you prefer to learn when things are more stable, you might prefer to ignore this work for now, and come back when the Suspense ecosystem is more mature.** - -You can also write your own integration for a data fetching library, if you'd like. - -### For Library Authors {#for-library-authors} - -We expect to see a lot of experimentation in the community with other libraries. There is one important thing to note for data fetching library authors. - -Although it's technically doable, Suspense is **not** currently intended as a way to start fetching data when a component renders. Rather, it lets components express that they're "waiting" for data that is *already being fetched*. **[Building Great User Experiences with Concurrent Mode and Suspense](/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html) describes why this matters and how to implement this pattern in practice.** - -Unless you have a solution that helps prevent waterfalls, we suggest to prefer APIs that favor or enforce fetching before render. For a concrete example, you can look at how [Relay Suspense API](https://relay.dev/docs/en/experimental/api-reference#usepreloadedquery) enforces preloading. Our messaging about this hasn't been very consistent in the past. Suspense for Data Fetching is still experimental, so you can expect our recommendations to change over time as we learn more from production usage and understand the problem space better. - -## Traditional Approaches vs Suspense {#traditional-approaches-vs-suspense} - -We could introduce Suspense without mentioning the popular data fetching approaches. However, this makes it more difficult to see which problems Suspense solves, why these problems are worth solving, and how Suspense is different from the existing solutions. - -Instead, we'll look at Suspense as a logical next step in a sequence of approaches: - -* **Fetch-on-render (for example, `fetch` in `useEffect`):** Start rendering components. Each of these components may trigger data fetching in their effects and lifecycle methods. This approach often leads to "waterfalls". -* **Fetch-then-render (for example, Relay without Suspense):** Start fetching all the data for the next screen as early as possible. When the data is ready, render the new screen. We can't do anything until the data arrives. -* **Render-as-you-fetch (for example, Relay with Suspense):** Start fetching all the required data for the next screen as early as possible, and start rendering the new screen *immediately — before we get a network response*. As data streams in, React retries rendering components that still need data until they're all ready. - ->Note -> ->This is a bit simplified, and in practice solutions tend to use a mix of different approaches. Still, we will look at them in isolation to better contrast their tradeoffs. - -To compare these approaches, we'll implement a profile page with each of them. - -### Approach 1: Fetch-on-Render (not using Suspense) {#approach-1-fetch-on-render-not-using-suspense} - -A common way to fetch data in React apps today is to use an effect: - -```js -// In a function component: -useEffect(() => { - fetchSomething(); -}, []); - -// Or, in a class component: -componentDidMount() { - fetchSomething(); -} -``` - -We call this approach "fetch-on-render" because it doesn't start fetching until *after* the component has rendered on the screen. This leads to a problem known as a "waterfall". - -Consider these `` and `` components: - -```js{4-6,22-24} -function ProfilePage() { - const [user, setUser] = useState(null); - - useEffect(() => { - fetchUser().then(u => setUser(u)); - }, []); - - if (user === null) { - return

      Loading profile...

      ; - } - return ( - <> -

      {user.name}

      - - - ); -} - -function ProfileTimeline() { - const [posts, setPosts] = useState(null); - - useEffect(() => { - fetchPosts().then(p => setPosts(p)); - }, []); - - if (posts === null) { - return

      Loading posts...

      ; - } - return ( -
        - {posts.map(post => ( -
      • {post.text}
        • - ))} -
      - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/fragrant-glade-8huj6)** - -If you run this code and watch the console logs, you'll notice the sequence is: - -1. We start fetching user details -2. We wait... -3. We finish fetching user details -4. We start fetching posts -5. We wait... -6. We finish fetching posts - -If fetching user details takes three seconds, we'll only *start* fetching the posts after three seconds! That's a "waterfall": an unintentional *sequence* that should have been parallelized. - -Waterfalls are common in code that fetches data on render. They're possible to solve, but as the product grows, many people prefer to use a solution that guards against this problem. - -### Approach 2: Fetch-Then-Render (not using Suspense) {#approach-2-fetch-then-render-not-using-suspense} - -Libraries can prevent waterfalls by offering a more centralized way to do data fetching. For example, Relay solves this problem by moving the information about the data a component needs to statically analyzable *fragments*, which later get composed into a single query. - -On this page, we don't assume knowledge of Relay, so we won't be using it for this example. Instead, we'll write something similar manually by combining our data fetching methods: - -```js -function fetchProfileData() { - return Promise.all([ - fetchUser(), - fetchPosts() - ]).then(([user, posts]) => { - return {user, posts}; - }) -} -``` - -In this example, `` waits for both requests but starts them in parallel: - -```js{1,2,8-13} -// Kick off fetching as early as possible -const promise = fetchProfileData(); - -function ProfilePage() { - const [user, setUser] = useState(null); - const [posts, setPosts] = useState(null); - - useEffect(() => { - promise.then(data => { - setUser(data.user); - setPosts(data.posts); - }); - }, []); - - if (user === null) { - return

      Loading profile...

      ; - } - return ( - <> -

      {user.name}

      - - - ); -} - -// The child doesn't trigger fetching anymore -function ProfileTimeline({ posts }) { - if (posts === null) { - return

      Loading posts...

      ; - } - return ( -
        - {posts.map(post => ( -
      • {post.text}
        • - ))} -
      - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/wandering-morning-ev6r0)** - -The event sequence now becomes like this: - -1. We start fetching user details -2. We start fetching posts -3. We wait... -4. We finish fetching user details -5. We finish fetching posts - -We've solved the previous network "waterfall", but accidentally introduced a different one. We wait for *all* data to come back with `Promise.all()` inside `fetchProfileData`, so now we can't render profile details until the posts have been fetched too. We have to wait for both. - -Of course, this is possible to fix in this particular example. We could remove the `Promise.all()` call, and wait for both Promises separately. However, this approach gets progressively more difficult as the complexity of our data and component tree grows. It's hard to write reliable components when arbitrary parts of the data tree may be missing or stale. So fetching all data for the new screen and *then* rendering is often a more practical option. - -### Approach 3: Render-as-You-Fetch (using Suspense) {#approach-3-render-as-you-fetch-using-suspense} - -In the previous approach, we fetched data before we called `setState`: - -1. Start fetching -2. Finish fetching -3. Start rendering - -With Suspense, we still start fetching first, but we flip the last two steps around: - -1. Start fetching -2. **Start rendering** -3. **Finish fetching** - -**With Suspense, we don't wait for the response to come back before we start rendering.** In fact, we start rendering *pretty much immediately* after kicking off the network request: - -```js{2,17,23} -// This is not a Promise. It's a special object from our Suspense integration. -const resource = fetchProfileData(); - -function ProfilePage() { - return ( - Loading profile...}> - - Loading posts...}> - - - - ); -} - -function ProfileDetails() { - // Try to read user info, although it might not have loaded yet - const user = resource.user.read(); - return

      {user.name}

      ; -} - -function ProfileTimeline() { - // Try to read posts, although they might not have loaded yet - const posts = resource.posts.read(); - return ( -
        - {posts.map(post => ( -
      • {post.text}
        • - ))} -
      - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/frosty-hermann-bztrp)** - -Here's what happens when we render `` on the screen: - -1. We've already kicked off the requests in `fetchProfileData()`. It gave us a special "resource" instead of a Promise. In a realistic example, it would be provided by our data library's Suspense integration, like Relay. -2. React tries to render ``. It returns `` and `` as children. -3. React tries to render ``. It calls `resource.user.read()`. None of the data is fetched yet, so this component "suspends". React skips over it, and tries rendering other components in the tree. -4. React tries to render ``. It calls `resource.posts.read()`. Again, there's no data yet, so this component also "suspends". React skips over it too, and tries rendering other components in the tree. -5. There's nothing left to try rendering. Because `` suspended, React shows the closest `` fallback above it in the tree: `

      Loading profile...

      `. We're done for now. - -This `resource` object represents the data that isn't there yet, but might eventually get loaded. When we call `read()`, we either get the data, or the component "suspends". - -**As more data streams in, React will retry rendering, and each time it might be able to progress "deeper".** When `resource.user` is fetched, the `` component will render successfully and we'll no longer need the `

      Loading profile...

      ` fallback. Eventually, we'll get all the data, and there will be no fallbacks on the screen. - -This has an interesting implication. Even if we use a GraphQL client that collects all data requirements in a single request, *streaming the response lets us show more content sooner*. Because we render-*as-we-fetch* (as opposed to *after* fetching), if `user` appears in the response earlier than `posts`, we'll be able to "unlock" the outer `` boundary before the response even finishes. We might have missed this earlier, but even the fetch-then-render solution contained a waterfall: between fetching and rendering. Suspense doesn't inherently suffer from this waterfall, and libraries like Relay take advantage of this. - -Note how we eliminated the `if (...)` "is loading" checks from our components. This doesn't only remove boilerplate code, but it also simplifies making quick design changes. For example, if we wanted profile details and posts to always "pop in" together, we could delete the `` boundary between them. Or we could make them independent from each other by giving each *its own* `` boundary. Suspense lets us change the granularity of our loading states and orchestrate their sequencing without invasive changes to our code. - -## Start Fetching Early {#start-fetching-early} - -If you're working on a data fetching library, there's a crucial aspect of Render-as-You-Fetch you don't want to miss. **We kick off fetching _before_ rendering.** Look at this code example closer: - -```js -// Start fetching early! -const resource = fetchProfileData(); - -// ... - -function ProfileDetails() { - // Try to read user info - const user = resource.user.read(); - return

      {user.name}

      ; -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/frosty-hermann-bztrp)** - -Note that the `read()` call in this example doesn't *start* fetching. It only tries to read the data that is **already being fetched**. This difference is crucial to creating fast applications with Suspense. We don't want to delay loading data until a component starts rendering. As a data fetching library author, you can enforce this by making it impossible to get a `resource` object without also starting a fetch. Every demo on this page using our "fake API" enforces this. - -You might object that fetching "at the top level" like in this example is impractical. What are we going to do if we navigate to another profile's page? We might want to fetch based on props. The answer to this is **we want to start fetching in the event handlers instead**. Here is a simplified example of navigating between user's pages: - -```js{1,2,10,11} -// First fetch: as soon as possible -const initialResource = fetchProfileData(0); - -function App() { - const [resource, setResource] = useState(initialResource); - return ( - <> - - - - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/infallible-feather-xjtbu)** - -With this approach, we can **fetch code and data in parallel**. When we navigate between pages, we don't need to wait for a page's code to load to start loading its data. We can start fetching both code and data at the same time (during the link click), delivering a much better user experience. - -This poses a question of how do we know *what* to fetch before rendering the next screen. There are several ways to solve this (for example, by integrating data fetching closer with your routing solution). If you work on a data fetching library, [Building Great User Experiences with Concurrent Mode and Suspense](/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html) presents a deep dive on how to accomplish this and why it's important. - -### We're Still Figuring This Out {#were-still-figuring-this-out} - -Suspense itself as a mechanism is flexible and doesn't have many constraints. Product code needs to be more constrained to ensure no waterfalls, but there are different ways to provide these guarantees. Some questions that we're currently exploring include: - -* Fetching early can be cumbersome to express. How do we make it easier to avoid waterfalls? -* When we fetch data for a page, can the API encourage including data for instant transitions *from* it? -* What is the lifetime of a response? Should caching be global or local? Who manages the cache? -* Can Proxies help express lazy-loaded APIs without inserting `read()` calls everywhere? -* What would the equivalent of composing GraphQL queries look like for arbitrary Suspense data? - -Relay has its own answers to some of these questions. There is certainly more than a single way to do it, and we're excited to see what new ideas the React community comes up with. - -## Suspense and Race Conditions {#suspense-and-race-conditions} - -Race conditions are bugs that happen due to incorrect assumptions about the order in which our code may run. Fetching data in the `useEffect` Hook or in class lifecycle methods like `componentDidUpdate` often leads to them. Suspense can help here, too — let's see how. - -To demonstrate the issue, we will add a top-level `` component that renders our `` with a button that lets us **switch between different profiles**: - -```js{9-11} -function getNextId(id) { - // ... -} - -function App() { - const [id, setId] = useState(0); - return ( - <> - - - - ); -} -``` - -Let's compare how different data fetching strategies deal with this requirement. - -### Race Conditions with `useEffect` {#race-conditions-with-useeffect} - -First, we'll try a version of our original "fetch in effect" example. We'll modify it to pass an `id` parameter from the `` props to `fetchUser(id)` and `fetchPosts(id)`: - -```js{1,5,6,14,19,23,24} -function ProfilePage({ id }) { - const [user, setUser] = useState(null); - - useEffect(() => { - fetchUser(id).then(u => setUser(u)); - }, [id]); - - if (user === null) { - return

      Loading profile...

      ; - } - return ( - <> -

      {user.name}

      - - - ); -} - -function ProfileTimeline({ id }) { - const [posts, setPosts] = useState(null); - - useEffect(() => { - fetchPosts(id).then(p => setPosts(p)); - }, [id]); - - if (posts === null) { - return

      Loading posts...

      ; - } - return ( -
        - {posts.map(post => ( -
      • {post.text}
        • - ))} -
      - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/nervous-glade-b5sel)** - -Note how we also changed the effect dependencies from `[]` to `[id]` — because we want the effect to re-run when the `id` changes. Otherwise, we wouldn't refetch new data. - -If we try this code, it might seem like it works at first. However, if we randomize the delay time in our "fake API" implementation and press the "Next" button fast enough, we'll see from the console logs that something is going very wrong. **Requests from the previous profiles may sometimes "come back" after we've already switched the profile to another ID -- and in that case they can overwrite the new state with a stale response for a different ID.** - -This problem is possible to fix (you could use the effect cleanup function to either ignore or cancel stale requests), but it's unintuitive and difficult to debug. - -### Race Conditions with `componentDidUpdate` {#race-conditions-with-componentdidupdate} - -One might think that this is a problem specific to `useEffect` or Hooks. Maybe if we port this code to classes or use convenient syntax like `async` / `await`, it will solve the problem? - -Let's try that: - -```js -class ProfilePage extends React.Component { - state = { - user: null, - }; - componentDidMount() { - this.fetchData(this.props.id); - } - componentDidUpdate(prevProps) { - if (prevProps.id !== this.props.id) { - this.fetchData(this.props.id); - } - } - async fetchData(id) { - const user = await fetchUser(id); - this.setState({ user }); - } - render() { - const { id } = this.props; - const { user } = this.state; - if (user === null) { - return

      Loading profile...

      ; - } - return ( - <> -

      {user.name}

      - - - ); - } -} - -class ProfileTimeline extends React.Component { - state = { - posts: null, - }; - componentDidMount() { - this.fetchData(this.props.id); - } - componentDidUpdate(prevProps) { - if (prevProps.id !== this.props.id) { - this.fetchData(this.props.id); - } - } - async fetchData(id) { - const posts = await fetchPosts(id); - this.setState({ posts }); - } - render() { - const { posts } = this.state; - if (posts === null) { - return

      Loading posts...

      ; - } - return ( -
        - {posts.map(post => ( -
      • {post.text}
        • - ))} -
      - ); - } -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/trusting-clarke-8twuq)** - -This code is deceptively easy to read. - -Unfortunately, neither using a class nor the `async` / `await` syntax helped us solve this problem. This version suffers from exactly the same race conditions, for the same reasons. - -### The Problem {#the-problem} - -React components have their own "lifecycle". They may receive props or update state at any point in time. However, each asynchronous request *also* has its own "lifecycle". It starts when we kick it off, and finishes when we get a response. The difficulty we're experiencing is "synchronizing" several processes in time that affect each other. This is hard to think about. - -### Solving Race Conditions with Suspense {#solving-race-conditions-with-suspense} - -Let's rewrite this example again, but using Suspense only: - -```js -const initialResource = fetchProfileData(0); - -function App() { - const [resource, setResource] = useState(initialResource); - return ( - <> - - - - ); -} - -function ProfilePage({ resource }) { - return ( - Loading profile...}> - - Loading posts...}> - - - - ); -} - -function ProfileDetails({ resource }) { - const user = resource.user.read(); - return

      {user.name}

      ; -} - -function ProfileTimeline({ resource }) { - const posts = resource.posts.read(); - return ( -
        - {posts.map(post => ( -
      • {post.text}
        • - ))} -
      - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/infallible-feather-xjtbu)** - -In the previous Suspense example, we only had one `resource`, so we held it in a top-level variable. Now that we have multiple resources, we moved it to the ``'s component state: - -```js{4} -const initialResource = fetchProfileData(0); - -function App() { - const [resource, setResource] = useState(initialResource); -``` - -When we click "Next", the `` component kicks off a request for the next profile, and passes *that* object down to the `` component: - -```js{4,8} - <> - - - -``` - -Again, notice that **we're not waiting for the response to set the state. It's the other way around: we set the state (and start rendering) immediately after kicking off a request**. As soon as we have more data, React "fills in" the content inside `` components. - -This code is very readable, but unlike the examples earlier, the Suspense version doesn't suffer from race conditions. You might be wondering why. The answer is that in the Suspense version, we don't have to think about *time* as much in our code. Our original code with race conditions needed to set the state *at the right moment later*, or otherwise it would be wrong. But with Suspense, we set the state *immediately* -- so it's harder to mess it up. - -## Handling Errors {#handling-errors} - -When we write code with Promises, we might use `catch()` to handle errors. How does this work with Suspense, given that we don't *wait* for Promises to start rendering? - -With Suspense, handling fetching errors works the same way as handling rendering errors -- you can render an [error boundary](/docs/error-boundaries.html) anywhere to "catch" errors in components below. - -First, we'll define an error boundary component to use across our project: - -```js -// Error boundaries currently have to be classes. -class ErrorBoundary extends React.Component { - state = { hasError: false, error: null }; - static getDerivedStateFromError(error) { - return { - hasError: true, - error - }; - } - render() { - if (this.state.hasError) { - return this.props.fallback; - } - return this.props.children; - } -} -``` - -And then we can put it anywhere in the tree to catch errors: - -```js{5,9} -function ProfilePage() { - return ( - Loading profile...}> - - Could not fetch posts.}> - Loading posts...}> - - - - - ); -} -``` - -**[Try it on CodeSandbox](https://codesandbox.io/s/adoring-goodall-8wbn7)** - -It would catch both rendering errors *and* errors from Suspense data fetching. We can have as many error boundaries as we like but it's best to [be intentional](https://aweary.dev/fault-tolerance-react/) about their placement. - -## Next Steps {#next-steps} - -We've now covered the basics of Suspense for Data Fetching! Importantly, we now better understand *why* Suspense works this way, and how it fits into the data fetching space. - -Suspense answers some questions, but it also poses new questions of its own: - -* If some component "suspends", does the app freeze? How to avoid this? -* What if we want to show a spinner in a different place than "above" the component in a tree? -* If we intentionally *want* to show an inconsistent UI for a small period of time, can we do that? -* Instead of showing a spinner, can we add a visual effect like "greying out" the current screen? -* Why does our [last Suspense example](https://codesandbox.io/s/infallible-feather-xjtbu) log a warning when clicking the "Next" button? - -To answer these questions, we will refer to the next section on [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html). diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md index 4f62fb5f7..bbaf8ca09 100644 --- a/content/docs/conditional-rendering.md +++ b/content/docs/conditional-rendering.md @@ -8,7 +8,20 @@ redirect_from: - "tips/false-in-jsx.html" --- +<<<<<<< HEAD នៅក្នុង React អ្នកអាចបង្កើត components ខុសៗគ្នាដែល encapsulate ឥរិយាបទ (behavior) ដែលអ្នកត្រូវការ។ បន្ទាប់មកទៀតអ្នកអាច render ពួកវាមួយចំនួនប៉ុណ្ណោះ ដោយអាស្រ័យលើ state នៃ application របស់អ្នក។​ +======= +> Try the new React documentation. +> +> These new documentation pages teach modern React and include live examples: +> +> - [Conditional Rendering](https://beta.reactjs.org/learn/conditional-rendering) +> +> The new docs will soon replace this site, which will be archived. [Provide feedback.](https://github.com/reactjs/reactjs.org/issues/3308) + + +In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. +>>>>>>> b0ccb47f33e52315b0ec65edb9a49dc4910dd99c Conditional rendering នៅក្នុង React ធ្វើការដូចគ្នា និង conditions នៅក្នុង JavaScript។ ប្រើ JavaScript operators ដូចជា [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) ឬក៏ [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) ដើម្បីបង្កើត elements ដែលតំណាងអោយ current state ហើយអនុញ្ញាតឱ្យ React ធ្វើបច្ចុប្បន្នភាព UI ដែលត្រូវនិង conditions។ @@ -35,11 +48,9 @@ function Greeting(props) { return ; } -ReactDOM.render( - // Try changing to isLoggedIn={true}: - , - document.getElementById('root') -); +const root = ReactDOM.createRoot(document.getElementById('root')); +// Try changing to isLoggedIn={true}: +root.render(); ``` [**សាកល្បងវានៅលើ CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) @@ -111,10 +122,8 @@ class LoginControl extends React.Component { } } -ReactDOM.render( - , - document.getElementById('root') -); +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); ``` [**សាកល្បងវានៅលើ CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) @@ -124,7 +133,11 @@ ReactDOM.render( ### Inline If ជាមួយ Logical && Operator {#inline-if-with-logical--operator} +<<<<<<< HEAD អ្នកប្រហែល [បង្កប់ (embed) expressions មួយចំនួននៅក្នុង JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) ដោយការដាក់រុំពួកវានៅក្នុងដង្កៀប​អង្កាញ់ (curly braces)។ នេះរួមបញ្ចូលទាំង JavaScript logical `&&` operator។ វាអាចងាយស្រួលសម្រាប់ការដាក់លក្ខខណ្ឌរួមជាមួយ element មួយ៖ +======= +You may [embed expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element: +>>>>>>> b0ccb47f33e52315b0ec65edb9a49dc4910dd99c ```js{6-10} function Mailbox(props) { @@ -142,10 +155,9 @@ function Mailbox(props) { } const messages = ['React', 'Re: React', 'Re:Re: React']; -ReactDOM.render( - , - document.getElementById('root') -); + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); ``` [**សាកល្បងវានៅលើ CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) @@ -155,7 +167,24 @@ ReactDOM.render( ដូច្នេះប្រសិនបើលក្ខខណ្ឌគឺ `true` នេាះ element នៅខាងស្តាំបន្ទាប់ពី `&&` នឹងបង្ហាញនៅក្នុងលទ្ធផល (output)។ ប្រសិនបើវាគឺ `false` នេាះ React នឹងមិនអើពើ (ignore) ហើយរំលងវា។ +<<<<<<< HEAD ### Inline If-Else ជាមួយ Conditional Operator {#inline-if-else-with-conditional-operator} +======= +Note that returning a falsy expression will still cause the element after `&&` to be skipped but will return the falsy expression. In the example below, `
      0
      ` will be returned by the render method. + +```javascript{2,5} +render() { + const count = 0; + return ( +
      + {count &&

      Messages: {count}

      } +
      + ); +} +``` + +### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator} +>>>>>>> b0ccb47f33e52315b0ec65edb9a49dc4910dd99c Method ផ្សេងទៀតសម្រាប់ដាក់លក្ខខណ្ឌក្នុងការ render elements ជាលក្ខណះ inline គឺប្រើ JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)។ @@ -234,10 +263,8 @@ class Page extends React.Component { } } -ReactDOM.render( - , - document.getElementById('root') -); +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); ``` [**សាកល្បងវានៅលើ CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) diff --git a/content/docs/context.md b/content/docs/context.md index c6882fe08..1ba8e8651 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -4,9 +4,18 @@ title: Context permalink: docs/context.html --- +> Try the new React documentation. +> +> These new documentation pages teach modern React and include live examples: +> +> - [Passing Data Deeply with Context](https://beta.reactjs.org/learn/passing-data-deeply-with-context) +> - [`useContext`](https://beta.reactjs.org/reference/react/useContext) +> +> The new docs will soon replace this site, which will be archived. [Provide feedback.](https://github.com/reactjs/reactjs.org/issues/3308) + Context provides a way to pass data through the component tree without having to pass props down manually at every level. -In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree. +In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree. - [When to Use Context](#when-to-use-context) - [Before You Use Context](#before-you-use-context) @@ -80,7 +89,7 @@ function Page(props) { With this change, only the top-most Page component needs to know about the `Link` and `Avatar` components' use of `user` and `avatarSize`. -This *inversion of control* can make your code cleaner in many cases by reducing the amount of props you need to pass through your application and giving more control to the root components. However, this isn't the right choice in every case: moving more complexity higher in the tree makes those higher-level components more complicated and forces the lower-level components to be more flexible than you may want. +This *inversion of control* can make your code cleaner in many cases by reducing the amount of props you need to pass through your application and giving more control to the root components. Such inversion, however, isn't the right choice in every case; moving more complexity higher in the tree makes those higher-level components more complicated and forces the lower-level components to be more flexible than you may want. You're not limited to a single child for a component. You may pass multiple children, or even have multiple separate "slots" for children, [as documented here](/docs/composition-vs-inheritance.html#containment): @@ -118,7 +127,7 @@ const MyContext = React.createContext(defaultValue); Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching `Provider` above it in the tree. -The `defaultValue` argument is **only** used when a component does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them. Note: passing `undefined` as a Provider value does not cause consuming components to use `defaultValue`. +The `defaultValue` argument is **only** used when a component does not have a matching Provider above it in the tree. This default value can be helpful for testing components in isolation without wrapping them. Note: passing `undefined` as a Provider value does not cause consuming components to use `defaultValue`. ### `Context.Provider` {#contextprovider} @@ -128,7 +137,7 @@ The `defaultValue` argument is **only** used when a component does not have a ma Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes. -Accepts a `value` prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree. +The Provider component accepts a `value` prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree. All consumers that are descendants of a Provider will re-render whenever the Provider's `value` prop changes. The propagation from Provider to its descendant consumers (including [`.contextType`](#classcontexttype) and [`useContext`](/docs/hooks-reference.html#usecontext)) is not subject to the `shouldComponentUpdate` method, so the consumer is updated even when an ancestor component skips an update. @@ -162,7 +171,7 @@ class MyClass extends React.Component { MyClass.contextType = MyContext; ``` -The `contextType` property on a class can be assigned a Context object created by [`React.createContext()`](#reactcreatecontext). This lets you consume the nearest current value of that Context type using `this.context`. You can reference this in any of the lifecycle methods including the render function. +The `contextType` property on a class can be assigned a Context object created by [`React.createContext()`](#reactcreatecontext). Using this property lets you consume the nearest current value of that Context type using `this.context`. You can reference this in any of the lifecycle methods including the render function. > Note: > @@ -189,7 +198,7 @@ class MyClass extends React.Component { ``` -A React component that subscribes to context changes. This lets you subscribe to a context within a [function component](/docs/components-and-props.html#function-and-class-components). +A React component that subscribes to context changes. Using this component lets you subscribe to a context within a [function component](/docs/components-and-props.html#function-and-class-components). Requires a [function as a child](/docs/render-props.html#using-props-other-than-render). The function receives the current context value and returns a React node. The `value` argument passed to the function will be equal to the `value` prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the `value` argument will be equal to the `defaultValue` that was passed to `createContext()`. diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md index 6f65162d2..b83eae2ba 100644 --- a/content/docs/create-a-new-react-app.md +++ b/content/docs/create-a-new-react-app.md @@ -40,7 +40,11 @@ next: cdn-links.html [Create React App](https://github.com/facebookincubator/create-react-app) គឺជា environment ដែលផ្តល់ភាពសុខស្រួល (comfortable) មួយសម្រាប់ **ការរៀន React** ហើយគឺជាវិធីដ៏ល្អបំផុតដើម្បីចាប់ផ្តើមបង្កើត **[single-page](/docs/glossary.html#single-page-application) application ថ្មីមួយ** នៅក្នុង​ React។ +<<<<<<< HEAD វាបង្កើត (sets up)នូវ development environment របស់អ្នកដូច្នេះអ្នកអាចប្រើលក្ខណៈពិសេសចុងក្រោយបំផុតរបស់ JavaScript (latest JavaScript features), ផ្តល់ developer នូវបទពិសោធដ៏អស្ចារ្យបំផុត, ហើយនិងបង្កើនប្រសិទ្ធភាព app របស់អ្នកសម្រាប់ production។ អ្នកនឹងត្រូវមាន Node >= ៨.១០ និង npm >= ៥.៦ នៅលើម៉ាស៊ីនរបស់អ្នក។ ដើម្បីបង្កើត product, run៖ +======= +It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have [Node >= 14.0.0 and npm >= 5.6](https://nodejs.org/en/) on your machine. To create a project, run: +>>>>>>> b0ccb47f33e52315b0ec65edb9a49dc4910dd99c ```bash npx create-react-app my-app @@ -74,7 +78,13 @@ Create React App មិនដោះស្រាយ​ (doesn't handle) នូវ - **[Neutrino](https://neutrinojs.org/)** រួមបញ្ចូលគ្នានូវអំណាច (power) នៃ [webpack](https://webpack.js.org/) ជាមួយភាពសាមញ្ញនៃ presets ហើយនិងរួមបញ្ចូលទាំង preset សម្រាប់ [React apps](https://neutrinojs.org/packages/react/) និង [React components](https://neutrinojs.org/packages/react-components/)។ +<<<<<<< HEAD - **[nwb](https://github.com/insin/nwb)** គឺអស្ចារ្យណាស់សម្រាប់ [ការ publishing React components សម្រាប់ npm](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb)។ វា [អាចត្រូវបានប្រើ](https://github.com/insin/nwb/blob/master/docs/guides/ReactApps.md#developing-react-apps-with-nwb) សម្រាប់បង្កើត React apps ផងដែរ។ +======= +- **[Nx](https://nx.dev/react)** is a toolkit for full-stack monorepo development, with built-in support for React, Next.js, [Express](https://expressjs.com/), and more. + +- **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes/react/). +>>>>>>> b0ccb47f33e52315b0ec65edb9a49dc4910dd99c - **[Parcel](https://parceljs.org/)** គឺលឿនណាស់, គឺជា zero configuration web application bundler ដែល [ធ្វើការជាមួយ React](https://parceljs.org/recipes.html#react)។ diff --git a/content/docs/design-principles.md b/content/docs/design-principles.md index 78a450159..97a6ce91f 100644 --- a/content/docs/design-principles.md +++ b/content/docs/design-principles.md @@ -92,7 +92,7 @@ There is an internal joke in the team that React should have been called "Schedu Providing a good developer experience is important to us. -For example, we maintain [React DevTools](https://github.com/facebook/react-devtools) which let you inspect the React component tree in Chrome and Firefox. We have heard that it brings a big productivity boost both to the Facebook engineers and to the community. +For example, we maintain [React DevTools](https://github.com/facebook/react/tree/main/packages/react-devtools) which let you inspect the React component tree in Chrome and Firefox. We have heard that it brings a big productivity boost both to the Facebook engineers and to the community. We also try to go an extra mile to provide helpful developer warnings. For example, React warns you in development if you nest tags in a way that the browser doesn't understand, or if you make a common typo in the API. Developer warnings and the related checks are the main reason why the development version of React is slower than the production version. diff --git a/content/docs/error-boundaries.md b/content/docs/error-boundaries.md index d8ff0314b..a3f4b61f0 100644 --- a/content/docs/error-boundaries.md +++ b/content/docs/error-boundaries.md @@ -62,16 +62,16 @@ Then you can use it as a regular component: Error boundaries work like a JavaScript `catch {}` block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application. -Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how catch {} block works in JavaScript. +Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how the `catch {}` block works in JavaScript. ## Live Demo {#live-demo} -Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16](/blog/2017/09/26/react-v16.0.html). +Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010). ## Where to Place Error Boundaries {#where-to-place-error-boundaries} -The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application. +The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like how server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application. ## New Behavior for Uncaught Errors {#new-behavior-for-uncaught-errors} @@ -97,7 +97,7 @@ You can also see the filenames and line numbers in the component stack trace. Th Error caught by Error Boundary component with line numbers -If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**. +If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/@babel/plugin-transform-react-jsx-source) manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**. > Note > @@ -130,7 +130,7 @@ Error boundaries **do not** catch errors inside event handlers. React doesn't need error boundaries to recover from errors in event handlers. Unlike the render method and lifecycle methods, the event handlers don't happen during rendering. So if they throw, React still knows what to display on the screen. -If you need to catch an error inside event handler, use the regular JavaScript `try` / `catch` statement: +If you need to catch an error inside an event handler, use the regular JavaScript `try` / `catch` statement: ```js{9-13,17-20} class MyComponent extends React.Component { diff --git a/content/docs/faq-ajax.md b/content/docs/faq-ajax.md index a5324b0d3..8d4e753fb 100644 --- a/content/docs/faq-ajax.md +++ b/content/docs/faq-ajax.md @@ -75,7 +75,7 @@ class MyComponent extends React.Component { return (
        {items.map(item => ( -
      • +
      • {item.name} {item.price}
        • ))} @@ -103,7 +103,7 @@ function MyComponent() { .then( (result) => { setIsLoaded(true); - setItems(result.items); + setItems(result); }, // Note: it's important to handle errors here // instead of a catch() block so that we don't swallow @@ -123,7 +123,7 @@ function MyComponent() { return (
          {items.map(item => ( -
        • +
        • {item.name} {item.price}
          • ))} diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md index f03b2ba76..807d5fc60 100644 --- a/content/docs/faq-functions.md +++ b/content/docs/faq-functions.md @@ -37,14 +37,13 @@ class Foo extends Component { } ``` -#### Class Properties (Stage 3 Proposal) {#class-properties-stage-3-proposal} +#### Class Properties (ES2022) {#class-properties-es2022} ```jsx class Foo extends Component { - // Note: this syntax is experimental and not standardized yet. handleClick = () => { console.log('Click happened'); - } + }; render() { return ; } @@ -152,7 +151,6 @@ const A = 65 // ASCII character code class Alphabet extends React.Component { constructor(props) { super(props); - this.handleClick = this.handleClick.bind(this); this.state = { justClicked: null, letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i)) @@ -290,9 +288,6 @@ class Searchbox extends React.Component { } handleChange(e) { - // React pools events, so we read the value before debounce. - // Alternately we could call `event.persist()` and pass the entire event. - // For more info see reactjs.org/docs/events.html#event-pooling this.emitChangeDebounced(e.target.value); } diff --git a/content/docs/faq-structure.md b/content/docs/faq-structure.md index 4241a04dd..361d681fb 100644 --- a/content/docs/faq-structure.md +++ b/content/docs/faq-structure.md @@ -12,7 +12,7 @@ React doesn't have opinions on how you put files into folders. That said there a #### Grouping by features or routes {#grouping-by-features-or-routes} -One common way to structure projects is locate CSS, JS, and tests together inside folders grouped by feature or route. +One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route. ``` common/ diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 7436c3b07..30936a0ec 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -42,10 +42,10 @@ CSS classes are generally better for performance than inline styles. ### What is CSS-in-JS? {#what-is-css-in-js} -"CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files. Read a comparison of CSS-in-JS libraries [here](https://github.com/MicheleBertoli/css-in-js). +"CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files. _Note that this functionality is not a part of React, but provided by third-party libraries._ React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate `*.css` file as usual and refer to them using [`className`](/docs/dom-elements.html#classname). ### Can I do animations in React? {#can-i-do-animations-in-react} -React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion) or [React Spring](https://github.com/react-spring/react-spring), for example. +React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/), [React Motion](https://github.com/chenglou/react-motion), [React Spring](https://github.com/react-spring/react-spring), or [Framer Motion](https://framer.com/motion), for example. diff --git a/content/docs/faq-versioning.md b/content/docs/faq-versioning.md index c32677eb7..d273b1b7c 100644 --- a/content/docs/faq-versioning.md +++ b/content/docs/faq-versioning.md @@ -22,7 +22,7 @@ Minor releases are the most common type of release. ### Breaking Changes {#breaking-changes} -Breaking changes are inconvenient for everyone, so we try to minimize the number of major releases – for example, React 15 was released in April 2016 and React 16 was released in September 2017; React 17 isn't expected until sometime in 2020. +Breaking changes are inconvenient for everyone, so we try to minimize the number of major releases – for example, React 15 was released in April 2016 and React 16 was released in September 2017, and React 17 was released in October 2020. Instead, we release new features in minor versions. That means that minor releases are often more interesting and compelling than majors, despite their unassuming name. diff --git a/content/docs/forms.md b/content/docs/forms.md index e5fba6af3..114efe2ec 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -9,7 +9,21 @@ redirect_from: - "docs/forms-zh-CN.html" --- +<<<<<<< HEAD HTML form elements ធ្វើការខុសគ្នាបន្តិចពី DOM elements ផ្សេងៗនៅក្នុង React ពីព្រេាះ form elements ជាធម្មតាវារក្សារទុកនូវ internal state មួយចំនួន។ ឧទាហរណ៍ form នេះគឺជា plain HTML ទទួលយកឈ្មោះតែមួយ៖ +======= +> Try the new React documentation. +> +> These new documentation pages teach modern React and include live examples: +> +> - [``](https://beta.reactjs.org/reference/react-dom/components/input) +> - [`