Signals no longer auto-unwrap in JSX attributes (require .value)

[Darka7]

Signals no longer auto-unwrap in JSX attributes for boolean props

• Check if updating to the latest version resolves the issue

Environment

• I am using @preact/signals-core
• I am using @preact/signals
• I am using @preact/signals-react
  • I understand usage changed in v2, and I've followed the React Integration instructions

Versions:

• @preact/signals-react: 3.6.0
• @preact/signals-react-transform: 0.6.0
• react: 19.2.0
• react-dom: 19.2.0
• @types/react: 19.2.2
• @types/react-dom: 19.2.2

Describe the bug

Signals are no longer auto-unwrapping when passed directly to JSX attributes, particularly for boolean props. Previously, signals could be passed directly (e.g., checked={signal}, disabled={signal}), but now they require explicit .value access (e.g., checked={signal.value}).

This appears to be inconsistent with the official demo code which shows signals being used without .value in JSX attributes.

To Reproduce

The official nesting demo shows this pattern (lines 62-71):

<tr>
    <td>boolKey:</td>
    <td>{obj.boolKey}</td>
    <td>
        <input
            type="checkbox"
            onChange={e => (obj.boolKey.value = e.currentTarget.checked)}
            checked={obj.boolKey}  // ← Signal without .value
        />
    </td>
</tr>

This pattern no longer works in version 3.6.0. We must now use:

<tr>
    <td>boolKey:</td>
    <td>{obj.boolKey.value.toString()}</td>  // ← Need .value
    <td>
        <input
            type="checkbox"
            onChange={e => (obj.boolKey.value = e.currentTarget.checked)}
            checked={obj.boolKey.value}  // ← Need .value
        />
    </td>
</tr>

Minimal reproduction:

import React from "react";
import { signal } from "@preact/signals-react";
import { useSignals } from "@preact/signals-react/runtime";

const obj = {
    boolKey: signal(false)
};

export default function TestComponent() {
    useSignals();

    return (
        <>
            {/* ❌ Doesn't work - checkbox doesn't reflect signal value */}
            <input
                type="checkbox"
                checked={obj.boolKey}
                onChange={e => (obj.boolKey.value = e.currentTarget.checked)}
            />

            {/* ✅ Works - but requires .value */}
            <input
                type="checkbox"
                checked={obj.boolKey.value}
                onChange={e => (obj.boolKey.value = e.currentTarget.checked)}
            />

            {/* Same issue with disabled attribute */}
            <button disabled={obj.boolKey}>Test (broken)</button>
            <button disabled={obj.boolKey.value}>Test (works)</button>
        </>
    );
}

Steps to reproduce:

1. Clone or reference the official nesting demo
2. Try using checked={signal} on a checkbox input
3. Observe that the checkbox doesn't reflect the signal value
4. Change to checked={signal.value} and it works

Expected behavior

Based on the official demo code, signals should auto-unwrap when passed to JSX attributes.

From the demo (line 69):

checked={obj.boolKey}  // Should work without .value

This pattern is shown in the official examples and should work. Signals should unwrap automatically when:

• Used in JSX children: <div>{signal}</div> ✅ Works
• Used in JSX attributes: <input checked={signal} /> ❌ Broken

Actual behavior

• Without .value: The signal object itself is passed to the DOM attribute. The attribute doesn't reflect the signal value or update reactively.
• With .value: It works correctly, but contradicts the official demo code.

Interestingly, signals work fine in text content:

<td>{obj.boolKey}</td>  // ✅ Works - shows true/false

But fail in attributes:

<input checked={obj.boolKey} />  // ❌ Broken - needs .value

Additional context

• We're calling useSignals() at the component level as per the integration guide
• Using React 19.2.0 - This might be relevant as React 19 introduced changes to how props are handled
• This pattern used to work in previous versions/configurations
• String signals in text content work fine: <td>{signal}</td> ✅
• Boolean signals in text content work fine: <td>{boolSignal}</td> ✅
• But boolean signals in attributes don't work: <input checked={boolSignal} /> ❌

What works:

<td>{obj.boolKey}</td>                        // ✅ Auto-unwraps
<input checked={obj.boolKey.value} />         // ✅ Explicit .value

What doesn't work (but is shown in official demos):

<input checked={obj.boolKey} />               // ❌ Should auto-unwrap
<button disabled={disabledSignal} />          // ❌ Should auto-unwrap

Question

The official nesting demo shows checked={obj.boolKey} without .value. Is this:

1. A bug in the demo code that should be updated to use .value?
2. A regression where this used to work but no longer does?
3. A React 19 compatibility issue that needs to be addressed?

If .value is always required for attributes, the demo code and documentation should be updated to reflect this. Otherwise, this appears to be a bug where signal auto-unwrapping in attributes is broken.

[JoviDeCroock]

Where are you finding this claim that the react-transform would do this? That's not true and has never been true, in preact yes but in react this hasn't been the case

[Darka7]

Where are you finding this claim that the react-transform would do this? That's not true and has never been true, in preact yes but in react this hasn't been the case
Thanks for the clarification! You're right, I may have been mistaken about the transform plugin's role.

