vobyjs / voby Goto Github PK

Potentially instead of "untracking" we could use "unreading" or something, where reading an observable directly inside it throws, to explicitly force some reads to be untracked, rather than to have them implicitly untracked.

Clicking quickly on "increment" in https://stackblitz.com/edit/vitejs-vite-69hjfc?file=src%2Fcounter.tsx makes the Suspense leak.

I assume that useResource does not "drop" a promise that is outdated.

Example: https://gist.github.com/derolf/77dfbd21ac6804537c4927590af16aad#file-observablefrompromise-ts-L25

I tried testing Voby with easy-dom and bun.sh, but events were not working.

After I tried testing with @testing-library/dom and bun.sh, it worked fine.

I needed a testing library for Voby.

Example for solid: https://github.com/solidjs/solid-testing-library/

Here's a template for a Row:

export const Row = template(
  (props: { style?: JSX.StyleProperties; children?: JSX.Children }) => {
    props = {
      ...props,
      style: {
        display: "flex",
        flexDirection: "row",
        ...props.style,
      },
    };
    return <div {...props} />;
  },
);

Example usage:

<Row>test</Row>

Renders:

<div style="display: flex; flex-direction: row;"></div>

Expected:

<div style="display: flex; flex-direction: row;">test</div>

https://codesandbox.io/s/voby-demo-clock-forked-z5c9sz?file=/src/index.tsx

Similar bug on Solidjs as 1835

I have a feeling I may not be using Voby correctly though but removing the () in JSX doesn't help either from my brief experiments

Repro: https://playground.solidjs.com/anonymous/432e1496-13a8-49ec-ac1f-5638ee5a3971

Maybe it will be better to use there (and in other places) "safe closure" approach? It is described here: https://dmitripavlutin.com/react-hooks-stale-closures/

How is it supposed to create ObservableReadonly<T> from Observable<T>? Is there anything similar to $.readonly(someObservable) utility from oby lib? I saw ObservableAbstract<T, Ti> type has readonly prop but its return type is ObservableReadonlyAbstract<T, TI>, not ObservableReadonly<T>.

Hello, for many use cases having a true HMR would be amazing. Direct manipulation editors for example.

VOBY_HMR: If true, then Voby will catch errors that happen during diffing and log them to the console instead, keeping your page working after an HMR update event in some case. Fine-grainined support for HMR is not implemented (yet?).

But as far as I can see it's not implemented yet? What kind of pitfals should one expect with HMR while using voby?

I might be useful to provide JSDoc comments for the exported functions.

Recently I've been doing some visualization work and I've been passing const useChart => (opts) => el => {} to <div ref={} />, Directive can do something similar but it looks more complicated, I'd like to know in what scenarios Directive should be used?

Reading a memo that reads a resource could not trigger Suspense properly today, if the memo already executed and calling it just returns the old value.

The generic parameter T extends keyof JSX.Directives has collapsed to T extends never in the .d.ts file.

declare const createDirective: <T extends never>(name: T, fn: DirectiveFunction<JSX.Directives[T]>, options?: DirectiveOptions) => Directive<T>;

I think this is an issue with the TypeScript compiler. Perhaps we need to find a way to work around it and keep the normal generic parameters.

Reference: solidjs/solid#2048

In order for KeepAlive to work perfectly with the context it has to get reparented when rendered somewhere else, and the context has to be updated, which is not really possible given how the context works today.

This should also fix how errors bubble up.

It would be nice to have a discussions area here on GitHub to ask for help.

I tested the following type signature, and it correctly inferred the list of variable parameter types, so maybe we can use it to simplify the signature of the useResolved function.

function resolve<
  T extends unknown[],
  R extends {
    [K in keyof T]: T[K] extends Observable<infer V> ? V : T[K] extends () => infer V ? V :  T[K]
  },
>(vals: [...T], fn: (...args: [...R]) => void) {


}

resolve([$(1), $('2'), 3, () => 4], (_1, _2,_3, _4) => {

})

@fabiospampinato would be interesting to see how voby does on https://localvoid.github.io/uibench/ (by author of https://github.com/localvoid/ivi)

