• Stars
    star
    760
  • Rank 57,365 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created 8 months ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Zero-runtime pattern matching

⚠️ Note: this is highly experimental software. Here be dragons πŸ‰

πŸŽ‚ pattycake

Zero-runtime pattern matching. (~10-12x faster πŸ”₯)

Pattycake is an optimizing compiler for ts-pattern that lets you have your cake (expressive pattern matching), and eat it too (zero runtime overhead).

Install

npm install pattycake
Next.js
// next.config.js
const pattycake = require('pattycake');

module.exports = pattycake.next({
  // your next.js config
});
Vite
// vite.config.js
import { defineConfig } from 'vite';
import pattycake from 'pattycake';

export default defineConfig({
  plugins: [pattycake.vite()],
});
Create React App
const pattycake = require('pattycake');

module.exports = {
  webpack: {
    plugins: { add: [pattycake.webpack()] },
  },
};
Webpack
const pattycake = require('pattycake');

module.exports = {
  plugins: [pattycake.webpack()],
};

About

ts-pattern is a great library that brings the ergonomics of pattern matching from languages like Rust and OCaml to Typescript, but at the cost of being orders of magnitude slower.

pattycake compiles ts-pattern's match() expressions into an optimized chain of if statements to completely eliminate that cost. In our initial benchmarks, it outperforms ts-pattern by usually ~10-12x.

In essence, pattycake converts a ts-pattern match() expression like this:

let html = match(result)
  .with(
    { type: 'error', error: { foo: [1, 2] }, nice: '' },
    () => '<p>Oups! An error occured</p>',
  )
  .with({ type: 'ok', data: { type: 'text' } }, function (data) {
    return '<p>420</p>';
  })
  .with(
    { type: 'ok', data: { type: 'img', src: 'hi' } },
    (src) => `<img src=${src} />`,
  )
  .otherwise(() => 'idk bro');

Into this:

let html;
out: {
  if (
    result.type === 'error' &&
    Array.isArray(result.error.foo) &&
    result.error.foo.length >= 2 &&
    result.error.foo[0] === 1 &&
    result.error.foo[1] === 2
  ) {
    html = '<p>Oups! An error occured</p>';
    break out;
  }
  if (result.type === 'ok' && result.data.type === 'text') {
    let data = result;
    html = '<p>420</p>';
    break out;
  }
  if (
    result.type === 'ok' &&
    result.data.type === 'img' &&
    result.data.src === 'hi'
  ) {
    let src = result;
    html = `<img src=${src} />`;
    break out;
  }
  html = 'idk bro';
  break out;
}

Feature parity with ts-pattern

Notes

Fallback / compatibility with ts-pattern

If pattycake is unable to optimize a match() expression, it will fallback to using ts-pattern. This is enabled right now because we don't support the full feature set of ts-pattern.

Inlining handlers

One performance problem of ts-pattern's are handler functions:

match(foo)
  .with({ foo: 'bar' }, () => /* this is a handler function */)
  .with({ foo: 'baz' }, () => /* another one */)

Function calls usually have an overhead, and a lot of the time these handlers are small little functions (e.g. (result) => result + 1) which can be much faster if just directly inlined in the code.

Additionally, a match() with many branches means creating a lot of function objects in the runtime.

The JIT-compiler and optimizer in JS engines can do inlining of functions, but in general with JIT you need to run your code several times or it to determine what to optimize.

So when possible, pattycake will try to inline function expression (anonymous functions / arrow functions) handlers directly into the code if it is small.

IIFEs

When possible, pattycake will try to generate a block of code (like in the example above). But there are times where this is not possible without breaking the semantics of source code.

Roadmap

Right now, the goal is to support the full feature set of ts-pattern, or at least a sufficient amount. After, the ideal is that we compile pattern matching expressions into code that would be faster than what you would write by hand.

More Repositories

1

lucia

