{"id":18305270,"url":"https://github.com/codi0/fstage","last_synced_at":"2026-05-18T05:46:35.625Z","repository":{"id":232048166,"uuid":"230776180","full_name":"codi0/fstage","owner":"codi0","description":"Build your own javascript framework. Create PWAs and more.","archived":false,"fork":false,"pushed_at":"2026-03-18T01:30:28.000Z","size":871,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-03-18T03:43:51.020Z","etag":null,"topics":["capacitor","framework","fstage","ionic","javascript","litelement","pwa"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codi0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-12-29T16:35:13.000Z","updated_at":"2026-03-18T01:30:32.000Z","dependencies_parsed_at":"2025-11-24T02:02:25.120Z","dependency_job_id":null,"html_url":"https://github.com/codi0/fstage","commit_stats":null,"previous_names":["codi0/fstage"],"tags_count":39,"template":false,"template_full_name":null,"purl":"pkg:github/codi0/fstage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codi0%2Ffstage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codi0%2Ffstage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codi0%2Ffstage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codi0%2Ffstage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codi0","download_url":"https://codeload.github.com/codi0/fstage/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codi0%2Ffstage/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33166885,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T05:43:36.989Z","status":"ssl_error","status_checked_at":"2026-05-18T05:43:19.133Z","response_time":71,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["capacitor","framework","fstage","ionic","javascript","litelement","pwa"],"created_at":"2024-11-05T15:33:38.244Z","updated_at":"2026-05-18T05:46:35.620Z","avatar_url":"https://github.com/codi0.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fstage [ALPHA v0.6.0]\n\nA modular ES module toolkit for building JavaScript apps — no build step required.\n\nFstage is a platform layer: it provides a loader, import map resolution, and a set of composable modules you use to assemble your own framework. Works with any rendering library (LitElement, plain DOM, etc.).\n\n\u003e Alpha — breaking changes may occur.\n\n## Design philosophy\n\n- **No build step** — native ES modules and import maps only\n- **Platform stability** — conservative ES2020 baseline, explicit control flow, minimal dependencies (see [CONTRIBUTING.md](CONTRIBUTING.md))\n- **Composable** — use only the modules you need; wire them together via the registry\n- **No component lock-in** — the component model is defined by a [versioned open standard](specs/component-standard.md) that any runtime can implement\n\n## Requirements\n\n- ES module support (`\u003cscript type=\"module\"\u003e`)\n- Import map support (Safari 16.4+, Chrome 96+)\n\n## Quick start\n\n1. Add the fstage loader to your HTML and set a config path:\n\n```html\n\u003cscript\u003e\n  window.FSCONFIG = { configPath: 'js/config.mjs' };\n\u003c/script\u003e\n\u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/gh/codi0/fstage@latest/src/js/fstage.min.mjs\"\u003e\u003c/script\u003e\n```\n\n2. Create `js/config.mjs` — this is where you declare your import map, load phases, and wire up services. See the [tasks example config](examples/tasks/js/config.mjs) for a complete reference, or the [starter example config](examples/starter/js/config.mjs) for an annotated walkthrough.\n\nfstage dispatches `fstage.ready` on `window` when the app is loaded, and `fstage.failed` on error.\n\n## How it works\n\nApps load in sequential phases declared under `loadAssets` in your config:\n\n```js\nexport default {\n  importMap: {\n    'lit': 'https://cdn.jsdelivr.net/npm/lit-element@4/+esm',\n  },\n  loadAssets: {\n    preload: [ '@fstage/env', '@fstage/registry', '@fstage/stack' ],\n    libs:    [ 'lit', '@fstage/component', '@fstage/store', '@fstage/sync',\n               '@fstage/history', '@fstage/router', '@fstage/animator',\n               '@fstage/gestures', '@fstage/transitions',\n               '@fstage/interactions', '@fstage/form' ],\n    app:     [ 'js/components/app.mjs', 'css/style.css' ],\n  },\n  router: {\n    urlScheme: 'hash',\n    routes: [ { path: '/', meta: { component: 'my-home', title: 'Home' } } ],\n  },\n  storage: { name: 'myapp', schemas: { items: { keyPath: 'id' } } },\n  afterLoadPreload(e) { e.get('stack.wirePreload', [ e ]); },\n  afterLoadLibs(e)    { e.get('stack.wireStack',   [ e ]); },\n  afterLoadApp(e)     { e.get('stack.startStack',  [ e ]); },\n};\n```\n\nEach phase completes before the next starts. `afterLoad`, `afterLoadPreload`, `afterLoadLibs`, and `afterLoadApp` hooks fire at the end of each phase. The **registry** is the central service locator — modules register instances there and components inject what they need.\n\n[`@fstage/stack`](src/js/stack/) provides `wirePreload`, `wireStack`, and `startStack` helpers that handle all standard service wiring from config keys alone. Hooks receive an `e` object with a `get(path, args?)` helper:\n\n```js\ne.get('config')                          // full config object\ne.get('config.debug')                    // nested config value\ne.get('stack.wireStack', [ e ])          // calls wireStack(e)\ne.get('store.createStore', [])           // calls createStore(), returns instance\n```\n\nSee the [getting started guide](docs/getting-started.md) for a full walkthrough.\n\n## Examples\n\n| Example | Description |\n|---------|-------------|\n| [`examples/starter`](examples/starter/) | Minimal annotated shell — single route, counter demo, start here |\n| [`examples/tasks`](examples/tasks/) | Complete To-Do PWA — sync, offline, animations, gestures, Capacitor |\n\n```sh\ncd examples/starter \u0026\u0026 npx serve .\n```\n\nSee [`examples/README.md`](examples/README.md) for details.\n\n## Modules\n\n| Module | Description |\n|--------|-------------|\n| [`stack`](src/js/stack/) | Default service wiring — `wirePreload`, `wireStack`, `startStack` helpers that replace ~80 lines of `afterLoadLibs`/`afterLoadApp` boilerplate with a single call |\n| [`store`](src/js/store/) | Reactive store — get/set/watch, computed, effects, and a full data-lifecycle system (fetch, cache, TTL, optimistic updates, pagination) |\n| [`sync`](src/js/sync/) | Offline-first sync — local-first reads/writes, remote handler abstraction, write queue with exponential backoff retry. **Also re-exports `storage` and `http`** — import from here unless you need those modules standalone |\n| [`storage`](src/js/storage/) | Two-tier IndexedDB — simple key/value blob store or schema-based rows with SQL-like querying. Re-exported by `sync` |\n| [`http`](src/js/http/) | Thin fetch wrapper with timeout, form/JSON body helpers, and response parsing. Re-exported by `sync` |\n| [`router`](src/js/router/) | Client-side router — deterministic matching, param extraction, navigation handler, scroll state |\n| [`history`](src/js/history/) | Browser history abstraction — hash, query string, or path URL schemes |\n| [`component`](src/js/component/) | Web component runtime implementing the [Universal Component Definition Standard](specs/component-standard.md) — declarative state, bindings, watches, computed, animations, interactions |\n| [`registry`](src/js/registry/) | Service registry / DI container — the glue between modules |\n| [`env`](src/js/env/) | Platform detection, capability facts, and a layered policy system with CSS variable output |\n| [`animator`](src/js/animator/) | WAAPI animation engine — named presets, toggle controllers, flip, stagger, collapse |\n| [`transitions`](src/js/transitions/) | View transition engine and screen host for page-level animations |\n| [`interactions`](src/js/interactions/) | Delegated event handling with debounce/throttle and gesture/transition extensions |\n| [`gestures`](src/js/gestures/) | Touch/pointer gesture detection — swipe, edge pan, long press, tap |\n| [`ui`](src/js/ui/) | Reusable, accessible UI primitives — `fs-action-sheet` (imperative iOS-style sheet), `fs-bottom-sheet` (swipe-dismissable modal), `fs-dialog` (centered modal), `fs-disclosure` (animated show/hide), `fs-listbox` (keyboard-navigable select with typeahead). All unstyled, CSS-custom-property driven |\n| [`form`](src/js/form/) | Form utilities |\n| [`ssr`](src/js/ssr/) | Server-side rendering via Declarative Shadow DOM — `createSsrRuntime` + `renderToString`. Supports state defaults, reactive getters, all `$src` shorthands, host attribute stamping, and per-call error handling. Requires `@lit-labs/ssr` as a peer dep |\n| [`devtools`](src/js/devtools/) | Debug panel — store event log, sync queue inspector, storage browser |\n| [`webpush`](src/js/webpush/) | Web Push subscription management |\n| [`websocket`](src/js/websocket/) | WebSocket wrapper |\n| [`hls`](src/js/hls/) | HLS video stream helper |\n| [`ipfs`](src/js/ipfs/) | IPFS integration |\n| [`utils`](src/js/utils/) | Shared primitives: deep copy, equality, diff, hash, debounce, schedule, nested key access, DOM helpers |\n\n## Documentation\n\n- [Getting started](docs/getting-started.md)\n- [Stack — default wiring](docs/stack.md)\n- [UI primitives](docs/ui.md)\n- [SSR — server-side rendering](docs/ssr.md)\n- [Store](docs/store.md)\n- [Data layer — storage, sync, http](docs/data.md)\n- [Routing — router, history](docs/routing.md)\n- [Components](docs/components.md)\n- [Platform — env, animator, transitions, gestures, interactions](docs/platform.md)\n- [Utilities — utils, registry](docs/utilities.md)\n- [Component Definition Standard](specs/component-standard.md)\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for the coding standard, syntax baseline, and source style guide.\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodi0%2Ffstage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodi0%2Ffstage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodi0%2Ffstage/lists"}