vasille-css 3.0.3

package/README.md

@@ -0,0 +1,122 @@
+# Vasille
+
+![Vasille.js logo](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/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*.
+
+[![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 SIMPLE is Vasille](#how-simple-is-vasille)
+* [How POWERFUL is Vasille](#how-powerful-is-vasille)
+* [Road Map](#road-map)
+
+
+<hr>
+
+## Installation
+
+```
+npm install vasille-web --save
+```
+
+## How to use Vasille
+
+Create an app from a template
+
+```bash
+$ 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)
+
+### Examples
+* [TypeScript Example](https://github.com/vasille-js/example-typescript)
+* [JavaScript Example](https://github.com/vasille-js/example-javascript)
+
+<hr>
+
+## How SAFE is Vasille
+
+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:
+  * data fields & properties.
+  * computed properties (function parameters & 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 SIMPLE is Vasille
+
+There is the "Hello World":
+```typescript jsx
+import { compose, mount } from "vasille-dx";
+
+const App = compose(() => {
+  <p>Hello world</p>;
+});
+
+mount(document.body, App, {});
+```
+
+## How POWERFUL is Vasille
+
+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).
+
+<hr>
+
+## Road map
+
+* [x] Update the `Vasille Core` library to version 3.0.
+* [x] `100%` Test Coverage for core Library v3.
+* [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] 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.
+
+## 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/fake-types/index.d.ts

@@ -0,0 +1,32 @@
+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 = {
+    [k: string]: MediaSet;
+}>(styles: T): {
+    [K in keyof T]: string;
+} | undefined;
+
+// 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/index.js

@@ -0,0 +1,93 @@
+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:
+            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);
+    }
+}
+export 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;
+}

package/lib-node/index.js

@@ -0,0 +1,100 @@
+"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;
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "vasille-css",
+  "version": "3.0.3",
+  "description": "Add module CSS styles to Vasille Components",
+  "main": "./lib/index.js",
+  "types": "./fake-types/index.d.ts",
+  "exports": {
+    "import": "./lib/index.js",
+    "browser": "./lib/index.js",
+    "node": "./lib-node/index.js",
+    "require": "./lib-node/index.js"
+  },
+  "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",
+    "test": "jest",
+    "test-coverage": "jest --coverage"
+  },
+  "keywords": [
+    "front-end",
+    "framework",
+    "css",
+    "styles"
+  ],
+  "author": "lixcode",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vasille-js/vasille-js/issues"
+  },
+  "homepage": "https://github.com/vasille-js/vasille-js#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vasille-js/vasille-js.git"
+  },
+  "peerDependencies": {
+    "csstype": "^3.1.3"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.14",
+    "@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"
+  }
+}