native-document 1.0.283 → 1.0.284

package/devtools/ComponentRegistry.js

@@ -89,13 +89,13 @@ const ComponentRegistry = (function() {
             factoryWrapper.originalFactory = factory;
             return factoryWrapper;
         },
-        update(id, newFactory, globalId) {
+        update(id, newFactory, globalId, componentName) {
             const component = registry.get(id);
             if(!component) {
                 DebugManager.warn(`[HMR] Component ${id} not found`);
                 return;
             }
-            DebugManager.log(`[HMR] Updating ${component.instances.size} instance(s) of ${id}`);
+            DebugManager.log(`[HMR] Updating ${component.instances.size} instance(s) of ${componentName}`);
             const oldFactory = component.factory;
             if(typeof newFactory !== 'function') {
                 DebugManager.log('[HMR] Updating factory is not a function : ', newFactory);

package/devtools/src/templates/hrm.hook.template.js

@@ -27,16 +27,18 @@ if (import.meta.hot) {
     const updateComponents = (newModule) => {
         try {
             let defaultId = '${id}';
+            let defaultName = defaultId;
             for(const component of componentIds) {
                 if(newModule[component.name]) {
-                    ComponentRegistry.update(component.id, newModule[component.name], '${id}');
+                    ComponentRegistry.update(component.id, newModule[component.name], '${id}', component.name);
                 }
                 if(component.isDefault) {
                     defaultId = component.id;
+                    defaultName = component.name;
                 }
             }
             if(newModule.default) {
-                ComponentRegistry.update(defaultId, newModule.default, '${id}');
+                ComponentRegistry.update(defaultId, newModule.default, '${id}', defaultName);
             }
             // console.log('[HMR Browser] ✓ Update successful');
         } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.283",
+  "version": "1.0.284",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/core/data/Observable.js

@@ -241,6 +241,39 @@ Observable.value = function(data) {
     return data;
 };
 
+/**
+ * For boolean states: Selects a value based on whether the observable is truthy or falsy.
+ *
+ * @param {*} whenTrue - Value returned when the observable is truthy
+ * @param {*} [whenFalse=null] - Value returned when the observable is falsy
+ * @returns {ObservableItem}
+ *
+ * @example
+ * isCollapsed.pick('/logos/icon.svg', '/logos/logo.svg')
+ */
+ObservableItem.prototype.pick = function(whenTrue, whenFalse = null) {
+    return this.format((value) => (value ? whenTrue : whenFalse));
+};
+
+/**
+ * For pattern matching: Maps the current value to a matching key in a dictionary object.
+ *
+ * @param {Record<string|number|boolean, *>} cases - Dictionary mapping values to outcomes
+ * @param {*} [fallback=null] - Default value returned if no key matches
+ * @returns {ObservableItem}
+ *
+ * @example
+ * theme.match({ dark: '#000', light: '#fff' }, '#fff')
+ */
+ObservableItem.prototype.match = function(cases, fallback = null) {
+    return this.format((value) => {
+        if (value in cases) {
+            return cases[value];
+        }
+        return fallback;
+    });
+};
+
 Observable.object = Observable.init;
 Observable.json = Observable.init;
 

package/src/core/wrappers/AttributesWrapper.js

@@ -24,19 +24,19 @@ export const bindClassAttribute = (element, data) => {
                     element.classes.toggle(currentValue, true);
                     lastClass = currentValue;
                 });
-                return;
+                continue;
             }
         }
 
         if (value.__$Observable) {
             element.classes.toggle(className, value.val());
             value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-            return;
+            continue;
         }
 
         if (value.$hydrate) {
             value.$hydrate(element, className, 'class');
-            return;
+            continue;
         }
 
         element.classes.toggle(className, value);

package/types/observable-query.d.ts

@@ -64,4 +64,5 @@ export interface ObservableQueryInstance<T = any> {
     set(dataset: Dataset<T>): this;
     delete(): this;
     push(value: any): this;
+    unshift(value: any): this;
 }