@onetype/framework 2.0.42 → 2.0.44

package/docs/frontend.md

@@ -1,396 +0,0 @@
-# Frontend
-
-Proxy-based reactivity with DOM diffing, Vue-like directives, SPA page routing, and convention-based asset bundling.
-
-## Pages
-
-Pages define routes with async data loading, CSS Grid layouts, and template areas.
-
-```js
-pages.ItemAdd({
-    id: 'home',
-    route: '/',
-    title: 'Home',
-    grid: {
-        template: '"content"',
-        columns: '1fr',
-        rows: '1fr'
-    },
-    areas: {
-        content: function() {
-            return `
-                <div class="page-home">
-                    <c-navbar></c-navbar>
-                    <c-hero title="Welcome"></c-hero>
-                    <c-footer></c-footer>
-                </div>
-            `;
-        }
-    }
-});
-```
-
-### Route params
-
-```js
-pages.ItemAdd({
-    id: 'offer',
-    route: '/ponuda/:id/:type/:location/:name',
-    // ...
-});
-```
-
-Params are available in `this.parameters`:
-
-```js
-areas: {
-    content: function() {
-        const id = this.parameters.id;
-        // ...
-    }
-}
-```
-
-### Multiple routes
-
-```js
-route: ['/offers', '/offers/:type/:value']
-```
-
-### Async data loading
-
-The `data` function runs before render:
-
-```js
-pages.ItemAdd({
-    id: 'offer',
-    route: '/ponuda/:id/:type/:location/:name',
-
-    title: function(parameters, data) {
-        return data?.offer?.name || 'Offer';
-    },
-
-    data: async function(parameters) {
-        const offer = await offers.Find()
-            .filter('id', parameters.id)
-            .join('files', 'cover_id', 'cover')
-            .join('countries', 'countries', 'countries')
-            .join('cities', 'cities', 'cities')
-            .one();
-
-        return { offer: offer ? offer.data : null };
-    },
-
-    areas: {
-        content: function() {
-            this.offer = this.data.offer || {};
-
-            return `
-                <div>
-                    <h1>{{ offer.name }}</h1>
-                    <span ot-if="offer.stars">{{ offer.stars }} stars</span>
-                </div>
-            `;
-        }
-    }
-});
-```
-
-### Interactive pages
-
-Pages can have local state and methods:
-
-```js
-areas: {
-    content: function() {
-        this.items = [];
-        this.page = 1;
-        this.total = 0;
-
-        this.fetch = async () => {
-            const result = await offers.Find()
-                .filter('status', 'Aktivna')
-                .sort('score', 'desc')
-                .page(this.page)
-                .limit(12)
-                .plain();
-
-            this.items = result.items;
-            this.total = result.total;
-        };
-
-        this.handlePageChange = (newPage) => {
-            this.page = newPage;
-            this.fetch();
-        };
-
-        this.fetch();
-
-        return `
-            <div>
-                <span>{{ total }} results</span>
-
-                <div ot-if="items.length > 0" class="grid">
-                    <a ot-for="offer in items" :href="'/offer/' + offer.id">
-                        <c-offer-card :offer="offer"></c-offer-card>
-                    </a>
-                </div>
-
-                <c-pagination
-                    :page="page"
-                    :pages="Math.ceil(total / 12)"
-                    :_change="handlePageChange"
-                ></c-pagination>
-            </div>
-        `;
-    }
-}
-```
-
-Setting `this.items`, `this.page`, or `this.total` triggers a 16ms debounced re-render with DOM diffing.
-
-## Components
-
-Reusable UI elements with typed config and template rendering.
-
-```js
-components.ItemAdd({
-    id: 'hero',
-    config: {
-        title: { type: 'string', value: 'Page Title' },
-        subtitle: { type: 'string', value: '' },
-        image: { type: 'string', value: '' },
-        variant: { type: 'array', value: [], options: ['compact', 'tall'] }
-    },
-    render: function() {
-        return `
-            <section class="holder" :style="'background-image: url(' + image + ')'">
-                <div class="overlay"></div>
-                <div class="content">
-                    <slot name="top"></slot>
-                    <h1>{{ title }}</h1>
-                    <p ot-if="subtitle">{{ subtitle }}</p>
-                </div>
-            </section>
-        `;
-    }
-});
-```
-
-### Using components
-
-Components become custom elements prefixed with `c-`:
-
-```html
-<c-hero title="Our Offers" subtitle="Find your trip" image="/hero.jpg">
-    <div slot="top">
-        <c-breadcrumb :items="[{label: 'Home', href: '/'}, {label: 'Offers'}]"></c-breadcrumb>
-    </div>
-</c-hero>
-```
-
-### Config types
-
-```js
-config: {
-    title: { type: 'string', value: 'Default' },
-    count: { type: 'number', value: 0 },
-    active: { type: 'boolean', value: true },
-    items: { type: 'array', value: [] },
-    data: { type: 'object', value: {} },
-    variant: { type: 'array', value: [], options: ['size-s', 'size-m', 'size-l'] },
-    _click: { type: 'function' },        // callback (prefixed with _)
-    _change: { type: 'function' }
-}
-```
-
-### Component with logic
-
-```js
-components.ItemAdd({
-    id: 'pagination',
-    config: {
-        page: { type: 'number', value: 1 },
-        pages: { type: 'number', value: 1 },
-        _change: { type: 'function' }
-    },
-    render: function() {
-        this.goToPage = (num) => {
-            if (num >= 1 && num <= this.pages) {
-                this.page = num;
-                if (this._change) this._change(num);
-            }
-        };
-
-        return `
-            <div class="pagination">
-                <button ot-click="() => goToPage(page - 1)" :disabled="page === 1">Prev</button>
-                <span>{{ page }} / {{ pages }}</span>
-                <button ot-click="() => goToPage(page + 1)" :disabled="page === pages">Next</button>
-            </div>
-        `;
-    }
-});
-```
-
-## Directives
-
-Vue-like syntax, processed during compile with priority ordering.
-
-### Conditional rendering
-
-```html
-<div ot-if="items.length > 0">Has items</div>
-<div ot-if="!loading">Content loaded</div>
-```
-
-### List rendering
-
-```html
-<a ot-for="offer in items" :href="'/offer/' + offer.id">
-    {{ offer.name }}
-</a>
-
-<!-- With index -->
-<div ot-for="item, index in items">
-    {{ index }}: {{ item.name }}
-</div>
-```
-
-### Event handlers
-
-```html
-<button ot-click="submit">Send</button>
-<button ot-click="() => goToPage(3)">Page 3</button>
-<input :_input="(e) => form.name = e.target.value">
-```
-
-### Dynamic attributes
-
-```html
-<img :src="getImage()" :alt="name" loading="lazy">
-<div :class="'card ' + (active ? 'active' : '')">
-<div :style="'background-image: url(' + image + ')'">
-<button :disabled="page === 1">
-<article :variant="variant.join(' ')">
-```
-
-### Text interpolation
-
-```html
-<span>{{ total }} results</span>
-<h1>{{ offer.name }}</h1>
-<span>{{ getStars() }}</span>
-```
-
-### All directives
-
-`ot-if`, `ot-show`, `ot-for`, `ot-click`, `ot-text`, `ot-html`, `ot-fetch`, `ot-render`, `ot-form`, and all DOM event handlers.
-
-## Reactivity
-
-Setting any property on a render context triggers a re-render:
-
-```js
-this.count = 0;
-this.increment = () => this.count++;  // triggers DOM update
-```
-
-Updates are batched with a 16ms debounce. The framework diffs the new DOM against the current DOM and patches only what changed. No virtual DOM — direct DOM diffing.
-
-Lifecycle: `init → render → compile → ready → mount → update → unmount → destroy`.
-
-## Slots
-
-Components can define named slots:
-
-```js
-render: function() {
-    return `
-        <div>
-            <slot name="top"></slot>
-            <div class="content">
-                <slot></slot>
-            </div>
-        </div>
-    `;
-}
-```
-
-Usage:
-
-```html
-<c-layout>
-    <div slot="top">Header content</div>
-    <p>Default slot content</p>
-</c-layout>
-```
-
-## Asset bundling
-
-Convention-based bundler that scans directories, strips ES module syntax, concatenates, and minifies.
-
-### Asset registry
-
-All asset paths are registered centrally in `lib/load.js` via `onetype.Assets()`. The import function resolves IDs to paths from this registry.
-
-```js
-// In application back/index.js — import by ID
-assets.Fn('import', ['framework', 'styles', 'commands', 'elements/input', 'transforms/swiper']);
-```
-
-Available asset IDs:
-
-| ID | Type | Description |
-|---|---|---|
-| `framework` | js | Core framework library |
-| `styles` | css | Shared CSS (variables, reset, queries, utilities) |
-| `commands` | js | Command system (front-end) |
-| `database` | js | Database (front-end) |
-| `directives` | js | Directives addon |
-| `transforms` | js | Transforms addon |
-| `pages` | js+css | Page router addon |
-| `elements` | js+css | Elements addon |
-| `float` | js+css | Float system (modals, toasts, tooltips, popups, overlays) |
-| `elements/form/input` | js+css | Granular element import |
-| `transforms/swiper` | js | Granular transform import |
-
-Granular imports use `elements/<group>/<name>` and `transforms/<name>` format. Element groups: `form`, `global`, `sections`, `status`.
-
-### Manual asset items
-
-```js
-// Scan a custom directory
-assets.Item({ type: 'js', order: 2, path: resolve(root, 'front') });
-assets.Item({ type: 'css', order: 2, path: resolve(root, 'front') });
-```
-
-### Dynamic content injection
-
-Inject server-side data into the frontend bundle:
-
-```js
-assets.Item({
-    type: 'js',
-    order: 4,
-    content: function() {
-        const items = Object.values(settings.Items())
-            .filter(item => item.Get('organization_id') === 9)
-            .map(item => item.data);
-
-        return `settings.ItemsAdd(${JSON.stringify(items)}, null, false);`;
-    }
-});
-```
-
-This runs at bundle time — server-side data becomes available client-side without an API call.
-
-### How it works
-
-1. Scans directories recursively for `.js` or `.css` files
-2. Prioritizes `addon.js` files (loaded first)
-3. Strips `import`/`export` statements
-4. Concatenates by `order` value
-5. Minifies via terser
-
-No webpack, no build step, no configuration files.