However, I'm confused because the official demo code shows this pattern:

https://github.com/preactjs/signals/blob/main/docs/demos/react/nesting/index.tsx#L62-L71

<tr>
    <td>boolKey:</td>
    <td>{obj.boolKey}</td>
    <td>
        <input
            type="checkbox"
            onChange={e => (obj.boolKey.value = e.currentTarget.checked)}
            checked={obj.boolKey}  // ← No .value here
        />
    </td>
</tr>

This is in the React demos folder (docs/demos/react/), not Preact. The demo shows checked={obj.boolKey} without .value.

My questions:

1. Is this demo code incorrect and should be updated to use .value?
2. Or is there something that should make this work that isn't working in my setup?
3. Is this possibly a React 19 compatibility issue?

In my application:

• ✅ Signals work in JSX children: <td>{obj.boolKey}</td>
• ❌ Signals don't work in attributes: <input checked={obj.boolKey} />
• ✅ Using .value explicitly works: <input checked={obj.boolKey.value} />

So either:

• The demo needs to be fixed to add .value, or
• There's a bug/regression where this pattern no longer works

Which is it? I'm happy to use .value everywhere if that's the expected pattern, but the official demos suggest otherwise.

Environment details:

• @preact/signals-react: 3.6.0
• react: 19.2.0
• react-dom: 19.2.0

[JoviDeCroock]

It might have worked by chance in React 18 in how they accessed the getter of said value but there is nowhere a documented guarantee. The demo is using react 18 so that could make sense, we don't document the react transform taking care of this, your LLM might have made a mistake here 😉

[Darka7]

It might have worked by chance in React 18 in how they accessed the getter of said value but there is nowhere a documented guarantee. The demo is using react 18 so that could make sense, we don't document the react transform taking care of this, your LLM might have made a mistake here 😉

Thanks for clarifying. Got it - the transform never handled this.

But honestly, this feels like it should be a feature. Here's why:

The Inconsistency

const txt = useSignal("hello");
const flag = useSignal(false);

// Works fine
<div>{txt}</div>

// Doesn't work - need .value
<div title={txt.value}>...</div>
<input disabled={flag.value} />

It's weird that signals unwrap in children but not in attributes. I get why it happened (React 18 vs 19), but from a DX perspective it's inconsistent.

Feature Request

Would you consider adding experimental support for auto-unwrapping in attributes? Even behind a flag?

// What I wish worked
<div title={txt}>...</div>
<input disabled={flag} />

Why:

• More consistent mental model
• Less boilerplate (no .value everywhere)
• What developers intuitively expect

I know this wasn't officially supported before, but that doesn't mean it's not worth supporting now. Plenty of features start as "happy accidents" that become intentional.

Real Impact

Compare these:

// Current
<button
    disabled={isLoading.value}
    className={btnClass.value}
    title={tooltip.value}
>
    {text}
</button>

// Proposed
<button
    disabled={isLoading}
    className={btnClass}
    title={tooltip}
>
    {text}
</button>

The second is cleaner and more intuitive.

At Minimum

If this won't be supported, please update:

1. The demo code to use .value in attributes
2. Docs to explicitly say "auto-unwrap works in children, NOT in attributes"

---

I get this was never guaranteed. I'm just asking - could it be? The DX would be way better.

Versions:

• @preact/signals-react: 3.6.0
• react: 19.2.0

[JoviDeCroock]

No offense, I really prefer talking to a human rather than an LLM. I'm stepping back from this conversation

[Darka7]

No offense, I really prefer talking to a human rather than an LLM. I'm stepping back from this conversation

Why do you keep saying I'm an LLM?

I think what I'm saying is very simple to understand. It used to work to put the signal directly in the attribute. I just migrated to React 19 with the latest version @preact/signals-react, and before, it seemed super intuitive to put the signal directly in the attribute. I realized I had components that received signals and had them directly assigned to the attribute, and I saw that this stopped working. Now that I've made the change, it's causing re-renders because using attribute={signal.value} is causing re-renders. What I'm saying is very simple; it's nothing out of the ordinary for you to bring up LLM stuff. I just want to know if you've considered adding this functionality back, which was previously experimental, or if attribute={signal} is no longer relevant.

[JoviDeCroock]

I am saying this mainly because most of your comments are entirely authored by an ai-model, I wanted to respectfully engage in this conversation however even after the first hint you have continued to do so. I am an OSS maintainer who dedicates his time to this project because I enjoy helping people, part of that is talking to people.

When I say something works by chance that means that it's an environmental factor of how signals are accessed within React that makes this work or not work. If you think about what would be required for us to support this it would go quite far and require a type-aware transpilation process to uncover that foo={bar} is in fact referencing a signal and not a plain or other type of complex value.

If you want to contribute a type-aware transpilation process, we are an OSS project and you are free to open a pull request but afaik that would require a build-process that has access to the TS-TypeChecker and iirc for the project to be in TS strict mode. Both of the above conditions are not met because 1) we use Babel 2) we want to support every type of project.

[Darka7]

I am saying this mainly because most of your comments are entirely authored by an ai-model, I wanted to respectfully engage in this conversation however even after the first hint you have continued to do so. I am an OSS maintainer who dedicates his time to this project because I enjoy helping people, part of that is talking to people.

