Showing preview only (1,456K chars total). Download the full file or copy to clipboard to get everything.
Repository: preactjs/preact
Branch: main
Commit: 21dd6d04c1a9
Files: 295
Total size: 1.3 MB
Directory structure:
gitextract_o9kdplb8/
├── .editorconfig
├── .github/
│ ├── CODE_OF_CONDUCT.md
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows/
│ ├── benchmarks.yml
│ ├── build-test.yml
│ ├── ci.yml
│ ├── pr-reporter.yml
│ ├── release.yml
│ ├── run-bench.yml
│ ├── single-bench.yml
│ └── size.yml
├── .gitignore
├── .gitmodules
├── .husky/
│ └── pre-commit
├── .oxlintrc.json
├── .prettierignore
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── babel.config.js
├── biome.json
├── compat/
│ ├── LICENSE
│ ├── client.d.ts
│ ├── client.js
│ ├── client.mjs
│ ├── jsx-dev-runtime.js
│ ├── jsx-dev-runtime.mjs
│ ├── jsx-runtime.js
│ ├── jsx-runtime.mjs
│ ├── mangle.json
│ ├── package.json
│ ├── scheduler.d.ts
│ ├── scheduler.js
│ ├── scheduler.mjs
│ ├── server.browser.js
│ ├── server.d.ts
│ ├── server.js
│ ├── server.mjs
│ ├── src/
│ │ ├── Children.js
│ │ ├── PureComponent.js
│ │ ├── forwardRef.js
│ │ ├── hooks.js
│ │ ├── index.d.ts
│ │ ├── index.js
│ │ ├── internal.d.ts
│ │ ├── memo.js
│ │ ├── portals.js
│ │ ├── render.js
│ │ ├── suspense.d.ts
│ │ ├── suspense.js
│ │ └── util.js
│ ├── test/
│ │ ├── browser/
│ │ │ ├── Children.test.jsx
│ │ │ ├── PureComponent.test.jsx
│ │ │ ├── cloneElement.test.jsx
│ │ │ ├── compat.options.test.jsx
│ │ │ ├── component.test.jsx
│ │ │ ├── componentDidCatch.test.jsx
│ │ │ ├── context.test.jsx
│ │ │ ├── createElement.test.jsx
│ │ │ ├── createFactory.test.jsx
│ │ │ ├── events.test.jsx
│ │ │ ├── exports.test.js
│ │ │ ├── findDOMNode.test.jsx
│ │ │ ├── forwardRef.test.jsx
│ │ │ ├── hooks.test.jsx
│ │ │ ├── hydrate.test.jsx
│ │ │ ├── isFragment.test.js
│ │ │ ├── isMemo.test.jsx
│ │ │ ├── isValidElement.test.js
│ │ │ ├── memo.test.jsx
│ │ │ ├── portals.test.jsx
│ │ │ ├── render.test.jsx
│ │ │ ├── scheduler.test.js
│ │ │ ├── select.test.jsx
│ │ │ ├── suspense-hydration.test.jsx
│ │ │ ├── suspense-utils.js
│ │ │ ├── suspense.test.jsx
│ │ │ ├── svg.test.jsx
│ │ │ ├── testUtils.js
│ │ │ ├── textarea.test.jsx
│ │ │ ├── unmountComponentAtNode.test.jsx
│ │ │ ├── unstable_batchedUpdates.test.js
│ │ │ └── useSyncExternalStore.test.jsx
│ │ └── ts/
│ │ ├── forward-ref.tsx
│ │ ├── index.tsx
│ │ ├── lazy.tsx
│ │ ├── memo.tsx
│ │ ├── react-default.tsx
│ │ ├── react-star.tsx
│ │ ├── scheduler.ts
│ │ ├── suspense.tsx
│ │ ├── tsconfig.json
│ │ └── utils.ts
│ ├── test-utils.js
│ └── test-utils.mjs
├── config/
│ └── compat-entries.js
├── debug/
│ ├── LICENSE
│ ├── mangle.json
│ ├── package.json
│ ├── src/
│ │ ├── check-props.js
│ │ ├── component-stack.js
│ │ ├── constants.js
│ │ ├── debug.js
│ │ ├── index.d.ts
│ │ ├── index.js
│ │ ├── internal.d.ts
│ │ └── util.js
│ └── test/
│ └── browser/
│ ├── component-stack-2.test.jsx
│ ├── component-stack.test.jsx
│ ├── debug-compat.test.jsx
│ ├── debug-hooks.test.jsx
│ ├── debug-suspense.test.jsx
│ ├── debug.options.test.jsx
│ ├── debug.test.jsx
│ ├── fakeDevTools.js
│ ├── prop-types.test.js
│ ├── serializeVNode.test.jsx
│ └── validateHookArgs.test.jsx
├── demo/
│ ├── contenteditable.jsx
│ ├── context.jsx
│ ├── devtools.jsx
│ ├── fragments.jsx
│ ├── index.html
│ ├── index.jsx
│ ├── key_bug.jsx
│ ├── list.jsx
│ ├── logger.jsx
│ ├── mobx.jsx
│ ├── nested-suspense/
│ │ ├── addnewcomponent.jsx
│ │ ├── component-container.jsx
│ │ ├── dropzone.jsx
│ │ ├── editor.jsx
│ │ ├── index.jsx
│ │ └── subcomponent.jsx
│ ├── old.js.bak
│ ├── package.json
│ ├── people/
│ │ ├── Readme.md
│ │ ├── index.tsx
│ │ ├── profile.tsx
│ │ ├── router.tsx
│ │ ├── store.ts
│ │ └── styles/
│ │ ├── animations.scss
│ │ ├── app.scss
│ │ ├── avatar.scss
│ │ ├── button.scss
│ │ ├── index.scss
│ │ └── profile.scss
│ ├── preact.jsx
│ ├── profiler.jsx
│ ├── pythagoras/
│ │ ├── index.jsx
│ │ └── pythagoras.jsx
│ ├── redux-toolkit.jsx
│ ├── redux.jsx
│ ├── reduxUpdate.jsx
│ ├── reorder.jsx
│ ├── spiral.jsx
│ ├── stateOrderBug.jsx
│ ├── style.css
│ ├── style.scss
│ ├── styled-components.jsx
│ ├── suspense-router/
│ │ ├── bye.jsx
│ │ ├── hello.jsx
│ │ ├── index.jsx
│ │ └── simple-router.jsx
│ ├── suspense.jsx
│ ├── textFields.jsx
│ ├── todo.jsx
│ ├── tsconfig.json
│ ├── vite.config.js
│ └── zustand.jsx
├── devtools/
│ ├── LICENSE
│ ├── mangle.json
│ ├── package.json
│ ├── src/
│ │ ├── devtools.js
│ │ ├── index.d.ts
│ │ └── index.js
│ └── test/
│ └── browser/
│ └── addHookName.test.jsx
├── hooks/
│ ├── LICENSE
│ ├── mangle.json
│ ├── package.json
│ ├── src/
│ │ ├── index.d.ts
│ │ ├── index.js
│ │ └── internal.d.ts
│ └── test/
│ ├── _util/
│ │ └── useEffectUtil.js
│ └── browser/
│ ├── combinations.test.jsx
│ ├── componentDidCatch.test.jsx
│ ├── errorBoundary.test.jsx
│ ├── hooks.options.test.jsx
│ ├── useCallback.test.jsx
│ ├── useContext.test.jsx
│ ├── useDebugValue.test.jsx
│ ├── useEffect.test.jsx
│ ├── useEffectAssertions.jsx
│ ├── useId.test.jsx
│ ├── useImperativeHandle.test.jsx
│ ├── useLayoutEffect.test.jsx
│ ├── useMemo.test.jsx
│ ├── useReducer.test.jsx
│ ├── useRef.test.jsx
│ └── useState.test.jsx
├── jsconfig-lint.json
├── jsconfig.json
├── jsx-runtime/
│ ├── LICENSE
│ ├── mangle.json
│ ├── package.json
│ ├── src/
│ │ ├── index.d.ts
│ │ ├── index.js
│ │ └── utils.js
│ └── test/
│ └── browser/
│ └── jsx-runtime.test.js
├── mangle.json
├── package.json
├── scripts/
│ └── release/
│ ├── create-gh-release.js
│ ├── publish.mjs
│ └── upload-gh-asset.js
├── src/
│ ├── clone-element.js
│ ├── component.js
│ ├── constants.js
│ ├── create-context.js
│ ├── create-element.js
│ ├── diff/
│ │ ├── catch-error.js
│ │ ├── children.js
│ │ ├── index.js
│ │ └── props.js
│ ├── dom.d.ts
│ ├── index.d.ts
│ ├── index.js
│ ├── internal.d.ts
│ ├── jsx.d.ts
│ ├── options.js
│ ├── render.js
│ └── util.js
├── test/
│ ├── _util/
│ │ ├── dom.js
│ │ ├── helpers.jsx
│ │ ├── logCall.js
│ │ └── optionSpies.js
│ ├── browser/
│ │ ├── cloneElement.test.jsx
│ │ ├── components.test.jsx
│ │ ├── context.test.jsx
│ │ ├── createContext.test.jsx
│ │ ├── customBuiltInElements.test.jsx
│ │ ├── events.test.jsx
│ │ ├── focus.test.jsx
│ │ ├── fragments.test.jsx
│ │ ├── getDomSibling.test.jsx
│ │ ├── hydrate.test.jsx
│ │ ├── isValidElement.test.js
│ │ ├── keys.test.jsx
│ │ ├── lifecycles/
│ │ │ ├── componentDidCatch.test.jsx
│ │ │ ├── componentDidMount.test.jsx
│ │ │ ├── componentDidUpdate.test.jsx
│ │ │ ├── componentWillMount.test.jsx
│ │ │ ├── componentWillReceiveProps.test.jsx
│ │ │ ├── componentWillUnmount.test.jsx
│ │ │ ├── componentWillUpdate.test.jsx
│ │ │ ├── getDerivedStateFromError.test.jsx
│ │ │ ├── getDerivedStateFromProps.test.jsx
│ │ │ ├── getSnapshotBeforeUpdate.test.jsx
│ │ │ ├── lifecycle.test.jsx
│ │ │ └── shouldComponentUpdate.test.jsx
│ │ ├── mathml.test.jsx
│ │ ├── placeholders.test.jsx
│ │ ├── refs.test.jsx
│ │ ├── render.test.jsx
│ │ ├── select.test.jsx
│ │ ├── spec.test.jsx
│ │ ├── style.test.jsx
│ │ ├── svg.test.jsx
│ │ └── toChildArray.test.jsx
│ ├── fixtures/
│ │ └── preact.js
│ ├── node/
│ │ └── index.test.js
│ ├── shared/
│ │ ├── createContext.test.jsx
│ │ ├── createElement.test.jsx
│ │ ├── exports.test.js
│ │ ├── isValidElement.test.js
│ │ └── isValidElementTests.jsx
│ └── ts/
│ ├── Component.test.tsx
│ ├── VNode.test.tsx
│ ├── custom-elements.tsx
│ ├── dom-attributes.test-d.tsx
│ ├── hoc.test.tsx
│ ├── jsx-namespace.test-d.tsx
│ ├── package.json
│ ├── preact-global.test-d.tsx
│ ├── preact.tsx
│ ├── refs.tsx
│ └── tsconfig.json
├── test-utils/
│ ├── package.json
│ ├── src/
│ │ ├── index.d.ts
│ │ └── index.js
│ └── test/
│ └── shared/
│ ├── act.test.jsx
│ └── rerender.test.jsx
├── types/
│ └── weak-key.d.ts
├── vitest.config.mjs
└── vitest.setup.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
indent_style = tab
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[{*.json,.*rc,*.yml}]
indent_style = space
indent_size = 2
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .github/CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hello@preactjs.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''
---
- [ ] Check if updating to the latest Preact version resolves the issue
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
If possible, please provide a link to a StackBlitz/CodeSandbox/Codepen project or a GitHub repository that demonstrates the issue. You can use the following template on StackBlitz to get started: https://stackblitz.com/edit/create-preact-starter
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. See error
**Expected behavior**
What should have happened when following the steps above?
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: feature request
assignees: ''
---
**Describe the feature you'd love to see**
A clear and concise description of what you'd love to see added to Preact.
**Additional context (optional)**
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/workflows/benchmarks.yml
================================================
name: Benchmarks
on:
workflow_dispatch:
workflow_call:
jobs:
prepare:
name: Prepare environment
runs-on: ubuntu-latest
timeout-minutes: 5
steps:
- name: Download locally built preact package
uses: actions/download-artifact@v4
with:
name: npm-package
- run: mv preact.tgz preact-local.tgz
- name: Download base package
uses: andrewiggins/download-base-artifact@v3
with:
artifact: npm-package
workflow: ci.yml
required: true
- run: mv preact.tgz preact-main.tgz
- name: Upload locally build & base preact package
uses: actions/upload-artifact@v4
with:
name: bench-environment
path: |
preact-local.tgz
preact-main.tgz
bench_todo:
name: Bench todo
uses: ./.github/workflows/run-bench.yml
needs: prepare
with:
benchmark: todo/todo
timeout: 10
bench_text_update:
name: Bench text-update
uses: ./.github/workflows/run-bench.yml
needs: prepare
with:
benchmark: text-update/text-update
timeout: 10
bench_many_updates:
name: Bench many-updates
uses: ./.github/workflows/run-bench.yml
needs: prepare
with:
benchmark: many-updates/many-updates
timeout: 10
bench_replace1k:
name: Bench replace1k
uses: ./.github/workflows/run-bench.yml
needs: prepare
with:
benchmark: table-app/replace1k
bench_update10th1k:
name: Bench 03_update10th1k_x16
uses: ./.github/workflows/run-bench.yml
needs: prepare
with:
benchmark: table-app/update10th1k
bench_create10k:
name: Bench create10k
uses: ./.github/workflows/run-bench.yml
needs: prepare
with:
benchmark: table-app/create10k
bench_hydrate1k:
name: Bench hydrate1k
uses: ./.github/workflows/run-bench.yml
needs: prepare
with:
benchmark: table-app/hydrate1k
bench_filter_list:
name: Bench filter-list
uses: ./.github/workflows/run-bench.yml
needs: prepare
with:
benchmark: filter-list/filter-list
timeout: 10
================================================
FILE: .github/workflows/build-test.yml
================================================
name: Build & Test
on:
workflow_dispatch:
workflow_call:
inputs:
ref:
description: 'Branch or tag ref to check out'
type: string
required: false
default: ''
artifact_name:
description: 'Name of the artifact to upload'
type: string
required: false
default: 'npm-package'
jobs:
build_test:
name: Build & Test
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
ref: ${{ inputs.ref || '' }}
- uses: actions/setup-node@v4
with:
node-version-file: 'package.json'
cache: 'npm'
cache-dependency-path: '**/package-lock.json'
- run: npm ci
- name: test
env:
CI: true
COVERAGE: true
FLAKEY: false
# Not using `npm test` since it rebuilds source which npm ci has already done
run: npm run lint && npm run test:unit
- name: Coveralls GitHub Action
uses: coverallsapp/github-action@v2.3.0
timeout-minutes: 2
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
fail-on-error: false
- name: Package
# Use --ignore-scripts here to avoid re-building again before pack
run: |
npm pack --ignore-scripts
mv preact-*.tgz preact.tgz
- name: Upload npm package
uses: actions/upload-artifact@v4
with:
name: ${{ inputs.artifact_name || 'npm-package' }}
path: preact.tgz
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on:
workflow_dispatch:
pull_request:
branches:
- '**'
push:
branches:
- main
- restructure
- v11
jobs:
filter_jobs:
name: Filter jobs
runs-on: ubuntu-latest
outputs:
jsChanged: ${{ steps.filter.outputs.jsChanged }}
steps:
- uses: actions/checkout@v4
- uses: dorny/paths-filter@v3
id: filter
with:
# Should be kept in sync with the filter in the PR Reporter workflow
predicate-quantifier: 'every'
filters: |
jsChanged:
- '**/src/**/*.js'
- '!devtools/src/devtools.js'
compressed_size:
name: Compressed Size
needs: filter_jobs
if: ${{ needs.filter_jobs.outputs.jsChanged == 'true' }}
uses: ./.github/workflows/size.yml
build_test:
name: Build & Test
needs: filter_jobs
uses: ./.github/workflows/build-test.yml
benchmarks:
name: Benchmarks
needs: build_test
if: ${{ needs.filter_jobs.outputs.jsChanged == 'true' }}
uses: ./.github/workflows/benchmarks.yml
================================================
FILE: .github/workflows/pr-reporter.yml
================================================
name: Report Results to PR
on:
# The pull_request event can't write comments for PRs from forks so using this
# workflow_run workflow as a workaround
workflow_run:
workflows: ['CI']
types:
- completed
- requested
jobs:
filter_jobs:
name: Filter jobs
runs-on: ubuntu-latest
if: |
github.event.workflow_run.event == 'pull_request'
outputs:
jsChanged: ${{ steps.filter.outputs.jsChanged }}
steps:
- uses: actions/checkout@v4
# Warning: This is kinda gnarly and weird! GitHub doesn't expose the `pull_request`
# data if the PR is from a fork, nor does it let you access that data via their API
# (by querying for PRs associated with the commit or querying the commit itself, both
# come up empty for forked commits). As such, to get the base SHA of the PR we need to
# query for all PRs on the repo and match the owner+branch to find the right one and
# then extract the base SHA from that.
#
# I see no reason why GitHub shouldn't expose this, it's just an SHA, branch name, and
# URL, but they don't so we're doing it this way. Hopefully we can remove this one day.
- name: Get PR Base SHA
id: get_pr_base_sha
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
FORK_OWNER: ${{ github.event.workflow_run.head_repository.owner.login }}
FORK_BRANCH: ${{ github.event.workflow_run.head_branch }}
run: |
set -euo pipefail
PR_JSON=$(gh api "repos/preactjs/preact/pulls?state=all&head=$FORK_OWNER:$FORK_BRANCH")
BASE_SHA=$(jq -r '.[0].base.sha' <<< "$PR_JSON")
echo "base_sha=$BASE_SHA" >> "$GITHUB_OUTPUT"
- uses: dorny/paths-filter@v3
id: filter
with:
# As this Workflow is triggered by a `workflow_run` event, the filter action
# can't automatically assume we're working with PR data. As such, we need to
# wire it up manually with a base (merge target) and ref (source branch).
base: ${{ steps.get_pr_base_sha.outputs.base_sha }}
ref: ${{ github.event.workflow_run.head_sha }}
# Should be kept in sync with the filter in the CI workflow
predicate-quantifier: 'every'
filters: |
jsChanged:
- '**/src/**/*.js'
- '!devtools/src/devtools.js'
report_running:
name: Report benchmarks are in-progress
needs: filter_jobs
runs-on: ubuntu-latest
# Only add the "benchmarks are running" text when a workflow_run is
# requested (a.k.a starting)
if: |
needs.filter_jobs.outputs.jsChanged == 'true' &&
github.event.action == 'requested'
steps:
- name: Report Tachometer Running
uses: andrewiggins/tachometer-reporter-action@v2
with:
# Set initialize to true so this action just creates the comment or
# adds the "benchmarks are running" text
initialize: true
report_results:
name: Report benchmark results
needs: filter_jobs
runs-on: ubuntu-latest
# Only run this job if the event action was "completed" and the triggering
# workflow_run was successful
if: |
needs.filter_jobs.outputs.jsChanged == 'true' &&
github.event.action == 'completed' &&
github.event.workflow_run.conclusion == 'success'
steps:
# Download the artifact from the triggering workflow that contains the
# Tachometer results to report
- uses: dawidd6/action-download-artifact@v2
with:
workflow: ${{ github.event.workflow.id }}
run_id: ${{ github.event.workflow_run.id }}
name_is_regexp: true
name: results-*
path: results
# Create/update the comment with the latest results
- name: Report Tachometer Results
uses: andrewiggins/tachometer-reporter-action@v2
with:
path: results/**/*.json
base-bench-name: preact-main
pr-bench-name: preact-local
summarize: 'duration, usedJSHeapSize'
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on: create
jobs:
build:
if: github.ref_type == 'tag'
uses: preactjs/preact/.github/workflows/build-test.yml@main
release:
runs-on: ubuntu-latest
needs: build
steps:
- uses: actions/checkout@v4
- uses: actions/download-artifact@v4
with:
name: npm-package
- name: Create draft release
id: create-release
uses: actions/github-script@v6
with:
script: |
const script = require('./scripts/release/create-gh-release.js')
return script({ github, context })
- name: Upload release artifact
uses: actions/github-script@v6
with:
script: |
const script = require('./scripts/release/upload-gh-asset.js')
return script({ require, github, context, glob, release: ${{ steps.create-release.outputs.result }} })
================================================
FILE: .github/workflows/run-bench.yml
================================================
name: Benchmark Worker
# Expectations:
#
# This workflow expects calling workflows to have uploaded an artifact named
# "bench-environment" that contains any built artifacts required to run the
# benchmark. This typically is the dist/ folder that running `npm run build`
# produces and/or a tarball of a previous build to bench the local build against
on:
workflow_call:
inputs:
benchmark:
description: 'The name of the benchmark to run. Should be name of an HTML file without the .html extension'
type: string
required: true
trace:
description: 'Whether to capture browser traces for this benchmark run'
type: boolean
required: false
default: false
timeout:
description: 'How many minutes to give the benchmark to run before timing out and failing'
type: number
required: false
default: 20
jobs:
run_bench:
name: Bench ${{ inputs.benchmark }}
runs-on: ubuntu-latest
timeout-minutes: ${{ inputs.timeout }}
steps:
- uses: actions/checkout@v4
with:
submodules: 'recursive'
- uses: actions/setup-node@v4
with:
node-version-file: 'package.json'
cache: 'npm'
cache-dependency-path: '**/package-lock.json'
# Setup pnpm
- name: Install pnpm
uses: pnpm/action-setup@v3
with:
version: 8
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache@v4
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
# Install benchmark dependencies
- uses: actions/download-artifact@v4
with:
name: bench-environment
- name: Move tarballs from env to correct location
run: |
ls -al
mv preact-local.tgz benchmarks/dependencies/preact/local-pinned/preact-local-pinned.tgz
ls -al benchmarks/dependencies/preact/local-pinned
mv preact-main.tgz benchmarks/dependencies/preact/main/preact-main.tgz
ls -al benchmarks/dependencies/preact/main
- name: Install deps
working-directory: benchmarks
# Set the CHROMEDRIVER_FILEPATH so the chromedriver npm package uses the
# correct binary when its installed
run: |
export CHROMEDRIVER_FILEPATH=$(which chromedriver)
pnpm install
# Install local dependencies with --no-frozen-lockfile to ensure local tarballs
# are installed regardless of if they match the integrity hash stored in the lockfile
pnpm install --no-frozen-lockfile --filter ./dependencies
# Run benchmark
- name: Run benchmark
working-directory: benchmarks
run: |
export CHROMEDRIVER_FILEPATH=$(which chromedriver)
pnpm run bench apps/${{ inputs.benchmark }}.html -d preact@local-pinned -d preact@main --trace=${{ inputs.trace }}
# Prepare output
- name: Anaylze logs if present
working-directory: benchmarks
run: '[ -d out/logs ] && pnpm run analyze ${{ inputs.benchmark }} || echo "No logs to analyze"'
- name: Tar logs if present
working-directory: benchmarks
run: |
if [ -d out/logs ]; then
LOGS_FILE=out/${{ inputs.benchmark }}_logs.tgz
mkdir -p $(dirname $LOGS_FILE)
tar -zcvf $LOGS_FILE out/logs
else
echo "No logs found"
fi
# Upload results and logs
- name: Calculate log artifact name
id: log-artifact-name
run: |
NAME=$(echo "${{ inputs.benchmark }}" | sed -r 's/[\/]+/_/g')
echo "clean_name=$NAME" >> $GITHUB_OUTPUT
echo "artifact_name=logs_$NAME" >> $GITHUB_OUTPUT
- name: Upload results
uses: actions/upload-artifact@v4
with:
name: results-${{ steps.log-artifact-name.outputs.clean_name }}
path: benchmarks/out/results/${{ inputs.benchmark }}.json
- name: Upload logs
uses: actions/upload-artifact@v4
with:
name: ${{ steps.log-artifact-name.outputs.artifact_name }}
path: benchmarks/out/${{ inputs.benchmark }}_logs.tgz
if-no-files-found: ignore
================================================
FILE: .github/workflows/single-bench.yml
================================================
name: Benchmark Debug
on:
workflow_dispatch:
inputs:
benchmark:
description: 'Which benchmark to run'
type: choice
options:
- table-app/replace1k
- table-app/update10th1k
- table-app/create10k
- table-app/hydrate1k
- filter_list/filter-list
- many-updates/many-updates
- text-update/text-update
- todo/todo
required: true
base:
description: 'The branch name, tag, or commit sha of the version of preact to benchmark against.'
type: string
default: main
required: false
trace:
description: 'Whether to capture browser traces for this benchmark run'
type: boolean
default: true
required: false
# A bug in GitHub actions prevents us from passing numbers (as either
# number or string type) to called workflows. So disabling this for now.
# See: https://github.com/orgs/community/discussions/67182
#
# timeout:
# description: 'How many minutes to give the benchmark to run before timing out and failing'
# type: number
# default: 20
# required: false
jobs:
build_local:
name: Build local package
uses: ./.github/workflows/ci.yml
build_base:
name: Build base package
uses: ./.github/workflows/ci.yml
with:
ref: ${{ inputs.base }}
artifact_name: base-npm-package
prepare:
name: Prepare environment
runs-on: ubuntu-latest
needs:
- build_local
- build_base
timeout-minutes: 5
steps:
- name: Download locally built preact package
uses: actions/download-artifact@v4
with:
name: npm-package
- run: mv preact.tgz preact-local.tgz
- name: Clear working directory
run: |
ls -al
rm -rf *
echo "===================="
ls -al
- name: Download base package
uses: actions/download-artifact@v4
with:
name: base-npm-package
- run: mv preact.tgz preact-main.tgz
- name: Upload locally built & base preact package
uses: actions/upload-artifact@v4
with:
name: bench-environment
path: |
preact-local.tgz
preact-main.tgz
benchmark:
name: Bench ${{ inputs.benchmark }}
uses: ./.github/workflows/run-bench.yml
needs: prepare
with:
benchmark: ${{ inputs.benchmark }}
trace: ${{ inputs.trace }}
# timeout: ${{ inputs.timeout }}
================================================
FILE: .github/workflows/size.yml
================================================
name: Compressed Size
on:
workflow_call:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version-file: 'package.json'
cache: 'npm'
cache-dependency-path: '**/package-lock.json'
- uses: preactjs/compressed-size-action@v2
with:
repo-token: '${{ secrets.GITHUB_TOKEN }}'
# Our `prepare` script already builds the app post-install,
# building it again would be redundant
build-script: 'npm run --if-present noop'
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
npm-debug.log
dist
*/package-lock.json
yarn.lock
.vscode
.idea
test/ts/**/*.js
coverage
*.sw[op]
*.log
package/
preact-*.tgz
preact.tgz
*.local.*
================================================
FILE: .gitmodules
================================================
[submodule "benchmarks"]
path = benchmarks
url = https://github.com/preactjs/benchmarks
================================================
FILE: .husky/pre-commit
================================================
npx nano-staged
================================================
FILE: .oxlintrc.json
================================================
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"ignorePatterns": [
"**/dist/**",
"benchmarks/**"
],
"rules": {
"camelcase": [
1,
{
"allow": ["__test__*", "unstable_*", "UNSAFE_*"]
}
],
"no-unused-vars": [
2,
{
"args": "none",
"caughtErrors": "none",
"varsIgnorePattern": "^h|React|createElement|Fragment$"
}
],
"typescript/no-namespace": 0,
"no-constant-binary-expression": 0,
"no-useless-catch": 0,
"no-empty-pattern": 0,
"prefer-rest-params": 0,
"prefer-spread": 0,
"no-cond-assign": 0,
"react/jsx-no-bind": 0,
"react/no-danger": 0,
"react/no-danger-with-children": 0,
"react/prefer-stateless-function": 0,
"react/sort-comp": 0,
"jest/valid-expect": 0,
"jest/no-disabled-tests": 0,
"jest/no-test-callback": 0,
"jest/expect-expect": 0,
"jest/no-standalone-expect": 0,
"jest/no-export": 0,
"react/no-find-dom-node": 0,
"react/no-direct-mutation-state": 0,
"react/no-children-prop": 0,
"react/jsx-key": 0,
"react/no-string-refs": 0,
"react/require-render-return": 0,
"unicorn/no-new-array": 0,
"unicorn/prefer-string-starts-ends-with": 0
}
}
================================================
FILE: .prettierignore
================================================
.DS_Store
node_modules
npm-debug.log
dist
*/package-lock.json
yarn.lock
.vscode
.idea
test/ts/**/*.js
coverage
*.sw[op]
*.log
package/
preact-*.tgz
preact.tgz
package-lock.json
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
This document is intended for developers interested in making contributions to Preact and documents our internal processes like releasing a new version.
## Getting Started
These steps will help you set up your development environment. That includes all dependencies we use to build Preact and developer tooling like git commit hooks.
1. Clone the git repository: `git clone git@github.com:preactjs/preact.git`
2. Go into the cloned folder: `cd preact/`
3. Install all dependencies: `npm install`
## The Repo Structure
This repository contains Preact itself, as well as several addons like the debugging package for example. This is reflected in the directory structure of this repository. Each package has a `src/` folder where the source code can be found, a `test` folder for all sorts of tests that check if the code in `src/` is correct, and a `dist/` folder where you can find the bundled artifacts. Note that the `dist/` folder may not be present initially. It will be created as soon as you run any of the build scripts inside `package.json`. More on that later ;)
A quick overview of our repository:
```bash
# The repo root (folder where you cloned the repo into)
/
src/ # Source code of our core
test/ # Unit tests for core
dist/ # Build artifacts for publishing on npm (may not be present)
# Sub-package, can be imported via `preact/compat` by users.
# Compat stands for react-compatibility layer which tries to mirror the
# react API as close as possible (mostly legacy APIs)
compat/
src/ # Source code of the compat addon
test/ # Tests related to the compat addon
dist/ # Build artifacts for publishing on npm (may not be present)
# Sub-package, can be imported via `preact/hooks` by users.
# The hooks API is an effect based API to deal with component lifecycles.
# It's similar to hooks in React
hooks/
src/ # Source code of the hooks addon
test/ # Tests related to the hooks addon
dist/ # Build artifacts for publishing on npm (may not be present)
# Sub-package, can be imported via `preact/debug` by users.
# Includes debugging warnings and error messages for common mistakes found
# in Preact applications. Also hosts the devtools bridge
debug/
src/ # Source code of the debug addon
test/ # Tests related to the debug addon
dist/ # Build artifacts for publishing on npm (may not be present)
# Sub-package, can be imported via `preact/test-utils` by users.
# Provides helpers to make testing Preact applications easier
test-utils/
src/ # Source code of the test-utils addon
test/ # Tests related to the test-utils addon
dist/ # Build artifacts for publishing on npm (may not be present)
# A demo application that we use to debug tricky errors and play with new
# features.
demo/
# Contains build scripts and dependencies for development
package.json
```
_Note: The code for rendering Preact on the server lives in another repo and is a completely separate npm package. It can be found here: [https://github.com/preactjs/preact-render-to-string](https://github.com/preactjs/preact-render-to-string)_
### What does `mangle.json` do?
It's a special file that can be used to specify how `terser` (previously known as `uglify`) will minify variable names. Because each sub-package has its own distribution files we need to ensure that the variable names stay consistent across bundles.
## What does `options.js` do?
Unique to Preact we do support several ways to hook into our renderer. All our addons use that to inject code at different stages of a render process. They are documented in our typings in `internal.d.ts`. The core itself doesn't make use of them, which is why the file only contains an empty `object`.
## Important Branches
We have a couple of important branches to be aware of:
- `main` - This is the main development branch and represents the upcoming v11 release line.
- `v10.x` - This branch represents the current stable release line, v10.
As we have yet to release v11, contributors are welcome to use either branch to build upon. We will try to port changes between the branches when possible, to keep them in sync, but if you're feeling generous, we'd love if you'd submit PRs to both branches!
## Creating your first Pull-Request
We try to make it as easy as possible to contribute to Preact and make heavy use of GitHub's "Draft PR" feature which tags Pull-Requests (short = PR) as work in progress. PRs tend to be published as soon as there is an idea that the developer deems worthwhile to include into Preact and has written some rough code. The PR doesn't have to be perfect or anything really ;)
Once a PR or a Draft PR has been created our community typically joins the discussion about the proposed change. Sometimes that includes ideas for test cases or even different ways to go about implementing a feature. Often this also includes ideas on how to make the code smaller. We usually refer to the latter as "code-golfing" or just "golfing".
When everything is good to go someone will approve the PR and the changes will be merged into the `main` or `v10.x` branches and we usually cut a release a few days/ a week later.
_The big takeaway for you here is, that we will guide you along the way. We're here to help to make a PR ready for approval!_
The short summary is:
1. Make changes and submit a PR
2. Modify change according to feedback (if there is any)
3. PR will be merged into `main` or `v10.x`
4. A new release will be cut (every 2-3 weeks).
## Commonly used scripts for contributions
Scripts can be executed via `npm run [script]`.
- `build` - compiles all packages ready for publishing to npm
- `build:core` - builds just Preact itself
- `build:debug` - builds the debug addon only
- `build:devtools` - builds the devtools addon only
- `build:hooks` - builds the hook addon only
- `build:test-utils` - builds the test-utils addon only
- `build:compat` - builds the compat addon only
- `build:jsx` - builds the JSX runtime addon only
- `test` - Run all tests (linting, TypeScript definitions, unit/integration tests)
- `test:ts` - Run all tests for TypeScript definitions
- `test:vitest` - Run all unit/integration tests.
- `test:vitest:watch` - Same as above, but it will automatically re-run the test suite if a code change was detected.
But to be fair, the ones we mostly use locally are `build` and `test:vitest:watch`. The other ones are mainly used on our CI pipeline.
_Note: Both `test:vitest` and `test:vitest:watch` listen to the environment variable `COVERAGE=true`. Disabling code coverage can significantly speed up the time it takes to complete the test suite._
_Note2: Individual tests can be executed by appending `.only`:_
```jsx
it.only('should test something', () => {
expect(1).to.equal(1);
});
```
## Common terminology and variable names
- `vnode` -> shorthand for `virtual-node` which is an object that specifies how a Component or DOM-node looks like
- `commit` -> A commit is the moment in time when you flush all changes to the DOM
- `c` -> The variable `c` always refers to a `component` instance throughout our code base.
- `diff/diffing` -> Diffing describes the process of comparing two "things". In our case we compare the previous `vnode` tree with the new one and apply the delta to the DOM.
- `root` -> The topmost node of a `vnode` tree
## Tips for getting to know the code base
- Check the JSDoc block right above the function definition to understand what it does. It contains a short description of each function argument and what it does.
- Check the callsites of a function to understand how it's used. Modern editors/IDEs allow you to quickly find those, or use the plain old search feature instead.
## Benchmarks
We have a benchmark suite that we use to measure the performance of Preact. Our benchmark suite lives in our [preactjs/benchmarks repository](https://github.com/preactjs/benchmarks), but is included here as Git submodule. To run the benchmarks, first ensure [PNPM](https://pnpm.io/installation) is installed on your system and initialize and setup the submodule (it uses `pnpm` as a package manager):
```bash
pnpm -v # Make sure pnpm is installed
git submodule update --init --recursive
cd benchmarks
pnpm i
```
Then you can run the benchmarks:
```bash
# In the benchmarks folder
pnpm run bench
```
Checkout the README in the benchmarks folder for more information on running benchmarks.
> **Note:** When switching branches, git submodules are not automatically updated to the commit of the new branch - it stays at the commit of the previous branch. This can be a feature! It allows you to work in different branches with the latest versions of the benchmarks - especially if you have made changes to the benchmarks.
>
> However if you want to switch branches and also update the benchmarks to the latest commit of the new branch, you can run `git submodule update --recursive` after switching branches, or run `git checkout --recurse-submodules` when checking out a new branch.
## FAQ
### Why does the JSDoc use TypeScript syntax to specify types?
Several members of the team are very fond of TypeScript and we wanted to leverage as many of its advantages, like improved autocompletion, for Preact. We even attempted to port Preact to TypeScript a few times, but we ran into many issues with the DOM typings. Those would force us to fill our codebase with many `any` castings, making our code very noisy.
Luckily TypeScript has a mode where it can somewhat reliably typecheck JavaScript code by reusing the types defined in JSDoc blocks. It's not perfect and it often has trouble inferring the correct types the further one strays away from the function arguments, but it's good enough that it helps us a lot with autocompletion. Another plus is that we can make sure that our TypeScript definitions are correct at the same time.
Check out the [official TypeScript documentation](https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html) for more information.
_Note that we have separate tests for our TypeScript definition files. We only use `ts-check` for local development and don't check it anywhere else like on the CI._
## How to create a good bug report
To be able to fix issues we need to see them on our machine. This is only possible when we can reproduce the error. The easiest way to do that is narrow down the problem to specific components or combination of them. This can be done by removing as much unrelated code as possible.
The perfect way to do that is to make a [codesandbox](https://codesandbox.io/). That way you can easily share the problematic code and ensure that others can see the same issue you are seeing.
For us a [codesandbox](https://codesandbox.io/) says more than a 1000 words :tada:
## I have more questions on how to contribute to Preact. How can I reach you?
We closely watch our issues and have a pretty active [Slack workspace](https://chat.preactjs.com/). Nearly all our communication happens via these two forms of communication.
## Releasing Preact (Maintainers only)
This guide is intended for core team members that have the necessary
rights to publish new releases on npm.
1. Make a PR where **only** the version number is incremented in `package.json` and everywhere else. A simple search and replace works. (note: We follow `SemVer` conventions)
2. Wait until the PR is approved and merged.
3. Switch back to the `main` branch and pull the merged PR
4. Create and push a tag for the new version you want to publish:
1. `git tag 10.0.0`
2. `git push --tags`
5. Wait for the Release workflow to complete
- It'll create a draft release and upload the built npm package as an asset to the release
6. [Fill in the release notes](#writing-release-notes) in GitHub and publish them
7. Run the publish script with the tag you created
1. `node ./scripts/release/publish.mjs 10.0.0`
2. Make sure you have 2FA enabled in npm, otherwise the above command will fail.
3. If you're doing a pre-release add `--npm-tag next` to the `publish.mjs` command to publish it under a different tag (default is `latest`)
8. Tweet it out
## Legacy Releases (8.x)
> **ATTENTION:** Make sure that you've cleared the project correctly
> when switching from a 10.x branch.
0. Run `rm -rf dist node_modules && npm i` to make sure to have the correct dependencies.
1. [Write the release notes](#writing-release-notes) and keep them as a draft in GitHub
1. I'd recommend writing them in an offline editor because each edit to a draft will change the URL in GitHub.
2. Make a PR where **only** the version number is incremented in `package.json` (note: We follow `SemVer` conventions)
3. Wait until the PR is approved and merged.
4. Switch back to the `main` branch and pull the merged PR
5. Run `npm run build && npm publish`
1. Make sure you have 2FA enabled in npm, otherwise the above command will fail.
2. If you're doing a pre-release add `--tag next` to the `npm publish` command to publish it under a different tag (default is `latest`)
6. Publish the release notes and create the correct git tag.
7. Tweet it out
## Writing release notes
The release notes have become a sort of tiny blog post about what's
happening in preact-land. The title usually has this format:
```txt
Version Name
```
Example:
```txt
10.0.0-beta.1 Los Compresseros
```
The name is optional, we just have fun finding creative names :wink:
To keep them interesting we try to be as
concise as possible and to just reflect where we are. There are some
rules we follow while writing them:
- Be nice, use a positive tone. Avoid negative words
- Show, don't just tell.
- Be honest.
- Don't write too much, keep it simple and short.
- Avoid making promises and don't overpromise. That leads to unhappy users
- Avoid framework comparisons if possible
- Highlight awesome community contributions (or great issue reports)
- If in doubt, praise the users.
After this section we typically follow with a changelog part that's
divided into 4 groups in order of importance for the user:
- Features
- Bug Fixes
- Typings
- Maintenance
We generate it via this handy cli program: [changelogged](https://github.com/marvinhagemeister/changelogged). It will collect and format
the descriptions of all PRs that have been merged between two tags.
The usual command is `changelogged 10.0.0-rc.2..HEAD` similar to how
you'd diff two points in time with git. This will get you 90% there,
but you still need to divide it into groups. It's also a good idea
to unify the formatting of the descriptions, so that they're easier
to read and don't look like a mess.
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2015-present Jason Miller
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
> [!NOTE]
> This is the branch for the upcoming release, for patches to v10 you need the [v10.x branch](https://github.com/preactjs/preact/tree/v10.x)
<p align="center">
<a href="https://preactjs.com" target="_blank">
</a>
</p>
<p align="center">Fast <b>4kB</b> alternative to React with the same modern API.</p>
**All the power of Virtual DOM components, without the overhead:**
- Familiar React API & patterns: ES6 Class, hooks, and Functional Components
- Extensive React compatibility via a simple [preact/compat] alias
- Everything you need: JSX, <abbr title="Virtual DOM">VDOM</abbr>, [DevTools], <abbr title="Hot Module Replacement">HMR</abbr>, <abbr title="Server-Side Rendering">SSR</abbr>.
- Highly optimized diff algorithm and seamless hydration from Server Side Rendering
- Supports all modern browsers
- Transparent asynchronous rendering with a pluggable scheduler
### 💁 More information at the [Preact Website ➞](https://preactjs.com)
<table border="0">
<tbody>
<tr>
<td>
[](https://www.npmjs.com/package/preact)
[](https://chat.preactjs.com)
[](#backers)
[](#sponsors)
[](https://coveralls.io/github/preactjs/preact)
[](https://unpkg.com/preact/dist/preact.min.js)
[](https://unpkg.com/preact/dist/preact.min.js)
</td>
</tr>
</tbody>
</table>
You can find some awesome libraries in the [awesome-preact list](https://github.com/preactjs/awesome-preact) :sunglasses:
---
## Getting Started
> 💁 _**Note:** You [don't need ES2015 to use Preact](https://github.com/developit/preact-in-es3)... but give it a try!_
#### Tutorial: Building UI with Preact
With Preact, you create user interfaces by assembling trees of components and elements. Components are functions or classes that return a description of what their tree should output. These descriptions are typically written in [JSX](https://react.dev/learn/writing-markup-with-jsx) (shown underneath), or [HTM](https://github.com/developit/htm) which leverages standard JavaScript Tagged Templates. Both syntaxes can express trees of elements with "props" (similar to HTML attributes) and children.
To get started using Preact, first look at the render() function. This function accepts a tree description and creates the structure described. Next, it appends this structure to a parent DOM element provided as the second argument. Future calls to render() will reuse the existing tree and update it in-place in the DOM. Internally, render() will calculate the difference from previous outputted structures in an attempt to perform as few DOM operations as possible.
```js
import { h, render } from 'preact';
// Tells babel to use h for JSX. It's better to configure this globally.
// See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage
// In tsconfig you can specify this with the jsxFactory
/** @jsx h */
// create our tree and append it to document.body:
render(
<main>
<h1>Hello</h1>
</main>,
document.body
);
// update the tree in-place:
render(
<main>
<h1>Hello World!</h1>
</main>,
document.body
);
// ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>
```
Hooray! render() has taken our structure and output a User Interface! This approach demonstrates a simple case, but would be difficult to use as an application grows in complexity. Each change would be forced to calculate the difference between the current and updated structure for the entire application. Components can help here – by dividing the User Interface into nested Components each can calculate their difference from their mounted point. Here's an example:
```js
import { render, h } from 'preact';
import { useState } from 'preact/hooks';
/** @jsx h */
const App = () => {
const [input, setInput] = useState('');
return (
<div>
<p>Do you agree to the statement: "Preact is awesome"?</p>
<input value={input} onInput={e => setInput(e.target.value)} />
</div>
);
};
render(<App />, document.body);
```
---
## Sponsors
Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor](https://opencollective.com/preact#sponsor)]
<a href="https://opencollective.com/preact/sponsor/0/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/1/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/2/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/3/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/4/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/4/avatar.svg"></a>
<a href="https://snyk.co/preact" target="_blank"><img src="https://res.cloudinary.com/snyk/image/upload/snyk-marketingui/brand-logos/wordmark-logo-color.svg" width="192" height="64"></a>
<a href="https://opencollective.com/preact/sponsor/5/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/6/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/7/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/8/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/9/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/9/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/10/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/10/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/11/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/11/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/12/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/12/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/13/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/13/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/14/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/14/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/15/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/15/avatar.svg"></a>
<a href="https://github.com/guardian" target="_blank"> <img src="https://github.com/guardian.png" width="64" height="64"> </a>
<a href="https://opencollective.com/preact/sponsor/16/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/16/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/17/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/17/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/18/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/18/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/19/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/19/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/20/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/20/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/21/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/21/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/22/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/22/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/23/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/23/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/24/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/24/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/25/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/25/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/26/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/26/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/27/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/27/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/28/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/28/avatar.svg"></a>
<a href="https://opencollective.com/preact/sponsor/29/website" target="_blank"><img src="https://opencollective.com/preact/sponsor/29/avatar.svg"></a>
## Backers
Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/preact#backer)]
<a href="https://opencollective.com/preact/backer/0/website" target="_blank"><img src="https://opencollective.com/preact/backer/0/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/1/website" target="_blank"><img src="https://opencollective.com/preact/backer/1/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/2/website" target="_blank"><img src="https://opencollective.com/preact/backer/2/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/3/website" target="_blank"><img src="https://opencollective.com/preact/backer/3/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/4/website" target="_blank"><img src="https://opencollective.com/preact/backer/4/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/5/website" target="_blank"><img src="https://opencollective.com/preact/backer/5/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/6/website" target="_blank"><img src="https://opencollective.com/preact/backer/6/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/7/website" target="_blank"><img src="https://opencollective.com/preact/backer/7/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/8/website" target="_blank"><img src="https://opencollective.com/preact/backer/8/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/9/website" target="_blank"><img src="https://opencollective.com/preact/backer/9/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/10/website" target="_blank"><img src="https://opencollective.com/preact/backer/10/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/11/website" target="_blank"><img src="https://opencollective.com/preact/backer/11/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/12/website" target="_blank"><img src="https://opencollective.com/preact/backer/12/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/13/website" target="_blank"><img src="https://opencollective.com/preact/backer/13/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/14/website" target="_blank"><img src="https://opencollective.com/preact/backer/14/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/15/website" target="_blank"><img src="https://opencollective.com/preact/backer/15/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/16/website" target="_blank"><img src="https://opencollective.com/preact/backer/16/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/17/website" target="_blank"><img src="https://opencollective.com/preact/backer/17/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/18/website" target="_blank"><img src="https://opencollective.com/preact/backer/18/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/19/website" target="_blank"><img src="https://opencollective.com/preact/backer/19/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/20/website" target="_blank"><img src="https://opencollective.com/preact/backer/20/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/21/website" target="_blank"><img src="https://opencollective.com/preact/backer/21/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/22/website" target="_blank"><img src="https://opencollective.com/preact/backer/22/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/23/website" target="_blank"><img src="https://opencollective.com/preact/backer/23/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/24/website" target="_blank"><img src="https://opencollective.com/preact/backer/24/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/25/website" target="_blank"><img src="https://opencollective.com/preact/backer/25/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/26/website" target="_blank"><img src="https://opencollective.com/preact/backer/26/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/27/website" target="_blank"><img src="https://opencollective.com/preact/backer/27/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/28/website" target="_blank"><img src="https://opencollective.com/preact/backer/28/avatar.svg"></a>
<a href="https://opencollective.com/preact/backer/29/website" target="_blank"><img src="https://opencollective.com/preact/backer/29/avatar.svg"></a>
---
## License
MIT
[](https://preactjs.com)
[preact/compat]: https://github.com/preactjs/preact/tree/main/compat
[hyperscript]: https://github.com/dominictarr/hyperscript
[DevTools]: https://github.com/preactjs/preact-devtools
================================================
FILE: babel.config.js
================================================
module.exports = function (api) {
api.cache(true);
const noModules = String(process.env.BABEL_NO_MODULES) === 'true';
const rename = {};
const mangle = require('./mangle.json');
for (let prop in mangle.props.props) {
let name = prop;
if (name[0] === '$') {
name = name.slice(1);
}
rename[name] = mangle.props.props[prop];
}
return {
presets: [
[
'@babel/preset-env',
{
loose: true,
// Don't transform modules when using esbuild
modules: noModules ? false : 'auto',
exclude: ['@babel/plugin-transform-typeof-symbol'],
targets: {
browsers: [
'chrome >= 40',
'safari >= 9',
'firefox >= 36',
'edge >= 12',
'not dead'
]
}
}
]
],
plugins: [
'@babel/plugin-transform-react-jsx',
['babel-plugin-transform-rename-properties', { rename }]
],
include: ['**/src/**/*.js', '**/test/**/*.js'],
overrides: [
{
test: /(component-stack|debug)\.test\.js$/,
plugins: ['@babel/plugin-transform-react-jsx-source']
}
]
};
};
================================================
FILE: biome.json
================================================
{
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "tab",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 80,
"attributePosition": "auto",
"includes": [
"**",
"!**/.DS_Store",
"!**/node_modules",
"!**/npm-debug.log",
"!**/dist",
"!**/*/package-lock.json",
"!**/yarn.lock",
"!**/.vscode",
"!**/.idea",
"!**/test/ts/**/*.js",
"!**/coverage",
"!**/*.sw\\[op\\]",
"!**/*.log",
"!**/package/",
"!**/preact-*.tgz",
"!**/preact.tgz",
"!**/package-lock.json"
]
},
"assist": { "actions": { "source": { "organizeImports": "on" } } },
"linter": { "enabled": true, "rules": { "recommended": true } },
"javascript": {
"formatter": {
"jsxQuoteStyle": "double",
"quoteProperties": "asNeeded",
"trailingCommas": "none",
"semicolons": "always",
"arrowParentheses": "asNeeded",
"bracketSpacing": true,
"bracketSameLine": false,
"quoteStyle": "single",
"attributePosition": "auto"
}
},
"overrides": [
{
"includes": ["**/*.json", "**/.*rc/**", "**/*.yml"],
"formatter": { "indentWidth": 2, "indentStyle": "space" }
}
]
}
================================================
FILE: compat/LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2015-present Jason Miller
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: compat/client.d.ts
================================================
import * as preact from '../src/index';
export function createRoot(container: preact.ContainerNode): {
render(children: preact.ComponentChild): void;
unmount(): void;
};
export function hydrateRoot(
container: preact.ContainerNode,
children: preact.ComponentChild
): ReturnType<typeof createRoot>;
================================================
FILE: compat/client.js
================================================
const { render, hydrate, unmountComponentAtNode } = require('preact/compat');
function createRoot(container) {
return {
// eslint-disable-next-line
render: function (children) {
render(children, container);
},
// eslint-disable-next-line
unmount: function () {
unmountComponentAtNode(container);
}
};
}
exports.createRoot = createRoot;
exports.hydrateRoot = function (container, children) {
hydrate(children, container);
return createRoot(container);
};
================================================
FILE: compat/client.mjs
================================================
import { render, hydrate, unmountComponentAtNode } from 'preact/compat';
export function createRoot(container) {
return {
// eslint-disable-next-line
render: function (children) {
render(children, container);
},
// eslint-disable-next-line
unmount: function () {
unmountComponentAtNode(container);
}
};
}
export function hydrateRoot(container, children) {
hydrate(children, container);
return createRoot(container);
}
export default {
createRoot,
hydrateRoot
};
================================================
FILE: compat/jsx-dev-runtime.js
================================================
require('preact/compat');
module.exports = require('preact/jsx-runtime');
================================================
FILE: compat/jsx-dev-runtime.mjs
================================================
import 'preact/compat';
export * from 'preact/jsx-runtime';
================================================
FILE: compat/jsx-runtime.js
================================================
require('preact/compat');
module.exports = require('preact/jsx-runtime');
================================================
FILE: compat/jsx-runtime.mjs
================================================
import 'preact/compat';
export * from 'preact/jsx-runtime';
================================================
FILE: compat/mangle.json
================================================
{
"help": {
"what is this file?": "It controls protected/private property mangling so that minified builds have consistent property names.",
"why are there duplicate minified properties?": "Most properties are only used on one type of objects, so they can have the same name since they will never collide. Doing this reduces size."
},
"minify": {
"mangle": {
"properties": {
"regex": "^_[^_]",
"reserved": [
"__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
"__REACT_DEVTOOLS_GLOBAL_HOOK__",
"__PREACT_DEVTOOLS__",
"_renderers",
"__source",
"__self"
]
}
}
}
}
================================================
FILE: compat/package.json
================================================
{
"name": "preact-compat",
"amdName": "preactCompat",
"private": true,
"description": "A React compatibility layer for Preact",
"main": "dist/compat.js",
"module": "dist/compat.mjs",
"umd:main": "dist/compat.umd.js",
"source": "src/index.js",
"types": "src/index.d.ts",
"license": "MIT",
"mangle": {
"regex": "^_"
},
"peerDependencies": {
"preact": "^10.0.0"
}
}
================================================
FILE: compat/scheduler.d.ts
================================================
export var unstable_ImmediatePriority: number;
export var unstable_UserBlockingPriority: number;
export var unstable_NormalPriority: number;
export var unstable_LowPriority: number;
export var unstable_IdlePriority: number;
export function unstable_runWithPriority(
priority: number,
callback: () => void
): void;
export var unstable_now: DOMHighResTimeStamp;
================================================
FILE: compat/scheduler.js
================================================
// see scheduler.mjs
function unstable_runWithPriority(priority, callback) {
return callback();
}
module.exports = {
unstable_ImmediatePriority: 1,
unstable_UserBlockingPriority: 2,
unstable_NormalPriority: 3,
unstable_LowPriority: 4,
unstable_IdlePriority: 5,
unstable_runWithPriority,
unstable_now: performance.now.bind(performance)
};
================================================
FILE: compat/scheduler.mjs
================================================
/* eslint-disable */
// This file includes experimental React APIs exported from the "scheduler"
// npm package. Despite being explicitely marked as unstable some libraries
// already make use of them. This file is not a full replacement for the
// scheduler package, but includes the necessary shims to make those libraries
// work with Preact.
export var unstable_ImmediatePriority = 1;
export var unstable_UserBlockingPriority = 2;
export var unstable_NormalPriority = 3;
export var unstable_LowPriority = 4;
export var unstable_IdlePriority = 5;
/**
* @param {number} priority
* @param {() => void} callback
*/
export function unstable_runWithPriority(priority, callback) {
return callback();
}
export var unstable_now = performance.now.bind(performance);
================================================
FILE: compat/server.browser.js
================================================
import { renderToString } from 'preact-render-to-string';
export {
renderToString,
renderToString as renderToStaticMarkup
} from 'preact-render-to-string';
export default {
renderToString,
renderToStaticMarkup: renderToString
};
================================================
FILE: compat/server.d.ts
================================================
// @ts-nocheck TS loses its mind over the mixed module systems here.
// It's not ideal, but works at runtime and we're not shipping mixed type definitions.
import { renderToString } from 'preact-render-to-string';
import { renderToPipeableStream } from 'preact-render-to-string/stream-node';
import { renderToReadableStream } from 'preact-render-to-string/stream';
export {
renderToString,
renderToString as renderToStaticMarkup
} from 'preact-render-to-string';
export { renderToPipeableStream } from 'preact-render-to-string/stream-node';
export { renderToReadableStream } from 'preact-render-to-string/stream';
export = {
renderToString: typeof renderToString,
renderToStaticMarkup: typeof renderToString,
renderToPipeableStream: typeof renderToPipeableStream,
renderToReadableStream: typeof renderToReadableStream
};
================================================
FILE: compat/server.js
================================================
/* eslint-disable */
var renderToString;
try {
const mod = require('preact-render-to-string');
renderToString = mod.default || mod.renderToString || mod;
} catch (e) {
throw Error(
'renderToString() error: missing "preact-render-to-string" dependency.'
);
}
var renderToReadableStream;
try {
const mod = require('preact-render-to-string/stream');
renderToReadableStream = mod.default || mod.renderToReadableStream || mod;
} catch (e) {
throw Error(
'renderToReadableStream() error: update "preact-render-to-string" dependency to at least 6.5.0.'
);
}
var renderToPipeableStream;
try {
const mod = require('preact-render-to-string/stream-node');
renderToPipeableStream = mod.default || mod.renderToPipeableStream || mod;
} catch (e) {
throw Error(
'renderToPipeableStream() error: update "preact-render-to-string" dependency to at least 6.5.0.'
);
}
module.exports = {
renderToString: renderToString,
renderToStaticMarkup: renderToString,
renderToPipeableStream: renderToPipeableStream,
renderToReadableStream: renderToReadableStream
};
================================================
FILE: compat/server.mjs
================================================
import { renderToString } from 'preact-render-to-string';
import { renderToPipeableStream } from 'preact-render-to-string/stream-node';
import { renderToReadableStream } from 'preact-render-to-string/stream';
export {
renderToString,
renderToString as renderToStaticMarkup
} from 'preact-render-to-string';
export { renderToPipeableStream } from 'preact-render-to-string/stream-node';
export { renderToReadableStream } from 'preact-render-to-string/stream';
export default {
renderToString,
renderToStaticMarkup: renderToString,
renderToPipeableStream,
renderToReadableStream
};
================================================
FILE: compat/src/Children.js
================================================
import { toChildArray } from 'preact';
const mapFn = (children, fn, context) => {
if (children == null) return null;
return toChildArray(toChildArray(children).map(fn.bind(context)));
};
// This API is completely unnecessary for Preact, so it's basically passthrough.
export const Children = {
map: mapFn,
forEach: mapFn,
count(children) {
return children ? toChildArray(children).length : 0;
},
only(children) {
const normalized = toChildArray(children);
if (normalized.length !== 1) throw 'Children.only';
return normalized[0];
},
toArray: toChildArray
};
================================================
FILE: compat/src/PureComponent.js
================================================
import { Component } from 'preact';
import { shallowDiffers } from './util';
/**
* Component class with a predefined `shouldComponentUpdate` implementation
*/
export function PureComponent(p, c) {
this.props = p;
this.context = c;
}
PureComponent.prototype = new Component();
// Some third-party libraries check if this property is present
PureComponent.prototype.isPureReactComponent = true;
PureComponent.prototype.shouldComponentUpdate = function (props, state) {
return shallowDiffers(this.props, props) || shallowDiffers(this.state, state);
};
================================================
FILE: compat/src/forwardRef.js
================================================
import { assign } from './util';
export const REACT_FORWARD_SYMBOL = Symbol.for('react.forward_ref');
/**
* Pass ref down to a child. This is mainly used in libraries with HOCs that
* wrap components. Using `forwardRef` there is an easy way to get a reference
* of the wrapped component instead of one of the wrapper itself.
* @param {import('./index').ForwardRefRenderFunction} fn
* @returns {import('./internal').FunctionComponent}
*/
export function forwardRef(fn) {
function Forwarded(props) {
let clone = assign({}, props);
delete clone.ref;
return fn(clone, props.ref || null);
}
// mobx-react checks for this being present
Forwarded.$$typeof = REACT_FORWARD_SYMBOL;
// mobx-react heavily relies on implementation details.
// It expects an object here with a `render` property,
// and prototype.render will fail. Without this
// mobx-react throws.
Forwarded.render = fn;
Forwarded.prototype.isReactComponent = true;
Forwarded.displayName = 'ForwardRef(' + (fn.displayName || fn.name) + ')';
return Forwarded;
}
================================================
FILE: compat/src/hooks.js
================================================
import { useState, useLayoutEffect, useEffect } from 'preact/hooks';
/**
* This is taken from https://github.com/facebook/react/blob/main/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L84
* on a high level this cuts out the warnings, ... and attempts a smaller implementation
* @typedef {{ _value: any; _getSnapshot: () => any }} Store
*/
export function useSyncExternalStore(subscribe, getSnapshot) {
const value = getSnapshot();
/**
* @typedef {{ _instance: Store }} StoreRef
* @type {[StoreRef, (store: StoreRef) => void]}
*/
const [{ _instance }, forceUpdate] = useState({
_instance: { _value: value, _getSnapshot: getSnapshot }
});
useLayoutEffect(() => {
_instance._value = value;
_instance._getSnapshot = getSnapshot;
if (didSnapshotChange(_instance)) {
forceUpdate({ _instance });
}
}, [subscribe, value, getSnapshot]);
useEffect(() => {
if (didSnapshotChange(_instance)) {
forceUpdate({ _instance });
}
return subscribe(() => {
if (didSnapshotChange(_instance)) {
forceUpdate({ _instance });
}
});
}, [subscribe]);
return value;
}
/** @type {(inst: Store) => boolean} */
function didSnapshotChange(inst) {
try {
return !Object.is(inst._value, inst._getSnapshot());
} catch (error) {
return true;
}
}
export function startTransition(cb) {
cb();
}
export function useDeferredValue(val) {
return val;
}
export function useTransition() {
return [false, startTransition];
}
// TODO: in theory this should be done after a VNode is diffed as we want to insert
// styles/... before it attaches
export const useInsertionEffect = useLayoutEffect;
================================================
FILE: compat/src/index.d.ts
================================================
import * as _preact from '../../src/index';
import { JSXInternal } from '../../src/jsx';
import * as _hooks from '../../hooks';
import * as _Suspense from './suspense';
declare namespace preact {
export interface FunctionComponent<P = {}> {
(
props: _preact.RenderableProps<P>,
context?: any
): _preact.ComponentChildren;
displayName?: string;
defaultProps?: Partial<P> | undefined;
}
export interface ComponentClass<P = {}, S = {}> {
new (props: P, context?: any): _preact.Component<P, S>;
displayName?: string;
defaultProps?: Partial<P>;
contextType?: _preact.Context<any>;
getDerivedStateFromProps?(
props: Readonly<P>,
state: Readonly<S>
): Partial<S> | null;
getDerivedStateFromError?(error: any): Partial<S> | null;
}
// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
export interface Component<P = {}, S = {}> {
componentWillMount?(): void;
componentDidMount?(): void;
componentWillUnmount?(): void;
getChildContext?(): object;
componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
shouldComponentUpdate?(
nextProps: Readonly<P>,
nextState: Readonly<S>,
nextContext: any
): boolean;
componentWillUpdate?(
nextProps: Readonly<P>,
nextState: Readonly<S>,
nextContext: any
): void;
getSnapshotBeforeUpdate?(oldProps: Readonly<P>, oldState: Readonly<S>): any;
componentDidUpdate?(
previousProps: Readonly<P>,
previousState: Readonly<S>,
snapshot: any
): void;
componentDidCatch?(error: any, errorInfo: _preact.ErrorInfo): void;
}
export abstract class Component<P, S> {
constructor(props?: P, context?: any);
static displayName?: string;
static defaultProps?: any;
static contextType?: _preact.Context<any>;
// Static members cannot reference class type parameters. This is not
// supported in TypeScript. Reusing the same type arguments from `Component`
// will lead to an impossible state where one cannot satisfy the type
// constraint under no circumstances, see #1356.In general type arguments
// seem to be a bit buggy and not supported well at the time of this
// writing with TS 3.3.3333.
static getDerivedStateFromProps?(
props: Readonly<object>,
state: Readonly<object>
): object | null;
static getDerivedStateFromError?(error: any): object | null;
state: Readonly<S>;
props: _preact.RenderableProps<P>;
context: any;
// From https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e836acc75a78cf0655b5dfdbe81d69fdd4d8a252/types/react/index.d.ts#L402
// // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
// // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
setState<K extends keyof S>(
state:
| ((
prevState: Readonly<S>,
props: Readonly<P>
) => Pick<S, K> | Partial<S> | null)
| (Pick<S, K> | Partial<S> | null),
callback?: () => void
): void;
forceUpdate(callback?: () => void): void;
abstract render(
props?: _preact.RenderableProps<P>,
state?: Readonly<S>,
context?: any
): _preact.ComponentChildren;
}
}
// export default React;
export = React;
export as namespace React;
declare namespace React {
// Export JSX
export import JSX = JSXInternal;
// Hooks
export import CreateHandle = _hooks.CreateHandle;
export import EffectCallback = _hooks.EffectCallback;
export import Inputs = _hooks.Inputs;
export import Reducer = _hooks.Reducer;
export import Dispatch = _hooks.Dispatch;
export import SetStateAction = _hooks.StateUpdater;
export import useCallback = _hooks.useCallback;
export import useContext = _hooks.useContext;
export import useDebugValue = _hooks.useDebugValue;
export import useEffect = _hooks.useEffect;
export import useImperativeHandle = _hooks.useImperativeHandle;
export import useId = _hooks.useId;
export import useLayoutEffect = _hooks.useLayoutEffect;
export import useMemo = _hooks.useMemo;
export import useReducer = _hooks.useReducer;
export import useRef = _hooks.useRef;
export import useState = _hooks.useState;
// React 18 hooks
export import useInsertionEffect = _hooks.useLayoutEffect;
export function useTransition(): [false, typeof startTransition];
export function useDeferredValue<T = any>(val: T): T;
export function useSyncExternalStore<T>(
subscribe: (flush: () => void) => () => void,
getSnapshot: () => T
): T;
// Preact Defaults
export import Context = _preact.Context;
export import ContextType = _preact.ContextType;
export import RefObject = _preact.RefObject;
export import Component = preact.Component;
export import FunctionComponent = preact.FunctionComponent;
export import ComponentType = _preact.ComponentType;
export import ComponentClass = preact.ComponentClass;
export import FC = _preact.FunctionComponent;
export import createContext = _preact.createContext;
export import Ref = _preact.Ref;
export import createRef = _preact.createRef;
export import Fragment = _preact.Fragment;
export import createElement = _preact.createElement;
export import cloneElement = _preact.cloneElement;
export import ComponentProps = _preact.ComponentProps;
export import ReactNode = _preact.ComponentChild;
export import ReactElement = _preact.VNode;
export import Consumer = _preact.Consumer;
export import ErrorInfo = _preact.ErrorInfo;
export import Key = _preact.Key;
// Suspense
export import Suspense = _Suspense.Suspense;
export import lazy = _Suspense.lazy;
// Compat
export import StrictMode = _preact.Fragment;
export const version: string;
export function startTransition(cb: () => void): void;
// HTML
export interface HTMLAttributes<T extends EventTarget>
extends _preact.HTMLAttributes<T> {}
export interface HTMLProps<T extends EventTarget>
extends _preact.AllHTMLAttributes<T>,
_preact.ClassAttributes<T> {}
export interface AllHTMLAttributes<T extends EventTarget>
extends _preact.AllHTMLAttributes<T> {}
export import DetailedHTMLProps = _preact.DetailedHTMLProps;
export import CSSProperties = _preact.CSSProperties;
export interface SVGProps<T extends EventTarget>
extends _preact.SVGAttributes<T>,
_preact.ClassAttributes<T> {}
interface SVGAttributes<T extends EventTarget = SVGElement>
extends _preact.SVGAttributes<T> {}
interface ReactSVG extends JSXInternal.IntrinsicSVGElements {}
export import AriaAttributes = _preact.AriaAttributes;
export import HTMLAttributeReferrerPolicy = _preact.HTMLAttributeReferrerPolicy;
export import HTMLAttributeAnchorTarget = _preact.HTMLAttributeAnchorTarget;
export import HTMLInputTypeAttribute = _preact.HTMLInputTypeAttribute;
export import HTMLAttributeCrossOrigin = _preact.HTMLAttributeCrossOrigin;
export import AnchorHTMLAttributes = _preact.AnchorHTMLAttributes;
export import AudioHTMLAttributes = _preact.AudioHTMLAttributes;
export import AreaHTMLAttributes = _preact.AreaHTMLAttributes;
export import BaseHTMLAttributes = _preact.BaseHTMLAttributes;
export import BlockquoteHTMLAttributes = _preact.BlockquoteHTMLAttributes;
export import ButtonHTMLAttributes = _preact.ButtonHTMLAttributes;
export import CanvasHTMLAttributes = _preact.CanvasHTMLAttributes;
export import ColHTMLAttributes = _preact.ColHTMLAttributes;
export import ColgroupHTMLAttributes = _preact.ColgroupHTMLAttributes;
export import DataHTMLAttributes = _preact.DataHTMLAttributes;
export import DetailsHTMLAttributes = _preact.DetailsHTMLAttributes;
export import DelHTMLAttributes = _preact.DelHTMLAttributes;
export import DialogHTMLAttributes = _preact.DialogHTMLAttributes;
export import EmbedHTMLAttributes = _preact.EmbedHTMLAttributes;
export import FieldsetHTMLAttributes = _preact.FieldsetHTMLAttributes;
export import FormHTMLAttributes = _preact.FormHTMLAttributes;
export import IframeHTMLAttributes = _preact.IframeHTMLAttributes;
export import ImgHTMLAttributes = _preact.ImgHTMLAttributes;
export import InsHTMLAttributes = _preact.InsHTMLAttributes;
export import InputHTMLAttributes = _preact.InputHTMLAttributes;
export import KeygenHTMLAttributes = _preact.KeygenHTMLAttributes;
export import LabelHTMLAttributes = _preact.LabelHTMLAttributes;
export import LiHTMLAttributes = _preact.LiHTMLAttributes;
export import LinkHTMLAttributes = _preact.LinkHTMLAttributes;
export import MapHTMLAttributes = _preact.MapHTMLAttributes;
export import MenuHTMLAttributes = _preact.MenuHTMLAttributes;
export import MediaHTMLAttributes = _preact.MediaHTMLAttributes;
export import MetaHTMLAttributes = _preact.MetaHTMLAttributes;
export import MeterHTMLAttributes = _preact.MeterHTMLAttributes;
export import QuoteHTMLAttributes = _preact.QuoteHTMLAttributes;
export import ObjectHTMLAttributes = _preact.ObjectHTMLAttributes;
export import OlHTMLAttributes = _preact.OlHTMLAttributes;
export import OptgroupHTMLAttributes = _preact.OptgroupHTMLAttributes;
export import OptionHTMLAttributes = _preact.OptionHTMLAttributes;
export import OutputHTMLAttributes = _preact.OutputHTMLAttributes;
export import ParamHTMLAttributes = _preact.ParamHTMLAttributes;
export import ProgressHTMLAttributes = _preact.ProgressHTMLAttributes;
export import SlotHTMLAttributes = _preact.SlotHTMLAttributes;
export import ScriptHTMLAttributes = _preact.ScriptHTMLAttributes;
export import SelectHTMLAttributes = _preact.SelectHTMLAttributes;
export import SourceHTMLAttributes = _preact.SourceHTMLAttributes;
export import StyleHTMLAttributes = _preact.StyleHTMLAttributes;
export import TableHTMLAttributes = _preact.TableHTMLAttributes;
export import TextareaHTMLAttributes = _preact.TextareaHTMLAttributes;
export import TdHTMLAttributes = _preact.TdHTMLAttributes;
export import ThHTMLAttributes = _preact.ThHTMLAttributes;
export import TimeHTMLAttributes = _preact.TimeHTMLAttributes;
export import TrackHTMLAttributes = _preact.TrackHTMLAttributes;
export import VideoHTMLAttributes = _preact.VideoHTMLAttributes;
// Events
export import TargetedEvent = _preact.TargetedEvent;
export import ChangeEvent = _preact.TargetedEvent;
export import ClipboardEvent = _preact.TargetedClipboardEvent;
export import CompositionEvent = _preact.TargetedCompositionEvent;
export import DragEvent = _preact.TargetedDragEvent;
export import PointerEvent = _preact.TargetedPointerEvent;
export import FocusEvent = _preact.TargetedFocusEvent;
export import FormEvent = _preact.TargetedEvent;
export import InvalidEvent = _preact.TargetedEvent;
export import KeyboardEvent = _preact.TargetedKeyboardEvent;
export import MouseEvent = _preact.TargetedMouseEvent;
export import TouchEvent = _preact.TargetedTouchEvent;
export import UIEvent = _preact.TargetedUIEvent;
export import AnimationEvent = _preact.TargetedAnimationEvent;
export import TransitionEvent = _preact.TargetedTransitionEvent;
// Event Handler Types
export import EventHandler = _preact.EventHandler;
export import ChangeEventHandler = _preact.GenericEventHandler;
export import ClipboardEventHandler = _preact.ClipboardEventHandler;
export import CompositionEventHandler = _preact.CompositionEventHandler;
export import DragEventHandler = _preact.DragEventHandler;
export import PointerEventHandler = _preact.PointerEventHandler;
export import FocusEventHandler = _preact.FocusEventHandler;
export import FormEventHandler = _preact.GenericEventHandler;
export import InvalidEventHandler = _preact.GenericEventHandler;
export import KeyboardEventHandler = _preact.KeyboardEventHandler;
export import MouseEventHandler = _preact.MouseEventHandler;
export import TouchEventHandler = _preact.TouchEventHandler;
export import UIEventHandler = _preact.UIEventHandler;
export import AnimationEventHandler = _preact.AnimationEventHandler;
export import TransitionEventHandler = _preact.TransitionEventHandler;
export function createPortal(
vnode: _preact.ComponentChildren,
container: _preact.ContainerNode
): _preact.VNode<any>;
export function render(
vnode: _preact.ComponentChild,
parent: _preact.ContainerNode,
callback?: () => void
): Component | null;
export function hydrate(
vnode: _preact.ComponentChild,
parent: _preact.ContainerNode,
callback?: () => void
): Component | null;
export function unmountComponentAtNode(
container: _preact.ContainerNode
): boolean;
export function createFactory(
type: _preact.VNode<any>['type']
): (
props?: any,
...children: _preact.ComponentChildren[]
) => _preact.VNode<any>;
export function isValidElement(element: any): boolean;
export function isFragment(element: any): boolean;
export function isMemo(element: any): boolean;
export function findDOMNode(
component: _preact.Component | Element
): Element | null;
export abstract class PureComponent<
P = {},
S = {},
SS = any
> extends _preact.Component<P, S> {
isPureReactComponent: boolean;
}
export type MemoExoticComponent<C extends _preact.FunctionalComponent<any>> =
_preact.FunctionComponent<ComponentProps<C>> & {
readonly type: C;
};
export function memo<P = {}>(
component: _preact.FunctionalComponent<P>,
comparer?: (prev: P, next: P) => boolean
): _preact.FunctionComponent<P>;
export function memo<C extends _preact.FunctionalComponent<any>>(
component: C,
comparer?: (
prev: _preact.ComponentProps<C>,
next: _preact.ComponentProps<C>
) => boolean
): C;
export interface RefAttributes<R> extends _preact.Attributes {
ref?: _preact.Ref<R> | undefined;
}
export interface ForwardRefRenderFunction<T = any, P = {}> {
(props: P, ref: ForwardedRef<T>): _preact.ComponentChild;
displayName?: string;
}
export interface ForwardRefExoticComponent<P>
extends _preact.FunctionComponent<P> {
defaultProps?: Partial<P> | undefined;
}
export function forwardRef<R, P = {}>(
fn: ForwardRefRenderFunction<R, P>
): _preact.FunctionalComponent<PropsWithoutRef<P> & { ref?: _preact.Ref<R> }>;
export type PropsWithoutRef<P> = Omit<P, 'ref'>;
interface MutableRefObject<T> {
current: T;
}
export type ForwardedRef<T> =
| ((instance: T | null) => void)
| MutableRefObject<T | null>
| null;
export type ElementType<
P = any,
Tag extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements
> =
| { [K in Tag]: P extends JSX.IntrinsicElements[K] ? K : never }[Tag]
| ComponentType<P>;
export type ComponentPropsWithoutRef<T extends ElementType> = PropsWithoutRef<
ComponentProps<T>
>;
export type ComponentPropsWithRef<C extends ElementType> = C extends new (
props: infer P
) => Component<any, any>
? PropsWithoutRef<P> & RefAttributes<InstanceType<C>>
: ComponentProps<C>;
export type ElementRef<
C extends
| ForwardRefExoticComponent<any>
| { new (props: any): Component<any, any> }
| ((props: any) => ReactNode)
| keyof JSXInternal.IntrinsicElements
> = 'ref' extends keyof ComponentPropsWithRef<C>
? NonNullable<ComponentPropsWithRef<C>['ref']> extends RefAttributes<
infer Instance
>['ref']
? Instance
: never
: never;
export function flushSync<R>(fn: () => R): R;
export function flushSync<A, R>(fn: (a: A) => R, a: A): R;
export function unstable_batchedUpdates<A, R>(callback: (a: A) => R, a: A): R;
export function unstable_batchedUpdates<R>(callback: () => R): R;
export type PropsWithChildren<P = unknown> = P & {
children?: _preact.ComponentChildren | undefined;
};
export const Children: {
map<T extends _preact.ComponentChild, R>(
children: T | T[],
fn: (child: T, i: number) => R,
context: any
): R[];
forEach<T extends _preact.ComponentChild>(
children: T | T[],
fn: (child: T, i: number) => void,
context: any
): void;
count: (children: _preact.ComponentChildren) => number;
only: (children: _preact.ComponentChildren) => _preact.ComponentChild;
toArray: (children: _preact.ComponentChildren) => _preact.VNode<{}>[];
};
// scheduler
export const unstable_ImmediatePriority: number;
export const unstable_UserBlockingPriority: number;
export const unstable_NormalPriority: number;
export const unstable_LowPriority: number;
export const unstable_IdlePriority: number;
export function unstable_runWithPriority(
priority: number,
callback: () => void
): void;
export const unstable_now: () => number;
}
================================================
FILE: compat/src/index.js
================================================
import {
Component,
Fragment,
createContext,
createElement,
createRef,
options,
cloneElement as preactCloneElement,
render as preactRender
} from 'preact';
import {
useCallback,
useContext,
useDebugValue,
useEffect,
useId,
useImperativeHandle,
useLayoutEffect,
useMemo,
useReducer,
useRef,
useState
} from 'preact/hooks';
import { Children } from './Children';
import { PureComponent } from './PureComponent';
import { forwardRef } from './forwardRef';
import {
startTransition,
useDeferredValue,
useInsertionEffect,
useSyncExternalStore,
useTransition
} from './hooks';
import { memo } from './memo';
import { createPortal } from './portals';
import {
REACT_ELEMENT_TYPE,
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
hydrate,
render
} from './render';
import { Suspense, lazy } from './suspense';
const version = '18.3.1'; // trick libraries to think we are react
/**
* Legacy version of createElement.
* @param {import('./internal').VNode["type"]} type The node name or Component constructor
*/
function createFactory(type) {
return createElement.bind(null, type);
}
/**
* Check if the passed element is a valid (p)react node.
* @param {*} element The element to check
* @returns {boolean}
*/
function isValidElement(element) {
return !!element && element.$$typeof === REACT_ELEMENT_TYPE;
}
/**
* Check if the passed element is a Fragment node.
* @param {*} element The element to check
* @returns {boolean}
*/
function isFragment(element) {
return isValidElement(element) && element.type === Fragment;
}
/**
* Check if the passed element is a Memo node.
* @param {*} element The element to check
* @returns {boolean}
*/
function isMemo(element) {
return (
!!element &&
typeof element.displayName == 'string' &&
element.displayName.indexOf('Memo(') == 0
);
}
/**
* Wrap `cloneElement` to abort if the passed element is not a valid element and apply
* all vnode normalizations.
* @param {import('./internal').VNode} element The vnode to clone
* @param {object} props Props to add when cloning
* @param {Array<import('./internal').ComponentChildren>} rest Optional component children
*/
function cloneElement(element) {
if (!isValidElement(element)) return element;
return preactCloneElement.apply(null, arguments);
}
/**
* Remove a component tree from the DOM, including state and event handlers.
* @param {import('./internal').PreactElement} container
* @returns {boolean}
*/
function unmountComponentAtNode(container) {
if (container._children) {
preactRender(null, container);
return true;
}
return false;
}
/**
* Get the matching DOM node for a component
* @param {import('./internal').Component} component
* @returns {import('./internal').PreactElement | null}
*/
function findDOMNode(component) {
return (
(component &&
((component._vnode && component._vnode._dom) ||
(component.nodeType === 1 && component))) ||
null
);
}
/**
* In React, `flushSync` flushes the entire tree and forces a rerender.
* @template Arg
* @template Result
* @param {(arg: Arg) => Result} callback function that runs before the flush
* @param {Arg} [arg] Optional argument that can be passed to the callback
* @returns
*/
const flushSync = (callback, arg) => {
const prevDebounce = options.debounceRendering;
options.debounceRendering = cb => cb();
const res = callback(arg);
options.debounceRendering = prevDebounce;
return res;
};
/**
* In React, `unstable_batchedUpdates` is a legacy feature that was made a no-op
* outside of legacy mode in React 18 and a no-op across the board in React 19.
* @template Arg
* @template Result
* @param {(arg: Arg) => Result} callback
* @param {Arg} [arg]
* @returns {Result}
*/
function unstable_batchedUpdates(callback, arg) {
return callback(arg);
}
// compat to react-is
export const isElement = isValidElement;
export * from 'preact/hooks';
export {
version,
Children,
render,
hydrate,
unmountComponentAtNode,
createPortal,
createElement,
createContext,
createFactory,
cloneElement,
createRef,
Fragment,
isValidElement,
isFragment,
isMemo,
findDOMNode,
Component,
PureComponent,
memo,
forwardRef,
flushSync,
unstable_batchedUpdates,
useInsertionEffect,
startTransition,
useDeferredValue,
useSyncExternalStore,
useTransition,
Fragment as StrictMode,
Suspense,
lazy,
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
};
// React copies the named exports to the default one.
export default {
useState,
useId,
useReducer,
useEffect,
useLayoutEffect,
useInsertionEffect,
useTransition,
useDeferredValue,
useSyncExternalStore,
startTransition,
useRef,
useImperativeHandle,
useMemo,
useCallback,
useContext,
useDebugValue,
version,
Children,
render,
hydrate,
unmountComponentAtNode,
createPortal,
createElement,
createContext,
createFactory,
cloneElement,
createRef,
Fragment,
isValidElement,
isElement,
isFragment,
isMemo,
findDOMNode,
Component,
PureComponent,
memo,
forwardRef,
flushSync,
unstable_batchedUpdates,
StrictMode: Fragment,
Suspense,
lazy,
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
};
================================================
FILE: compat/src/internal.d.ts
================================================
import {
Component as PreactComponent,
VNode as PreactVNode,
FunctionComponent as PreactFunctionComponent,
PreactElement
} from '../../src/internal';
import { SuspenseProps } from './suspense';
export { ComponentChildren } from '../..';
export { PreactElement };
export interface Component<P = {}, S = {}> extends PreactComponent<P, S> {
isReactComponent?: object;
isPureReactComponent?: true;
_patchedLifecycles?: true;
// Suspense internal properties
_childDidSuspend?(error: Promise<void>, suspendingVNode: VNode): void;
_suspended: (vnode: VNode) => (unsuspend: () => void) => void;
_onResolve?(): void;
// Portal internal properties
_temp: any;
_container: PreactElement;
}
export interface FunctionComponent<P = {}> extends PreactFunctionComponent<P> {
shouldComponentUpdate?(nextProps: Readonly<P>): boolean;
_patchedLifecycles?: true;
}
export interface VNode<T = any> extends PreactVNode<T> {
$$typeof?: symbol;
preactCompatNormalized?: boolean;
}
export interface SuspenseState {
_suspended?: null | VNode<any>;
}
export interface SuspenseComponent
extends PreactComponent<SuspenseProps, SuspenseState> {
_pendingSuspensionCount: number;
_suspenders: Component[];
_detachOnNextRender: null | VNode<any>;
}
================================================
FILE: compat/src/memo.js
================================================
import { createElement } from 'preact';
import { shallowDiffers } from './util';
/**
* Memoize a component, so that it only updates when the props actually have
* changed. This was previously known as `React.pure`.
* @param {import('./internal').FunctionComponent} c functional component
* @param {(prev: object, next: object) => boolean} [comparer] Custom equality function
* @returns {import('./internal').FunctionComponent}
*/
export function memo(c, comparer) {
function shouldUpdate(nextProps) {
const ref = this.props.ref;
if (ref != nextProps.ref && ref) {
typeof ref == 'function' ? ref(null) : (ref.current = null);
}
return comparer
? !comparer(this.props, nextProps) || ref != nextProps.ref
: shallowDiffers(this.props, nextProps);
}
function Memoed(props) {
this.shouldComponentUpdate = shouldUpdate;
return createElement(c, props);
}
Memoed.displayName = 'Memo(' + (c.displayName || c.name) + ')';
Memoed._forwarded = Memoed.prototype.isReactComponent = true;
Memoed.type = c;
return Memoed;
}
================================================
FILE: compat/src/portals.js
================================================
import { createElement, render } from 'preact';
/**
* @param {import('../../src/index').RenderableProps<{ context: any }>} props
*/
function ContextProvider(props) {
this.getChildContext = () => props.context;
return props.children;
}
/**
* Portal component
* @this {import('./internal').Component}
* @param {object | null | undefined} props
*
* TODO: use createRoot() instead of fake root
*/
function Portal(props) {
const _this = this;
let container = props._container;
_this.componentWillUnmount = function () {
render(null, _this._temp);
_this._temp = null;
_this._container = null;
};
// When we change container we should clear our old container and
// indicate a new mount.
if (_this._container && _this._container !== container) {
_this.componentWillUnmount();
}
if (!_this._temp) {
// Ensure the element has a mask for useId invocations
let root = _this._vnode;
while (root !== null && !root._mask && root._parent !== null) {
root = root._parent;
}
_this._container = container;
// Create a fake DOM parent node that manages a subset of `container`'s children:
_this._temp = {
nodeType: 1,
parentNode: container,
childNodes: [],
_children: { _mask: root._mask },
ownerDocument: container.ownerDocument,
namespaceURI: container.namespaceURI,
insertBefore(child, before) {
this.childNodes.push(child);
_this._container.insertBefore(child, before);
}
};
}
// Render our wrapping element into temp.
render(
createElement(ContextProvider, { context: _this.context }, props._vnode),
_this._temp
);
}
/**
* Create a `Portal` to continue rendering the vnode tree at a different DOM node
* @param {import('./internal').VNode} vnode The vnode to render
* @param {import('./internal').PreactElement} container The DOM node to continue rendering in to.
*/
export function createPortal(vnode, container) {
const el = createElement(Portal, { _vnode: vnode, _container: container });
el.containerInfo = container;
return el;
}
================================================
FILE: compat/src/render.js
================================================
import {
render as preactRender,
hydrate as preactHydrate,
options,
toChildArray,
Component
} from 'preact';
import {
useCallback,
useContext,
useDebugValue,
useEffect,
useId,
useImperativeHandle,
useLayoutEffect,
useMemo,
useReducer,
useRef,
useState
} from 'preact/hooks';
import {
useDeferredValue,
useInsertionEffect,
useSyncExternalStore,
useTransition
} from './index';
import { assign, IS_NON_DIMENSIONAL } from './util';
export const REACT_ELEMENT_TYPE = Symbol.for('react.element');
const CAMEL_PROPS =
/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/;
const CAMEL_REPLACE = /[A-Z0-9]/g;
const IS_DOM = typeof document !== 'undefined';
// Input types for which onchange should not be converted to oninput.
const onChangeInputType = type => /fil|che|rad/.test(type);
// Some libraries like `react-virtualized` explicitly check for this.
Component.prototype.isReactComponent = true;
// `UNSAFE_*` lifecycle hooks
// Preact only ever invokes the unprefixed methods.
// Here we provide a base "fallback" implementation that calls any defined UNSAFE_ prefixed method.
// - If a component defines its own `componentDidMount()` (including via defineProperty), use that.
// - If a component defines `UNSAFE_componentDidMount()`, `componentDidMount` is the alias getter/setter.
// - If anything assigns to an `UNSAFE_*` property, the assignment is forwarded to the unprefixed property.
// See https://github.com/preactjs/preact/issues/1941
[
'componentWillMount',
'componentWillReceiveProps',
'componentWillUpdate'
].forEach(key => {
Object.defineProperty(Component.prototype, key, {
configurable: true,
get() {
return this['UNSAFE_' + key];
},
set(v) {
Object.defineProperty(this, key, {
configurable: true,
writable: true,
value: v
});
}
});
});
/**
* Proxy render() since React returns a Component reference.
* @param {import('./internal').VNode} vnode VNode tree to render
* @param {import('./internal').PreactElement} parent DOM node to render vnode tree into
* @param {() => void} [callback] Optional callback that will be called after rendering
* @returns {import('./internal').Component | null} The root component reference or null
*/
export function render(vnode, parent, callback) {
// React destroys any existing DOM nodes, see #1727
// ...but only on the first render, see #1828
if (parent._children == null) {
parent.textContent = '';
}
preactRender(vnode, parent);
if (typeof callback == 'function') callback();
return vnode ? vnode._component : null;
}
export function hydrate(vnode, parent, callback) {
preactHydrate(vnode, parent);
if (typeof callback == 'function') callback();
return vnode ? vnode._component : null;
}
let oldEventHook = options.event;
options.event = e => {
if (oldEventHook) e = oldEventHook(e);
e.persist = () => {};
e.isPropagationStopped = function isPropagationStopped() {
return this.cancelBubble;
};
e.isDefaultPrevented = function isDefaultPrevented() {
return this.defaultPrevented;
};
return (e.nativeEvent = e);
};
const classNameDescriptorNonEnumberable = {
configurable: true,
get() {
return this.class;
}
};
function handleDomVNode(vnode) {
let props = vnode.props,
type = vnode.type,
normalizedProps = {},
isNonDashedType = type.indexOf('-') == -1;
for (let i in props) {
let value = props[i];
if (
(i === 'value' && 'defaultValue' in props && value == null) ||
// Emulate React's behavior of not rendering the contents of noscript tags on the client.
(IS_DOM && i === 'children' && type === 'noscript') ||
i === 'class' ||
i === 'className'
) {
// Skip applying value if it is null/undefined and we already set
// a default value
continue;
}
if (i === 'style' && typeof value === 'object') {
for (let key in value) {
if (typeof value[key] === 'number' && !IS_NON_DIMENSIONAL.test(key)) {
value[key] += 'px';
}
}
} else if (
i === 'defaultValue' &&
'value' in props &&
props.value == null
) {
// `defaultValue` is treated as a fallback `value` when a value prop is present but null/undefined.
// `defaultValue` for Elements with no value prop is the same as the DOM defaultValue property.
i = 'value';
} else if (i === 'download' && value === true) {
// Calling `setAttribute` with a truthy value will lead to it being
// passed as a stringified value, e.g. `download="true"`. React
// converts it to an empty string instead, otherwise the attribute
// value will be used as the file name and the file will be called
// "true" upon downloading it.
value = '';
} else if (i === 'translate' && value === 'no') {
value = false;
} else if (i[0] === 'o' && i[1] === 'n') {
let lowerCased = i.toLowerCase();
if (lowerCased === 'ondoubleclick') {
i = 'ondblclick';
} else if (
lowerCased === 'onchange' &&
(type === 'input' || type === 'textarea') &&
!onChangeInputType(props.type)
) {
lowerCased = i = 'oninput';
} else if (lowerCased === 'onfocus') {
i = 'onfocusin';
} else if (lowerCased === 'onblur') {
i = 'onfocusout';
}
// Add support for onInput and onChange, see #3561
// if we have an oninput prop already change it to oninputCapture
if (lowerCased === 'oninput') {
i = lowerCased;
if (normalizedProps[i]) {
i = 'oninputCapture';
}
}
} else if (isNonDashedType && CAMEL_PROPS.test(i)) {
i = i.replace(CAMEL_REPLACE, '-$&').toLowerCase();
} else if (value === null) {
value = undefined;
}
normalizedProps[i] = value;
}
if (type == 'select') {
// Add support for array select values: <select multiple value={[]} />
if (normalizedProps.multiple && Array.isArray(normalizedProps.value)) {
// forEach() always returns undefined, which we abuse here to unset the value prop.
normalizedProps.value = toChildArray(props.children).forEach(child => {
child.props.selected =
normalizedProps.value.indexOf(child.props.value) != -1;
});
}
// Adding support for defaultValue in select tag
if (normalizedProps.defaultValue != null) {
normalizedProps.value = toChildArray(props.children).forEach(child => {
if (normalizedProps.multiple) {
child.props.selected =
normalizedProps.defaultValue.indexOf(child.props.value) != -1;
} else {
child.props.selected =
normalizedProps.defaultValue == child.props.value;
}
});
}
}
if (props.class && !props.className) {
normalizedProps.class = props.class;
Object.defineProperty(
normalizedProps,
'className',
classNameDescriptorNonEnumberable
);
} else if (props.className) {
normalizedProps.class = normalizedProps.className = props.className;
}
vnode.props = normalizedProps;
}
let oldVNodeHook = options.vnode;
options.vnode = vnode => {
// only normalize props on Element nodes
if (typeof vnode.type === 'string') {
handleDomVNode(vnode);
} else if (typeof vnode.type === 'function') {
const shouldApplyRef =
'prototype' in vnode.type && vnode.type.prototype.render;
if ('ref' in vnode.props && shouldApplyRef) {
vnode.ref = vnode.props.ref;
delete vnode.props.ref;
}
if (vnode.type.defaultProps) {
let normalizedProps = assign({}, vnode.props);
for (let i in vnode.type.defaultProps) {
if (normalizedProps[i] === undefined) {
normalizedProps[i] = vnode.type.defaultProps[i];
}
}
vnode.props = normalizedProps;
}
}
vnode.$$typeof = REACT_ELEMENT_TYPE;
if (oldVNodeHook) oldVNodeHook(vnode);
};
// Only needed for react-relay
let currentComponent;
const oldBeforeRender = options._render;
options._render = function (vnode) {
if (oldBeforeRender) {
oldBeforeRender(vnode);
}
currentComponent = vnode._component;
};
const oldDiffed = options.diffed;
/** @type {(vnode: import('./internal').VNode) => void} */
options.diffed = function (vnode) {
if (oldDiffed) {
oldDiffed(vnode);
}
const props = vnode.props;
const dom = vnode._dom;
if (
dom != null &&
vnode.type === 'textarea' &&
'value' in props &&
props.value !== dom.value
) {
dom.value = props.value == null ? '' : props.value;
}
currentComponent = null;
};
// This is a very very private internal function for React it
// is used to sort-of do runtime dependency injection.
export const __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
ReactCurrentDispatcher: {
current: {
readContext(context) {
return currentComponent._globalContext[context._id].props.value;
},
useCallback,
useContext,
useDebugValue,
useDeferredValue,
useEffect,
useId,
useImperativeHandle,
useInsertionEffect,
useLayoutEffect,
useMemo,
// useMutableSource, // experimental-only and replaced by uSES, likely not worth supporting
useReducer,
useRef,
useState,
useSyncExternalStore,
useTransition
}
}
};
================================================
FILE: compat/src/suspense.d.ts
================================================
import { Component, ComponentChild, ComponentChildren } from '../../src/index';
//
// Suspense/lazy
// -----------------------------------
export function lazy<T>(
loader: () => Promise<{ default: T } | T>
): T extends { default: infer U } ? U : T;
export interface SuspenseProps {
children?: ComponentChildren;
fallback: ComponentChildren;
}
export class Suspense extends Component<SuspenseProps> {
render(): ComponentChild;
}
================================================
FILE: compat/src/suspense.js
================================================
import { Component, Fragment, createElement, options } from 'preact';
import {
COMPONENT_FORCE,
FORCE_PROPS_REVALIDATE,
MODE_HYDRATE
} from '../../src/constants';
import { assign } from './util';
const oldCatchError = options._catchError;
options._catchError = (error, newVNode, oldVNode, errorInfo) => {
if (error.then) {
/** @type {import('./internal').Component} */
let component;
let vnode = newVNode;
while ((vnode = vnode._parent)) {
if ((component = vnode._component) && component._childDidSuspend) {
if (newVNode._dom == null) {
newVNode._dom = oldVNode._dom;
newVNode._children = oldVNode._children;
}
// Don't call oldCatchError if we found a Suspense
return component._childDidSuspend(error, newVNode);
}
}
}
oldCatchError(error, newVNode, oldVNode, errorInfo);
};
const oldUnmount = options.unmount;
options.unmount = vnode => {
/** @type {import('./internal').Component} */
const component = vnode._component;
if (component) component._unmounted = true;
if (component && component._onResolve) {
component._onResolve();
}
if (oldUnmount) oldUnmount(vnode);
};
function detachedClone(vnode, detachedParent, parentDom) {
if (vnode) {
if (vnode._component && vnode._component.__hooks) {
vnode._component.__hooks._list.forEach(effect => {
if (typeof effect._cleanup == 'function') effect._cleanup();
});
vnode._component.__hooks = null;
}
vnode = assign({}, vnode);
if (vnode._component != null) {
if (vnode._component._parentDom === parentDom) {
vnode._component._parentDom = detachedParent;
}
vnode._component._bits |= COMPONENT_FORCE;
vnode._component = null;
}
vnode._children =
vnode._children &&
vnode._children.map(child =>
detachedClone(child, detachedParent, parentDom)
);
}
return vnode;
}
function removeOriginal(vnode, detachedParent, originalParent) {
if (vnode && originalParent) {
if (typeof vnode.type == 'string') {
vnode._flags |= FORCE_PROPS_REVALIDATE;
}
vnode._original = null;
vnode._children =
vnode._children &&
vnode._children.map(child =>
removeOriginal(child, detachedParent, originalParent)
);
if (vnode._component) {
if (vnode._component._parentDom === detachedParent) {
if (vnode._dom) {
originalParent.appendChild(vnode._dom);
}
vnode._component._bits |= COMPONENT_FORCE;
vnode._component._parentDom = originalParent;
}
}
}
return vnode;
}
// having custom inheritance instead of a class here saves a lot of bytes
export function Suspense() {
// we do not call super here to golf some bytes...
this._pendingSuspensionCount = 0;
this._suspenders = null;
this._detachOnNextRender = null;
}
// Things we do here to save some bytes but are not proper JS inheritance:
// - call `new Component()` as the prototype
// - do not set `Suspense.prototype.constructor` to `Suspense`
Suspense.prototype = new Component();
/**
* @this {import('./internal').SuspenseComponent}
* @param {Promise} promise The thrown promise
* @param {import('./internal').VNode<any, any>} suspendingVNode The suspending component
*/
Suspense.prototype._childDidSuspend = function (promise, suspendingVNode) {
const suspendingComponent = suspendingVNode._component;
if (this._suspenders == null) {
this._suspenders = [];
}
this._suspenders.push(suspendingComponent);
let resolved = false;
const onResolved = () => {
if (resolved || this._unmounted) return;
resolved = true;
suspendingComponent._onResolve = null;
onSuspensionComplete();
};
suspendingComponent._onResolve = onResolved;
// Store and null _parentDom to prevent setState/forceUpdate from
// scheduling renders while suspended. Render would be a no-op anyway
// since renderComponent checks _parentDom, but this avoids queue churn.
const originalParentDom = suspendingComponent._parentDom;
suspendingComponent._parentDom = null;
const onSuspensionComplete = () => {
if (!--this._pendingSuspensionCount) {
// If the suspension was during hydration we don't need to restore the
// suspended children into the _children array
if (this.state._suspended) {
const suspendedVNode = this.state._suspended;
this._vnode._children[0] = removeOriginal(
suspendedVNode,
suspendedVNode._component._parentDom,
suspendedVNode._component._originalParentDom
);
}
this.setState({ _suspended: (this._detachOnNextRender = null) });
let suspended;
while ((suspended = this._suspenders.pop())) {
// Restore _parentDom before forceUpdate so render can proceed
suspended._parentDom = originalParentDom;
suspended.forceUpdate();
}
}
};
/**
* We do not set `suspended: true` during hydration because we want the actual markup
* to remain on screen and hydrate it when the suspense actually gets resolved.
* While in non-hydration cases the usual fallback -> component flow would occour.
*/
if (
!this._pendingSuspensionCount++ &&
!(suspendingVNode._flags & MODE_HYDRATE)
) {
this.setState({
_suspended: (this._detachOnNextRender = this._vnode._children[0])
});
}
promise.then(onResolved, onResolved);
};
Suspense.prototype.componentWillUnmount = function () {
this._suspenders = [];
};
/**
* @this {import('./internal').SuspenseComponent}
* @param {import('./internal').SuspenseComponent["props"]} props
* @param {import('./internal').SuspenseState} state
*/
Suspense.prototype.render = function (props, state) {
if (this._detachOnNextRender) {
// When the Suspense's _vnode was created by a call to createVNode
// (i.e. due to a setState further up in the tree)
// it's _children prop is null, in this case we "forget" about the parked vnodes to detach
if (this._vnode._children) {
const detachedParent = document.createElement('div');
const detachedComponent = this._vnode._children[0]._component;
this._vnode._children[0] = detachedClone(
this._detachOnNextRender,
detachedParent,
(detachedComponent._originalParentDom = detachedComponent._parentDom)
);
}
this._detachOnNextRender = null;
}
return [
createElement(Fragment, null, state._suspended ? null : props.children),
state._suspended && createElement(Fragment, null, props.fallback)
];
};
export function lazy(loader) {
let prom;
let component = null;
let error;
let resolved;
function Lazy(props) {
if (!prom) {
prom = loader();
prom.then(
exports => {
if (exports) {
component = exports.default || exports;
}
resolved = true;
},
e => {
error = e;
resolved = true;
}
);
}
if (error) {
throw error;
}
if (!resolved) {
throw prom;
}
return component ? createElement(component, props) : null;
}
Lazy.displayName = 'Lazy';
return Lazy;
}
================================================
FILE: compat/src/util.js
================================================
export const assign = Object.assign;
/**
* Check if two objects have a different shape
* @param {object} a
* @param {object} b
* @returns {boolean}
*/
export function shallowDiffers(a, b) {
for (let i in a) if (i !== '__source' && !(i in b)) return true;
for (let i in b) if (i !== '__source' && a[i] !== b[i]) return true;
return false;
}
export const IS_NON_DIMENSIONAL =
/^(-|f[lo].*[^se]$|g.{5,}[^ps]$|z|o[pr]|(W.{5})?[lL]i.*(t|mp)$|an|(bo|s).{4}Im|sca|m.{6}[ds]|ta|c.*[st]$|wido|ini)/;
================================================
FILE: compat/test/browser/Children.test.jsx
================================================
import {
setupScratch,
teardown,
serializeHtml
} from '../../../test/_util/helpers';
import { div, span } from '../../../test/_util/dom';
import React, { createElement, Children, render } from 'preact/compat';
import { vi } from 'vitest';
describe('Children', () => {
/** @type {HTMLDivElement} */
let scratch;
beforeEach(() => {
scratch = setupScratch();
});
afterEach(() => {
teardown(scratch);
});
describe('.count', () => {
let count;
function Foo(props) {
count = Children.count(props.children);
return <div>{count}</div>;
}
it('should return 0 for no children', () => {
render(<Foo />, scratch);
expect(count).to.equal(0);
});
it('should return number of children', () => {
render(
<Foo>
<div />
foo
</Foo>,
scratch
);
expect(count).to.equal(2);
});
});
describe('.only', () => {
let actual;
function Foo(props) {
actual = Children.only(props.children);
return <div>{actual}</div>;
}
it('should only allow 1 child', () => {
render(<Foo>foo</Foo>, scratch);
expect(actual).to.equal('foo');
});
it('should throw if no children are passed', () => {
// eslint-disable-next-line prefer-arrow-callback
expect(function () {
render(<Foo />, scratch);
}).to.throw();
});
it('should throw if more children are passed', () => {
// eslint-disable-next-line prefer-arrow-callback
expect(function () {
render(
<Foo>
foo
<span />
</Foo>,
scratch
);
}).to.throw();
});
});
describe('.map', () => {
function Foo(props) {
let children = Children.map(props.children, child => (
<span>{child}</span>
));
return <div>{children}</div>;
}
it('should iterate over children', () => {
render(
<Foo>
foo<div>bar</div>
</Foo>,
scratch
);
let expected = div([span('foo'), span(div('bar'))]);
expect(serializeHtml(scratch)).to.equal(expected);
});
it('should work with no children', () => {
render(<Foo />, scratch);
expect(serializeHtml(scratch)).to.equal('<div></div>');
});
it('should work with children as zero number', () => {
const testNumber = 0;
render(<Foo>{testNumber}</Foo>, scratch);
expect(serializeHtml(scratch)).to.equal('<div><span>0</span></div>');
});
it('should propagate "this" context', () => {
const context = {};
const spy = vi.fn(child => child); // noop
const Foo = ({ children }) => {
return React.Children.map(children, spy, context);
};
render(<Foo>foo</Foo>, scratch);
expect(spy.mock.contexts[0]).to.equal(context);
});
it('should flatten result', () => {
const ProblemChild = ({ children }) => {
return React.Children.map(children, child => {
return React.Children.map(child.props.children, x => x);
}).filter(React.isValidElement);
};
const App = () => {
return (
<ProblemChild>
<div>
<div>1</div>
<div>2</div>
</div>
</ProblemChild>
);
};
render(<App />, scratch);
expect(scratch.textContent).to.equal('12');
});
it('should call with indices', () => {
const assertion = [];
const ProblemChild = ({ children }) => {
return React.Children.map(children, (child, i) => {
assertion.push(i);
return React.Children.map(child.props.children, (x, j) => {
assertion.push(j);
return x;
});
}).filter(React.isValidElement);
};
const App = () => {
return (
<ProblemChild>
<div>
<div>1</div>
<div>2</div>
</div>
<div>
<div>3</div>
<div>4</div>
</div>
</ProblemChild>
);
};
render(<App />, scratch);
expect(scratch.textContent).to.equal('1234');
expect(assertion.length).to.equal(6);
});
});
describe('.forEach', () => {
function Foo(props) {
let children = [];
Children.forEach(props.children, child =>
children.push(<span>{child}</span>)
);
return <div>{children}</div>;
}
it('should iterate over children', () => {
render(
<Foo>
foo<div>bar</div>
</Foo>,
scratch
);
let expected = div([span('foo'), span(div('bar'))]);
expect(serializeHtml(scratch)).to.equal(expected);
});
});
});
================================================
FILE: compat/test/browser/PureComponent.test.jsx
================================================
import React, { createElement } from 'preact/compat';
import { setupRerender } from 'preact/test-utils';
import { setupScratch, teardown } from '../../../test/_util/helpers';
import { vi } from 'vitest';
describe('PureComponent', () => {
/** @type {HTMLDivElement} */
let scratch;
/** @type {() => void} */
let rerender;
beforeEach(() => {
scratch = setupScratch();
rerender = setupRerender();
});
afterEach(() => {
teardown(scratch);
});
it('should be a class', () => {
expect(React).to.have.property('PureComponent').that.is.a('function');
});
it('should pass props in constructor', () => {
let spy = vi.fn();
class Foo extends React.PureComponent {
constructor(props) {
super(props);
spy(this.props, props);
}
}
React.render(<Foo foo="bar" />, scratch);
let expected = { foo: 'bar' };
expect(spy).toHaveBeenCalledWith(expected, expected);
});
it('should pass context in constructor', () => {
let instance;
// Not initializing state matches React behavior: https://codesandbox.io/s/rml19v8o2q
class Foo extends React.PureComponent {
constructor(props, context) {
super(props, context);
expect(this.props).to.equal(props);
expect(this.state).to.deep.equal(undefined);
expect(this.context).to.equal(context);
instance = this;
}
render(props) {
return <div {...props}>Hello</div>;
}
}
vi.spyOn(Foo.prototype, 'render');
const PROPS = { foo: 'bar' };
React.render(<Foo {...PROPS} />, scratch);
expect(Foo.prototype.render).toHaveBeenCalledOnce();
expect(Foo.prototype.render).toHaveBeenCalledWith(PROPS, {}, {});
expect(Foo.prototype.render).toHaveReturned({ type: 'div', props: PROPS });
expect(instance.props).to.deep.equal(PROPS);
expect(instance.state).to.deep.equal({});
expect(instance.context).to.deep.equal({});
expect(scratch.innerHTML).to.equal('<div foo="bar">Hello</div>');
});
it('should ignore the __source variable', () => {
const pureSpy = vi.fn();
const appSpy = vi.fn();
/** @type {(v) => void} */
let set;
class Pure extends React.PureComponent {
render() {
pureSpy();
return <div>Static</div>;
}
}
const App = () => {
const [, setState] = React.useState(0);
appSpy();
set = setState;
return <Pure __source={{}} />;
};
React.render(<App />, scratch);
expect(appSpy).toHaveBeenCalledOnce();
expect(pureSpy).toHaveBeenCalledOnce();
set(1);
rerender();
expect(appSpy).toHaveBeenCalledTimes(2);
expect(pureSpy).toHaveBeenCalledOnce();
});
it('should only re-render when props or state change', () => {
class C extends React.PureComponent {
render() {
return <div />;
}
}
let spy = vi.spyOn(C.prototype, 'render');
let inst = React.render(<C />, scratch);
expect(spy).toHaveBeenCalledOnce();
spy.mockClear();
inst = React.render(<C />, scratch);
expect(spy).not.toHaveBeenCalled();
let b = { foo: 'bar' };
inst = React.render(<C a="a" b={b} />, scratch);
expect(spy).toHaveBeenCalledOnce();
spy.mockClear();
inst = React.render(<C a="a" b={b} />, scratch);
expect(spy).not.toHaveBeenCalled();
inst.setState({});
rerender();
expect(spy).not.toHaveBeenCalled();
inst.setState({ a: 'a', b });
rerender();
expect(spy).toHaveBeenCalledOnce();
spy.mockClear();
inst.setState({ a: 'a', b });
rerender();
expect(spy).not.toHaveBeenCalled();
});
it('should update when props are removed', () => {
let spy = vi.fn();
class App extends React.PureComponent {
render() {
spy();
return <div>foo</div>;
}
}
React.render(<App a="foo" />, scratch);
React.render(<App />, scratch);
expect(spy).toHaveBeenCalledTimes(2);
});
it('should have "isPureReactComponent" property', () => {
let Pure = new React.PureComponent();
expect(Pure.isReactComponent).to.deep.equal(true);
});
});
================================================
FILE: compat/test/browser/cloneElement.test.jsx
================================================
import { createElement as preactH } from 'preact';
import { createElement, render, cloneElement } from 'preact/compat';
import { setupScratch, teardown } from '../../../test/_util/helpers';
describe('compat cloneElement', () => {
/** @type {HTMLDivElement} */
let scratch;
beforeEach(() => {
scratch = setupScratch();
});
afterEach(() => {
teardown(scratch);
});
it('should clone elements', () => {
let element = (
<foo a="b" c="d">
a<span>b</span>
</foo>
);
const clone = cloneElement(element);
delete clone._original;
delete element._original;
expect(clone).to.eql(element);
});
it('should support props.children', () => {
let element = <foo children={<span>b</span>} />;
let clone = cloneElement(element);
delete clone._original;
delete element._original;
expect(clone).to.eql(element);
expect(cloneElement(clone).props.children).to.eql(element.props.children);
});
it('children take precedence over props.children', () => {
let element = (
<foo children={<span>c</span>}>
<div>b</div>
</foo>
);
let clone = cloneElement(element);
delete clone._original;
delete element._original;
expect(clone).to.eql(element);
expect(clone.props.children.type).to.eql('div');
});
it('should support children in prop argument', () => {
let element = <foo />;
let children = [<span>b</span>];
let clone = cloneElement(element, { children });
expect(clone.props.children).to.eql(children);
});
it('single child argument takes precedence over props.children', () => {
let element = <foo />;
let childrenA = [<span>b</span>];
let childrenB = [<div>c</div>];
let clone = cloneElement(element, { children: childrenA }, ...childrenB);
expect(clone.props.children).to.eql(childrenB[0]);
});
it('multiple children arguments take precedence over props.children', () => {
let element = <foo />;
let childrenA = [<span>b</span>];
let childrenB = [<div>c</div>, 'd'];
let clone = cloneElement(element, { children: childrenA }, ...childrenB);
expect(clone.props.children).to.eql(childrenB);
});
it('children argument takes precedence over props.children even if falsey', () => {
let element = <foo />;
let childrenA = [<span>b</span>];
let clone = cloneElement(element, { children: childrenA }, undefined);
expect(clone.children).to.eql(undefined);
});
it('should skip cloning on invalid element', () => {
let element = { foo: 42 };
// @ts-expect-error
let clone = cloneElement(element);
expect(clone).to.eql(element);
});
it('should work with jsx constructor from core', () => {
function Foo(props) {
return <div>{props.value}</div>;
}
let clone = cloneElement(preactH(Foo, {}), { value: 'foo' });
render(clone, scratch);
expect(scratch.textContent).to.equal('foo');
});
});
================================================
FILE: compat/test/browser/compat.options.test.jsx
================================================
import { vnodeSpy, eventSpy } from '../../../test/_util/optionSpies';
import {
createElement,
render,
Component,
createRef
} from 'preact/compat';
import { setupRerender } from 'preact/test-utils';
import {
setupScratch,
teardown,
createEvent
} from '../../../test/_util/helpers';
describe('compat options', () => {
/** @type {HTMLDivElement} */
let scratch;
/** @type {() => void} */
let rerender;
/** @type {() => void} */
let increment;
/** @type {import('../../src/index').PropRef<HTMLButtonElement | null>} */
let buttonRef;
beforeEach(() => {
scratch = setupScratch();
rerender = setupRerender();
vnodeSpy.mockClear();
eventSpy.mockClear();
buttonRef = createRef();
});
afterEach(() => {
teardown(scratch);
});
class ClassApp extends Component {
constructor() {
super();
this.state = { count: 0 };
increment = () =>
this.setState(({ count }) => ({
count: count + 1
}));
}
render() {
return (
<button ref={buttonRef} onClick={increment}>
{this.state.count}
</button>
);
}
}
it('should call old options on mount', () => {
render(<ClassApp />, scratch);
expect(vnodeSpy).toHaveBeenCalled();
});
it('should call old options on event and update', () => {
render(<ClassApp />, scratch);
expect(scratch.innerHTML).to.equal('<button>0</button>');
buttonRef.current.dispatchEvent(createEvent('click'));
rerender();
expect(scratch.innerHTML).to.equal('<button>1</button>');
expect(vnodeSpy).toHaveBeenCalled();
expect(eventSpy).toHaveBeenCalled();
});
it('should call old options on unmount', () => {
render(<ClassApp />, scratch);
render(null, scratch);
expect(vnodeSpy).toHaveBeenCalled();
});
});
================================================
FILE: compat/test/browser/component.test.jsx
================================================
import { setupRerender } from 'preact/test-utils';
import { setupScratch, teardown } from '../../../test/_util/helpers';
import React, { createElement, Component, createRef } from 'preact/compat';
import { vi } from 'vitest';
describe('components', () => {
/** @type {HTMLDivElement} */
let scratch;
/** @type {() => void} */
let rerender;
beforeEach(() => {
scratch = setupScratch();
rerender = setupRerender();
});
afterEach(() => {
teardown(scratch);
});
it('should have "isReactComponent" property', () => {
let Comp = new React.Component();
expect(Comp.isReactComponent).to.deep.equal(true);
});
it('should be sane', () => {
let props;
class Demo extends React.Component {
render() {
props = this.props;
return <div id="demo">{this.props.children}</div>;
}
}
React.render(
<Demo a="b" c="d">
inner
</Demo>,
scratch
);
expect(props).to.exist.and.deep.equal({
a: 'b',
c: 'd',
children: 'inner'
});
expect(scratch.innerHTML).to.equal('<div id="demo">inner</div>');
});
it('should single out children before componentWillReceiveProps', () => {
let props;
class Child extends React.Component {
componentWillReceiveProps(newProps) {
props = newProps;
}
render() {
return this.props.children;
}
}
class Parent extends React.Component {
render() {
return <Child>second</Child>;
}
}
let a = React.render(<Parent />, scratch);
a.forceUpdate();
rerender();
expect(props).to.exist.and.deep.equal({
children: 'second'
});
});
describe('UNSAFE_* lifecycle methods', () => {
it('should support UNSAFE_componentWillMount', () => {
let spy = vi.fn();
class Foo extends React.Component {
// eslint-disable-next-line camelcase
UNSAFE_componentWillMount() {
spy();
}
render() {
return <h1>foo</h1>;
}
}
React.render(<Foo />, scratch);
expect(spy).toHaveBeenCalledOnce();
});
it('should support UNSAFE_componentWillMount #2', () => {
let spy = vi.fn();
class Foo extends React.Component {
render() {
return <h1>foo</h1>;
}
}
Object.defineProperty(Foo.prototype, 'UNSAFE_componentWillMount', {
value: spy
});
React.render(<Foo />, scratch);
expect(spy).toHaveBeenCalledOnce();
});
it('should support UNSAFE_componentWillReceiveProps', () => {
let spy = vi.fn();
class Foo extends React.Component {
// eslint-disable-next-line camelcase
UNSAFE_componentWillReceiveProps() {
spy();
}
render() {
return <h1>foo</h1>;
}
}
React.render(<Foo />, scratch);
// Trigger an update
React.render(<Foo />, scratch);
expect(spy).toHaveBeenCalledOnce();
});
it('should support UNSAFE_componentWillReceiveProps #2', () => {
let spy = vi.fn();
class Foo extends React.Component {
render() {
return <h1>foo</h1>;
}
}
Object.defineProperty(Foo.prototype, 'UNSAFE_componentWillReceiveProps', {
value: spy
});
React.render(<Foo />, scratch);
// Trigger an update
React.render(<Foo />, scratch);
expect(spy).toHaveBeenCalledOnce();
});
it('should support UNSAFE_componentWillUpdate', () => {
let spy = vi.fn();
class Foo extends React.Component {
// eslint-disable-next-line camelcase
UNSAFE_componentWillUpdate() {
spy();
}
render() {
return <h1>foo</h1>;
}
}
React.render(<Foo />, scratch);
// Trigger an update
React.render(<Foo />, scratch);
expect(spy).toHaveBeenCalledOnce();
});
it('should support UNSAFE_componentWillUpdate #2', () => {
let spy = vi.fn();
class Foo extends React.Component {
render() {
return <h1>foo</h1>;
}
}
Object.defineProperty(Foo.prototype, 'UNSAFE_componentWillUpdate', {
value: spy
});
React.render(<Foo />, scratch);
// Trigger an update
React.render(<Foo />, scratch);
expect(spy).toHaveBeenCalledOnce();
});
it('should not forward refs on class components', () => {
const ref = createRef();
class Foo extends React.Component {
render() {
return <div>foo</div>;
}
}
React.render(<Foo ref={ref} />, scratch);
expect(ref.current).not.to.be.undefined;
expect(ref.current instanceof Foo).to.equal(true);
expect(scratch.innerHTML).to.equal('<div>foo</div>');
});
it('should forward refs on functional components', () => {
const ref = createRef();
const Foo = props => <div ref={props.ref}>foo</div>;
React.render(<Foo ref={ref} />, scratch);
expect(ref.current).not.to.be.undefined;
expect(ref.current.nodeName).to.equal('DIV');
expect(scratch.innerHTML).to.equal('<div>foo</div>');
});
it('should alias UNSAFE_* method to non-prefixed variant', () => {
let inst;
class Foo extends React.Component {
// eslint-disable-next-line camelcase
UNSAFE_componentWillMount() {}
// eslint-disable-next-line camelcase
UNSAFE_componentWillReceiveProps() {}
// eslint-disable-next-line camelcase
UNSAFE_componentWillUpdate() {}
render() {
inst = this;
return <div>foo</div>;
}
}
React.render(<Foo />, scratch);
expect(inst.UNSAFE_componentWillMount).to.equal(inst.componentWillMount);
expect(inst.UNSAFE_componentWillReceiveProps).to.equal(
inst.UNSAFE_componentWillReceiveProps
);
expect(inst.UNSAFE_componentWillUpdate).to.equal(
inst.UNSAFE_componentWillUpdate
);
});
it('should call UNSAFE_* methods through Suspense with wrapper component #2525', () => {
class Page extends React.Component {
UNSAFE_componentWillMount() {}
render() {
return <h1>Example</h1>;
}
}
const Wrapper = () => <Page />;
vi.spyOn(Page.prototype, 'UNSAFE_componentWillMount');
React.render(
<React.Suspense fallback={<div>fallback</div>}>
<Wrapper />
</React.Suspense>,
scratch
);
expect(scratch.innerHTML).to.equal('<h1>Example</h1>');
expect(Page.prototype.UNSAFE_componentWillMount).toHaveBeenCalled();
});
});
describe('defaultProps', () => {
it('should apply default props on initial render', () => {
class WithDefaultProps extends Component {
constructor(props, context) {
super(props, context);
expect(props).to.be.deep.equal({
fieldA: 1,
fieldB: 2,
fieldC: 1,
fieldD: 2
});
}
render() {
return <div />;
}
}
WithDefaultProps.defaultProps = { fieldC: 1, fieldD: 1 };
React.render(
<WithDefaultProps fieldA={1} fieldB={2} fieldD={2} />,
scratch
);
});
it('should apply default props on rerender', () => {
let doRender;
class Outer extends Component {
constructor() {
super();
this.state = { i: 1 };
}
componentDidMount() {
doRender = () => this.setState({ i: 2 });
}
render(props, { i }) {
return <WithDefaultProps fieldA={1} fieldB={i} fieldD={i} />;
}
}
class WithDefaultProps extends Component {
constructor(props, context) {
super(props, context);
this.ctor(props, context);
}
ctor() {}
componentWillReceiveProps() {}
render() {
return <div />;
}
}
WithDefaultProps.defaultProps = { fieldC: 1, fieldD: 1 };
let proto = WithDefaultProps.prototype;
vi.spyOn(proto, 'ctor');
vi.spyOn(proto, 'componentWillReceiveProps');
vi.spyOn(proto, 'render');
React.render(<Outer />, scratch);
doRender();
const PROPS1 = {
fieldA: 1,
fieldB: 1,
fieldC: 1,
fieldD: 1
};
const PROPS2 = {
fieldA: 1,
fieldB: 2,
fieldC: 1,
fieldD: 2
};
expect(proto.ctor).toHaveBeenCalledWith(PROPS1, {});
expect(proto.render).toHaveBeenCalledWith(PROPS1, {}, {});
rerender();
// expect(proto.ctor).to.have.been.calledWith(PROPS2);
expect(proto.componentWillReceiveProps).toHaveBeenCalledWith(PROPS2, {});
expect(proto.render).toHaveBeenCalledWith(PROPS2, {}, {});
});
});
});
================================================
FILE: compat/test/browser/componentDidCatch.test.jsx
================================================
import { createElement, render, Component } from 'preact/compat';
import { setupScratch, teardown } from '../../../test/_util/helpers';
import { act } from 'preact/test-utils';
describe('componentDidCatch', () => {
let scratch;
beforeEach(() => {
scratch = setupScratch();
});
afterEach(() => {
teardown(scratch);
});
it('should pass errorInfo in compat', () => {
let info;
let update;
class Receiver extends Component {
constructor(props) {
super(props);
this.state = { error: null, i: 0 };
update = this.setState.bind(this);
}
componentDidCatch(error, errorInfo) {
info = errorInfo;
this.setState({ error });
}
render() {
if (this.state.error) return <div />;
// @ts-expect-error
if (this.state.i === 0) return <ThrowErr />;
return null;
}
}
function ThrowErr() {
throw new Error('fail');
}
act(() => {
render(<Receiver />, scratch);
});
act(() => {
update({ i: 1 });
});
expect(info).to.deep.equal({});
});
});
================================================
FILE: compat/test/browser/context.test.jsx
================================================
import { setupRerender } from 'preact/test-utils';
import { setupScratch, teardown } from '../../../test/_util/helpers';
import {
render,
createElement,
Fragment,
createContext,
Component,
useState,
useContext
} from 'preact/compat';
describe('components', () => {
/** @type {HTMLDivElement} */
let scratch;
/** @type {() => void} */
let rerender;
beforeEach(() => {
scratch = setupScratch();
rerender = setupRerender();
});
afterEach(() => {
teardown(scratch);
});
it('nested context updates propagate throughout the tree synchronously', () => {
const RouterContext = createContext({ location: '__default_value__' });
const route1 = '/page/1';
const route2 = '/page/2';
/** @type {() => void} */
let toggleLocalState;
/** @type {() => void} */
let toggleLocation;
/** @type {Array<{location: string, localState: boolean}>} */
let pageRenders = [];
function runUpdate() {
toggleLocalState();
toggleLocation();
}
/**
* @extends {Component<{children: any}, {location: string}>}
*/
class Router extends Component {
constructor(props) {
super(props);
this.state = { location: route1 };
toggleLocation = () => {
const oldLocation = this.state.location;
const newLocation = oldLocation === route1 ? route2 : route1;
// console.log('Toggling location', oldLocation, '->', newLocation);
this.setState({ location: newLocation });
};
}
render() {
// console.log('Rendering Router', { location: this.state.location });
return (
<RouterContext.Provider value={{ location: this.state.location }}>
{this.props.children}
</RouterContext.Provider>
);
}
}
/**
* @extends {Component<{children: any}>}
*/
class Route extends Component {
render() {
return (
<RouterContext.Consumer>
{contextValue => {
// console.log('Rendering Route', {
// location: contextValue.location
// });
// Pretend to do something with the context value
const newContextValue = { ...contextValue };
return (
<RouterContext.Provider value={newContextValue}>
{this.props.children}
</RouterContext.Provider>
);
}}
</RouterContext.Consumer>
);
}
}
function Page() {
const [localState, setLocalState] = useState(true);
const { location } = useContext(RouterContext);
pageRenders.push({ location, localState });
// console.log('Rendering Page', { location, localState });
toggleLocalState = () => {
let newValue = !localState;
// console.log('Toggling localState', localState, '->', newValue);
setLocalState(newValue);
};
return (
<>
<div>localState: {localState.toString()}</div>
<div>location: {location}</div>
<div>
<button type="button" onClick={runUpdate}>
Trigger update
</button>
</div>
</>
);
}
function App() {
return (
<Router>
<Route>
<Page />
</Route>
</Router>
);
}
render(<App />, scratch);
expect(pageRenders).to.deep.equal([{ location: route1, localState: true }]);
pageRenders = [];
runUpdate(); // Simulate button click
rerender();
// Page should rerender once with both propagated context and local state updates
expect(pageRenders).to.deep.equal([
{ location: route2, localState: false }
]);
});
});
================================================
FILE: compat/test/browser/createElement.test.jsx
================================================
import { createElement, render } from 'preact/compat';
import { setupScratch, teardown } from '../../../test/_util/helpers';
import { getSymbol } from './testUtils';
describe('compat createElement()', () => {
/** @type {HTMLDivElement} */
let scratch;
beforeEach(() => {
scratch = setupScratch();
});
afterEach(() => {
teardown(scratch);
});
it('should normalize vnodes', () => {
let vnode = (
<div a="b">
<a>t</a>
</div>
);
const $$typeof = getSymbol('react.element', 0xeac7);
expect(vnode).to.have.property('$$typeof', $$typeof);
expect(vnode).to.have.property('type', 'div');
expect(vnode).to.have.property('props').that.is.an('object');
expect(vnode.props).to.have.property('children');
expect(vnode.props.children).to.have.property('$$typeof', $$typeof);
expect(vnode.props.children).to.have.property('type', 'a');
expect(vnode.props.children).to.have.property('props').that.is.an('object');
expect(vnode.props.children.props).to.eql({ children: 't' });
});
it('should not normalize text nodes', () => {
// @ts-expect-error
String.prototype.capFLetter = function () {
return this.charAt(0).toUpperCase() + this.slice(1);
};
let vnode = <div>hi buddy</div>;
render(vnode, scratch);
expect(scratch.innerHTML).to.equal('<div>hi buddy</div>');
});
});
================================================
FILE: compat/test/browser/createFactory.test.jsx
================================================
import { render, createElement, createFactory } from 'preact/compat';
import { setupScratch, teardown } from '../../../test/_util/helpers';
describe('createFactory', () => {
/** @type {HTMLDivElement} */
let scratch;
beforeEach(() => {
scratch = setupScratch();
});
afterEach(() => {
teardown(scratch);
});
it('should create a DOM element', () => {
render(createFactory('span')({ class: 'foo' }, '1'), scratch);
expect(scratch.innerHTML).to.equal('<span class="foo">1</span>');
});
it('should create a component', () => {
const Foo = ({ id, children }) => <div id={id}>foo {children}</div>;
render(createFactory(Foo)({ id: 'value' }, 'bar'), scratch);
expect(scratch.innerHTML).to.equal('<div id="value">foo bar</div>');
});
});
================================================
FILE: compat/test/browser/events.test.jsx
================================================
import { render } from 'preact';
import {
setupScratch,
teardown,
createEvent,
supportsPassiveEvents
} from '../../../test/_util/helpers';
import { createElement } from 'preact/compat';
import { vi } from 'vitest';
describe('preact/compat events', () => {
/** @type {HTMLDivElement} */
let scratch;
let proto;
beforeEach(() => {
scratch = setupScratch();
proto = Element.prototype;
vi.spyOn(proto, 'addEventListener');
vi.spyOn(proto, 'removeEventListener');
});
afterEach(() => {
teardown(scratch);
proto.addEventListener.mockRestore();
proto.removeEventListener.mockRestore();
});
it('should patch events', () => {
let spy = vi.fn(event => {
expect(event.isDefaultPrevented()).to.be.false;
event.preventDefault();
expect(event.isDefaultPrevented()).to.be.true;
expect(event.isPropagationStopped()).to.be.false;
event.stopPropagation();
expect(event.isPropagationStopped()).to.be.true;
});
render(<div onClick={spy} />, scratch);
scratch.firstChild.click();
expect(spy).toHaveBeenCalledOnce();
const event = spy.mock.calls[0][0];
expect(event).to.haveOwnProperty('persist');
expect(event).to.haveOwnProperty('nativeEvent');
expect(event).to.haveOwnProperty('isDefaultPrevented');
expect(event).to.haveOwnProperty('isPropagationStopped');
expect(typeof event.persist).to.equal('function');
expect(typeof event.isDefaultPrevented).to.equal('function');
expect(typeof event.isPropagationStopped).to.equal('function');
expect(() => event.persist()).to.not.throw();
expect(() => event.isDefaultPrevented()).to.not.throw();
expect(() => event.isPropagationStopped()).to.not.throw();
});
it('should normalize ondoubleclick event', () => {
let vnode = <div onDoubleClick={() => null} />;
expect(vnode.props).to.haveOwnProperty('ondblclick');
});
it('should normalize onChange for textarea', () => {
let vnode = <textarea onChange={() => null} />;
expect(vnode.props).to.haveOwnProperty('oninput');
expect(vnode.props).to.not.haveOwnProperty('onchange');
vnode = <textarea oninput={() => null} onChange={() => null} />;
expect(vnode.props).to.haveOwnProperty('oninput');
expect(vnode.props).to.not.haveOwnProperty('onchange');
});
it('should by pass onInputCapture normalization for custom onInputAction when using it along with onChange', () => {
const onInputAction = () => null;
const onChange = () => null;
let vnode = <textarea onChange={onChange} onInputAction={onInputAction} />;
expect(vnode.props).to.haveOwnProperty('onInputAction');
expect(vnode.props.onInputAction).to.equal(onInputAction);
expect(vnode.props).to.haveOwnProperty('oninput');
expect(vnode.props.oninput).to.equal(onChange);
expect(vnode.props).to.not.haveOwnProperty('oninputCapture');
});
it('should normalize onChange for range', () => {
render(<input type="range" onChange={() => null} />, scratch);
expect(proto.addEventListener).toHaveBeenCalledOnce();
expect(proto.addEventListener).toHaveBeenCalledWith(
'input',
expect.any(Function),
false
);
});
it('should support onAnimationEnd', () => {
const func = vi.fn(() => {});
render(<div onAnimationEnd={func} />, scratch);
expect(proto.addEventListener).toHaveBeenCalledOnce();
expect(proto.addEventListener).toHaveBeenCalledWith(
'animationend',
expect.any(Function),
false
);
scratch.firstChild.dispatchEvent(createEvent('animationend'));
expect(func).toHaveBeenCalledOnce();
render(<div />, scratch);
expect(proto.removeEventListener).toHaveBeenCalledOnce();
expect(proto.removeEventListener).toHaveBeenCalledWith(
'animationend',
expect.any(Function),
false
);
});
it('should support onTouch* events', () => {
const onTouchStart = vi.fn();
const onTouchEnd = vi.fn();
const onTouchMove = vi.fn();
const onTouchCancel = vi.fn();
render(
<div
onTouchStart={onTouchStart}
onTouchEnd={onTouchEnd}
onTouchMove={onTouchMove}
onTouchCancel={onTouchCancel}
/>,
scratch
);
expect(proto.addEventListener.mock.calls.length).to.eql(4);
expect(proto.addEventListener.mock.calls[0].length).to.eql(3);
expect(proto.addEventListener.mock.calls[0][0]).to.eql('touchstart');
expect(proto.addEventListener.mock.calls[0][2]).to.eql(false);
expect(proto.addEventListener.mock.calls[1].length).to.eql(3);
expect(proto.addEventListener.mock.calls[1][0]).to.eql('touchend');
expect(proto.addEventListener.mock.calls[1][2]).to.eql(false);
expect(proto.addEventListener.mock.calls[2].length).to.eql(3);
expect(proto.addEventListener.mock.calls[2][0]).to.eql('touchmove');
expect(proto.addEventListener.mock.calls[2][2]).to.eql(false);
expect(proto.addEventListener.mock.calls[3].length).to.eql(3);
expect(proto.addEventListener.mock.calls[3][0]).to.eql('touchcancel');
expect(proto.addEventListener.mock.calls[3][2]).to.eql(false);
scratch.firstChild.dispatchEvent(createEvent('touchstart'));
expect(onTouchStart).toHaveBeenCalledOnce();
scratch.firstChild.dispatchEvent(createEvent('touchmove'));
expect(onTouchMove).toHaveBeenCalledOnce();
scratch.firstChild.dispatchEvent(createEvent('touchend'));
expect(onTouchEnd).toHaveBeenCalledOnce();
scratch.firstChild.dispatchEvent(createEvent('touchcancel'));
expect(onTouchCancel).toHaveBeenCalledOnce();
render(<div />, scratch);
expect(proto.removeEventListener.mock.calls.length).to.eql(4);
expect(proto.removeEventListener.mock.calls[0].length).to.eql(3);
expect(proto.removeEventListener.mock.calls[0][0]).to.eql('touchstart');
expect(proto.removeEventListener.mock.calls[0][2]).to.eql(false);
expect(proto.removeEventListener.mock.calls[1].length).to.eql(3);
expect(proto.removeEventListener.mock.calls[1][0]).to.eql('touchend');
expect(proto.removeEventListener.mock.calls[1][2]).to.eql(false);
expect(proto.removeEventListener.mock.calls[2].length).to.eql(3);
expect(proto.removeEventListener.mock.calls[2][0]).to.eql('touchmove');
expect(proto.removeEventListener.mock.calls[2][2]).to.eql(false);
expect(proto.removeEventListener.mock.calls[3].length).to.eql(3);
expect(proto.removeEventListener.mock.calls[3][0]).to.eql('touchcancel');
expect(proto.removeEventListener.mock.calls[3][2]).to.eql(false);
});
it('should support onTransitionEnd', () => {
const func = vi.fn(() => {});
render(<div onTransitionEnd={func} />, scratch);
expect(proto.addEventListener).toHaveBeenCalledOnce();
expect(proto.addEventListener).toHaveBeenCalledWith(
'transitionend',
expect.any(Function),
false
);
scratch.firstChild.dispatchEvent(createEvent('transitionend'));
expect(func).toHaveBeenCalledOnce();
render(<div />, scratch);
expect(proto.removeEventListener).toHaveBeenCalledOnce();
expect(proto.removeEventListener).toHaveBeenCalledWith(
'transitionend',
expect.any(Function),
false
);
});
it('should normalize onChange', () => {
let props = { onChange() {} };
function expectToBeNormalized(vnode, desc) {
expect(vnode, desc)
.to.have.property('props')
.with.all.keys(['oninput'].concat(vnode.props.type ? 'type' : []))
.and.property('oninput')
.that.is.a('function');
}
function expectToBeUnmodified(vnode, desc) {
expect(vnode, desc)
.to.have.property('props')
.eql({
...props,
...(vnode.props.type ? { type: vnode.props.type } : {})
});
}
expectToBeUnmodified(<div {...props} />, '<div>');
expectToBeUnmodified(
<input {...props} type="radio" />,
'<input type="radio">'
);
expectToBeUnmodified(
<input {...props} type="checkbox" />,
'<input type="checkbox">'
);
expectToBeUnmodified(
<input {...props} type="file" />,
'<input type="file">'
);
expectToBeNormalized(<textarea {...props} />, '<textarea>');
expectToBeNormalized(<input {...props} />, '<input>');
expectToBeNormalized(
<input {...props} type="text" />,
'<input type="text">'
);
});
it('should normalize beforeinput event listener', () => {
let spy = vi.fn();
render(<input onBeforeInput={spy} />, scratch);
scratch.firstChild.dispatchEvent(createEvent('beforeinput'));
expect(spy).toHaveBeenCalledOnce();
});
it('should normalize compositionstart event listener', () => {
let spy = vi.fn();
render(<input onCompositionStart={spy} />, scratch);
scratch.firstChild.dispatchEvent(createEvent('compositionstart'));
expect(spy).toHaveBeenCalledOnce();
});
it('should normalize onFocus to onfocusin', () => {
let spy = vi.fn();
render(<input onFocus={spy} />, scratch);
scratch.firstChild.dispatchEvent(createEvent('focusin'));
expect(spy).toHaveBeenCalledOnce();
});
it('should normalize onBlur to onfocusout', () => {
let spy = vi.fn();
render(<input onBlur={spy} />, scratch);
scratch.firstChild.dispatchEvent(createEvent('focusout'));
expect(spy).toHaveBeenCalledOnce();
});
if (supportsPassiveEvents()) {
it('should use capturing for event props ending with *Capture', () => {
let click = vi.fn();
render(
<div onTouchMoveCapture={click}>
<button type="button">Click me</button>
</div>,
scratch
);
expect(proto.addEventListener).toHaveBeenCalledOnce();
expect(proto.addEventListener).toHaveBeenCalledWith(
'touchmove',
expect.any(Function),
true
);
});
}
});
================================================
FILE: compat/test/browser/exports.test.js
================================================
import Compat from 'preact/compat';
import CompatClient from 'preact/compat/client';
// eslint-disable-next-line no-duplicate-imports
import * as Named from 'preact/compat';
// eslint-disable-next-line no-duplicate-imports
import * as NamedClient from 'preact/compat/client';
describe('compat exports', () => {
describe('client', () => {
it('should have a default export', () => {
expect(CompatClient.createRoot).to.be.a('function');
expect(CompatClient.hydrateRoot).to.be.a('function');
});
it('should have named exports', () => {
expect(NamedClient.createRoot).to.be.a('function');
expect(NamedClient.hydrateRoot).to.be.a('function');
});
});
it('should have a default export', () => {
expect(Compat.createElement).to.be.a('function');
expect(Compat.Component).to.be.a('function');
expect(Compat.Fragment).to.exist;
expect(Compat.render).to.be.a('function');
expect(Compat.hydrate).to.be.a('function');
expect(Compat.cloneElement).to.be.a('function');
expect(Compat.createContext).to.be.a('function');
expect(Compat.createRef).to.be.a('function');
// Hooks
expect(Compat.useState).to.be.a('function');
expect(Compat.useReducer).to.be.a('function');
expect(Compat.useEffect).to.be.a('function');
expect(Compat.useLayoutEffect).to.be.a('function');
expect(Compat.useRef).to.be.a('function');
expect(Compat.useMemo).to.be.a('function');
expect(Compat.useCallback).to.be.a('function');
expect(Compat.useContext).to.be.a('function');
expect(Compat.useSyncExternalStore).to.be.a('function');
expect(Compat.useInsertionEffect).to.be.a('function');
expect(Compat.useTransition).to.be.a('function');
expect(Compat.useDeferredValue).to.be.a('function');
// Suspense
expect(Compat.Suspense).to.be.a('function');
expect(Compat.lazy).to.be.a('function');
// Compat specific
expect(Compat.PureComponent).to.exist.and.be.a('function');
expect(Compat.createPortal).to.exist.and.be.a('function');
expect(Compat.createFactory).to.exist.and.be.a('function');
expect(Compat.isValidElement).to.exist.and.be.a('function');
expect(Compat.findDOMNode).to.exist.and.be.a('function');
expect(Compat.Children.map).to.exist.and.be.a('function');
expect(Compat.Children.forEach).to.exist.and.be.a('function');
expect(Compat.Children.count).to.exist.and.be.a('function');
expect(Compat.Children.toArray).to.exist.and.be.a('function');
expect(Compat.Children.only).to.exist.and.be.a('function');
expect(Compat.unmountComponentAtNode).to.exist.and.be.a('function');
expect(Compat.version).to.exist.and.be.a('string');
expect(Compat.startTransition).to.be.a('function');
expect(Compat.unstable_batchedUpdates).to.be.a('function');
});
it('should have named exports', () => {
expect(Named.createElement).to.be.a('function');
expect(Named.Component).to.be.a('function');
expect(Named.Fragment).to.exist;
expect(Named.render).to.be.a('function');
expect(Named.hydrate).to.be.a('function');
expect(Named.cloneElement).to.be.a('function');
expect(Named.createContext).to.be.a('function');
expect(Named.createRef).to.be.a('function');
// Hooks
expect(Named.useState).to.be.a('function');
expect(Named.useReducer).to.be.a('function');
expect(Named.useEffect).to.be.a('function');
expect(Named.useLayoutEffect).to.be.a('function');
expect(Named.useRef).to.be.a('function');
expect(Named.useMemo).to.be.a('function');
expect(Named.useCallback).to.be.a('function');
expect(Named.useContext).to.be.a('function');
// Suspense
expect(Named.Suspense).to.be.a('function');
expect(Named.lazy).to.be.a('function');
// Compat specific
expect(Named.PureComponent).to.exist.and.be.a('function');
expect(Named.createPortal).to.exist.and.be.a('function');
expect(Named.createFactory).to.exist.and.be.a('function');
expect(Named.isValidElement).to.exist.and.be.a('function');
expect(Named.findDOMNode).to.exist.and.be.a('function');
expect(Named.Children.map).to.exist.and.be.a('function');
expect(Named.Children.forEach).to.exist.and.be.a('function');
expect(Named.Children.count).to.exist.and.be.a('function');
expect(Named.Children.toArray).to.exist.and.be.a('function');
expect(Named.Children.only).to.exist.and.be.a('function');
expect(Named.unmountComponentAtNode).to.exist.and.be.a('function');
expect(Named.version).to.exist.and.be.a('string');
expect(Named.unstable_batchedUpdates).to.be.a('function');
});
});
================================================
FILE: compat/test/browser/findDOMNode.test.jsx
================================================
import React, { createElement, findDOMNode } from 'preact/compat';
import { setupScratch, teardown } from '../../../test/_util/helpers';
describe('findDOMNode()', () => {
/** @type {HTMLDivElement} */
let scratch;
class Helper extends React.Component {
render({ something }) {
if (something == null) return null;
if (something === false) return null;
return <div />;
}
}
beforeEach(() => {
scratch = setupScratch();
});
afterEach(() => {
teardown(scratch);
});
it.skip('should return DOM Node if render is not false nor null', () => {
const helper = React.render(<Helper />, scratch);
expect(findDOMNode(helper)).to.be.instanceof(Node);
});
it('should return null if given null', () => {
expect(findDOMNode(null)).to.be.null;
});
it('should return a regular DOM Element if given a regular DOM Element', () => {
let scratch = document.createElement('div');
expect(findDOMNode(scratch)).to.equalNode(scratch);
});
// NOTE: React.render() returning false or null has the component pointing
// to no DOM Node, in contrast, Preact always render an empty Text DOM Node.
it('should return null if render returns false', () => {
const helper = React.render(<Helper something={false} />, scratch);
expect(findDOMNode(helper)).to.be.null;
});
// NOTE: React.render() returning false or null has the component pointing
// to no DOM Node, in contrast, Preact always render an empty Text DOM Node.
it('should return null if render returns null', () => {
const helper = React.render(<Helper something={null} />, scratch);
expect(findDOMNode(helper)).to.be.null;
});
});
================================================
FILE: compat/test/browser/forwardRef.test.jsx
================================================
import {
createElement,
render,
createRef,
forwardRef,
hydrate,
memo,
useState,
useRef,
useImperativeHandle,
createPortal,
Component
} from 'preact/compat';
import { setupScratch, teardown } from '../../../test/_util/helpers';
import { setupRerender, act } from 'preact/test-utils';
import { getSymbol } from './testUtils';
import { vi } from 'vitest';
/* eslint-disable react/jsx-boolean-value, react/display-name, prefer-arrow-callback */
describe('forwardRef', () => {
/** @type {HTMLDivElement} */
let scratch, rerender;
beforeEach(() => {
scratch = setupScratch();
rerender = setupRerender();
});
afterEach(() => {
teardown(scratch);
});
it('should have isReactComponent flag', () => {
let App = forwardRef((_, ref) => <div ref={ref}>foo</div>);
expect(App.prototype.isReactComponent).to.equal(true);
});
it.skip('should have $$typeof property', () => {
let App = forwardRef((_, ref) => <div ref={ref}>foo</div>);
const expected = getSymbol('react.forward_ref', 0xf47);
expect(App.$$typeof).to.equal(expected);
});
it('should pass ref with createRef', () => {
let App = forwardRef((_, ref) => <div ref={ref}>foo</div>);
let ref = createRef();
render(<App ref={ref} />, scratch);
expect(ref.current).to.equalNode(scratch.firstChild);
});
it('should share the same ref reference', () => {
let passedRef;
let App = forwardRef((_, ref) => {
passedRef = ref;
return <div ref={ref}>foo</div>;
});
let ref = createRef();
render(<App ref={ref} />, scratch);
expect(ref).to.equal(passedRef);
});
it('should pass ref with a callback', () => {
let App = forwardRef((_, ref) => (
<div>
<span ref={ref}>foo</span>
</div>
));
let ref;
render(<App ref={x => (ref = x)} />, scratch);
expect(ref).to.equalNode(scratch.firstChild.firstChild);
});
it('should forward props', () => {
let spy = vi.fn();
let App = forwardRef(spy);
render(<App foo="bar" />, scratch);
expect(spy).toHaveBeenCalledWith({ foo: 'bar' }, null);
});
it('should support nesting', () => {
let passedRef;
let Inner = forwardRef((_, ref) => {
passedRef = ref;
return <div ref={ref}>inner</div>;
});
let App = forwardRef((_, ref) => <Inner ref={ref} />);
let ref = createRef();
render(<App ref={ref} />, scratch);
expect(ref).to.equal(passedRef);
});
it('should forward null on unmount', () => {
let passedRef;
let App = forwardRef((_, ref) => {
passedRef = ref;
return <div ref={ref}>foo</div>;
});
let ref = createRef();
render(<App ref={ref} />, scratch);
render(null, scratch);
expect(passedRef.current).to.equal(null);
});
it('should be able to render and hydrate forwardRef components', () => {
const Foo = ({ label, forwardedRef }) => (
<div ref={forwardedRef}>{label}</div>
);
const App = forwardRef((props, ref) => (
<Foo {...props} forwardedRef={ref} />
));
const ref = createRef();
const markup = <App ref={ref} label="Hi" />;
const element = document.createElement('div');
element.innerHTML = '<div>Hi</div>';
expect(element.textContent).to.equal('Hi');
expect(ref.current == null).to.equal(true);
hydrate(markup, element);
expect(element.textContent).to.equal('Hi');
expect(ref.current.tagName).to.equal('DIV');
});
it('should update refs when switching between children', () => {
function Foo({ forwardedRef, setRefOnDiv }) {
return (
<section>
<div ref={setRefOnDiv ? forwardedRef : null}>First</div>
<span ref={setRefOnDiv ? null : forwardedRef}>Second</span>
</section>
);
}
const App = forwardRef((props, ref) => (
<Foo {...props} forwardedRef={ref} />
));
const ref = createRef();
render(<App ref={ref} setRefOnDiv={true} />, scratch);
expect(ref.current.nodeName).to.equal('DIV');
render(<App ref={ref} setRefOnDiv={false} />, scratch);
expect(ref.current.nodeName).to.equal('SPAN');
});
it('should support rendering null', () => {
const App = forwardRef(() => null);
const ref = createRef();
render(<App ref={ref} />, scratch);
expect(ref.current == null).to.equal(true);
});
it('should support rendering null for multiple children', () => {
const Foo = forwardRef(() => null);
const ref = createRef();
render(
<div>
<div />
<Foo ref={ref} />
<div />
</div>,
scratch
);
expect(ref.current == null).to.equal(true);
});
it('should support useImperativeHandle', () => {
/** @type {(v) => void} */
let setValue;
const Foo = forwardRef((props, ref) => {
const result = useState('');
setValue = result[1];
useImperativeHandle(
ref,
() => ({
getValue: () => result[0]
}),
[result[0]]
);
return <input ref={ref} value={result[0]} />;
});
const ref = createRef();
render(<Foo ref={ref} />, scratch);
expect(typeof ref.current.getValue).to.equal('function');
expect(ref.current.getValue()).to.equal('');
setValue('x');
rerender();
expect(typeof ref.current.getValue).to.equal('function');
expect(ref.current.getValue()).to.equal('x');
});
it('should not bailout if forwardRef is not wrapped in memo', () => {
const Component = props => <div {...props} />;
let renderCount = 0;
const App = forwardRef((props, ref) => {
renderCount++;
return <Component {...props} forwardedRef={ref} />;
});
const ref = createRef();
render(<App ref={ref} optional="foo" />, scratch);
expect(renderCount).to.equal(1);
render(<App ref={ref} optional="foo" />, scratch);
expect(renderCount).to.equal(2);
});
it('should bailout if forwardRef is wrapped in memo', () => {
const Component = props => <div ref={props.forwardedRef} />;
let renderCount = 0;
const App = memo(
forwardRef((props, ref) => {
renderCount++;
return <Component {...props} forwardedRef={ref} />;
})
);
const ref = createRef();
render(<App ref={ref} optional="foo" />, scratch);
expect(renderCount).to.equal(1);
expect(ref.current.nodeName).to.equal('DIV');
render(<App ref={ref} optional="foo" />, scratch);
expect(renderCount).to.equal(1);
const differentRef = createRef();
render(<App ref={differentRef} optional="foo" />, scratch);
expect(renderCount).to.equal(2);
expect(ref.current == null).to.equal(true);
expect(differentRef.current.nodeName).to.equal('DIV');
render(<App ref={ref} optional="bar" />, scratch);
expect(renderCount).to.equal(3);
});
it('should bailout if forwardRef is wrapped in memo using function refs', () => {
const Component = props => <div ref={props.forwardedRef} />;
let renderCount = 0;
const App = memo(
forwardRef((props, ref) => {
renderCount++;
return <Component {...props} forwardedRef={ref} />;
})
);
const ref = vi.fn();
render(<App ref={ref} optional="foo" />, scratch);
expect(renderCount).to.equal(1);
expect(ref).toHaveBeenCalled();
ref.mockClear();
render(<App ref={ref} optional="foo" />, scratch);
expect(renderCount).to.equal(1);
const differentRef = vi.fn();
render(<App ref={differentRef} optional="foo" />, scratch);
expect(renderCount).to.equal(2);
expect(ref).toHaveBeenCalledWith(null);
expect(differentRef).toHaveBeenCalled();
differentRef.mockClear();
render(<App ref={ref} optional="bar" />, scratch);
expect(renderCount).to.equal(3);
});
it('should pass ref through memo() with custom comparer function', () => {
const Foo = props => <div ref={props.forwardedRef} />;
let renderCount = 0;
const App = memo(
forwardRef((props, ref) => {
renderCount++;
return <Foo {...props} forwardedRef={ref} />;
}),
(o, p) => o.a === p.a && o.b === p.b
);
const ref = createRef();
render(<App ref={ref} a="0" b="0" c="1" />, scratch);
expect(renderCount).to.equal(1);
expect(ref.current.nodeName).to.equal('DIV');
// Changing either a or b rerenders
render(<App ref={ref} a="0" b="1" c="1" />, scratch);
expect(renderCount).to.equal(2);
// Changing c doesn't rerender
render(<App ref={ref} a="0" b="1" c="2" />, scratch);
expect(renderCount).to.equal(2);
const App2 = memo(App, (o, p) => o.a === p.a && o.c === p.c);
render(<App2 ref={ref} a="0" b="0" c="0" />, scratch);
expect(renderCount).to.equal(3);
// Changing just b no longer updates
render(<App2 ref={ref} a="0" b="1" c="0" />, scratch);
expect(renderCount).to.equal(3);
// Changing just a and c updates
render(<App2 ref={ref} a="2" b="2" c="2" />, scratch);
expect(renderCount).to.equal(4);
// Changing just c does not update
render(<App2 ref={ref} a="2" b="2" c="3" />, scratch);
expect(renderCount).to.equal(4);
// Changing ref still rerenders
const differentRef = createRef();
render(<App2 ref={differentRef} a="2" b="2" c="3" />, scratch);
expect(renderCount).to.equal(5);
expect(ref.current == null).to.equal(true);
expect(differentRef.current.nodeName).to.equal('DIV');
});
it('calls ref when this is a function.', () => {
const spy = vi.fn();
const Bar = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({ foo: 100 }));
return null;
});
render(<Bar ref={spy} />, scratch);
expect(spy).toHaveBeenCalledOnce();
expect(spy).toHaveBeenCalledWith({ foo: 100 });
});
it('stale ref missing with passed useRef', () => {
let _ref = null;
let _set = null;
const Inner = forwardRef((props, ref) => {
const _hook = useState(null);
_ref = ref;
_set = _hook[1];
return <div ref={ref} />;
});
const Parent = () => {
const parentRef = useRef(null);
return <Inner ref={parentRef}>child</Inner>;
};
act(() => {
render(<Parent />, scratch);
});
expect(_ref.current).to.equal(scratch.firstChild);
act(() => {
_set(1);
rerender();
});
expect(_ref.current).to.equal(scratch.firstChild);
});
it('should forward at diff time instead vnode-creation.', () => {
let ref, forceTransition, forceOpen;
const Portal = ({ children, open }) =>
open ? createPortal(children, scratch) : null;
const Wrapper = forwardRef((_props, ref) => <div ref={ref}>Wrapper</div>);
const Transition = ({ children }) => {
const state = useState(0);
forceTransition = state[1];
expect(children.props.ref).to.not.be.undefined;
return children;
};
const App = () => {
const openState = useState(false);
forceOpen = openState[1];
ref = useRef();
return (
<Portal open={openState[0]}>
<Transition>
<Wrapper ref={ref} />
</Transition>
</Portal>
);
};
render(<App />, scratch);
act(() => {
forceOpen(true);
});
expect(ref.current.innerHTML).to.equal('Wrapper');
act(() => {
forceTransition(1);
});
expect(ref.current.innerHTML).to.equal('Wrapper');
});
// Issue #2566
it('should pass null as ref when no ref is present', () => {
let actual;
const App = forwardRef((_, ref) => {
actual = ref;
return <div />;
});
render(<App />, scratch);
expect(actual).to.equal(null);
});
// Issue #2599
it('should not crash when explicitly passing null', () => {
let actual;
const App = forwardRef((_, ref) => {
actual = ref;
return <div />;
});
// eslint-disable-next-line new-cap
render(App({}, null), scratch);
expect(actual).to.equal(null);
});
// Issue #3483
it('should allow for multiple refs', () => {
let actual;
const App = forwardRef((_, ref) => {
actual = ref;
return <div />;
});
const ref = { a: createRef(), b: createRef() };
// eslint-disable-next-line new-cap
render(<App ref={ref} />, scratch);
expect(actual).to.equal(ref);
});
it('should not leak context into refs', () => {
class Provider extends Component {
getChildContext() {
return { foo: 2 };
}
render() {
return this.props.children;
}
}
let actual;
const Forwarded = forwardRef((_, ref) => {
actual = ref;
return <div />;
});
render(
<Provider>
<Forwarded />
</Provider>,
scratch
);
expect(actual).to.equal(null);
});
// Issue #4769
it('should attach .render pointing to the original render function', () => {
function Foo(props, ref) {
return <div ref={ref} />;
}
const Forwarded = forwardRef(Foo);
expect(Forwarded.render).to.equal(Foo);
});
});
================================================
FILE: compat/test/browser/hooks.test.jsx
================================================
import { createContext } from 'preact';
import {
createElement,
useDeferredValue,
useInsertionEffect,
useTransition,
render,
useState,
useContext,
useEffect
} from 'preact/compat';
import { setupRerender, act } from 'preact/test-utils';
import { setupScratch, teardown } from '../../../test/_util/helpers';
import { vi } from 'vitest';
describe('React-18-hooks', () => {
/** @type {HTMLDivElement} */
let scratch;
/** @type {() => void} */
let rerender;
beforeEach(() => {
scratch = setupScratch();
rerender = setupRerender();
});
afterEach(() => {
teardown(scratch);
});
describe('useDeferredValue', () => {
it('returns the value', () => {
const App = props => {
const val = useDeferredValue(props.text);
return <p>{val}</p>;
};
render(<App text="hello world" />, scratch);
expect(scratch.innerHTML).to.equal('<p>hello world</p>');
});
});
describe('useInsertionEffect', () => {
it('runs the effect', () => {
const spy = vi.fn();
const App = () => {
useInsertionEffect(spy, []);
return <p>hello world</p>;
};
act(() => {
render(<App />, scratch);
});
expect(scratch.innerHTML).to.equal('<p>hello world</p>');
expect(spy).toHaveBeenCalledOnce();
});
});
describe('useTransition', () => {
it('runs transitions', () => {
const spy = vi.fn();
/** @type {(v) => void} */
let go;
const App = () => {
const [isPending, start] = useTransition();
go = start;
return <p>Pending: {isPending ? 'yes' : 'no'}</p>;
};
render(<App />, scratch);
expect(scratch.innerHTML).to.equal('<p>Pending: no</p>');
go(spy);
rerender();
expect(spy).toHaveBeenCalledOnce();
expect(scratch.innerHTML).to.equal('<p>Pending: no</p>');
});
});
it('should release the force-flag on context-consumers', () => {
let sequence, setSubmitting;
const Ctx = createContext({
isSubmitting: false,
setIsSubmitting: () => {}
});
const FormWrapper = props => {
const [isSubmitting, setIsSubmitting] = useState(false);
setSubmitting = setIsSubmitting;
return (
<Ctx.Provider value={{ isSubmitting, setIsSubmitting }}>
{props.children}
</Ctx.Provider>
);
};
const Form = () => {
const { isSubmitting, setIsSubmitting } = useContext(Ctx);
const [shouldSubmit, setShouldSubmit] = useState(false);
sequence = () => {
setShouldSubmit(true);
};
const submit = () => {
setIsSubmitting(true);
setShouldSubmit(false);
};
useEffect(() => {
if (shouldSubmit) {
submit();
}
}, [shouldSubmit]);
return (
<p>
isSubmitting: {'' + isSubmitting} | shouldSubmit: {'' + shouldSubmit}
</p>
);
};
const App = () => {
return (
<FormWrapper>
<Form />
</FormWrapper>
);
};
render(<App />, scratch);
act(() => {
sequence();
});
expect(scratch.innerHTML).to.equal(
'<p>isSubmitting: true | shouldSubmit: false</p>'
);
act(() => {
setSubmitting(false);
});
expect(scratch.innerHTML).to.equal(
'<p>isSubmitting: false | shouldSubmit: false</p>'
);
act(() => {
sequence();
});
expect(scratch.innerHTML).to.equal(
'<p>isSubmitting: true | shouldSubmit: false</p>'
);
});
});
================================================
FILE: compat/test/browser/hydrate.test.jsx
================================================
import { createElement, hydrate } from 'preact/compat';
import { setupScratch, teardown } from '../../../test/_util/helpers';
import { vi } from 'vitest';
describe('compat hydrate', () => {
/** @type {HTMLDivElement} */
let scratch;
beforeEach(() => {
scratch = setupScratch();
});
afterEach(() => {
teardown(scratch);
});
it('should render react-style jsx', () => {
const input = document.createElement('input');
scratch.appendChild(input);
input.focus();
expect(document.activeElement).to.equalNode(input);
hydrate(<input />, scratch);
expect(document.activeElement).to.equalNode(input);
});
it('should call the callback', () => {
scratch.innerHTML = '<div></div>';
let spy = vi.fn();
hydrate(<div />, scratch, spy);
expect(spy).toHaveBeenCalledOnce();
expect(spy).toHaveBeenCalledWith();
});
});
================================================
FILE: compat/test/browser/isFragment.test.js
================================================
import { createElement as preactCreateElement, Fragment } from 'preact';
import React, { isFragment } from 'preact/compat';
describe('isFragment', () => {
it('should check return false for invalid arguments', () => {
expect(isFragment(null)).to.equal(false);
expect(isFragment(false)).to.equal(false);
expect(isFragment(true)).to.equal(false);
expect(isFragment('foo')).to.equal(false);
expect(isFragment(123)).to.equal(false);
expect(isFragment([])).to.equal(false);
expect(isFragment({})).to.equal(false);
});
it('should detect a preact vnode', () => {
expect(isFragment(preactCreateElement(Fragment, {}))).to.equal(true);
});
it('should detect a compat vnode', () => {
expect(isFragment(React.createElement(Fragment, {}))).to.equal(true);
});
});
================================================
FILE: compat/test/browser/isMemo.test.jsx
================================================
import { createElement as preactCreateElement, Fragment } from 'preact';
import React, { createElement, isMemo, memo } from 'preact/compat';
describe('isMemo', () => {
it('should check return false for invalid arguments', () => {
expect(isMemo(null)).to.equal(false);
expect(isMemo(false)).to.equal(false);
expect(isMemo(true)).to.equal(false);
expect(isMemo('foo')).to.equal(false);
expect(isMemo(123)).to.equal(false);
expect(isMemo([])).to.equal(false);
expect(isMemo({})).to.equal(false);
});
it('should detect a preact memo', () => {
function Foo() {
return <h1>Hello World</h1>;
}
let App = memo(Foo);
expect(isMemo(App)).to.equal(true);
});
it('should not detect a normal element', () => {
function Foo() {
return <h1>Hello World</h1>;
}
expect(isMemo(Foo)).to.equal(false);
});
it('should detect a preact vnode as false', () => {
expect(isMemo(preactCreateElement(Fragment, {}))).to.equal(false);
});
it('should detect a compat vnode as false', () => {
expect(isMemo(React.createElement(Fragment, {}))).to.equal(false);
});
});
================================================
FILE: compat/test/browser/isValidElement.test.js
================================================
import { createElement as preactCreateElement } from 'preact';
import React, { isValidElement } from 'preact/compat';
describe('isValidElement', () => {
it('should check return false for invalid arguments', () => {
expect(isValidElement(null)).to.equal(false);
expect(isValidElement(false)).to.equal(false);
expect(isValidElement(true)).to.equal(false);
expect(isValidElement('foo')).to.equal(false);
expect(isValidElement(123)).to.equal(false);
expect(isValidElement([])).to.equal(false);
expect(isValidElement({})).to.equal(false);
});
it('should detect a preact vnode', () => {
expect(isValidElement(preactCreateElement('div', {}))).to.equal(true);
});
it('should detect a compat vnode', () => {
expect(isValidElement(React.createElement('div', {}))).to.equal(true);
});
});
================================================
FILE: compat/test/browser/memo.test.jsx
================================================
import { setupRerender } from 'preact/test-utils';
import {
createEvent,
setupScratch,
teardown
} from '../../../test/_util/helpers';
import React, {
createElement,
Component,
render,
memo,
useState
} from 'preact/compat';
import { vi, expect } from 'vitest';
const h = React.createElement;
describe('memo()', () => {
/** @type {HTMLDivElement} */
let scratch;
/** @type {() => void} */
let rerender;
beforeEach(() => {
scratch = setupScratch();
rerender = setupRerender();
});
afterEach(() => {
teardown(scratch);
});
it('should have isReactComponent flag', () => {
// eslint-disable-next-line react/display-name
let App = memo(() => <div>foo</div>);
expect(App.prototype.isReactComponent).to.equal(true);
});
it('should work with function components', () => {
let spy = vi.fn();
function Foo() {
spy();
return <h1>Hello World</h1>;
}
let Memoized = memo(Foo);
/** @type {() => void} */
let update;
class App extends Component {
constructor() {
super();
update = () => this.setState({});
}
render() {
return <Memoized />;
}
}
render(<App />, scratch);
expect(spy).toHaveBeenCalledOnce();
update();
rerender();
expect(spy).toHaveBeenCalledOnce();
});
it('should support adding refs', () => {
let spy = vi.fn();
let ref = null;
function Foo(props) {
spy();
return <h1 ref={props.ref}>Hello World</h1>;
}
let Memoized = memo(Foo);
/** @type {(v) => void} */
let update;
class App extends Component {
constructor() {
super();
update = () => this.setState({});
}
render() {
return <Memoized ref={ref} />;
}
}
render(<App />, scratch);
expect(spy).toHaveBeenCalledOnce();
ref = {};
update();
rerender();
expect(ref.current).to.equal(scratch.firstChild);
// TODO: not sure whether this is in-line with react...
expect(spy).toHaveBeenCalledTimes(2);
});
it('should support custom comparer functions', () => {
function Foo() {
return <h1>Hello World</h1>;
}
let spy = vi.fn(() => true);
let Memoized = memo(Foo, spy);
/** @type {(v) => void} */
let update;
class App extends Component {
constructor() {
super();
update = () => this.setState({});
}
render() {
return <Memoized />;
}
}
render(<App />, scratch);
update();
rerender();
expect(spy).toHaveBeenCalledOnce();
expect(spy).toHaveBeenCalledWith({}, {});
});
it('should rerender when custom comparer returns false', () => {
const spy = vi.fn();
function Foo() {
spy();
return <h1>Hello World</h1>;
}
const App = memo(Foo, () => false);
render(<App />, scratch);
expect(spy).toHaveBeenCalledOnce();
render(<App foo="bar" />, scratch);
expect(spy).toHaveBeenCalledTimes(2);
});
it('should pass props and nextProps to comparer fn', () => {
const spy = vi.fn(() => false);
function Foo() {
return <div>foo</div>;
}
const props = { foo: true };
const nextProps = { foo: false };
const App = memo(Foo, spy);
render(h(App, props), scratch);
render(h(App, nextProps), scratch);
expect(spy).toHaveBeenCalledWith(props, nextProps);
});
it('should nest without errors', () => {
const Foo = () => <div>foo</div>;
const App = memo(memo(Foo));
// eslint-disable-next-line prefer-arrow-callback
expect(function () {
render(<App />, scratch);
}).to.not.throw();
});
it('should pass ref through nested memos', () => {
const Foo = props => <h1 ref={props.ref}>Hello World</h1>;
const App = memo(memo(Foo));
const ref = {};
render(<App ref={ref} />, scratch);
expect(ref.current).not.to.be.undefined;
expect(ref.current).to.equal(scratch.firstChild);
});
it('should not unnecessarily reorder children #2895', () => {
const array = [{ name: 'A' }, { name: 'B' }, { name: 'C' }, { name: 'D' }];
const List = () => {
const [selected, setSelected] = useState('');
return (
<ol>
{array.map(item => (
<ListItem
{...{
isSelected: item.name === selected,
setSelected,
...item
}}
key={item.name}
/>
))}
</ol>
);
};
const ListItem = memo(({ name, isSelected, setSelected }) => {
const handleClick = () => setSelected(name);
return (
<li class={isSelected ? 'selected' : null} onClick={handleClick}>
{name}
</li>
);
});
render(<List />, scratch);
expect(scratch.innerHTML).to.equal(
`<ol><li>A</li><li>B</li><li>C</li><li>D</li></ol>`
);
let listItem = scratch.querySelector('li:nth-child(3)');
listItem.dispatchEvent(createEvent('click'));
rerender();
expect(scratch.innerHTML).to.equal(
`<ol><li>A</li><li>B</li><li class="selected">C</li><li>D</li></ol>`
);
});
it('should attach .type pointing to the original component', () => {
function Foo() {
return <div />;
}
const Memoized = memo(Foo);
expect(Memoized.type).to.equal(Foo);
});
it('should recover and render siblings when memo child throws once', () => {
let causeError = true;
const TestWithMemo = /** @type {any} */ (memo(
/** @type {(props: { n: number }) => any} */ (props => {
const { n } = props;
if (n === 2 && causeError) {
throw new Error('test error');
}
return <p>test {n}</p>;
})
));
class App extends Component {
static getDerivedStateFromError() {
causeError = false;
return {};
}
render() {
return (
<div>
<h1>Example</h1>
<TestWithMemo n={1} />
<TestWithMemo n={2} />
<TestWithMemo n={3} />
</div>
);
}
}
render(<App />, scratch);
rerender();
expect(scratch.textContent).to.equal('Exampletest 1test 2test 3');
});
});
================================================
FILE: compat/test/browser/portals.test.jsx
================================================
import React, {
createElement,
render,
createPortal,
useState,
Component,
useEffect,
Fragment,
useId
} from 'preact/compat';
import { setupScratch, teardown } from '../../../test/_util/helpers';
import { setupRerender, act } from 'preact/test-utils';
import { expect } from 'chai';
import { vi } from 'vitest';
/* eslint-disable react/jsx-boolean-value, react/display-name, prefer-arrow-callback */
describe('Portal', () => {
/** @type {HTMLDivElement} */
let scratch;
/** @type {HTMLDivElement} */
let scratch2;
let rerender;
beforeEach(() => {
scratch = setupScratch();
scratch2 = setupScratch('scratch-2');
rerender = setupRerender();
});
afterEach(() => {
teardown(scratch);
teardown(scratch2);
});
it('should render into a different root node', () => {
let root = document.createElement('div');
document.body.appendChild(root);
function Foo(props) {
return <div>{createPortal(props.children, root)}</div>;
}
render(<Foo>foobar</Foo>, scratch);
expect(root.innerHTML).to.equal('foobar');
root.parentNode.removeChild(root);
});
it('should insert the portal', () => {
/** @type {() => void} */
let setFalse;
function Foo(props) {
const [mounted, setMounted] = useState(true);
setFalse = () => setMounted(() => false);
return (
<div>
<p>Hello</p>
{mounted && createPortal(props.children, scratch)}
</div>
);
}
render(<Foo>foobar</Foo>, scratch);
expect(scratch.innerHTML).to.equal('foobar<div><p>Hello</p></div>');
setFalse();
rerender();
expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
});
it('should order portal children well', () => {
/** @type {() => void} */
let bump;
function Modal() {
const [state, setState] = useState(0);
bump = () => setState(() => 1);
return (
<Fragment>
{state === 1 && <div>top</div>}
<div>middle</div>
<div>bottom</div>
</Fragment>
);
}
function Foo(props) {
return createPortal(<Modal />, scratch);
}
render(<Foo />, scratch);
expect(scratch.innerHTML).to.equal('<div>middle</div><div>bottom</div>');
bump();
rerender();
expect(scratch.innerHTML).to.equal(
'<div>top</div><div>middle</div><div>bottom</div>'
);
});
it('should toggle the portal', () => {
/** @type {() => void} */
let toggle;
function Foo(props) {
const [mounted, setMounted] = useState(true);
toggle = () => setMounted(s => !s);
return (
<div>
<p>Hello</p>
{mounted && createPortal(props.children, scratch)}
</div>
);
}
render(
<Foo>
<div>foobar</div>
</Foo>,
scratch
);
expect(scratch.innerHTML).to.equal(
'<div>foobar</div><div><p>Hello</p></div>'
);
toggle();
rerender();
expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
toggle();
rerender();
expect(scratch.innerHTML).to.equal(
'<div><p>Hello</p></div><div>foobar</div>'
);
});
it('should notice prop changes on the portal', () => {
/** @type {(c) => void} */
let set;
function Foo(props) {
const [additionalProps, setProps] = useState({
style: { backgroundColor: 'red' }
});
set = c => setProps(c);
return (
<div>
<p>Hello</p>
{createPortal(<p {...additionalProps}>Foo</p>, scratch)}
</div>
);
}
render(<Foo />, scratch);
expect(scratch.firstChild.style.backgroundColor).to.equal('red');
set({});
rerender();
expect(scratch.firstChild.style.backgroundColor).to.equal('');
});
it('should not unmount the portal component', () => {
let spy = vi.fn();
/** @type {(c) => void} */
let set;
class Child extends Component {
componentWillUnmount() {
spy();
}
render(props) {
return props.children;
}
}
function Foo(props) {
const [additionalProps, setProps] = useState({
style: { background: 'red' }
});
set = c => setProps(c);
return (
<div>
<p>Hello</p>
{createPortal(<Child {...additionalProps}>Foo</Child>, scratch)}
</div>
);
}
render(<Foo />, scratch);
expect(spy).not.toHaveBeenCalled();
set({});
rerender();
expect(spy).not.toHaveBeenCalled();
});
it('should not render <undefined> for Portal nodes', () => {
let root = document.createElement('div');
let dialog = document.createElement('div');
dialog.id = 'container';
scratch.appendChild(root);
scratch.appendChild(dialog);
function Dialog() {
return <div>Dialog content</div>;
}
function App() {
return <div>{createPortal(<Dialog />, dialog)}</div>;
}
render(<App />, root);
expect(scratch.firstChild.firstChild.childNodes.length).to.equal(0);
});
it('should have unique ids for each portal', () => {
let root = document.createElement('div');
let dialog = document.createElement('div');
dialog.id = 'container';
scratch.appendChild(root);
scratch.appendChild(dialog);
function Id() {
const id = useId();
return id;
}
function Dialog() {
return <Id />;
}
function App() {
return (
<div>
<Id />
{createPortal(<Dialog />, dialog)}
</div>
);
}
render(<App />, root);
expect(scratch.innerHTML).to.equal(
'<div><div>P0-0</div></div><div id="container">P0-1</div>'
);
});
it('should have unique ids for each portal, even when a new one shows up', () => {
let root = document.createElement('div');
let dialog = document.createElement('div');
dialog.id = 'container';
scratch.appendChild(root);
scratch.appendChild(dialog);
function Id() {
const id = useId();
return id;
}
function Dialog(props) {
return <Id />;
}
function App(props) {
return (
<div>
<Id />
{createPortal(<Dialog />, dialog)}
{props.renderPortal && createPortal(<Dialog />, dialog)}
</div>
);
}
render(<App />, root);
expect(scratch.innerHTML).to.equal(
'<div><div>P0-0</div></div><div id="container">P0-1</div>'
);
render(<App renderPortal={true} />, root);
expect(scratch.innerHTML).to.equal(
'<div><div>P0-0</div></div><div id="container">P0-1P0-2</div>'
);
});
it('should unmount Portal', () => {
let root = document.createElement('div');
let dialog = document.createElement('div');
dialog.id = 'container';
scratch.appendChild(root);
scratch.appendChild(dialog);
function Dialog() {
return <div>Dialog content</div>;
}
function App() {
return <div>{createPortal(<Dialog />, dialog)}</div>;
}
render(<App />, root);
expect(dialog.childNodes.length).to.equal(1);
render(null, root);
expect(dialog.childNodes.length).to.equal(0);
});
it('should leave a working root after the portal', () => {
/** @type {() => void} */
let toggle,
/** @type {() => void} */
toggle2;
function Foo(props) {
const [mounted, setMounted] = useState(false);
const [mounted2, setMounted2] = useState(true);
toggle = () => setMounted(s => !s);
toggle2 = () => setMounted2(s => !s);
return (
<div>
{mounted && createPortal(props.children, scratch)}
{mounted2 && <p>Hello</p>}
</div>
);
}
render(
<Foo>
<div>foobar</div>
</Foo>,
scratch
);
expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
toggle();
rerender();
expect(scratch.innerHTML).to.equal(
'<div><p>Hello</p></div><div>foobar</div>'
);
toggle2();
rerender();
expect(scratch.innerHTML).to.equal('<div></div><div>foobar</div>');
toggle2();
rerender();
expect(scratch.innerHTML).to.equal(
'<div><p>Hello</p></div><div>foobar</div>'
);
toggle();
rerender();
expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
toggle2();
rerender();
expect(scratch.innerHTML).to.equal('<div></div>');
});
it('should work with stacking portals', () => {
/** @type {() => void} */
let toggle,
/** @type {() => void} */
toggle2;
function Foo(props) {
const [mounted, setMounted] = useState(false);
const [mounted2, setMounted2] = useState(false);
toggle = () => setMounted(s => !s);
toggle2 = () => setMounted2(s => !s);
return (
<div>
<p>Hello</p>
{mounted && createPortal(props.children, scratch)}
{mounted2 && createPortal(props.children2, scratch)}
</div>
);
}
render(
<Foo children2={<div>foobar2</div>}>
<div>foobar</div>
</Foo>,
scratch
);
expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
toggle();
rerender();
expect(scratch.innerHTML).to.equal(
'<div><p>Hello</p></div><div>foobar</div>'
);
toggle2();
rerender();
expect(scratch.innerHTML).to.equal(
'<div><p>Hello</p></div><div>foobar</div><div>foobar2</div>'
);
toggle2();
rerender();
expect(scratch.innerHTML).to.equal(
'<div><p>Hello</p></div><div>foobar</div>'
);
toggle();
rerender();
expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
});
it('should work with changing the container', () => {
/** @type {(c) => void} */
let set, ref;
function Foo(props) {
const [container, setContainer] = useState(scratch);
set = setContainer;
return (
<div
ref={r => {
ref = r;
}}
>
<p>Hello</p>
{createPortal(props.children, container)}
</div>
);
}
render(
<Foo>
<div>foobar</div>
</Foo>,
scratch
);
expect(scratch.innerHTML).to.equal(
'<div>foobar</div><div><p>Hello</p></div>'
);
set(() => ref);
rerender();
expect(scratch.innerHTML).to.equal(
'<div><p>Hello</p><div>foobar</div></div>'
);
});
it('should work with replacing placeholder portals', () => {
/** @type {() => void} */
let toggle,
/** @type {() => void} */
toggle2;
function Foo(props) {
const [mounted, setMounted] = useState(false);
const [mounted2, setMounted2] = useState(false);
toggle = () => setMounted(s => !s);
toggle2 = () => setMounted2(s => !s);
return (
<div>
<p>Hello</p>
{createPortal(mounted && props.children, scratch)}
{createPortal(mounted2 && props.children, scratch)}
</div>
);
}
render(
<Foo>
<div>foobar</div>
</Foo>,
scratch
);
expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
toggle();
rerender();
expect(scratch.innerHTML).to.equal(
'<div><p>Hello</p></div><div>foobar</div>'
);
toggle();
rerender();
expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
toggle2();
rerender();
expect(scratch.innerHTML).to.equal(
'<div><p>Hello</p></div><div>foobar</div>'
);
toggle2();
rerender();
expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
});
it('should work with removing an element from stacked container to new one', () => {
/** @type {() => void} */
let toggle, root2;
function Foo(props) {
const [root, setRoot] = useState(scratch);
toggle = () => setRoot(() => root2);
return (
<div
ref={r => {
root2 = r;
}}
>
<p>Hello</p>
{createPortal(props.children, scratch)}
{createPortal(props.children, root)}
</div>
);
}
render(
<Foo>
<div>foobar</div>
</Foo>,
scratch
);
expect(scratch.innerHTML).to.equal(
'<div>foobar</div><div>foobar</div><div><p>Hello</p></div>'
);
toggle();
rerender();
expect(scratch.innerHTML).to.equal(
'<div>foobar</div><div><p>Hello</p><div>foobar</div></div>'
);
});
it('should support nested portals', () => {
/** @type {() => void} */
let toggle,
/** @type {() => void} */
toggle2,
inner;
function Bar() {
const [mounted, setMounted] = useState(false);
toggle2 = () => setMounted(s => !s);
return (
<div
ref={r => {
inner = r;
}}
>
<p>Inner</p>
{mounted && createPortal(<p>hiFromBar</p>, scratch)}
{mounted && createPortal(<p>innerPortal</p>, inner)}
</div>
);
}
function Foo(props) {
const [mounted, setMounted] = useState(false);
toggle = () => setMounted(s => !s);
return (
<div>
<p>Hello</p>
{mounted && createPortal(<Bar />, scratch)}
</div>
);
}
render(<Foo />, scratch);
expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
toggle();
rerender();
expect(scratch.innerHTML).to.equal(
'<div><p>Hello</p></div><div><p>Inner</p></div>'
);
toggle2();
rerender();
expect(scratch.innerHTML).to.equal(
'<div><p>Hello</p></div><div><p>Inner</p><p>innerPortal</p></div><p>hiFromBar</p>'
);
toggle();
rerender();
expect(scratch.innerHTML).to.equal('<div><p>Hello</p></div>');
});
it('should support nested portals remounting #2669', () => {
let setVisible;
let i = 0;
function Po
gitextract_o9kdplb8/ ├── .editorconfig ├── .github/ │ ├── CODE_OF_CONDUCT.md │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── feature_request.md │ └── workflows/ │ ├── benchmarks.yml │ ├── build-test.yml │ ├── ci.yml │ ├── pr-reporter.yml │ ├── release.yml │ ├── run-bench.yml │ ├── single-bench.yml │ └── size.yml ├── .gitignore ├── .gitmodules ├── .husky/ │ └── pre-commit ├── .oxlintrc.json ├── .prettierignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── biome.json ├── compat/ │ ├── LICENSE │ ├── client.d.ts │ ├── client.js │ ├── client.mjs │ ├── jsx-dev-runtime.js │ ├── jsx-dev-runtime.mjs │ ├── jsx-runtime.js │ ├── jsx-runtime.mjs │ ├── mangle.json │ ├── package.json │ ├── scheduler.d.ts │ ├── scheduler.js │ ├── scheduler.mjs │ ├── server.browser.js │ ├── server.d.ts │ ├── server.js │ ├── server.mjs │ ├── src/ │ │ ├── Children.js │ │ ├── PureComponent.js │ │ ├── forwardRef.js │ │ ├── hooks.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── internal.d.ts │ │ ├── memo.js │ │ ├── portals.js │ │ ├── render.js │ │ ├── suspense.d.ts │ │ ├── suspense.js │ │ └── util.js │ ├── test/ │ │ ├── browser/ │ │ │ ├── Children.test.jsx │ │ │ ├── PureComponent.test.jsx │ │ │ ├── cloneElement.test.jsx │ │ │ ├── compat.options.test.jsx │ │ │ ├── component.test.jsx │ │ │ ├── componentDidCatch.test.jsx │ │ │ ├── context.test.jsx │ │ │ ├── createElement.test.jsx │ │ │ ├── createFactory.test.jsx │ │ │ ├── events.test.jsx │ │ │ ├── exports.test.js │ │ │ ├── findDOMNode.test.jsx │ │ │ ├── forwardRef.test.jsx │ │ │ ├── hooks.test.jsx │ │ │ ├── hydrate.test.jsx │ │ │ ├── isFragment.test.js │ │ │ ├── isMemo.test.jsx │ │ │ ├── isValidElement.test.js │ │ │ ├── memo.test.jsx │ │ │ ├── portals.test.jsx │ │ │ ├── render.test.jsx │ │ │ ├── scheduler.test.js │ │ │ ├── select.test.jsx │ │ │ ├── suspense-hydration.test.jsx │ │ │ ├── suspense-utils.js │ │ │ ├── suspense.test.jsx │ │ │ ├── svg.test.jsx │ │ │ ├── testUtils.js │ │ │ ├── textarea.test.jsx │ │ │ ├── unmountComponentAtNode.test.jsx │ │ │ ├── unstable_batchedUpdates.test.js │ │ │ └── useSyncExternalStore.test.jsx │ │ └── ts/ │ │ ├── forward-ref.tsx │ │ ├── index.tsx │ │ ├── lazy.tsx │ │ ├── memo.tsx │ │ ├── react-default.tsx │ │ ├── react-star.tsx │ │ ├── scheduler.ts │ │ ├── suspense.tsx │ │ ├── tsconfig.json │ │ └── utils.ts │ ├── test-utils.js │ └── test-utils.mjs ├── config/ │ └── compat-entries.js ├── debug/ │ ├── LICENSE │ ├── mangle.json │ ├── package.json │ ├── src/ │ │ ├── check-props.js │ │ ├── component-stack.js │ │ ├── constants.js │ │ ├── debug.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── internal.d.ts │ │ └── util.js │ └── test/ │ └── browser/ │ ├── component-stack-2.test.jsx │ ├── component-stack.test.jsx │ ├── debug-compat.test.jsx │ ├── debug-hooks.test.jsx │ ├── debug-suspense.test.jsx │ ├── debug.options.test.jsx │ ├── debug.test.jsx │ ├── fakeDevTools.js │ ├── prop-types.test.js │ ├── serializeVNode.test.jsx │ └── validateHookArgs.test.jsx ├── demo/ │ ├── contenteditable.jsx │ ├── context.jsx │ ├── devtools.jsx │ ├── fragments.jsx │ ├── index.html │ ├── index.jsx │ ├── key_bug.jsx │ ├── list.jsx │ ├── logger.jsx │ ├── mobx.jsx │ ├── nested-suspense/ │ │ ├── addnewcomponent.jsx │ │ ├── component-container.jsx │ │ ├── dropzone.jsx │ │ ├── editor.jsx │ │ ├── index.jsx │ │ └── subcomponent.jsx │ ├── old.js.bak │ ├── package.json │ ├── people/ │ │ ├── Readme.md │ │ ├── index.tsx │ │ ├── profile.tsx │ │ ├── router.tsx │ │ ├── store.ts │ │ └── styles/ │ │ ├── animations.scss │ │ ├── app.scss │ │ ├── avatar.scss │ │ ├── button.scss │ │ ├── index.scss │ │ └── profile.scss │ ├── preact.jsx │ ├── profiler.jsx │ ├── pythagoras/ │ │ ├── index.jsx │ │ └── pythagoras.jsx │ ├── redux-toolkit.jsx │ ├── redux.jsx │ ├── reduxUpdate.jsx │ ├── reorder.jsx │ ├── spiral.jsx │ ├── stateOrderBug.jsx │ ├── style.css │ ├── style.scss │ ├── styled-components.jsx │ ├── suspense-router/ │ │ ├── bye.jsx │ │ ├── hello.jsx │ │ ├── index.jsx │ │ └── simple-router.jsx │ ├── suspense.jsx │ ├── textFields.jsx │ ├── todo.jsx │ ├── tsconfig.json │ ├── vite.config.js │ └── zustand.jsx ├── devtools/ │ ├── LICENSE │ ├── mangle.json │ ├── package.json │ ├── src/ │ │ ├── devtools.js │ │ ├── index.d.ts │ │ └── index.js │ └── test/ │ └── browser/ │ └── addHookName.test.jsx ├── hooks/ │ ├── LICENSE │ ├── mangle.json │ ├── package.json │ ├── src/ │ │ ├── index.d.ts │ │ ├── index.js │ │ └── internal.d.ts │ └── test/ │ ├── _util/ │ │ └── useEffectUtil.js │ └── browser/ │ ├── combinations.test.jsx │ ├── componentDidCatch.test.jsx │ ├── errorBoundary.test.jsx │ ├── hooks.options.test.jsx │ ├── useCallback.test.jsx │ ├── useContext.test.jsx │ ├── useDebugValue.test.jsx │ ├── useEffect.test.jsx │ ├── useEffectAssertions.jsx │ ├── useId.test.jsx │ ├── useImperativeHandle.test.jsx │ ├── useLayoutEffect.test.jsx │ ├── useMemo.test.jsx │ ├── useReducer.test.jsx │ ├── useRef.test.jsx │ └── useState.test.jsx ├── jsconfig-lint.json ├── jsconfig.json ├── jsx-runtime/ │ ├── LICENSE │ ├── mangle.json │ ├── package.json │ ├── src/ │ │ ├── index.d.ts │ │ ├── index.js │ │ └── utils.js │ └── test/ │ └── browser/ │ └── jsx-runtime.test.js ├── mangle.json ├── package.json ├── scripts/ │ └── release/ │ ├── create-gh-release.js │ ├── publish.mjs │ └── upload-gh-asset.js ├── src/ │ ├── clone-element.js │ ├── component.js │ ├── constants.js │ ├── create-context.js │ ├── create-element.js │ ├── diff/ │ │ ├── catch-error.js │ │ ├── children.js │ │ ├── index.js │ │ └── props.js │ ├── dom.d.ts │ ├── index.d.ts │ ├── index.js │ ├── internal.d.ts │ ├── jsx.d.ts │ ├── options.js │ ├── render.js │ └── util.js ├── test/ │ ├── _util/ │ │ ├── dom.js │ │ ├── helpers.jsx │ │ ├── logCall.js │ │ └── optionSpies.js │ ├── browser/ │ │ ├── cloneElement.test.jsx │ │ ├── components.test.jsx │ │ ├── context.test.jsx │ │ ├── createContext.test.jsx │ │ ├── customBuiltInElements.test.jsx │ │ ├── events.test.jsx │ │ ├── focus.test.jsx │ │ ├── fragments.test.jsx │ │ ├── getDomSibling.test.jsx │ │ ├── hydrate.test.jsx │ │ ├── isValidElement.test.js │ │ ├── keys.test.jsx │ │ ├── lifecycles/ │ │ │ ├── componentDidCatch.test.jsx │ │ │ ├── componentDidMount.test.jsx │ │ │ ├── componentDidUpdate.test.jsx │ │ │ ├── componentWillMount.test.jsx │ │ │ ├── componentWillReceiveProps.test.jsx │ │ │ ├── componentWillUnmount.test.jsx │ │ │ ├── componentWillUpdate.test.jsx │ │ │ ├── getDerivedStateFromError.test.jsx │ │ │ ├── getDerivedStateFromProps.test.jsx │ │ │ ├── getSnapshotBeforeUpdate.test.jsx │ │ │ ├── lifecycle.test.jsx │ │ │ └── shouldComponentUpdate.test.jsx │ │ ├── mathml.test.jsx │ │ ├── placeholders.test.jsx │ │ ├── refs.test.jsx │ │ ├── render.test.jsx │ │ ├── select.test.jsx │ │ ├── spec.test.jsx │ │ ├── style.test.jsx │ │ ├── svg.test.jsx │ │ └── toChildArray.test.jsx │ ├── fixtures/ │ │ └── preact.js │ ├── node/ │ │ └── index.test.js │ ├── shared/ │ │ ├── createContext.test.jsx │ │ ├── createElement.test.jsx │ │ ├── exports.test.js │ │ ├── isValidElement.test.js │ │ └── isValidElementTests.jsx │ └── ts/ │ ├── Component.test.tsx │ ├── VNode.test.tsx │ ├── custom-elements.tsx │ ├── dom-attributes.test-d.tsx │ ├── hoc.test.tsx │ ├── jsx-namespace.test-d.tsx │ ├── package.json │ ├── preact-global.test-d.tsx │ ├── preact.tsx │ ├── refs.tsx │ └── tsconfig.json ├── test-utils/ │ ├── package.json │ ├── src/ │ │ ├── index.d.ts │ │ └── index.js │ └── test/ │ └── shared/ │ ├── act.test.jsx │ └── rerender.test.jsx ├── types/ │ └── weak-key.d.ts ├── vitest.config.mjs └── vitest.setup.js
Showing preview only (353K chars total). Download the full file or copy to clipboard to get everything.
SYMBOL INDEX (2545 symbols across 190 files)
FILE: compat/client.js
function createRoot (line 3) | function createRoot(container) {
FILE: compat/client.mjs
function createRoot (line 3) | function createRoot(container) {
function hydrateRoot (line 16) | function hydrateRoot(container, children) {
FILE: compat/scheduler.js
function unstable_runWithPriority (line 3) | function unstable_runWithPriority(priority, callback) {
FILE: compat/scheduler.mjs
function unstable_runWithPriority (line 19) | function unstable_runWithPriority(priority, callback) {
FILE: compat/src/Children.js
method count (line 12) | count(children) {
method only (line 15) | only(children) {
FILE: compat/src/PureComponent.js
function PureComponent (line 7) | function PureComponent(p, c) {
FILE: compat/src/forwardRef.js
constant REACT_FORWARD_SYMBOL (line 3) | const REACT_FORWARD_SYMBOL = Symbol.for('react.forward_ref');
function forwardRef (line 12) | function forwardRef(fn) {
FILE: compat/src/hooks.js
function useSyncExternalStore (line 8) | function useSyncExternalStore(subscribe, getSnapshot) {
function didSnapshotChange (line 44) | function didSnapshotChange(inst) {
function startTransition (line 52) | function startTransition(cb) {
function useDeferredValue (line 56) | function useDeferredValue(val) {
function useTransition (line 60) | function useTransition() {
FILE: compat/src/index.d.ts
type FunctionComponent (line 7) | interface FunctionComponent<P = {}> {
type ComponentClass (line 16) | interface ComponentClass<P = {}, S = {}> {
type Component (line 29) | interface Component<P = {}, S = {}> {
type HTMLAttributes (line 166) | interface HTMLAttributes<T extends EventTarget>
type HTMLProps (line 168) | interface HTMLProps<T extends EventTarget>
type AllHTMLAttributes (line 171) | interface AllHTMLAttributes<T extends EventTarget>
type SVGProps (line 176) | interface SVGProps<T extends EventTarget>
type SVGAttributes (line 180) | interface SVGAttributes<T extends EventTarget = SVGElement>
type ReactSVG (line 183) | interface ReactSVG extends JSXInternal.IntrinsicSVGElements {}
type MemoExoticComponent (line 318) | type MemoExoticComponent<C extends _preact.FunctionalComponent<any>> =
type RefAttributes (line 335) | interface RefAttributes<R> extends _preact.Attributes {
type ForwardRefRenderFunction (line 339) | interface ForwardRefRenderFunction<T = any, P = {}> {
type ForwardRefExoticComponent (line 344) | interface ForwardRefExoticComponent<P>
type PropsWithoutRef (line 353) | type PropsWithoutRef<P> = Omit<P, 'ref'>;
type MutableRefObject (line 355) | interface MutableRefObject<T> {
type ForwardedRef (line 359) | type ForwardedRef<T> =
type ElementType (line 364) | type ElementType<
type ComponentPropsWithoutRef (line 371) | type ComponentPropsWithoutRef<T extends ElementType> = PropsWithoutRef<
type ComponentPropsWithRef (line 375) | type ComponentPropsWithRef<C extends ElementType> = C extends new (
type ElementRef (line 381) | type ElementRef<
type PropsWithChildren (line 401) | type PropsWithChildren<P = unknown> = P & {
FILE: compat/src/index.js
function createFactory (line 50) | function createFactory(type) {
function isValidElement (line 59) | function isValidElement(element) {
function isFragment (line 68) | function isFragment(element) {
function isMemo (line 77) | function isMemo(element) {
function cloneElement (line 92) | function cloneElement(element) {
function unmountComponentAtNode (line 102) | function unmountComponentAtNode(container) {
function findDOMNode (line 115) | function findDOMNode(component) {
function unstable_batchedUpdates (line 149) | function unstable_batchedUpdates(callback, arg) {
FILE: compat/src/internal.d.ts
type Component (line 13) | interface Component<P = {}, S = {}> extends PreactComponent<P, S> {
type FunctionComponent (line 28) | interface FunctionComponent<P = {}> extends PreactFunctionComponent<P> {
type VNode (line 33) | interface VNode<T = any> extends PreactVNode<T> {
type SuspenseState (line 38) | interface SuspenseState {
type SuspenseComponent (line 42) | interface SuspenseComponent
FILE: compat/src/memo.js
function memo (line 11) | function memo(c, comparer) {
FILE: compat/src/portals.js
function ContextProvider (line 6) | function ContextProvider(props) {
function Portal (line 18) | function Portal(props) {
function createPortal (line 70) | function createPortal(vnode, container) {
FILE: compat/src/render.js
constant REACT_ELEMENT_TYPE (line 29) | const REACT_ELEMENT_TYPE = Symbol.for('react.element');
constant CAMEL_PROPS (line 31) | const CAMEL_PROPS =
constant CAMEL_REPLACE (line 33) | const CAMEL_REPLACE = /[A-Z0-9]/g;
constant IS_DOM (line 34) | const IS_DOM = typeof document !== 'undefined';
method get (line 56) | get() {
method set (line 59) | set(v) {
function render (line 76) | function render(vnode, parent, callback) {
function hydrate (line 89) | function hydrate(vnode, parent, callback) {
method get (line 112) | get() {
function handleDomVNode (line 117) | function handleDomVNode(vnode) {
method readContext (line 297) | readContext(context) {
FILE: compat/src/suspense.d.ts
type SuspenseProps (line 10) | interface SuspenseProps {
class Suspense (line 15) | class Suspense extends Component<SuspenseProps> {
FILE: compat/src/suspense.js
function detachedClone (line 42) | function detachedClone(vnode, detachedParent, parentDom) {
function removeOriginal (line 73) | function removeOriginal(vnode, detachedParent, originalParent) {
function Suspense (line 101) | function Suspense() {
function lazy (line 217) | function lazy(loader) {
FILE: compat/src/util.js
function shallowDiffers (line 9) | function shallowDiffers(a, b) {
constant IS_NON_DIMENSIONAL (line 15) | const IS_NON_DIMENSIONAL =
FILE: compat/test/browser/Children.test.jsx
function Foo (line 24) | function Foo(props) {
function Foo (line 48) | function Foo(props) {
function Foo (line 80) | function Foo(props) {
function Foo (line 178) | function Foo(props) {
FILE: compat/test/browser/PureComponent.test.jsx
class Foo (line 28) | class Foo extends React.PureComponent {
method constructor (line 29) | constructor(props) {
method constructor (line 45) | constructor(props, context) {
method render (line 53) | render(props) {
class Foo (line 44) | class Foo extends React.PureComponent {
method constructor (line 29) | constructor(props) {
method constructor (line 45) | constructor(props, context) {
method render (line 53) | render(props) {
class Pure (line 78) | class Pure extends React.PureComponent {
method render (line 79) | render() {
class C (line 103) | class C extends React.PureComponent {
method render (line 104) | render() {
class App (line 141) | class App extends React.PureComponent {
method render (line 142) | render() {
FILE: compat/test/browser/cloneElement.test.jsx
function Foo (line 89) | function Foo(props) {
FILE: compat/test/browser/compat.options.test.jsx
class ClassApp (line 42) | class ClassApp extends Component {
method constructor (line 43) | constructor() {
method render (line 52) | render() {
FILE: compat/test/browser/component.test.jsx
class Demo (line 30) | class Demo extends React.Component {
method render (line 31) | render() {
class Child (line 56) | class Child extends React.Component {
method componentWillReceiveProps (line 57) | componentWillReceiveProps(newProps) {
method render (line 60) | render() {
class Parent (line 65) | class Parent extends React.Component {
method render (line 66) | render() {
class Foo (line 84) | class Foo extends React.Component {
method UNSAFE_componentWillMount (line 86) | UNSAFE_componentWillMount() {
method render (line 90) | render() {
method render (line 104) | render() {
method UNSAFE_componentWillReceiveProps (line 122) | UNSAFE_componentWillReceiveProps() {
method render (line 126) | render() {
method render (line 141) | render() {
method UNSAFE_componentWillUpdate (line 161) | UNSAFE_componentWillUpdate() {
method render (line 165) | render() {
method render (line 180) | render() {
method render (line 198) | render() {
method UNSAFE_componentWillMount (line 221) | UNSAFE_componentWillMount() {}
method UNSAFE_componentWillReceiveProps (line 223) | UNSAFE_componentWillReceiveProps() {}
method UNSAFE_componentWillUpdate (line 225) | UNSAFE_componentWillUpdate() {}
method render (line 226) | render() {
class Foo (line 103) | class Foo extends React.Component {
method UNSAFE_componentWillMount (line 86) | UNSAFE_componentWillMount() {
method render (line 90) | render() {
method render (line 104) | render() {
method UNSAFE_componentWillReceiveProps (line 122) | UNSAFE_componentWillReceiveProps() {
method render (line 126) | render() {
method render (line 141) | render() {
method UNSAFE_componentWillUpdate (line 161) | UNSAFE_componentWillUpdate() {
method render (line 165) | render() {
method render (line 180) | render() {
method render (line 198) | render() {
method UNSAFE_componentWillMount (line 221) | UNSAFE_componentWillMount() {}
method UNSAFE_componentWillReceiveProps (line 223) | UNSAFE_componentWillReceiveProps() {}
method UNSAFE_componentWillUpdate (line 225) | UNSAFE_componentWillUpdate() {}
method render (line 226) | render() {
class Foo (line 120) | class Foo extends React.Component {
method UNSAFE_componentWillMount (line 86) | UNSAFE_componentWillMount() {
method render (line 90) | render() {
method render (line 104) | render() {
method UNSAFE_componentWillReceiveProps (line 122) | UNSAFE_componentWillReceiveProps() {
method render (line 126) | render() {
method render (line 141) | render() {
method UNSAFE_componentWillUpdate (line 161) | UNSAFE_componentWillUpdate() {
method render (line 165) | render() {
method render (line 180) | render() {
method render (line 198) | render() {
method UNSAFE_componentWillMount (line 221) | UNSAFE_componentWillMount() {}
method UNSAFE_componentWillReceiveProps (line 223) | UNSAFE_componentWillReceiveProps() {}
method UNSAFE_componentWillUpdate (line 225) | UNSAFE_componentWillUpdate() {}
method render (line 226) | render() {
class Foo (line 140) | class Foo extends React.Component {
method UNSAFE_componentWillMount (line 86) | UNSAFE_componentWillMount() {
method render (line 90) | render() {
method render (line 104) | render() {
method UNSAFE_componentWillReceiveProps (line 122) | UNSAFE_componentWillReceiveProps() {
method render (line 126) | render() {
method render (line 141) | render() {
method UNSAFE_componentWillUpdate (line 161) | UNSAFE_componentWillUpdate() {
method render (line 165) | render() {
method render (line 180) | render() {
method render (line 198) | render() {
method UNSAFE_componentWillMount (line 221) | UNSAFE_componentWillMount() {}
method UNSAFE_componentWillReceiveProps (line 223) | UNSAFE_componentWillReceiveProps() {}
method UNSAFE_componentWillUpdate (line 225) | UNSAFE_componentWillUpdate() {}
method render (line 226) | render() {
class Foo (line 159) | class Foo extends React.Component {
method UNSAFE_componentWillMount (line 86) | UNSAFE_componentWillMount() {
method render (line 90) | render() {
method render (line 104) | render() {
method UNSAFE_componentWillReceiveProps (line 122) | UNSAFE_componentWillReceiveProps() {
method render (line 126) | render() {
method render (line 141) | render() {
method UNSAFE_componentWillUpdate (line 161) | UNSAFE_componentWillUpdate() {
method render (line 165) | render() {
method render (line 180) | render() {
method render (line 198) | render() {
method UNSAFE_componentWillMount (line 221) | UNSAFE_componentWillMount() {}
method UNSAFE_componentWillReceiveProps (line 223) | UNSAFE_componentWillReceiveProps() {}
method UNSAFE_componentWillUpdate (line 225) | UNSAFE_componentWillUpdate() {}
method render (line 226) | render() {
class Foo (line 179) | class Foo extends React.Component {
method UNSAFE_componentWillMount (line 86) | UNSAFE_componentWillMount() {
method render (line 90) | render() {
method render (line 104) | render() {
method UNSAFE_componentWillReceiveProps (line 122) | UNSAFE_componentWillReceiveProps() {
method render (line 126) | render() {
method render (line 141) | render() {
method UNSAFE_componentWillUpdate (line 161) | UNSAFE_componentWillUpdate() {
method render (line 165) | render() {
method render (line 180) | render() {
method render (line 198) | render() {
method UNSAFE_componentWillMount (line 221) | UNSAFE_componentWillMount() {}
method UNSAFE_componentWillReceiveProps (line 223) | UNSAFE_componentWillReceiveProps() {}
method UNSAFE_componentWillUpdate (line 225) | UNSAFE_componentWillUpdate() {}
method render (line 226) | render() {
class Foo (line 197) | class Foo extends React.Component {
method UNSAFE_componentWillMount (line 86) | UNSAFE_componentWillMount() {
method render (line 90) | render() {
method render (line 104) | render() {
method UNSAFE_componentWillReceiveProps (line 122) | UNSAFE_componentWillReceiveProps() {
method render (line 126) | render() {
method render (line 141) | render() {
method UNSAFE_componentWillUpdate (line 161) | UNSAFE_componentWillUpdate() {
method render (line 165) | render() {
method render (line 180) | render() {
method render (line 198) | render() {
method UNSAFE_componentWillMount (line 221) | UNSAFE_componentWillMount() {}
method UNSAFE_componentWillReceiveProps (line 223) | UNSAFE_componentWillReceiveProps() {}
method UNSAFE_componentWillUpdate (line 225) | UNSAFE_componentWillUpdate() {}
method render (line 226) | render() {
class Foo (line 219) | class Foo extends React.Component {
method UNSAFE_componentWillMount (line 86) | UNSAFE_componentWillMount() {
method render (line 90) | render() {
method render (line 104) | render() {
method UNSAFE_componentWillReceiveProps (line 122) | UNSAFE_componentWillReceiveProps() {
method render (line 126) | render() {
method render (line 141) | render() {
method UNSAFE_componentWillUpdate (line 161) | UNSAFE_componentWillUpdate() {
method render (line 165) | render() {
method render (line 180) | render() {
method render (line 198) | render() {
method UNSAFE_componentWillMount (line 221) | UNSAFE_componentWillMount() {}
method UNSAFE_componentWillReceiveProps (line 223) | UNSAFE_componentWillReceiveProps() {}
method UNSAFE_componentWillUpdate (line 225) | UNSAFE_componentWillUpdate() {}
method render (line 226) | render() {
class Page (line 244) | class Page extends React.Component {
method UNSAFE_componentWillMount (line 245) | UNSAFE_componentWillMount() {}
method render (line 246) | render() {
class WithDefaultProps (line 269) | class WithDefaultProps extends Component {
method constructor (line 270) | constructor(props, context) {
method render (line 279) | render() {
method constructor (line 305) | constructor(props, context) {
method ctor (line 309) | ctor() {}
method componentWillReceiveProps (line 310) | componentWillReceiveProps() {}
method render (line 311) | render() {
class Outer (line 292) | class Outer extends Component {
method constructor (line 293) | constructor() {
method componentDidMount (line 297) | componentDidMount() {
method render (line 300) | render(props, { i }) {
class WithDefaultProps (line 304) | class WithDefaultProps extends Component {
method constructor (line 270) | constructor(props, context) {
method render (line 279) | render() {
method constructor (line 305) | constructor(props, context) {
method ctor (line 309) | ctor() {}
method componentWillReceiveProps (line 310) | componentWillReceiveProps() {}
method render (line 311) | render() {
FILE: compat/test/browser/componentDidCatch.test.jsx
class Receiver (line 19) | class Receiver extends Component {
method constructor (line 20) | constructor(props) {
method componentDidCatch (line 25) | componentDidCatch(error, errorInfo) {
method render (line 29) | render() {
function ThrowErr (line 37) | function ThrowErr() {
FILE: compat/test/browser/context.test.jsx
function runUpdate (line 43) | function runUpdate() {
class Router (line 51) | class Router extends Component {
method constructor (line 52) | constructor(props) {
method render (line 63) | render() {
class Route (line 76) | class Route extends Component {
method render (line 77) | render() {
function Page (line 97) | function Page() {
function App (line 123) | function App() {
FILE: compat/test/browser/events.test.jsx
method onChange (line 205) | onChange() {}
function expectToBeNormalized (line 207) | function expectToBeNormalized(vnode, desc) {
function expectToBeUnmodified (line 215) | function expectToBeUnmodified(vnode, desc) {
FILE: compat/test/browser/findDOMNode.test.jsx
class Helper (line 8) | class Helper extends React.Component {
method render (line 9) | render({ something }) {
FILE: compat/test/browser/forwardRef.test.jsx
function Foo (line 136) | function Foo({ forwardedRef, setRefOnDiv }) {
class Provider (line 478) | class Provider extends Component {
method getChildContext (line 479) | getChildContext() {
method render (line 482) | render() {
function Foo (line 505) | function Foo(props, ref) {
FILE: compat/test/browser/isMemo.test.jsx
function Foo (line 16) | function Foo() {
function Foo (line 24) | function Foo() {
FILE: compat/test/browser/memo.test.jsx
function Foo (line 43) | function Foo() {
class App (line 52) | class App extends Component {
method constructor (line 53) | constructor() {
method render (line 57) | render() {
method constructor (line 86) | constructor() {
method render (line 90) | render() {
method constructor (line 119) | constructor() {
method render (line 123) | render() {
method getDerivedStateFromError (line 256) | static getDerivedStateFromError() {
method render (line 260) | render() {
function Foo (line 76) | function Foo(props) {
class App (line 85) | class App extends Component {
method constructor (line 53) | constructor() {
method render (line 57) | render() {
method constructor (line 86) | constructor() {
method render (line 90) | render() {
method constructor (line 119) | constructor() {
method render (line 123) | render() {
method getDerivedStateFromError (line 256) | static getDerivedStateFromError() {
method render (line 260) | render() {
function Foo (line 109) | function Foo() {
class App (line 118) | class App extends Component {
method constructor (line 53) | constructor() {
method render (line 57) | render() {
method constructor (line 86) | constructor() {
method render (line 90) | render() {
method constructor (line 119) | constructor() {
method render (line 123) | render() {
method getDerivedStateFromError (line 256) | static getDerivedStateFromError() {
method render (line 260) | render() {
function Foo (line 138) | function Foo() {
function Foo (line 153) | function Foo() {
function Foo (line 234) | function Foo() {
class App (line 255) | class App extends Component {
method constructor (line 53) | constructor() {
method render (line 57) | render() {
method constructor (line 86) | constructor() {
method render (line 90) | render() {
method constructor (line 119) | constructor() {
method render (line 123) | render() {
method getDerivedStateFromError (line 256) | static getDerivedStateFromError() {
method render (line 260) | render() {
FILE: compat/test/browser/portals.test.jsx
function Foo (line 41) | function Foo(props) {
function Foo (line 54) | function Foo(props) {
function Modal (line 76) | function Modal() {
function Foo (line 89) | function Foo(props) {
function Foo (line 106) | function Foo(props) {
function Foo (line 142) | function Foo(props) {
class Child (line 167) | class Child extends Component {
method componentWillUnmount (line 168) | componentWillUnmount() {
method render (line 172) | render(props) {
method componentDidMount (line 659) | componentDidMount() {
method render (line 663) | render() {
function Foo (line 177) | function Foo(props) {
function Dialog (line 206) | function Dialog() {
function App (line 210) | function App() {
method componentDidMount (line 670) | componentDidMount() {
method render (line 673) | render() {
function Id (line 226) | function Id() {
function Dialog (line 231) | function Dialog() {
function App (line 235) | function App() {
method componentDidMount (line 670) | componentDidMount() {
method render (line 673) | render() {
function Id (line 258) | function Id() {
function Dialog (line 263) | function Dialog(props) {
function App (line 267) | function App(props) {
method componentDidMount (line 670) | componentDidMount() {
method render (line 673) | render() {
function Dialog (line 296) | function Dialog() {
function App (line 300) | function App() {
method componentDidMount (line 670) | componentDidMount() {
method render (line 673) | render() {
function Foo (line 316) | function Foo(props) {
function Foo (line 368) | function Foo(props) {
function Foo (line 417) | function Foo(props) {
function Foo (line 456) | function Foo(props) {
function Foo (line 503) | function Foo(props) {
function Bar (line 543) | function Bar() {
function Foo (line 559) | function Foo(props) {
function PortalComponent (line 594) | function PortalComponent(props) {
function App (line 607) | function App() {
method componentDidMount (line 670) | componentDidMount() {
method render (line 673) | render() {
class Child (line 658) | class Child extends Component {
method componentWillUnmount (line 168) | componentWillUnmount() {
method render (line 172) | render(props) {
method componentDidMount (line 659) | componentDidMount() {
method render (line 663) | render() {
class App (line 669) | class App extends Component {
method componentDidMount (line 670) | componentDidMount() {
method render (line 673) | render() {
function Foo (line 803) | function Foo(props) {
function App (line 887) | function App() {
method componentDidMount (line 670) | componentDidMount() {
method render (line 673) | render() {
FILE: compat/test/browser/render.test.jsx
function App (line 124) | function App() {
method componentDidMount (line 534) | componentDidMount() {
method componentDidUpdate (line 538) | componentDidUpdate() {
method render (line 542) | render() {
function App (line 141) | function App() {
method componentDidMount (line 534) | componentDidMount() {
method componentDidUpdate (line 538) | componentDidUpdate() {
method render (line 542) | render() {
function TestComponent (line 164) | function TestComponent({ message }) {
function TestComponent (line 176) | function TestComponent({ message }) {
function TestComponent (line 188) | function TestComponent({ message }) {
function TestComponent (line 200) | function TestComponent({ message }) {
function TestComponent (line 212) | function TestComponent({ title, message, count }) {
class Input (line 270) | class Input extends Component {
method render (line 271) | render() {
function Foo (line 368) | function Foo(props) {
function Foo (line 384) | function Foo(props) {
function Foo (line 394) | function Foo(props) {
function ClassNameCheck (line 467) | function ClassNameCheck(props) {
class OtherThing (line 474) | class OtherThing extends Component {
method render (line 475) | render({ children }) {
function StaticContent (line 519) | function StaticContent({ children, element = 'div', staticMode }) {
class App (line 533) | class App extends Component {
method componentDidMount (line 534) | componentDidMount() {
method componentDidUpdate (line 538) | componentDidUpdate() {
method render (line 542) | render() {
function readContext (line 601) | function readContext(Context) {
function Foo (line 608) | function Foo() {
class Inner (line 629) | class Inner extends Component {
method render (line 630) | render(props) {
function useStateWrapper (line 663) | function useStateWrapper(init) {
function Foo (line 670) | function Foo() {
FILE: compat/test/browser/select.test.jsx
function App (line 16) | function App() {
FILE: compat/test/browser/suspense-hydration.test.jsx
function onUnhandledRejection (line 32) | function onUnhandledRejection(event) {
function Counter (line 175) | function Counter() {
function Counter (line 219) | function Counter() {
function Component (line 233) | function Component() {
function Counter (line 273) | function Counter() {
function Component (line 287) | function Component() {
function Counter (line 318) | function Counter() {
function Component (line 330) | function Component() {
function Counter (line 490) | function Counter({ children }) {
function Counter (line 545) | function Counter() {
function App (line 615) | function App() {
function App (line 708) | function App() {
class ErrorBoundary (line 1026) | class ErrorBoundary extends React.Component {
method constructor (line 1027) | constructor(props) {
method getDerivedStateFromError (line 1032) | static getDerivedStateFromError() {
method render (line 1036) | render() {
function App (line 1042) | function App() {
class ThrowOrRender (line 1059) | class ThrowOrRender extends React.Component {
method shouldComponentUpdate (line 1060) | shouldComponentUpdate() {
method render (line 1063) | render() {
FILE: compat/test/browser/suspense-utils.js
function createLazy (line 34) | function createLazy() {
function createSuspender (line 89) | function createSuspender(DefaultComponent) {
function createSuspenseLoader (line 122) | function createSuspenseLoader() {
FILE: compat/test/browser/suspense.test.jsx
class Catcher (line 22) | class Catcher extends Component {
method constructor (line 23) | constructor(props) {
method componentDidCatch (line 28) | componentDidCatch(e) {
method render (line 36) | render(props, state) {
function onUnhandledRejection (line 51) | function onUnhandledRejection(event) {
function fakeImport (line 114) | function fakeImport() {
class App (line 298) | class App extends Component {
method constructor (line 299) | constructor(props) {
method render (line 304) | render(props, state) {
class ClassWrapper (line 379) | class ClassWrapper extends Component {
method render (line 380) | render(props) {
class LifecycleSuspender (line 431) | class LifecycleSuspender extends Component {
method render (line 432) | render() {
method componentWillMount (line 438) | componentWillMount() {}
method componentDidMount (line 439) | componentDidMount() {}
method componentDidUpdate (line 440) | componentDidUpdate() {}
method componentWillUnmount (line 441) | componentWillUnmount() {}
method constructor (line 499) | constructor(props) {
method render (line 505) | render() {
method componentWillMount (line 516) | componentWillMount() {}
method componentDidMount (line 517) | componentDidMount() {}
method componentWillUnmount (line 518) | componentWillUnmount() {}
method componentDidUpdate (line 519) | componentDidUpdate() {}
class LifecycleSuspender (line 498) | class LifecycleSuspender extends Component {
method render (line 432) | render() {
method componentWillMount (line 438) | componentWillMount() {}
method componentDidMount (line 439) | componentDidMount() {}
method componentDidUpdate (line 440) | componentDidUpdate() {}
method componentWillUnmount (line 441) | componentWillUnmount() {}
method constructor (line 499) | constructor(props) {
method render (line 505) | render() {
method componentWillMount (line 516) | componentWillMount() {}
method componentDidMount (line 517) | componentDidMount() {}
method componentWillUnmount (line 518) | componentWillUnmount() {}
method componentDidUpdate (line 519) | componentDidUpdate() {}
class LifecycleLogger (line 575) | class LifecycleLogger extends Component {
method render (line 576) | render() {
method componentWillMount (line 579) | componentWillMount() {}
method componentDidMount (line 580) | componentDidMount() {}
method componentDidUpdate (line 581) | componentDidUpdate() {}
method componentWillUnmount (line 582) | componentWillUnmount() {}
method render (line 632) | render() {
method componentWillMount (line 635) | componentWillMount() {}
method componentDidMount (line 636) | componentDidMount() {}
method componentWillUnmount (line 637) | componentWillUnmount() {}
class LifecycleLogger (line 631) | class LifecycleLogger extends Component {
method render (line 576) | render() {
method componentWillMount (line 579) | componentWillMount() {}
method componentDidMount (line 580) | componentDidMount() {}
method componentDidUpdate (line 581) | componentDidUpdate() {}
method componentWillUnmount (line 582) | componentWillUnmount() {}
method render (line 632) | render() {
method componentWillMount (line 635) | componentWillMount() {}
method componentDidMount (line 636) | componentDidMount() {}
method componentWillUnmount (line 637) | componentWillUnmount() {}
class Stateful (line 681) | class Stateful extends Component {
method constructor (line 682) | constructor(props) {
method render (line 687) | render(props, state) {
method constructor (line 731) | constructor(props) {
method render (line 736) | render(props, state) {
method constructor (line 784) | constructor(props) {
method render (line 789) | render(props, state) {
class Stateful (line 730) | class Stateful extends Component {
method constructor (line 682) | constructor(props) {
method render (line 687) | render(props, state) {
method constructor (line 731) | constructor(props) {
method render (line 736) | render(props, state) {
method constructor (line 784) | constructor(props) {
method render (line 789) | render(props, state) {
class Stateful (line 783) | class Stateful extends Component {
method constructor (line 682) | constructor(props) {
method render (line 687) | render(props, state) {
method constructor (line 731) | constructor(props) {
method render (line 736) | render(props, state) {
method constructor (line 784) | constructor(props) {
method render (line 789) | render(props, state) {
class StatefulComp (line 1001) | class StatefulComp extends Component {
method constructor (line 1002) | constructor(props) {
method render (line 1009) | render(props, { tag: Tag }) {
function ProfilePage (line 1282) | function ProfilePage() {
class Conditional (line 1437) | class Conditional extends Component {
method constructor (line 1438) | constructor(props) {
method render (line 1447) | render(props, { show }) {
method constructor (line 1492) | constructor(props) {
method render (line 1501) | render(props, { show }) {
method constructor (line 1563) | constructor(props) {
method render (line 1575) | render(props, { show, value }) {
method constructor (line 1629) | constructor(props) {
method render (line 1638) | render(props, { show }) {
method constructor (line 1760) | constructor(props) {
method render (line 1769) | render(props, { show }) {
class Conditional (line 1491) | class Conditional extends Component {
method constructor (line 1438) | constructor(props) {
method render (line 1447) | render(props, { show }) {
method constructor (line 1492) | constructor(props) {
method render (line 1501) | render(props, { show }) {
method constructor (line 1563) | constructor(props) {
method render (line 1575) | render(props, { show, value }) {
method constructor (line 1629) | constructor(props) {
method render (line 1638) | render(props, { show }) {
method constructor (line 1760) | constructor(props) {
method render (line 1769) | render(props, { show }) {
function Lazy (line 1548) | function Lazy({ value }) {
class Conditional (line 1562) | class Conditional extends Component {
method constructor (line 1438) | constructor(props) {
method render (line 1447) | render(props, { show }) {
method constructor (line 1492) | constructor(props) {
method render (line 1501) | render(props, { show }) {
method constructor (line 1563) | constructor(props) {
method render (line 1575) | render(props, { show, value }) {
method constructor (line 1629) | constructor(props) {
method render (line 1638) | render(props, { show }) {
method constructor (line 1760) | constructor(props) {
method render (line 1769) | render(props, { show }) {
class Conditional (line 1628) | class Conditional extends Component {
method constructor (line 1438) | constructor(props) {
method render (line 1447) | render(props, { show }) {
method constructor (line 1492) | constructor(props) {
method render (line 1501) | render(props, { show }) {
method constructor (line 1563) | constructor(props) {
method render (line 1575) | render(props, { show, value }) {
method constructor (line 1629) | constructor(props) {
method render (line 1638) | render(props, { show }) {
method constructor (line 1760) | constructor(props) {
method render (line 1769) | render(props, { show }) {
class Updater (line 1676) | class Updater extends Component {
method constructor (line 1677) | constructor(props) {
method render (line 1686) | render(props, { i }) {
class Suspender (line 1731) | class Suspender extends Component {
method constructor (line 1732) | constructor(props) {
method render (line 1741) | render() {
method constructor (line 1847) | constructor(props) {
method unsuspend (line 1853) | unsuspend() {
method render (line 1857) | render() {
method constructor (line 2561) | constructor(props) {
method render (line 2567) | render(props, state) {
method constructor (line 2626) | constructor(props) {
method render (line 2631) | render(props) {
class Conditional (line 1759) | class Conditional extends Component {
method constructor (line 1438) | constructor(props) {
method render (line 1447) | render(props, { show }) {
method constructor (line 1492) | constructor(props) {
method render (line 1501) | render(props, { show }) {
method constructor (line 1563) | constructor(props) {
method render (line 1575) | render(props, { show, value }) {
method constructor (line 1629) | constructor(props) {
method render (line 1638) | render(props, { show }) {
method constructor (line 1760) | constructor(props) {
method render (line 1769) | render(props, { show }) {
class Logger (line 1832) | class Logger extends Component {
method constructor (line 1833) | constructor(props) {
method render (line 1838) | render({ children }) {
class Suspender (line 1846) | class Suspender extends Component {
method constructor (line 1732) | constructor(props) {
method render (line 1741) | render() {
method constructor (line 1847) | constructor(props) {
method unsuspend (line 1853) | unsuspend() {
method render (line 1857) | render() {
method constructor (line 2561) | constructor(props) {
method render (line 2567) | render(props, state) {
method constructor (line 2626) | constructor(props) {
method render (line 2631) | render(props) {
function createSuspender (line 1897) | function createSuspender() {
function Suspender (line 1964) | function Suspender({ promise, content }) {
method constructor (line 1732) | constructor(props) {
method render (line 1741) | render() {
method constructor (line 1847) | constructor(props) {
method unsuspend (line 1853) | unsuspend() {
method render (line 1857) | render() {
method constructor (line 2561) | constructor(props) {
method render (line 2567) | render(props, state) {
method constructor (line 2626) | constructor(props) {
method render (line 2631) | render(props) {
class Parent (line 1973) | class Parent extends Component {
method constructor (line 1974) | constructor(props) {
method render (line 1980) | render() {
class Blocker (line 2033) | class Blocker extends Component {
method shouldComponentUpdate (line 2034) | shouldComponentUpdate() {
method render (line 2037) | render(props) {
method shouldComponentUpdate (line 2086) | shouldComponentUpdate() {
method render (line 2089) | render(props) {
class Blocker (line 2085) | class Blocker extends Component {
method shouldComponentUpdate (line 2034) | shouldComponentUpdate() {
method render (line 2037) | render(props) {
method shouldComponentUpdate (line 2086) | shouldComponentUpdate() {
method render (line 2089) | render(props) {
class ThrowingChild (line 2205) | class ThrowingChild extends Component {
method constructor (line 2206) | constructor(props) {
method render (line 2212) | render(props, state) {
method constructor (line 2247) | constructor(props) {
method render (line 2253) | render(props, state) {
method constructor (line 2302) | constructor(props) {
method render (line 2308) | render(props, state) {
method constructor (line 2347) | constructor(props) {
method render (line 2353) | render(props, state) {
method render (line 2402) | render() {
class ThrowingChild (line 2246) | class ThrowingChild extends Component {
method constructor (line 2206) | constructor(props) {
method render (line 2212) | render(props, state) {
method constructor (line 2247) | constructor(props) {
method render (line 2253) | render(props, state) {
method constructor (line 2302) | constructor(props) {
method render (line 2308) | render(props, state) {
method constructor (line 2347) | constructor(props) {
method render (line 2353) | render(props, state) {
method render (line 2402) | render() {
class ThrowingChild (line 2301) | class ThrowingChild extends Component {
method constructor (line 2206) | constructor(props) {
method render (line 2212) | render(props, state) {
method constructor (line 2247) | constructor(props) {
method render (line 2253) | render(props, state) {
method constructor (line 2302) | constructor(props) {
method render (line 2308) | render(props, state) {
method constructor (line 2347) | constructor(props) {
method render (line 2353) | render(props, state) {
method render (line 2402) | render() {
class ThrowingChild (line 2346) | class ThrowingChild extends Component {
method constructor (line 2206) | constructor(props) {
method render (line 2212) | render(props, state) {
method constructor (line 2247) | constructor(props) {
method render (line 2253) | render(props, state) {
method constructor (line 2302) | constructor(props) {
method render (line 2308) | render(props, state) {
method constructor (line 2347) | constructor(props) {
method render (line 2353) | render(props, state) {
method render (line 2402) | render() {
class ThrowingChild (line 2401) | class ThrowingChild extends Component {
method constructor (line 2206) | constructor(props) {
method render (line 2212) | render(props, state) {
method constructor (line 2247) | constructor(props) {
method render (line 2253) | render(props, state) {
method constructor (line 2302) | constructor(props) {
method render (line 2308) | render(props, state) {
method constructor (line 2347) | constructor(props) {
method render (line 2353) | render(props, state) {
method render (line 2402) | render() {
function ContextUser (line 2436) | function ContextUser() {
class Suspender (line 2560) | class Suspender extends Component {
method constructor (line 1732) | constructor(props) {
method render (line 1741) | render() {
method constructor (line 1847) | constructor(props) {
method unsuspend (line 1853) | unsuspend() {
method render (line 1857) | render() {
method constructor (line 2561) | constructor(props) {
method render (line 2567) | render(props, state) {
method constructor (line 2626) | constructor(props) {
method render (line 2631) | render(props) {
class Suspender (line 2625) | class Suspender extends Component {
method constructor (line 1732) | constructor(props) {
method render (line 1741) | render() {
method constructor (line 1847) | constructor(props) {
method unsuspend (line 1853) | unsuspend() {
method render (line 1857) | render() {
method constructor (line 2561) | constructor(props) {
method render (line 2567) | render(props, state) {
method constructor (line 2626) | constructor(props) {
method render (line 2631) | render(props) {
FILE: compat/test/browser/testUtils.js
function getSymbol (line 6) | function getSymbol(name, fallback) {
FILE: compat/test/browser/textarea.test.jsx
function App (line 25) | function App() {
FILE: compat/test/browser/useSyncExternalStore.test.jsx
method log (line 27) | log(arg) {
function defer (line 42) | function defer(cb) {
function assertLog (line 46) | function assertLog(expected) {
function Text (line 51) | function Text({ text }) {
function createRoot (line 57) | function createRoot(container) {
function createExternalStore (line 65) | function createExternalStore(initialState) {
function App (line 274) | function App() {
function App (line 313) | function App() {
function App (line 335) | function App() {
function App (line 361) | function App() {
function A (line 410) | function A() {
function B (line 417) | function B() {
function App (line 425) | function App() {
function App (line 464) | function App() {
function Child1 (line 512) | function Child1({ step }) {
function Child2 (line 527) | function Child2({ step }) {
function App (line 535) | function App() {
function Child1 (line 572) | function Child1({ step }) {
function Child2 (line 587) | function Child2({ step }) {
function App (line 593) | function App() {
function Child1 (line 628) | function Child1() {
function Child2 (line 639) | function Child2() {
function App (line 674) | function App() {
class ErrorBoundary (line 697) | class ErrorBoundary extends React.Component {
method getDerivedStateFromError (line 699) | static getDerivedStateFromError(error) {
method render (line 702) | render() {
function App (line 716) | function App() {
function App (line 756) | function App() {
function App (line 783) | function App() {
FILE: compat/test/ts/index.tsx
class SimpleComponentWithContextAsProvider (line 20) | class SimpleComponentWithContextAsProvider extends React.Component {
method render (line 22) | render() {
FILE: compat/test/ts/lazy.tsx
type LazyProps (line 3) | interface LazyProps {
type LazyState (line 7) | interface LazyState {
class IsLazyComponent (line 10) | class IsLazyComponent extends React.Component<
method render (line 14) | render({ isProp }: LazyProps) {
FILE: compat/test/ts/memo.tsx
type MemoProps (line 4) | interface MemoProps {
type MemoPropsExceptDefaults (line 10) | interface MemoPropsExceptDefaults {
FILE: compat/test/ts/react-default.tsx
class ReactIsh (line 2) | class ReactIsh extends React.Component {
method render (line 3) | render() {
FILE: compat/test/ts/react-star.tsx
class ReactIsh (line 3) | class ReactIsh extends React.Component {
method render (line 4) | render() {
FILE: compat/test/ts/suspense.tsx
type LazyProps (line 3) | interface LazyProps {
class ReactSuspensefulFunc (line 30) | class ReactSuspensefulFunc extends React.Component {
method render (line 31) | render() {
function App (line 51) | function App() {
FILE: debug/src/check-props.js
function resetPropWarnings (line 8) | function resetPropWarnings() {
function checkPropTypes (line 24) | function checkPropTypes(
FILE: debug/src/component-stack.js
function getDisplayName (line 9) | function getDisplayName(vnode) {
function getCurrentVNode (line 53) | function getCurrentVNode() {
function isPossibleOwner (line 69) | function isPossibleOwner(vnode) {
function getOwnerStack (line 78) | function getOwnerStack(vnode) {
function setupComponentStack (line 107) | function setupComponentStack() {
function captureOwnerStack (line 155) | function captureOwnerStack() {
FILE: debug/src/constants.js
constant ELEMENT_NODE (line 1) | const ELEMENT_NODE = 1;
constant DOCUMENT_NODE (line 2) | const DOCUMENT_NODE = 9;
constant DOCUMENT_FRAGMENT_NODE (line 3) | const DOCUMENT_FRAGMENT_NODE = 11;
FILE: debug/src/debug.js
function getDomChildren (line 22) | function getDomChildren(vnode) {
function getClosestDomNodeParentName (line 42) | function getClosestDomNodeParentName(parent) {
function initDebug (line 56) | function initDebug() {
function isTableElement (line 513) | function isTableElement(type) {
constant ILLEGAL_PARAGRAPH_CHILD_ELEMENTS (line 525) | const ILLEGAL_PARAGRAPH_CHILD_ELEMENTS =
function serializeVNode (line 553) | function serializeVNode(vnode) {
FILE: debug/src/internal.d.ts
type DevtoolsInjectOptions (line 5) | interface DevtoolsInjectOptions {
type DevtoolsUpdater (line 18) | interface DevtoolsUpdater {
type NodeType (line 26) | type NodeType = 'Composite' | 'Native' | 'Wrapper' | 'Text';
type DevtoolData (line 28) | interface DevtoolData {
type EventType (line 48) | type EventType =
type DevtoolsEvent (line 56) | interface DevtoolsEvent {
type DevtoolsHook (line 63) | interface DevtoolsHook {
type DevtoolsWindow (line 75) | interface DevtoolsWindow extends Window {
FILE: debug/src/util.js
function isNaN (line 3) | function isNaN(value) {
FILE: debug/test/browser/component-stack-2.test.jsx
function Foo (line 32) | function Foo() {
class Thrower (line 36) | class Thrower extends Component {
method constructor (line 37) | constructor(props) {
method render (line 42) | render() {
FILE: debug/test/browser/component-stack.test.jsx
function Foo (line 30) | function Foo() {
class Thrower (line 34) | class Thrower extends Component {
method constructor (line 35) | constructor(props) {
method render (line 40) | render() {
method render (line 68) | render() {
function Foo (line 55) | function Foo(props) {
function Bar (line 59) | function Bar() {
class Thrower (line 67) | class Thrower extends Component {
method constructor (line 35) | constructor(props) {
method render (line 40) | render() {
method render (line 68) | render() {
function Thrower (line 88) | function Thrower() {
method constructor (line 35) | constructor(props) {
method render (line 40) | render() {
method render (line 68) | render() {
FILE: debug/test/browser/debug-compat.test.jsx
function Foo (line 42) | function Foo(props) {
method ref (line 63) | ref(props) {
FILE: debug/test/browser/debug-hooks.test.jsx
class Foo (line 28) | class Foo extends Component {
method componentWillMount (line 29) | componentWillMount() {
method render (line 33) | render() {
class App (line 38) | class App extends Component {
method render (line 39) | render() {
function foo (line 56) | function foo() {
function Foo (line 69) | function Foo(props) {
method componentWillMount (line 29) | componentWillMount() {
method render (line 33) | render() {
function Foo (line 83) | function Foo(props) {
method componentWillMount (line 29) | componentWillMount() {
method render (line 33) | render() {
function Foo (line 97) | function Foo(props) {
method componentWillMount (line 29) | componentWillMount() {
method render (line 33) | render() {
FILE: debug/test/browser/debug-suspense.test.jsx
function Foo (line 34) | function Foo() {
function Baz (line 55) | function Baz(props) {
function MyLazyLoadedComponent (line 115) | function MyLazyLoadedComponent() {
FILE: debug/test/browser/debug.options.test.jsx
class ClassApp (line 47) | class ClassApp extends Component {
method constructor (line 48) | constructor() {
method render (line 54) | render() {
function HookApp (line 91) | function HookApp() {
class ErrorApp (line 104) | class ErrorApp extends Component {
method constructor (line 105) | constructor() {
method componentDidCatch (line 109) | componentDidCatch() {
method render (line 112) | render() {
function Throw (line 117) | function Throw({ error }) {
FILE: debug/test/browser/debug.test.jsx
class App (line 72) | class App extends Component {
method render (line 73) | render() {
class Foo (line 168) | class Foo extends Component {
method constructor (line 169) | constructor(props) {
method render (line 173) | render() {
method componentWillMount (line 185) | componentWillMount() {
method render (line 188) | render() {
method constructor (line 199) | constructor(props) {
method render (line 203) | render() {
method constructor (line 217) | constructor(props) {
method render (line 221) | render() {
class Foo (line 184) | class Foo extends Component {
method constructor (line 169) | constructor(props) {
method render (line 173) | render() {
method componentWillMount (line 185) | componentWillMount() {
method render (line 188) | render() {
method constructor (line 199) | constructor(props) {
method render (line 203) | render() {
method constructor (line 217) | constructor(props) {
method render (line 221) | render() {
class Foo (line 198) | class Foo extends Component {
method constructor (line 169) | constructor(props) {
method render (line 173) | render() {
method componentWillMount (line 185) | componentWillMount() {
method render (line 188) | render() {
method constructor (line 199) | constructor(props) {
method render (line 203) | render() {
method constructor (line 217) | constructor(props) {
method render (line 221) | render() {
class Foo (line 216) | class Foo extends Component {
method constructor (line 169) | constructor(props) {
method render (line 173) | render() {
method componentWillMount (line 185) | componentWillMount() {
method render (line 188) | render() {
method constructor (line 199) | constructor(props) {
method render (line 203) | render() {
method constructor (line 217) | constructor(props) {
method render (line 221) | render() {
function TestComponent (line 279) | function TestComponent({ loop = false }) {
function TestComponent (line 310) | function TestComponent() {
function App (line 365) | function App() {
method render (line 73) | render() {
function App (line 381) | function App() {
method render (line 73) | render() {
FILE: debug/test/browser/prop-types.test.js
function Foo (line 39) | function Foo(props) {
function Foo (line 76) | function Foo(props) {
function Baz (line 100) | function Baz(props) {
function Bar (line 118) | function Bar(props) {
FILE: debug/test/browser/serializeVNode.test.jsx
function Foo (line 6) | function Foo() {
class Bar (line 15) | class Bar extends Component {
method render (line 16) | render() {
function Foo (line 34) | function Foo() {
function Foo (line 52) | function Foo(props) {
FILE: debug/test/browser/validateHookArgs.test.jsx
function validateHook (line 20) | function validateHook(name, hook) {
FILE: demo/contenteditable.jsx
function Contenteditable (line 3) | function Contenteditable() {
FILE: demo/context.jsx
class ThemeProvider (line 5) | class ThemeProvider extends Component {
method render (line 17) | render() {
class Child (line 27) | class Child extends Component {
method shouldComponentUpdate (line 28) | shouldComponentUpdate() {
method render (line 32) | render() {
class ContextDemo (line 42) | class ContextDemo extends Component {
method render (line 43) | render() {
FILE: demo/devtools.jsx
function Foo (line 3) | function Foo() {
function LazyComp (line 7) | function LazyComp() {
class DevtoolsDemo (line 15) | class DevtoolsDemo extends Component {
method render (line 16) | render() {
FILE: demo/fragments.jsx
class FragmentComp (line 3) | class FragmentComp extends Component {
method componentDidMount (line 6) | componentDidMount() {
method updateChildren (line 10) | updateChildren() {
method render (line 14) | render(props, state) {
FILE: demo/index.jsx
class Home (line 44) | class Home extends Component {
method render (line 45) | render() {
class DevtoolsWarning (line 54) | class DevtoolsWarning extends Component {
method render (line 59) | render() {
class App (line 68) | class App extends Component {
method render (line 69) | render({ url }) {
function EmptyFragment (line 185) | function EmptyFragment() {
FILE: demo/key_bug.jsx
function Foo (line 3) | function Foo(props) {
class KeyBug (line 7) | class KeyBug extends Component {
method constructor (line 8) | constructor() {
method onClick (line 14) | onClick() {
method render (line 18) | render() {
FILE: demo/list.jsx
function List (line 10) | function List({ items, renders, useKeys, useCounts, update }) {
function update (line 56) | function update(partial) {
FILE: demo/logger.jsx
function logger (line 1) | function logger(logStats, logConsole) {
class ConsoleBuffer (line 137) | class ConsoleBuffer {
method constructor (line 138) | constructor() {
method proxy (line 148) | proxy(methodName) {
method deferFlush (line 155) | deferFlush() {
method flush (line 163) | flush() {
FILE: demo/mobx.jsx
class Todo (line 5) | class Todo {
method constructor (line 6) | constructor() {
function MobXDemo (line 48) | function MobXDemo() {
FILE: demo/nested-suspense/addnewcomponent.jsx
function AddNewComponent (line 3) | function AddNewComponent({ appearance }) {
FILE: demo/nested-suspense/component-container.jsx
function ComponentContainer (line 10) | function ComponentContainer({ appearance }) {
FILE: demo/nested-suspense/dropzone.jsx
function DropZone (line 3) | function DropZone({ appearance }) {
FILE: demo/nested-suspense/editor.jsx
function Editor (line 3) | function Editor({ children }) {
FILE: demo/nested-suspense/index.jsx
class App (line 33) | class App extends Component {
method getDerivedStateFromError (line 36) | static getDerivedStateFromError(error) {
method render (line 42) | render() {
FILE: demo/nested-suspense/subcomponent.jsx
function SubComponent (line 3) | function SubComponent({ onClick }) {
FILE: demo/people/index.tsx
class App (line 10) | class App extends Component {
method componentDidMount (line 11) | componentDidMount() {
method render (line 15) | render() {
FILE: demo/people/profile.tsx
type ProfileProps (line 7) | type ProfileProps = RouteChildProps;
class Profile (line 9) | class Profile extends Component<ProfileProps> {
method componentDidMount (line 13) | componentDidMount() {
method componentWillReceiveProps (line 17) | componentWillReceiveProps(props: ProfileProps) {
method render (line 21) | render() {
method user (line 49) | get user() {
FILE: demo/people/router.tsx
type RouterData (line 17) | type RouterData = {
method navigate (line 26) | navigate() {}
type RouteChildProps (line 68) | type RouteChildProps = { route: string };
type RouteProps (line 69) | type RouteProps = {
type LinkProps (line 99) | type LinkProps = JSX.HTMLAttributes & {
FILE: demo/people/store.ts
method getSortedUsers (line 27) | getSortedUsers() {
method deleteUser (line 60) | deleteUser(id: string) {
method setUsersOrder (line 64) | setUsersOrder(order: 'name' | 'id') {
type StoreType (line 69) | type StoreType = Instance<typeof Store>;
FILE: demo/preact.jsx
function asArray (line 15) | function asArray(arr) {
function normalize (line 19) | function normalize(obj) {
function Component (line 29) | function Component(props, context) {
FILE: demo/profiler.jsx
function getPrimes (line 3) | function getPrimes(max) {
function Foo (line 20) | function Foo(props) {
function Bar (line 24) | function Bar() {
function PrimeNumber (line 33) | function PrimeNumber(props) {
class ProfilerDemo (line 46) | class ProfilerDemo extends Component {
method constructor (line 47) | constructor() {
method componentDidMount (line 53) | componentDidMount() {
method componentWillUnmount (line 58) | componentWillUnmount() {
method onClick (line 63) | onClick() {
method render (line 67) | render() {
FILE: demo/pythagoras/index.jsx
class PythagorasDemo (line 6) | class PythagorasDemo extends Component {
method componentDidMount (line 54) | componentDidMount() {
method componentWillUnmount (line 59) | componentWillUnmount() {
method render (line 64) | render({}, { currentMax, baseW, heightFactor, lean }) {
FILE: demo/pythagoras/pythagoras.jsx
function Pythagoras (line 34) | function Pythagoras({
FILE: demo/redux-toolkit.jsx
function Counter (line 26) | function Counter({ number }) {
function ReduxToolkit (line 35) | function ReduxToolkit() {
FILE: demo/redux.jsx
class Child (line 17) | class Child extends React.Component {
method render (line 18) | render() {
class Child2 (line 29) | class Child2 extends React.Component {
method render (line 30) | render() {
function Redux (line 36) | function Redux() {
FILE: demo/reduxUpdate.jsx
function _Redux (line 11) | function _Redux({ showMe, counter }) {
class Test (line 20) | class Test extends Component {
method componentDidUpdate (line 21) | componentDidUpdate(prevProps) {
method render (line 28) | render() {
function App (line 48) | function App() {
FILE: demo/reorder.jsx
function createItems (line 3) | function createItems(count = 10) {
function random (line 14) | function random() {
class Reorder (line 18) | class Reorder extends Component {
method render (line 71) | render({}, { items, count, useKeys }) {
FILE: demo/spiral.jsx
constant COUNT (line 3) | const COUNT = 500;
constant LOOPS (line 4) | const LOOPS = 6;
class Spiral (line 8) | class Spiral extends Component {
method setMouse (line 23) | setMouse({ pageX: x, pageY: y }) {
method setBig (line 28) | setBig(big) {
method componentDidMount (line 32) | componentDidMount() {
method componentWillUnmount (line 53) | componentWillUnmount() {
method render (line 64) | render(props, { x, y, big, counter }) {
class Cursor (line 96) | class Cursor extends Component {
method getClass (line 98) | getClass(big, label) {
method shouldComponentUpdate (line 106) | shouldComponentUpdate(props) {
method render (line 113) | render({ x, y, label, color, big }) {
FILE: demo/styled-components.jsx
function StyledComp (line 24) | function StyledComp() {
FILE: demo/suspense-router/bye.jsx
function Bye (line 3) | function Bye() {
FILE: demo/suspense-router/hello.jsx
function Hello (line 3) | function Hello() {
FILE: demo/suspense-router/index.jsx
function Loading (line 8) | function Loading() {
function SuspenseRouterBug (line 12) | function SuspenseRouterBug() {
FILE: demo/suspense-router/simple-router.jsx
method listen (line 20) | listen(listener) {
method navigate (line 28) | navigate(to) {
function Router (line 36) | function Router({ history = memoryHistory, children }) {
function Switch (line 50) | function Switch(props) {
function Route (line 66) | function Route({ children, path, exact }) {
function Link (line 70) | function Link({ to, children }) {
FILE: demo/suspense.jsx
function LazyComp (line 11) | function LazyComp() {
function createSuspension (line 17) | function createSuspension(name, timeout, error) {
function CustomSuspense (line 45) | function CustomSuspense({ isDone, start, timeout, name }) {
function init (line 57) | function init() {
class DevtoolsDemo (line 65) | class DevtoolsDemo extends Component {
method constructor (line 66) | constructor(props) {
method onRerun (line 72) | onRerun() {
method render (line 76) | render(props, state) {
FILE: demo/todo.jsx
class TodoList (line 5) | class TodoList extends Component {
method render (line 23) | render({}, { todos, text }) {
class TodoItems (line 36) | class TodoItems extends Component {
method render (line 37) | render({ todos, removeTodo }) {
FILE: demo/zustand.jsx
function Counter (line 16) | function Counter({ number }) {
function Text (line 24) | function Text() {
function ZustandComponent (line 38) | function ZustandComponent() {
FILE: devtools/src/devtools.js
function initDevTools (line 3) | function initDevTools() {
FILE: devtools/src/index.js
function addHookName (line 10) | function addHookName(value, name) {
FILE: devtools/test/browser/addHookName.test.jsx
function useFoo (line 21) | function useFoo() {
function App (line 25) | function App() {
function useFoo (line 36) | function useFoo() {
function App (line 40) | function App() {
FILE: hooks/src/index.d.ts
type Inputs (line 3) | type Inputs = ReadonlyArray<unknown>;
type Dispatch (line 5) | type Dispatch<A> = (value: A) => void;
type StateUpdater (line 6) | type StateUpdater<S> = S | ((prevState: S) => S);
type Reducer (line 21) | type Reducer<S, A> = (prevState: S, action: A) => S;
type EffectCallback (line 68) | type EffectCallback = () => void | (() => void);
type CreateHandle (line 78) | type CreateHandle = () => object;
FILE: hooks/src/index.js
constant RAF_TIMEOUT (line 34) | const RAF_TIMEOUT = 35;
function getHookState (line 142) | function getHookState(index, type) {
function useState (line 172) | function useState(initialState) {
function useReducer (line 185) | function useReducer(reducer, initialState, init) {
function useEffect (line 278) | function useEffect(callback, args) {
function useLayoutEffect (line 294) | function useLayoutEffect(callback, args) {
function useRef (line 306) | function useRef(initialValue) {
function useImperativeHandle (line 317) | function useImperativeHandle(ref, createHandle, args) {
function useMemo (line 342) | function useMemo(factory, args) {
function useCallback (line 359) | function useCallback(callback, args) {
function useContext (line 367) | function useContext(context) {
function useDebugValue (line 391) | function useDebugValue(value, formatter) {
function useErrorBoundary (line 403) | function useErrorBoundary(cb) {
function useId (line 423) | function useId() {
function flushAfterPaintEffects (line 444) | function flushAfterPaintEffects() {
constant HAS_RAF (line 460) | let HAS_RAF = typeof requestAnimationFrame == 'function';
function afterNextFrame (line 472) | function afterNextFrame(callback) {
function afterPaint (line 494) | function afterPaint(newQueueLength) {
function invokeCleanup (line 505) | function invokeCleanup(hook) {
function invokeEffect (line 523) | function invokeEffect(hook) {
function argsChanged (line 536) | function argsChanged(oldArgs, newArgs) {
function invokeOrReturn (line 550) | function invokeOrReturn(arg, f) {
FILE: hooks/src/internal.d.ts
type Options (line 13) | interface Options extends PreactOptions {
type ComponentHooks (line 29) | interface ComponentHooks {
type Component (line 36) | interface Component
type VNode (line 44) | interface VNode extends Omit<PreactVNode, '_component'> {
type HookState (line 49) | type HookState =
type BaseHookState (line 57) | interface BaseHookState {
type Effect (line 67) | type Effect = () => void | Cleanup;
type Cleanup (line 68) | type Cleanup = () => void;
type EffectHookState (line 70) | interface EffectHookState extends BaseHookState {
type MemoHookState (line 77) | interface MemoHookState<T = unknown> extends BaseHookState {
type ReducerHookState (line 85) | interface ReducerHookState<S = unknown, A = unknown>
type ContextHookState (line 93) | interface ContextHookState extends BaseHookState {
type ErrorBoundaryHookState (line 99) | interface ErrorBoundaryHookState extends BaseHookState {
type IdHookState (line 103) | interface IdHookState extends BaseHookState {
FILE: hooks/test/_util/useEffectUtil.js
function scheduleEffectAssert (line 1) | function scheduleEffectAssert(assertFn) {
FILE: hooks/test/browser/combinations.test.jsx
function Parent (line 36) | function Parent() {
function Child (line 46) | function Child() {
function Comp (line 78) | function Comp() {
function Comp (line 101) | function Comp() {
function Comp (line 122) | function Comp() {
function reducer1 (line 141) | function reducer1(state, action) {
function reducer2 (line 148) | function reducer2(state, action) {
function Comp (line 155) | function Comp() {
function Comp (line 182) | function Comp() {
function Foo (line 202) | function Foo(props) {
class App (line 209) | class App extends Component {
method constructor (line 210) | constructor(props) {
method render (line 216) | render() {
function Inner (line 245) | function Inner() {
function Outer (line 257) | function Outer() {
function Child (line 315) | function Child() {
function Parent (line 324) | function Parent() {
function Child (line 357) | function Child() {
function App (line 373) | function App() {
method constructor (line 210) | constructor(props) {
method render (line 216) | render() {
function Tooltip (line 421) | function Tooltip({ anchorRef, children }) {
function App (line 445) | function App() {
method constructor (line 210) | constructor(props) {
method render (line 216) | render() {
function App (line 485) | function App() {
method constructor (line 210) | constructor(props) {
method render (line 216) | render() {
FILE: hooks/test/browser/componentDidCatch.test.jsx
class Receiver (line 21) | class Receiver extends Component {
method constructor (line 22) | constructor(props) {
method componentDidCatch (line 27) | componentDidCatch(error, errorInfo) {
method render (line 31) | render() {
function ThrowErr (line 38) | function ThrowErr() {
FILE: hooks/test/browser/errorBoundary.test.jsx
function EffectThrowsError (line 120) | function EffectThrowsError() {
function Child (line 125) | function Child({ children }) {
function App (line 130) | function App() {
function TodoList (line 160) | function TodoList() {
function TodoItem (line 185) | function TodoItem(props) {
function TodoItemInner (line 195) | function TodoItemInner({ todo, index, toggleTodo }) {
FILE: hooks/test/browser/hooks.options.test.jsx
function App (line 49) | function App() {
function App (line 93) | function App() {
function App (line 140) | function App() {
FILE: hooks/test/browser/useCallback.test.jsx
function Comp (line 20) | function Comp({ a, b }) {
FILE: hooks/test/browser/useContext.test.jsx
function Comp (line 23) | function Comp() {
function App (line 50) | function App() {
method constructor (line 314) | constructor() {
method render (line 321) | render(props, state) {
class NoUpdate (line 63) | class NoUpdate extends Component {
method shouldComponentUpdate (line 64) | shouldComponentUpdate() {
method render (line 67) | render() {
method shouldComponentUpdate (line 358) | shouldComponentUpdate() {
method render (line 362) | render() {
function App (line 72) | function App(props) {
method constructor (line 314) | constructor() {
method render (line 321) | render(props, state) {
function Comp (line 82) | function Comp() {
function App (line 108) | function App(props) {
method constructor (line 314) | constructor() {
method render (line 321) | render(props, state) {
function Comp (line 116) | function Comp() {
function Comp (line 146) | function Comp() {
function Comp (line 185) | function Comp() {
function Comp (line 218) | function Comp() {
class App (line 313) | class App extends Component {
method constructor (line 314) | constructor() {
method render (line 321) | render(props, state) {
class NoUpdate (line 357) | class NoUpdate extends Component {
method shouldComponentUpdate (line 64) | shouldComponentUpdate() {
method render (line 67) | render() {
method shouldComponentUpdate (line 358) | shouldComponentUpdate() {
method render (line 362) | render() {
FILE: hooks/test/browser/useDebugValue.test.jsx
function useFoo (line 20) | function useFoo() {
function App (line 25) | function App() {
function useFoo (line 36) | function useFoo() {
function App (line 41) | function App() {
function useFoo (line 55) | function useFoo() {
function App (line 60) | function App() {
FILE: hooks/test/browser/useEffect.test.jsx
function Comp (line 27) | function Comp() {
function Comp (line 48) | function Comp() {
class ErrorBoundary (line 111) | class ErrorBoundary extends Component {
method componentDidCatch (line 112) | componentDidCatch(error) {
method render (line 116) | render({ children }, { error }) {
method constructor (line 418) | constructor(props) {
method componentDidCatch (line 423) | componentDidCatch(error) {
method render (line 427) | render() {
class App (line 153) | class App extends Component {
method componentDidCatch (line 154) | componentDidCatch(err) {
method render (line 160) | render(props, state) {
method componentDidCatch (line 205) | componentDidCatch(err) {
method render (line 211) | render(props, state) {
method componentDidCatch (line 240) | componentDidCatch(err) {
method render (line 246) | render(props, state) {
class App (line 204) | class App extends Component {
method componentDidCatch (line 154) | componentDidCatch(err) {
method render (line 160) | render(props, state) {
method componentDidCatch (line 205) | componentDidCatch(err) {
method render (line 211) | render(props, state) {
method componentDidCatch (line 240) | componentDidCatch(err) {
method render (line 246) | render(props, state) {
function Comp (line 232) | function Comp() {
class App (line 239) | class App extends Component {
method componentDidCatch (line 154) | componentDidCatch(err) {
method render (line 160) | render(props, state) {
method componentDidCatch (line 205) | componentDidCatch(err) {
method render (line 211) | render(props, state) {
method componentDidCatch (line 240) | componentDidCatch(err) {
method render (line 246) | render(props, state) {
function Comp (line 308) | function Comp() {
class ErrorBoundary (line 417) | class ErrorBoundary extends Component {
method componentDidCatch (line 112) | componentDidCatch(error) {
method render (line 116) | render({ children }, { error }) {
method constructor (line 418) | constructor(props) {
method componentDidCatch (line 423) | componentDidCatch(error) {
method render (line 427) | render() {
function Parent (line 513) | function Parent() {
function App (line 648) | function App() {
method componentDidCatch (line 154) | componentDidCatch(err) {
method render (line 160) | render(props, state) {
method componentDidCatch (line 205) | componentDidCatch(err) {
method render (line 211) | render(props, state) {
method componentDidCatch (line 240) | componentDidCatch(err) {
method render (line 246) | render(props, state) {
FILE: hooks/test/browser/useEffectAssertions.jsx
function useEffectAssertions (line 7) | function useEffectAssertions(useEffect, scheduleEffectAssert) {
FILE: hooks/test/browser/useId.test.jsx
function Comp (line 21) | function Comp() {
function Child (line 35) | function Child() {
function Comp (line 45) | function Comp() {
function Child (line 66) | function Child() {
function Comp (line 71) | function Comp() {
function Child (line 95) | function Child() {
function Stateful (line 100) | function Stateful() {
function Comp (line 111) | function Comp() {
function Foo (line 274) | function Foo() {
function App (line 280) | function App() {
function Foo (line 297) | function Foo() {
function Bar (line 302) | function Bar(props) {
function App (line 306) | function App() {
function Foo (line 330) | function Foo() {
function App (line 336) | function App() {
function Foo (line 356) | function Foo() {
function App (line 362) | function App() {
function Foo (line 382) | function Foo() {
function App (line 388) | function App() {
function Foo (line 407) | function Foo() {
function Bar (line 411) | function Bar() {
function App (line 417) | function App() {
FILE: hooks/test/browser/useImperativeHandle.test.jsx
function Comp (line 26) | function Comp() {
function Comp (line 41) | function Comp() {
function Comp (line 65) | function Comp() {
function Comp (line 85) | function Comp() {
function Comp (line 102) | function Comp({ a }) {
function Comp (line 140) | function Comp() {
function Comp (line 178) | function Comp() {
function Comp (line 194) | function Comp() {
function Comp (line 206) | function Comp() {
function Comp (line 226) | function Comp() {
FILE: hooks/test/browser/useLayoutEffect.test.jsx
function Comp (line 37) | function Comp() {
function Parent (line 57) | function Parent() {
function Child (line 65) | function Child() {
function AutoResizeTextareaLayoutEffect (line 100) | function AutoResizeTextareaLayoutEffect(props) {
function App (line 118) | function App(props) {
method componentDidCatch (line 252) | componentDidCatch(err) {
method render (line 258) | render(props, state) {
method componentDidCatch (line 303) | componentDidCatch(err) {
method render (line 309) | render(props, state) {
function Inner (line 137) | function Inner() {
function Outer (line 148) | function Outer() {
function App (line 194) | function App() {
method componentDidCatch (line 252) | componentDidCatch(err) {
method render (line 258) | render(props, state) {
method componentDidCatch (line 303) | componentDidCatch(err) {
method render (line 309) | render(props, state) {
class App (line 251) | class App extends Component {
method componentDidCatch (line 252) | componentDidCatch(err) {
method render (line 258) | render(props, state) {
method componentDidCatch (line 303) | componentDidCatch(err) {
method render (line 309) | render(props, state) {
class App (line 302) | class App extends Component {
method componentDidCatch (line 252) | componentDidCatch(err) {
method render (line 258) | render(props, state) {
method componentDidCatch (line 303) | componentDidCatch(err) {
method render (line 309) | render(props, state) {
function Parent (line 353) | function Parent() {
FILE: hooks/test/browser/useMemo.test.jsx
function Comp (line 23) | function Comp({ a, b }) {
function Comp (line 45) | function Comp({ all }) {
function Comp (line 68) | function Comp() {
function App (line 167) | function App() {
function Comp (line 193) | function Comp({ all }) {
FILE: hooks/test/browser/useReducer.test.jsx
function reducer (line 28) | function reducer(state, action) {
function Comp (line 35) | function Comp() {
function reducer (line 53) | function reducer(state, action) {
function ReducerComponent (line 60) | function ReducerComponent() {
function DispatchComponent (line 70) | function DispatchComponent(props) {
function init (line 92) | function init(initialCount) {
function reducer (line 96) | function reducer(state, action) {
function Comp (line 103) | function Comp({ initCount }) {
function reducer (line 124) | function reducer(state, action) {
function Comp (line 131) | function Comp() {
function Comp (line 152) | function Comp({ increment }) {
FILE: hooks/test/browser/useRef.test.jsx
function Comp (line 20) | function Comp() {
function Comp (line 36) | function Comp() {
FILE: hooks/test/browser/useState.test.jsx
function Comp (line 27) | function Comp() {
function Comp (line 43) | function Comp() {
function StateContainer (line 108) | function StateContainer() {
function Increment (line 118) | function Increment(props) {
function useSomething (line 136) | function useSomething() {
function Message (line 180) | function Message({ message, onClose }) {
function App (line 195) | function App() {
function TestWidget (line 240) | function TestWidget() {
function TestWidget (line 267) | function TestWidget() {
function ModalProvider (line 302) | function ModalProvider(props) {
function useModal (line 320) | function useModal() {
function Popover (line 330) | function Popover() {
function App (line 335) | function App() {
function App (line 356) | function App() {
function TestWidget (line 456) | function TestWidget() {
function FooProvider (line 494) | function FooProvider({ children }) {
function BarProvider (line 500) | function BarProvider({ children }) {
function Child (line 506) | function Child() {
function App (line 516) | function App() {
FILE: jsx-runtime/src/index.js
function createVNode (line 28) | function createVNode(type, props, key, isStaticChildren, __source, __sel...
function jsxTemplate (line 78) | function jsxTemplate(templates, ...exprs) {
constant JS_TO_CSS (line 86) | const JS_TO_CSS = {};
constant CSS_REGEX (line 87) | const CSS_REGEX = /[A-Z]/g;
function normalizeAttrValue (line 94) | function normalizeAttrValue(value) {
function jsxAttr (line 110) | function jsxAttr(name, value) {
function jsxEscape (line 155) | function jsxEscape(value) {
FILE: jsx-runtime/src/utils.js
constant ENCODED_ENTITIES (line 1) | const ENCODED_ENTITIES = /["&<]/;
function encodeEntities (line 4) | function encodeEntities(str) {
FILE: jsx-runtime/test/browser/jsx-runtime.test.js
function createSignal (line 15) | function createSignal(value) {
FILE: scripts/release/create-gh-release.js
function create (line 11) | async function create({ github, context }) {
FILE: scripts/release/publish.mjs
constant DEBUG (line 6) | let DEBUG = false;
function main (line 18) | async function main(tag, opts) {
FILE: scripts/release/upload-gh-asset.js
function upload (line 13) | async function upload({ require, github, context, glob, release }) {
FILE: src/clone-element.js
function cloneElement (line 14) | function cloneElement(vnode, props, children) {
FILE: src/component.js
function BaseComponent (line 19) | function BaseComponent(props, context) {
function getDomSibling (line 96) | function getDomSibling(vnode, childIndex) {
function renderComponent (line 128) | function renderComponent(component) {
function updateParentDomPointers (line 168) | function updateParentDomPointers(vnode) {
function resetRenderCount (line 199) | function resetRenderCount() {
function enqueueRender (line 207) | function enqueueRender(c) {
function process (line 227) | function process() {
FILE: src/constants.js
constant MODE_HYDRATE (line 3) | const MODE_HYDRATE = 1 << 5;
constant MODE_SUSPENDED (line 5) | const MODE_SUSPENDED = 1 << 7;
constant INSERT_VNODE (line 7) | const INSERT_VNODE = 1 << 2;
constant MATCHED (line 9) | const MATCHED = 1 << 1;
constant FORCE_PROPS_REVALIDATE (line 11) | const FORCE_PROPS_REVALIDATE = 1 << 0;
constant COMPONENT_PROCESSING_EXCEPTION (line 15) | const COMPONENT_PROCESSING_EXCEPTION = 1 << 0;
constant COMPONENT_PENDING_ERROR (line 17) | const COMPONENT_PENDING_ERROR = 1 << 1;
constant COMPONENT_FORCE (line 19) | const COMPONENT_FORCE = 1 << 2;
constant COMPONENT_DIRTY (line 21) | const COMPONENT_DIRTY = 1 << 3;
constant RESET_MODE (line 24) | const RESET_MODE = ~(MODE_HYDRATE | MODE_SUSPENDED);
constant SVG_NAMESPACE (line 26) | const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
constant XHTML_NAMESPACE (line 27) | const XHTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
constant MATH_NAMESPACE (line 28) | const MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
constant NULL (line 30) | const NULL = null;
constant UNDEFINED (line 31) | const UNDEFINED = undefined;
constant EMPTY_OBJ (line 32) | const EMPTY_OBJ = /** @type {any} */ ({});
constant EMPTY_ARR (line 33) | const EMPTY_ARR = [];
constant MATHML_TOKEN_ELEMENTS (line 35) | const MATHML_TOKEN_ELEMENTS = /(mi|mn|mo|ms$|mte|msp)/;
FILE: src/create-context.js
function createContext (line 6) | function createContext(defaultValue) {
FILE: src/create-element.js
function createElement (line 16) | function createElement(type, props, children) {
function createVNode (line 47) | function createVNode(type, props, key, ref, original) {
function createRef (line 73) | function createRef() {
function Fragment (line 77) | function Fragment(props) {
FILE: src/diff/catch-error.js
function _catchError (line 19) | function _catchError(error, vnode, oldVNode, errorInfo) {
FILE: src/diff/children.js
function diffChildren (line 45) | function diffChildren(
function constructNewChildrenArray (line 151) | function constructNewChildrenArray(
function insert (line 341) | function insert(parentVNode, oldDom, parentDom, shouldPlace) {
function toChildArray (line 380) | function toChildArray(children, out) {
function findMatchingIndex (line 400) | function findMatchingIndex(
FILE: src/diff/index.js
function diff (line 58) | function diff(
function markAsForce (line 395) | function markAsForce(vnode) {
function commitRoot (line 405) | function commitRoot(commitQueue, root, refQueue) {
function cloneNode (line 427) | function cloneNode(node) {
function diffElementNodes (line 455) | function diffElementNodes(
function applyRef (line 659) | function applyRef(ref, value, vnode) {
function unmount (line 685) | function unmount(vnode, parentVNode, skipRemove) {
function doRender (line 729) | function doRender(props, state, context) {
FILE: src/diff/props.js
function setStyle (line 4) | function setStyle(style, key, value) {
constant CAPTURE_REGEX (line 14) | const CAPTURE_REGEX = /(PointerCapture)$|Capture$/i;
function setProperty (line 37) | function setProperty(dom, name, value, oldValue, namespace) {
function createEventProxy (line 144) | function createEventProxy(useCapture) {
FILE: src/dom.d.ts
type ToggleEvent (line 6) | interface ToggleEvent extends Event {
type ToggleEventInit (line 16) | interface ToggleEventInit extends EventInit {
type CommandEvent (line 21) | interface CommandEvent extends Event {
type CommandEventInit (line 31) | interface CommandEventInit extends EventInit {
type SnapEvent (line 37) | interface SnapEvent extends Event {
type SnapEventInit (line 47) | interface SnapEventInit extends EventInit {
type Booleanish (line 52) | type Booleanish = boolean | 'true' | 'false';
type SignalLike (line 54) | interface SignalLike<T> {
type Signalish (line 60) | type Signalish<T> = T | SignalLike<T>;
type UnpackSignal (line 62) | type UnpackSignal<T> = T extends SignalLike<infer V> ? V : T;
type DOMCSSProperties (line 64) | type DOMCSSProperties = {
type AllCSSProperties (line 74) | type AllCSSProperties = {
type CSSProperties (line 77) | interface CSSProperties extends AllCSSProperties, DOMCSSProperties {
type SVGAttributes (line 81) | interface SVGAttributes<Target extends EventTarget = SVGElement>
type PathAttributes (line 464) | interface PathAttributes {
type TargetedEvent (line 468) | type TargetedEvent<
type TargetedAnimationEvent (line 475) | type TargetedAnimationEvent<Target extends EventTarget> = TargetedEvent<
type TargetedClipboardEvent (line 479) | type TargetedClipboardEvent<Target extends EventTarget> = TargetedEvent<
type TargetedCommandEvent (line 483) | type TargetedCommandEvent<Target extends EventTarget> = TargetedEvent<
type TargetedCompositionEvent (line 487) | type TargetedCompositionEvent<Target extends EventTarget> =
type TargetedDragEvent (line 489) | type TargetedDragEvent<Target extends EventTarget> = TargetedEvent<
type TargetedFocusEvent (line 493) | type TargetedFocusEvent<Target extends EventTarget> = TargetedEvent<
type TargetedInputEvent (line 497) | type TargetedInputEvent<Target extends EventTarget> = TargetedEvent<
type TargetedKeyboardEvent (line 501) | type TargetedKeyboardEvent<Target extends EventTarget> = TargetedEvent<
type TargetedMouseEvent (line 505) | type TargetedMouseEvent<Target extends EventTarget> = TargetedEvent<
type TargetedPointerEvent (line 509) | type TargetedPointerEvent<Target extends EventTarget> = TargetedEvent<
type TargetedSnapEvent (line 513) | type TargetedSnapEvent<Target extends EventTarget> = TargetedEvent<
type TargetedSubmitEvent (line 517) | type TargetedSubmitEvent<Target extends EventTarget> = TargetedEvent<
type TargetedTouchEvent (line 521) | type TargetedTouchEvent<Target extends EventTarget> = TargetedEvent<
type TargetedToggleEvent (line 525) | type TargetedToggleEvent<Target extends EventTarget> = TargetedEvent<
type TargetedTransitionEvent (line 529) | type TargetedTransitionEvent<Target extends EventTarget> = TargetedEvent<
type TargetedUIEvent (line 533) | type TargetedUIEvent<Target extends EventTarget> = TargetedEvent<
type TargetedWheelEvent (line 537) | type TargetedWheelEvent<Target extends EventTarget> = TargetedEvent<
type TargetedPictureInPictureEvent (line 541) | type TargetedPictureInPictureEvent<Target extends EventTarget> =
type EventHandler (line 544) | type EventHandler<E extends TargetedEvent> = {
type AnimationEventHandler (line 548) | type AnimationEventHandler<Target extends EventTarget> = EventHandler<
type ClipboardEventHandler (line 551) | type ClipboardEventHandler<Target extends EventTarget> = EventHandler<
type CommandEventHandler (line 554) | type CommandEventHandler<Target extends EventTarget> = EventHandler<
type CompositionEventHandler (line 557) | type CompositionEventHandler<Target extends EventTarget> = EventHandler<
type DragEventHandler (line 560) | type DragEventHandler<Target extends EventTarget> = EventHandler<
type ToggleEventHandler (line 563) | type ToggleEventHandler<Target extends EventTarget> = EventHandler<
type FocusEventHandler (line 566) | type FocusEventHandler<Target extends EventTarget> = EventHandler<
type GenericEventHandler (line 569) | type GenericEventHandler<Target extends EventTarget> = EventHandler<
type InputEventHandler (line 572) | type InputEventHandler<Target extends EventTarget> = EventHandler<
type KeyboardEventHandler (line 575) | type KeyboardEventHandler<Target extends EventTarget> = EventHandler<
type MouseEventHandler (line 578) | type MouseEventHandler<Target extends EventTarget> = EventHandler<
type PointerEventHandler (line 581) | type PointerEventHandler<Target extends EventTarget> = EventHandler<
type SnapEventHandler (line 584) | type SnapEventHandler<Target extends EventTarget> = EventHandler<
type SubmitEventHandler (line 587) | type SubmitEventHandler<Target extends EventTarget> = EventHandler<
type TouchEventHandler (line 590) | type TouchEventHandler<Target extends EventTarget> = EventHandler<
type TransitionEventHandler (line 593) | type TransitionEventHandler<Target extends EventTarget> = EventHandler<
type UIEventHandler (line 596) | type UIEventHandler<Target extends EventTarget> = EventHandler<
type WheelEventHandler (line 599) | type WheelEventHandler<Target extends EventTarget> = EventHandler<
type PictureInPictureEventHandler (line 602) | type PictureInPictureEventHandler<Target extends EventTarget> =
type DOMAttributes (line 605) | interface DOMAttributes<Target extends EventTarget>
type AriaAttributes (line 842) | interface AriaAttributes {
type WAIAriaRole (line 1086) | type WAIAriaRole =
type DPubAriaRole (line 1183) | type DPubAriaRole =
type AriaRole (line 1224) | type AriaRole = WAIAriaRole | DPubAriaRole;
type AllHTMLAttributes (line 1226) | interface AllHTMLAttributes<RefType extends EventTarget = EventTarget>
type HTMLAttributes (line 1480) | interface HTMLAttributes<RefType extends EventTarget = EventTarget>
type HTMLAttributeReferrerPolicy (line 1570) | type HTMLAttributeReferrerPolicy =
type HTMLAttributeAnchorTarget (line 1581) | type HTMLAttributeAnchorTarget =
type PartialAnchorHTMLAttributes (line 1588) | interface PartialAnchorHTMLAttributes<T extends EventTarget>
type AnchorAriaRoles (line 1602) | type AnchorAriaRoles =
type AccessibleAnchorHTMLAttributes (line 1629) | type AccessibleAnchorHTMLAttributes<
type AnchorHTMLAttributes (line 1633) | interface AnchorHTMLAttributes<T extends EventTarget = HTMLAnchorElement>
type PartialAreaHTMLAttributes (line 1639) | interface PartialAreaHTMLAttributes<T extends EventTarget>
type AreaAriaRoles (line 1654) | type AreaAriaRoles =
type AccessibleAreaHTMLAttributes (line 1664) | type AccessibleAreaHTMLAttributes<
type AreaHTMLAttributes (line 1668) | interface AreaHTMLAttributes<T extends EventTarget = HTMLAreaElement>
type ArticleHTMLAttributes (line 1674) | interface ArticleHTMLAttributes<T extends EventTarget = HTMLElement>
type AsideHTMLAttributes (line 1689) | interface AsideHTMLAttributes<T extends EventTarget = HTMLElement>
type AudioHTMLAttributes (line 1709) | interface AudioHTMLAttributes<T extends EventTarget = HTMLAudioElement>
type BaseHTMLAttributes (line 1714) | interface BaseHTMLAttributes<T extends EventTarget = HTMLBaseElement>
type BlockquoteHTMLAttributes (line 1721) | interface BlockquoteHTMLAttributes<
type BrHTMLAttributes (line 1727) | interface BrHTMLAttributes<T extends EventTarget = HTMLBRElement>
type ButtonHTMLAttributes (line 1732) | interface ButtonHTMLAttributes<T extends EventTarget = HTMLButtonElement>
type CanvasHTMLAttributes (line 1776) | interface CanvasHTMLAttributes<T extends EventTarget = HTMLCanvasElement>
type CaptionHTMLAttributes (line 1782) | interface CaptionHTMLAttributes<T extends EventTarget = HTMLElement>
type ColHTMLAttributes (line 1787) | interface ColHTMLAttributes<T extends EventTarget = HTMLTableColElement>
type ColgroupHTMLAttributes (line 1794) | interface ColgroupHTMLAttributes<
type DataHTMLAttributes (line 1801) | interface DataHTMLAttributes<T extends EventTarget = HTMLDataElement>
type DataListHTMLAttributes (line 1806) | interface DataListHTMLAttributes<
type DdHTMLAttributes (line 1812) | interface DdHTMLAttributes<T extends EventTarget = HTMLElement>
type DelHTMLAttributes (line 1817) | interface DelHTMLAttributes<T extends EventTarget = HTMLModElement>
type DetailsHTMLAttributes (line 1824) | interface DetailsHTMLAttributes<
type DialogHTMLAttributes (line 1832) | interface DialogHTMLAttributes<T extends EventTarget = HTMLDialogElement>
type DlHTMLAttributes (line 1842) | interface DlHTMLAttributes<T extends EventTarget = HTMLDListElement>
type DtHTMLAttributes (line 1847) | interface DtHTMLAttributes<T extends EventTarget = HTMLElement>
type EmbedHTMLAttributes (line 1852) | interface EmbedHTMLAttributes<T extends EventTarget = HTMLEmbedElement>
type FieldsetHTMLAttributes (line 1863) | interface FieldsetHTMLAttributes<
type FigcaptionHTMLAttributes (line 1874) | interface FigcaptionHTMLAttributes<T extends EventTarget = HTMLElement>
type FooterHTMLAttributes (line 1879) | interface FooterHTMLAttributes<T extends EventTarget = HTMLElement>
type FormHTMLAttributes (line 1891) | interface FormHTMLAttributes<T extends EventTarget = HTMLFormElement>
type HeadingHTMLAttributes (line 1909) | interface HeadingHTMLAttributes<
type HeadHTMLAttributes (line 1917) | interface HeadHTMLAttributes<T extends EventTarget = HTMLHeadElement>
type HeaderHTMLAttributes (line 1922) | interface HeaderHTMLAttributes<T extends EventTarget = HTMLElement>
type HrHTMLAttributes (line 1927) | interface HrHTMLAttributes<T extends EventTarget = HTMLHRElement>
type HtmlHTMLAttributes (line 1934) | interface HtmlHTMLAttributes<T extends EventTarget = HTMLHtmlElement>
type IframeHTMLAttributes (line 1939) | interface IframeHTMLAttributes<T extends EventTarget = HTMLIFrameElement>
type HTMLAttributeCrossOrigin (line 1970) | type HTMLAttributeCrossOrigin = 'anonymous' | 'use-credentials';
type PartialImgHTMLAttributes (line 1972) | interface PartialImgHTMLAttributes<T extends EventTarget>
type ImgAriaRolesAccessibleName (line 1992) | type ImgAriaRolesAccessibleName = Signalish<
type ImgAriaRoles (line 2014) | type ImgAriaRoles =
type AccessibleImgHTMLAttributes (line 2039) | type AccessibleImgHTMLAttributes<
type ImgHTMLAttributes (line 2047) | interface ImgHTMLAttributes<T extends EventTarget = HTMLImageElement>
type HTMLInputTypeAttribute (line 2059) | type HTMLInputTypeAttribute =
type PartialInputHTMLAttributes (line 2083) | interface PartialInputHTMLAttributes<T extends EventTarget>
type InputAriaRoles (line 2138) | type InputAriaRoles =
type AccessibleInputHTMLAttributes (line 2291) | type AccessibleInputHTMLAttributes<
type InputHTMLAttributes (line 2295) | interface InputHTMLAttributes<T extends EventTarget = HTMLInputElement>
type InsHTMLAttributes (line 2321) | interface InsHTMLAttributes<T extends EventTarget = HTMLModElement>
type KeygenHTMLAttributes (line 2328) | interface KeygenHTMLAttributes<
type LabelHTMLAttributes (line 2339) | interface LabelHTMLAttributes<T extends EventTarget = HTMLLabelElement>
type LegendHTMLAttributes (line 2347) | interface LegendHTMLAttributes<T extends EventTarget = HTMLLegendElement>
type LiHTMLAttributes (line 2352) | interface LiHTMLAttributes<T extends EventTarget = HTMLLIElement>
type LinkHTMLAttributes (line 2357) | interface LinkHTMLAttributes<T extends EventTarget = HTMLLinkElement>
type MainHTMLAttributes (line 2380) | interface MainHTMLAttributes<T extends EventTarget = HTMLElement>
type MapHTMLAttributes (line 2385) | interface MapHTMLAttributes<T extends EventTarget = HTMLMapElement>
type MarqueeHTMLAttributes (line 2391) | interface MarqueeHTMLAttributes<
type MediaHTMLAttributes (line 2407) | interface MediaHTMLAttributes<T extends EventTarget = HTMLMediaElement>
type MenuHTMLAttributes (line 2432) | interface MenuHTMLAttributes<T extends EventTarget = HTMLMenuElement>
type MetaHTMLAttributes (line 2449) | interface MetaHTMLAttributes<T extends EventTarget = HTMLMetaElement>
type MeterHTMLAttributes (line 2461) | interface MeterHTMLAttributes<T extends EventTarget = HTMLMeterElement>
type NavHTMLAttributes (line 2473) | interface NavHTMLAttributes<T extends EventTarget = HTMLElement>
type NoScriptHTMLAttributes (line 2486) | interface NoScriptHTMLAttributes<T extends EventTarget = HTMLElement>
type ObjectHTMLAttributes (line 2491) | interface ObjectHTMLAttributes<T extends EventTarget = HTMLObjectElement>
type OlHTMLAttributes (line 2506) | interface OlHTMLAttributes<T extends EventTarget = HTMLOListElement>
type OptgroupHTMLAttributes (line 2527) | interface OptgroupHTMLAttributes<
type OptionHTMLAttributes (line 2535) | interface OptionHTMLAttributes<T extends EventTarget = HTMLOptionElement>
type OutputHTMLAttributes (line 2544) | interface OutputHTMLAttributes<T extends EventTarget = HTMLOutputElement>
type ParamHTMLAttributes (line 2552) | interface ParamHTMLAttributes<T extends EventTarget = HTMLParamElement>
type PictureHTMLAttributes (line 2559) | interface PictureHTMLAttributes<
type ProgressHTMLAttributes (line 2565) | interface ProgressHTMLAttributes<
type QuoteHTMLAttributes (line 2573) | interface QuoteHTMLAttributes<T extends EventTarget = HTMLQuoteElement>
type ScriptHTMLAttributes (line 2578) | interface ScriptHTMLAttributes<T extends EventTarget = HTMLScriptElement>
type SearchHTMLAttributes (line 2598) | interface SearchHTMLAttributes<T extends EventTarget = HTMLElement>
type PartialSelectHTMLAttributes (line 2605) | interface PartialSelectHTMLAttributes<T extends EventTarget>
type SelectAriaRoles (line 2619) | type SelectAriaRoles =
type AccessibleSelectHTMLAttributes (line 2633) | type AccessibleSelectHTMLAttributes<
type SelectHTMLAttributes (line 2637) | interface SelectHTMLAttributes<T extends EventTarget = HTMLSelectElement>
type SlotHTMLAttributes (line 2645) | interface SlotHTMLAttributes<T extends EventTarget = HTMLSlotElement>
type SourceHTMLAttributes (line 2651) | interface SourceHTMLAttributes<T extends EventTarget = HTMLSourceElement>
type StyleHTMLAttributes (line 2664) | interface StyleHTMLAttributes<T extends EventTarget = HTMLStyleElement>
type TableHTMLAttributes (line 2672) | interface TableHTMLAttributes<T extends EventTarget = HTMLTableElement>
type TdHTMLAttributes (line 2680) | interface TdHTMLAttributes<T extends EventTarget = HTMLTableCellElement>
type TemplateHTMLAttributes (line 2697) | interface TemplateHTMLAttributes<
type TextareaHTMLAttributes (line 2703) | interface TextareaHTMLAttributes<
type ThHTMLAttributes (line 2728) | interface ThHTMLAttributes<T extends EventTarget = HTMLTableCellElement>
type TimeHTMLAttributes (line 2742) | interface TimeHTMLAttributes<T extends EventTarget = HTMLTimeElement>
type TitleHTMLAttributes (line 2748) | interface TitleHTMLAttributes<T extends EventTarget = HTMLTitleElement>
type TrackHTMLAttributes (line 2753) | interface TrackHTMLAttributes<T extends EventTarget = HTMLTrackElement>
type UlHTMLAttributes (line 2763) | interface UlHTMLAttributes<T extends EventTarget = HTMLUListElement>
type VideoHTMLAttributes (line 2781) | interface VideoHTMLAttributes<T extends EventTarget = HTMLVideoElement>
type WbrHTMLAttributes (line 2792) | interface WbrHTMLAttributes<T extends EventTarget = HTMLElement>
type DetailedHTMLProps (line 2797) | type DetailedHTMLProps<
type MathMLAttributes (line 2802) | interface MathMLAttributes<Target extends EventTarget = MathMLElement>
type AnnotationMathMLAttributes (line 2818) | interface AnnotationMathMLAttributes<T extends EventTarget>
type AnnotationXmlMathMLAttributes (line 2825) | interface AnnotationXmlMathMLAttributes<T extends EventTarget>
type MActionMathMLAttributes (line 2832) | interface MActionMathMLAttributes<T extends EventTarget>
type MathMathMLAttributes (line 2840) | interface MathMathMLAttributes<T extends EventTarget>
type MEncloseMathMLAttributes (line 2845) | interface MEncloseMathMLAttributes<T extends EventTarget>
type MErrorMathMLAttributes (line 2850) | interface MErrorMathMLAttributes<T extends EventTarget>
type MFencedMathMLAttributes (line 2853) | interface MFencedMathMLAttributes<T extends EventTarget>
type MFracMathMLAttributes (line 2860) | interface MFracMathMLAttributes<T extends EventTarget>
type MiMathMLAttributes (line 2869) | interface MiMathMLAttributes<T extends EventTarget>
type MmultiScriptsMathMLAttributes (line 2896) | interface MmultiScriptsMathMLAttributes<T extends EventTarget>
type MNMathMLAttributes (line 2904) | interface MNMathMLAttributes<T extends EventTarget>
type MOMathMLAttributes (line 2907) | interface MOMathMLAttributes<T extends EventTarget>
type MOverMathMLAttributes (line 2923) | interface MOverMathMLAttributes<T extends EventTarget>
type MPaddedMathMLAttributes (line 2928) | interface MPaddedMathMLAttributes<T extends EventTarget>
type MPhantomMathMLAttributes (line 2937) | interface MPhantomMathMLAttributes<T extends EventTarget>
type MPrescriptsMathMLAttributes (line 2940) | interface MPrescriptsMathMLAttributes<T extends EventTarget>
type MRootMathMLAttributes (line 2943) | interface MRootMathMLAttributes<T extends EventTarget>
type MRowMathMLAttributes (line 2946) | interface MRowMathMLAttributes<T extends EventTarget>
type MSMathMLAttributes (line 2949) | interface MSMathMLAttributes<T extends EventTarget>
type MSpaceMathMLAttributes (line 2957) | interface MSpaceMathMLAttributes<T extends EventTarget>
type MSqrtMathMLAttributes (line 2964) | interface MSqrtMathMLAttributes<T extends EventTarget>
type MStyleMathMLAttributes (line 2967) | interface MStyleMathMLAttributes<T extends EventTarget>
type MSubMathMLAttributes (line 2985) | interface MSubMathMLAttributes<T extends EventTarget>
type MSubsupMathMLAttributes (line 2991) | interface MSubsupMathMLAttributes<T extends EventTarget>
type MSupMathMLAttributes (line 2999) | interface MSupMathMLAttributes<T extends EventTarget>
type MTableMathMLAttributes (line 3005) | interface MTableMathMLAttributes<T extends EventTarget>
type MTdMathMLAttributes (line 3033) | interface MTdMathMLAttributes<T extends EventTarget>
type MTextMathMLAttributes (line 3045) | interface MTextMathMLAttributes<T extends EventTarget>
type MTrMathMLAttributes (line 3048) | interface MTrMathMLAttributes<T extends EventTarget>
type MUnderMathMLAttributes (line 3058) | interface MUnderMathMLAttributes<T extends EventTarget>
type MUnderoverMathMLAttributes (line 3063) | interface MUnderoverMathMLAttributes<T extends EventTarget>
type SemanticsMathMLAttributes (line 3069) | interface SemanticsMathMLAttributes<T extends EventTarget>
FILE: src/index.d.ts
type VNode (line 13) | interface VNode<P = {}> {
type Key (line 40) | type Key = string | number | any;
type RefObject (line 42) | type RefObject<T> = { current: T };
type RefCallback (line 43) | type RefCallback<T> = (instance: T | null) => void | (() => void);
type Ref (line 44) | type Ref<T> = RefCallback<T> | RefObject<T | null> | null;
type ComponentChild (line 46) | type ComponentChild =
type ComponentChildren (line 55) | type ComponentChildren = ComponentChild[] | ComponentChild;
type Attributes (line 57) | interface Attributes {
type ClassAttributes (line 62) | interface ClassAttributes<T> extends Attributes {
type PreactDOMAttributes (line 66) | interface PreactDOMAttributes {
type ErrorInfo (line 73) | interface ErrorInfo {
type RenderableProps (line 77) | type RenderableProps<P, RefType = any> = P &
type ComponentType (line 80) | type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
type ComponentFactory (line 81) | type ComponentFactory<P = {}> = ComponentType<P>;
type ComponentProps (line 83) | type ComponentProps<
type FunctionComponent (line 91) | interface FunctionComponent<P = {}> {
type FunctionalComponent (line 95) | interface FunctionalComponent<P = {}> extends FunctionComponent<P> {}
type ComponentClass (line 97) | interface ComponentClass<P = {}, S = {}> {
type ComponentConstructor (line 107) | interface ComponentConstructor<P = {}, S = {}>
type AnyComponent (line 111) | type AnyComponent<P = {}, S = {}> =
type Component (line 116) | interface Component<P = {}, S = {}> {
type ContainerNode (line 289) | interface ContainerNode {
type Options (line 327) | interface Options {
type Consumer (line 363) | interface Consumer<T>
type PreactConsumer (line 367) | interface PreactConsumer<T> extends Consumer<T> {}
type Provider (line 369) | interface Provider<T>
type PreactProvider (line 374) | interface PreactProvider<T> extends Provider<T> {}
type ContextType (line 375) | type ContextType<C extends Context<any>> = C extends Context<infer T>
type Context (line 379) | interface Context<T> extends preact.Provider<T> {
type PreactContext (line 385) | interface PreactContext<T> extends Context<T> {}
FILE: src/internal.d.ts
type HookType (line 3) | enum HookType {
type DevSource (line 18) | interface DevSource {
type ErrorInfo (line 23) | interface ErrorInfo {
type Options (line 27) | interface Options extends preact.Options {
type ComponentChild (line 54) | type ComponentChild =
type ComponentChildren (line 61) | type ComponentChildren = ComponentChild[] | ComponentChild;
type FunctionComponent (line 63) | interface FunctionComponent<P = {}> extends preact.FunctionComponent<P> {
type ComponentClass (line 78) | interface ComponentClass<P = {}> extends preact.ComponentClass<P> {
type ComponentType (line 86) | type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
type PreactElement (line 88) | interface PreactElement extends preact.ContainerNode {
type PreactEvent (line 129) | interface PreactEvent extends Event {
type RefObject (line 135) | type RefObject<T> = { current: T | null };
type RefCallback (line 136) | type RefCallback<T> = {
type Ref (line 140) | type Ref<T> = RefObject<T> | RefCallback<T>;
type VNode (line 142) | interface VNode<P = {}> extends preact.VNode<P> {
type Component (line 160) | interface Component<P = {}, S = {}>
type PreactContext (line 182) | interface PreactContext extends preact.Context<any> {
FILE: src/jsx.d.ts
type Defaultize (line 6) | type Defaultize<Props, Defaults> =
type LibraryManagedAttributes (line 14) | type LibraryManagedAttributes<Component, Props> = Component extends {
type IntrinsicAttributes (line 20) | interface IntrinsicAttributes {
type ElementType (line 24) | type ElementType<P = any> =
type Element (line 31) | interface Element extends preact.VNode<any> {}
type ElementClass (line 32) | type ElementClass =
type ElementAttributesProperty (line 36) | interface ElementAttributesProperty {
type ElementChildrenAttribute (line 40) | interface ElementChildrenAttribute {
type IntrinsicSVGElements (line 44) | interface IntrinsicSVGElements {
type IntrinsicMathMLElements (line 106) | interface IntrinsicMathMLElements {
type IntrinsicHTMLElements (line 144) | interface IntrinsicHTMLElements {
type IntrinsicElements (line 264) | interface IntrinsicElements
FILE: src/render.js
function render (line 12) | function render(vnode, parentDom) {
function hydrate (line 66) | function hydrate(vnode, parentDom) {
FILE: src/util.js
function removeNode (line 11) | function removeNode(node) {
FILE: test-utils/src/index.js
function setupRerender (line 7) | function setupRerender() {
function act (line 27) | function act(cb) {
function teardown (line 117) | function teardown() {
FILE: test-utils/test/shared/act.test.jsx
function createEvent (line 8) | function createEvent(name) {
function StateContainer (line 37) | function StateContainer() {
function StateContainer (line 47) | function StateContainer() {
function StateContainer (line 74) | function StateContainer() {
function StateContainer (line 110) | function StateContainer() {
function CounterButton (line 157) | function CounterButton() {
function Counter (line 182) | function Counter() {
function TestComponent (line 219) | function TestComponent() {
function Widget (line 290) | function Widget() {
function Button (line 318) | function Button() {
function BrokenWidget (line 345) | function BrokenWidget() {
function WorkingWidget (line 351) | function WorkingWidget() {
function BrokenEffect (line 466) | function BrokenEffect() {
FILE: test-utils/test/shared/rerender.test.jsx
class Counter (line 25) | class Counter extends Component {
method constructor (line 26) | constructor(props) {
method render (line 33) | render() {
FILE: test/_util/helpers.jsx
function assign (line 15) | function assign(obj, props) {
function supportsPassiveEvents (line 20) | function supportsPassiveEvents() {
function supportsDataList (line 38) | function supportsDataList() {
constant VOID_ELEMENTS (line 47) | const VOID_ELEMENTS =
function encodeEntities (line 50) | function encodeEntities(str) {
function normalizePath (line 60) | function normalizePath(str) {
function serializeHtml (line 76) | function serializeHtml(node) {
function serializeDomTree (line 92) | function serializeDomTree(node) {
function createEvent (line 148) | function createEvent(name) {
function sortCss (line 164) | function sortCss(cssText) {
function setupScratch (line 191) | function setupScratch(id) {
function clearOptions (line 199) | function clearOptions() {
function teardown (line 211) | function teardown(scratch) {
function clear (line 242) | function clear(obj) {
function sortAttributes (line 250) | function sortAttributes(html) {
function spyOnElementAttributes (line 265) | function spyOnElementAttributes() {
function restoreElementAttributes (line 288) | function restoreElementAttributes() {
FILE: test/_util/logCall.js
function serialize (line 6) | function serialize(obj) {
function logCall (line 23) | function logCall(obj, method) {
function getLog (line 59) | function getLog() {
function clearLog (line 64) | function clearLog() {
function getLogSummary (line 68) | function getLogSummary() {
FILE: test/browser/cloneElement.test.jsx
function Comp (line 5) | function Comp() {}
function Foo (line 16) | function Foo() {}
function Foo (line 29) | function Foo() {}
function Foo (line 40) | function Foo() {}
function Foo (line 51) | function Foo() {}
function a (line 62) | function a() {}
function b (line 63) | function b() {}
FILE: test/browser/components.test.jsx
function getAttributes (line 15) | function getAttributes(node) {
class C1 (line 54) | class C1 extends Component {
method render (line 55) | render() {
class C2 (line 88) | class C2 extends Component {
method constructor (line 89) | constructor(props) {
method render (line 93) | render(props) {
class Foo (line 116) | class Foo extends Component {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
class Foo (line 131) | class Foo extends Component {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
class Foo (line 145) | class Foo extends Component {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
class Foo (line 160) | class Foo extends Component {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
class Foo (line 201) | class Foo extends Component {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
function Foo (line 232) | function Foo() {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
class A (line 258) | class A extends Component {
method constructor (line 259) | constructor(props) {
method set (line 265) | set() {
method render (line 269) | render() {
method constructor (line 314) | constructor(props) {
method set (line 320) | set() {
method render (line 324) | render() {
class C (line 295) | class C extends Component {
method constructor (line 296) | constructor(props) {
method set (line 302) | set() {
method render (line 306) | render() {
method componentWillMount (line 1476) | componentWillMount() {}
method render (line 1477) | render({ children }) {
class A (line 313) | class A extends Component {
method constructor (line 259) | constructor(props) {
method set (line 265) | set() {
method render (line 269) | render() {
method constructor (line 314) | constructor(props) {
method set (line 320) | set() {
method render (line 324) | render() {
class Counter (line 343) | class Counter extends Component {
method constructor (line 344) | constructor(props) {
method render (line 352) | render({ counter }) {
class App (line 361) | class App extends Component {
method constructor (line 362) | constructor(props) {
method render (line 370) | render() {
method constructor (line 658) | constructor(props) {
method add (line 668) | add() {
method addTwice (line 672) | addTwice() {
method reset (line 676) | reset() {
method render (line 680) | render() {
method render (line 1790) | render() {
method constructor (line 1852) | constructor(props) {
method render (line 1858) | render() {
method constructor (line 1885) | constructor(props) {
method render (line 1891) | render() {
method componentWillReceiveProps (line 2019) | componentWillReceiveProps() {
method render (line 2022) | render() {
method shouldComponentUpdate (line 2037) | shouldComponentUpdate() {
method render (line 2041) | render() {
method render (line 2076) | render() {
method constructor (line 2103) | constructor(props) {
method render (line 2108) | render(props, state) {
function Wrapper (line 387) | function Wrapper() {
function Foo (line 411) | function Foo() {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
function Foo (line 435) | function Foo() {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
class Foo (line 455) | class Foo {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
function Provider (line 482) | function Provider() {
class Foo (line 505) | class Foo {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
class Foo (line 530) | class Foo extends Component {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
class StringComponent (line 553) | class StringComponent extends Component {
method render (line 554) | render() {
class NumberComponent (line 564) | class NumberComponent extends Component {
method render (line 565) | render() {
class ConstructedStringComponent (line 575) | class ConstructedStringComponent extends Component {
method render (line 576) | render() {
class NullComponent (line 587) | class NullComponent extends Component {
method render (line 588) | render() {
class Comp (line 599) | class Comp extends Component {
method render (line 600) | render() {
method constructor (line 623) | constructor() {
method render (line 627) | render(_, { alt }) {
method componentWillMount (line 736) | componentWillMount() {
method render (line 740) | render() {
function test (line 606) | function test(content) {
class Comp (line 622) | class Comp extends Component {
method render (line 600) | render() {
method constructor (line 623) | constructor() {
method render (line 627) | render(_, { alt }) {
method componentWillMount (line 736) | componentWillMount() {
method render (line 740) | render() {
class App (line 657) | class App extends Component {
method constructor (line 362) | constructor(props) {
method render (line 370) | render() {
method constructor (line 658) | constructor(props) {
method add (line 668) | add() {
method addTwice (line 672) | addTwice() {
method reset (line 676) | reset() {
method render (line 680) | render() {
method render (line 1790) | render() {
method constructor (line 1852) | constructor(props) {
method render (line 1858) | render() {
method constructor (line 1885) | constructor(props) {
method render (line 1891) | render() {
method componentWillReceiveProps (line 2019) | componentWillReceiveProps() {
method render (line 2022) | render() {
method shouldComponentUpdate (line 2037) | shouldComponentUpdate() {
method render (line 2041) | render() {
method render (line 2076) | render() {
method constructor (line 2103) | constructor(props) {
method render (line 2108) | render(props, state) {
class Comp (line 735) | class Comp extends Component {
method render (line 600) | render() {
method constructor (line 623) | constructor() {
method render (line 627) | render(_, { alt }) {
method componentWillMount (line 736) | componentWillMount() {
method render (line 740) | render() {
class GoodContainer (line 747) | class GoodContainer extends Component {
method constructor (line 748) | constructor(props) {
method render (line 754) | render(_, { alt }) {
class BadContainer (line 765) | class BadContainer extends Component {
method constructor (line 766) | constructor(props) {
method render (line 772) | render(_, { alt }) {
function withBobRoss (line 1048) | function withBobRoss(ChildComponent) {
class BobRossProvider (line 1071) | class BobRossProvider extends Component {
method getChildContext (line 1072) | getChildContext() {
method render (line 1076) | render(props) {
function BobRossConsumer (line 1081) | function BobRossConsumer(props, context) {
class Outer (line 1136) | class Outer extends Component {
method componentDidMount (line 1137) | componentDidMount() {
method componentWillUnmount (line 1141) | componentWillUnmount() {}
method render (line 1142) | render(props, { i }) {
method componentDidMount (line 1194) | componentDidMount() {
method componentWillUnmount (line 1198) | componentWillUnmount() {}
method render (line 1199) | render(props, { i }) {
method constructor (line 1346) | constructor(props, context) {
method componentWillUnmount (line 1353) | componentWillUnmount() {}
method componentWillMount (line 1354) | componentWillMount() {}
method componentDidMount (line 1355) | componentDidMount() {}
method render (line 1356) | render(_, { child: C }) {
method render (line 1434) | render({ child: Child }) {
class Outer (line 1193) | class Outer extends Component {
method componentDidMount (line 1137) | componentDidMount() {
method componentWillUnmount (line 1141) | componentWillUnmount() {}
method render (line 1142) | render(props, { i }) {
method componentDidMount (line 1194) | componentDidMount() {
method componentWillUnmount (line 1198) | componentWillUnmount() {}
method render (line 1199) | render(props, { i }) {
method constructor (line 1346) | constructor(props, context) {
method componentWillUnmount (line 1353) | componentWillUnmount() {}
method componentWillMount (line 1354) | componentWillMount() {}
method componentDidMount (line 1355) | componentDidMount() {}
method render (line 1356) | render(_, { child: C }) {
method render (line 1434) | render({ child: Child }) {
class Inner (line 1209) | class Inner extends Component {
method constructor (line 1210) | constructor() {
method componentWillMount (line 1213) | componentWillMount() {}
method componentDidMount (line 1214) | componentDidMount() {}
method componentWillUnmount (line 1215) | componentWillUnmount() {}
method render (line 1216) | render(props) {
method componentWillMount (line 1314) | componentWillMount() {}
method componentDidMount (line 1315) | componentDidMount() {}
method componentWillUnmount (line 1316) | componentWillUnmount() {}
method render (line 1317) | render() {
method componentWillUnmount (line 1366) | componentWillUnmount() {}
method componentWillMount (line 1367) | componentWillMount() {}
method componentDidMount (line 1368) | componentDidMount() {}
method render (line 1369) | render() {
method componentWillMount (line 1440) | componentWillMount() {}
method componentWillUnmount (line 1441) | componentWillUnmount() {}
method render (line 1442) | render() {
class Root (line 1304) | class Root extends Component {
method getChildContext (line 1305) | getChildContext() {
method render (line 1308) | render() {
class Inner (line 1313) | class Inner extends Component {
method constructor (line 1210) | constructor() {
method componentWillMount (line 1213) | componentWillMount() {}
method componentDidMount (line 1214) | componentDidMount() {}
method componentWillUnmount (line 1215) | componentWillUnmount() {}
method render (line 1216) | render(props) {
method componentWillMount (line 1314) | componentWillMount() {}
method componentDidMount (line 1315) | componentDidMount() {}
method componentWillUnmount (line 1316) | componentWillUnmount() {}
method render (line 1317) | render() {
method componentWillUnmount (line 1366) | componentWillUnmount() {}
method componentWillMount (line 1367) | componentWillMount() {}
method componentDidMount (line 1368) | componentDidMount() {}
method render (line 1369) | render() {
method componentWillMount (line 1440) | componentWillMount() {}
method componentWillUnmount (line 1441) | componentWillUnmount() {}
method render (line 1442) | render() {
class Outer (line 1345) | class Outer extends Component {
method componentDidMount (line 1137) | componentDidMount() {
method componentWillUnmount (line 1141) | componentWillUnmount() {}
method render (line 1142) | render(props, { i }) {
method componentDidMount (line 1194) | componentDidMount() {
method componentWillUnmount (line 1198) | componentWillUnmount() {}
method render (line 1199) | render(props, { i }) {
method constructor (line 1346) | constructor(props, context) {
method componentWillUnmount (line 1353) | componentWillUnmount() {}
method componentWillMount (line 1354) | componentWillMount() {}
method componentDidMount (line 1355) | componentDidMount() {}
method render (line 1356) | render(_, { child: C }) {
method render (line 1434) | render({ child: Child }) {
class Inner (line 1365) | class Inner extends Component {
method constructor (line 1210) | constructor() {
method componentWillMount (line 1213) | componentWillMount() {}
method componentDidMount (line 1214) | componentDidMount() {}
method componentWillUnmount (line 1215) | componentWillUnmount() {}
method render (line 1216) | render(props) {
method componentWillMount (line 1314) | componentWillMount() {}
method componentDidMount (line 1315) | componentDidMount() {}
method componentWillUnmount (line 1316) | componentWillUnmount() {}
method render (line 1317) | render() {
method componentWillUnmount (line 1366) | componentWillUnmount() {}
method componentWillMount (line 1367) | componentWillMount() {}
method componentDidMount (line 1368) | componentDidMount() {}
method render (line 1369) | render() {
method componentWillMount (line 1440) | componentWillMount() {}
method componentWillUnmount (line 1441) | componentWillUnmount() {}
method render (line 1442) | render() {
class Inner2 (line 1378) | class Inner2 extends Component {
method constructor (line 1379) | constructor(props, context) {
method componentWillUnmount (line 1383) | componentWillUnmount() {}
method componentWillMount (line 1384) | componentWillMount() {}
method componentDidMount (line 1385) | componentDidMount() {}
method render (line 1386) | render() {
class Outer (line 1433) | class Outer extends Component {
method componentDidMount (line 1137) | componentDidMount() {
method componentWillUnmount (line 1141) | componentWillUnmount() {}
method render (line 1142) | render(props, { i }) {
method componentDidMount (line 1194) | componentDidMount() {
method componentWillUnmount (line 1198) | componentWillUnmount() {}
method render (line 1199) | render(props, { i }) {
method constructor (line 1346) | constructor(props, context) {
method componentWillUnmount (line 1353) | componentWillUnmount() {}
method componentWillMount (line 1354) | componentWillMount() {}
method componentDidMount (line 1355) | componentDidMount() {}
method render (line 1356) | render(_, { child: C }) {
method render (line 1434) | render({ child: Child }) {
class Inner (line 1439) | class Inner extends Component {
method constructor (line 1210) | constructor() {
method componentWillMount (line 1213) | componentWillMount() {}
method componentDidMount (line 1214) | componentDidMount() {}
method componentWillUnmount (line 1215) | componentWillUnmount() {}
method render (line 1216) | render(props) {
method componentWillMount (line 1314) | componentWillMount() {}
method componentDidMount (line 1315) | componentDidMount() {}
method componentWillUnmount (line 1316) | componentWillUnmount() {}
method render (line 1317) | render() {
method componentWillUnmount (line 1366) | componentWillUnmount() {}
method componentWillMount (line 1367) | componentWillMount() {}
method componentDidMount (line 1368) | componentDidMount() {}
method render (line 1369) | render() {
method componentWillMount (line 1440) | componentWillMount() {}
method componentWillUnmount (line 1441) | componentWillUnmount() {}
method render (line 1442) | render() {
class C (line 1475) | class C extends Component {
method constructor (line 296) | constructor(props) {
method set (line 302) | set() {
method render (line 306) | render() {
method componentWillMount (line 1476) | componentWillMount() {}
method render (line 1477) | render({ children }) {
class Child (line 1647) | class Child extends Component {
method constructor (line 1648) | constructor(props) {
method render (line 1656) | render() {
method shouldComponentUpdate (line 1778) | shouldComponentUpdate() {
method render (line 1781) | render() {
method componentDidMount (line 2060) | componentDidMount() {
method shouldComponentUpdate (line 2065) | shouldComponentUpdate() {
method render (line 2069) | render() {
class Parent (line 1665) | class Parent extends Component {
method render (line 1666) | render() {
method render (line 1768) | render() {
class Parent (line 1767) | class Parent extends Component {
method render (line 1666) | render() {
method render (line 1768) | render() {
class Child (line 1777) | class Child extends Component {
method constructor (line 1648) | constructor(props) {
method render (line 1656) | render() {
method shouldComponentUpdate (line 1778) | shouldComponentUpdate() {
method render (line 1781) | render() {
method componentDidMount (line 2060) | componentDidMount() {
method shouldComponentUpdate (line 2065) | shouldComponentUpdate() {
method render (line 2069) | render() {
class App (line 1789) | class App extends Component {
method constructor (line 362) | constructor(props) {
method render (line 370) | render() {
method constructor (line 658) | constructor(props) {
method add (line 668) | add() {
method addTwice (line 672) | addTwice() {
method reset (line 676) | reset() {
method render (line 680) | render() {
method render (line 1790) | render() {
method constructor (line 1852) | constructor(props) {
method render (line 1858) | render() {
method constructor (line 1885) | constructor(props) {
method render (line 1891) | render() {
method componentWillReceiveProps (line 2019) | componentWillReceiveProps() {
method render (line 2022) | render() {
method shouldComponentUpdate (line 2037) | shouldComponentUpdate() {
method render (line 2041) | render() {
method render (line 2076) | render() {
method constructor (line 2103) | constructor(props) {
method render (line 2108) | render(props, state) {
class X (line 1829) | class X extends Component {
method constructor (line 1830) | constructor(props) {
method componentDidMount (line 1835) | componentDidMount() {
method componentWillUnmount (line 1839) | componentWillUnmount() {
method render (line 1843) | render() {
class App (line 1851) | class App extends Component {
method constructor (line 362) | constructor(props) {
method render (line 370) | render() {
method constructor (line 658) | constructor(props) {
method add (line 668) | add() {
method addTwice (line 672) | addTwice() {
method reset (line 676) | reset() {
method render (line 680) | render() {
method render (line 1790) | render() {
method constructor (line 1852) | constructor(props) {
method render (line 1858) | render() {
method constructor (line 1885) | constructor(props) {
method render (line 1891) | render() {
method componentWillReceiveProps (line 2019) | componentWillReceiveProps() {
method render (line 2022) | render() {
method shouldComponentUpdate (line 2037) | shouldComponentUpdate() {
method render (line 2041) | render() {
method render (line 2076) | render() {
method constructor (line 2103) | constructor(props) {
method render (line 2108) | render(props, state) {
class App (line 1884) | class App extends Component {
method constructor (line 362) | constructor(props) {
method render (line 370) | render() {
method constructor (line 658) | constructor(props) {
method add (line 668) | add() {
method addTwice (line 672) | addTwice() {
method reset (line 676) | reset() {
method render (line 680) | render() {
method render (line 1790) | render() {
method constructor (line 1852) | constructor(props) {
method render (line 1858) | render() {
method constructor (line 1885) | constructor(props) {
method render (line 1891) | render() {
method componentWillReceiveProps (line 2019) | componentWillReceiveProps() {
method render (line 2022) | render() {
method shouldComponentUpdate (line 2037) | shouldComponentUpdate() {
method render (line 2041) | render() {
method render (line 2076) | render() {
method constructor (line 2103) | constructor(props) {
method render (line 2108) | render(props, state) {
class Foo (line 1906) | class Foo extends Component {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
class Foo (line 1936) | class Foo extends Component {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
class Foo (line 1963) | class Foo extends Component {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
class Foo (line 1995) | class Foo extends Component {
method constructor (line 117) | constructor(props) {
method constructor (line 132) | constructor(props) {
method constructor (line 146) | constructor(props) {
method constructor (line 161) | constructor(props) {
method componentDidMount (line 166) | componentDidMount() {
method render (line 182) | render() {
method constructor (line 202) | constructor(props, context) {
method render (line 210) | render(props) {
method constructor (line 456) | constructor() {
method render (line 460) | render(props, state) {
method constructor (line 506) | constructor() {
method render (line 509) | render(props, state) {
method constructor (line 531) | constructor(props, context) {
method constructor (line 1907) | constructor(props) {
method render (line 1912) | render(props, state) {
method constructor (line 1937) | constructor(props) {
method render (line 1941) | render() {
method constructor (line 1964) | constructor(props) {
method render (line 1977) | render() {
method constructor (line 1996) | constructor(props) {
method render (line 2000) | render(props, state) {
class App (line 2018) | class App extends Component {
method constructor (line 362) | constructor(props) {
method render (line 370) | render() {
method constructor (line 658) | constructor(props) {
method add (line 668) | add() {
method addTwice (line 672) | addTwice() {
method reset (line 676) | reset() {
method render (line 680) | render() {
method render (line 1790) | render() {
method constructor (line 1852) | constructor(props) {
method render (line 1858) | render() {
method constructor (line 1885) | constructor(props) {
method render (line 1891) | render() {
method componentWillReceiveProps (line 2019) | componentWillReceiveProps() {
method render (line 2022) | render() {
method shouldComponentUpdate (line 2037) | shouldComponentUpdate() {
method render (line 2041) | render() {
method render (line 2076) | render() {
method constructor (line 2103) | constructor(props) {
method render (line 2108) | render(props, state) {
class App (line 2036) | class App extends Component {
method constructor (line 362) | constructor(props) {
method render (line 370) | render() {
method constructor (line 658) | constructor(props) {
method add (line 668) | add() {
method addTwice (line 672) | addTwice() {
method reset (line 676) | reset() {
method render (line 680) | render() {
method render (line 1790) | render() {
method constructor (line 1852) | constructor(props) {
method render (line 1858) | render() {
method constructor (line 1885) | constructor(props) {
method render (line 1891) | render() {
method componentWillReceiveProps (line 2019) | componentWillReceiveProps() {
method render (line 2022) | render() {
method shouldComponentUpdate (line 2037) | shouldComponentUpdate() {
method render (line 2041) | render() {
method render (line 2076) | render() {
method constructor (line 2103) | constructor(props) {
method render (line 2108) | render(props, state) {
class Child (line 2059) | class Child extends Component {
method constructor (line 1648) | constructor(props) {
method render (line 1656) | render() {
method shouldComponentUpdate (line 1778) | shouldComponentUpdate() {
method render (line 1781) | render() {
method componentDidMount (line 2060) | componentDidMount() {
method shouldComponentUpdate (line 2065) | shouldComponentUpdate() {
method render (line 2069) | render() {
class App (line 2074) | class App extends Component {
method constructor (line 362) | constructor(props) {
method render (line 370) | render() {
method constructor (line 658) | constructor(props) {
method add (line 668) | add() {
method addTwice (line 672) | addTwice() {
method reset (line 676) | reset() {
method render (line 680) | render() {
method render (line 1790) | render() {
method constructor (line 1852) | constructor(props) {
method render (line 1858) | render() {
method constructor (line 1885) | constructor(props) {
method render (line 1891) | render() {
method componentWillReceiveProps (line 2019) | componentWillReceiveProps() {
method render (line 2022) | render() {
method shouldComponentUpdate (line 2037) | shouldComponentUpdate() {
method render (line 2041) | render() {
method render (line 2076) | render() {
method constructor (line 2103) | constructor(props) {
method render (line 2108) | render(props, state) {
class App (line 2102) | class App extends Component {
method constructor (line 362) | constructor(props) {
method render (line 370) | render() {
method constructor (line 658) | constructor(props) {
method add (line 668) | add() {
method addTwice (line 672) | addTwice() {
method reset (line 676) | reset() {
method render (line 680) | render() {
method render (line 1790) | render() {
method constructor (line 1852) | constructor(props) {
method render (line 1858) | render() {
method constructor (line 1885) | constructor(props) {
method render (line 1891) | render() {
method componentWillReceiveProps (line 2019) | componentWillReceiveProps() {
method render (line 2022) | render() {
method shouldComponentUpdate (line 2037) | shouldComponentUpdate() {
method render (line 2041) | render() {
method render (line 2076) | render() {
method constructor (line 2103) | constructor(props) {
method render (line 2108) | render(props, state) {
FILE: test/browser/context.test.jsx
class Outer (line 21) | class Outer extends Component {
method getChildContext (line 22) | getChildContext() {
method render (line 25) | render(props) {
method getChildContext (line 105) | getChildContext() {
method render (line 108) | render(props) {
method getChildContext (line 175) | getChildContext() {
method render (line 178) | render() {
class Inner (line 35) | class Inner extends Component {
method shouldComponentUpdate (line 40) | shouldComponentUpdate() {
method componentWillReceiveProps (line 43) | componentWillReceiveProps() {}
method componentWillUpdate (line 44) | componentWillUpdate() {}
method componentDidUpdate (line 45) | componentDidUpdate() {}
method render (line 46) | render(props, state, context) {
method shouldComponentUpdate (line 115) | shouldComponentUpdate() {
method componentWillReceiveProps (line 118) | componentWillReceiveProps() {}
method componentWillUpdate (line 119) | componentWillUpdate() {}
method componentDidUpdate (line 120) | componentDidUpdate() {}
method render (line 121) | render(props, state, context) {
method getChildContext (line 188) | getChildContext() {
method render (line 191) | render() {
class Outer (line 104) | class Outer extends Component {
method getChildContext (line 22) | getChildContext() {
method render (line 25) | render(props) {
method getChildContext (line 105) | getChildContext() {
method render (line 108) | render(props) {
method getChildContext (line 175) | getChildContext() {
method render (line 178) | render() {
class Inner (line 114) | class Inner extends Component {
method shouldComponentUpdate (line 40) | shouldComponentUpdate() {
method componentWillReceiveProps (line 43) | componentWillReceiveProps() {}
method componentWillUpdate (line 44) | componentWillUpdate() {}
method componentDidUpdate (line 45) | componentDidUpdate() {}
method render (line 46) | render(props, state, context) {
method shouldComponentUpdate (line 115) | shouldComponentUpdate() {
method componentWillReceiveProps (line 118) | componentWillReceiveProps() {}
method componentWillUpdate (line 119) | componentWillUpdate() {}
method componentDidUpdate (line 120) | componentDidUpdate() {}
method render (line 121) | render(props, state, context) {
method getChildContext (line 188) | getChildContext() {
method render (line 191) | render() {
class Outer (line 174) | class Outer extends Component {
method getChildContext (line 22) | getChildContext() {
method render (line 25) | render(props) {
method getChildContext (line 105) | getChildContext() {
method render (line 108) | render(props) {
method getChildContext (line 175) | getChildContext() {
method render (line 178) | render() {
class Inner (line 187) | class Inner extends Component {
method shouldComponentUpdate (line 40) | shouldComponentUpdate() {
method componentWillReceiveProps (line 43) | componentWillReceiveProps() {}
method componentWillUpdate (line 44) | componentWillUpdate() {}
method componentDidUpdate (line 45) | componentDidUpdate() {}
method render (line 46) | render(props, state, context) {
method shouldComponentUpdate (line 115) | shouldComponentUpdate() {
method componentWillReceiveProps (line 118) | componentWillReceiveProps() {}
method componentWillUpdate (line 119) | componentWillUpdate() {}
method componentDidUpdate (line 120) | componentDidUpdate() {}
method render (line 121) | render(props, state, context) {
method getChildContext (line 188) | getChildContext() {
method render (line 191) | render() {
class InnerMost (line 196) | class InnerMost extends Component {
method render (line 197) | render() {
class Wrapper (line 224) | class Wrapper extends Component {
method getChildContext (line 225) | getChildContext() {
method render (line 229) | render() {
FILE: test/browser/createContext.test.jsx
class Inner (line 31) | class Inner extends Component {
method render (line 32) | render(props) {
method render (line 70) | render(props) {
method render (line 181) | render(props) {
method render (line 246) | render(props) {
method render (line 300) | render(props) {
method render (line 352) | render(props) {
method render (line 411) | render() {
method shouldComponentUpdate (line 480) | shouldComponentUpdate() {
method render (line 484) | render() {
method render (line 546) | render(props) {
method render (line 621) | render(props) {
method render (line 727) | render(props) {
method render (line 868) | render() {
class Inner (line 69) | class Inner extends Component {
method render (line 32) | render(props) {
method render (line 70) | render(props) {
method render (line 181) | render(props) {
method render (line 246) | render(props) {
method render (line 300) | render(props) {
method render (line 352) | render(props) {
method render (line 411) | render() {
method shouldComponentUpdate (line 480) | shouldComponentUpdate() {
method render (line 484) | render() {
method render (line 546) | render(props) {
method render (line 621) | render(props) {
method render (line 727) | render(props) {
method render (line 868) | render() {
class State (line 113) | class State extends Component {
method constructor (line 114) | constructor(props) {
method render (line 119) | render() {
method constructor (line 147) | constructor(props) {
method render (line 152) | render() {
class State (line 146) | class State extends Component {
method constructor (line 114) | constructor(props) {
method render (line 119) | render() {
method constructor (line 147) | constructor(props) {
method render (line 152) | render() {
class Inner (line 180) | class Inner extends Component {
method render (line 32) | render(props) {
method render (line 70) | render(props) {
method render (line 181) | render(props) {
method render (line 246) | render(props) {
method render (line 300) | render(props) {
method render (line 352) | render(props) {
method render (line 411) | render() {
method shouldComponentUpdate (line 480) | shouldComponentUpdate() {
method render (line 484) | render() {
method render (line 546) | render(props) {
method render (line 621) | render(props) {
method render (line 727) | render(props) {
method render (line 868) | render() {
class Inner (line 245) | class Inner extends Component {
method render (line 32) | render(props) {
method render (line 70) | render(props) {
method render (line 181) | render(props) {
method render (line 246) | render(props) {
method render (line 300) | render(props) {
method render (line 352) | render(props) {
method render (line 411) | render() {
method shouldComponentUpdate (line 480) | shouldComponentUpdate() {
method render (line 484) | render() {
method render (line 546) | render(props) {
method render (line 621) | render(props) {
method render (line 727) | render(props) {
method render (line 868) | render() {
class Inner (line 299) | class Inner extends Component {
method render (line 32) | render(props) {
method render (line 70) | render(props) {
method render (line 181) | render(props) {
method render (line 246) | render(props) {
method render (line 300) | render(props) {
method render (line 352) | render(props) {
method render (line 411) | render() {
method shouldComponentUpdate (line 480) | shouldComponentUpdate() {
method render (line 484) | render() {
method render (line 546) | render(props) {
method render (line 621) | render(props) {
method render (line 727) | render(props) {
method render (line 868) | render() {
class NoUpdate (line 341) | class NoUpdate extends Component {
method shouldComponentUpdate (line 342) | shouldComponentUpdate() {
method render (line 346) | render() {
method shouldComponentUpdate (line 611) | shouldComponentUpdate() {
method render (line 615) | render() {
method shouldComponentUpdate (line 1004) | shouldComponentUpdate() {
method render (line 1008) | render() {
class Inner (line 351) | class Inner extends Component {
method render (line 32) | render(props) {
method render (line 70) | render(props) {
method render (line 181) | render(props) {
method render (line 246) | render(props) {
method render (line 300) | render(props) {
method render (line 352) | render(props) {
method render (line 411) | render() {
method shouldComponentUpdate (line 480) | shouldComponentUpdate() {
method render (line 484) | render() {
method render (line 546) | render(props) {
method render (line 621) | render(props) {
method render (line 727) | render(props) {
method render (line 868) | render() {
class Consumed (line 392) | class Consumed extends Component {
method render (line 393) | render(props) {
method render (line 462) | render(props) {
class Outer (line 400) | class Outer extends Component {
method render (line 401) | render() {
method render (line 470) | render() {
class Inner (line 410) | class Inner extends Component {
method render (line 32) | render(props) {
method render (line 70) | render(props) {
method render (line 181) | render(props) {
method render (line 246) | render(props) {
method render (line 300) | render(props) {
method render (line 352) | render(props) {
method render (line 411) | render() {
method shouldComponentUpdate (line 480) | shouldComponentUpdate() {
method render (line 484) | render() {
method render (line 546) | render(props) {
method render (line 621) | render(props) {
method render (line 727) | render(props) {
method render (line 868) | render() {
class InnerMost (line 420) | class InnerMost extends Component {
method render (line 421) | render() {
method render (line 494) | render() {
class Consumed (line 461) | class Consumed extends Component {
method render (line 393) | render(props) {
method render (line 462) | render(props) {
class Outer (line 469) | class Outer extends Component {
method render (line 401) | render() {
method render (line 470) | render() {
class Inner (line 479) | class Inner extends Component {
method render (line 32) | render(props) {
method render (line 70) | render(props) {
method render (line 181) | render(props) {
method render (line 246) | render(props) {
method render (line 300) | render(props) {
method render (line 352) | render(props) {
method render (line 411) | render() {
method shouldComponentUpdate (line 480) | shouldComponentUpdate() {
method render (line 484) | render() {
method render (line 546) | render(props) {
method render (line 621) | render(props) {
method render (line 727) | render(props) {
method render (line 868) | render() {
class InnerMost (line 493) | class InnerMost extends Component {
method render (line 421) | render() {
method render (line 494) | render() {
class App (line 503) | class App extends Component {
method render (line 504) | render() {
method constructor (line 680) | constructor(props) {
method renderInner (line 691) | renderInner(value) {
method render (line 699) | render() {
method constructor (line 764) | constructor() {
method render (line 771) | render(props, state) {
method render (line 810) | render() {
method render (line 827) | render() {
method constructor (line 896) | constructor(props) {
method componentWillUnmount (line 901) | componentWillUnmount() {
method render (line 905) | render() {
method shouldComponentUpdate (line 951) | shouldComponentUpdate() {
method render (line 955) | render() {
method constructor (line 1047) | constructor(props) {
method render (line 1052) | render() {
class Inner (line 545) | class Inner extends Component {
method render (line 32) | render(props) {
method render (line 70) | render(props) {
method render (line 181) | render(props) {
method render (line 246) | render(props) {
method render (line 300) | render(props) {
method render (line 352) | render(props) {
method render (line 411) | render() {
method shouldComponentUpdate (line 480) | shouldComponentUpdate() {
method render (line 484) | render() {
method render (line 546) | render(props) {
method render (line 621) | render(props) {
method render (line 727) | render(props) {
method render (line 868) | render() {
class Nested (line 554) | class Nested extends Component {
method render (line 555) | render(props) {
class NoUpdate (line 610) | class NoUpdate extends Component {
method shouldComponentUpdate (line 342) | shouldComponentUpdate() {
method render (line 346) | render() {
method shouldComponentUpdate (line 611) | shouldComponentUpdate() {
method render (line 615) | render() {
method shouldComponentUpdate (line 1004) | shouldComponentUpdate() {
method render (line 1008) | render() {
class Inner (line 620) | class Inner extends Component {
method render (line 32) | render(props) {
method render (line 70) | render(props) {
method render (line 181) | render(props) {
method render (line 246) | render(props) {
method render (line 300) | render(props) {
method render (line 352) | render(props) {
method render (line 411) | render() {
method shouldComponentUpdate (line 480) | shouldComponentUpdate() {
method render (line 484) | render() {
method render (line 546) | render(props) {
method render (line 621) | render(props) {
method render (line 727) | render(props) {
method render (line 868) | render() {
class App (line 679) | class App extends Component {
method render (line 504) | render() {
method constructor (line 680) | constructor(props) {
method renderInner (line 691) | renderInner(value) {
method render (line 699) | render() {
method constructor (line 764) | constructor() {
method render (line 771) | render(props, state) {
method render (line 810) | render() {
method render (line 827) | render() {
method constructor (line 896) | constructor(props) {
method componentWillUnmount (line 901) | componentWillUnmount() {
method render (line 905) | render() {
method shouldComponentUpdate (line 951) | shouldComponentUpdate() {
method render (line 955) | render() {
method constructor (line 1047) | constructor(props) {
method render (line 1052) | render() {
class Inner (line 726) | class Inner extends Component {
method render (line 32) | render(props) {
method render (line 70) | render(props) {
method render (line 181) | render(props) {
method render (line 246) | render(props) {
method render (line 300) | render(props) {
method render (line 352) | render(props) {
method render (line 411) | render() {
method shouldComponentUpdate (line 480) | shouldComponentUpdate() {
method render (line 484) | render() {
method render (line 546) | render(props) {
method render (line 621) | render(props) {
method render (line 727) | render(props) {
method render (line 868) | render() {
class App (line 763) | class App extends Component {
method render (line 504) | render() {
method constructor (line 680) | constructor(props) {
method renderInner (line 691) | renderInner(value) {
method render (line 699) | render() {
method constructor (line 764) | constructor() {
method render (line 771) | render(props, state) {
method render (line 810) | render() {
method render (line 827) | render() {
method constructor (line 896) | constructor(props) {
method componentWillUnmount (line 901) | componentWillUnmount() {
method render (line 905) | render() {
method shouldComponentUpdate (line 951) | shouldComponentUpdate() {
method render (line 955) | render() {
method constructor (line 1047) | constructor(props) {
method render (line 1052) | render() {
class App (line 809) | class App extends Component {
method render (line 504) | render() {
method constructor (line 680) | constructor(props) {
method renderInner (line 691) | renderInner(value) {
method render (line 699) | render() {
method constructor (line 764) | constructor() {
method render (line 771) | render(props, state) {
method render (line 810) | render() {
method render (line 827) | render() {
method constructor (line 896) | constructor(props) {
method componentWillUnmount (line 901) | componentWillUnmount() {
method render (line 905) | render() {
method shouldComponentUpdate (line 951) | shouldComponentUpdate() {
method render (line 955) | render() {
method constructor (line 1047) | constructor(props) {
method render (line 1052) | render() {
class App (line 826) | class App extends Component {
method render (line 504) | render() {
method constructor (line 680) | constructor(props) {
method renderInner (line 691) | renderInner(value) {
method render (line 699) | render() {
method constructor (line 764) | constructor() {
method render (line 771) | render(props, state) {
method render (line 810) | render() {
method render (line 827) | render() {
method constructor (line 896) | constructor(props) {
method componentWillUnmount (line 901) | componentWillUnmount() {
method render (line 905) | render() {
method shouldComponentUpdate (line 951) | shouldComponentUpdate() {
method render (line 955) | render() {
method constructor (line 1047) | constructor(props) {
method render (line 1052) | render() {
class NewContext (line 851) | class NewContext extends Component {
method render (line 852) | render() {
class OldContext (line 857) | class OldContext extends Component {
method getChildContext (line 858) | getChildContext() {
method render (line 862) | render() {
class Inner (line 867) | class Inner extends Component {
method render (line 32) | render(props) {
method render (line 70) | render(props) {
method render (line 181) | render(props) {
method render (line 246) | render(props) {
method render (line 300) | render(props) {
method render (line 352) | render(props) {
method render (line 411) | render() {
method shouldComponentUpdate (line 480) | shouldComponentUpdate() {
method render (line 484) | render() {
method render (line 546) | render(props) {
method render (line 621) | render(props) {
method render (line 727) | render(props) {
method render (line 868) | render() {
class App (line 895) | class App extends Component {
method render (line 504) | render() {
method constructor (line 680) | constructor(props) {
method renderInner (line 691) | renderInner(value) {
method render (line 699) | render() {
method constructor (line 764) | constructor() {
method render (line 771) | render(props, state) {
method render (line 810) | render() {
method render (line 827) | render() {
method constructor (line 896) | constructor(props) {
method componentWillUnmount (line 901) | componentWillUnmount() {
method render (line 905) | render() {
method shouldComponentUpdate (line 951) | shouldComponentUpdate() {
method render (line 955) | render() {
method constructor (line 1047) | constructor(props) {
method render (line 1052) | render() {
class Root (line 930) | class Root extends Component {
method constructor (line 931) | constructor(props) {
method updateStore (line 937) | updateStore() {
method render (line 941) | render() {
class App (line 950) | class App extends Component {
method render (line 504) | render() {
method constructor (line 680) | constructor(props) {
method renderInner (line 691) | renderInner(value) {
method render (line 699) | render() {
method constructor (line 764) | constructor() {
method render (line 771) | render(props, state) {
method render (line 810) | render() {
method render (line 827) | render() {
method constructor (line 896) | constructor(props) {
method componentWillUnmount (line 901) | componentWillUnmount() {
method render (line 905) | render() {
method shouldComponentUpdate (line 951) | shouldComponentUpdate() {
method render (line 955) | render() {
method constructor (line 1047) | constructor(props) {
method render (line 1052) | render() {
function Parent (line 960) | function Parent(props) {
class Child (line 964) | class Child extends Component {
method componentDidMount (line 965) | componentDidMount() {
method componentDidUpdate (line 969) | componentDidUpdate(prevProps) {
method componentWillUnmount (line 973) | componentWillUnmount() {
method render (line 977) | render() {
method shouldComponentUpdate (line 1066) | shouldComponentUpdate() {
method render (line 1071) | render() {
class NoUpdate (line 1003) | class NoUpdate extends Component {
method shouldComponentUpdate (line 342) | shouldComponentUpdate() {
method render (line 346) | render() {
method shouldComponentUpdate (line 611) | shouldComponentUpdate() {
method render (line 615) | render() {
method shouldComponentUpdate (line 1004) | shouldComponentUpdate() {
method render (line 1008) | render() {
class Provider (line 1013) | class Provider extends Component {
method constructor (line 1014) | constructor(props) {
method render (line 1020) | render() {
class App (line 1046) | class App extends Component {
method render (line 504) | render() {
method constructor (line 680) | constructor(props) {
method renderInner (line 691) | renderInner(value) {
method render (line 699) | render() {
method constructor (line 764) | constructor() {
method render (line 771) | render(props, state) {
method render (line 810) | render() {
method render (line 827) | render() {
method constructor (line 896) | constructor(props) {
method componentWillUnmount (line 901) | componentWillUnmount() {
method render (line 905) | render() {
method shouldComponentUpdate (line 951) | shouldComponentUpdate() {
method render (line 955) | render() {
method constructor (line 1047) | constructor(props) {
method render (line 1052) | render() {
class Child (line 1063) | class Child extends Component {
method componentDidMount (line 965) | componentDidMount() {
method componentDidUpdate (line 969) | componentDidUpdate(prevProps) {
method componentWillUnmount (line 973) | componentWillUnmount() {
method render (line 977) | render() {
method shouldComponentUpdate (line 1066) | shouldComponentUpdate() {
method render (line 1071) | render() {
class Wrapper (line 1091) | class Wrapper extends Component {
method constructor (line 1092) | constructor(props) {
method getChildContext (line 1098) | getChildContext() {
method render (line 1102) | render() {
FILE: test/browser/customBuiltInElements.test.jsx
class Foo (line 19) | class Foo extends Component {
method render (line 20) | render() {
class BuiltIn (line 27) | class BuiltIn extends HTMLDivElement {
method connectedCallback (line 28) | connectedCallback() {
FILE: test/browser/events.test.jsx
function fireEvent (line 12) | function fireEvent(on, type) {
function fooHandler (line 51) | function fooHandler() {}
FILE: test/browser/focus.test.jsx
class DynamicList (line 24) | class DynamicList extends Component {
method constructor (line 25) | constructor(props) {
method render (line 73) | render(props, state) {
function focusInput (line 98) | function focusInput() {
function focusInputById (line 111) | function focusInputById() {
function validateFocus (line 131) | function validateFocus(input, message) {
function getListHtml (line 141) | function getListHtml(before, after) {
function App (line 182) | function App({ showFirst, showLast }) {
method constructor (line 463) | constructor() {
method render (line 469) | render() {
method constructor (line 517) | constructor() {
method render (line 523) | render() {
class App (line 462) | class App extends Component {
method constructor (line 463) | constructor() {
method render (line 469) | render() {
method constructor (line 517) | constructor() {
method render (line 523) | render() {
class App (line 516) | class App extends Component {
method constructor (line 463) | constructor() {
method render (line 469) | render() {
method constructor (line 517) | constructor() {
method render (line 523) | render() {
FILE: test/browser/fragments.test.jsx
function expectDomLogToBe (line 24) | function expectDomLogToBe(expectedOperations, message) {
class Stateful (line 28) | class Stateful extends Component {
method componentDidUpdate (line 29) | componentDidUpdate() {
method render (line 32) | render() {
class X (line 159) | class X extends Component {
method render (line 160) | render() {
method render (line 192) | render() {
class App (line 165) | class App extends Component {
method render (line 166) | render(props) {
method constructor (line 200) | constructor(props, context) {
method render (line 207) | render() {
method constructor (line 1072) | constructor() {
method render (line 1078) | render() {
method constructor (line 1900) | constructor() {
method render (line 1907) | render() {
method constructor (line 1949) | constructor(props) {
method render (line 1957) | render() {
method constructor (line 2776) | constructor(props) {
method componentDidMount (line 2799) | componentDidMount() {
method render (line 2821) | render() {
method constructor (line 2920) | constructor(props) {
method render (line 2929) | render(_props, state) {
method constructor (line 3011) | constructor(props) {
method render (line 3016) | render() {
method constructor (line 3068) | constructor(props) {
method render (line 3074) | render() {
method render (line 3127) | render() {
method render (line 3165) | render() {
method render (line 3204) | render() {
method render (line 3240) | render() {
class X (line 191) | class X extends Component {
method render (line 160) | render() {
method render (line 192) | render() {
class App (line 199) | class App extends Component {
method render (line 166) | render(props) {
method constructor (line 200) | constructor(props, context) {
method render (line 207) | render() {
method constructor (line 1072) | constructor() {
method render (line 1078) | render() {
method constructor (line 1900) | constructor() {
method render (line 1907) | render() {
method constructor (line 1949) | constructor(props) {
method render (line 1957) | render() {
method constructor (line 2776) | constructor(props) {
method componentDidMount (line 2799) | componentDidMount() {
method render (line 2821) | render() {
method constructor (line 2920) | constructor(props) {
method render (line 2929) | render(_props, state) {
method constructor (line 3011) | constructor(props) {
method render (line 3016) | render() {
method constructor (line 3068) | constructor(props) {
method render (line 3074) | render() {
method render (line 3127) | render() {
method render (line 3165) | render() {
method render (line 3204) | render() {
method render (line 3240) | render() {
function Foo (line 253) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 275) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 303) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 340) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 379) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
class Comp (line 415) | class Comp extends Component {
method render (line 416) | render() {
method constructor (line 940) | constructor() {
method render (line 946) | render() {
method constructor (line 964) | constructor() {
method render (line 970) | render() {
function Foo (line 431) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 465) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 486) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 518) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 541) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 560) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 583) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 607) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
class Foo (line 633) | class Foo extends Component {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
class Foo (line 665) | class Foo extends Component {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
class Foo (line 706) | class Foo extends Component {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 736) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 796) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 848) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
class Comp (line 939) | class Comp extends Component {
method render (line 416) | render() {
method constructor (line 940) | constructor() {
method render (line 946) | render() {
method constructor (line 964) | constructor() {
method render (line 970) | render() {
class Comp (line 963) | class Comp extends Component {
method render (line 416) | render() {
method constructor (line 940) | constructor() {
method render (line 946) | render() {
method constructor (line 964) | constructor() {
method render (line 970) | render() {
class List (line 1000) | class List extends Component {
method constructor (line 1001) | constructor() {
method render (line 1010) | render() {
class App (line 1071) | class App extends Component {
method render (line 166) | render(props) {
method constructor (line 200) | constructor(props, context) {
method render (line 207) | render() {
method constructor (line 1072) | constructor() {
method render (line 1078) | render() {
method constructor (line 1900) | constructor() {
method render (line 1907) | render() {
method constructor (line 1949) | constructor(props) {
method render (line 1957) | render() {
method constructor (line 2776) | constructor(props) {
method componentDidMount (line 2799) | componentDidMount() {
method render (line 2821) | render() {
method constructor (line 2920) | constructor(props) {
method render (line 2929) | render(_props, state) {
method constructor (line 3011) | constructor(props) {
method render (line 3016) | render() {
method constructor (line 3068) | constructor(props) {
method render (line 3074) | render() {
method render (line 3127) | render() {
method render (line 3165) | render() {
method render (line 3204) | render() {
method render (line 3240) | render() {
class BobRossProvider (line 1146) | class BobRossProvider extends Component {
method getChildContext (line 1147) | getChildContext() {
method render (line 1151) | render(props) {
function BobRossConsumer (line 1156) | function BobRossConsumer(props, context) {
function Foo (line 1511) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 1586) | function Foo({ condition }) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
function Foo (line 1774) | function Foo(props) {
method constructor (line 634) | constructor(props) {
method render (line 639) | render(props, { isLoading, data }) {
method constructor (line 666) | constructor(props) {
method render (line 671) | render(props, { isLoading, data }) {
method constructor (line 707) | constructor(props) {
method render (line 712) | render(props, { isLoading, data }) {
class SubList (line 1883) | class SubList extends Component {
method shouldComponentUpdate (line 1884) | shouldComponentUpdate(nextProps) {
method render (line 1887) | render() {
class App (line 1899) | class App extends Component {
method render (line 166) | render(props) {
method constructor (line 200) | constructor(props, context) {
method render (line 207) | render() {
method constructor (line 1072) | constructor() {
method render (line 1078) | render() {
method constructor (line 1900) | constructor() {
method render (line 1907) | render() {
method constructor (line 1949) | constructor(props) {
method render (line 1957) | render() {
method constructor (line 2776) | constructor(props) {
method componentDidMount (line 2799) | componentDidMount() {
method render (line 2821) | render() {
method constructor (line 2920) | constructor(props) {
method render (line 2929) | render(_props, state) {
method constructor (line 3011) | constructor(props) {
method render (line 3016) | render() {
method constructor (line 3068) | constructor(props) {
method render (line 3074) | render() {
method render (line 3127) | render() {
method render (line 3165) | render() {
method render (line 3204) | render() {
method render (line 3240) | render() {
class App (line 1948) | class App extends Component {
method render (line 166) | render(props) {
method constructor (line 200) | constructor(props, context) {
method render (line 207) | render() {
method constructor (line 1072) | constructor() {
method render (line 1078) | render() {
method constructor (line 1900) | constructor() {
method render (line 1907) | render() {
method constructor (line 1949) | constructor(props) {
method render (line 1957) | render() {
method constructor (line 2776) | constructor(props) {
method componentDidMount (line 2799) | componentDidMount() {
method render (line 2821) | render() {
method constructor (line 2920) | constructor(props) {
method render (line 2929) | render(_props, state) {
method constructor (line 3011) | constructor(props) {
method render (line 3016) | render() {
method constructor (line 3068) | constructor(props) {
method render (line 3074) | render() {
method render (line 3127) | render() {
method render (line 3165) | render() {
method render (line 3204) | render() {
method render (line 3240) | render() {
class SetState (line 1993) | class SetState extends Component {
method constructor (line 1994) | constructor(props) {
method render (line 1999) | render() {
method constructor (line 2034) | constructor(props) {
method render (line 2039) | render() {
method constructor (line 2085) | constructor(props) {
method render (line 2090) | render() {
method constructor (line 2122) | constructor(props) {
method render (line 2127) | render() {
method constructor (line 2161) | constructor(props) {
method render (line 2166) | render() {
method constructor (line 2200) | constructor(props) {
method render (line 2205) | render() {
method constructor (line 2246) | constructor(props) {
method render (line 2251) | render() {
method constructor (line 2289) | constructor(props) {
method render (line 2294) | render() {
class SetState (line 2033) | class SetState extends Component {
method constructor (line 1994) | constructor(props) {
method render (line 1999) | render() {
method constructor (line 2034) | constructor(props) {
method render (line 2039) | render() {
method constructor (line 2085) | constructor(props) {
method render (line 2090) | render() {
method constructor (line 2122) | constructor(props) {
method render (line 2127) | render() {
method constructor (line 2161) | constructor(props) {
method render (line 2166) | render() {
method constructor (line 2200) | constructor(props) {
method render (line 2205) | render() {
method constructor (line 2246) | constructor(props) {
method render (line 2251) | render() {
method constructor (line 2289) | constructor(props) {
method render (line 2294) | render() {
class SetState (line 2084) | class SetState extends Component {
method constructor (line 1994) | constructor(props) {
method render (line 1999) | render() {
method constructor (line 2034) | constructor(props) {
method render (line 2039) | render() {
method constructor (line 2085) | constructor(props) {
method render (line 2090) | render() {
method constructor (line 2122) | constructor(props) {
method render (line 2127) | render() {
method constructor (line 2161) | constructor(props) {
method render (line 2166) | render() {
method constructor (line 2200) | constructor(props) {
method render (line 2205) | render() {
method constructor (line 2246) | constructor(props) {
method render (line 2251) | render() {
method constructor (line 2289) | constructor(props) {
method render (line 2294) | render() {
class SetState (line 2121) | class SetState extends Component {
method constructor (line 1994) | constructor(props) {
method render (line 1999) | render() {
method constructor (line 2034) | constructor(props) {
method render (line 2039) | render() {
method constructor (line 2085) | constructor(props) {
method render (line 2090) | render() {
method constructor (line 2122) | constructor(props) {
method render (line 2127) | render() {
method constructor (line 2161) | constructor(props) {
method render (line 2166) | render() {
method constructor (line 2200) | constructor(props) {
method render (line 2205) | render() {
method constructor (line 2246) | constructor(props) {
method render (line 2251) | render() {
method constructor (line 2289) | constructor(props) {
method render (line 2294) | render() {
class SetState (line 2160) | class SetState extends Component {
method constructor (line 1994) | constructor(props) {
method render (line 1999) | render() {
method constructor (line 2034) | constructor(props) {
method render (line 2039) | render() {
method constructor (line 2085) | constructor(props) {
method render (line 2090) | render() {
method constructor (line 2122) | constructor(props) {
method render (line 2127) | render() {
method constructor (line 2161) | constructor(props) {
method render (line 2166) | render() {
method constructor (line 2200) | constructor(props) {
method render (line 2205) | render() {
method constructor (line 2246) | constructor(props) {
method render (line 2251) | render() {
method constructor (line 2289) | constructor(props) {
method render (line 2294) | render() {
class SetState (line 2199) | class SetState extends Component {
method constructor (line 1994) | constructor(props) {
method render (line 1999) | render() {
method constructor (line 2034) | constructor(props) {
method render (line 2039) | render() {
method constructor (line 2085) | constructor(props) {
method render (line 2090) | render() {
method constructor (line 2122) | constructor(props) {
method render (line 2127) | render() {
method constructor (line 2161) | constructor(props) {
method render (line 2166) | render() {
method constructor (line 2200) | constructor(props) {
method render (line 2205) | render() {
method constructor (line 2246) | constructor(props) {
method render (line 2251) | render() {
method constructor (line 2289) | constructor(props) {
method render (line 2294) | render() {
class SetState (line 2245) | class SetState extends Component {
method constructor (line 1994) | constructor(props) {
method render (line 1999) | render() {
method constructor (line 2034) | constructor(props) {
method render (line 2039) | render() {
method constructor (line 2085) | constructor(props) {
method render (line 2090) | render() {
method constructor (line 2122) | constructor(props) {
method render (line 2127) | render() {
method constructor (line 2161) | constructor(props) {
method render (line 2166) | render() {
method constructor (line 2200) | constructor(props) {
method render (line 2205) | render() {
method constructor (line 2246) | constructor(props) {
method render (line 2251) | render() {
method constructor (line 2289) | constructor(props) {
method render (line 2294) | render() {
function Outer (line 2256) | function Outer() {
class SetState (line 2288) | class SetState extends Component {
method constructor (line 1994) | constructor(props) {
method render (line 1999) | render() {
method constructor (line 2034) | constructor(props) {
method render (line 2039) | render() {
method constructor (line 2085) | constructor(props) {
method render (line 2090) | render() {
method constructor (line 2122)
Condensed preview — 295 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,593K chars).
[
{
"path": ".editorconfig",
"chars": 230,
"preview": "root = true\n\n[*]\nindent_style = tab\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newlin"
},
{
"path": ".github/CODE_OF_CONDUCT.md",
"chars": 3215,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 677,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n---\n\n- [ ] Check if up"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 341,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: feature request\nassignees: ''\n---\n\n*"
},
{
"path": ".github/workflows/benchmarks.yml",
"chars": 2144,
"preview": "name: Benchmarks\n\non:\n workflow_dispatch:\n workflow_call:\n\njobs:\n prepare:\n name: Prepare environment\n runs-on:"
},
{
"path": ".github/workflows/build-test.yml",
"chars": 1521,
"preview": "name: Build & Test\n\non:\n workflow_dispatch:\n workflow_call:\n inputs:\n ref:\n description: 'Branch or tag"
},
{
"path": ".github/workflows/ci.yml",
"chars": 1076,
"preview": "name: CI\n\non:\n workflow_dispatch:\n pull_request:\n branches:\n - '**'\n push:\n branches:\n - main\n -"
},
{
"path": ".github/workflows/pr-reporter.yml",
"chars": 4081,
"preview": "name: Report Results to PR\n\non:\n # The pull_request event can't write comments for PRs from forks so using this\n # wor"
},
{
"path": ".github/workflows/release.yml",
"chars": 883,
"preview": "name: Release\non: create\n\njobs:\n build:\n if: github.ref_type == 'tag'\n uses: preactjs/preact/.github/workflows/bu"
},
{
"path": ".github/workflows/run-bench.yml",
"chars": 4536,
"preview": "name: Benchmark Worker\n\n# Expectations:\n#\n# This workflow expects calling workflows to have uploaded an artifact named\n#"
},
{
"path": ".github/workflows/single-bench.yml",
"chars": 2565,
"preview": "name: Benchmark Debug\n\non:\n workflow_dispatch:\n inputs:\n benchmark:\n description: 'Which benchmark to ru"
},
{
"path": ".github/workflows/size.yml",
"chars": 590,
"preview": "name: Compressed Size\n\non:\n workflow_call:\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/"
},
{
"path": ".gitignore",
"chars": 169,
"preview": ".DS_Store\nnode_modules\nnpm-debug.log\ndist\n*/package-lock.json\nyarn.lock\n.vscode\n.idea\ntest/ts/**/*.js\ncoverage\n*.sw[op]\n"
},
{
"path": ".gitmodules",
"chars": 90,
"preview": "[submodule \"benchmarks\"]\n\tpath = benchmarks\n\turl = https://github.com/preactjs/benchmarks\n"
},
{
"path": ".husky/pre-commit",
"chars": 16,
"preview": "npx nano-staged\n"
},
{
"path": ".oxlintrc.json",
"chars": 1264,
"preview": "{\n \"$schema\": \"./node_modules/oxlint/configuration_schema.json\",\n \"ignorePatterns\": [\n \"**/dist/**\",\n \"benchmark"
},
{
"path": ".prettierignore",
"chars": 178,
"preview": ".DS_Store\nnode_modules\nnpm-debug.log\ndist\n*/package-lock.json\nyarn.lock\n.vscode\n.idea\ntest/ts/**/*.js\ncoverage\n*.sw[op]\n"
},
{
"path": "CONTRIBUTING.md",
"chars": 14670,
"preview": "# Contributing\n\nThis document is intended for developers interested in making contributions to Preact and documents our "
},
{
"path": "LICENSE",
"chars": 1087,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2015-present Jason Miller\n\nPermission is hereby granted, free of charge, to any per"
},
{
"path": "README.md",
"chars": 14593,
"preview": "> [!NOTE]\n> This is the branch for the upcoming release, for patches to v10 you need the [v10.x branch](https://github.c"
},
{
"path": "babel.config.js",
"chars": 1055,
"preview": "module.exports = function (api) {\n\tapi.cache(true);\n\n\tconst noModules = String(process.env.BABEL_NO_MODULES) === 'true';"
},
{
"path": "biome.json",
"chars": 1265,
"preview": "{\n \"formatter\": {\n \"enabled\": true,\n \"formatWithErrors\": false,\n \"indentStyle\": \"tab\",\n \"indentWidth\": 2,\n "
},
{
"path": "compat/LICENSE",
"chars": 1087,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2015-present Jason Miller\n\nPermission is hereby granted, free of charge, to any per"
},
{
"path": "compat/client.d.ts",
"chars": 304,
"preview": "import * as preact from '../src/index';\n\nexport function createRoot(container: preact.ContainerNode): {\n\trender(children"
},
{
"path": "compat/client.js",
"chars": 479,
"preview": "const { render, hydrate, unmountComponentAtNode } = require('preact/compat');\n\nfunction createRoot(container) {\n\treturn "
},
{
"path": "compat/client.mjs",
"chars": 489,
"preview": "import { render, hydrate, unmountComponentAtNode } from 'preact/compat';\n\nexport function createRoot(container) {\n\tretur"
},
{
"path": "compat/jsx-dev-runtime.js",
"chars": 75,
"preview": "require('preact/compat');\n\nmodule.exports = require('preact/jsx-runtime');\n"
},
{
"path": "compat/jsx-dev-runtime.mjs",
"chars": 61,
"preview": "import 'preact/compat';\n\nexport * from 'preact/jsx-runtime';\n"
},
{
"path": "compat/jsx-runtime.js",
"chars": 75,
"preview": "require('preact/compat');\n\nmodule.exports = require('preact/jsx-runtime');\n"
},
{
"path": "compat/jsx-runtime.mjs",
"chars": 61,
"preview": "import 'preact/compat';\n\nexport * from 'preact/jsx-runtime';\n"
},
{
"path": "compat/mangle.json",
"chars": 684,
"preview": "{\n \"help\": {\n \"what is this file?\": \"It controls protected/private property mangling so that minified builds have co"
},
{
"path": "compat/package.json",
"chars": 399,
"preview": "{\n \"name\": \"preact-compat\",\n \"amdName\": \"preactCompat\",\n \"private\": true,\n \"description\": \"A React compatibility lay"
},
{
"path": "compat/scheduler.d.ts",
"chars": 364,
"preview": "export var unstable_ImmediatePriority: number;\nexport var unstable_UserBlockingPriority: number;\nexport var unstable_Nor"
},
{
"path": "compat/scheduler.js",
"chars": 348,
"preview": "// see scheduler.mjs\n\nfunction unstable_runWithPriority(priority, callback) {\n\treturn callback();\n}\n\nmodule.exports = {\n"
},
{
"path": "compat/scheduler.mjs",
"chars": 768,
"preview": "/* eslint-disable */\n\n// This file includes experimental React APIs exported from the \"scheduler\"\n// npm package. Despit"
},
{
"path": "compat/server.browser.js",
"chars": 235,
"preview": "import { renderToString } from 'preact-render-to-string';\n\nexport {\n\trenderToString,\n\trenderToString as renderToStaticMa"
},
{
"path": "compat/server.d.ts",
"chars": 830,
"preview": "// @ts-nocheck TS loses its mind over the mixed module systems here.\n// It's not ideal, but works at runtime and we're n"
},
{
"path": "compat/server.js",
"chars": 1060,
"preview": "/* eslint-disable */\nvar renderToString;\ntry {\n\tconst mod = require('preact-render-to-string');\n\trenderToString = mod.de"
},
{
"path": "compat/server.mjs",
"chars": 587,
"preview": "import { renderToString } from 'preact-render-to-string';\nimport { renderToPipeableStream } from 'preact-render-to-strin"
},
{
"path": "compat/src/Children.js",
"chars": 577,
"preview": "import { toChildArray } from 'preact';\n\nconst mapFn = (children, fn, context) => {\n\tif (children == null) return null;\n\t"
},
{
"path": "compat/src/PureComponent.js",
"chars": 555,
"preview": "import { Component } from 'preact';\nimport { shallowDiffers } from './util';\n\n/**\n * Component class with a predefined `"
},
{
"path": "compat/src/forwardRef.js",
"chars": 1046,
"preview": "import { assign } from './util';\n\nexport const REACT_FORWARD_SYMBOL = Symbol.for('react.forward_ref');\n\n/**\n * Pass ref "
},
{
"path": "compat/src/hooks.js",
"chars": 1646,
"preview": "import { useState, useLayoutEffect, useEffect } from 'preact/hooks';\n\n/**\n * This is taken from https://github.com/faceb"
},
{
"path": "compat/src/index.d.ts",
"chars": 16340,
"preview": "import * as _preact from '../../src/index';\nimport { JSXInternal } from '../../src/jsx';\nimport * as _hooks from '../../"
},
{
"path": "compat/src/index.js",
"chars": 5133,
"preview": "import {\n\tComponent,\n\tFragment,\n\tcreateContext,\n\tcreateElement,\n\tcreateRef,\n\toptions,\n\tcloneElement as preactCloneElemen"
},
{
"path": "compat/src/internal.d.ts",
"chars": 1248,
"preview": "import {\n\tComponent as PreactComponent,\n\tVNode as PreactVNode,\n\tFunctionComponent as PreactFunctionComponent,\n\tPreactEle"
},
{
"path": "compat/src/memo.js",
"chars": 1045,
"preview": "import { createElement } from 'preact';\nimport { shallowDiffers } from './util';\n\n/**\n * Memoize a component, so that it"
},
{
"path": "compat/src/portals.js",
"chars": 2023,
"preview": "import { createElement, render } from 'preact';\n\n/**\n * @param {import('../../src/index').RenderableProps<{ context: any"
},
{
"path": "compat/src/render.js",
"chars": 9112,
"preview": "import {\n\trender as preactRender,\n\thydrate as preactHydrate,\n\toptions,\n\ttoChildArray,\n\tComponent\n} from 'preact';\nimport"
},
{
"path": "compat/src/suspense.d.ts",
"chars": 435,
"preview": "import { Component, ComponentChild, ComponentChildren } from '../../src/index';\n\n//\n// Suspense/lazy\n// ----------------"
},
{
"path": "compat/src/suspense.js",
"chars": 6800,
"preview": "import { Component, Fragment, createElement, options } from 'preact';\nimport {\n\tCOMPONENT_FORCE,\n\tFORCE_PROPS_REVALIDATE"
},
{
"path": "compat/src/util.js",
"chars": 502,
"preview": "export const assign = Object.assign;\n\n/**\n * Check if two objects have a different shape\n * @param {object} a\n * @param "
},
{
"path": "compat/test/browser/Children.test.jsx",
"chars": 4234,
"preview": "import {\n\tsetupScratch,\n\tteardown,\n\tserializeHtml\n} from '../../../test/_util/helpers';\nimport { div, span } from '../.."
},
{
"path": "compat/test/browser/PureComponent.test.jsx",
"chars": 3866,
"preview": "import React, { createElement } from 'preact/compat';\nimport { setupRerender } from 'preact/test-utils';\nimport { setupS"
},
{
"path": "compat/test/browser/cloneElement.test.jsx",
"chars": 2805,
"preview": "import { createElement as preactH } from 'preact';\nimport { createElement, render, cloneElement } from 'preact/compat';\n"
},
{
"path": "compat/test/browser/compat.options.test.jsx",
"chars": 1725,
"preview": "import { vnodeSpy, eventSpy } from '../../../test/_util/optionSpies';\nimport {\n\tcreateElement,\n\trender,\n\tComponent,\n\tcre"
},
{
"path": "compat/test/browser/component.test.jsx",
"chars": 7971,
"preview": "import { setupRerender } from 'preact/test-utils';\nimport { setupScratch, teardown } from '../../../test/_util/helpers';"
},
{
"path": "compat/test/browser/componentDidCatch.test.jsx",
"chars": 1018,
"preview": "import { createElement, render, Component } from 'preact/compat';\nimport { setupScratch, teardown } from '../../../test/"
},
{
"path": "compat/test/browser/context.test.jsx",
"chars": 3394,
"preview": "import { setupRerender } from 'preact/test-utils';\nimport { setupScratch, teardown } from '../../../test/_util/helpers';"
},
{
"path": "compat/test/browser/createElement.test.jsx",
"chars": 1322,
"preview": "import { createElement, render } from 'preact/compat';\nimport { setupScratch, teardown } from '../../../test/_util/helpe"
},
{
"path": "compat/test/browser/createFactory.test.jsx",
"chars": 758,
"preview": "import { render, createElement, createFactory } from 'preact/compat';\nimport { setupScratch, teardown } from '../../../t"
},
{
"path": "compat/test/browser/events.test.jsx",
"chars": 9340,
"preview": "import { render } from 'preact';\nimport {\n\tsetupScratch,\n\tteardown,\n\tcreateEvent,\n\tsupportsPassiveEvents\n} from '../../."
},
{
"path": "compat/test/browser/exports.test.js",
"chars": 4448,
"preview": "import Compat from 'preact/compat';\nimport CompatClient from 'preact/compat/client';\n// eslint-disable-next-line no-dupl"
},
{
"path": "compat/test/browser/findDOMNode.test.jsx",
"chars": 1628,
"preview": "import React, { createElement, findDOMNode } from 'preact/compat';\nimport { setupScratch, teardown } from '../../../test"
},
{
"path": "compat/test/browser/forwardRef.test.jsx",
"chars": 12241,
"preview": "import {\n\tcreateElement,\n\trender,\n\tcreateRef,\n\tforwardRef,\n\thydrate,\n\tmemo,\n\tuseState,\n\tuseRef,\n\tuseImperativeHandle,\n\tc"
},
{
"path": "compat/test/browser/hooks.test.jsx",
"chars": 3244,
"preview": "import { createContext } from 'preact';\nimport {\n\tcreateElement,\n\tuseDeferredValue,\n\tuseInsertionEffect,\n\tuseTransition,"
},
{
"path": "compat/test/browser/hydrate.test.jsx",
"chars": 842,
"preview": "import { createElement, hydrate } from 'preact/compat';\nimport { setupScratch, teardown } from '../../../test/_util/help"
},
{
"path": "compat/test/browser/isFragment.test.js",
"chars": 777,
"preview": "import { createElement as preactCreateElement, Fragment } from 'preact';\nimport React, { isFragment } from 'preact/compa"
},
{
"path": "compat/test/browser/isMemo.test.jsx",
"chars": 1089,
"preview": "import { createElement as preactCreateElement, Fragment } from 'preact';\nimport React, { createElement, isMemo, memo } f"
},
{
"path": "compat/test/browser/isValidElement.test.js",
"chars": 805,
"preview": "import { createElement as preactCreateElement } from 'preact';\nimport React, { isValidElement } from 'preact/compat';\n\nd"
},
{
"path": "compat/test/browser/memo.test.jsx",
"chars": 5709,
"preview": "import { setupRerender } from 'preact/test-utils';\nimport {\n\tcreateEvent,\n\tsetupScratch,\n\tteardown\n} from '../../../test"
},
{
"path": "compat/test/browser/portals.test.jsx",
"chars": 19481,
"preview": "import React, {\n\tcreateElement,\n\trender,\n\tcreatePortal,\n\tuseState,\n\tComponent,\n\tuseEffect,\n\tFragment,\n\tuseId\n} from 'pre"
},
{
"path": "compat/test/browser/render.test.jsx",
"chars": 24232,
"preview": "import React, {\n\tcreateElement,\n\trender,\n\tComponent,\n\thydrate,\n\tcreateContext\n} from 'preact/compat';\nimport { setupRere"
},
{
"path": "compat/test/browser/scheduler.test.js",
"chars": 1080,
"preview": "import {\n\tunstable_runWithPriority,\n\tunstable_NormalPriority,\n\tunstable_LowPriority,\n\tunstable_IdlePriority,\n\tunstable_U"
},
{
"path": "compat/test/browser/select.test.jsx",
"chars": 841,
"preview": "import { setupScratch, teardown } from '../../../test/_util/helpers';\nimport { createElement, render } from 'preact/comp"
},
{
"path": "compat/test/browser/suspense-hydration.test.jsx",
"chars": 27893,
"preview": "import { setupRerender } from 'preact/test-utils';\nimport React, {\n\tcreateElement,\n\thydrate,\n\tFragment,\n\tSuspense,\n\tmemo"
},
{
"path": "compat/test/browser/suspense-utils.js",
"chars": 4303,
"preview": "import React, { Component, lazy } from 'preact/compat';\nimport { vi } from 'vitest';\n\nconst h = React.createElement;\n\n/*"
},
{
"path": "compat/test/browser/suspense.test.jsx",
"chars": 63843,
"preview": "import { act, setupRerender } from 'preact/test-utils';\nimport React, {\n\tcreateElement,\n\trender,\n\tComponent,\n\tSuspense,\n"
},
{
"path": "compat/test/browser/svg.test.jsx",
"chars": 2932,
"preview": "import React, { createElement } from 'preact/compat';\nimport {\n\tsetupScratch,\n\tteardown,\n\tserializeHtml,\n\tsortAttributes"
},
{
"path": "compat/test/browser/testUtils.js",
"chars": 652,
"preview": "/**\n * Retrieve a Symbol if supported or use the fallback value\n * @param {string} name The name of the Symbol to look u"
},
{
"path": "compat/test/browser/textarea.test.jsx",
"chars": 2075,
"preview": "import React, { createElement, render, hydrate, useState } from 'preact/compat';\nimport ReactDOMServer from 'preact/comp"
},
{
"path": "compat/test/browser/unmountComponentAtNode.test.jsx",
"chars": 723,
"preview": "import React, { createElement, unmountComponentAtNode } from 'preact/compat';\nimport { setupScratch, teardown } from '.."
},
{
"path": "compat/test/browser/unstable_batchedUpdates.test.js",
"chars": 285,
"preview": "import { unstable_batchedUpdates } from 'preact/compat';\n\ndescribe('unstable_batchedUpdates', () => {\n\tit('should execut"
},
{
"path": "compat/test/browser/useSyncExternalStore.test.jsx",
"chars": 21194,
"preview": "import React, {\n\tcreateElement,\n\tFragment,\n\tuseSyncExternalStore,\n\trender,\n\tuseState,\n\tuseCallback,\n\tuseEffect,\n\tuseLayo"
},
{
"path": "compat/test/ts/forward-ref.tsx",
"chars": 660,
"preview": "import React from '../../src';\n\nconst MyInput: React.ForwardRefRenderFunction<\n\t{ focus(): void },\n\t{ id: string }\n> = ("
},
{
"path": "compat/test/ts/index.tsx",
"chars": 1360,
"preview": "import React from '../../src';\n\nReact.render(<div />, document.createElement('div'));\nReact.render(<div />, document.cre"
},
{
"path": "compat/test/ts/lazy.tsx",
"chars": 328,
"preview": "import * as React from '../../src';\n\nexport interface LazyProps {\n\tisProp: boolean;\n}\n\ninterface LazyState {\n\tforState: "
},
{
"path": "compat/test/ts/memo.tsx",
"chars": 1804,
"preview": "import * as React from '../../src';\nimport { expectType } from './utils';\n\ninterface MemoProps {\n\trequired: string;\n\topt"
},
{
"path": "compat/test/ts/react-default.tsx",
"chars": 115,
"preview": "import React from '../../src';\nclass ReactIsh extends React.Component {\n\trender() {\n\t\treturn <div>Text</div>;\n\t}\n}\n"
},
{
"path": "compat/test/ts/react-star.tsx",
"chars": 154,
"preview": "// import React from '../../src';\nimport * as React from '../../src';\nclass ReactIsh extends React.Component {\n\trender()"
},
{
"path": "compat/test/ts/scheduler.ts",
"chars": 564,
"preview": "import {\n\tunstable_runWithPriority,\n\tunstable_NormalPriority,\n\tunstable_LowPriority,\n\tunstable_IdlePriority,\n\tunstable_U"
},
{
"path": "compat/test/ts/suspense.tsx",
"chars": 1153,
"preview": "import * as React from '../../src';\n\ninterface LazyProps {\n\tisProp: boolean;\n}\n\nconst IsLazyFunctional = (props: LazyPro"
},
{
"path": "compat/test/ts/tsconfig.json",
"chars": 387,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es6\",\n \"module\": \"es6\",\n \"moduleResolution\": \"node\",\n \"lib\": [\"es6\", \"d"
},
{
"path": "compat/test/ts/utils.ts",
"chars": 111,
"preview": "/**\n * Assert the parameter is of a specific type.\n */\nexport const expectType = <T>(_: T): void => undefined;\n"
},
{
"path": "compat/test-utils.js",
"chars": 47,
"preview": "module.exports = require('preact/test-utils');\n"
},
{
"path": "compat/test-utils.mjs",
"chars": 35,
"preview": "export * from 'preact/test-utils';\n"
},
{
"path": "config/compat-entries.js",
"chars": 637,
"preview": "const path = require('path');\nconst fs = require('fs');\nconst kl = require('kolorist');\n\nconst pkgFiles = new Set(requir"
},
{
"path": "debug/LICENSE",
"chars": 1087,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2015-present Jason Miller\n\nPermission is hereby granted, free of charge, to any per"
},
{
"path": "debug/mangle.json",
"chars": 684,
"preview": "{\n \"help\": {\n \"what is this file?\": \"It controls protected/private property mangling so that minified builds have co"
},
{
"path": "debug/package.json",
"chars": 403,
"preview": "{\n \"name\": \"preact-debug\",\n \"amdName\": \"preactDebug\",\n \"private\": true,\n \"description\": \"Preact extensions for devel"
},
{
"path": "debug/src/check-props.js",
"chars": 1371,
"preview": "const ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';\n\nlet loggedTypeFailures = {};\n\n/**\n * Reset"
},
{
"path": "debug/src/component-stack.js",
"chars": 4047,
"preview": "import { options, Fragment } from 'preact';\n\n/**\n * Get human readable name of the component/dom node\n *\n * @param {impo"
},
{
"path": "debug/src/constants.js",
"chars": 105,
"preview": "export const ELEMENT_NODE = 1;\nexport const DOCUMENT_NODE = 9;\nexport const DOCUMENT_FRAGMENT_NODE = 11;\n"
},
{
"path": "debug/src/debug.js",
"chars": 17334,
"preview": "import { checkPropTypes } from './check-props';\nimport { options, Component } from 'preact';\nimport {\n\tELEMENT_NODE,\n\tDO"
},
{
"path": "debug/src/index.d.ts",
"chars": 893,
"preview": "import { VNode } from '../../src/index';\n\n/**\n * Return the component stack that was captured up to this point.\n */\nexpo"
},
{
"path": "debug/src/index.js",
"chars": 259,
"preview": "import { initDebug } from './debug';\nimport 'preact/devtools';\n\ninitDebug();\n\nexport { resetPropWarnings } from './check"
},
{
"path": "debug/src/internal.d.ts",
"chars": 2302,
"preview": "import { Component, PreactElement, VNode, Options } from '../../src/internal';\n\nexport { Component, PreactElement, VNode"
},
{
"path": "debug/src/util.js",
"chars": 96,
"preview": "export const assign = Object.assign;\n\nexport function isNaN(value) {\n\treturn value !== value;\n}\n"
},
{
"path": "debug/test/browser/component-stack-2.test.jsx",
"chars": 1236,
"preview": "import { createElement, render, Component } from 'preact';\nimport 'preact/debug';\nimport { setupScratch, teardown } from"
},
{
"path": "debug/test/browser/component-stack.test.jsx",
"chars": 2088,
"preview": "import { createElement, render, Component } from 'preact';\nimport 'preact/debug';\nimport { vi } from 'vitest';\nimport { "
},
{
"path": "debug/test/browser/debug-compat.test.jsx",
"chars": 2032,
"preview": "import { createElement, render, createRef } from 'preact';\nimport { setupScratch, teardown } from '../../../test/_util/h"
},
{
"path": "debug/test/browser/debug-hooks.test.jsx",
"chars": 2510,
"preview": "import { createElement, render, Component } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport 'p"
},
{
"path": "debug/test/browser/debug-suspense.test.jsx",
"chars": 5006,
"preview": "import { createElement, render, lazy, Suspense } from 'preact/compat';\nimport 'preact/debug';\nimport { setupRerender } f"
},
{
"path": "debug/test/browser/debug.options.test.jsx",
"chars": 3038,
"preview": "import {\n\tvnodeSpy,\n\trootSpy,\n\tbeforeDiffSpy,\n\thookSpy,\n\tafterDiffSpy,\n\tcatchErrorSpy\n} from '../../../test/_util/option"
},
{
"path": "debug/test/browser/debug.test.jsx",
"chars": 19562,
"preview": "import {\n\tcreateElement,\n\trender,\n\tcreateRef,\n\tComponent,\n\tFragment,\n\thydrate\n} from 'preact';\nimport { useState } from "
},
{
"path": "debug/test/browser/fakeDevTools.js",
"chars": 56,
"preview": "window.__PREACT_DEVTOOLS__ = { attachPreact: vi.fn() };\n"
},
{
"path": "debug/test/browser/prop-types.test.js",
"chars": 3344,
"preview": "import { createElement, render } from 'preact';\nimport {\n\tsetupScratch,\n\tteardown,\n\tserializeHtml\n} from '../../../test/"
},
{
"path": "debug/test/browser/serializeVNode.test.jsx",
"chars": 1693,
"preview": "import { createElement, Component } from 'preact';\nimport { serializeVNode } from '../../src/debug';\n\ndescribe('serializ"
},
{
"path": "debug/test/browser/validateHookArgs.test.jsx",
"chars": 2178,
"preview": "import { createElement, render, createRef } from 'preact';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseCallbac"
},
{
"path": "demo/contenteditable.jsx",
"chars": 521,
"preview": "import { useState } from 'preact/hooks';\n\nexport default function Contenteditable() {\n\tconst [value, setValue] = useStat"
},
{
"path": "demo/context.jsx",
"chars": 1272,
"preview": "// eslint-disable-next-line no-unused-vars\nimport { Component, createContext } from 'preact';\nconst { Provider, Consumer"
},
{
"path": "demo/devtools.jsx",
"chars": 640,
"preview": "import { Component, memo, Suspense, lazy } from 'react';\n\nfunction Foo() {\n\treturn <div>I'm memoed</div>;\n}\n\nfunction La"
},
{
"path": "demo/fragments.jsx",
"chars": 456,
"preview": "import { Component } from 'preact';\n\nexport default class FragmentComp extends Component {\n\tstate = { number: 0 };\n\n\tcom"
},
{
"path": "demo/index.html",
"chars": 340,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite."
},
{
"path": "demo/index.jsx",
"chars": 5603,
"preview": "import { render, Component, Fragment } from 'preact';\n// import renderToString from 'preact-render-to-string';\nimport '."
},
{
"path": "demo/key_bug.jsx",
"chars": 571,
"preview": "import { Component } from 'preact';\n\nfunction Foo(props) {\n\treturn <div>This is: {props.children}</div>;\n}\n\nexport defau"
},
{
"path": "demo/list.jsx",
"chars": 1436,
"preview": "import { h, render } from 'preact';\nimport htm from 'htm';\nimport './style.css';\n\nconst html = htm.bind(h);\nconst create"
},
{
"path": "demo/logger.jsx",
"chars": 4126,
"preview": "export default function logger(logStats, logConsole) {\n\tif (!logStats && !logConsole) {\n\t\treturn;\n\t}\n\n\tconst consoleBuff"
},
{
"path": "demo/mobx.jsx",
"chars": 1373,
"preview": "import React, { forwardRef, useRef, useState } from 'react';\nimport { decorate, observable } from 'mobx';\nimport { obser"
},
{
"path": "demo/nested-suspense/addnewcomponent.jsx",
"chars": 162,
"preview": "import { createElement } from 'react';\n\nexport default function AddNewComponent({ appearance }) {\n\treturn <div>AddNewCom"
},
{
"path": "demo/nested-suspense/component-container.jsx",
"chars": 390,
"preview": "import { lazy } from 'react';\n\nconst pause = timeout =>\n\tnew Promise(d => setTimeout(d, timeout), console.log(timeout));"
},
{
"path": "demo/nested-suspense/dropzone.jsx",
"chars": 148,
"preview": "import { createElement } from 'react';\n\nexport default function DropZone({ appearance }) {\n\treturn <div>DropZone (compon"
},
{
"path": "demo/nested-suspense/editor.jsx",
"chars": 139,
"preview": "import { createElement } from 'react';\n\nexport default function Editor({ children }) {\n\treturn <div className=\"Editor\">{"
},
{
"path": "demo/nested-suspense/index.jsx",
"chars": 1702,
"preview": "import { createElement, Suspense, lazy, Component } from 'react';\n\nconst Loading = function () {\n\treturn <div>Loading..."
},
{
"path": "demo/nested-suspense/subcomponent.jsx",
"chars": 140,
"preview": "import { createElement } from 'react';\n\nexport default function SubComponent({ onClick }) {\n\treturn <div>Lazy loaded sub"
},
{
"path": "demo/old.js.bak",
"chars": 2215,
"preview": "\n// function createRoot(title) {\n// \tlet div = document.createElement('div');\n// \tlet h2 = document.createElement('h2');"
},
{
"path": "demo/package.json",
"chars": 878,
"preview": "{\n \"name\": \"demo\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"vite\",\n \"dev\": \"vite\",\n \"build\": \"vite buil"
},
{
"path": "demo/people/Readme.md",
"chars": 270,
"preview": "# People demo page\n\nThis section of our demo was originally made by [phaux](https://github.com/phaux) in the [web-app-bo"
},
{
"path": "demo/people/index.tsx",
"chars": 1422,
"preview": "import { observer } from 'mobx-react';\nimport { Component } from 'preact';\nimport { Profile } from './profile';\nimport {"
},
{
"path": "demo/people/profile.tsx",
"chars": 1286,
"preview": "import { computed, observable } from 'mobx';\nimport { observer } from 'mobx-react';\nimport { Component } from 'preact';\n"
},
{
"path": "demo/people/router.tsx",
"chars": 3898,
"preview": "import {\n\tComponentChild,\n\tComponentFactory,\n\tcreateContext,\n\tFunctionalComponent,\n\th,\n\tJSX\n} from 'preact';\nimport {\n\tu"
},
{
"path": "demo/people/store.ts",
"chars": 2236,
"preview": "import { flow, Instance, types } from 'mobx-state-tree';\n\nconst cmp =\n\t<T, U>(fn: (x: T) => U) =>\n\t(a: T, b: T): number "
},
{
"path": "demo/people/styles/animations.scss",
"chars": 431,
"preview": "@keyframes popup {\n\tfrom {\n\t\tbox-shadow: 0 0 0 black;\n\t\topacity: 0;\n\t\ttransform: scale(0.9);\n\t}\n\tto {\n\t\tbox-shadow: 0 30"
},
{
"path": "demo/people/styles/app.scss",
"chars": 1836,
"preview": "#people-app {\n\tposition: relative;\n\toverflow: hidden;\n\tmin-height: 100vh;\n\tanimation: popup 300ms cubic-bezier(0.3, 0.7,"
},
{
"path": "demo/people/styles/avatar.scss",
"chars": 416,
"preview": "#people-app {\n\t.avatar {\n\t\tdisplay: inline-block;\n\t\toverflow: hidden;\n\t\twidth: var(--avatar-size, 32px);\n\t\theight: var(-"
},
{
"path": "demo/people/styles/button.scss",
"chars": 2230,
"preview": "#people-app {\n\tbutton {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t\tmin-width: 36px;\n\t\theight: 36px;\n\t\tpadding: 0 16px;\n"
},
{
"path": "demo/people/styles/index.scss",
"chars": 3953,
"preview": "@import 'app.scss';\n@import 'animations.scss';\n@import 'avatar.scss';\n@import 'profile.scss';\n@import 'button.scss';\n\n//"
},
{
"path": "demo/people/styles/profile.scss",
"chars": 403,
"preview": "#people-app {\n\t.profile {\n\t\tdisplay: flex;\n\t\tflex-flow: column;\n\t\talign-items: center;\n\t\tmargin: 32px 0;\n\t\tanimation: ap"
},
{
"path": "demo/preact.jsx",
"chars": 945,
"preview": "import {\n\toptions,\n\tcreateElement,\n\tcloneElement,\n\tComponent as CevicheComponent,\n\trender\n} from 'preact';\n\noptions.vnod"
},
{
"path": "demo/profiler.jsx",
"chars": 1604,
"preview": "import { createElement, Component, options } from 'preact';\n\nfunction getPrimes(max) {\n\tlet sieve = [],\n\t\ti,\n\t\tj,\n\t\tprim"
},
{
"path": "demo/pythagoras/index.jsx",
"chars": 1660,
"preview": "import { Component } from 'preact';\nimport { select as d3select, mouse as d3mouse } from 'd3-selection';\nimport { scaleL"
},
{
"path": "demo/pythagoras/pythagoras.jsx",
"chars": 1638,
"preview": "import { interpolateViridis } from 'd3-scale';\n\nMath.deg = function (radians) {\n\treturn radians * (180 / Math.PI);\n};\n\nc"
},
{
"path": "demo/redux-toolkit.jsx",
"chars": 1259,
"preview": "import { createElement } from 'preact';\nimport { Provider, useSelector } from 'react-redux';\nimport { configureStore, cr"
},
{
"path": "demo/redux.jsx",
"chars": 1115,
"preview": "import { createElement } from 'preact';\nimport React from 'react';\nimport { createStore } from 'redux';\nimport { connect"
},
{
"path": "demo/reduxUpdate.jsx",
"chars": 1364,
"preview": "import { createElement, Component } from 'preact';\nimport { connect, Provider } from 'react-redux';\nimport { createStore"
},
{
"path": "demo/reorder.jsx",
"chars": 2314,
"preview": "import { createElement, Component } from 'preact';\n\nfunction createItems(count = 10) {\n\tlet items = [];\n\tfor (let i = 0;"
},
{
"path": "demo/spiral.jsx",
"chars": 3257,
"preview": "import { createElement, Component } from 'preact';\n\nconst COUNT = 500;\nconst LOOPS = 6;\n\n// Component.debounce = request"
},
{
"path": "demo/stateOrderBug.jsx",
"chars": 1551,
"preview": "import htm from 'htm';\nimport { h } from 'preact';\nimport { useState, useCallback } from 'preact/hooks';\n\nconst html = h"
},
{
"path": "demo/style.css",
"chars": 356,
"preview": "html,\nbody {\n\tfont:\n\t\t14px system-ui,\n\t\tsans-serif;\n}\n.list {\n\tlist-style: none;\n\tpadding: 0;\n}\n.list > li {\n\tposition: "
},
{
"path": "demo/style.scss",
"chars": 2353,
"preview": "html,\nbody {\n\theight: 100%;\n\tmargin: 0;\n\tbackground: #eee;\n\tfont: 400 16px/1.3 'Helvetica Neue', helvetica, sans-serif;\n"
},
{
"path": "demo/styled-components.jsx",
"chars": 577,
"preview": "import { createElement } from 'preact';\nimport styled, { css } from 'styled-components';\n\nconst Button = styled.button`\n"
},
{
"path": "demo/suspense-router/bye.jsx",
"chars": 147,
"preview": "import { Link } from './simple-router';\n\nexport default function Bye() {\n\treturn (\n\t\t<div>\n\t\t\tBye! <Link to=\"/\">Go to He"
},
{
"path": "demo/suspense-router/hello.jsx",
"chars": 152,
"preview": "import { Link } from './simple-router';\n\nexport default function Hello() {\n\treturn (\n\t\t<div>\n\t\t\tHello! <Link to=\"/bye\">G"
},
{
"path": "demo/suspense-router/index.jsx",
"chars": 598,
"preview": "import { Suspense, lazy } from 'react';\n\nimport { Router, Route, Switch } from './simple-router';\n\nlet Hello = lazy(() ="
},
{
"path": "demo/suspense-router/simple-router.jsx",
"chars": 1748,
"preview": "import {\n\tcreateContext,\n\tuseState,\n\tuseContext,\n\tChildren,\n\tuseLayoutEffect\n} from 'react';\n\nconst memoryHistory = {\n\t/"
},
{
"path": "demo/suspense.jsx",
"chars": 1765,
"preview": "// eslint-disable-next-line no-unused-vars\nimport {\n\tcreateElement,\n\tComponent,\n\tmemo,\n\tFragment,\n\tSuspense,\n\tlazy\n} fro"
},
{
"path": "demo/textFields.jsx",
"chars": 679,
"preview": "import React, { useState } from 'react';\nimport TextField from '@material-ui/core/TextField';\n\nconst PatchedTextField = "
},
{
"path": "demo/todo.jsx",
"chars": 1052,
"preview": "import { createElement, Component } from 'preact';\n\nlet counter = 0;\n\nexport default class TodoList extends Component {\n"
},
{
"path": "demo/tsconfig.json",
"chars": 316,
"preview": "{\n \"compilerOptions\": {\n \"experimentalDecorators\": true,\n \"jsx\": \"react\",\n \"jsxFactory\": \"h\",\n \"baseUrl\": \""
},
{
"path": "demo/vite.config.js",
"chars": 1127,
"preview": "import { defineConfig } from 'vite';\nimport path from 'node:path';\n\nconst root = path.join(__dirname, '..');\nconst resol"
},
{
"path": "demo/zustand.jsx",
"chars": 1236,
"preview": "import { createElement } from 'preact';\nimport create from 'zustand';\n\nconst useStore = create(set => ({\n\tvalue: 0,\n\ttex"
},
{
"path": "devtools/LICENSE",
"chars": 1087,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2015-present Jason Miller\n\nPermission is hereby granted, free of charge, to any per"
},
{
"path": "devtools/mangle.json",
"chars": 684,
"preview": "{\n \"help\": {\n \"what is this file?\": \"It controls protected/private property mangling so that minified builds have co"
},
{
"path": "devtools/package.json",
"chars": 367,
"preview": "{\n \"name\": \"preact-devtools\",\n \"amdName\": \"preactDevtools\",\n \"private\": true,\n \"description\": \"Preact bridge for Pre"
},
{
"path": "devtools/src/devtools.js",
"chars": 432,
"preview": "import { Component, Fragment, options } from 'preact';\n\nexport function initDevTools() {\n\tconst globalVar =\n\t\ttypeof glo"
},
{
"path": "devtools/src/index.d.ts",
"chars": 233,
"preview": "/**\n * Customize the displayed name of a useState, useReducer or useRef hook\n * in the devtools panel.\n *\n * @param valu"
},
{
"path": "devtools/src/index.js",
"chars": 336,
"preview": "import { options } from 'preact';\nimport { initDevTools } from './devtools';\n\ninitDevTools();\n\n/**\n * Display a custom l"
},
{
"path": "devtools/test/browser/addHookName.test.jsx",
"chars": 1085,
"preview": "import { createElement, render, options } from 'preact';\nimport { setupScratch, teardown } from '../../../test/_util/hel"
},
{
"path": "hooks/LICENSE",
"chars": 1087,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2015-present Jason Miller\n\nPermission is hereby granted, free of charge, to any per"
},
{
"path": "hooks/mangle.json",
"chars": 684,
"preview": "{\n \"help\": {\n \"what is this file?\": \"It controls protected/private property mangling so that minified builds have co"
},
{
"path": "hooks/package.json",
"chars": 377,
"preview": "{\n \"name\": \"preact-hooks\",\n \"amdName\": \"preactHooks\",\n \"private\": true,\n \"description\": \"Hook addon for Preact\",\n \""
},
{
"path": "hooks/src/index.d.ts",
"chars": 5520,
"preview": "import { ErrorInfo, PreactContext, Ref, RefObject } from '../../src/index';\n\ntype Inputs = ReadonlyArray<unknown>;\n\nexpo"
},
{
"path": "hooks/src/index.js",
"chars": 15350,
"preview": "import { options as _options } from 'preact';\nimport { COMPONENT_FORCE } from '../../src/constants';\n\nconst ObjectIs = O"
},
{
"path": "hooks/src/internal.d.ts",
"chars": 2801,
"preview": "import {\n\tOptions as PreactOptions,\n\tComponent as PreactComponent,\n\tVNode as PreactVNode,\n\tPreactContext,\n\tHookType,\n\tEr"
},
{
"path": "hooks/test/_util/useEffectUtil.js",
"chars": 186,
"preview": "export function scheduleEffectAssert(assertFn) {\n\treturn new Promise(resolve => {\n\t\trequestAnimationFrame(() =>\n\t\t\tsetTi"
},
{
"path": "hooks/test/browser/combinations.test.jsx",
"chars": 12450,
"preview": "import { setupRerender, act } from 'preact/test-utils';\nimport { createElement, render, Component, createContext } from "
},
{
"path": "hooks/test/browser/componentDidCatch.test.jsx",
"chars": 1143,
"preview": "import { createElement, render, Component } from 'preact';\nimport { act } from 'preact/test-utils';\nimport { setupScratc"
},
{
"path": "hooks/test/browser/errorBoundary.test.jsx",
"chars": 5495,
"preview": "import { Fragment, createElement, render } from 'preact';\nimport { setupScratch, teardown } from '../../../test/_util/he"
},
{
"path": "hooks/test/browser/hooks.options.test.jsx",
"chars": 3176,
"preview": "import {\n\tafterDiffSpy,\n\tbeforeRenderSpy,\n\tunmountSpy,\n\thookSpy\n} from '../../../test/_util/optionSpies';\n\nimport { setu"
},
{
"path": "hooks/test/browser/useCallback.test.jsx",
"chars": 946,
"preview": "import { createElement, render } from 'preact';\nimport { setupScratch, teardown } from '../../../test/_util/helpers';\nim"
},
{
"path": "hooks/test/browser/useContext.test.jsx",
"chars": 8333,
"preview": "import { createElement, render, createContext, Component } from 'preact';\nimport { act } from 'preact/test-utils';\nimpor"
},
{
"path": "hooks/test/browser/useDebugValue.test.jsx",
"chars": 1445,
"preview": "import { createElement, render, options } from 'preact';\nimport { setupScratch, teardown } from '../../../test/_util/hel"
},
{
"path": "hooks/test/browser/useEffect.test.jsx",
"chars": 14913,
"preview": "import { Component, Fragment, createElement, render } from 'preact';\nimport { useEffect, useRef, useState } from 'preact"
},
{
"path": "hooks/test/browser/useEffectAssertions.jsx",
"chars": 4027,
"preview": "import { setupRerender } from 'preact/test-utils';\nimport { createElement, render } from 'preact';\nimport { setupScratch"
},
{
"path": "hooks/test/browser/useId.test.jsx",
"chars": 9814,
"preview": "import { createElement, Fragment, hydrate, render } from 'preact';\nimport { useId, useReducer, useState } from 'preact/h"
},
{
"path": "hooks/test/browser/useImperativeHandle.test.jsx",
"chars": 5818,
"preview": "import { createElement, render } from 'preact';\nimport { setupScratch, teardown } from '../../../test/_util/helpers';\nim"
},
{
"path": "hooks/test/browser/useLayoutEffect.test.jsx",
"chars": 11237,
"preview": "import { act } from 'preact/test-utils';\nimport { createElement, render, Fragment, Component } from 'preact';\nimport {\n\t"
},
{
"path": "hooks/test/browser/useMemo.test.jsx",
"chars": 4945,
"preview": "import { createElement, render } from 'preact';\nimport { setupScratch, teardown } from '../../../test/_util/helpers';\nim"
},
{
"path": "hooks/test/browser/useReducer.test.jsx",
"chars": 4795,
"preview": "import { setupRerender, act } from 'preact/test-utils';\nimport { createElement, render, createContext } from 'preact';\ni"
},
{
"path": "hooks/test/browser/useRef.test.jsx",
"chars": 907,
"preview": "import { createElement, render } from 'preact';\nimport { setupScratch, teardown } from '../../../test/_util/helpers';\nim"
}
]
// ... and 95 more files (download for full content)
About this extraction
This page contains the full source code of the preactjs/preact GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 295 files (1.3 MB), approximately 394.6k tokens, and a symbol index with 2545 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.