Sukima

@mastersuki.bsky.social

I am a passionate software developer specialized in Ember.js & JavaScript. I dabble in Photography, 360 panoramic tours, interactive fiction, and geek culture. https://tritarget.org/

$async function tryOp(op) { try { return [await op(), null]; } catch (error) { if (error instanceof Error) return [null, error]; throw error; } } async function processLocation([areaName, [unitArea, ...unitList]]) { const { areaId } = unitArea; const [insertedUnits, insertError] = await tryOp(() => insertAreaAndUnits( areaName, areaId, unitList, localUser, projectId, )); if (insertError) { reqLogger.error(insertError); throw error; } if (!insertedUnits) { throw new Error('No units inserted.'); } const { sourceArray, savedUnits } = insertedUnits; const [, upsertError] = await tryOp(() => upsertSourceTable( sourceArray, 'locations_source', ['local_id'], )); if (upsertError) { reqLogger.error(insertError); throw error; } return savedUnits; } return await Promise.all(locationsMap.entries().map(processLocation));$

async function tryOp<T>(
op: () => T | Promise<T>,
): Promise<[T, null] | [null, Error]> {
try {
return [await op(), null];
} catch (error) {
if (error instanceof Error) return [null, error];
throw error;
}
}

const [res, networkError] = await tryOp(() => fetch(…));
if (networkError) {
console.log(`Network error: ${networkError.message}`);
process.exit(1);
}

if (!res.ok) {
console.log(`Server error: ${res.statusCode}`);
process.exit(1);
}

const [json, jsonError] = await tryOp(() => res.json());
if (jsonError) {
console.log('Bad payload from server');
process.exit(1);
}

console.log(`Success: ${json.message}`);
process.exit(0);

const stateRefs = new WeakMap();