When I say something works by chance that means that it's an environmental factor of how signals are accessed within React that makes this work or not work. If you think about what would be required for us to support this it would go quite far and require a type-aware transpilation process to uncover that foo={bar} is in fact referencing a signal and not a plain or other type of complex value.

If you want to contribute a type-aware transpilation process, we are an OSS project and you are free to open a pull request but afaik that would require a build-process that has access to the TS-TypeChecker and iirc for the project to be in TS strict mode. Both of the above conditions are not met because 1) we use Babel 2) we want to support every type of project.

I'm only referring to HTMLAttributes or DOMAttributes for that purpose.

[XantreDev]

If we create a plugin that replaces all the jsx templates for lower case tags to our wrapper component around them - it could work. If we use react do updates - it's still sad, but in theory we can do direct HTMLElement updates, like preact adapter do
It makes sense

But it seems that we need to ship some mapping layer for the props

[rschristian]

At Minimum

If this won't be supported, please update:

1. ...
2. Docs to explicitly say "auto-unwrap works in children, NOT in attributes"

Docs only work if you (or your LLM) bother to read them, this is explicitly declared to not be supported and isn't shown anywhere in the React docs:

Limitations

This version of React integration does not support passing signals as DOM attributes. Support for this may be added at a later date.

Source

[Darka7]

At Minimum
If this won't be supported, please update:

1. ...
2. Docs to explicitly say "auto-unwrap works in children, NOT in attributes"

Docs only work if you (or your LLM) bother to read them, this is explicitly declared to not be supported and isn't shown anywhere in the React docs:

Limitations
This version of React integration does not support passing signals as DOM attributes. Support for this may be added at a later date.

Source

Relax, friend. Lately, the community seems more focused on attacking than helping; what a mess! I've already solved it and it works for me. That's why I mentioned migrating from React 18 to React 19 with Signals version 3.6.0. I had seen that you had to use @preact/signals-react-transform to consider it or do it manually, and that worked great for me, but I didn't know it would affect the HTML attributes, and I wanted to see what the solution might be because I really liked that functionality.

I just needed to see if there was an unofficial solution, and that's it. Or maybe I needed recommendations or help to make it work like before, like a plugin or something similar, or if something already existed. Anyway, I'm sharing the solution in case anyone else has the same problem or finds it useful. There are also some extra extensions.

import { Signal } from "@preact/signals-react";
import React, { type ReactElement } from "react";
import dateFormat from "dateformat";
import { _useSignalsImplementation, useSignals } from "@preact/signals-react/runtime";
import * as jsxRuntime from 'react/jsx-runtime';
import * as jsxRuntimeDev from 'react/jsx-dev-runtime';

const ReactElemTypeCustom = Symbol.for("react.transitional.element");


interface SignalSetFuction<T> {
    (value: T): void
    (value: (value: T) => T): void
}
declare module "@preact/signals-core" {

    
    
    interface Signal<T = any> extends ReactElement {
        Change(): SignalSetFuction<T>;
        Set(value: T): void;
        Set(value: (value: T) => T): void;

        Setter(value: T): void;
        Setter(value: (value: T) => T): void;

        IsSignal(): boolean;
        HasValue(Reactive?:boolean): boolean;
        AsInputValue(Reactive?: boolean, Strong?: boolean,encode?: boolean): T;
       // get?: T;
        current: T;
    }

    
}


function SignalValueCustom(props: { data: Signal }) {
    const effectStore = _useSignalsImplementation();
    try {
        return props.data.value;
    } finally {
        effectStore.f();
    }
}


Object.defineProperties(Signal.prototype, {
    $$typeof: { configurable: true, value: ReactElemTypeCustom },
    type: { configurable: true, value: SignalValueCustom },
    props: {
        configurable: true,
        get() {
            return { data: this };
        },
    },
    ref: { configurable: true, value: null },
});


Object.defineProperty(Signal.prototype, "Render", {
    get(this: Signal) {

        return this.value;
    }
});
//Object.defineProperty(Signal.prototype, "Render", {
//      $$typeof: { configurable: true, value: ReactElemTypeCustom },
//    type: { configurable: true, value: SignalValueCustom },
//    props: {
//              configurable: true,
//              get() {
//                  return { data: this };
//              },
//            },
//    ref: { configurable: true, value: null },
//  } as any);

Object.defineProperty(Signal.prototype, "current", {
    configurable: true,
    get(this: Signal) {
        return this.value;
    },
    set(this: Signal, v: any) {
        this.value = v;
    },
});






Signal.prototype.toJSON = function () {
    if (this.value instanceof Date) {
        return dateFormat(this.value, "yyyy-mm-dd'T'HH:MM:ss'Z'");
    }
    return this.value;
};

Signal.prototype.IsSignal = function () {
    return true;
}

/** @noUseSignals */
Signal.prototype.HasValue = function (Reactive=false) {
    if (Reactive) useSignals();

  

    return !IsNull(this.value);
}

