johnsoncodehk

These are some notes on the performance work that went into alien-signals. I'm sharing them not as a definitive guide, but as a log of a few key discoveries. The hope is that some of these findings might be useful to others tackling similar problems in high-performance JavaScript.

The Origin: Push-Pull-Push

My journey into the depths of reactivity performance began with Vue. I was trying to solve a specific problem in Vue 3.4: even if a computed's value didn't change, it would still trigger downstream computations and effects. This seemed inefficient. My attempt to fix this resulted in a pull request (vuejs/core#5912) that, after a year of discussions, was eventually merged. This PR introduced the Push-Pull-Push model to Vue 3.4, a model also adopted by libraries like reactivity.

For a time, I thought this was near-perfect. Then I saw the plans for Vue 3.5, which adopted a doubly-linked list but also moved to a pure pull-based model. I was still convinced

johnsoncodehk

import type config = require('@tsslint/config');

import path = require('node:path');

export function create(): config.Rule {
	return ({ typescript: ts, sourceFile, reportError, languageServiceHost }) => {
		const { noEmit } = languageServiceHost.getCompilationSettings();
		if (noEmit) {
			return;
		}

johnsoncodehk

import { createReactiveSystem, Dependency, Link, Subscriber, SubscriberFlags } from 'alien-signals/esm';
import { ReactiveFramework } from "../util/reactiveFramework";

let toCleanup: (() => void)[] = [];

export const alienSignalsStaticDeps: ReactiveFramework = {
  type: "pure",
  name: "alien-signals (static deps)",
  signal: (initial) => {
    const data = signal(initial);

johnsoncodehk

Volar 2.0 "Link"

I am Johnson, the author of Volar (now known as Vue Language Tools), and we released version 2.0 in March this year. This article will introduce you to the improvements and development experiences brought by 2.0.

Why 2.0?

In Vetur and Volar v1, we implemented Vue's IDE support through the Language Server Protocol (LSP), which works well for most small to medium-sized Vue projects, but there may be problems for very large projects.

TS Server and Vue Language Server are using double the memory

johnsoncodehk

import type { SFCParseResult, VueLanguagePlugin } from '../types';
import { parse } from '../utils/parseSfc';

const jsxWrapper = ['<script setup lang="jsx">\n', '\n</script>'];
const tsxWrapper = ['<script setup lang="tsx">\n', '\n</script>'];

const plugin: VueLanguagePlugin = _ctx => {

	return {

johnsoncodehk

import type { Rule } from '@tsslint/config';

export function create(): Rule {
	return ({ typescript: ts, sourceFile, reportWarning }) => {
		ts.forEachChild(sourceFile, function cb(node) {
			if (
				ts.isCallExpression(node) &&
				ts.isIdentifier(node.expression) &&
				node.expression.text === 'alert'
			) {

johnsoncodehk

import type { Rule } from '@tsslint/config';

export function create(): Rule {
	return ({ typescript: ts, sourceFile, languageService, reportWarning }) => {
		ts.forEachChild(sourceFile, function walk(node) {
			if (ts.isNonNullExpression(node)) {
				const typeChecker = languageService.getProgram()!.getTypeChecker();
				const type = typeChecker.getTypeAtLocation(node.expression);
				if (
					typeChecker.typeToString(type, undefined, ts.TypeFormatFlags.NoTruncation)

johnsoncodehk

/**
 * 
 * @type {import('@tsslint/config').Rule}
 */
const noConsoleRule = ({ typescript: ts, sourceFile, reportWarning }) => {
	ts.forEachChild(sourceFile, function walk(node) {
		if (
			ts.isPropertyAccessExpression(node) &&
			ts.isIdentifier(node.expression) &&
			node.expression.text === 'console'

johnsoncodehk

import { computed, ref } from "vue";
import { ComputedGetter, pauseTracking, resetTracking } from "@vue/reactivity";

// if no version, not work for objects/arrays...
export function cheapComputed<T, K = T>(getValue: ComputedGetter<T>, getVersion?: ComputedGetter<K>) {
	const value = computed(getValue);
	const version = getVersion ? computed(getVersion) : value;
	const lastValue = ref<T>();
	const lastVersion = ref<K>();
	const changed = computed(() => version.value !== lastVersion.value);

johnsoncodehk

window.history.replaceState("", "", window.location.href.replace(new RegExp("/(?!.*/)"), ""))