shmew / feliz.recoil Goto Github PK

View Code? Open in Web Editor NEW

46.0 3.0 8.0 21.15 MB

Fable bindings in Feliz style for Facebook's experimental state management library recoil.

Home Page: https://shmew.github.io/Feliz.Recoil/

License: MIT License

Batchfile 0.02% F# 97.28% Shell 0.12% CSS 0.43% HTML 0.68% JavaScript 1.46%

fable state-management recoil feliz

feliz.recoil's People

Contributors

Stargazers

Watchers

Forkers

fc1943s jbeeko zaid-ajaj fremontmj artemyb morpatr kylegoetz paigem89

feliz.recoil's Issues

Perform a side effect every time a value of a particular atom changes

Is your feature request related to a problem?

I would like to trigger an action (perform a side effect) every time a value of a particular atom changes but can not find the appropriate hook in the API. Specifically, I would like to update the URL parameters based on the value of the atom.

Describe the solution you'd like

Ideally, this could be possible by specifying an async callback in the definition of an atom.

Additional context

Looking at the Recoil spec I could not figure out if this is at all possible with Recoil.

Support for elmish with commands

Currently, I am seeing elmish is based on a simple elmish loop without commands. It would be nice if full elmish with commands are supported.

Compilation failing due to Fable.Extras

Description

Compalition fails because of issues with Fable.Extras

Steps to reproduce

Go to https://github.com/MangelMaxime/template-gitpod-fable-4-vite-react
Click on the "Open in gitpod" button
Log in with github
Wait for everything to load
In the terminal, cd into src folder and install Feliz.Recoil with the regular dotnet add package Feliz.Recoil
Add open Feliz.Recoil and let textState = Recoil.atom("Basic/textState", "Hello world!") to the App.fs file.
cd back to the root folder and run dotnet fable src
The build will fail with error messages relating to Fable.Extras

Expected behavior

The build should not fail.

Additional context

Click to see error messages:

./src/Main.fs(6,1): (6,16) warning FSHARP: This construct is deprecated. ReactDOM.render is obsolete since React v18. Please use the ReactDOM.createRoot API instead (code 44)
./src/Main.fs(6,1): (10,2) warning FSHARP: This construct is deprecated. ReactDOM.render is obsolete since React v18. Please use the ReactDOM.createRoot API instead (code 44)
./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(149,17): (149,19) error FSHARP: This type parameter has been used in a way that constrains it to always be ''a option' (code 663)
./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(149,17): (149,19) error FSHARP: This code is less generic than required by its annotations because the explicit type variable 'V' could not be generalized. It was constrained to be ''a option'. (code 660)
./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(210,25): (210,28) error FSHARP: The generic member 'set' has been used at a non-uniform instantiation prior to this program point. Consider reordering the members so this member occurs first. Alternatively, specify the full type of the member explicitly, including argument types, return type and any additional generic parameters and constraints. (code 1198)
./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(210,75): (210,80) error FSHARP: Type mismatch. Expecting a
    ''a option option'    
but given a
    ''a option'    
The types ''a' and ''a option' cannot be unified. (code 1)
./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(266,21): (266,23) error FSHARP: This type parameter has been used in a way that constrains it to always be ''a option' (code 663)
./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(266,21): (266,23) error FSHARP: This code is less generic than required by its annotations because the explicit type variable 'V' could not be generalized. It was constrained to be ''a option'. (code 660)
./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(293,25): (293,28) error FSHARP: The generic member 'set' has been used at a non-uniform instantiation prior to this program point. Consider reordering the members so this member occurs first. Alternatively, specify the full type of the member explicitly, including argument types, return type and any additional generic parameters and constraints. (code 1198)
./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(293,75): (293,80) error FSHARP: Type mismatch. Expecting a
    ''a option option'    
but given a
    ''a option'    
The types ''a' and ''a option' cannot be unified. (code 1)
./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(984,28): (984,50) error FSHARP: A unique overload for method 'Date' could not be determined based on type information prior to this program point. A type annotation may be needed.
Known type of argument: int
Candidates:

new: ticks: int -> Date
new: ticks: int64 -> Date
private new: ?inp: obj -> Date (code 41)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(984,28): (984,50) error FSHARP: This is not a valid object construction expression. Explicit object constructors must either call an alternate constructor or initialize all fields of the object and specify a call to a super class constructor. (code 696)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(985,30): (985,52) error FSHARP: This is not a valid object construction expression. Explicit object constructors must either call an alternate constructor or initialize all fields of the object and specify a call to a super class constructor. (code 696)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(985,30): (985,52) error FSHARP: A unique overload for method 'Date' could not be determined based on type information prior to this program point. A type annotation may be needed.

Known type of argument: int
Candidates:

new: ticks: int -> Date
new: ticks: int64 -> Date
private new: ?inp: obj -> Date (code 41)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(2318,45): (2318,49) error FSHARP: This expression was expected to have type

