vasille-css 3.1.0 → 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
@@ -105,7 +106,7 @@ All of these are supported:
 * [x] Develop the `Vasille Babel Plugin`.
 * [x] `100%` Test Coverage fot babel plugin.
 * [x] Add CSS support (define styles in components).
-* [ ] Add router.
+* [x] Add router.
 * [ ] Add SSR (server side rendering).
 * [ ] Develop tools extension for debugging.
 

package/lib/index.js

@@ -30,40 +30,50 @@ 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);
     }
 }
+/**
+ * Inserts stylesheet to document
+ * @param styles CSS styles based on classes
+ */
 export function styleSheet(styles) {
     const result = {};
     for (const key in styles) {
@@ -76,6 +86,7 @@ export function styleSheet(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.1.0",
-  "description": "The first Developer eXperience orientated front-end framework (style library)",
+  "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": "./fake-types/index.d.ts",
+    "types": "./types/index.d.ts",
     "import": "./lib/index.js",
     "browser": "./lib/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",
-    "test-types": "tsc --noEmit ./fake-types/index.d.ts",
+    "build-types": "tsc --build tsconfig-types.json",
     "test": "jest",
     "test-coverage": "jest --coverage"
   },

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,21 +0,0 @@
-export declare function setMobileMaxWidth(value: number): void;
-export declare function setTabletMaxWidth(value: number): void;
-export declare function setLaptopMaxWidth(value: number): void;
-
-export declare function styleSheet<T extends {
-    [className: string]: unknown;
-}>(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 {};