• Stars
    star
    806
  • Rank 56,569 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 1 year ago
  • Updated 10 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
738
star
2

hundred

Build your own mini Million.js
TypeScript
429
star
3

million-react

⚛️ Vite starter for Million.js
CSS
424
star
4

reaict

Optimize React with AI
TypeScript
133
star
5

hacky

⚙️ Crank.js with tagged templates
TypeScript
45
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

vhs

old school website vibes
JavaScript
22
star
10

million-demo

Million vs. React demo
JavaScript
19
star
11

million-site

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

site

⌨️ Personal website
JavaScript
13
star
13

million-tanstack-virtual

JavaScript
12
star
14

site-mini

Minimal revamp of my personal site
CSS
12
star
15

vite-plugin-million

⚡ Million.js' compiler powered by Vite.js
TypeScript
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

build-your-own-virtual-dom

BYO slides for presenting at conferences
Vue
7
star
25

revenge.ev3

💪 Skyridge's Sumo bot program in ev3.
7
star
26

schzoom

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

tba

💙 Wrapper for bluealliance.com
JavaScript
7
star
28

skywarder

📘 A simple and fast RESTful API for interacting with the Skyward grading system.
JavaScript
7
star
29

alastor

😈🤘 Hellish-fast asynchronous HTTP client for NodeJS
TypeScript
7
star
30

lucia-starter

📦 The official bundler boilerplate for Lucia
JavaScript
6
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

screacth

what if we made react in scratch (blockly)
6
star
38

camas

Camas Codes website
CSS
5
star
39

me

Minimalistic personal webpage
EJS
5
star
40

virtual-dom-workshop

JavaScript
5
star
41

kbowl-server

Websocket IO for kbowl
JavaScript
5
star
42

million-compiler

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

fuck.zephyr

take selfies by throwing up your middle finger
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

arewesamayet

Are we sama yet?
JavaScript
5
star
48

million-conference-slides

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

magnet-project

🧲 CHS Magnet Project API
JavaScript
5
star
50

handsfree-toolkit

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

stonks

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

leetcode

🧩 My leetcode solutions
4
star
53

fury

😡 Web-based FRC scouting application
JavaScript
4
star
54

apcsp

💻 Repository to store all my AP Computer Science Principles projects (2021-22)
TypeScript
4
star
55

calculus-adventure-project

Among Us Calc Adventure Project Web Interface
JavaScript
4
star
56

jumpstart

⚡ A simple Vite + Hacky boilerplate
TypeScript
4
star
57

folders

imagine website but folders
JavaScript
4
star
58

fiber-explorer

JavaScript
4
star
59

chinese-typer

🧧 Typer project for Chinese class.
JavaScript
4
star
60

sanic

💬 Imagine messaging but ultrasonic
JavaScript
4
star
61

sheesh

🤩 Vite + Lucia + Tailwind starter that'll make you go SHEESH
TypeScript
4
star
62

boomer

👴 Unopinionated monolithic webapp boilerplate
EJS
3
star
63

skyward-client

💙📘 The better web client for Skyward
JavaScript
3
star
64

xu-ellen.github.io

🌐 Minimalistic personal website for Ellen Xu
HTML
3
star
65

lucia-demo

Lucia demos for ISEF
HTML
3
star
66

discordrp

CSS
3
star
67

albio

🛰 Astronomy package infrastructure for JavaScript
JavaScript
3
star
68

mst

🧐 MST Magnet Research Journal
TypeScript
3
star
69

Quarters3

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

rap-god

the real slim shady
3
star
71

million-starter

💡 Opinionated Million starter project
3
star
72

tion

Experimental tracking pixel for GitHub repositories
JavaScript
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

skyridge-science.github.io

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

petite-react

3
star
77

boilerplate

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

mental-health-app

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

lucia-kumiko-starter

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

physics-final-project

TypeScript
2
star
81

roaster

2
star
82

nn

neural net in javascript
2
star
83

yrs

yrs website
HTML
2
star
84

remake-playground

My own playground with messing with remake
JavaScript
2
star
85

mst-database

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

deopt-web

Generate v8 logs for browser JavaScript
2
star
87

remake-cache-test

HTML
2
star
88

io

Socket.io server for personal use
JavaScript
2
star
89

nextjs-dev-server-temp

JavaScript
2
star
90

lucia-slide-deck

slide deck for symposium webinar
JavaScript
2
star
91

whapnomore

EJS
2
star
92

touch-grass

Touch grass, outerneter
JavaScript
1
star
93

lablab

1
star
94

million-lint-sc-repro

TypeScript
1
star
95

garden

aiden and belly garden!
HTML
1
star
96

capybara-army

1
star
97

swc-visitor-api

TypeScript
1
star
98

million-sierpinski-triangle-demo

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

jacky

Directly use HTML inside JavaScript
1
star
100

semaphore

HTML
1
star