package/docs/servers.md

@@ -1,187 +0,0 @@
-# Servers
-
-HTTP and gRPC servers, both configured through the commands addon.
-
-## HTTP server
-
-```js
-import commands from '#commands/load.js';
-
-commands.Fn('http.server', 3000, {
-    onStart: (server) => {
-        console.log('HTTP server started on port 3000');
-    },
-    onResponse: (http) => {
-        // Called after each response
-    },
-    onError: (error) => {
-        console.log('HTTP server error:', error.message);
-    }
-});
-```
-
-## HTTP object
-
-Every request creates an `http` object passed to `onRequest` and command callbacks (via `this.http`):
-
-| Property | Type | Description |
-|---|---|---|
-| `request` | IncomingMessage | Node.js request (headers, method, url) |
-| `response` | ServerResponse | Node.js response (writeHead, setHeader, end) |
-| `data` | object | Parsed request data (query params + body) |
-| `url` | URL | Parsed request URL |
-| `user` | object | `{ ip, agent, forwarded, referrer }` |
-| `respond` | object | `{ type, data, message, code }` — response payload |
-| `prevent` | boolean | Set `true` to skip automatic response |
-
-## Cookies
-
-Built-in cookie support via `onetype.Cookie*` methods. Works on both front (browser) and back (server) — detected via `onetype.environment`.
-
-### Back (server)
-
-```js
-// Read from request
-const token = onetype.CookieGet('token', this.http.request);
-
-// Set on response (HttpOnly + Secure by default)
-onetype.CookieSet('token', value, {
-    path: '/',
-    maxAge: 86400,
-    sameSite: 'Strict'
-}, this.http.response);
-
-// Clear
-onetype.CookieClear('token', { path: '/' }, this.http.response);
-```
-
-### Front (browser)
-
-```js
-onetype.CookieSet('theme', 'dark', { path: '/', maxAge: 86400 });
-const theme = onetype.CookieGet('theme');
-onetype.CookieClear('theme');
-```
-
-### Options
-
-| Option | Back default | Front default | Description |
-|---|---|---|---|
-| `path` | — | — | Cookie path |
-| `maxAge` | — | — | Lifetime in seconds |
-| `domain` | — | — | Cookie domain |
-| `httpOnly` | `true` | N/A | JS can't read the cookie |
-| `secure` | `true` | `false` | HTTPS only |
-| `sameSite` | — | — | `Strict`, `Lax`, or `None` |
-
-## gRPC server
-
-Bidirectional streaming with automatic reconnection and binary data transport.
-
-```js
-commands.Fn('grpc.server', 50000, {
-    onStart: function() {
-        console.log('gRPC server started on port 50000');
-    },
-    onStreamConnect: async function(stream) {
-        // Authenticate via metadata
-        const node = await nodes.Fn('find', stream.metadata.get('token')[0]);
-
-        // Track the connection as an item
-        const connection = streams.Item({
-            gateway_id: gateway.Get('id'),
-            node_id: node.Get('id')
-        });
-        await connection.Create();
-
-        // Attach runtime state via Store
-        connection.StoreSet('gateway', gateway);
-        connection.StoreSet('node', node);
-        connection.StoreSet('stream', stream);
-
-        stream.connection = connection;
-
-        console.log('Connection established:', node.Get('name'));
-    },
-    onStreamEnd: function(stream) {
-        if (stream.connection) {
-            const node = stream.connection.StoreGet('node');
-            console.log('Disconnected:', node.Get('name'));
-
-            stream.connection.Delete();
-            stream.connection.Remove();
-        }
-    },
-    onStreamError: function(stream) {
-        console.log('Stream error');
-    },
-    onError: function(message) {
-        console.log('Server error:', message);
-    }
-});
-```
-
-## Binary transport
-
-gRPC messages are JSON strings. Binary data (Buffers) is automatically extracted into a separate `map<string, bytes>` field before sending and re-injected on receive.
-
-```js
-// Extract binaries from a data object
-const extracted = onetype.BinariesExtract(data);
-// extracted.data    → JSON-safe object (Buffers replaced with keys)
-// extracted.binaries → map of key → Buffer
-
-// Re-inject binaries
-const restored = onetype.BinariesInject(extracted.data, extracted.binaries);
-```
-
-This enables transparent file transfers over the same gRPC stream without base64 encoding.
-
-## Store API
-
-Per-item in-memory key-value storage — useful for attaching runtime state (like gRPC streams) to items:
-
-```js
-// Set
-connection.StoreSet('node', nodeItem);
-connection.StoreSet('stream', streamObject);
-
-// Get
-const node = connection.StoreGet('node');
-const stream = connection.StoreGet('stream');
-```
-
-Store data is never persisted to the database. It exists only in memory for the lifetime of the item.
-
-## Requesting over gRPC
-
-Send a request to a connected node and await the response:
-
-```js
-const response = await stream.request('tool-slug', inputProperties, (chunk) => {
-    // Optional: handle streaming chunks
-    resolve(chunk.data, chunk.message, chunk.code, false);
-});
-
-// response.data, response.message, response.code, response.time
-```
-
-## Graceful shutdown
-
-The framework handles process signals through middleware:
-
-```js
-process.on('SIGINT', async () => {
-    await onetype.Middleware('sigint');
-    await onetype.Middleware('shutdown');
-    process.exit(0);
-});
-```
-
-Register shutdown handlers:
-
-```js
-onetype.MiddlewareAdd('shutdown', async () => {
-    // Close connections, flush data, etc.
-});
-```

