Jason Miller developit

`cjyes`

🔍 see jay, yes! 🎉 / 👨🏻‍💻 see, JS! 👾 / ⚓️ sea JS ⛴

If you're publishing ES Modules, you need to also publish CommonJS versions of those modules.

This isn't to support old browsers or Node versions: even in Node 14, using require() to load a module won't work if it's only available as ESM.

cjyes is the bare minimum fix for this problem. You write ES Modules and fill out a valid package.json, and it'll generate the corresponding CommonJS files pretty much instantly. cjyes takes up 500kb of disk space including its two dependencies.

Standalone forwardRef

import { forwardRef } from 'preact-forwardref';

const Foo = forwardRef((props, ref) => {
  return <div ref={ref} />
});

render( console.log(div)} /&gt;, document.body);

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

	/**
	* Write JSX, but make sure you have `import html from 'htm/preact'` in your files.
	* Run them through this horrid attrocity and get JSX support with basically no overhead.
	*/
	export function transformJsxToHtm(code) {
	const tokenizer = /(^\|)(?:<\/([a-z$_][a-z0-9_.-:])>\|<([a-z$_][a-z0-9_.-:])(\s+[a-z0-9._-]+(?:=(?:".?"\|'.?'\|\{.+?\}))?)(\s\/\s*)?>\|<(\/?)>)/gi;
	let out='', index=0, token;
	let depth = 0;
	let stacks = [];
	let shouldPop = false;

	<!DOCTYPE html>
	<html>
	<head>
	<title>Preact App with Microbundle</title>
	<link rel="stylesheet" href="/style.css">
	</head>
	<body>
	<div id="preact_root"></div>
	<script type="module" src="bundle.js"></script>
	</body>

	module.exports = {
	env: {
	browser: true
	},
	extends: [
	'plugin:react/recommended',
	'plugin:@typescript-eslint/recommended',
	'prettier/@typescript-eslint',
	'plugin:prettier/recommended'
	],

	export default (function create(options = {}) {
	const client = {
	headers: options.headers \|\| {},
	create
	};
	const events = {};

	client.emit = (type, e) => {
	events[type] &&
	events[type].slice().map(fn => {

	{
	"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",