export class State {
#state = { isLoading: true, error: null, resolved: undefined };

get isLoading() { return this.#state.isLoading; }
get error() { return this.#state.error; }
get resolved() { return this.#state.resolved; }

constructor(fn) {
const result = typeof fn === 'function' ? fn : () => fn;

new Promise(resolve => resolve(result()))
.then((resolved) => (this.#state.resolved = resolved))
.catch((error) => (this.#state.error = error))
.finally(() => (this.#state.isLoading = false));
}

static for(fn) {
const state = stateRefs.get(fn) ?? new this(fn);
stateRefs.set(fn, state);
return state;
}
}

(async (body) => {
const { hackTheme } = body.dataset;

body.dispatchEvent(new Event('dispose'));

if (hackTheme === 'inverted') return;

using stack = new DisposableStack();

stack.adopt(
body.style.filter,
(origFilter) => body.style.filter = origFilter,
);
body.style.filter = 'invert(100%) hue-rotate(180deg)';

stack.adopt(
body.style.background,
(origBackground) => body.style.background = origBackground,
);
body.style.background = 'black';

stack.defer(() => delete body.dataset.hackTheme);
body.dataset.hackTheme = 'inverted';

await new Promise(resolve => {
body.addEventListener('dispose', resolve, { once: true });
});
})(document.body);

javascript:(async (b) => {
const theme = b.dataset.hackTheme;
b.dispatchEvent(new Event('dispose'));
if (theme === 'inverted') return;
using s = new DisposableStack();
s.adopt(b.style.filter, (f) => b.style.filter = f);
b.style.filter = 'invert(100%) hue-rotate(180deg)';
s.adopt(b.style.background, (bg) => b.style.background = bg);
b.style.background = 'black';
s.defer(() => delete b.dataset.hackTheme);
b.dataset.hackTheme = 'inverted';
await new Promise(r => {
b.addEventListener('dispose', r, { once: true });
});
})(document.body);

/bar/d.exec('foo bar baz').indices[0]; // => [4, 7]

/* Especially useful with named groups */
/(?<bar>bar)/d.exec('foo bar baz').indices.groups.bar; // => [4, 7]

const reply = '';
Boolean(reply);
// => false

class Resource {
constructor(label) {
this.label = label;
}

[Symbol.dispose]() {
throw new Error(`bork ${this.label}`);
}
}

function newExample() {
using a = new Resource('A');
using b = new Resource('B');
using c = new Resource('C');
throw new Error('bork');
}

class AsyncCounter extends EventTarget {
#count = 0;

get count() {
return this.#count;
}

async run(task) {
using stack = new DisposableStack();
stack.defer(() => this.dispatchEvent(new Event('count')));
stack.defer(() => this.#count--);
this.#count++;
this.dispatchEvent(new Event('count'));
return await task();
}
}

class Foo {
publicA = …;
publicB = …;
publicC = …;

#privateA = …;
#privateB = …;
#privateC = …;

nice() {
// This is a nice pattern.
const { publicA, publicB, publicC } = this;
}

notNice() {
// This won't work and that is sad.
const { #privateA, #privateB, #privateC } = this;

// Instead this is needed.
const privateA = this.#privateA;
const privateB = this.#privateB;
const privateC = this.#privateC;
}
}

class EventEmitter {
#listeners = new Map();

on(eventType, listener) {
const listeners = this.#listeners.get(eventType) ?? new Set();
listeners.add(listener);
this.#listeners.set(eventType, listeners);
return this;
}

off(eventType, listener) {
const listeners = this.#listeners.get(eventType);
listeners?.delete(listener);
return this;
}

emit(eventType, ...args) {
if (!this.#listeners.has(eventType)) return false;
const listeners = this.#listeners.get(eventType);
for (const listener of listeners) listener(...args);
return true;
}
}

class AsyncArrowsWork extends ReadableStream {
data = 'foobar';
constructor() {
super({
start: async (controller) => {
controller.enqueue(this.data); // OK
controller.close();
},
});
}
}

class SyncArrowsFail extends ReadableStream {
data = 'foobar';
constructor() {
super({
start: (controller) => {
controller.enqueue(this.data); // Fail
controller.close();
},
});
}
}

using stack = new DisposableStack();
const { signal } = stack.adopt(
new AbortController(),
(controller) => controller.abort(),
);
const apiUrls = […];
const res = await Promise.any(
apiUrls.map((url) => fetch(url, { signal })),
);
const data = await res.json();
console.log(data);

let a = 1;
let b = 2;
([a, b] = [b, a]);
console.log({ a, b });
// => { a: 2, b: 1 }

$async function main() { while (true) { await using stack = new AsyncDisposableStack(); stack.adopt(await startServiceOne(), stopServiceOne); stack.adopt(await startServiceTwo(), stopServiceTwo); stack.adopt(await startServiceThree(), stopServiceThree); await sleep(120_000); } }$

$async function main() { while (true) { await using stack = new AsyncDisposableStack(); stack.use(await startServiceOne()), stack.use(await startServiceTwo()), stack.use(await startServiceThree()), await sleep(120_000); } }$

// Demonstrate the protection NaN comparison provides
const userInputs = ["85", "92", "invalid", "78", "", "95", "not a number"];
const validInputs = userInputs.map(Number).filter(num => num === num);
// [85, 92, 78, 95];

const url = new URL(current, 'thismessage:/');
const { searchParams: activeQPs } = url;
let { pathanme: base } = url;

async function foobar(eventTarget) {
using stack = new DisposableStack();
const { singal } = stack.adopt(
new AbortContoller(),
(controller) => controller.abort(),
);

eventTarget.addEventListener('event1', handler1, { signal });
eventTarget.addEventListener('event2', handler2, { signal });
eventTarget.addEventListener('event3', handler3, { signal });
eventTarget.addEventListener('event4', handler4, { signal });
eventTarget.addEventListener('event5', handler5, { signal });

await new Promise((done) => {
eventTarget.addEventListener('done', done, { signal });
eventTarget.dispatchEvent(new Event('start'));
});
}

$function example(element) { // Construction captures first bounding rect. using _token = new DisposableFlipAnimator(element); doSomethingWith(element); } // Scope disposal captures last bounding rect and animates.$

Padme & Anakin four panel meme
1. Anakin: Leadership wants us to use AI everywhere to be more efficient
2. Padme: AI can finally handle all that JIRA syuff right?
3. Anakin: …
4. Padme: AI can handle all that JIRA stuff right?

function * onlyRebels(people) {
for (const person of people)
if (person.affiliation === 'rebles')
yield person.name;
}

const names = onlyRebels([
{ name: 'Admiral Piett', affiliation: 'empire' },
{ name: 'Agent Kallus', affiliation: 'empire' },
{ name: 'Darth Vader', affiliation: 'empire' },
{ name: 'Han Solo', affiliation: 'rebels' },
{ name: 'Luke Skywalker', affiliation: 'rebels' },
{ name: 'Princess Leia Organa', affiliation: 'rebels' },
])
.map(({ name }) => name)
.toArray();

eventReadableStream(someElement, 'click')
.pipeThrough(consoleLogger(IS_DEBUG))
.pipeThrough(siteAnalytics())
.pipeTo(clickHandler())
.catch(reportErrors);

type Entry<T> = { [K in keyof T]-?: [K, T[K]] }[keyof T];

interface ApiPostData {
firstName: string;
lastName?: string;
isAdmin: boolean;
}

function * toApiData(formData: FormData): Generator<Entry<ApiPostData>> {
yield ['firstName', String(formData.get('fname'))];

if (formData.get('useLastName') === 'yes') {
yield ['lastName', String(formData.get('lname'))];
}

yield ['isAdmin', Boolean(formData.get('role') === 'admin')];
}

const formData = new FormData(document.querySelector('form'));
const postData = Object.fromEntries(toApiData(formData));

Statechart diagram described by this PlantUML.
@startuml Search Box State Machine

skinparam state {
BackgroundColor<<Running>> LightBlue
BorderColor<<Running>> Blue
}

[*] --> Idle : Initialize

state Idle {
[*] --> Empty
Empty --> HasText : User types
HasText --> Empty : User clears text
HasText --> HasText : User modifies text
}

state FetchingSuggestions <<Running>> {
[*] --> Processing
Processing --> SuggestionsReady : Task completes
Processing --> Cancelled : New input received
Cancelled --> [*] : Abort task
}

Idle --> FetchingSuggestions : Text changed / Start background task
FetchingSuggestions --> Idle : Return to idle state

state DisplayingSuggestions {
[*] --> ShowingSuggestions
ShowingSuggestions --> SuggestionSelected : User selects suggestion
SuggestionSelected --> [*] : Apply selection
}

FetchingSuggestions --> DisplayingSuggestions : Suggestions ready
DisplayingSuggestions --> Idle : User continues typing / Close suggestions

@enduml

const stack: (() => void)[] = [];

try {
document.body.append(dialog);
stack.push(() => dialog.remove());

signal.addEventListener('abort', cancel);
stack.push(() => signal.removeEventListener('abort', cancel));
} finally {
stack.reverse().forEach((dispose) => dispose());
}

using stack = new DisposableStack();

document.body.append(dialog);
stack.defer(() => dialog.remove());

signal.addEventListener('abort', cancel);
stack.defer(() => signal.removeEventListener('abort', cancel));

class Thing implements EventListenerObject, Disposable {
private disposer = new AbortController();

constructor(private target: EventTarget) {
target.addEventListener('foo', this, this.disposer);
}

handleEvent(event: Event) {
switch (event.type) {
case 'foo':
doSomethingWithFoo(event);
break;
default:
throw new Error('unsupported event', { cause: event});
}
}

[Symbol.dispose]() {
this.disposer.abort();
}
}

class Debouncer {
#debounce;

run(callback, delay) {
this.#debounce?.abort();
this.#debounce = new AbortController();
this.#debounce.signal.onabort = () => clearTimeout(timer);
const timer = setTimeout(callback, delay);
}

dispose() {
this.#debounce?.abort();
}
}

class Foo {
constructor() {
console.log('called on each new instance creation');
}
static {
console.log('called immediatly after the ending } bracket');
}
}
console.log('also called immediatly after the ending } bracket');

async function foobar() {
// This for loop will iterate over the result of bar().
// Presuming bar() returns an async iterator it means each time its ".next()"
// is called the value is expected to be a promise of which the "for await"
// will pause for the promise to fulfill before assigning "foo" the resolved
// value.
for await (await using foo of bar())
// Now that a single iteration has resolved and "foo" holds the value we
// ask "baz()" to use "foo" and return a promise which again we pause till
// it is fulfilled.
await baz(foo);
// Before the loop repeats (awaiting the next iteration promise from "bar()")
// the in scope "foo" resource will have its "[Symbol.asyncDispose]()" method
// called and paused for the returned promise to fulfill. This is because of
// the "await using" above which tells the runtime to dispose of the soon to
// be out-of-scope "foo" resource.
}

async function foobar() {
for await (await using foo of bar())
await baz(foo);
}

$class PersitentStore { constructor() { this.data = JSON.parse(localStorage.getItem(STORE_KEY) ?? '{}'); } [Symbol.dispose]() { localStorage.setItem(STORE_KEY, JSON.stringify(this.data)); } }$