/** @noUseSignals */
Signal.prototype.AsInputValue = function (Reactive=false,Strong: boolean = false, encode: boolean = false) {
    if (Reactive == true) useSignals();
    if (encode) {
        if (this.HasValue()) {
            return this.value.QueryParamEncode();
        }

        return "";
    }

    if (!Strong) return this.value || "";

    return this.HasValue() ? this.value: "";
}


//@ts-ignore
Signal.prototype.Ref = function (rf = null) {   
    this.Setter ( rf);
}

Signal.prototype.Change = function <T>() {

    function SetValue(this: Signal<T>, fn: SignalSetFuction<T>) {
        const signalvar = this;
        //@ts-ignore
        signalvar.value = typeof (fn) === "function" ? fn(signalvar.value) : fn;
    }

    return SetValue.bind(this)

}
//old version
Signal.prototype.Set = function <T>(fn = null) {

    const signalvar = this;
    signalvar.value = typeof (fn) === "function" ? fn(signalvar.value) : fn;

   // return this.Set.bind(this);
}

Signal.prototype.Setter = function <T>(fn = null) {

    const signalvar = this;
    signalvar.value = typeof (fn) === "function" ? fn(signalvar.value) : fn;

    // return this.Set.bind(this);
}

function installSignalForJsx() {
    function NVwrapJsx<T>(jsx: T): T {
        if (typeof jsx !== "function") return jsx;

        return function (type: any, props: any, ...rest: any[]) {
            if (typeof type === "string" && props) {
                for (let i in props) {
                    let v = props[i];
                    if (i !== "children" && v instanceof Signal) {
                        props[i] = v.value;
                    }
                }
            }

            return jsx.call(jsx, type, props, ...rest);
        } as any as T;
    }

    try {

        React.createElement = NVwrapJsx(React.createElement);


        if ((jsxRuntime as any).jsx) {
            (jsxRuntime as any).jsx = NVwrapJsx((jsxRuntime as any).jsx);
        }
        if ((jsxRuntime as any).jsxs) {
            (jsxRuntime as any).jsxs = NVwrapJsx((jsxRuntime as any).jsxs);
        }


        if ((jsxRuntimeDev as any).jsxDEV) {
            (jsxRuntimeDev as any).jsxDEV = NVwrapJsx((jsxRuntimeDev as any).jsxDEV);
        }


    } catch (error) {
        console.warn(error);
    }
}
installSignalForJsx();

[Darka7]

too
NvReactive - Reactive State Management for React

What does it do?
It transforms regular objects and arrays into reactive objects where every property is automatically a Signal. Ideal for forms, complex state, and data manipulation.

Features

Deep Reactive Objects: Automatically converts nested objects into signals

Reactive Arrays: Arrays with special methods for adding, deleting, and updating

React Hooks: Ready-to-use useNvReactive and useNvReactiveArray

Two-Way Binding: Automatic binding for forms

import { ReadonlySignal, Signal, batch, computed, signal } from "@preact/signals-core";
import { ReactElement, useMemo } from "react";
import NvDescomponer from "@Lib/Hook/ReduxDescomponer";
import {  NvObjectKeysNames } from "@Lib/NvObjectKeysNames";
import { useComputed, useSignal } from "@preact/signals-react";
import { dynamic } from "@Entity/Helpers";




type ExtractGeneric<S> = S extends SignalReactive<infer T>
	? T
	: S extends Signal<infer D>
	? D
	: never;

type ElementType<T extends ArrayLike<any>> = T[number]; 

declare global {

	
	interface Array<T> {
	//	GetValuesFromSignals(): ExtractGeneric<T>[];
	}
}

declare module "@preact/signals-core" {

	

	
	
	interface Signal<T =any> extends ReactElement {
		//@ts-ignore
		InArrayAddSignal(...val: ExtractGeneric<ElementType<T>>[]);
		//@ts-ignore
		InArrayAdd(...val: T[]);
		//@ts-ignore
		//InArrayAddRangeSignal(val: ExtractGeneric<ElementType<T>>[]);
		//@ts-ignore
		InArrayMergeSignal(val: (valor: ExtractGeneric<ElementType<T>>[]) => ExtractGeneric<ElementType<T>>[]);
		//@ts-ignore
		InArrayMergeSignal(val: ExtractGeneric<ElementType<T>>[]);
		//@ts-ignore
		InArrayResetValues(val?: ExtractGeneric<ElementType<T>>[]);
		//@ts-ignore
		InArrayResetValues(val?: (valor: ExtractGeneric<ElementType<T>>[]) => ExtractGeneric<ElementType<T>>[]);
		//@ts-ignore
		InArrayRemoveSignal(predicate: (item: ElementType<T>, index?: number) => boolean);


		//@ts-ignore
		InArrayGetValues(): ExtractGeneric<ElementType<T>>[];

		//@ts-ignore
		//InArrayGetValuesStore(): ExtractGeneric<ElementType<T>>[];
		//@ts-ignore
		InArrayGetValuesStore(): ReadonlySignal<ExtractGeneric<ElementType<T>>[]>;

		//@ts-ignore
		//InArrayGetValuesHook(): ExtractGeneric<ElementType<T>>[];
		//@ts-ignore
		InArrayGetValuesHook(): ReadonlySignal<ExtractGeneric<ElementType<T>>[]>;		
		

	}


}

