fix(platform-browser): add force update for inputs

Author: atellmer

packages/core/src/scope/scope.ts

@@ -31,6 +31,7 @@ class Scope {
   private isInsertionEffect = false;
   private isUpdate = false;
   private isBatch = false;
+  private isForce = false;
   private isHydration = false;
   private isStream = false;
   private isTransition = false;
@@ -309,8 +310,13 @@ class Scope {
     return this.isEvent;
   }
 
-  setIsEvent(value: boolean) {
+  setIsEvent(value: boolean, isForce = false) {
     this.isEvent = value;
+    this.isForce = isForce;
+  }
+
+  getIsForce() {
+    return this.isForce;
   }
 
   getIsHot() {

packages/core/src/use-state/use-state.spec.tsx

@@ -348,7 +348,7 @@ describe('@core/use-state', () => {
   });
 
   test('forces direct update for input value', async () => {
-    // https://github.com/atellmer/dark/issues/82
+    // https://github.com/atellmer/dark/issues/108
     let inputRef: MutableRef<HTMLInputElement> = null;
     const App = component(() => {
       inputRef = useRef<HTMLInputElement>(null);
@@ -358,8 +358,6 @@ describe('@core/use-state', () => {
         const $value = value.replace(/\D/g, '');
 
         setValue($value);
-
-        return $value;
       };
 
       return <input ref={inputRef} value={value} onInput={handleSetValue} />;

packages/core/src/use-state/use-state.ts

@@ -4,23 +4,21 @@ import { useUpdate } from '../use-update';
 import { type Tools } from '../workloop';
 import { useMemo } from '../use-memo';
 import { $$scope } from '../scope';
-import { trueFn } from '../utils';
 
 type CreateToolsOptions<T> = {
   next: Value<T>;
   get: () => T;
   set: (x: T) => void;
   reset: (x: T) => void;
-  shouldUpdate?: (p: T, n: T) => boolean;
-  isBatch?: boolean;
+  shouldUpdate: (p: T, n: T) => boolean;
 };
 
 function createTools<T>(options: CreateToolsOptions<T>) {
-  const { get, set, reset, next, isBatch, shouldUpdate: $shouldUpdate = trueFn } = options;
+  const { get, set, reset, next, shouldUpdate: $shouldUpdate } = options;
   const tools = (): Tools => {
     const prevValue = get();
     const newValue = detectIsFunction(next) ? next(prevValue) : next;
-    const shouldUpdate = () => isBatch || $shouldUpdate(prevValue, newValue);
+    const shouldUpdate = () => $shouldUpdate(prevValue, newValue);
     const setValue = () => set(newValue);
     const resetValue = () => reset(prevValue);
 
@@ -43,13 +41,13 @@ function useState<T = unknown>(initialValue: T | (() => T)): [T, (value: Value<T
   const setState = useCallback((next: Value<T>) => {
     const $scope = $$scope();
     const isBatch = $scope.getIsBatch();
+    const isForce = $scope.getIsForce();
     const getTools = createTools({
       next,
-      isBatch,
       get: () => scope.value,
       set: (x: T) => (scope.value = x),
       reset: (x: T) => (scope.value = x),
-      shouldUpdate: (p: T, n: T) => !detectIsEqual(p, n),
+      shouldUpdate: (p: T, n: T) => isBatch || isForce || !detectIsEqual(p, n),
     });
 
     update({
@@ -61,4 +59,4 @@ function useState<T = unknown>(initialValue: T | (() => T)): [T, (value: Value<T
   return [scope.value, setState];
 }
 
-export { createTools, useState };
+export { useState };

packages/platform-browser/src/dom/dom.ts

@@ -111,6 +111,7 @@ function addAttributes(element: NativeElement, vNode: TagVirtualNode, isHydratio
 function updateAttributes(element: NativeElement, prevVNode: TagVirtualNode, nextVNode: TagVirtualNode) {
   const attrNames = getAttributeNames(prevVNode, nextVNode);
   const tagElement = element as TagNativeElement;
+  const isInput = nextVNode.name === INPUT_TAG;
 
   for (let attrName of attrNames) {
     const prevAttrValue = prevVNode.attrs[attrName];
@@ -126,7 +127,7 @@ function updateAttributes(element: NativeElement, prevVNode: TagVirtualNode, nex
     if (!detectIsUndefined(nextAttrValue)) {
       if (detectIsEvent(attrName)) {
         prevAttrValue !== nextAttrValue && delegateEvent(tagElement, getEventName(attrName), nextAttrValue);
-      } else if (!ATTR_BLACK_LIST[attrName] && prevAttrValue !== nextAttrValue) {
+      } else if (!ATTR_BLACK_LIST[attrName] && (isInput || prevAttrValue !== nextAttrValue)) {
         !patchAttributes(tagElement, nextVNode.name, attrName, nextAttrValue) &&
           m.setAttribute.call(tagElement, attrName, nextAttrValue);
       }

packages/platform-browser/src/events/events.ts

@@ -1,4 +1,4 @@
-import { detectIsFunction, detectIsUndefined, $$scope, detectIsArray } from '@dark-engine/core';
+import { detectIsFunction, $$scope, detectIsArray } from '@dark-engine/core';
 
 import type { TagNativeElement } from '../native-element';
 import { PREVENT } from '../constants';
@@ -51,8 +51,8 @@ function delegateEvent(target: Element, eventName: string, handler: EventHandler
 
       if (detectIsFunction(handler)) {
         $event = new SyntheticEvent({ sourceEvent: event, target });
-        $scope.setIsEvent(true);
-        exec($event, handler);
+        $scope.setIsEvent(true, $event.type === 'input');
+        handler($event);
         $scope.setIsEvent(false);
       }
 
@@ -73,17 +73,6 @@ function delegateEvent(target: Element, eventName: string, handler: EventHandler
   }
 }
 
-function exec(event: SyntheticEvent<Event>, handler: Function) {
-  const arg = handler(event);
-
-  if (detectIsUndefined(arg)) return;
-  switch (event.type) {
-    case 'input':
-      (event.target as HTMLInputElement).value = String(arg);
-      break;
-  }
-}
-
 const detectIsEvent = (attrName: string) => attrName.startsWith('on');
 
 const getEventName = (attrName: string) => attrName.slice(2, attrName.length).toLowerCase();

packages/signals/src/signal/signal.ts

@@ -7,6 +7,7 @@ import {
   $$scope,
   createUpdate,
   detectIsUndefined,
+  detectIsEqual,
 } from '@dark-engine/core';
 
 import { addToContext } from '../context';
@@ -23,13 +24,13 @@ type Options<T> = {
 class Signal<T = unknown> extends AbstractSignal<T> {
   private emitter = new EventEmitter<'set'>();
   private version = 0;
-  private equal: Equal<T>;
+  private equal: Equal<T> = detectIsEqual;
   private map: Map<T, Subscriber>;
 
   constructor(value: T, options?: Options<T>) {
     super();
     this.value = value;
-    this.equal = options?.equal || defaultEqual;
+    this.equal = options?.equal || this.equal;
   }
 
   get(): T {
@@ -88,8 +89,6 @@ class Signal<T = unknown> extends AbstractSignal<T> {
   }
 }
 
-const defaultEqual = <T>(prev: T, next: T) => Object.is(prev, next);
-
 const signal = <T>(value: T, options?: Options<T>) => new Signal(value, options);
 
 export { Signal, signal };