vasille-css 3.0.5 → 3.2.1

package/README.md

@@ -11,7 +11,7 @@
 * [Installation](#installation)
 * [How to use Vasille](#how-to-use-vasille)
 * [How SAFE is Vasille](#how-safe-is-vasille)
-* [How SIMPLE is Vasille](#how-simple-is-vasille)
+* [How INTUITIVE is Vasille](#how-intuitive-is-vasille)
 * [How POWERFUL is Vasille](#how-powerful-is-vasille)
 * [Road Map](#road-map)
 
@@ -44,6 +44,7 @@ $ npx degit vasille-js/example-javascript my-project
 
 ### Full documentation:
 * [Learn `Vasille` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v3/doc/V3-API.md)
+* [Vasille Router Documentation](https://github.com/vasille-js/vasille-js/blob/v3/doc/Router-API.md)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -60,7 +61,7 @@ The safe of your application is ensured by
 * `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 & result).
+  * computed properties (function parameters and result).
   * methods.
   * events (defined handlers & event emit).
   * DOM events & DOM operation (attributing, styling, etc.).
@@ -68,7 +69,7 @@ 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 SIMPLE is Vasille
+## How INTUITIVE is Vasille
 
 There is the "Hello World":
 ```typescript jsx
@@ -103,12 +104,11 @@ All of these are supported:
 * [x] Develop the `Vasille JSX` library.
 * [x] `100%` Test Coverage for the JSX library.
 * [x] Develop the `Vasille Babel Plugin`.
-* [ ] `100%` Test Coverage fot babel plugin.
+* [x] `100%` Test Coverage fot babel plugin.
 * [x] Add CSS support (define styles in components).
-* [ ] Add custom `input` components with 2-way value binding.
-* [ ] Add router.
-* [ ] Develop dev-tools extension for debugging.
-* [ ] Develop a lot of libraries for the framework.
+* [x] Add router.
+* [ ] Add SSR (server side rendering).
+* [ ] Develop tools extension for debugging.
 
 ## Questions
 

package/lib/index.js

@@ -30,41 +30,51 @@ 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);
     }
 }
-export function webStyleSheet(styles) {
+/**
+ * Inserts stylesheet to document
+ * @param styles CSS styles based on classes
+ */
+export function styleSheet(styles) {
     const result = {};
     for (const key in styles) {
         Object.defineProperty(result, key, {
@@ -76,6 +86,7 @@ export function webStyleSheet(styles) {
                         insertRule(target, rule.replace("{}", className));
                     }
                     else {
+                        /* istanbul ignore else */
                         if (!common) {
                             common = createStyleSheet("");
                         }

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "vasille-css",
-  "version": "3.0.5",
-  "description": "Add module CSS styles to Vasille Components",
+  "version": "3.2.1",
+  "description": "The first Developer eXperience Orientated front-end framework (style library)",
   "main": "./lib/index.js",
-  "types": "./fake-types/index.d.ts",
+  "types": "./types/index.d.ts",
   "exports": {
+    "types": "./types/index.d.ts",
     "import": "./lib/index.js",
     "browser": "./lib/index.js",
-    "node": "./lib-node/index.js",
-    "require": "./lib-node/index.js"
+    "node": "./lib/index.js"
   },
+  "type": "module",
   "scripts": {
     "prepack": "cp -f ../README.md ./README.md",
     "prettier": "prettier src test --write",
     "build": "tsc --build tsconfig.json",
-    "build-node": "tsc --build tsconfig-build-node.json",
+    "build-types": "tsc --build tsconfig-types.json",
     "test": "jest",
     "test-coverage": "jest --coverage"
   },
@@ -34,17 +35,13 @@
     "type": "git",
     "url": "git+https://github.com/vasille-js/vasille-js.git"
   },
-  "peerDependencies": {
-    "csstype": "^3.1.3"
-  },
   "devDependencies": {
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/jsdom": "^21.1.7",
-    "csstype": "^3.1.3",
-    "jest": "^29.7.0",
-    "jsdom": "^25.0.1",
-    "prettier": "^3.3.3",
-    "ts-jest": "^29.2.5",
-    "typescript": "^5.6.3"
+    "jest": "^30.0.5",
+    "jsdom": "^26.1.0",
+    "prettier": "^3.6.2",
+    "ts-jest": "^29.4.0",
+    "typescript": "^5.8.3"
   }
 }

package/types/index.d.ts

@@ -0,0 +1,13 @@
+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;
+/**
+ * Inserts stylesheet to document
+ * @param styles CSS styles based on classes
+ */
+export declare function styleSheet<T extends {
+    [k: string]: (string | [number, string])[];
+}>(styles: T): {
+    [K in keyof T]: string;
+};

package/fake-types/index.d.ts

@@ -1,32 +0,0 @@
-import type { PropertiesHyphenFallback } from "csstype";
-
-export declare function setMobileMaxWidth(value: number): void;
-export declare function setTabletMaxWidth(value: number): void;
-export declare function setLaptopMaxWidth(value: number): void;
-
-type PropsSet = PropertiesHyphenFallback<number | number[], string> & {
-    [k: `--${string}`]: string;
-};
-type PseudoSet = PropsSet & {
-    [k: `:${string}`]: PropsSet;
-};
-type MediaSet = PseudoSet & {
-    [k: `@${string}`]: PseudoSet;
-};
-export declare function webStyleSheet<T extends {
-    [k: string]: MediaSet;
-}>(styles: T): {
-    [K in keyof T]: string;
-};
-
-// fake functions
-export declare function theme<T>(name: string, value: T): T;
-export declare function dark<T>($: T): T;
-// rules with target
-export declare function mobile<T>($: T): T;
-export declare function tablet<T>($: T): T;
-export declare function laptop<T>($: T): T;
-export declare function prefersDark<T>($: T): T;
-export declare function prefersLight<T>($: T): T;
-
-export {};

package/lib-node/index.js

@@ -1,100 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setMobileMaxWidth = setMobileMaxWidth;
-exports.setTabletMaxWidth = setTabletMaxWidth;
-exports.setLaptopMaxWidth = setLaptopMaxWidth;
-exports.setIndex = setIndex;
-exports.webStyleSheet = webStyleSheet;
-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);
-function setMobileMaxWidth(value) {
-    mobileMaxWidth = value;
-}
-function setTabletMaxWidth(value) {
-    tabletMaxWidth = value;
-}
-function setLaptopMaxWidth(value) {
-    laptopMaxWidth = value;
-}
-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:
-            if (!mobile) {
-                mobile = createStyleSheet(`(max-width:${mobileMaxWidth}px)`);
-            }
-            sheet = mobile;
-            break;
-        case 2:
-            if (!tablet) {
-                tablet = createStyleSheet(`(min-width:${mobileMaxWidth}px)and(max-width:${tabletMaxWidth}px)`);
-            }
-            sheet = tablet;
-            break;
-        case 3:
-            if (!desktop) {
-                desktop = createStyleSheet(`(min-width:${tabletMaxWidth}px)and(max-width:${laptopMaxWidth}px)`);
-            }
-            sheet = desktop;
-            break;
-        case 4:
-            if (!dark) {
-                dark = createStyleSheet("(prefers-color-scheme:dark)");
-            }
-            sheet = dark;
-            break;
-        case 5:
-            if (!light) {
-                light = createStyleSheet("(prefers-color-scheme:light)");
-            }
-            sheet = light;
-            break;
-    }
-    if (sheet) {
-        sheet.insertRule(rule, sheet.cssRules.length);
-    }
-}
-function webStyleSheet(styles) {
-    const result = {};
-    for (const key in styles) {
-        Object.defineProperty(result, key, {
-            get() {
-                const className = `v-${++index}`;
-                for (const item of styles[key]) {
-                    if (item instanceof Array) {
-                        const [target, rule] = item;
-                        insertRule(target, rule.replace("{}", className));
-                    }
-                    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,
-        });
-    }
-    return result;
-}