package/examples/basic-api/README.md

@@ -1,34 +0,0 @@
-# Basic API
-
-In-memory task CRUD API using the commands addon.
-
-## Run
-
-```bash
-node index.js
-```
-
-## Endpoints
-
-| Method | Endpoint | Description |
-|--------|----------|-------------|
-| GET | /api/tasks | List all tasks |
-| POST | /api/tasks | Create a task |
-| PUT | /api/tasks/:id | Toggle task done |
-| DELETE | /api/tasks/:id | Delete a task |
-
-## Example
-
-```bash
-# Create
-curl -X POST http://localhost:3000/api/tasks -d '{"title":"Buy milk"}'
-
-# List
-curl http://localhost:3000/api/tasks
-
-# Toggle
-curl -X PUT http://localhost:3000/api/tasks/1234
-
-# Delete
-curl -X DELETE http://localhost:3000/api/tasks/1234
-```

package/examples/basic-api/addons/tasks/addon.js

@@ -1,10 +0,0 @@
-import onetype from 'onetype';
-
-const tasks = onetype.Addon('tasks', (addon) =>
-{
-    addon.Field('id', ['number']);
-    addon.Field('title', ['string', null, true]);
-    addon.Field('done', ['boolean', false]);
-});
-
-export default tasks;

package/examples/basic-api/addons/tasks/items/commands/create.js

