Skip to content

Instantly share code, notes, and snippets.

@intrnl
intrnl / App.svelte
Last active January 29, 2024 21:59
Svelte 5 deep reactivity
<svelte:options runes />
<script>
import { store, increment } from './reactive.js';
const deep = store.deep;
const remaining = $derived(store.items.filter((item) => !item.done).length);
function push() {
store.items.push({ text: 'bar', done: false });
@intrnl
intrnl / solid-freeze.tsx
Last active December 17, 2023 07:27
Freezing component subtrees using Suspense in Solid.js
import { type JSX, Suspense, createMemo, createResource, For } from 'solid-js';
export interface FreezeProps {
freeze: boolean;
children: JSX.Element;
fallback?: JSX.Element;
}
type Deferred = Promise<undefined> & { r: (value: undefined) => void };
@intrnl
intrnl / usefetch.js
Last active November 24, 2023 04:26
import { useState, useEffect } from 'preact/hooks'
/**
* @param {RequestInfo} url
* @param {RequestInit} opts
* @returns {useFetchObject}
*/
function useFetch (url, opts) {
const [response, setResponse] = useState(undefined)
const [error, setError] = useState(undefined)
@intrnl
intrnl / pso2-casefolding-guide.md
Last active October 12, 2023 15:05
A guide to make Phantasy Star Online 2: New Genesis run faster on Linux.

PSO2 on Linux casefolding guide

Note
This guide is primarily written for the Global Steam version of the game, however it should also apply more or less the same with other versions like Global EGS version, and also Japanese version as well.

Proton-GE includes a patch which allows you to not do any of this, however, I'd still recommend following this guide over using Proton-GE as it's proven to be more reliable so far, and also applicable to any other games.

I do not hold any liability for what happens if you mess up, be warned.
I would recommend reading through the entire guide first even if certain parts may not apply to you.

@intrnl
intrnl / use-media-query.ts
Created September 28, 2023 15:53
Solid.js media query
import { type Accessor, createSignal, onCleanup } from 'solid-js';
interface MediaStore {
/** State backing */
a: Accessor<boolean>;
/** Amount of subscriptions */
n: number;
/** Cleanup function */
c: () => void;
}
@intrnl
intrnl / reactive-localstorage.ts
Created September 28, 2023 15:50
Solid.js createReactiveLocalStorage
import { createEffect, createRoot } from 'solid-js';
import { type StoreNode, createMutable, modifyMutable, reconcile } from 'solid-js/store';
const parse = (raw: string | null, initialValue: any) => {
if (raw === null) {
return initialValue;
}
try {
const persisted = JSON.parse(raw);
@intrnl
intrnl / solid-meta.tsx
Created September 27, 2023 07:34
Solid.js SPA meta title provider
import {
createContext,
createEffect,
createMemo,
createSignal,
onCleanup,
onMount,
useContext,
} from 'solid-js';
import type { JSX } from 'solid-js/jsx-runtime';
const FOLLOWING = 4;
const CONTAINED_BY = 16;
const PRECEDING = 2;
const CONTAINS = 8;
export const collateNode = (a: Node, b: Node) => {
const position = a.compareDocumentPosition(b);
if (position & (FOLLOWING | CONTAINED_BY)) {
export class LiveFragment {
parentNode = null;
markerNode = document.createComment('fragment');
childNodes = [];
static from (content) {
let instance = new TemplateFragment();
let fragment = content.cloneNode(true);
export type IdleCallback = () => void;
const queue: IdleCallback[] = [];
let running = false;
const runTasks = (deadline: IdleDeadline) => {
while (deadline.timeRemaining() > 0) {
const callback = queue.shift();
if (!callback) {