API Reference - cynchro/OldSchoolFrontFrame GitHub Wiki
Complete reference for all public OLS APIs.
Bootstrap the application. Import from framework/app/init.js.
import { initApp } from './framework/app/init.js';
const app = initApp({
root: '#app',
routes: { home: 'home' },
fallback: 'home',
store: { user: null },
config: { yamlPath: './config/app.yaml' },
dev: true,
exposeEnv: false,
});| Option | Type | Default | Description |
|---|---|---|---|
root |
string | Element | '#app' |
Mount point selector or DOM element |
routes |
{ [key]: moduleName } |
required | Route map |
fallback |
string | first route key | Route used when hash is empty |
store |
object | {} |
Initial global store state |
config |
string | object | — | Config path options or pre-loaded object |
dev |
boolean | false |
Enable dev mode logs |
exposeEnv |
boolean | false |
Expose config as window.ENV
|
| Method | Description |
|---|---|
app.go(hash) |
Navigate to a hash (e.g. '#/clientes') |
app.getStore() |
Access the global store instance |
app.getConfig() |
Access the loaded config object |
Define a route module. Import from framework/module/module.js.
import { defineModule } from '../../framework/module/module.js';
defineModule({
state: () => ({ count: 0 }),
methods: { increment(ctx) { ctx.state.count++; } },
mounted(ctx) { },
destroyed(ctx) { },
css: false,
});| Option | Type | Description |
|---|---|---|
state |
() => object |
Returns initial module state |
methods |
{ [name]: (ctx, event?) => void } |
Event handlers and logic functions |
mounted |
(ctx) => void |
Called after module is loaded and bound |
destroyed |
(ctx) => void |
Called before module is removed |
css |
boolean | Load <name>.css with scoped styles |
| Property | Type | Description |
|---|---|---|
ctx.state |
Proxy | Module's reactive state |
ctx.root |
Element | Module's root DOM element |
ctx.store |
Store | Global store |
ctx.config |
object | Loaded config |
ctx.props.params |
object | URL route parameters |
ctx.methods |
object | Module's own methods (for calling from hooks) |
Accessible as ctx.store inside modules, or app.getStore() externally.
| Method / Property | Description |
|---|---|
store.state |
Reactive state Proxy — mutate directly |
store.getState() |
Returns a snapshot of the current state |
store.setState(path, value) |
Set value at dot-notation path |
store.patchState(partial) |
Merge partial object into top-level state |
store.subscribe(fn) |
Subscribe to all changes: fn(path, value)
|
store.subscribePath(path, fn) |
Subscribe to a specific path: fn(value)
|
Returned by createRouter() from framework/router/router.js.
import { createRouter } from './framework/router/router.js';
const router = createRouter({
routes: { home: 'home', 'clientes/:id': 'perfil' },
fallback: 'home',
onChange(moduleName, params) { },
});| Method | Description |
|---|---|
router.start() |
Begin listening to hashchange events |
router.stop() |
Stop listening |
router.go(hash) |
Navigate to a hash string |
router.resolve() |
Resolve the current hash immediately |
From framework/component/component.js.
import { Component, defineComponent, mountComponent } from './framework/component/component.js';Creates a component factory. Same definition options as defineModule() plus template.
| Option | Type | Description |
|---|---|---|
state |
() => object |
Initial state |
methods |
object | Methods |
template |
string | Inline HTML template |
mounted |
function | Lifecycle hook |
destroyed |
function | Lifecycle hook |
.mount(root, props?) — mount and return an instance:
| Property | Description |
|---|---|
instance.state |
Reactive state |
instance.methods |
Methods |
instance.root |
Root DOM element |
instance.destroy() |
Unmount and clean up |
Register a component globally by name.
Mount a globally registered component.
From framework/config/config.js.
import { loadConfig } from './framework/config/config.js';
const config = await loadConfig({
yamlPath: './config/app.yaml',
jsonPath: './config/app.json',
prefer: 'yaml', // 'yaml' | 'json'
});From framework/core/reactivity.js. Normally you don't need this — the module and store systems use it internally.
import { createReactiveState } from './framework/core/reactivity.js';
const { state, subscribe, subscribePath } = createReactiveState({ count: 0 });
subscribePath('count', (value) => console.log('count is now', value));
state.count = 5; // → logs "count is now 5"| Return | Description |
|---|---|
state |
Reactive Proxy |
subscribe(fn) |
Listen to all mutations: fn(path, value)
|
subscribePath(path, fn) |
Listen to a specific path: fn(value)
|
When dev: true in initApp():
- Console logs for route changes, module load/unload, state mutations
-
window.$olsis exposed with:
| Property | Description |
|---|---|
window.$ols.store |
Global store reference |
window.$ols.config |
Config reference |
window.$ols.currentModule |
Currently loaded module instance |
