Implementation of createEverithingMutableWithMagic() and make everything reactive by magic.

[awillSoftwares]

There are cases when we need all the object and nested objects/arrays reactive.

The way we need to change nested objects/arrays in SolidJS is too much opinative from the framework.

In order to make existent codebases portable to SolidJs and to use patterns Object Oriented / Clean Architecture / Design Driven Design, would be incredible awesome if we had something like createEverithingMutableWithMagic()

In Svelte we can use classes (with nested objects/arrays) and when we reassign an class instance, like: users = users; All the nested objects will be reactive.
Same in svelte stores with $store when object has changed;

If we create javascript classes with

constructor() {
        return createMutable(this);
    }

Everything becomes reactive by default. If is there a way to create an object like

let someService = createEverithingMutableWithMagic(new Service())

and make all the nested objects reactive by default, maybe using $PROXIABLE symbols.

Here is some example how to make everything reactive by default using return createMutable(this) in constructor:

EDITED: In my example all the things will work event without the createMutable(this) in constructor. But if we have some nested objects and arrays using class, only the first update will work and only for the first element of Array. I will update with some examples to show the use cases for this.
(When we have some store that use class with nested <For> loops, the nested objects doesnt become reactive) and the way SolidJS work to change nested objects is too much opinated)

https://playground.solidjs.com/?version=1.4.1#NobwRAdghgtgpmAXGGUCWEwBowBcCeADgsrgM4Ae2YZA9gK4BOAxiWGjIbY7gAQi9GcCABM4jXgF9eAM0a0YvADo1aAGzQiAtACsyAegDucAEYqA3EohWOXHrwLF+AYQVcIw3NLkLeAcjoNbT0-Swhbbj4QZiEoXDgAWXpcKBM1OG95RRVAzV0DMlxuOAsbTkj+ADFuTN8c9Ty9UusPCHpFVwgPZlw0WggAZRTcejJ+K15J3gB5CA0PXgBeZTBpgDkAGQBJNYBRFSwJqemZGXm4JZWTs4wSsCtJKytmNSgyMYBVMnFxiCneQj0NJoZi8TSIXiFRgYADmYX+gOBoOg8AhUNh8KmiI0oMKcVGEM63V6-SG+LIYSOk2Y-Sh9B63AAFODIbhoRAYVheCi4Gi2bCuXiRmRCf1iX1BsNRgBKX7-f64AAWaDIADpNJdNJj5Q5lWqeZcedr5UqVaqhaNLhaKVT5UIRow-jE4HFEslUulGaayNLjY8Wv96IQRK6ycLGR5DGGCbwiXAehLoz65TrdWbrYa4FGpTa-lN-bagyH4l9xGtYHAI1ny6jWeyYbKQLaFXrVQblpGa3A-Q8ni0Xm8xgk4O8oDCLk285NsSDeKNxBDS4xjTPQfBR+OACpwCi4Pn1ylT3g0iB0hmMRnzxiL76MLnrshjuDb3f72GN5tTb2qq+XK-GlszQfJ8Xz4ZZgK3HdcAAqZ7SYJ1YniJIUjSStvV9Pt-n9AsIAHd5eGHDcRwGcQADcQQnW1V14CCRwhQjH3HYAAF1LhYw9-hPM8igvD8j3+ODHWPRC3RQz10J7AMpigEQRAYp9GVo+iR0YuA+NTNM1VotVATIRVFJUp8MKPbC+2eV58KXMgSMYcjWBTacgRxOdbxFXglxYtjmI4qYuLZekeMZdTU0EhCXSQ91UK9PVjKwzCpnHXAl0vW8thEN8OWCnVQs0n9XNVGQMBERkKCWAA+XgKHVEQlkWZYrzS2L83iyYZJEZKrxvcQspNVsrx00Z9KvJrJhwzjFSgDk4CXLsUvENKMs5bksxmitFp6wC1USjrUpEaUAEIf2DV1VvgKtDFOtTJNtZgJqmpM5sYBa6wFZbs3JUUunjElJXJDav1bbbb0exrDqLUMc3OpMRqkXsWisdI+G0my7IuDsswIwzx2ssiKKCsJEZc8QcdsijM0MdzXJRvHpT7QmoEMNA1DUcnKfERkVAZpm1AOFYueZ3m4wTUkc1VWZzmM+noFZ5LOegXmVAAQXl7BYzFb7E1F8XbmM-rqdYVU2uS-m1GMvtkdxg22vk8dzsxojGRNrkVAACTQfaPf2lRpWMi3Sat2SbcrSN7dUx3GeZ52wBduBmdoT2vbAH2wj91HDcDrHg4xoPw+5qPZguIPvd9zOSbT63M7tnPJqgKO3dkLJeBr4uU9L-W4HTuTK5D6uI7UKPldoJUfiLpOzYgVOKM7nOe8rmu67QJuYXQP4fEUZux8PQnbsm8dLs3Dg4AYMDeCC8qHMhOBcAP+Bj8ZM-FgqycNL1y2O53qbLo5sATYVsAAClaCKmsEnT8kxvjX0PnfB+T8wHylfv7d+d0963lmpzPuf9FYYNAfxVMH9xxCx+mGZ8UDkhBTgZILkABGAADHQ2mUlRrULoTQhhOFt7ILgIQzWrob5H2SJcGBF8IF8OgbKR+F9AxUzfqqfBcAHroO5oLdWwtfrCjFqcCWcCRGkNwPfcRsDcE6gQWnORCif7YK5NwkW5IxZzB1nA8au9pqoIrKIshDCNKUN4LQ+htpvG+NYXDZ4nD966PIf2WkfBFaEEIKKcorQT5COfrBK+8FT5wIADwiDQKRMqLUNK8EydUCQLpbqLBAJPA22lJD5KMYUkABkiIGKKTkvJlTM55XEG2Cs0hMlkEIJNRxhTwEEHSBU6I6huAQlol0xg5ocy1WWNYtRow7HnF4AAfhWDCIQwgVC8AhCoIQIgVCSFqYyDpRE5kLPJJIaUmT9ADMmmVCEVzVKqloqBf0IydSPLaWVH5vzHklLqVk-QALbTGUkIeHcdg+BiBkFAegahomxMPH2IQoh2ZCMyTEwgvB9BlS5CIWgzB2ieFVIlXY6R4AQFwAAIXwGlb+UBYne32sZMAkhmJAA

[awillSoftwares]

This was achived by using MobX with SolidJS.