Skip to content

Instantly share code, notes, and snippets.

View jacob-ebey's full-sized avatar

Jacob Ebey jacob-ebey

View GitHub Profile
@jacob-ebey
jacob-ebey / machine.js
Created November 29, 2020 20:34
Generated by XState Viz: https://xstate.js.org/viz
const magicMachine = Machine({
id: "magic",
initial: "ready",
context: {
didToken: null,
apiToken: null,
},
states: {
ready: {
initial: "noError",
@jacob-ebey
jacob-ebey / webpack-access-federated-containers-plugin.js
Created December 8, 2020 05:12
webpack-access-federated-containers-plugin.js
/*
Makes your remote containers low level API accessible via:
import accessFederatedContainer from "access-federated-containers";
accessFederatedContainer("app2")
*/
/** @typedef {import("webpack").Compiler} Compiler */
/** @typedef {import("webpack").Compilation} Compilation */
@jacob-ebey
jacob-ebey / webpack.config.js
Created February 24, 2021 00:18
Consume Federated Modules With Local Fallback | Unpkg, NPM
const path = require("path");
const { camelCase } = require("camel-case");
const webpack = require("webpack");
const { merge } = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const pkg = require("./package.json");
@jacob-ebey
jacob-ebey / webpack-stats-with-exposed-federated-modules.js
Last active May 15, 2021 21:56
Discover federated chunks using webpack-flush-chunks
new StatsWriterPlugin({
stats: {
all: true,
},
transform(stats) {
const federatedChunks = stats.chunks.filter((chunk) =>
chunk.origins.some((origin) => origin.moduleName === "container entry")
);
const assetsByChunkName = Object.entries(
@jacob-ebey
jacob-ebey / renderToStringWithWritable.js
Last active June 27, 2021 05:15
React18 renderToStringWithWritable
const { PassThrough } = require('stream');
const { pipeToNodeWritable } = require('react-dom/server');
function renderToStringWithWritable(element, timeout = 10000) {
return new Promise((resolve, reject) => {
const writable = new PassThrough();
let res = '';
writable.on('data', d => {
res += String(d);
@jacob-ebey
jacob-ebey / remix-compose-routes.ts
Created July 16, 2021 16:47
Compose Remix routes
import type { LinksFunction, LoaderFunction, MetaFunction } from "remix";
export let composeMeta =
(
...metas: (MetaFunction | { data: string; meta: MetaFunction })[]
): MetaFunction =>
(args) =>
metas.reduce<ReturnType<MetaFunction>>((res, meta) => {
if (typeof meta === "function") {
return { ...res, ...meta(args) };
@jacob-ebey
jacob-ebey / cache.server.ts
Last active December 22, 2021 22:04
upstash GET SWR request cache
import { createHash } from "crypto";
import { get, set, setex } from "@upstash/redis";
type CachedResponse = {
status: number;
statusText: string;
body: string;
headers: [string, string][];
};
{"requestedUrl":"https://remix-ecommerce.fly.dev/","finalUrl":"https://remix-ecommerce.fly.dev/","lighthouseVersion":"9.0.0","userAgent":"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/95.0.4638.69 Safari/537.36","fetchTime":"2022-01-02T09:53:12.290Z","environment":{"networkUserAgent":"Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4695.0 Mobile Safari/537.36 Chrome-Lighthouse","hostUserAgent":"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/95.0.4638.69 Safari/537.36","benchmarkIndex":1302.5},"runWarnings":[],"configSettings":{"emulatedFormFactor":"mobile","formFactor":"mobile","locale":"en-US","onlyCategories":["performance","accessibility","best-practices","seo"],"channel":"lr"},"audits":{"th-has-data-cells":{"id":"th-has-data-cells","title":"`<th>` elements and elements with `[role=\"columnheader\"/\"rowheader\"]` have data cells they describe.","description":"Screen readers have f
{"requestedUrl":"https://shopify.vercel.store/","finalUrl":"https://shopify.vercel.store/","lighthouseVersion":"9.0.0","userAgent":"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/95.0.4638.69 Safari/537.36","fetchTime":"2022-01-02T09:51:04.078Z","environment":{"networkUserAgent":"Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4695.0 Mobile Safari/537.36 Chrome-Lighthouse","hostUserAgent":"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/95.0.4638.69 Safari/537.36","benchmarkIndex":1548},"runWarnings":[],"configSettings":{"emulatedFormFactor":"mobile","formFactor":"mobile","locale":"en-US","onlyCategories":["performance","accessibility","best-practices","seo"],"channel":"lr"},"audits":{"aria-required-attr":{"id":"aria-required-attr","title":"`[role]`s have all required `[aria-*]` attributes","description":"Some ARIA roles have required attributes that describe the state of the element to
@jacob-ebey
jacob-ebey / styles.server.ts
Created January 11, 2022 19:00
Remix PostCSS Dev Resource Route
import fsp from "fs/promises";
import type { LoaderFunction } from "remix";
import postcss from "postcss";
import postcssrc from "postcss-load-config";
export let loader: LoaderFunction = async () => {
let { options, plugins } = await postcssrc();
let { css } = await postcss(plugins).process(
await fsp.readFile("styles/global.css", "utf8"),