Li Hau's Blog

Extract parameter types from string literal types with TypeScript

Parse and derive types from string literal types in TypeScript using the Template Literal Types, turning `'/purchase/[shopid]/[itemid]/args/[...args]'` into `{ shopid: number, itemid: number, args: string[] }`

typescripttemplate literal typeconditional type

Compile Svelte in your head

SvelteJavaScript

Building a simplified webpack clone

JavaScriptwebpack

Contributing to Svelte - Implement {#key}

I am going to share an anecdote on how I implemented {#key} logic block in Svelte

SvelteJavaScriptOpen Source

Compile Svelte in your head (Part 4)

SvelteJavaScript

Reduce minified code size by property mangling

JavaScriptTerser

Contributing to Svelte - Fixing issue #5012

Svelte issue #5012 - Slot containing only {@html value} renders in wrong place on update

SvelteJavaScriptOpen Source

Retry asynchronous function using the callback pattern, promise chain and async await

How to retry asynchronous function using the callback pattern, promise chain and async await. Mental model for asynchronous JavaScript.

JavaScriptAsynchronousProblem Solving

Contributing to Svelte - Fixing issue #4392

I am going to tell you an anecdote on how I investigated and fixed a bug in Svelte. I documented down my train of thoughts as detailed as possible. I hope this gives anyone who is reading, a glimpse on how to work on the Svelte source code.

SvelteJavaScriptOpen Source

Compile Svelte in your head (Part 3)

SvelteJavaScript

The Svelte Compiler Handbook

The Svelte compilation process can be broken down into 4-steps, 1) parsing source code into AST, 2) tracking references and dependencies, 3) creating code blocks and fragments, and 4) generate code.

SvelteJavaScriptcompiler

Compile Svelte in your head (Part 2)

SvelteJavaScript

Compile Svelte in your head (Part 1)

SvelteJavaScript

Hydrating text content from Server-Side Rendering

Webpack Additional Compilation Pass

Webpack's TemplatePlugin

Debugging Story: Build failed, error from Terser

It all started with an error message during the build: 'ERROR in bundle.xxx.js from Terser'.

debugging

Reactivity in Web Frameworks (Part 1)

Reactivity is the ability of a web framework to update your view whenever the application state has changed. How do web frameworks achieve reactivity?

Super Silly Hackathon 2019

A quick walkthrough on how I created my pet in the browser for the Super Silly Hackathon 2019.

JavaScripthackathon

JSON Parser with JavaScript

Step-by-step guide on implementing a JSON parser

JavaScriptAST

Pause and resume a JavaScript function

A thought experiment on how you can pause and resume the execution of a JavaScript function

JavaScriptReact

I wrote a 12-line Rollup plugin

Why would I install a package with so many files and dependencies, just to do a something simple that can be done in 12 lines of code?

JavaScriptrollupplugin

Manipulating AST with JavaScript

Manipulating AST is not that hard anyway

JavaScriptASTtransformdepth-first-search

I wrote my module bundler II

We've built a simple bundler to bundle javascript code. Let's add CSS, HTML and serve it in the browser!

JavaScriptmodule bundlerdev toolwebpack

Creating custom JavaScript syntax with Babel

Forking babel parser and creating your custom JavaScript syntax isn't as hard as you think.

JavaScriptbabelASTtransform

I wrote my module bundler

In my previous article, I explained how module bundler works. In this article, I am going to show you how I wrote my module bundler...

JavaScriptmodule bundlerdev toolwebpack

Solving Nonogram with Code

...said me to my colleague, "If I could come up with a program to solve this, I would stop playing it"

JavaScriptnonogramalgorithm

Step-by-step guide for writing a custom babel transformation

Writing your first babel plugin

JavaScriptbabelASTtransform

Git commits went missing after a rebase

What happened when you do a rebase

JavaScriptgitrebasescm

What is module bundler and how does it work?

understand how module bundler works

JavaScriptmodule bundlerdev toolwebpack

Learn in Public

Starting my notes

How to get started in contributing to open source

Debugging Web Workers

...for Chrome, Firefox and Safari

Parsing error when calling generic function with type arguments

😱

Errors encountered upgrading Flow v0.85

and how we solved them

Who accessed my property?

How to know when object property get accessed or modified

Understand the frontend tools

About the tools frontend developer used in 2019

Codemod with babel

A template which I used

My eslint doesn’t work with for flow 0.85’s explicit type argument syntax

and how I figured out why.

The `ascii_only` option in uglify-js

that get my emoji showing in my chrome extension

Dead-code elimination

How to hint uglify-js that your function is pure

Took me hours to realise why docker build ignores my .dockerignore

...and this is what I've learned

Dynamically load reducers for code splitting in a React Redux application

How to inject reducer asynchronously

Random stuff that I’ve learned from a browser’s developer console

I opened up my browser’s developer console for no reason, and I found this

5 Steps to build NodeJS using Travis CI

Setting up Travis CI for your NodeJS Github repo!