Signal.prototype.InArrayGetValues = function () {
	return NvDescomponer.Array(this as any) ?? [];
}


//Signal.prototype.InArrayGetValuesStore = function () {
//	var Values = computed(() => NvDescomponer.Array(this.value) ?? []);
//	return Values.value;
//}

Signal.prototype.InArrayGetValuesStore = function () {
	var Values = computed(() => NvDescomponer.Array(this as any) ?? []);
	return Values;
}

//Signal.prototype.InArrayGetValuesHook = function () {
//	var Values = computed(() => NvDescomponer.Array(this.value) ?? []);
//	return Values.value;
//}

Signal.prototype.InArrayGetValuesHook = function () {
	var Values = useComputed(() => NvDescomponer.Array(this as any) ?? []);
	return Values;
}



Signal.prototype.InArrayAdd = function (...val) {
	function Argumentos(...arg: any[]) {
		var GetArguments = arg.flatMap(item => {
			if (Array.isArray(item)) {
				return item.flatMap(item => item);
			} else {
				return item;
			}
		});
		return GetArguments ?? [];
	}

	this.Set(prev =>
		[
			...prev,
			[...Argumentos(val)]
		]
	);
}

Signal.prototype.InArrayAddSignal = function (...val) {
	function SignalAssign(...arg: any[]) {
		var GetArguments = arg.flatMap(item => {
			if (Array.isArray(item)) {
				return item.flatMap(item => item);
			} else {
				return item;
			}
		});

		return GetArguments.map(item => {
			if (item instanceof Date) {
				return signal(item);
			} else if (typeof (item) == "object" && !isNullOrEmpty(item)) {
				return NvReactive(item);
			} else {
				return signal(item);
			}
		}) ?? [];

	}

	this.Set(prev =>
		[
			...prev,
			...SignalAssign(val)
		]
	);
}



Signal.prototype.InArrayMergeSignal = function (fn) {
	batch(() => {
		// Solo computar valores si fn es una función
		const result = typeof fn === "function"
			? fn(NvDescomponer.Array(this.value) ?? [])
			: fn;

		// Evita crear arrays vacíos innecesarios
		this.Set(isNullOrEmpty(result) ? [] : result.map(item => {
			// Reutiliza la lógica para crear signals
			return item instanceof Date ? signal(item)
				: typeof item === "object" && !isNullOrEmpty(item) ? NvReactive(item)
					: signal(item);
		}));
	});
}


Signal.prototype.InArrayResetValues = function (fn=null) {
	batch(() => {

		const values = typeof (fn) === "function" ? NvDescomponer.Array(this.value) : null;

		var result :any[]= typeof (fn) === "function" ? fn(values) : fn as any[];

		this.Set(r => []);

		if (fn != null) {
			
			if (!isNullOrEmpty(result)) {
				var NewValues= result.map(item => {
					if (item instanceof Date) {
						return signal(item);
					} else if (typeof (item) == "object" && !isNullOrEmpty(item)) {
						return NvReactive(item);
					} else {
						return signal(item);
					}
				});
				this.Set([...NewValues])
			} else {
				 this.Set([])
			}		
			
		}
		

	});

}

Signal.prototype.InArrayRemoveSignal = function(predicate) {
	batch(() => {
		
		var newValues = (this.value as any[]).filter((item,index) => {

			var resultNotIn = !predicate(item, index);
			return resultNotIn;
		});
		this.Set([...newValues])

	});

}



class ReactiveForBind {
	static Merge(this: SignalReactive<any>, fn) {

		if (!isNullOrEmpty(this)) {


			const values = typeof (fn) === "function" ? NvDescomponer.Objecto(this) : null;
			var NewValues = typeof (fn) === "function" ? fn(values) : fn;


			batch(() => {
				let keyify = (obj, prefix = "") => {


					Object.entries(obj)
						.filter(([key, val]) => typeof (val) != "function")
						.forEach(current => {
							var [key, value] = current;
							key = prefix + key;
							
							if (value instanceof Date) {

								eval(` this.${key}.value= value ;`);
							} else if (Array.isArray(value)) {
								eval(` this.${key}.InArrayMergeSignal(r=>[...value] );`);
							} else if (typeof (value) == "object" && !isNullOrEmpty(value)) {
								keyify(value, key + ".")
							} else {
                                
								eval(` this.${key}.value= value ;`);
								
							}


						});

				};

				keyify(NewValues)
			});


		}


	}