'JS.TypedArray<'T>'

but here has type

'bool'     (code 1)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(2689,45): (2689,49) error FSHARP: This expression was expected to have type

'JS.TypedArray'

but here has type

'bool'     (code 1)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(2784,45): (2784,49) error FSHARP: This expression was expected to have type

'JS.TypedArray'

but here has type

'bool'     (code 1)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(2879,45): (2879,49) error FSHARP: This expression was expected to have type

'JS.TypedArray'

but here has type

'bool'     (code 1)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(2974,45): (2974,49) error FSHARP: This expression was expected to have type

'JS.TypedArray'

but here has type

'bool'     (code 1)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(3069,45): (3069,49) error FSHARP: This expression was expected to have type

'JS.TypedArray'

but here has type

'bool'     (code 1)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(3164,45): (3164,49) error FSHARP: This expression was expected to have type

'JS.TypedArray'

but here has type

'bool'     (code 1)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(3259,45): (3259,49) error FSHARP: This expression was expected to have type

'JS.TypedArray'

but here has type

'bool'     (code 1)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(3354,45): (3354,49) error FSHARP: This expression was expected to have type

'JS.TypedArray'

but here has type

'bool'     (code 1)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(3449,45): (3449,49) error FSHARP: This expression was expected to have type

'JS.TypedArray'

but here has type

'bool'     (code 1)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(3544,45): (3544,49) error FSHARP: This expression was expected to have type

'JS.TypedArray'

but here has type

'bool'     (code 1)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(3635,45): (3635,49) error FSHARP: This expression was expected to have type

'JS.TypedArray'

but here has type

'bool'     (code 1)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(3946,21): (3950,92) error FSHARP: The field 'captures' appears multiple times in this record expression. (code 3522)

./src/fable_modules/Fable.Extras.0.2.2/Extras.fs(3952,21): (3956,40) error FSHARP: The field 'captures' appears multiple times in this record expression. (code 3522)

Compilation failed

Remove dependency on Fable.Extras

Is your feature request related to a problem?

Fable.Extras does not compile with the latest fable version.

Describe the solution you'd like

Only a few functions from Fable.Extras are actually used. I'd suggest to get rid of the dependency.

Describe alternatives you've considered

Updating Fable.Extras to work with the latest Fable version.

Additional context

This is enough to make Feliz.Recoil work without the Fable.Extras dependency.

namespace Feliz.Recoil

open Fable.Core
open FSharp.Core
open Fable.Core.JsInterop

[<Erase; RequireQualifiedAccess>]
module JSe =

    /// Tests to see if the prototype property of a constructor appears
    /// anywhere in the prototype chain of an object.
    ///
    /// This should only be used when working with external code (like bindings).
    [<Emit("$1 instanceof $0")>]
    let instanceOf (ctor: obj) (value: obj) : bool = jsNative

    /// Type checking and equality helpers.
    [<Erase>]
    type is =
        [<Emit("typeof $0 === 'function'")>]
        static member function' (value: obj) : bool = jsNative

        [<Emit("typeof $0 === null")>]
        static member null' (value: obj) : bool = jsNative

        /// Checks if the input is both an object and has a Symbol.iterator.
        [<Emit("typeof $0 === 'object' && !$0[Symbol.iterator]")>]
        static member nonEnumerableObject (value: obj) : bool = jsNative

        /// Normal structural F# comparison, but ignores top-level functions (e.g. Elmish dispatch).
        static member equalsButFunctions (x: 'a) (y: 'a) =
            if obj.ReferenceEquals(x, y) then
                true
            elif is.nonEnumerableObject x && not(isNull(box y)) then
                let keys = JS.Constructors.Object.keys x
                let length = keys.Count
                let mutable i = 0
                let mutable result = true
                while i < length && result do
                    let key = keys.[i]
                    i <- i + 1
                    let xValue = x?(key)
                    result <- is.function' xValue || xValue = y?(key)
                result
            else
                (box x) = (box y)

        /// Performs a memberwise comparison where value types and strings are compared by value,
        /// and other types by reference.
        static member equalsWithReferences (x: 'a) (y: 'a) =
            if obj.ReferenceEquals(x, y) then
                true
            elif is.nonEnumerableObject x && not(isNull(box y)) then
                let keys = JS.Constructors.Object.keys x
                let length = keys.Count
                let mutable i = 0
                let mutable result = true
                while i < length && result do
                    let key = keys.[i]
                    i <- i + 1
                    let xValue = x?(key)
                    result <- is.function' xValue || obj.ReferenceEquals(xValue, y?(key))
                result
            else
                false

Uncaught ReferenceError: selector is not defined

Description

When I try to use like this:

let test = Recoil.atom("test", promise { return 123})

React.functionComponent (fun () ->
    let v = Recoil.useValue(Tool.test)
    Browser.Dom.console.error v
    Html.text "test"
)

I will get error: Uncaught ReferenceError: selector is not defined

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.