FlameWolf

Migrating from Solid 1.0 to Solid 2.0: Lessons

Solid 2.0 made async first-class. What that means is, you can create signals, memos, and stores that load their initial values asynchronously. This is a huge update over most other frameworks that — at the time of writing this (September 2026) — do not support anything of the sort.

So I decided to port my app, QuickPad, (which I had originally written in Vue and later migrated to Solid) to Solid 2.0 to try it out.

These are the differences that stood out to me during the porting process. I will go through each one in detail:

1. No async allowed in effect/setter/hook callbacks (major impact)
2. Updates are batched (medium impact)

FlameWolf

Framework => Constants => Content => Utils => Models => Storage => Stores => Router => Composables => Components => Types

FlameWolf

Differences in How Vue and Solid Handle Non-Primitive Reactive Values

If you ever find yourself porting your front-end code from Vue to Solid, or vice versa, here's one thing that might get you into deep trouble: they handle non-primitive reactive references (created using ref in Vue and createSignal in Solid) in a completely different manner. To demonstrate, here is a Vue component that contains a reactive array:

<script setup lang="ts">
	import { ref, watch } from "vue";

	const separator = ", ";
	const arrayRef = ref([1, 2, 3]); /* Keep an eye on this */

FlameWolf

If you use Intl.Segmenter instead of String.prototype.length to calculate string lengths, awesome, thank you for not being Anglocentric. However, I'd like to introduce you to a minor issue that can happen when doing this. Consider the below word which is written in Malayalam, one of the Indic languages belonging to the Dravidian language family:

പരീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീീക്ഷ

Here, the character "ീ" is a mark character (\p{M} in RegExp), which is repeated 79 times. Yet Intl.Segmenter would tell you that the length of the word is 3 graphemes, which is technically correct — but this behaviour can be exploited by an attacker to send arbitrarily long data even if your application sets a limit on the input length. So it would always make sense to cap the byte length of your input on top of the Intl.Segmenter-based length validation.

FlameWolf

const postCreateReqType = type({
	content: "string",
	media: type("string")
		.configure({
			format: "binary"
		})
		.or("File"),
	poll: type("string").pipe(
		value =>
			JSON.parse(value) as {

FlameWolf

WITH CTE AS
(
	SELECT
		SCHEMA_NAME(SysObjects.[schema_id]) AS SchemaName,
		COALESCE(SysTableTypes.[name], SysObjects.[name]) AS ObjectName,
		SysObjects.[type] AS ObjectType,
		SysObjects.[type_desc] AS ObjectTypeDescription,
		SysObjects.modify_date AS LastModifiedDate,
		SysObjects.create_date AS CreationDate
	FROM sys.objects AS SysObjects

FlameWolf

const segmenter = new Intl.Segmenter();
const zeroWidthSpace = "\u200B";
/**
 * Checks if the combination of segments is a single grapheme unit.
 * @param {Intl.SegmentData} combination
 * @returns {Boolean}
 */
const isGraphemeUnit = combination => Array.from(segmenter.segment(combination)).length === 1;
/**
 * Removes unwanted zero-width spaces based on their context in the text.

FlameWolf

ServiceBus:
amqps://ListenOnlyAccessKey:6FzpNGirGuIRnlxDi91lLqXwb7UIIW6oK%2BASbFuvJ9U%3D@nair-ajith.servicebus.windows.net:5671/?verify=verify_none

EventHubs:
amqps://ListenOnlyAccessKey:jMfGyHUDh5JZuFuKGo5lgudLFZBa3HqV6%2BAEhJX2Cfg%3D@ajith-nair.servicebus.windows.net:5671/?verify=verify_none

FlameWolf

const segmenter = new Intl.Segmenter();
const areStringsEqual = (first, second) => first.localeCompare(second, undefined, { sensitivity: "accent" }) === 0;
const isPalindrome = word => {
	const graphemes = Array.from(segmenter.segment(word)).map(x => x.segment);
	let [left, right] = [0, graphemes.length - 1];
	while (left < right) {
		if (!areStringsEqual(graphemes[left], graphemes[right])) {
			return false;
		}
		left++, right--;

FlameWolf

const rot18 = (() => {
	const forward = "ABCDEFGHIJKLM01234";
	const reverse = "NOPQRSTUVWXYZ56789";
	const charMap = new Map();
	for (let loopIndex = 0; loopIndex < 18; loopIndex++) {
		const key = forward[loopIndex];
		const val = reverse[loopIndex];
		charMap.set(key, val);
		charMap.set(val, key);
		if (/\D/.test(key)) {