	static Reset(this: SignalReactive<any>, datamerge = null) {

		if (!isNullOrEmpty(this)) {

			const PreValues = typeof (datamerge) === "function" ? NvDescomponer.Objecto(this) : null;

			batch(() => {
				let keyify = (obj, prefix = "") => {

					Object.entries(obj)
						.filter(([key, val]) => typeof (val) != "function")
						.forEach(([key, signalcurrent]: [string, any]) => {

							var IsSignal = false;
							try {
								IsSignal = signalcurrent["IsSignal"] != undefined;
							} catch (e) {
								
								IsSignal = false
							}

							if (IsSignal) {
								if (signalcurrent.value instanceof Date) {
									signalcurrent.value = null;
								} else if (Array.isArray(signalcurrent.value)) {
                                    
									(signalcurrent as Signal).InArrayMergeSignal([]);

								} else {
									signalcurrent.value = null;

								}

							} else {
								if (typeof (signalcurrent) == "object" && !isNullOrEmpty(signalcurrent)) {
									keyify(signalcurrent, "")
								}
							}

						});

				};

				let keyifyMerge = (obj, prefix = "") => {


					Object.entries(obj)
						.filter(([key, val]) => typeof (val) != "function")
						.forEach(current => {
							var [key, value] = current;
							key = prefix + key;

							if (value instanceof Date) {

								eval(` this.${key}.value= value ;`);
							} else if (Array.isArray(value)) {
								eval(` this.${key}.InArrayMergeSignal(r=>[...value] );`);
							} else if (typeof (value) == "object" && !isNullOrEmpty(value)) {
								keyify(value, key + ".")
							} else {
								eval(` this.${key}.value= value ;`);
							}


						});

				};

				keyify(this);
				if (datamerge != null) {
					var NewValuesMerge = typeof (datamerge) === "function" ? datamerge(PreValues) : datamerge;
					keyifyMerge(NewValuesMerge);
				}

			});
		}

	}

	static BindInput(this: SignalReactive<any>, obj: any) {


		const ObjectNames = computed(() => NvObjectKeysNames(obj));

		const BindInput = computed((): BindInputFor<any> => {

			return {
				For: (fn) => {

					return ({ Model: fn(this as any), name: fn(ObjectNames.value as any) });
				}
			}
		});
		return BindInput.value;
	}

	static BindInputHook(this: SignalReactive<any>, obj: any) {


		//const ObjectNames = computed(() => NvObjectKeysNames(obj));

		//const BindInput = useComputed((): BindInputFor<any> => {

		//	return {
		//		For: (fn) => {

		//			return ({ Model: fn(this as any), name: fn(ObjectNames.value as any) });
		//		}
		//	}
		//});
		return useMemo(() => {
			const ObjectNames = NvObjectKeysNames(obj); 

			const BindInput = computed((): BindInputFor<any> => {

				return {
					For: (fn) => {

						return ({ Model: fn(this as any), name: fn(ObjectNames as any) });
					}
				}
			});

			return BindInput.value;
		},[]);
	}

	static GetValues(this: SignalReactive<any>): any {

		return NvDescomponer.Objecto(this) ?? {};
	}

	static GetPropsSignals(this: SignalReactive<any>): any {

		return this ?? {};
	}
	
	//static GetValuesStore(this: NvReactiveObjType<any>): any {

	//	var Values = computed(() => NvDescomponer.Objecto(this) ?? {});

	//	return Values.value;
	//}

	static GetValuesStore(this: SignalReactive<any>): ReadonlySignal<any> {

		var Values = computed(() => NvDescomponer.Objecto(this) ?? {});

		return Values;
	}
	//static GetValuesHook(this: NvReactiveObjType<any>): any {

	//	var Values = useComputed(() => NvDescomponer.Objecto(this) ?? {});

	//	return Values.value;
	//}
	static GetValuesHook(this: SignalReactive<any>): ReadonlySignal<any> {

		var Values = useComputed(() => NvDescomponer.Objecto(this) ?? {});

		return Values;
	}

};





 export type BindInputForKeys<T > = { [P in keyof T]: T[P] extends Date ? any : T[P] extends any[] ? any : T[P] extends object ? BindInputForKeys<T[P]> : any };

 export type BindInputForResult<T = any> = { Model: Signal<T>, name?: any };

 export type BindInputFor<T > = {
	 For: (Fn: (Model: T) => any) => BindInputForResult<T>
}


//extensiones
export type AllOptionalProps<T> = { [P in keyof T]?: T[P] extends object ? Partial<T[P]> : T[P] }

export type SignalReactive<T > = {
	[P in keyof T]:
	T[P] extends Function
	? T[P]
	: T[P] extends Date
	? Signal<T[P]>
	: T[P] extends any[]
	? SignalArray<T[P]>

	: T[P] extends string|number |boolean
	? Signal<T[P]>

	: T[P] extends dynamic
	? Signal<any>

	: T[P] extends object
	? SignalReactive<T[P]>
	: Signal<T[P]> }
	& {
		
	Merge?(model: AllOptionalProps<T> ): void;
	Merge?(model: (values: AllOptionalProps<T>) => AllOptionalProps<T>): void;
	Reset?(merge?: AllOptionalProps<T> ): void;
	Reset?(merge?: (values: AllOptionalProps<T>) => AllOptionalProps<T>): void;

	BindInput?(): BindInputFor<T>;
	BindInputHook?(): BindInputFor<T>;
	GetValues?(): T;
	GetPropsSignals?(): T;
	//GetValuesStore?(): T;
	GetValuesStore?(): ReadonlySignal<T>;

	//GetValuesHook?(): T;
	GetValuesHook?(): ReadonlySignal<T>;
}


