:book: Preact documentation website.
Home Page: https://preactjs.com
License: MIT License
🚀
masteris automatically deployed to preactjs.com
We have a Slack community where you can chat with the Preact team and the wider Preact community. Come stop by to get support, ask questions, or just to introduce yourself!
If something doesn't look quite right, or maybe the wording is confusing, please let us know by opening an issue!
Check out the Contributing Guide for information on how to contribute to the site and work on it locally.
![size-plugin[bot] avatar](https://avatars.githubusercontent.com/in/34840?v=4 "size-plugin[bot]")
The Linked State page talks about the linkState() method as "a method on the Component class". However, Preact 8 removes linkState(), and so this page should be updated to point at the standalone module.
When the documentation website loads, the language pack is set by calling into a library file.
The handling is currently blindly adhering the browser values and doesn't account for regional fallbacks. It yields me the french website, whereas my browser is set to English (Great Britain / United Kingdom). If anything, I expected to get the English website.
> navigator.languages
> (9) ["en-GB", "nl-NL", "nl", "fr-BE", "fr", "de-DE", "de", "en-US", "en"]
> navigator.language
> "en-GB"All you'd have to do is fallback to a language code without a region:
const lang = String(langs[i]).toLowerCase();
if (available[lang]) return lang;
const withoutRegionLang = lang.slice(0, 2);
if (available[withoutRegionLang]) return withoutRegionLang;Naturally the other way is to "change your browser settings" but let's not forget that there are plenty of instances where you can't change the settings. If my primary language is (a variant) of German, and there is a generic German translation, I'd probably want to get the German generic variant instead of a second, third or lower preference, generic language.
https://preactjs.com/guide/differences-to-react mentions that an Object can be used as a class for an element and it will use the truthy keys to form the class name. This was dropped in preact v8. preactjs/preact#401
The website is mentioning it wrong.
I'm in the progress of trying out Preact for the first time, and I ran into a little quirk on your website: if I scroll halfway down the homepage and then head to another page using the top nav bar or a link, that page will load pre-scrolled part of the way down.
Anyway, certainly not any disaster, but it's a little annoying to have to scroll back up before I start reading.
... you know, maybe I'll use this as my first Preact task and send you a PR if I can handle the framework.
The documentation for Preact.h()/Preact.createElement() is incorrect. It says:
All remaining arguments are collected into a children Array, and be any of the following:
- Scalar values
- More Virtual DOM elements
- Infinitely nested Arrays of the above
So according to the documentation I should be able to pass an infinitely nested array of virtual DOM elements. Well actually, this hangs the browser:
let children = [h('span')]
children.push(children)
preact.render(h('div', {}, children), document.body)
In https://preactjs.com/guide/differences-to-react, it may be useful to explain why constructors aren't explicitly used. The React docs highlight that
Class components should always call the base constructor with
props.
As suggested in preactjs/preact#585. Here's the list I came up with:
Promise only if available, falling back tosetTimeout(0)document.createElement() and document.createTextNode()Text.prototype.nodeValueText.prototype.splitText - simply needs to exist (used as fast "is text node" check)Element.prototype:
.attributes NodeList.setAttribute(), .getAttribute(), .removeAttribute().appendChild(), .insertBefore(), .replaceChild()If you use SVG, createElementNS() and (get|set|remove)AttributeNS() are used.
Although preact-cli is slowly gaining traction, we don't currently list it on preactjs.com 🙊
@developit It would be awesome to consider including the installation instructions for it with some preamble in the getting started page or the homepage if a more prominent entry point was useful 🤔
I also wonder if it makes sense for us to talk about how preact-cli helps get your PWAs kickstarted pretty 🚗 💨 over in the PWAs page https://preactjs.com/guide/progressive-web-apps
I often find myself going to the React docs when I forget an API. Would you be opposed to a PR that adds an "API" page with a list of function signatures and short description of each?
Just noticed the datepicker webpackbin demo on this page (https://github.com/developit/preact-www/blob/master/content/guide/external-dom-mutations.md) seems to be invalid now. Maybe they changed their URL structure?
https://github.com/developit/preact-www/blame/master/content/guide/external-dom-mutations.md#L72-L74
FYI It looks like webpackbin domain has expired was taken over by someone else.
Preact translations to spanish are in argentinian spanish, and it should be neutral spanish.
Usá Preact -- should be --> Usa Preact
La liviandad es mucho más divertida cuando no tenés que sacrificar productividad -- should be --> La liviandad es mucho más divertida cuando no tienes que sacrificar productividad
Elegí la guía que funciona mejor para vos! -- should be --> Elige la guía que funciona mejor para ti!
etc etc... it's annoying. I'm free to help you to fix translations.
Thanks.
Case in point:
Specifically, the doubly-nested square bracket seems to be breaking parsing and doesn't output the full HTML. The source Markdown file contains the correct code.
I've tried the latest marked parsing in https://runkit.com/npm/marked and it seems to work just fine with the code block, but I didn't have enough time to determine if highlight-js is the culprit. Or it might be some other processing module in the chain that causes that line to break.
In the issue #20 , the preventDefault() method was removed from the example. I think we should remove the following paragraph:
One last step is required: we want to override the browser's default behavior of toggling the checkbox automatically, so we need to call .preventDefault() on the event.
This is a very minor nit, but preact's docs navigate when you press cmd+click on macos. Normally the desired behavior is to open the link in a new tab without navigating away. It's a minor thing, but it's the those little things that make all the difference sometimes!
react-router's Link component gets this right, so I figured I'd share as a point of reference:
const isLeftClickEvent = (event) =>
event.button === 0
const isModifiedEvent = (event) =>
!!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
// ...
if (
!event.defaultPrevented && // onClick prevented default
!this.props.target && // let browser handle "target=_blank" etc.
!isModifiedEvent(event) &&
isLeftClickEvent(event)
) {
event.preventDefault()
this.handleTransition()
}After a brief conversation with @developit we came to the conclusion that this might be a good way to kick off a discussion about setting up community guidelines to help existing users and newcomers to make the best use of the resources available in the Preact ecosystem.
While the community has a very solid developer community on Slack with numerous projects and extensions on GitHub, the documentation side of things still leaves room for improvement. That may be partially attributed to unclear contribution guidelines apart from the classic "file a bug/fork on GitHub", and it is the easier problem to solve.
I'd like to kick off this discussion by outlining my proposal for short-term goals to address that problem:
Long-term, the preact website could serve as an index of all the repositories that are currently presented in the README along with guides and API docs (or at least links to their documentation). Many of the problems faced by preact users isn't necessarily an issue of API or documentation, but of paradigms and best practices, which currently have no particular place to be published or aggregated at (if published elsewhere). That way, we could index or host content that deals with issues that don't quite fit the documentation label.
Maybe even have showcases as a separate category somewhere? The sky is the limit, but let's focus on the initial steps first.
So, what do you think?
This page is misleading as a reader. The text mentions supporting Safari, Edge, and IE9+, but the browser matrix SVG that is shown doesn't seem to indicate that.
Hello!
I was searching for new UI libraries and found PreactJS..
But, while doing a research about the library, I found a few broken links in the section about performance, in the text: "It even includes extra performance features like customizable update batching, optional async rendering, DOM recycling and optimized event handling via Linked State.".
So..as this seems the repository that stores the code for the site - and as I not found any other references to this problem in other issues - , I am just leaving this issue here to reference for now.
Thanks and keep the good work. :)
i'd appretiate a double check in webpack.config.js. i'm not a seasoned webpacker and it seems it has this import / loader issues.
webpack.config.babel.js:1
(function (exports, require, module, __filename, __dirname) { import fs from 'fs';
^^^^^^
SyntaxError: Unexpected token import
Hey, I was playing around with using Preact to render mobile.twitter.com and came across a few issues related to the missing synthetic event system. I thought it might help if preact-compat had more documentation about the differences in this area. In particular: browser support / event inconsistencies, API differences from React, and functional changes.
For example, as far I can tell Preact neither supports React's *Capture events nor does it have a way to use the DOM's capture phase (without using DOM APIs directly).
There may also be relatively common React patterns that break down. We have some code a bit like this:
<input onChange={this._handleChange} value={this.state.value} />On switching to preact-compat, onChange was never called in response to keyboard input. Switching to onInput worked.
Another case relates to pressing on Tweets in timelines. When you click on anything in a Tweet that isn't a link or button we route to the Tweet's conversation timeline. In React, we could do all of this from within the Tweet's click handler because of the subtle differences between the DOM and Synthetic event systems.
Hi guys, i'm trying to build a blog with preact and would like to use the method used for preactjs.com to "fetch" content from markdown files on the /content folder.
I'd also like to have the blog post in github. that way i could add a new blog post without having to build the website everytime and would give the chance to users to make pull request to add or change info.
I've been lurking at the preact-www code and it's all there i guess, i just need to understand it better
Thanks,
Tiago
/cc @xtuc
lang from content/ into content/lang/fr/(Migrated from developit/preact@247)
@coiel said:
something wrong with CSS in Stable Google Chrome (no time for look deeper)
xialvjun/preact-flyd, a preact version of theadam/react-flyd
mark for myself
Hello Preact Community,
I've created the fork for the Arabic Translation, will PR soon !
Peace !
Hi!
I noticed that is hard to see the "Getting started" link in the homepage, I have checked it with Contrast radio tools as http://webaim.org/resources/contrastchecker/ giving me the next result:
As you can see it is really hard to see.
If we change the color to white the contrast radio improved:
, passing the Web Content Accessibility Guidelines
It would look like this in the actual website:
Normal state:
Hover state:
Would you accept a PR implementing this?
Thanks!
@developit Could you review this process?
Process:
I will translate docs with GitLocalize which is used in one of the Vue.js projects.
Since Preact strives to be mostly-compatible with React (which is a top feature – thanks!!), it would be terrific if the "differences to react" page documented the versions that the page is applicable to.
Preact's lean nature makes it a pretty viable candidate for devs building Progressive Web Apps to choose or switch out React for when shipping their production builds. The Preact site itself works great on 3G.
How would we feel about adding a one-page guide to shipping PWAs with Preact to the docs? 📚
I believe most of the content in the PWAs with React series should still apply to Preact. 👌
I was thinking of summarizing:
Why Preact makes sense from an interactivity and load-performance POV for Progressive Web Apps.
or more broadly:
Remind folks throughout that it's time to interactivity that matters with PWAs and this tooling.
There's a lot of good existing material on these individual topics available out there, but bringing them all together in a high-level way and calling out where Preact fits in could be interesting.
Performance wise, we could show that even if you follow a lot of the best practices for trimming down your build sizes you are going to get to a point where your library bundles (e.g React) are what you can't trim down any smaller and that's a good place to drop Preact in.
Here's an analysis of my bundles using React for a PWA:
and the after switching over to Preact:
Looking pretty nice. Get's interactive far quicker on real devices. ✨
Wdyt?
class App extends Component {
render() {
console.log(this.state) // react: null | preact: {}
}
}Can PR if you want to mention it.
/cc @pluma @bmatzner who expressed an interest :)
lang from content/ into content/lang/de//cc @amelekhin @iamale and @kipruss who mentioned they might want to help out!
lang from content/ into content/lang/ru/The statement that props.children is always an array is no longer true since Preact X.
In particular:
https://preactjs.com/about/project-goals#non-goals
Children, since Preact always boxes children as an Array
https://preactjs.com/guide/differences-to-react#whats-missing
Children: Not necessary in Preact, because
props.childrenis always an Array.
Would open PR but not sure about what to change it to.
Just want to report a minor issue. I clicked "Get It" on Product Hunt's Preact page and got redirected to
https://preactjs.com/?ref=producthunt, which renders a blank page. I guess it's due to the unknown query string parameter ref.
It would be great if we add a section about parcel in our switching to preact section. See: preactjs/preact-compat#471 (comment)
when I was trying to do the same thing in my own project, eslint suggests to avoid using setState in cDM lifecycle hook. And I found this discussion as well: jsx-eslint/eslint-plugin-react#554, where it advised to disable eslint rules for some use cases though, I wonder if there's any other considerations in this fetch-github-star example. Is it better if moving the fetch call to componentWillMount hook instead?
As suggested by @katopz:
Perhaps something similar to http://babeljs.io/docs/setup/
I assume https://preactjs.com/ is PWA which should work even in offline mode. But the SVG images served on preactjs.com are marked explictly with no-cache pragma. This causes the SVG images to not-render on page reload in offline mode (note: all other parts work correctly).
Is this on purpose? If not, what solution do you propose?
Migrating from preactjs/preact#82
Some of the examples shown in the Preact documentation make use of @bind (provided by decko or the ES7 function bind syntax (::this.method).
The former is too opinionated and relies on the reader going and reading about Decko to understand how @bind works (not to mention reading about the delayed decorator proposal and how to use it with Babel).
The latter is just a bad pattern to encourage - re-binding the same method to the same context repeatedly is wasteful.
@idchlife has suggested changing all the examples and demos to instead use the class property syntax for declaring lexically bound methods:
class A extends Component {
handleThing = () => {
this.setState({ thing:true });
};
render() {
return <div onClick={this.handleThing}>Click me!</div>;
}
}While it might take a second for those who haven't yet seen this technique in use, it's a much better pattern to encourage than ::, and doesn't require external knowledge like @bind.
There is a problem displaying text on the dropdown menu.
Environment:
Considering one of the advantages of PWA's over native apps is the ability to get the full app experience simply by following a link, adding link preview support should make sense?
As link preview support leads to more site visitors in general, the community would gain from it as well.
Now that Preact CLI is listed over on the PWA page, it would be 💯 to give developers a clean walk-through they can follow for building their first app using Preact CLI.
A tutorial could replicate building the Weather PWA with Preact CLI or something quite different if we need an app that is more complex, like something using the Hacker News or Wikipedia APIs.
Draft task list:
Looping in some folks for their thoughts: @lukeed @kristoferbaxter
I love that an open collection link is included on preact.com, but on certain areas of the site the link is covering up content beneath preventing a user from clicking.
Share REPL
Table of Contents Navigation
Browser: Google Chrome 62.0.3202.94
Operating System: MacOS Sierra 10.12
I love animated logos; it looks terrific on the homepage! Could we maybe limit the animation in the title bar on docs pages to just moving on hover or something? I've been sitting here studying, trying to pick up Preact, when my laptop fan starts humming. I'm on battery, so that's kind of frustrating...
I'm on a newer laptop, quad-core i3, so I'm sure this is even worse on some of the low-power chromebooks or something.
What do y'all think?
We need to update the docs and have two versions, one for Preact0-9, and one for X+.
As suggested by @katopz:
More Examples:
- Meteor (>32k star!)
- Semantic UI (>23k star!)
- ThreeJS (current threejs codepen example is not show how to pack it btw I did use
preact+threejs+webpackand it working but I'm not so sure I do it right or wrong because size is somehow still huge than expect)
On the homepage, the example under the Todo List Component quietly uses class instance fields without a mention of what they are. This may confuse some JS developers who haven't kept up with the (in flux, also) standards. I'm mentioning "in flux" because when the documentation does point the reader to class instance fields, they land on a GitHub repo that shows the standard has merged with another one. A link to a clearer explanation of class instance fields would help.
As per this suggestion on Twitter, we should compile a list of sites/apps using Preact. Feel free to comment here so we can get a decent list going prior to adding it to the website.
Here's a few I'm aware of to start things off!
I know there are lots more, so I'll go ping people!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.