developit

Modern Script Loading

Loading modern code for modern browsers while still supporting older browsers should be possible via module/nomodule:

<script type="module" src="/modern.js"></script>
<script nomodule src="/legacy.js"></script>

... however this results in over-fetching of scripts in Edge and Safari.

developit

import { h, Component } from 'preact';
import Markup from 'preact-markup';
import register from './preact-custom-element';

// just a proxy component: WC -> Preact -> WC
const A = () => <x-b foo="initial foo from <x-a>" />;

// stateful component that can re-render
class B extends Component {
  render(props, state) {

developit

import ai from "ko-ai";

const BASE_URL = "https://proxy-shopify-ai.local.shop.dev/v1";
const MODEL = "openai:gpt-4o-mini";
const PROMPT = "In one sentence, what is the capital of Japan?";

async function run(label: string, mode: "completions" | "responses", stream: boolean) {
  const chat = ai({ baseURL: BASE_URL, apiKey: "", model: MODEL, temperature: 0, max_output_tokens: 100, mode, stream });
  const t = performance.now();
  let text = "", chunks = 0;

developit

// parse-ms
// MIT License, copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
// Modified by Dobby233Liu in slight cooperation with MIT License
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"),
// to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
// and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,

developit

shell-mcp

Ultra-lightweight MCP server for shell execution with session management.

Features

• Zero runtime dependencies - All dependencies are dev-only
• Persistent shell sessions - Run multiple commands in the same shell context
• Background processes - Start long-running commands that continue in the background
• One-off commands - Execute single commands without session overhead

developit

import { createContext } from 'preact';
import { useContext, useRef, useMemo, useState, useLayoutEffect } from 'preact/hooks';

function createSlotContext() {
	const slots = {};
	const owners = {};
	const subs = [];
	const sub = (name, fn) => {
		const e = [name, fn];
		subs.push(e);

developit

computedWithMemo()

It's computed(), but with a second argument that gets passed each newly returned value in order to produce a string cache key. If you return the same cache key as the previous run of the computed, no update will be performed (no effects, no renders, etc).

JSFiddle Demo

- computed(
-   () => ['an', 'unstable', 'return', 'value'],
- )

developit

#!/usr/bin/env node

/* eslint-disable no-param-reassign, no-fallthrough, guard-for-in, require-atomic-updates */
const path = require('node:path');
const {Worker} = require('node:worker_threads');

const DEBUG = {parsing: false, timing: false};
const debugEnv = process.env.DEBUG;
if (debugEnv) {
  for (const name in DEBUG) {

developit

Claude generates this anti-pattern due to shallow pattern matching across incompatible mental models:

Why It's Wrong

Every getter access creates a new computed signal with fresh subscriptions:

obj.fullName; // Creates computed signal #1
obj.fullName; // Creates computed signal #2 (never cleaned up!)

developit

import { useState, useEffect } from 'preact/hooks';

const cache = new Map<string, any>();
const inflight = new Map<string, Promise<any>>();

export interface SWRResponse<T> {
  data: T | undefined;
  error: Error | null;
  loading: boolean;
}