function NvReactive<T >(obj: T) {
	let reactive = {} as SignalReactive<T>;

	for (let i in obj) {
		if (typeof (obj[i])=="function") {
			reactive[i] = reactive[i];
		}else if (obj[i] instanceof Date) {
			reactive[i] = signal(obj[i]) as any;

		} else if (Array.isArray(obj[i])) {
			//@ts-ignore
			reactive[i] = NvReactiveArray(obj[i] as any[]) as any;

		} else if (typeof (obj[i]) == "object" && !isNullOrEmpty(obj[i])) {

			reactive[i] = NvReactive(obj[i] as any) as any;

		} else {
			reactive[i] = signal(obj[i]) as any;
		}
	}

	reactive.Reset = ReactiveForBind.Reset.bind(reactive);
	reactive.BindInputHook = ReactiveForBind.BindInputHook.bind(reactive,obj);
	reactive.BindInput = ReactiveForBind.BindInput.bind(reactive,obj);
	reactive.Merge = ReactiveForBind.Merge.bind(reactive);

	reactive.GetValues = ReactiveForBind.GetValues.bind(reactive);
	reactive.GetPropsSignals = ReactiveForBind.GetPropsSignals.bind(reactive);

	reactive.GetValuesHook = ReactiveForBind.GetValuesHook.bind(reactive);
	//reactive.GetValuesHookSignal = ReactiveForBind.GetValuesHookSignal.bind(reactive);

	reactive.GetValuesStore = ReactiveForBind.GetValuesStore.bind(reactive);
	//reactive.GetValuesStoreSignal = ReactiveForBind.GetValuesStoreSignal.bind(reactive);

	return reactive;

}

export type SignalArray<S extends any[]=any[] > = Signal<SignalReactiveArray<S>>;

 type SignalReactiveArray<T extends any[]> = {
	[P in keyof T]:
	T[P] extends Function
	? T[P]

	: T[P] extends Date
	? Signal<T[P]>

	: T[P] extends dynamic
	? Signal<any>

	: T[P] extends any[]
	? SignalArray<T[P]>
	: T[P] extends object
	? SignalReactive<T[P]>
	: Signal<T[P]> };


function NvReactiveArray<T extends any[]>(obj: T): SignalArray<T> {	
	
	if (!isNullOrEmpty(obj)) {
		let reactive = obj.map(item => {
			if (item instanceof Date) {
				return signal(item);

			} else if (typeof (item) == "object" && !isNullOrEmpty(item)) {
				return NvReactive(item);
			} else {
				return signal(item);
			}
		}) as SignalReactiveArray<T>;
		return signal(reactive);
	}
	
	return signal([] as SignalReactiveArray<T>);
}
function useNvReactiveArray<T extends any[]>(obj: T) {
	return useMemo(() => NvReactiveArray(obj), []);
}


function useNvReactive<T >(obj: T) {
	return useMemo(() => NvReactive(obj), []);
}








export type OmitSignal<T> = {
	[P in keyof T]:
	T[P] extends Function
	? T[P]
	: T[P] extends Date
	? T[P]
	: T[P] extends Signal<infer S>
	? S
	: T[P] extends SignalReactive<infer S>
	? S
	: T[P]
};

export type SignalType<T> = T extends Function
	? T

	: T extends Date
	? Signal<T>

	: T extends dynamic
	? Signal<any>

	: T extends any[]
	? SignalArray<T[]>
	: T extends object
	? SignalReactive<T>
	: Signal<T>;
	



export { NvReactive, useNvReactive, NvReactiveArray, useNvReactiveArray }

[Darka7]

Examples

Signal Extensions

adds useful methods to Signal prototype:

const name = signal("John");

// Set value
name.Set("Peter");
name.Set(prev => prev.toUpperCase());

// Get setter function
const setName = name.Change();
setName("Peter");

// Use .current instead of .value
name.current = "Peter";
console.log(name.current);

// Direct render in JSX (no .value needed)
<div>{name}</div>

// Check if has value
if (name.HasValue()) { }

// For inputs (returns "" if empty)
<input value={name.AsInputValue()} />

Nested Objects

Shopping Cart Example

const cart = useNvReactive({
  id: 0,
  cartType: {
    name: "",
    config: {
      currency: "USD",
      allowDiscounts: false
    }
  },
  customer: {
    name: "",
    address: {
      city: "",
      street: ""
    }
  },
  total: 0
});

// Access nested values
cart.cartType.name.value
cart.cartType.config.currency.value
cart.customer.address.city.value

// Modify nested values
cart.cartType.name.Set("Express");
cart.customer.address.city.Set("Madrid");

Merge - Partial Update

Merge only updates what you send, everything else stays the same.

// Initial state
const data = useNvReactive({
  user: { name: "John", email: "john@mail.com" },
  config: { theme: "dark", notifications: true }
});

// Merge: only updates name
data.Merge({
  user: { name: "Peter" }
});

// Result:
// user.name = "Peter" (changed)
// user.email = "john@mail.com" (unchanged)
// config.theme = "dark" (unchanged)

Merge multiple levels

cart.Merge({
  cartType: {
    name: "VIP",
    config: { currency: "EUR" }
  },
  customer: {
    name: "Ana Garcia"
  },
  total: 250
});

