preact · Preact Docs
Upgrading from Preact 8.x
A guide for migrating applications from Preact 8.x to Preact X, covering dependency updates, removal of preact-compat, and code adjustments for breaking changes like VNode shape and props.children behavior.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
Upgrading from Preact 8.x
A guide for migrating applications from Preact 8.x to Preact X, covering dependency updates, removal of preact-compat, and code adjustments for breaking changes like VNode shape and props.children behavior.
When To Use
Use when migrating an existing Preact 8.x application to Preact X to ensure dependencies are correctly updated and breaking API changes are addressed in the source code.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/preact-upgrading-from-8-x-workflow-guide.md | A guide detailing the essential changes, component differences, and testing updates required when migrating from Preact 8.x to newer versions. | Questions about a guide detailing the essential changes, component differences, and testing updates required when migrating from Prea... |
examples/preact-upgrading-from-8-x-preact-upgrade-guide-npm-install-command.text | The npm install command required to upgrade a project to Preact 10 from version 8.x. | Exact payloads, commands, or snippets shown in The npm install command required to upgrade a project to Preact 10 from version 8.x. |
examples/preact-upgrading-from-8-x-preact-upgrade-guide-v10-npm-remove-compat.text | A text snippet demonstrating the command to remove preact-compat when upgrading from Preact 8.x to 10.x. | Exact payloads, commands, or snippets shown in A text snippet demonstrating the command to remove preact-compat when upgrading from Preact 8.x to 10.x. |
examples/preact-upgrading-from-8-x-preact-upgrade-guide-8x-to-x-named-exports-com.text | A comparison showing the transition from Preact 8.x syntax to the preferred named exports used in newer versions. | Exact payloads, commands, or snippets shown in A comparison showing the transition from Preact 8.x syntax to the preferred named exports used in newer versions. |
examples/preact-upgrading-from-8-x-preact-8-to-10-upgrade-markup-render-compariso.text | A text comparison showing the difference in DOM output when using multiple render calls in Preact 8.x versus newer versions. | Exact payloads, commands, or snippets shown in A text comparison showing the difference in DOM output when using multiple render calls in Preact 8.x versus newer ve... |
examples/preact-upgrading-from-8-x-preact-8-to-10-upgrade-render-api-comparison.text | A text comparison showing the transition from the Preact 8.x render function syntax to the updated version. | Exact payloads, commands, or snippets shown in A text comparison showing the transition from the Preact 8.x render function syntax to the updated version. |
examples/preact-upgrading-from-8-x-preact-v8-to-v10-upgrade-markup-render-compari.text | A text comparison showing the difference between Preact 8.x render calls and the expected output after upgrading to Preact 10. | Exact payloads, commands, or snippets shown in A text comparison showing the difference between Preact 8.x render calls and the expected output after upgrading to P... |
examples/preact-upgrading-from-8-x-preact-upgrade-guide-8x-to-10x-props-children-.text | A code comparison demonstrating how to use toChildArray to safely access the length of props.children when upgrading from Preact 8.x to 10.x. | Exact payloads, commands, or snippets shown in A code comparison demonstrating how to use toChildArray to safely access the length of props.children when upgrading... |
examples/preact-upgrading-from-8-x-preact-8-to-10-state-update-syntax-migration.text | A comparison showing the transition from Preact 8.x setState syntax to the Preact 10 functional state update pattern. | Exact payloads, commands, or snippets shown in A comparison showing the transition from Preact 8.x setState syntax to the Preact 10 functional state update pattern. |
examples/preact-upgrading-from-8-x-preact-upgrade-guide-dangerouslysetinnerhtml.text | A text example demonstrating the use of dangerouslySetInnerHTML when upgrading from Preact 8.x to 10.x. | Exact payloads, commands, or snippets shown in A text example demonstrating the use of dangerouslySetInnerHTML when upgrading from Preact 8.x to 10.x. |
examples/preact-upgrading-from-8-x-preact-8-to-10-upgrade-syntax-comparison.text | A text comparison showing the differences in console output for component structures between Preact 8.x and Preact 10. | Exact payloads, commands, or snippets shown in A text comparison showing the differences in console output for component structures between Preact 8.x and Preact 10. |
What This Skill Covers
- Guide Version: 11.x (preview) 10.x (current) 8.x
- Main sections:
Introduction,Essentials,Debug & Test,Advanced,Libraries.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://preactjs.com/guide/v10/upgrade-guide