πŸ™‹β€β™€οΈ 3kb library for tiny web apps
TypeScript
739
star
2

hundred

Build your own mini Million.js
TypeScript
425
star
3

million-react

βš›οΈ Vite starter for Million.js
CSS
424
star
4

reaict

Optimize React with AI
TypeScript
134
star
5

hacky

βš™οΈ Crank.js with tagged templates
TypeScript
44
star
6

grumpy

πŸ”‘ Painless key-value storage (deprecated)
TypeScript
36
star
7

snip

✌️ The simple, no-bs link shortener
TypeScript
35
star
8

dababy

:trollface: Data binding so simple even DaBaby could do it!
TypeScript
29
star
9

million-demo

Million vs. React demo
JavaScript
19
star
10

vhs

old school website vibes
JavaScript
18
star
11

million-site

🦁 Million.js site built with Nextra
JavaScript
15
star
12

site

⌨️ Personal website
JavaScript
12
star
13

site-mini

Minimal revamp of my personal site
CSS
12
star
14

vite-plugin-million

⚑ Million.js' compiler powered by Vite.js
TypeScript
11
star
15

million-tanstack-virtual

JavaScript
11
star
16

babel-preset-million

❀️‍πŸ”₯ Transforms JSX to Million virtual nodes
JavaScript
10
star
17

mini

Extremely minimalistic website starter
TypeScript
9
star
18

docscan

πŸ‘“ Scans documents and returns strings
Python
8
star
19

is-monday

⏰ Checks if today is Monday
JavaScript
8
star
20

kbowl-client

🧠 Conduct oral knowledge bowl online!
TypeScript
8
star
21

website

🌐 Source code of personal website.
HTML
8
star
22

aidenybai

:shipit: My GitHub readme
Shell
8
star
23

million-dev-setup

Million dev setup
TypeScript
8
star
24

lucia-starter

πŸ“¦ The official bundler boilerplate for Lucia
JavaScript
7
star
25

build-your-own-virtual-dom

BYO slides for presenting at conferences
Vue
7
star
26

revenge.ev3

πŸ’ͺ Skyridge's Sumo bot program in ev3.
7
star
27

skywarder

πŸ“˜ A simple and fast RESTful API for interacting with the Skyward grading system.
JavaScript
7
star
28

schzoom

Zoom scheduler dashboard for students written using Remake
JavaScript
7
star
29

tba

πŸ’™ Wrapper for bluealliance.com
JavaScript
7
star
30

alastor

😈🀘 Hellish-fast asynchronous HTTP client for NodeJS
TypeScript
7
star
31

www

⌨️ Personal website
TypeScript
6
star
32

i.zephyr

The static-file hosting service that'll work like a breeze.
TypeScript
6
star
33

hastebin

⚑ Module for creating hastebins
TypeScript
6
star
34

weebify

🀑 Frictionless text weebifier (AP CSA project w/@sarahberah)
JavaScript
6
star
35

amogus.church

sus
HTML
6
star
36

base

🎨 My base javascript project template.
JavaScript
6
star
37

camas

Camas Codes website
CSS
5
star
38

virtual-dom-workshop

JavaScript
5
star
39

me

Minimalistic personal webpage
EJS
5
star
40

kbowl-server

Websocket IO for kbowl
JavaScript
5
star
41

million-compiler

JSX compiler for Million (proof of concept)
JavaScript
5
star
42

fuck.zephyr

take selfies by throwing up your middle finger
JavaScript
5
star
43

magnet-project

🧲 CHS Magnet Project API
JavaScript
5
star
44

aidenybai.github.io-old

πŸ•ΈοΈPersonal website
JavaScript
5
star
45

million-delta-react-test

dom vs. million-react vs. million-react delta
JavaScript
5
star
46

kbowl

🧠 App for oral knowledge bowl during COVID times
JavaScript
5
star
47

million-conference-slides