could reveal some more optimization nuggets!

• One should be able to say which kinda of elements a directive works with.
• Inferred types for createDirective and Directive.ref should be perfect.

Currently, we have:

function createContext <T> ( defaultValue?: T ): Context<T>;

That means all instances of the context have the same defaultValue.

It would be nice to have:

function createContext <T> ( factory: () => T ): Context<T>;

Is it possible to implement the createRenderer API in solid in voby? This allows voby to be used in a wider range of scenarios.

Thanks for the tip in #20 , I played with it a bit, it's really handy, I suggest to improve the type of createDirective to make it more typeify, here is my code, it provides name and opts type

Hello, just a thought about the rendering performance demo:

https://codesandbox.io/s/voby-demo-triangle-l837v0?file=/src/index.tsx:222-385

const useSeconds = (): Observable<number> => {

  const seconds = $(0);

  useInterval ( () => seconds ( ( seconds () % 9 ) + 1 ), 1000 );

  return seconds;
};

I think that useSeconds() should be "wrapped" into an intermediary observable that triggers at the same time as the seconds signal which is scheduled to reliably fire at every seconds tick. The goal of this "wrapper" observable is to introduce a computationally-taxing operation, per node of the triangular structure (just as in the original React demo).

This is specifically what makes this stress-test relevant, as remarked by Ryan Carniato:

https://github.com/ryansolid/solid-sierpinski-triangle-demo#solid-sierpinski-triangle-demo

See:

https://github.com/ryansolid/solid-sierpinski-triangle-demo/blob/889db98d7697bd39d8fe3ca0e0134fb2788b4447/src/main.jsx#L46-L51

    var e = performance.now() + 0.8;
    // Artificially long execution time.
    while (performance.now() < e) {}
};

(sorry, I don't know enough about Voby to contribute a PR)

I used the same technique in my stress-test for fine-grain reactivity / observable lib experiment (I use uHTML for DOM rendering). Otherwise, rendering at 200 FPS is way too easy :)

Is JSX's 'ref' attribute supported? In the following example it does nothing:

// voby 0.16

const App = () => {
    let eInput;

    function onClick() {
        console.log("eInput: " + eInput); // outputs 'eInput: undefined'
    }

    return (
        <input type="text" ref={eInput} onClick={onClick}/>
    )
};

render(<App />, document.body);

Once we get the website up and running some proper documentation should be hosted in it.

voby is perfect for embedding in my application, thank you for making this!

signal() / atom() and atom.value style getters and setters seem easier to understand, I hope to consider this.

Hi @fabiospampinato
I've been playing around a bit with Voby and I'm looking to move my app from Solid to Voby potentially. I really need something like Voby's batch behavior. However, I noticed something a little surprising about batch in that it is global. If batch is called, no effects will run for any signals until the callback resolves, not just the signals that are affected in the callback. I found this a bit surprising. It doesn't affect my use case, but I wanted to make you aware. I know Voby isn't at version 1 yet. So if the batch behavior is going to be nerfed by version 1, I'd rather not move to Voby. I already had that experience with Solid, where batch worked in the way I needed as of version 1.3, but as of 1.4, it changed and no longer fit my use case. So I wanted to check on the likelihood of batch seeing serious changes in future. Thoughts?

An isServer function could be useful, to do different things between the rendering to the DOM and rendering to a string.

I have seen Voby in Reddit (https://www.reddit.com/r/javascript/comments/ukhv0w/voby_a_new_frontend_framework_with_high/) & I am trying to see the code to create a binding library to Urql GraphQL Client (https://formidable.com/open-source/urql/), but the code is not readable enough because of the formatting & there are no comments that vscode can use to give documentation.

Could You Format the code & add comment documentations?

Reproduction:
https://playground.solidjs.com/anonymous/ec132058-6494-4b42-ae52-fe61ed786b15
Pressing the +/- button does nothing with the console.log(value()); line added.

I like to unwrap stores for logging to the console as the Proxies require a couple extra clicks to see the value. So I'm using store.unwrap but doesn't appear to be part present on the store type. Are you planning on a different unwrap function or do you not want to publicly expose it?