Coder Social home page Coder Social logo

Comments (4)

LiquidAlmond avatar LiquidAlmond commented on June 18, 2024

Here's a grain of salt to go along with my analysis since I'm a noob.

It appears reactive converts class instances to an object consisting of just the public variables of the class. The root issue can be replicated with the following.

class Test {
  #something;
  constructor(something) {
    this.#something = something;
  }
}
const test = new Test("something");
console.log(test.#something);
console.log(Object.entries(test));

// Check van.reactive({ test }) if you want

Conversing with ChatGPT has given a reasonable solution. We just need to change the !(srcObj instanceof Object) check in the reactive function to

!(srcObj && srcObj.contructor === Object && getPrototypeOf(srcObj))

We can make this smaller if we ignore the case where srcObj is created with Object.create(null). There may be other optimizations that I'm unaware of.

I believe this solution would make it so class instances are never reactive, which doesn't seem the greatest. There's probably another solution I'm missing.

from van.

LiquidAlmond avatar LiquidAlmond commented on June 18, 2024

Well, my noobness was shining bright.

Seems the issue is more with how Date operates, specifically the value of this gets changed to the proxy instead of the Date object, which is what the functions in Date expect. Changing the get trap in the Proxy created in reactive to set the proper context on function calls might do the trick.

from van.

Tao-VanJS avatar Tao-VanJS commented on June 18, 2024

See https://vanjs.org/x#caveat-native-reactivity.

from van.

mintong89 avatar mintong89 commented on June 18, 2024

ok got it, I guess I'll stringify the date before inserting into state. Thanks.

from van.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.