docs: fill in Preact Installation doc instead of deriving from React #10111
Conversation
|
github-actions
bot
added
the
documentation
📝 WalkthroughWalkthroughThe installation documentation for Preact is updated from a redirect placeholder to comprehensive installation guidance, providing detailed package manager commands, CDN options, browser compatibility notes, and tool recommendations. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@docs/framework/preact/installation.md`:
- Line 10: Change the section headings that currently use "###" to "##" so they
are proper h2 children of the main h1; update each affected heading (e.g., the
"NPM" heading and the other section headings referenced in the review) from "###
..." to "## ..." to restore correct document hierarchy and accessibility; ensure
any adjacent subheadings that should remain h3 keep "###".
- Line 49: Replace the non-descriptive link text "here" in the sentence "You can
find instructions on how to use Preact without JSX here" with a descriptive
phrase (e.g., "instructions for using Preact without JSX" or "Preact no-build
workflows") so the link text explains the destination; update the markdown line
containing that link to use the chosen descriptive text while keeping the URL
https://preactjs.com/guide/v10/no-build-workflows unchanged.
- Around line 55-62: Add a language identifier to the fenced code block that
lists browser compatibility so it renders correctly; locate the fenced block
containing the lines "Chrome >= 91", "Firefox >= 90", etc., in the installation
docs and change the opening triple backticks to include a language (e.g., use
```text) to ensure proper syntax highlighting and documentation rendering.
🧹 Nitpick comments (1)
docs/framework/preact/installation.md (1)
36-36: Consider more formal phrasing.The word "Wanna" is informal. For consistency with technical documentation standards, consider "Want to" instead, though the friendly tone may be intentional.
✍️ Suggested rephrasing
-> Wanna give it a spin before you download? Try out the [simple](./examples/simple) or [basic](./examples/basic) examples! +> Want to give it a spin before you download? Try out the [simple](./examples/simple) or [basic](./examples/basic) examples!
| or a good ol' `<script>` via | ||
| [ESM.sh](https://esm.sh/). | ||
|
|
||
| ### NPM |
There was a problem hiding this comment.
Fix heading levels to follow proper hierarchy.
All section headings use ### (h3) but should use ## (h2) since they are direct children of the h1 title. This violates proper document structure and affects accessibility.
📝 Proposed fix for heading levels
-### NPM
+## NPM-### CDN
+## CDN-### Requirements
+## Requirements-### Recommendations
+## RecommendationsAlso applies to: 38-38, 51-51, 66-66
🧰 Tools
🪛 markdownlint-cli2 (0.20.0)
[warning] 10-10: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3
(MD001, heading-increment)
🤖 Prompt for AI Agents
In `@docs/framework/preact/installation.md` at line 10, Change the section
headings that currently use "###" to "##" so they are proper h2 children of the
main h1; update each affected heading (e.g., the "NPM" heading and the other
section headings referenced in the review) from "### ..." to "## ..." to restore
correct document hierarchy and accessibility; ensure any adjacent subheadings
that should remain h3 keep "###".
| </script> | ||
| ``` | ||
|
|
||
| > You can find instructions on how to use Preact without JSX [here](https://preactjs.com/guide/v10/no-build-workflows). |
There was a problem hiding this comment.
Replace non-descriptive link text for accessibility.
Using "here" as link text is not descriptive and harms accessibility. Screen reader users and others benefit from descriptive link text that explains the destination.
♿ Proposed fix for descriptive link text
-> You can find instructions on how to use Preact without JSX [here](https://preactjs.com/guide/v10/no-build-workflows).
+> You can find instructions on how to use Preact without JSX in [Preact's no-build workflows guide](https://preactjs.com/guide/v10/no-build-workflows).📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| > You can find instructions on how to use Preact without JSX [here](https://preactjs.com/guide/v10/no-build-workflows). | |
| > You can find instructions on how to use Preact without JSX in [Preact's no-build workflows guide](https://preactjs.com/guide/v10/no-build-workflows). |
🧰 Tools
🪛 markdownlint-cli2 (0.20.0)
[warning] 49-49: Link text should be descriptive
(MD059, descriptive-link-text)
🤖 Prompt for AI Agents
In `@docs/framework/preact/installation.md` at line 49, Replace the
non-descriptive link text "here" in the sentence "You can find instructions on
how to use Preact without JSX here" with a descriptive phrase (e.g.,
"instructions for using Preact without JSX" or "Preact no-build workflows") so
the link text explains the destination; update the markdown line containing that
link to use the chosen descriptive text while keeping the URL
https://preactjs.com/guide/v10/no-build-workflows unchanged.
| ``` | ||
| Chrome >= 91 | ||
| Firefox >= 90 | ||
| Edge >= 91 | ||
| Safari >= 15 | ||
| iOS >= 15 | ||
| Opera >= 77 | ||
| ``` |
There was a problem hiding this comment.
Specify language for code block.
The fenced code block containing browser compatibility information should have a language specified for proper rendering and documentation standards.
🔧 Proposed fix to add language identifier
-```
+```text
Chrome >= 91
Firefox >= 90
Edge >= 91📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ``` | |
| Chrome >= 91 | |
| Firefox >= 90 | |
| Edge >= 91 | |
| Safari >= 15 | |
| iOS >= 15 | |
| Opera >= 77 | |
| ``` |
🧰 Tools
🪛 markdownlint-cli2 (0.20.0)
[warning] 55-55: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🤖 Prompt for AI Agents
In `@docs/framework/preact/installation.md` around lines 55 - 62, Add a language
identifier to the fenced code block that lists browser compatibility so it
renders correctly; locate the fenced block containing the lines "Chrome >= 91",
"Firefox >= 90", etc., in the installation docs and change the opening triple
backticks to include a language (e.g., use ```text) to ensure proper syntax
highlighting and documentation rendering.
|
instead of overwriting the whole page, I think the better fix is to create a compatibility segement: in the react docs, and then overwrite that segment with whatever you think is appropriate in preact. You can also overwrite it with nothing if you want to leave out that paragraph for preact like so: e.g. vue does this here: query/docs/framework/vue/graphql.md Lines 8 to 9 in 9739c8d |
|
I think patching existing docs, rather than copy/pasting & tweaking, is how you get this sort of wrong information published & reduces doc quality. Would be very easy for someone to add a new ReactDOM reference in a section the Preact docs inherit and have issues come up again. Feel free to push changes to this PR or just close it out though, I probably won't be making further changes. |
2 participants
🎯 Changes
Docs, copied the "Installation" page from React & edited it w/ Preact info as just swapping "React" for "Preact" leads to some egregiously incorrect info:
There is no Preact 18, no PreactDOM or Preact Native, for example.
Other pages will probably also need corrections but none stood out as much as this.
✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit