@cssfn/cssfn - npm Package Compare versions

Comparing version 3.0.2 to 3.1.0

dist/styleSheets.d.ts

 import type { MaybeFactory, LazyModuleDefault } from '@cssfn/types';
 import type { CssStyleCollection, CssClassName, CssScopeName, CssScopeOptions, CssScopeList, CssScopeMap } from '@cssfn/css-types';
-import { Observable } from 'rxjs';
+import { Subscription, Observable } from 'rxjs';
 export type StyleSheetsFactoryBase<TCssScopeName extends CssScopeName> = MaybeFactory<CssScopeList<TCssScopeName> | null> | Observable<MaybeFactory<CssScopeList<TCssScopeName> | null> | boolean>;
@@ -21,4 +21,5 @@ export type StyleSheetFactoryBase = CssStyleCollection | Observable<CssStyleCollection | boolean>;
     private readonly _updatedCallback;
-    private readonly _scopesFactory;
+    private _scopesFactory;
     private _scopesActivated;
+    private _scopesSubscription;
     private _scopesLive;
@@ -37,2 +38,3 @@ private readonly _classes;
     get classes(): CssScopeMap<TCssScopeName>;
+    cloneFrom(source: StyleSheet<TCssScopeName>): boolean;
 }
@@ -50,3 +52,3 @@ export type StyleSheetUpdateChangedType = 'enabledChanged' | 'scopesChanged';
     add(newStyleSheet: StyleSheet<CssScopeName>): StyleSheet<CssScopeName>;
-    subscribe(subscriber: (event: StyleSheetUpdateEvent<CssScopeName>) => void): import("rxjs").Subscription;
+    subscribe(subscriber: (event: StyleSheetUpdateEvent<CssScopeName>) => void): Subscription;
     handleStyleSheetUpdated: (styleSheet: StyleSheet<CssScopeName>, type: StyleSheetUpdateChangedType) => void;
@@ -53,0 +55,0 @@ }

dist/styleSheets.js

@@ -49,2 +49,3 @@ import { generateId, } from './utilities.js';
     _scopesActivated;
+    _scopesSubscription;
     _scopesLive;
@@ -70,2 +71,3 @@ // css classes:
         this._scopesActivated = false;
+        this._scopesSubscription = undefined;
         this._scopesLive = null;
