elbywan / hyperactiv Goto Github PK

Hello Julien,

just to let you know: I just implemented (ok, "hacked" would describe it much better) a version which allows to observe an object independent of specific keys.

Which means: it is now possible to define a single computed function that will be called whenever any property of an observed object will be created, modified or deleted.

With greetings from Germany,

Andreas Rozek

Hi, congratulations for the project, super compact and super powerful.
I tried the integration with React and it works very well apart from the "Computed" part. I tried to create a computed property but I can't get it to work. It is not updated when the properties of the Observable object are changed.

Do you have any examples of use with React?
Thanks and great work again.

Hi again. I'm wondering if I could add a debounce feature. batch: true doesn't seem to reduce the number of calls much. I'm not 100% sure, but hopefully would find time to submit a PR in the next 2-3 weeks.

Questions:

1. Is this interesting at all?
2. Should I reuse batch: boolean | integer or add debounce: integer (time in ms) option?

Hello!

I first want to second the guys from another post that this library is excellent! I really like the super-lightweight nature.

Is it possible to set a reactive object without firing its reactive depends ad-hoc (please see small example below)? This is useful when you for some reason need to change a reactive property but do not want to update the reactively calculated value.

Going batch-mode seems to be overkill if it happens on an ad-hoc basis.

myobject = observe({

    data        : null,
    test        : null

})


computed(() => {

     myobject.result = data + test

})

donotfirecomputed({myobject.data = 2}) #computed() should not be fired

Awesome library. Awesome updates to support array

let obj = observe({ }, { deep: true });
obj.a = 10;
obj.a = null;

Can someone shed some light on default import (using Typescript). This is the code using default import (matching the types from index.d.ts)

import hyperactiv from "hyperactiv";
export const observe = hyperactiv.observe;

but then during run time default is undefined

exports.observe = hyperactiv_1.default.observe;
                                       ^
TypeError: Cannot read properties of undefined (reading 'observe')

if I do instead import * as hyperactiv from "hyperactiv"; then compiler complains about hyperactiv.observe but it works at runtime.

(my tsconfig: "module": "CommonJS")

Hi. Thank you for this wonderful library! I'm trying to use it with Vue and I'm wondering what is the recommended approach to adding observed elements dynamically.

My original idea was to just have 1 store and dynamically add all the site features to it, but I feel like there's going to be caveats I don't see yet. Do you have any "official" approach?

Also, the bubble option isn't documented - is it relevant?

I wonder if there is a benchmark comparing hyperactive to the other solutions for reactive data structures? most notably mobx

Nice work on this amazing lib!

Have you done any tests with older browsers? (IE11)
The library uses proxies, is this polyfill-able with https://github.com/GoogleChrome/proxy-polyfill ?

First of all: thank you very much for your brilliant library!

However, when I tried to use it, I ran into the problem that Object.defineProperty does not seem to be supported. For that reason, I tried to understand your code and made a very first attempt to add such support (see my own fork of your original).

So far, it seems to "work on my machine" but I would still consider my code as very (pre?) alpha.

Nevertheless, I would really like to see full object support in "hyperactiv".

With greetings from Germany,

Andreas Rozek

Thanks for this lib, but I'm getting an error when trying to use require:

const hyperactiv = require('hyperactiv')

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

Is it no longer UMD like stated in README?

Can we change the way computed works when it comes to getter functions? Currently, it's not listened to, though I can add a listener and set it as a property value instead, ex:
instead of get value() I create a computed then inside that callback I assign the new value to .value
Is it possible instead, to make the getter functions to be automatically computed? This behavior mimics mobx but i do see an improvement in DX as it is arguably more straightforward

Thank you for this package!

Would like to see TypeScript declaration and ESM distribution if possible.

calling observe on a date object, makes all operations throw: TypeError: this is not a Date object.

to reproduce:

const test = observe({
      date: new Date(),
    })
test.date.getDate()

I have a use case that looks something like this:

const observed = observe({
    a: 1,
    b: 2,
    c: 0
})

computed(() => {
    const obj = {
        x: fn1(observed.a),
        y: fn2(observed.b),
        z: fn3(observed.c)
    }
    console.log(obj)
})

observed.a = 2 // should only rerun `fn1`

Assuming fn1, fn2, and fn3 are expensive, I'd like some way to compute my object incrementally, meaning only recompute the values whose inputs have changed and patch the result with the previous version (which is cached).

This type of functionality may be out of scope for this library, but I wanted to check if you had any thoughts/suggestions on how to achieve this.

I just want to say thank you!

• The API surface is nice to work with
• serves as a great replacement for MobX
• SOO lightweight

const { observe } = require('hyperactiv')
const { write } = require('hyperactiv/handlers')

let copy = {}
let obj = observe({
    __handler: write(copy)
})

obj.a = 10

console.log(copy.a) // 10

delete obj.a

console.log(copy.a) // 10 (should be undefined)

When you delete a property of obj, the __handler method is not called and therefore copy is not updated.

Any ideas how to fix this?

Very neat little library you have created. I am working on combining this with Lit-Html to build custom web components. It seems like a perfect combination.

I was giving it a few tests using the RunKit sandbox on NPM to see how well it would work with nested observables and conditional logic before I start to integrate into my components.

So the first thing I needed to verify was that you detect data property dependencies each time a computed function is run (not just first time), so it can handle conditional paths in the computed function. This seems to work fine.

The next test was to see if changes to observed object properties that were no longer used in the last computed function run (based on changes to conditional paths), would continue to execute the computed function.

const hyperactiv = require("hyperactiv");
const { observe, computed } = hyperactiv;

const context = observe({
    user: {
        name: "Chris Beckett",
        age: 49,
        verified: false
    }
});

const state = observe({
    ready: false,
    context: context
});

computed(() => {
    console.log('Changed...');
    if (!state.ready) {
        console.log("Not Ready");
    } else {
        if (!state.context.user.verified) {
            console.log(`Not Verified - ${state.context.user.name}`);
        } else {
            console.log(`Verified - Age ${state.context.user.age}`);
        }
    }
});

state.ready = true;
context.user.age = 48;
context.user.verified = true;
context.user.age = 50;
context.user.name = "Janet Kwan";

The behavior exhibited is that when a piece of state is modified that was previously detected in a conditional path, but was not rendered in the last run, the computed function will run again even though nothing needs to be rendered. In the above example, the computed function runs again and prints 'Verified - Age 50' when the 'context.user.name' data is changed even though it is not required based on the last run (and is not used in the result of the next run). In other words, the computed function continues to execute when data is changed it no longer uses.

You will certainly have put a lot of thought and testing into this than I have in my little example. I can't think of a scenario where the computed function would need to run based on a change in data that was not used in the last run?

It might be beneficial to clear and recreate the data dependencies during each run of a computed function so it will only run again if properties actually used in the last run have changed.