Jason Miller developit

preact-cli-plugin-styled-ssr

SSR/Prerendering support for styled-components in Preact CLI.

Inlines extracted styles for your app into the HTML automatically, for all routes.

Installation & Usage

Install: npm i -D gist:e5c5de7cdbf

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.

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.

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]

`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();

`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: {

	{
	"name": "react-ssr-prepass",
	"version": "0.0.1",
	"main": "react-ssr-prepass.js",
	"peerDependencies": {
	"preact-ssr-prepass": "*"
	}
	}

	module.exports = function (babel) {
	const t = babel.types;
	const importTpl = babel.template('const SPECIFIERS = require(SOURCE)');
	const exportTpl = babel.template('module.exports = EXPORT');
	return {
	name: 'transform-modules-commonjs-simplified',
	visitor: {
	ImportDeclaration(path) {
	const specs = path.node.specifiers;
	let specifiers;

	{
	"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.83 Safari/537.36",
	"environment": {
	"networkUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3694.0 Safari/537.36 Chrome-Lighthouse",
	"hostUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.83 Safari/537.36",
	"benchmarkIndex": 1176
	},
	"lighthouseVersion": "5.7.0",
	"fetchTime": "2020-04-03T19:12:14.230Z",
	"requestedUrl": "https://ride.lyft.com/riderweb?origin=42.381531%2C-71.098173&originName=46+Bow+St",

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