vasille-css 4.0.0 → 5.0.0

package/README.md

@@ -1,19 +1,30 @@
-# 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 bulletproof frontends.
 
 [![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
 
 ## 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)
+    - [5.0.0](#500)
+    - [4.3.0](#430)
+    - [4.2.0](#420)
+    - [4.1.0](#410)
+    - [4.0.0](#400)
+  - [Questions](#questions)
 
 
 <hr>
@@ -21,20 +32,22 @@
 ## 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/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)
@@ -42,14 +55,14 @@ $ npm create vasille
 
 <hr>
 
-## How SAFE is Vasille
+## 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 `vasille` core library are strongly typed, including:
+All entities of `SteelFrameKit` core library are strongly typed, including:
   * data fields & properties.
   * computed properties (function parameters and result).
   * methods.
@@ -59,11 +72,11 @@ All entities of `vasille` core library are strongly typed, including:
   * 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
+## 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,7 +85,7 @@ const App = compose(() => {
 mount(document.body, App, {});
 ```
 
-## How POWERFUL is Vasille
+## How POWERFUL is SteelFrameKit
 
 All of these are supported:
 * Components.
@@ -84,30 +97,48 @@ All of these are supported:
 * 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] Update the `core` library to version 3.0.
 * [x] `100%` Test Coverage for core Library v3.
-* [x] Develop the `Vasille JSX` library.
+* [x] Develop the `JSX` library.
 * [x] `100%` Test Coverage for the JSX library.
-* [x] Develop the `Vasille Babel Plugin`.
+* [x] Develop the `Babel Plugin`.
 * [x] `100%` Test Coverage fot babel plugin.
 * [x] Add CSS support (define styles in components).
 * [x] Add router.
-* [ ] Add SSG (static site generation).
+* [x] Add SSG (static site generation).
+* [ ] Develop tools extension for debugging (WIP).
 * [ ] Add SSR (server side rendering).
-* [ ] Develop tools extension for debugging.
+
+## 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)
-* [Author's Telegram](https://t.me/lixcode)
-
-<hr>
-
-**Made in Moldova** 🇲🇩

package/lib/dev.js

@@ -0,0 +1,26 @@
+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,
+        });
+    }
+    return result;
+}

package/lib/index.js

@@ -1,75 +1,6 @@
-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)");
-            }
-            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);
-    }
-}
+import { insertRule } from "./lib.js";
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "./lib.js";
+let index = 1;
 /**
  * Inserts stylesheet to document
  * @param styles CSS styles based on classes
@@ -79,18 +10,14 @@ export function styleSheet(styles) {
     for (const key in styles) {
         Object.defineProperty(result, key, {
             get() {
-                const className = `v-${++index}`;
+                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);
+                        insertRule(0, item.replace("{}", className));
                     }
                 }
                 styles[key].splice(0);

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.0.0",
-  "description": "The framework designed to build bulletproof frontends (CSS style library)",
+  "version": "5.0.0",
+  "description": "The same framework which is designed to build bulletproof 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,5 @@
+export declare function devStyleSheet<T extends {
+    [k: string]: (string | [number, string])[];
+}>(styles: T): {
+    [K in keyof T]: string;
+};

package/types/index.d.ts

@@ -1,7 +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 setIndex(value: number): void;
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "./lib.js";
 /**
  * Inserts stylesheet to document
  * @param styles CSS styles based on classes

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;

package/eslint.config.js

@@ -1,25 +0,0 @@
-import compat from "eslint-plugin-compat";
-import tseslint from "typescript-eslint";
-import { globalIgnores } from "eslint/config";
-
-export default tseslint.config(
-    tseslint.configs.base,
-    {
-        name: "compat check",
-        files: ["src/**/*.ts", "src/**/*.tsx"],
-        plugins: { compat },
-        rules: {
-            "compat/compat": "error",
-        },
-        settings: {
-            polyfills: [],
-        },
-        languageOptions: {
-            parserOptions: {
-                projectService: false,
-                tsconfigRootDir: import.meta.dirname,
-            },
-        },
-    },
-    globalIgnores(["node_modules", "lib/**/*", "types", "coverage/**/*"]),
-);