@@ -140,2 +142,7 @@ // css classes:
     updateScopes(scopes, forceUpdate = false) {
+        // states:
+        let subsequentUpdate = !!this._scopesSubscription;
+        // cleanups:
+        this._scopesSubscription?.unsubscribe(); // unsubscribe the prev subscription (if any)
+        this._scopesSubscription = undefined; // allows GC to collect
         if (!isObservableScopes(scopes)) { // scopes is MaybeFactory<CssScopeList<TCssScopeName>|null>
@@ -148,4 +155,3 @@ this._scopesLive = scopes; // update once
         else { // scopes is Observable<MaybeFactory<CssScopeList<TCssScopeName>|null>|boolean>
-            let subsequentUpdate = false;
-            scopes.subscribe((newScopesOrEnabled) => {
+            this._scopesSubscription = scopes.subscribe((newScopesOrEnabled) => {
                 const isEnabledChanged = typeof (newScopesOrEnabled) === 'boolean';
@@ -200,2 +206,12 @@ if (isEnabledChanged) { // newScopesOrEnabled is boolean
     }
+    //#endregion public properties
+    //#region public methods
+    cloneFrom(source) {
+        if (this._scopesFactory !== source._scopesFactory) {
+            this._scopesFactory = source._scopesFactory; // mutate
+            this._scopesActivated = false; // reset the activation flag
+            this.activateScopesIfNeeded();
+        } // if
+        return true; // report as success
+    }
 }
@@ -221,3 +237,17 @@ class StyleSheetRegistry {
         */
-        this._styleSheets.push(newStyleSheet); // register to collection
+        // mutate the existing styleSheet (with the same id) (if any) with the new styleSheet:
+        const newStyleSheetId = newStyleSheet.id;
+        const existingStyleSheet = !!newStyleSheetId ? this._styleSheets.find(({ id }) => !!id && (id === newStyleSheetId)) : undefined;
+        if (!existingStyleSheet) {
+            this._styleSheets.push(newStyleSheet); // register to collection (add new)
+        }
+        else {
+            if (existingStyleSheet.cloneFrom(newStyleSheet)) { // register to collection (mutate)
+                return existingStyleSheet; // cloned => done
+            }
+            else {
+                // refuse to clone => fallback to add new:
+                this._styleSheets.push(newStyleSheet); // register to collection (add new)
+            } // if
+        } // if
         this._subscribers.next({
@@ -224,0 +254,0 @@ styleSheet: newStyleSheet,

package.json

 {
   "name": "@cssfn/cssfn",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "Writes, imports, and exports css stylesheets as javascript modules.",
@@ -34,6 +34,6 @@ "keywords": [
   "dependencies": {
-    "@cssfn/css-prop-auto-prefix": "^3.0.2",
-    "@cssfn/css-selectors": "^3.0.2",
-    "@cssfn/css-types": "^3.0.2",
-    "@cssfn/types": "^3.0.2",
+    "@cssfn/css-prop-auto-prefix": "^3.1.0",
+    "@cssfn/css-selectors": "^3.1.0",
+    "@cssfn/css-types": "^3.1.0",
+    "@cssfn/types": "^3.1.0",
     "@types/hyphenate-style-name": "^1.0.0",
@@ -53,3 +53,3 @@ "camel-case": "^4.1.2",
   },
-  "gitHead": "b1266a97f6628414ce14348026287da4cfa00b42"
+  "gitHead": "adf3659c95d997c71c8465edc8a54c26d8ed4d66"
 }

src/styleSheets.ts

@@ -29,2 +29,3 @@ // cssfn:
 import {
+    Subscription,
     Observable,
@@ -107,4 +108,4 @@ Subject,
     // configs:
-    private readonly    _options         : Required<StyleSheetOptions>
-    private readonly    _updatedCallback : StyleSheetUpdatedCallback<TCssScopeName>
+    private readonly    _options            : Required<StyleSheetOptions>
+    private readonly    _updatedCallback    : StyleSheetUpdatedCallback<TCssScopeName>
     
@@ -114,5 +115,6 @@
     // states:
-    private readonly    _scopesFactory   : StyleSheetsFactory<TCssScopeName>
-    private /*mutable*/ _scopesActivated : boolean
-    private /*mutable*/ _scopesLive      : MaybeFactory<CssScopeList<TCssScopeName>|null>
+    private /*mutable*/ _scopesFactory      : StyleSheetsFactory<TCssScopeName>
+    private /*mutable*/ _scopesActivated    : boolean
+    private /*mutable*/ _scopesSubscription : Subscription|undefined
+    private /*mutable*/ _scopesLive         : MaybeFactory<CssScopeList<TCssScopeName>|null>
     
@@ -122,3 +124,3 @@
     // css classes:
-    private readonly    _classes         : CssScopeMap<TCssScopeName>
+    private readonly    _classes            : CssScopeMap<TCssScopeName>
     //#endregion private properties
@@ -141,4 +143,4 @@
         };
-        this._options         = styleSheetOptions;
-        this._updatedCallback = updatedCallback;
+        this._options            = styleSheetOptions;
+        this._updatedCallback    = updatedCallback;
         
@@ -148,5 +150,6 @@
         // states:
-        this._scopesFactory   = scopesFactory;
-        this._scopesActivated = false;
-        this._scopesLive      = null;
+        this._scopesFactory      = scopesFactory;
+        this._scopesActivated    = false;
+        this._scopesSubscription = undefined;
+        this._scopesLive         = null;
         
@@ -250,2 +253,13 @@
     protected updateScopes(scopes: StyleSheetsFactoryBase<TCssScopeName>, forceUpdate = false): void {
+        // states:
+        let subsequentUpdate = !!this._scopesSubscription;
+        
+        
+        
+        // cleanups:
+        this._scopesSubscription?.unsubscribe(); // unsubscribe the prev subscription (if any)
+        this._scopesSubscription = undefined;    // allows GC to collect
+        
+        
+        
         if (!isObservableScopes(scopes)) { // scopes is MaybeFactory<CssScopeList<TCssScopeName>|null>
@@ -261,4 +275,3 @@ this._scopesLive = scopes; // update once
         else { // scopes is Observable<MaybeFactory<CssScopeList<TCssScopeName>|null>|boolean>
-            let subsequentUpdate = false;
-            scopes.subscribe((newScopesOrEnabled) => {
+            this._scopesSubscription = scopes.subscribe((newScopesOrEnabled) => {
                 const isEnabledChanged = typeof(newScopesOrEnabled) === 'boolean';
@@ -329,2 +342,19 @@ if (isEnabledChanged) { // newScopesOrEnabled is boolean
     //#endregion public properties
+    
+    
+    
+    //#region public methods
+    cloneFrom(source: StyleSheet<TCssScopeName>): boolean {
+        if (this._scopesFactory !== source._scopesFactory) {
+            this._scopesFactory = source._scopesFactory; // mutate
+            
+            this._scopesActivated = false; // reset the activation flag
+            this.activateScopesIfNeeded();
+        } // if
+        
+        
+        
+        return true; // report as success
+    }
+    //#endregion public methods
 }
@@ -358,3 +388,3 @@
     //#region public methods
-    add(newStyleSheet: StyleSheet<CssScopeName>) {
+    add(newStyleSheet: StyleSheet<CssScopeName>): StyleSheet<CssScopeName> {
         /*
@@ -368,8 +398,21 @@ The `StyleSheetRegistry::add()` always be called every call of `styleSheet()`, `styleSheets()`, dynamicStyleSheet()`, and `dynamicStyleSheets()`.
         
+        // mutate the existing styleSheet (with the same id) (if any) with the new styleSheet:
+        const newStyleSheetId    = newStyleSheet.id;
+        const existingStyleSheet = !!newStyleSheetId ? this._styleSheets.find(({id}) => !!id && (id === newStyleSheetId)) : undefined;
+        if (!existingStyleSheet) {
+            this._styleSheets.push(newStyleSheet);             // register to collection (add new)
+        }
+        else {
+            if (existingStyleSheet.cloneFrom(newStyleSheet)) { // register to collection (mutate)
+                return existingStyleSheet; // cloned => done
+            }
+            else {
+                // refuse to clone => fallback to add new:
+                this._styleSheets.push(newStyleSheet);         // register to collection (add new)
+            } // if
+        } // if
         
-        this._styleSheets.push(newStyleSheet);          // register to collection
         
         
-        
-        this._subscribers.next({                        // notify a StyleSheet added
+        this._subscribers.next({                               // notify a StyleSheet added
             styleSheet : newStyleSheet,
@@ -388,3 +431,3 @@ type       : 'added',
         for (let i = 0; i < styleSheets.length; i++) {
-            subscriber({                                // notify previously registered StyleSheet(s)
+            subscriber({                                       // notify previously registered StyleSheet(s)
                 styleSheet : styleSheets[i],
@@ -396,3 +439,3 @@ type       : 'existing',
         
-        return this._subscribers.subscribe(subscriber); // listen for future updates
+        return this._subscribers.subscribe(subscriber);        // listen for future updates
     }
@@ -405,3 +448,3 @@ //#endregion public methods
     handleStyleSheetUpdated = (styleSheet: StyleSheet<CssScopeName>, type: StyleSheetUpdateChangedType): void => {
-        this._subscribers.next({                        // notify a StyleSheet updated
+        this._subscribers.next({                               // notify a StyleSheet updated
             styleSheet : styleSheet,
@@ -408,0 +451,0 @@ type       : type,

No alert changes

Improved metrics

Total package byte prevSize

721882

increased by0.47%

Lines of code

18750

increased by0.34%

Dependency changes

• Updated@cssfn/css-prop-auto-prefix@^3.1.0

• Updated@cssfn/css-selectors@^3.1.0

• Updated@cssfn/css-types@^3.1.0

• Updated@cssfn/types@^3.1.0