vasille-css 3.1.0 → 4.0.0

package/README.md

@@ -1,8 +1,8 @@
 # Vasille
 
-![Vasille.js logo](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/doc/img/logo.png)
+![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v4/doc/img/logo.png)
 
-`Vasille Web` is a front-end framework, which is developed to provide the best `developer experience` ever. **Our goal is to keep is as simple as possible.** Developing web applications using Vasille must be *as fast as possible*.
+`Vasille Web` is a front-end framework, which is developed to provide bulletproof frontends.
 
 [![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
 
@@ -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)
 
@@ -32,18 +32,9 @@ Create an app from a template
 $ npm create vasille
 ```
 
-Alternative method to create a TypeScript app.
-```bash
-$ npx degit vasille-js/example-typescript my-project
-```
-
-Alternative method to create a JavaScript app.
-```bash
-$ 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)
+* [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)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -60,7 +51,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 +59,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 +96,8 @@ 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 SSG (static site generation).
 * [ ] Add SSR (server side rendering).
 * [ ] Develop tools extension for debugging.
 

package/eslint.config.js

@@ -0,0 +1,25 @@
+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/**/*"]),
+);

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": "4.0.0",
+  "description": "The framework designed to build bulletproof frontends (CSS 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",
+    "prebuild": "rm -rf lib types",
     "build": "tsc --build tsconfig.json",
-    "test-types": "tsc --noEmit ./fake-types/index.d.ts",
     "test": "jest",
     "test-coverage": "jest --coverage"
   },
@@ -34,13 +35,23 @@
     "type": "git",
     "url": "git+https://github.com/vasille-js/vasille-js.git"
   },
+  "browserslist": [
+    "safari 6",
+    "ie 10",
+    "chrome 23",
+    "firefox 21",
+    "opera 15"
+  ],
   "devDependencies": {
     "@types/jest": "^30.0.0",
     "@types/jsdom": "^21.1.7",
+    "eslint": "^9.33.0",
+    "eslint-plugin-compat": "^6.0.2",
     "jest": "^30.0.5",
     "jsdom": "^26.1.0",
     "prettier": "^3.6.2",
     "ts-jest": "^29.4.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.39.0"
   }
 }

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 {};