vasille-css 5.0.0 → 7.0.0-rc.2

package/README.md

@@ -2,9 +2,11 @@
 
 ![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.
+`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
 
@@ -19,14 +21,15 @@
   - [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)
+    - [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
@@ -44,37 +47,41 @@ $ 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)
+
+- [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 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 `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.
+- 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 "steel-frame";
 
@@ -88,57 +95,86 @@ 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.
+
+- 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 `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).
+- [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
+We respect semantic versioning:
+
+- 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.
+
+### 7.0
+
+- WIP
+
+### 6.0 RC (never released)
+
+- Add `QueueRenderer`, `ArrayView`, `ArrayModelView`, `SetModelView`, `MapModelView`, `Iterate` and `ForEach` components.
+- `const a = []` is not implicit array model, use explicit `arrayModel`. **[API change]**
+
+### 5.0 - 5.1
 
-Add support for context and dependencies injection.
+- 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.3.0
+### 4.0 - 4.3
 
-Add new function `safe` which make functions safe, errors are reported automatically.
+- 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.
 
-### 4.2.0
+### 3.0 - 3.2
 
-Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator.
+- 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`.
 
-### 4.1.0
+### 2.0 - 2.3
 
-Added SSG (static site generation) as build option `sf build static`.
+- Introduces components compilation via a typescript plugin. **[API change]**
+- New developement direction: `write less, do more`.
 
-### 4.0.0
+### 1.0 - 1.2
 
-Initial version of the framework with file based routing and building scripts (`sf dev` and `sf build spa`).
+- Initial version of a core library.
+- Developemnt direction: `performance-first`.
 
 ## Questions
 
 If you have questions, feel free to contact the maintainer of the project:
 
-* [Author's Email](mailto:vas.lixcode@gmail.com)
+- [Author's Email](mailto:vas.lixcode@gmail.com)

package/lib/dev.js

@@ -1,26 +1,10 @@
-import { insertRule } from "./lib.js";
-let index = 0;
-export function devStyleSheet(styles) {
-    const result = {};
-    for (const key in styles) {
-        Object.defineProperty(result, key, {
-            get() {
-                const className = `vasille-${++index}-${key}`;
-                for (const item of styles[key]) {
-                    if (item instanceof Array) {
-                        const [target, rule] = item;
-                        insertRule(target, rule.replace("{}", className));
-                    }
-                    else {
-                        insertRule(0, item.replace("{}", className));
-                    }
-                }
-                styles[key].splice(0);
-                Object.defineProperty(result, key, { value: className });
-                return className;
-            },
-            configurable: true,
-        });
+import { CssStyleInjector } from "./index.js";
+export class DevCssStyleInjector extends CssStyleInjector {
+    constructor(key, styles) {
+        super(styles);
+        this.key = key;
+    }
+    generateClassName() {
+        return `${super.generateClassName()}-${this.key}`;
     }
-    return result;
 }

package/lib/index.js

@@ -1,6 +1,45 @@
 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) {
+            this.insertRule(item, className);
+        }
+        this.styles.splice(0);
+        return (this.className = className);
+    }
+    generateClassName() {
+        return `vasille-${++index}`;
+    }
+    insertRule(rule, className) {
+        if (rule instanceof Array) {
+            insertRule(rule[0], rule[1].replace("{}", className));
+        }
+        else {
+            insertRule(0, rule.replace("{}", className));
+        }
+    }
+}
+export class SafeCssStyleInjector extends CssStyleInjector {
+    insertRule(rule, className) {
+        try {
+            super.insertRule(rule, className);
+        }
+        catch (e) {
+            // ignore any style related errors
+            void e;
+        }
+    }
+}
 /**
  * Inserts stylesheet to document
  * @param styles CSS styles based on classes
@@ -8,24 +47,7 @@ let index = 1;
 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 {
-                        insertRule(0, item.replace("{}", className));
-                    }
-                }
-                styles[key].splice(0);
-                Object.defineProperty(result, key, { value: className });
-                return className;
-            },
-            configurable: true,
-        });
+        result[key] = new SafeCssStyleInjector(styles[key]);
     }
     return result;
 }

package/lib/lib.js

@@ -22,7 +22,7 @@ function createStyleSheet(media) {
     document.head.append(style);
     return style.sheet;
 }
-export function insertRule(target, rule) {
+export function getStyleSheet(target) {
     let sheet;
     switch (target) {
         case 0:
@@ -68,6 +68,10 @@ export function insertRule(target, rule) {
             sheet = light;
             break;
     }
+    return sheet;
+}
+export function insertRule(target, rule) {
+    const sheet = getStyleSheet(target);
     /* istanbul ignore else */
     if (sheet) {
         sheet.insertRule(rule, sheet.cssRules.length);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vasille-css",
-  "version": "5.0.0",
-  "description": "The same framework which is designed to build bulletproof frontends (CSS style library)",
+  "version": "7.0.0-rc.2",
+  "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": {

package/types/dev.d.ts

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

package/types/index.d.ts

@@ -1,4 +1,15 @@
 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;
+    protected insertRule(rule: string | [number, string], className: string): void;
+}
+export declare class SafeCssStyleInjector extends CssStyleInjector {
+    protected insertRule(rule: string | [number, string], className: string): void;
+}
 /**
  * Inserts stylesheet to document
  * @param styles CSS styles based on classes
@@ -6,5 +17,5 @@ export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "./lib.j
 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

@@ -1,4 +1,5 @@
 export declare function setMobileMaxWidth(value: number): void;
 export declare function setTabletMaxWidth(value: number): void;
 export declare function setLaptopMaxWidth(value: number): void;
+export declare function getStyleSheet(target: number): CSSStyleSheet | undefined;
 export declare function insertRule(target: number, rule: string): void;