@@ -1,22 +0,0 @@
-import commands from 'onetype/commands';
-import tasks from '../../addon.js';
-
-commands.Item({
-    id: 'tasks:create',
-    method: 'POST',
-    endpoint: '/api/tasks',
-    exposed: true,
-    in: {
-        title: ['string', null, true]
-    },
-    callback: async function(properties, resolve)
-    {
-        const task = tasks.Item({
-            id: Date.now(),
-            title: properties.title,
-            done: false
-        });
-
-        resolve({ task: task.Get(['id', 'title', 'done']) });
-    }
-});

package/examples/basic-api/addons/tasks/items/commands/delete.js

@@ -1,26 +0,0 @@
-import commands from 'onetype/commands';
-import tasks from '../../addon.js';
-
-commands.Item({
-    id: 'tasks:delete',
-    method: 'DELETE',
-    endpoint: '/api/tasks/:id',
-    exposed: true,
-    in: {
-        id: ['number', null, true]
-    },
-    callback: async function(properties, resolve)
-    {
-        const items = Object.values(tasks.Items());
-        const task = items.find(item => item.Get('id') === properties.id);
-
-        if(!task)
-        {
-            return resolve(null, 'Task not found', 404);
-        }
-
-        task.Remove();
-
-        resolve({ success: true });
-    }
-});

package/examples/basic-api/addons/tasks/items/commands/list.js

@@ -1,17 +0,0 @@
-import commands from 'onetype/commands';
-import tasks from '../../addon.js';
-
-commands.Item({
-    id: 'tasks:list',
-    method: 'GET',
-    endpoint: '/api/tasks',
-    exposed: true,
-    callback: async function(properties, resolve)
-    {
-        const items = Object.values(tasks.Items());
-
-        resolve({
-            tasks: items.map(item => item.Get(['id', 'title', 'done']))
-        });
-    }
-});