Jason Miller developit

Image Decoding in Blink / Chrome (true as of M62)

Blink decodes off the main thread for image elements and for CSS styles (an image as an element's background style, for example). Moving the decode to the compositor thread (or the compositor worker thread pool?) does free-up the main thread to work on other tasks. We call this deferred decoding. With deferred decoding, the decode work remains on the critical path for presenting a frame to the display, so it can still cause animation jank.

The HTMLImageElement.decode() API should help with the jank problem. Also deferred decoding does not work with SVG image resources. There are still cases where decoding images happens synchronously on the main thread: 2D canvas drawImage() and createPattern(), and WebGL texture uploads.

Usage:

In your webpack config:

resolve: {
  alias: {
    'react': 'preact-compat-lite',
    'react-dom': 'preact-compat-lite'
 }

Lighthouse Viewer

A Preact PWA port of Eric Bidelman's Lighthouse Viewer app. Zero-config PWA build powered by preact-cli.

Try it out: lighthouse-viewer.surge.sh.

Preact for Angular 1 Users

Here's my quick attempt to build a tiny preact app using terminology from Angular 1.

Installation

# get it
git clone https://gist.github.com/e5de4c33c1a8d8fd172905010d3ff75c.git preact-for-angular1-users
cd preact-for-angular1-users

Note: I'm not involved in Prepack in any way — please correct me if I say anything incorrect below!

A few people have asked me if Prepack and Svelte are similar projects with similar goals. The answer is 'no, they're not', but let's take a moment to explore why.

What is Prepack?

Prepack describes itself as a 'partial evaluator for JavaScript'. What that means is that it will run your code in a specialised interpreter that, rather than having some effect on the world (like printing a message to the console), will track the effects that would have happened and express them more directly.

So for example if you give it this code...

	var path = require('path').join(__dirname, '..', 'package.json');
	var pkg = require(path);
	['babel', 'greenkeeper', 'bundlesize', 'devDependencies', 'eslintConfig'].forEach(function(key) { delete pkg[key] });
	pkg.scripts = { postinstall: pkg.scripts.postinstall, donate: pkg.scripts.donate };
	require('fs').writeFileSync(path, JSON.stringify(pkg, null, 2));

	// https://hg.mozilla.org/mozilla-central/rev/2f9043292e63
	// Used to detect minification for automatic pretty printing
	const SAMPLE_SIZE = 30; // no of lines
	const INDENT_COUNT_THRESHOLD = 20; // percentage

	function isMinified (str) {
	let isMinified;
	let lineEndIndex = 0;
	let lineStartIndex = 0;
	let lines = 0;

	{
	"rewrites": [
	{
	"source": "**",
	"destination": "/index.html"
	}
	],
	"headers": [
	{
	"source": "**",

	const typeOf = ob => ob.toString()

	const forEach = (fn, l) => typeOf(l) === '[object Object]'
	? forEach(k => fn(l[k], k), Object.keys(l))
	: Array.from(l).forEach(fn)

	export const patch = (elm, node) => {
	if(elm === node) return elm
	if(typeOf(elm) === '[object Text]') {
	elm.textContent = node.textContent

	<script src="/path/to/embed.umd.js"></script>

	<div id="foo"></div>
	<script>
	var parent = document.getElementById('foo')
	embed.renderWidget(
	'foo', // widget name
	{ a: 'b' }, // props
	parent // render into this
	);