Skip to content

Latest commit

 

History

552 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Askr

CI npm version

Askr is a lane-scheduled UI runtime for TypeScript applications. Its single-threaded scheduler serializes queued framework work; it is not a message-passing actor system. Askr provides explicit reactivity, routed application startup, server-side rendering, and static-site generation entrypoints.

Quick Start

import { state } from '@askrjs/askr';
import { createIsland } from '@askrjs/askr/boot';

function Counter() {
  const [count, setCount] = state(0);

  return <button onClick={() => setCount((value) => value + 1)}>{count()}</button>;
}

createIsland({ root: document.body, component: Counter });

The tuple form above and the direct callable form below are equivalent; see State usage forms for when each is convenient.

What It Provides

Runtime

@askrjs/askr exports the core runtime primitives: state(), derive(), selector(), defineScope(), readScope(), getSignal(), and the JSX runtime exports.

Public APIs prefer functions and closures over classes. Lexical ownership uses defineScope() and readScope(); there are no compatibility aliases for the clean-break vocabulary.

App startup, routing, async resources, data helpers, and error boundaries live on their own subpaths.

Explicit reactivity

State is read through getter functions and updated through setter functions.

State usage forms

state() returns one callable state cell that is also iterable. Destructuring it gives the cell as the getter and its .set() method as the setter:

const [count, setCount] = state(0);
console.log(count());
setCount(1);

The same state can be kept as one value and updated through .set():

const count = state(0);
console.log(count());
count.set(1);

Prefer destructuring when local getter and setter names make event handlers clear. Prefer the direct form when passing the state cell around as one value or when keeping reads and writes under one name. Both forms have the same tracking, scheduling, and update semantics.

Routing and app startup

Startup belongs in @askrjs/askr/boot. Routing helpers live in @askrjs/askr/router.

import { createSPA } from '@askrjs/askr/boot';
import { createRouteRegistry, route } from '@askrjs/askr/router';

const registry = createRouteRegistry(() => {
  route('/', Home);
  route('/about', About);
});

createSPA({
  root: document.body,
  registry,
});

Async resources

resource() manages async work with cancellation support.

import { resource } from '@askrjs/askr/resources';

function Data({ id }: { id: string }) {
  const data = resource(async ({ signal }) => {
    const response = await fetch(`/api/${id}`, { signal });
    return response.json();
  }, [id]);

  if (data.pending) return <div>Loading...</div>;
  if (data.error) return <div>Failed to load</div>;
return <div>{data.value.name}</div>;
}

@askrjs/askr/data is the canonical entrypoint for all query, mutation, invalidation, and data-runtime helpers. The root package retains query creation and collection, definition and serving, prefetch, and hydration exports for compatibility with existing applications. Mutation, invalidation, and data-runtime control remain subpath-only. New code should import the whole data surface from @askrjs/askr/data rather than split related imports across entrypoints.

Developer error boundaries

ErrorBoundary is the opt-in boundary primitive for render-time failures. It renders a visible fallback in every environment (with error details expanded by default in development), still logs the underlying error, and can reset via a resetKey tied to your app state. The boundary protects both initial mount and scheduled post-mount updates. Portal content follows its logical writer boundary and can also recover through a boundary around its host.

import { ErrorBoundary } from '@askrjs/askr/components';

function App() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong</div>}>
      <FlakyView />
    </ErrorBoundary>
  );
}

Documentation

Release Notes

The published package is versioned with the repository package.json. Release workflows validate the version tag before publishing.

Install

npm install @askrjs/askr

License

Apache 2.0

About

Actor-backed deterministic UI framework for TypeScript applications.

Topics

Resources

Contributing

Stars

4 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages