Jason Miller developit

PreactX Upgrade Experience

Obvious breaking changes

See release 10.0.0-alpha.0 for a full list.

h -> createElement
VNode.nodeName -> VNode.type
VNode.attributes -> VNode.props
VNode.children -> VNode.props.children

Partial Hydration

If you do server side rendering (SSR) you don't necessarily need to hydrate your entire page if most of your content ist static and only some parts are interactive / dynamic. That is especially true for a newspaper website, which ich what we are working on.

What you want is partial hydration, sometimes called or related to progressive hydration or lazy hydration.

There are a few implementations out there to achive this, for instance second-dehydrator

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

	/** Converts destructured parameters with default values to non-shorthand syntax, fixing Edge 16 & 17. */
	module.exports = (babel, options = {}) => {
	const { types: t } = babel;

	const isArrowParent = p => p.parentKey=='params' && p.parentPath && p.parentPath.isArrowFunctionExpression();

	return {
	name: "transform-edge-default-parameters",
	visitor: {
	AssignmentPattern(path) {

	# scaffold your project
	npx preact-cli@rc create default my-app && cd my-app
	# upgrade to Preact X
	npm i -D preact-cli@rc && npm i preact@latest preact-router@latest preact-render-to-string@latest
	npm rm preact-compat

	<!DOCTYPE html>
	<html>
	<head>
	<title>Demo: Treat Safari 11 and Prior as nomodule</title>
	</head>
	<body>
	<script>
	if (/Safari\/5/.test(navigator.userAgent)) {
	var $fss = function () {
	for (var i of document.scripts) {

	// import fetch from 'isomorphic-unfetch';

	const RETRIES = 5;

	/**
	* Example:
	* global.fetch = fetchWithRetry;
	*/

	function fetchWithRetry(url, options) {

	const {useCallback, useEffect, useReducer, useRef} = require('react');

	let effectCapture = null;

	exports.useReducerWithEmitEffect = function(reducer, initialArg, init) {
	let updateCounter = useRef(0);
	let wrappedReducer = useCallback(function(oldWrappedState, action) {
	effectCapture = [];
	try {
	let newState = reducer(oldWrappedState.state, action.action);

	function h (tagName, attributes = {}, children = []) {
	return {
	tagName,
	attributes,
	children,
	};
	}

	function diffAttrs (element, attributes) {
	const newAttrs = Object.keys(attributes);

	// Copyright 2013-2019 Benedikt Meurer
	//
	// Licensed under the Apache License, Version 2.0 (the "License");
	// you may not use this file except in compliance with the License.
	// You may obtain a copy of the License at
	//
	// <https://www.apache.org/licenses/LICENSE-2.0>
	//
	// Unless required by applicable law or agreed to in writing, software
	// distributed under the License is distributed on an "AS IS" BASIS,