// Only changes what you send, rest stays the same
// cart.cartType.config.allowDiscounts (unchanged)
// cart.customer.address.city (unchanged)

Merge with function

cart.Merge(values => ({
  cartType: {
    name: values.cartType.name + " Premium"
  },
  total: values.total * 1.10
}));

// Or update single values with Set()
cart.cartType.name.Set(prev => prev + " Premium");
cart.total.Set(prev => prev * 1.10);

Reset - Clears Everything First

Reset clears all values first, then sets only what you provide.

// Reset without parameters: clears everything
data.Reset();
// Result: everything is null

// Reset with data: clears everything, then sets
data.Reset({
  user: { name: "Maria" }
});

// Result:
// user.name = "Maria" (set)
// user.email = null (cleared)
// config.theme = null (cleared)
// config.notifications = null (cleared)

Loading data from API

const loadData = async () => {
  const response = await fetch('/api/cart/123');
  const data = await response.json();

  // Clear everything and load new data
  cart.Reset(data);
};

Merge vs Reset Comparison

const product = useNvReactive({
  id: 1,
  name: "Laptop",
  price: { base: 1000, discount: 0 }
});

// MERGE: Partial update
product.Merge({ name: "Gaming Laptop", price: { discount: 100 } });
// id: 1 (unchanged)
// name: "Gaming Laptop" (changed)
// price.base: 1000 (unchanged)
// price.discount: 100 (changed)

// RESET: Clears everything first
product.Reset({ name: "Gaming Laptop", price: { discount: 100 } });
// id: null (cleared)
// name: "Gaming Laptop" (set)
// price.base: null (cleared)
// price.discount: 100 (set)

Getting Values

// Get plain object (without signals)
const values = cart.GetValues();
console.log(values);
// { id: 0, cartType: { name: "...", config: {...} }, ... }

// In React component (computed signal)
const reactiveValues = cart.GetValuesHook();
console.log(reactiveValues.value); // Auto-updates

Complete Example: Order Form

function OrderForm() {
  const order = useNvReactive({
    number: "",
    orderType: {
      name: "",
      config: { deliveryDays: 3, requiresApproval: false }
    },
    customer: {
      name: "",
      address: { city: "", street: "" }
    },
    amounts: { subtotal: 0, taxes: 0, total: 0 }
  });

  const calculateTotal = () => {
    order.Merge(v => ({
      amounts: {
        taxes: v.amounts.subtotal * 0.16,
        total: v.amounts.subtotal * 1.16
      }
    }));
  };

  const loadFromAPI = async () => {
    const data = await fetch('/api/order').then(r => r.json());
    order.Reset(data);
  };

  return (
    <div>
      <input
        value={order.orderType.name}
        onChange={e => order.orderType.name.Set(e.target.value)}
      />

      <input
        value={order.customer.address.city}
        onChange={e => order.customer.address.city.Set(e.target.value)}
      />

      <input
        type="number"
        value={order.amounts.subtotal}
        onChange={e => {
          order.amounts.subtotal.Set(Number(e.target.value));
          calculateTotal();
        }}
      />

      <p>Total: ${order.amounts.total}</p>

      <button onClick={() => order.Reset()}>Clear</button>
      <button onClick={loadFromAPI}>Load Data</button>
    </div>
  );
}

Quick Reference

NvReactive Methods

Method	Action	Example
Merge	Updates only what you send	obj.Merge({ user: { name: "Peter" } })
Reset	Clears everything, then sets	obj.Reset({ user: { name: "Peter" } })
GetValues	Gets plain object	const data = obj.GetValues()
GetValuesHook	Gets reactive signal	const data = obj.GetValuesHook()
BindInputHook	Two-way binding	<input {...obj.BindInputHook().For(x => x.name)} />

Signal Methods

Method	Action	Example
.value	Standard get/set	signal.value = "text"
.current	Alias for .value	signal.current = "text"
.Set(val)	Set value or function	signal.Set("text") or signal.Set(v => v + 1)
.Change()	Returns setter function	const setter = signal.Change()
.HasValue()	Check if not null	if (signal.HasValue())
.AsInputValue()	Safe value for inputs	<input value={signal.AsInputValue()} />
Direct render	Use in JSX directly	<div>{signal}</div>

When to use:

• Merge: Update form partially, load incremental data
• Reset: Clear form, load new data from API
• Set(): Respond to input events, cleaner than .value =
• Change(): Pass setter to child components
• AsInputValue(): Prevent undefined in inputs

a small contribution to the community

[rschristian]

Relax, friend. Lately, the community seems more focused on attacking than helping; what a mess!

No one is attacking you, we just want you to actually put in some effort and communicate with us. It's abundantly clear you've been copy/pasting to and from an LLM which is lazy and disrespectful to maintainers who are volunteering time to help you.

Seeing as how your solution was to have an LLM seemingly rewrite a chunk of the lib for you, and you decided this thread would benefit from copy/pasting the AI-slop into the comments, I'm just going to close & lock this issue.

If someone wants to request this feature as a separate issue in the future (as it has never intentionally existed), feel free, but this thread is beyond redemption IMO.