developit

const { h } = require('preact');
const app = require('preact-cli-entrypoint-prerendering');
const prerender = app && app.default || app;

if (typeof prerender !== 'function') {
  throw Error('prerender module must export a function, but exported '+(typeof prerender));
}

module.exports = function(props) {
  const result = prerender(props);

developit

Preact CLI with styled-components: TypeScript Edition

This shows how to use styled-components with preact-cli.

Styles are collected and inlined during pre-rendering, with no extra build or configuration step required.

The only configuration change required is to add a constant, just to prevent SSR-specific styled-components code from being loaded on the client.

developit

Preact CLI with styled-components

This shows how to use styled-components with preact-cli.

Styles are collected and inlined during pre-rendering, with no extra build or configuration step required.

The only configuration change required is to add a constant, just to prevent SSR-specific styled-components code from being loaded on the client.

developit

140b polyfill for [].flat() & [].flatMap()

Install: npm i tiny-array-flat-polyfill

Usage:

import 'tiny-array-flat-polyfill';

const ARR = [1, [2, [3]], [[[4]]], 5]

developit

object-diff-patch

// on the main thread
import { apply } from 'object-diff-patch/apply';

import createWorker from 'workerize-loader!./worker.js';
const worker = createWorker();

const CACHE = new Map();

developit

constant-locals-loader for Webpack

This loader optimizes the output of mini-css-extract-plugin and/or css-loader, entirely removing the potentially large CSS classname mappings normally inlined into your bundle when using CSS Modules.

Run npm install constant-locals-loader, then make these changes in your Webpack config:

module.exports = {
 module: {

developit

Just import this in your app's index/entry module, before any imports that would bring in preact-material-components.

developit

import { h, hydrate, Component } from 'preact';

function interopDefault(mod) {
	return mod && mod.default || mod;
}

export function ServerHydrator({ load, ...props }) {
	const Child = interopDefault(load());
	return (
		<section>

developit

export const h=(t,p,...c)=>({t,p,c,k:p&&p.key})
export const render=(e,d,t=d.t||(d.t={}),p,r,c,m,y)=>
  // arrays
  e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])):
  // components
  e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s||{},t=>
    render(Object.assign(e.s,t)&&e,d,e)),t.i||d,t&&t.i||{}),d.t=t=e):(
  // create notes
  m=t.d||(e.t?document.createElement(e.t):new Text(e.p)),
  // diff props

developit

var s;
function supportsModuleWorkers() {
  if (s==null) {
    s = false;
    try {
      new Worker('data:,', Object.defineProperty({}, 'type', {
        get() { s = true; }
      })).terminate();
    } catch (e) {}
  }