vasille-context 5.0.0

package/README.md

@@ -0,0 +1,144 @@
+# Steel Frame
+
+![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v5/doc/img/logo.png)
+
+`SteelFrameKit` is a front-end development kit, which is developed to provide bulletproof frontends.
+
+[![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
+
+## Table of content
+
+- [Steel Frame](#steel-frame)
+  - [Table of content](#table-of-content)
+  - [Installation](#installation)
+  - [How to use SteelFramekit](#how-to-use-steelframekit)
+    - [Full documentation:](#full-documentation)
+    - [Examples](#examples)
+  - [How SAFE is SteelFrameKit](#how-safe-is-steelframekit)
+  - [How INTUITIVE is SteelFrameKit](#how-intuitive-is-steelframekit)
+  - [How POWERFUL is SteelFrameKit](#how-powerful-is-steelframekit)
+  - [Road map](#road-map)
+  - [Change log](#change-log)
+    - [5.0.0](#500)
+    - [4.3.0](#430)
+    - [4.2.0](#420)
+    - [4.1.0](#410)
+    - [4.0.0](#400)
+  - [Questions](#questions)
+
+
+<hr>
+
+## Installation
+
+```
+npm install steel-frame --save
+```
+
+## How to use SteelFramekit
+
+Create an app from a template
+
+```bash
+$ npm create steel-frame
+```
+
+### Full documentation:
+* [Learn `SteelFrameKit` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v4/doc/V4-API.md)
+* [Router Documentation](https://github.com/vasille-js/vasille-js/blob/v4/doc/Router-API.md)
+* [Compostion functions](https://github.com/vasille-js/vasille-js/blob/v4/doc/Compositions.md)
+* [Dependency injection](https://github.com/vasille-js/vasille-js/blob/v4/doc/Context.md)
+
+### Examples
+* [TypeScript Example](https://github.com/vasille-js/example-typescript)
+* [JavaScript Example](https://github.com/vasille-js/example-javascript)
+
+<hr>
+
+## How SAFE is SteelFrameKit
+
+The safe of your application is ensured by
+* `100%` coverage of code by unit tests.
+  Each function, each branch is working as designed.
+* OOP, DRY, KISS and SOLID principles are applied.
+* `strong typing` makes your javascript/typescript code safe as C++ code.
+All entities of `SteelFrameKit` core library are strongly typed, including:
+  * data fields & properties.
+  * computed properties (function parameters and result).
+  * methods.
+  * events (defined handlers & event emit).
+  * DOM events & DOM operation (attributing, styling, etc.).
+  * slots of components.
+  * references to children.
+* No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
+
+## How INTUITIVE is SteelFrameKit
+
+There is the "Hello World":
+```typescript jsx
+import { compose, mount } from "steel-frame";
+
+const App = compose(() => {
+  <p>Hello world</p>;
+});
+
+mount(document.body, App, {});
+```
+
+## How POWERFUL is SteelFrameKit
+
+All of these are supported:
+* Components.
+* Reactive values (observables).
+* Inline computed values.
+* Multiline computed values.
+* HTML & SVG tags.
+* Component custom slots.
+* 2-way data binding in components.
+* Logic block (if, else).
+* Loops (array, map, set).
+* Dependency injection.
+
+<hr>
+
+## Road map
+
+* [x] Update the `core` library to version 3.0.
+* [x] `100%` Test Coverage for core Library v3.
+* [x] Develop the `JSX` library.
+* [x] `100%` Test Coverage for the JSX library.
+* [x] Develop the `Babel Plugin`.
+* [x] `100%` Test Coverage fot babel plugin.
+* [x] Add CSS support (define styles in components).
+* [x] Add router.
+* [x] Add SSG (static site generation).
+* [ ] Develop tools extension for debugging (WIP).
+* [ ] Add SSR (server side rendering).
+
+## Change log
+
+### 5.0.0
+
+Add support for context and dependencies injection.
+
+### 4.3.0
+
+Add new function `safe` which make functions safe, errors are reported automatically.
+
+### 4.2.0
+
+Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator.
+
+### 4.1.0
+
+Added SSG (static site generation) as build option `sf build static`.
+
+### 4.0.0
+
+Initial version of the framework with file based routing and building scripts (`sf dev` and `sf build spa`).
+
+## Questions
+
+If you have questions, feel free to contact the maintainer of the project:
+
+* [Author's Email](mailto:vas.lixcode@gmail.com)

package/lib/index.js

@@ -0,0 +1,52 @@
+import { Fragment } from "vasille";
+const searchMap = new Map();
+function lookUp(node, key) {
+    let it = node;
+    while (it) {
+        const value = searchMap.get(it)?.get(key);
+        if (value !== undefined) {
+            return value;
+        }
+        it = it instanceof Fragment ? it.parent : null;
+    }
+}
+function setUp(node, key, value) {
+    let map = searchMap.get(node);
+    if (!map) {
+        const created = (map = new Map());
+        searchMap.set(node, created);
+        node.runOnDestroy(() => created.delete(node));
+    }
+    map.set(key, value);
+    return value;
+}
+export class SteelContext {
+    fn;
+    constructor(fn) {
+        this.fn = fn;
+    }
+}
+export function context(fn) {
+    return new SteelContext(fn);
+}
+export function share(node, target, ...args) {
+    if (target instanceof SteelContext) {
+        return setUp(node, target, target.fn(...args));
+    }
+    return setUp(node, target, args[0]);
+}
+export function receive(node, key) {
+    const value = lookUp(node, key);
+    if (value === undefined) {
+        throw new Error(`Missing value for key "${key}"`);
+    }
+    return value;
+}
+export function impute(node, target, ...args) {
+    if (target instanceof SteelContext || typeof target === "string") {
+        // @ts-expect-error
+        return lookUp(node, target) ?? share(node, target, ...args);
+    }
+    // @ts-expect-error
+    return lookUp(node, target) ?? share(node, target, args[0]());
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "vasille-context",
+  "version": "5.0.0",
+  "description": "Provide contextual data between Vasille.JS components",
+  "keywords": [
+    "frontend",
+    "framework",
+    "safe",
+    "fast",
+    "simple"
+  ],
+  "license": "MIT",
+  "author": "lixcode",
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+      ".": {
+          "types": "./types/index.d.ts",
+          "import": "./lib/index.js",
+          "browser": "./lib/index.js"
+      }
+  },
+  "scripts": {
+    "prepack": "cp -f ../README.md ./README.md",
+    "prettier": "npx prettier src test --write",
+    "prebuild": "rm -rf types lib",
+    "build": "tsc --build tsconfig.json",
+    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
+    "test-coverage": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vasille-js/steel-frame.git"
+  },
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "cross-env": "^10.1.0",
+    "jest": "^30.2.0",
+    "prettier": "^3.8.1",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "vasille": "^5.0.0"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,15 @@
+import { Reactive } from "vasille";
+export declare class SteelContext<Args extends unknown[], Value> {
+    readonly fn: (...args: Args) => Value;
+    constructor(fn: (...args: Args) => Value);
+}
+export declare function context<Value, Args extends unknown[] = never[]>(fn: (...args: Args) => Value): SteelContext<Args, Value>;
+export declare function share<Args extends unknown[], Value>(node: Reactive, ctx: SteelContext<Args, Value>, ...args: Args): Value;
+export declare function share<Class>(node: Reactive, className: abstract new (...args: unknown[]) => Class, value: Class): Class;
+export declare function share(node: Reactive, key: string, value: string): string;
+export declare function receive<Args extends unknown[], Value>(node: Reactive, ctx: SteelContext<Args, Value>): Value;
+export declare function receive<Class>(node: Reactive, className: abstract new (...args: unknown[]) => Class): Class;
+export declare function receive(node: Reactive, key: string): string;
+export declare function impute<Args extends unknown[], Value>(node: Reactive, ctx: SteelContext<Args, Value>, ...args: Args): Value;
+export declare function impute<Class>(node: Reactive, className: abstract new (...args: unknown[]) => Class, value: () => Class): Class;
+export declare function impute(node: Reactive, key: string, value: string): string;