"Optimizing React for Performance with Million.js" conference slides for Million.js
JavaScript
5
star
48

handsfree-toolkit

A REPL with a composable Handsfree.js toolkit for developing webcam AI reverse workshops
JavaScript
4
star
49

stonks

Stock data viewer example w/ Million.js vs React
JavaScript
4
star
50

leetcode

🧩 My leetcode solutions
4
star
51

apcsp

πŸ’» Repository to store all my AP Computer Science Principles projects (2021-22)
TypeScript
4
star
52

jumpstart

⚑ A simple Vite + Hacky boilerplate
TypeScript
4
star
53

folders

imagine website but folders
JavaScript
4
star
54

arewesamayet

Are we sama yet?
JavaScript
4
star
55

fiber-explorer

JavaScript
4
star
56

chinese-typer

🧧 Typer project for Chinese class.
JavaScript
4
star
57

sanic

πŸ’¬ Imagine messaging but ultrasonic
JavaScript
4
star
58

sheesh

🀩 Vite + Lucia + Tailwind starter that'll make you go SHEESH
TypeScript
4
star
59

fury

😑 Web-based FRC scouting application
JavaScript
4
star
60

calculus-adventure-project

Among Us Calc Adventure Project Web Interface
JavaScript
4
star
61

boomer

πŸ‘΄ Unopinionated monolithic webapp boilerplate
EJS
3
star
62

skyward-client

πŸ’™πŸ“˜ The better web client for Skyward
JavaScript
3
star
63

xu-ellen.github.io

🌐 Minimalistic personal website for Ellen Xu
HTML
3
star
64

lucia-demo

Lucia demos for ISEF
HTML
3
star
65

discordrp

CSS
3
star
66

albio

πŸ›° Astronomy package infrastructure for JavaScript
JavaScript
3
star
67

mst

🧐 MST Magnet Research Journal
TypeScript
3
star
68

rap-god

the real slim shady
3
star
69

Quarters3

🧠 Online FRC 2471 game for small brain moments.
CSS
3
star
70

tion

Experimental tracking pixel for GitHub repositories
JavaScript
3
star
71

million-starter

πŸ’‘ Opinionated Million starter project
3
star
72

skyridge-science.github.io

:atom: We're a passionate group of students competing in Science Olympiad for Skyridge Middle School.
CSS
3
star
73

brotherblocker

super basic script to fake-block websites
JavaScript
3
star
74

apcsa-java-env

β˜• Environment to use during AP test
Java
3
star
75

boilerplate

simple, no-bullshit fullstack web boilerplate
TypeScript
3
star
76

lucia-kumiko-starter

Starter project for a lucia/kumiko project
HTML
2
star
77

physics-final-project

TypeScript
2
star
78

mental-health-app

MST Freshman Mental Health App (Not by @aidenybai, repo for hosting)
HTML
2
star
79

yrs

yrs website
HTML
2
star
80

nn

neural net in javascript
2
star
81

remake-playground

My own playground with messing with remake
JavaScript
2
star
82

mst-database

🧐 MST Magnet Research Journal (NEW)
JavaScript
2
star
83

deopt-web

Generate v8 logs for browser JavaScript
2
star
84

remake-cache-test

HTML
2
star
85

io

Socket.io server for personal use
JavaScript
2
star
86

nextjs-dev-server-temp

JavaScript
2
star
87

lucia-slide-deck

slide deck for symposium webinar
JavaScript
2
star
88

whapnomore

EJS
2
star
89

touch-grass

Touch grass, outerneter
JavaScript
1
star
90

lablab

1
star
91

swc-visitor-api

TypeScript
1
star
92

million-sierpinski-triangle-demo

Million.js implementation of Sierpinski Triangle React Fiber Demo
1
star
93

jacky

Directly use HTML inside JavaScript
1
star
94

semaphore

HTML
1
star
95

nextra-template

TypeScript
1
star