So I just learned that in @typescriptlang.org any JSX element is allowed arbitrary attributes as long as they contain a `-` 🤔
It's documented as an exemption for invalid JS identifiers (why?) but I checked the source and literally only checks for hyphens. Insane behaviour
![```toml
# Always float macos preferences
[[window_rules]]
if.app_id = "com.apple.systempreferences"
float = true
```](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:2xau7wbgdq4phuou2ypwuen7/bafkreiau3tvdoa3ij53far2ws4ut4ufxrbmmpn2smii5fkbb4wqyol3yb4)
![[PLUGIN_TIMINGS] Warning: Your build spent significant time in plugins. Here is a breakdown:
- vite:dts (81%)
- @rolldown/plugin-babel (18%)
See https://rolldown.rs/options/checks#plugintimings for more details.](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:2xau7wbgdq4phuou2ypwuen7/bafkreibsao3c7rrf37fosavjltrkj2ee2tipyzpn27pbjamx4yuixv6nmq)
![tom@TomusPC ~/c/unravel (main)> goat --version
goat version v0.2.0
tom@TomusPC ~/c/unravel (main)> goat lex check-dns --help
error: No help topic for 'check-dns'
tom@TomusPC ~/c/unravel (main) [255]> goat lex breaking --help
error: No help topic for 'breaking'
tom@TomusPC ~/c/unravel (main) [255]>](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:2xau7wbgdq4phuou2ypwuen7/bafkreif6ckv2hgpk5434mr3vp7x6woyjvik75jgvxxhhpgplisgl7asbgy)
![import { useRef, useState, useTransition } from 'react';
import './App.css';
function App() {
const [isPending, startTransition] = useTransition();
const controllerRef = useRef<null | AbortController>(null);
const [cities, setCities] = useState<string[]>([]);
return (
<>
<select
onChange={(e) => {
controllerRef.current?.abort();
const state = e.currentTarget.value;
startTransition(async () => {
const cities = await getCities(state);
startTransition(() => {
setCities(cities);
});
});
}}
>
<option />
{Object.keys(stateCitites).map((state) => (
<option key={state}>{state}</option>
))}
</select>
<select disabled={isPending}>
{isPending ? (
<option>Loading... </option>
) : (
cities.map((city) => <option key={city}>{city}</option>)
)}
</select>
</>
);
}
const stateCitites: Record<string, string[]> = {
Utah: ['Salt Lake City', 'Provo', 'West Valley City'],
California: ['Los Angeles', 'San Francisco', 'San Diego'],
Texas: ['Houston', 'Dallas', 'Austin'],
Florida: ['Miami', 'Orlando', 'Tampa'],
'New York': ['New York City', 'Buffalo', 'Rochester'],
};
async function getCities(state: string) {
await new Promise((res) => setTimeout(res, Math.random() * 1500 + 100));
return stateCitites[state] ?? [];
}
export default App;](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:2xau7wbgdq4phuou2ypwuen7/bafkreigyvemznvjhkoy34htp7cbznbxerlcs6zmqbrmxq355jvw4amiby4)
![function useAbortableActionState(action, initialState, permalink) {
const controllerRef = (useRef < AbortController) | (null > null)
function abort() {
controllerRef.current?.abort()
}
function wrappedAction(state, payload) {
const controller = new AbortController()
controllerRef.current = controller
return Promise.race([
new Promise() <
never >
((resolve) => {
controller.signal.addEventListener('abort', () => {
console.log('abort', state)
// This will never actually get rendered by react
// Rejecting here however will trigger an error boundary so we just resolve with a junk value
resolve(undefined)
})
}),
action(state, payload),
])
}
return [...useActionState(wrappedAction, initialState, permalink), abort]
}
// Usage:
function App() {
const [cities, abortableAction, isPending, abort] =
useAbortableActionState(action)
return (
<select
onChange={(e) => {
abort()
const state = e.currentTarget.value
startTransition(() => {
updateCitiesAction(state)
})
}}
/>
)
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:2xau7wbgdq4phuou2ypwuen7/bafkreifw6jzs4xmd6yn4ou4t43m6j2zxvsah7orkkfu3cvg4eqaqhhli3q)
