James Long jlongster

3 Gripes With React

I started using React 3.5 years ago, and I still love it. It was such a well-designed solution that not much has changed since then, only superficial stuff like naming. What I learned then is still wholly applicable today because it's such a good idea (although now you can choose from many other libraries). On top of that, we now benefit from an entirely new architecture (fiber) without changing much.

Head Over Heels for Snapshot Testing

Tests are interesting, because you're trying to test code. But to write tests, you have to write code. Who tests the tests? For tests to be worth it you need to be sure that for each line of code you add, the value being added is more than the liability.

Value > Liability

Because belive me, tests are a liability. First, they are code that

	import "./env.js";
	import { AbsolutePath, Model, Provider } from "@opencode-ai/sdk-next";
	import { Cause, Deferred, Effect, Stream } from "effect";
	import { startCli } from "./cli.js";
	import { createInlineOpenCode } from "./inline-opencode.js";

	const location = { directory: AbsolutePath.make(process.env.QBOT_LOCATION?.trim() \|\| process.cwd()) };
	const modelName = process.env.QBOT_MODEL?.trim() \|\| "openai/gpt-5.6-terra";
	const timeoutSeconds = Number(process.env.QBOT_TIMEOUT_SECONDS ?? "600");
	const timeoutMs = (Number.isFinite(timeoutSeconds) && timeoutSeconds > 0 ? timeoutSeconds : 600) * 1000;

	import { useLoaderData, Link, useSearchParams } from 'remix';
	import { parseISO, format } from 'date-fns';
	import groupBy from 'lodash/groupBy';

	let PAGE_SIZE = 5;

	function safeParseInt(str) {
	let parsed = parseInt(str);
	return isNaN(parsed) ? 0 : parsed;
	}

	// Uses Buffer from https://github.com/feross/buffer

	function toArrayBuffer(buffer) {
	return buffer.buffer.slice(
	buffer.byteOffset,
	buffer.byteOffset + buffer.byteLength
	);
	}

	async function run() {

	const async_hooks = require('async_hooks');

	let store = new Map();

	let promiseStorageHook = async_hooks.createHook({
	init(id, type, triggerId, resource) {
	if (store.get(triggerId)) {
	if (type === 'PROMISE') {
	store.set(id, store.get(triggerId));
	}

 import React from 'react';
 import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
 let NamespaceContext = React.createContext(undefined);
 export default class ExamplePage extends React.Component {
   constructor() {
     super();
     this.state = { currentMonth: 1 };
   }

	import Timestamp from './timestamp';

	function getKeys(trie) {
	return Object.keys(trie).filter(x => x !== 'hash');
	}

	function keyToTimestamp(key) {
	// 16 is the length of the base 3 value of the current time in
	// minutes. Ensure it's padded to create the full value
	let fullkey = key + '0'.repeat(16 - key.length);

	// UPDATE: don't use this. when it re-partitions the list when time moves forward, it does not correctly keep hashes
	// Use a real merkle tree instead: https://gist.github.com/jlongster/f431b6d75ef29c1a2ed000715aef9c8c

	import Timestamp from './timestamp';

	// This is a compact data structure that keeps track of a list of
	// hashes (representing messages) over a range of time in order to
	// figure out what has changed between clients, kinda like a Merkle
	// tree. It creates "buckets" that represent different time ranges,
	// and divides time into smaller buckets the more recent they are. The

	import React from 'react';
	import lively from 'lively';

	// Global registry and resize handler

	let _registeredInstances = [];
	function register(inst) {
	if (_registeredInstances.length === 0) {
	window.addEventListener('resize', onResize);
	}