Jason Miller developit

Preact + Material-UI example

Preact is a fast 3kB alternative to React with the same modern API.

This example uses shows how to use Material UI 4 with Preact X and Preact CLI 3.

git clone blah preact-mui

	import { h, Component } from 'preact';
	import { Router } from 'preact-router';
	import { Provider } from '@preact/prerender-data-provider';
	import Home from './routes/home';
	import Route66 from './routes/route66';
	import Custom from './routes/custom';
	import './style.css';

	export default class App extends Component {
	handleRoute = e => {

-function removeFirstConnection () {
-  $('[type=ellipsis-horizontal-icon]').first().click()
-  setTimeout(() => {
-    $('.js-mn-connection-card__dropdown-delete-btn > button').click()
-    setTimeout(() => {
-      $('[data-control-name="confirm_removed"]').click()
-    }, 250)
-  }, 250)
-}

	// This is a minimal UA sniffer, that only cares about the rendering/JS engine
	// name and version, which should be enough to do feature discrimination and
	// differential code loading.
	//
	// This is distinct from things like https://www.npmjs.com/package/ua-parser-js
	// which distinguish between different branded browsers that use the same rendering
	// engine. That sort of distinction is maybe useful for analytics purposes, but
	// for differential code loading it is overcomplicated.
	//
	// This is meant to demonstrate that UA sniffing is not really that hard if you're

	/** 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);