vasille-css 4.1.0 → 7.0.0-rc.1

package/README.md

@@ -1,69 +1,89 @@
-# Vasille
+# Steel Frame
 
-![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v4/doc/img/logo.png)
+![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v5/doc/img/logo.png)
 
-`Vasille Web` is a front-end framework, which is developed to provide bulletproof frontends.
+`SteelFrameKit` is a front-end development kit, which is developed to provide fault tolerant web applications.
 
-[![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
+[![npm](https://img.shields.io/npm/v/steel-frame?style=round-square)](https://www.npmjs.com/package/steel-frame)
+[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/vasille-js/steel-frame)
+[![Coverage Status](https://coveralls.io/repos/github/vasille-js/steel-frame/badge.svg?branch=v5)](https://coveralls.io/github/vasille-js/steel-frame?branch=v5)
 
 ## Table of content
 
-* [Installation](#installation)
-* [How to use Vasille](#how-to-use-vasille)
-* [How SAFE is Vasille](#how-safe-is-vasille)
-* [How INTUITIVE is Vasille](#how-intuitive-is-vasille)
-* [How POWERFUL is Vasille](#how-powerful-is-vasille)
-* [Road Map](#road-map)
-
+- [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)
+    - [7.0](#70)
+    - [6.0 RC (never released)](#60-rc-never-released)
+    - [5.0 - 5.1](#50---51)
+    - [4.0 - 4.3](#40---43)
+    - [3.0 - 3.2](#30---32)
+    - [2.0 - 2.3](#20---23)
+    - [1.0 - 1.2](#10---12)
+  - [Questions](#questions)
 
 <hr>
 
 ## Installation
 
 ```
-npm install vasille-web --save
+npm install steel-frame --save
 ```
 
-## How to use Vasille
+## How to use SteelFramekit
 
 Create an app from a template
 
 ```bash
-$ npm create vasille
+$ npm create steel-frame
 ```
 
 ### Full documentation:
-* [Learn `Vasille` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v4/doc/V4-API.md)
-* [Vasille Router Documentation](https://github.com/vasille-js/vasille-js/blob/v4/doc/Router-API.md)
+
+- [Learn `SteelFrameKit` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v5/doc/V4-API.md)
+- [Router Documentation](https://github.com/vasille-js/vasille-js/blob/v5/doc/Router-API.md)
+- [Compostion functions](https://github.com/vasille-js/vasille-js/blob/v5/doc/Compositions.md)
+- [Dependency injection](https://github.com/vasille-js/vasille-js/blob/v5/doc/Context.md)
 
 ### Examples
-* [TypeScript Example](https://github.com/vasille-js/example-typescript)
-* [JavaScript Example](https://github.com/vasille-js/example-javascript)
+
+- [TypeScript Example](https://github.com/vasille-js/example-typescript)
+- [JavaScript Example](https://github.com/vasille-js/example-javascript)
 
 <hr>
 
-## How SAFE is Vasille
+## How SAFE is SteelFrameKit
 
 The safe of your application is ensured by
-* `100%` coverage of code by unit tests.
+
+- `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 `vasille` 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 Vasille
+- OOP, DRY, KISS and SOLID principles are applied.
+- `strong typing` makes your code safe.
+  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 "vasille-dx";
+import { compose, mount } from "steel-frame";
 
 const App = compose(() => {
   <p>Hello world</p>;
@@ -72,52 +92,89 @@ const App = compose(() => {
 mount(document.body, App, {});
 ```
 
-## How POWERFUL is Vasille
+## 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).
+
+- Components.
+- Reactive values (observables).
+- Inline computed values.
+- Multiline computed values.
+- HTML 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 `Vasille Core` library to version 3.0.
-* [x] `100%` Test Coverage for core Library v3.
-* [x] Develop the `Vasille JSX` library.
-* [x] `100%` Test Coverage for the JSX library.
-* [x] Develop the `Vasille 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).
-* [ ] Add SSR (server side rendering).
-* [ ] Develop tools extension for debugging.
+- [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
 
-### 4.0.0
+We respect semantic versioning:
 
-Initial version of the framework with file based routing and building scripts (`vasille-web dev` and `vasille-web build spa`).
+- A major version is increased when we make incompatible API changes.
+- A minor version is increased when we add functionality.
+- Patch version is increased when we fix bugs.
 
-## 4.1.0
+### 7.0
 
-Added SSG (static site generation) as build option `vasille-web build static`.
+- WIP
 
-## Questions
+### 6.0 RC (never released)
 
-If you have questions, feel free to contact the maintainer of the project:
+- Add `QueueRenderer`, `ArrayView`, `ArrayModelView`, `SetModelView`, `MapModelView`, `Iterate` and `ForEach` components.
+- `const a = []` is not implicit array model, use explicit `arrayModel`. **[API change]**
 
-* [Author's Email](mailto:vas.lixcode@gmail.com)
-* [Author's Telegram](https://t.me/lixcode)
+### 5.0 - 5.1
 
-<hr>
+- Add support for context and dependencies injection.
+- New developement direction: `fault tolerant`.
+- Renamed to `steel-frame`. **[API change]**
+- Removed `forward` and `backward` functions. **[API change]**
+- Removed `Debug` component. **[API change]**
+- Add support for web components compile target `web build components`.
+  _Web components as custom tags are supported in any version._
+
+### 4.0 - 4.3
+
+- Initial version of the framework with file based routing and building scripts (`web dev` and `web build spa`).
+- Reactive values naming switched to `$` prefix. **[API change]**
+- `4.1` Added SSG (static site generation) as build option `web build static`.
+- `4.2` Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator.
+- `4.3` Add new function `safe` which make functions safe, errors are reported automatically.
+
+### 3.0 - 3.2
+
+- Switch to a babel plugin to compile components code. **[API change]**
+- 100% of the code has been covered with unit tests.
+- New developement direction: `keep it simple`.
+
+### 2.0 - 2.3
+
+- Introduces components compilation via a typescript plugin. **[API change]**
+- New developement direction: `write less, do more`.
+
+### 1.0 - 1.2
+
+- Initial version of a core library.
+- Developemnt direction: `performance-first`.
+
+## Questions
+
+If you have questions, feel free to contact the maintainer of the project:
 
-**Made in Moldova** 🇲🇩
+- [Author's Email](mailto:vas.lixcode@gmail.com)

package/lib/dev.js

@@ -0,0 +1,17 @@
+import { CssStyleInjector } from "./index.js";
+export class DevCssStyleInjector extends CssStyleInjector {
+    constructor(key, styles) {
+        super(styles);
+        this.key = key;
+    }
+    generateClassName() {
+        return `${super.generateClassName()}-${this.key}`;
+    }
+}
+export function devStyleSheet(styles) {
+    const result = {};
+    for (const key in styles) {
+        result[key] = new DevCssStyleInjector(key, styles[key]);
+    }
+    return result;
+}

package/lib/index.js

@@ -1,73 +1,30 @@
-let common;
-let mobile;
-let tablet;
-let desktop;
-let dark;
-let light;
-let mobileMaxWidth = 440;
-let tabletMaxWidth = 880;
-let laptopMaxWidth = 1320;
-let index = Math.floor(Math.random() * 10);
-export function setMobileMaxWidth(value) {
-    mobileMaxWidth = value;
-}
-export function setTabletMaxWidth(value) {
-    tabletMaxWidth = value;
-}
-export function setLaptopMaxWidth(value) {
-    laptopMaxWidth = value;
-}
-export function setIndex(value) {
-    index = value;
-}
-function createStyleSheet(media) {
-    const style = document.createElement("style");
-    style.media = media;
-    document.head.append(style);
-    return style.sheet;
-}
-function insertRule(target, rule) {
-    let sheet;
-    switch (target) {
-        case 1:
-            /* istanbul ignore else */
-            if (!mobile) {
-                mobile = createStyleSheet(`(max-width:${mobileMaxWidth}px)`);
-            }
-            sheet = mobile;
-            break;
-        case 2:
-            /* istanbul ignore else */
-            if (!tablet) {
-                tablet = createStyleSheet(`(min-width:${mobileMaxWidth}px) and (max-width:${tabletMaxWidth}px)`);
-            }
-            sheet = tablet;
-            break;
-        case 3:
-            /* istanbul ignore else */
-            if (!desktop) {
-                desktop = createStyleSheet(`(min-width:${tabletMaxWidth}px) and (max-width:${laptopMaxWidth}px)`);
-            }
-            sheet = desktop;
-            break;
-        case 4:
-            /* istanbul ignore else */
-            if (!dark) {
-                dark = createStyleSheet("(prefers-color-scheme:dark)");
+import { insertRule } from "./lib.js";
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "./lib.js";
+let index = 1;
+export class CssStyleInjector {
+    constructor(styles) {
+        this.className = null;
+        this.styles = styles;
+    }
+    inject() {
+        if (this.className) {
+            return this.className;
+        }
+        const className = this.generateClassName();
+        for (const item of this.styles) {
+            if (item instanceof Array) {
+                const [target, rule] = item;
+                insertRule(target, rule.replace("{}", className));
             }
-            sheet = dark;
-            break;
-        case 5:
-            /* istanbul ignore else */
-            if (!light) {
-                light = createStyleSheet("(prefers-color-scheme:light)");
+            else {
+                insertRule(0, item.replace("{}", className));
             }
-            sheet = light;
-            break;
+        }
+        this.styles.splice(0);
+        return (this.className = className);
     }
-    /* istanbul ignore else */
-    if (sheet) {
-        sheet.insertRule(rule, sheet.cssRules.length);
+    generateClassName() {
+        return `vasille-${++index}`;
     }
 }
 /**
@@ -77,28 +34,7 @@ function insertRule(target, rule) {
 export function styleSheet(styles) {
     const result = {};
     for (const key in styles) {
-        Object.defineProperty(result, key, {
-            get() {
-                const className = `vasille-${++index}`;
-                for (const item of styles[key]) {
-                    if (item instanceof Array) {
-                        const [target, rule] = item;
-                        insertRule(target, rule.replace("{}", className));
-                    }
-                    else {
-                        /* istanbul ignore else */
-                        if (!common) {
-                            common = createStyleSheet("");
-                        }
-                        common.insertRule(item.replace("{}", className), common.cssRules.length);
-                    }
-                }
-                styles[key].splice(0);
-                Object.defineProperty(result, key, { value: className });
-                return className;
-            },
-            configurable: true,
-        });
+        result[key] = new CssStyleInjector(styles[key]);
     }
     return result;
 }

package/lib/lib.js

@@ -0,0 +1,75 @@
+let common;
+let mobile;
+let tablet;
+let desktop;
+let dark;
+let light;
+let mobileMaxWidth = 440;
+let tabletMaxWidth = 880;
+let laptopMaxWidth = 1320;
+export function setMobileMaxWidth(value) {
+    mobileMaxWidth = value;
+}
+export function setTabletMaxWidth(value) {
+    tabletMaxWidth = value;
+}
+export function setLaptopMaxWidth(value) {
+    laptopMaxWidth = value;
+}
+function createStyleSheet(media) {
+    const style = document.createElement("style");
+    style.media = media;
+    document.head.append(style);
+    return style.sheet;
+}
+export function insertRule(target, rule) {
+    let sheet;
+    switch (target) {
+        case 0:
+            /* istanbul ignore else */
+            if (!common) {
+                common = createStyleSheet("");
+            }
+            sheet = common;
+            break;
+        case 1:
+            /* istanbul ignore else */
+            if (!mobile) {
+                mobile = createStyleSheet(`(max-width:${mobileMaxWidth}px)`);
+            }
+            sheet = mobile;
+            break;
+        case 2:
+            /* istanbul ignore else */
+            if (!tablet) {
+                tablet = createStyleSheet(`(min-width:${mobileMaxWidth}px) and (max-width:${tabletMaxWidth}px)`);
+            }
+            sheet = tablet;
+            break;
+        case 3:
+            /* istanbul ignore else */
+            if (!desktop) {
+                desktop = createStyleSheet(`(min-width:${tabletMaxWidth}px) and (max-width:${laptopMaxWidth}px)`);
+            }
+            sheet = desktop;
+            break;
+        case 4:
+            /* istanbul ignore else */
+            if (!dark) {
+                dark = createStyleSheet("(prefers-color-scheme:dark)");
+            }
+            sheet = dark;
+            break;
+        case 5:
+            /* istanbul ignore else */
+            if (!light) {
+                light = createStyleSheet("(prefers-color-scheme:light)");
+            }
+            sheet = light;
+            break;
+    }
+    /* istanbul ignore else */
+    if (sheet) {
+        sheet.insertRule(rule, sheet.cssRules.length);
+    }
+}

package/package.json

@@ -1,14 +1,22 @@
 {
   "name": "vasille-css",
-  "version": "4.1.0",
-  "description": "The same framework which is designed to build bulletproof frontends (CSS style library)",
+  "version": "7.0.0-rc.1",
+  "description": "The same devkit which is designed to build fault tolerant frontends (CSS style library)",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",
   "exports": {
-    "types": "./types/index.d.ts",
-    "import": "./lib/index.js",
-    "browser": "./lib/index.js",
-    "node": "./lib/index.js"
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./lib/index.js",
+      "browser": "./lib/index.js",
+      "node": "./lib/index.js"
+    },
+    "./dev": {
+      "types": "./types/dev.d.ts",
+      "import": "./lib/dev.js",
+      "browser": "./lib/dev.js",
+      "node": "./lib/dev.js"
+    }
   },
   "type": "module",
   "scripts": {

package/types/dev.d.ts

@@ -0,0 +1,11 @@
+import { CssStyleInjector } from "./index.js";
+export declare class DevCssStyleInjector extends CssStyleInjector {
+    protected key: string;
+    constructor(key: string, styles: (string | [number, string])[]);
+    protected generateClassName(): string;
+}
+export declare function devStyleSheet<T extends {
+    [k: string]: (string | [number, string])[];
+}>(styles: T): {
+    [K in keyof T]: DevCssStyleInjector;
+};

package/types/index.d.ts

@@ -1,7 +1,11 @@
-export declare function setMobileMaxWidth(value: number): void;
-export declare function setTabletMaxWidth(value: number): void;
-export declare function setLaptopMaxWidth(value: number): void;
-export declare function setIndex(value: number): void;
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "./lib.js";
+export declare class CssStyleInjector {
+    protected className: string | null;
+    protected styles: (string | [number, string])[];
+    constructor(styles: (string | [number, string])[]);
+    inject(): string;
+    protected generateClassName(): string;
+}
 /**
  * Inserts stylesheet to document
  * @param styles CSS styles based on classes
@@ -9,5 +13,5 @@ export declare function setIndex(value: number): void;
 export declare function styleSheet<T extends {
     [k: string]: (string | [number, string])[];
 }>(styles: T): {
-    [K in keyof T]: string;
+    [K in keyof T]: CssStyleInjector;
 };

package/types/lib.d.ts

@@ -0,0 +1,4 @@
+export declare function setMobileMaxWidth(value: number): void;
+export declare function setTabletMaxWidth(value: number): void;
+export declare function setLaptopMaxWidth(value: number): void;
+export declare function insertRule(target: number, rule: string): void;