Preact now supports seamless progressive hydration.
Any component can throw during hydration (or new tree creation like a route change!), and if a component somewhere
higher in the tree catches that via componentDidCatch, hydration gets paused.
Re-rendering the tree (via setState, etc) simply resumes hydration where it left off.
A short-ish example of incremental & lazy alternative to Array#reduce when you have a bunch of rapidly changing values.
The basic idea is to use a normal array and push values to it, but also think of the array as a representation of a binary tree (using the scheme outlined in Wikipedia). Each tree node keeps track of the reduced value of the subtree under it, and whenever something changes (i.e. a value is pushed to the array, a value is removed etc.) the changed node and its ancestors are marked to be "dirty", i.e. needing recalculation. All the dirty nodes get refreshed lazily when the reduced value for the tree is needed.
Each single tree modification marks at most 2 * log N nodes dirty (where N is the number of nodes in the tree). Therefore calculating the reduced value takes at O(min(m log N, N)) time (where m is the number of single modifications done to the tree since the last time the reduced value was calculated), assuming the given red
Note: this document is subsumed by the module blocks proposal
Anonymous inline modules are syntax for the contents of a module, which can then be imported.
let inlineModule = module {
export let y = 1;
};
A syntax proposal for Cascade Layers #4470. This does not include full discussion of the Cascade Layer purpose and use-cases, which can be found in the various linked issues, but attempts to answer many of the outstanding questions about how we might implement a layering feature.
Collaborators:
| // Run `"javascript:$(terser .\preact-checker.js)" > .\preact-checker.min.js` to make it a bookmarklet | |
| (function () { | |
| var expando = | |
| typeof Symbol != "undefined" && Symbol.for && Symbol.for("preactattr"); | |
| function isMatch(node) { | |
| if ("__k" in node && "props" in node.__k && "type" in node.__k) { | |
| return true; | |
| } | |
| return ( |
Experimental hooks-based bindings for Unistore. Available on npm:
npm i unistore-hooks
Note: this should also work with React, just alias
"preact"and"preact/hooks"to"react"in your bundler.
This is a 1.1kb polyfill for Module Workers.
It adds support for new Worker('..',{type:'module'}) to all modern browsers (those that support fetch).
Copy module-workers-polyfill.js to your web directory, then load it using an import or a script tag.
It just needs to be loaded before instantiating your Worker.
🔍 see jay, yes! 🎉 / 👨🏻💻 see, JS! 👾 / ⚓️ sea JS ⛴
If you're publishing ES Modules, you need to also publish CommonJS versions of those modules.
This isn't to support old browsers or Node versions: even in Node 14, using require() to load a module won't work if it's only available as ESM.
cjyes is the bare minimum fix for this problem. You write ES Modules and fill out a valid package.json, and it'll generate the corresponding CommonJS files pretty much instantly. cjyes takes up 500kb of disk space including its two dependencies.
This is a half-baked sketch of compiling HTM expressions into a list of instructions that can be interpreted in runtime with a compact function. The instructions hopefully compress well and the evaluation function should be not-slow. Maybe.
evaluate.js contains the evaluation function (evaluate(...)) as well as an example of a compiled HTM call.
babel.js contains a Babel plugin that transforms HTM calls into the stack language. The build.mjs file it imports is HTM's src/build.mjs.
This tweet demonstrates that a minified evaluate() fits in one tweet: https://twitter.com/jviide/status/1257755526722662405 🙂
