vasille-css 7.0.0-rc.2 → 7.0.0-rc.4

package/README.md

@@ -130,9 +130,12 @@ We respect semantic versioning:
 - A minor version is increased when we add functionality.
 - Patch version is increased when we fix bugs.
 
-### 7.0
+### 7.0 RC (WIP)
 
-- WIP
+- Add `debounceRef`, `edgeRef` and `fieldRef` functions, which extend the reativity system.
+- Add `Zombie` component, it keeps HTML elements alive some time after destruction.
+- Add `abortSignal` to cancel fetch requests and timers when component is destroyed.
+- Add `safeRef`, `safeExpr`, `safeInit` functions, they make the JSX much safer.
 
 ### 6.0 RC (never released)
 
@@ -161,12 +164,12 @@ We respect semantic versioning:
 
 - Switch to a babel plugin to compile components code. **[API change]**
 - 100% of the code has been covered with unit tests.
-- New developement direction: `keep it simple`.
+- New development direction: `keep it simple`.
 
 ### 2.0 - 2.3
 
 - Introduces components compilation via a typescript plugin. **[API change]**
-- New developement direction: `write less, do more`.
+- New development direction: `write less, do more`.
 
 ### 1.0 - 1.2
 

package/lib/dev.js

@@ -1,4 +1,35 @@
-import { CssStyleInjector } from "./index.js";
+import { CssStyleInjector, setLaptopMaxWidth, setMobileMaxWidth, setTabletMaxWidth } from "./index.js";
+import { desktop, laptopMaxWidth, mobile, mobileMaxWidth, tablet, tabletMaxWidth } from "./lib.js";
+function warn(device) {
+    console.warn(`[vasille-css] Setting of ${device} max width in production mode is not supported.`);
+}
+export function devSetMobileMaxWidth(value) {
+    setMobileMaxWidth(value);
+    if (mobile) {
+        mobile.media = `(max-width:${mobileMaxWidth}px)`;
+    }
+    if (tablet) {
+        tablet.media = `(min-width:${mobileMaxWidth}px) and (max-width:${tabletMaxWidth}px)`;
+    }
+    warn("mobile");
+}
+export function devSetTabletMaxWidth(value) {
+    setTabletMaxWidth(value);
+    if (tablet) {
+        tablet.media = `(min-width:${mobileMaxWidth}px) and (max-width:${tabletMaxWidth}px)`;
+    }
+    if (desktop) {
+        desktop.media = `(min-width:${tabletMaxWidth}px) and (max-width:${laptopMaxWidth}px)`;
+    }
+    warn("tablet");
+}
+export function devSetLaptopMaxWidth(value) {
+    setLaptopMaxWidth(value);
+    if (desktop) {
+        desktop.media = `(min-width:${tabletMaxWidth}px) and (max-width:${laptopMaxWidth}px)`;
+    }
+    warn("laptop");
+}
 export class DevCssStyleInjector extends CssStyleInjector {
     constructor(key, styles) {
         super(styles);

package/lib/index.js

@@ -1,5 +1,5 @@
 import { insertRule } from "./lib.js";
-export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "./lib.js";
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth, mobileMaxWidth, tabletMaxWidth, laptopMaxWidth, } from "./lib.js";
 let index = 1;
 export class CssStyleInjector {
     constructor(styles) {

package/lib/lib.js

@@ -1,12 +1,12 @@
 let common;
-let mobile;
-let tablet;
-let desktop;
+export let mobile;
+export let tablet;
+export let desktop;
 let dark;
 let light;
-let mobileMaxWidth = 440;
-let tabletMaxWidth = 880;
-let laptopMaxWidth = 1320;
+export let mobileMaxWidth = 440;
+export let tabletMaxWidth = 880;
+export let laptopMaxWidth = 1320;
 export function setMobileMaxWidth(value) {
     mobileMaxWidth = value;
 }
@@ -22,7 +22,7 @@ function createStyleSheet(media) {
     document.head.append(style);
     return style.sheet;
 }
-export function getStyleSheet(target) {
+export function insertRule(target, rule) {
     let sheet;
     switch (target) {
         case 0:
@@ -68,10 +68,6 @@ export function getStyleSheet(target) {
             sheet = light;
             break;
     }
-    return sheet;
-}
-export function insertRule(target, rule) {
-    const sheet = getStyleSheet(target);
     /* istanbul ignore else */
     if (sheet) {
         sheet.insertRule(rule, sheet.cssRules.length);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasille-css",
-  "version": "7.0.0-rc.2",
+  "version": "7.0.0-rc.4",
   "description": "The same devkit which is designed to build fault tolerant frontends (CSS style library)",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",

package/types/dev.d.ts

@@ -1,4 +1,7 @@
 import { CssStyleInjector } from "./index.js";
+export declare function devSetMobileMaxWidth(value: number): void;
+export declare function devSetTabletMaxWidth(value: number): void;
+export declare function devSetLaptopMaxWidth(value: number): void;
 export declare class DevCssStyleInjector extends CssStyleInjector {
     protected key: string;
     constructor(key: string, styles: (string | [number, string])[]);

package/types/index.d.ts

@@ -1,4 +1,4 @@
-export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "./lib.js";
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth, mobileMaxWidth, tabletMaxWidth, laptopMaxWidth, } from "./lib.js";
 export declare class CssStyleInjector {
     protected className: string | null;
     protected styles: (string | [number, string])[];

package/types/lib.d.ts

@@ -1,5 +1,10 @@
+export declare let mobile: CSSStyleSheet | undefined;
+export declare let tablet: CSSStyleSheet | undefined;
+export declare let desktop: CSSStyleSheet | undefined;
+export declare let mobileMaxWidth: number;
+export declare let tabletMaxWidth: number;
+export declare let laptopMaxWidth: number;
 export declare function setMobileMaxWidth(value: number): void;
 export declare function setTabletMaxWidth(value: number): void;
 export declare function setLaptopMaxWidth(value: number): void;
-export declare function getStyleSheet(target: number): CSSStyleSheet | undefined;
 export declare function insertRule(target: number, rule: string): void;