Comments (9)
Option 1 👍
What about React.functionComponent
to get around the reserved word issue?
This library is already React-focused, i.e. using prop
terminology, and React docs make a distinction between element and component with separate sections. I would find element
more confusing personally.
Overloaded meaning of component
isn't an issue with qualified use -- React.functionComponent
would be unambiguous.
from feliz.
I'm leaning towards 1, but wouldn't a dedicated static type (not module) be better, to allow overloads like the rest of the Feliz API?
I've had to use this in Feliz.MaterialUI, see e.g. the Styles
type with several overloads for Styles.makeStyles
.
from feliz.
Also, do you plan on still depending on Fable.React or do you plan on creating custom wrappers? I'm asking because Feliz.MaterialUI currently depends on Fable.React stuff (e.g. IRefValue
) transitively through Feliz, and if you plan on implementing your own React stuff in Feliz, then Feliz.MaterialUI should be updated to use that instead. And since it's a breaking change and Feliz.MaterialUI is not released yet, it's nice to know.
from feliz.
but wouldn't a dedicated static type (not module) be better, to allow overloads like the rest of the Feliz API?
Indeed that's what I had in mind but I said module because I meant in the way you would access a function by fully qualifying the name React
do you plan on still depending on Fable.React or do you plan on creating custom wrappers?
Right now, I am thinking the only thing I want from Fable.React is ReactElement
for compatibility with other applications and all existing third-party components, otherwise all existing and future third-party libraries would have to be (re)written with Feliz as a dependency if they were to work together which is a no-go if I want people to adopt this library one step at a time. As for React functions like hooks and components, I think I will write Feliz wrappers on top of them, then the implementation would be either a binding from scratch or fallback to Fable.React's if it makes sense
from feliz.
I am in favour of option 1 but I would prefer to use component
because this is what you are creating.
For me, an element is really just the native DOM elements like div
, etc. Also, using React terms would it easier for people to understand what's going on and searching documentation.
For the same reason, I would prefer to use Hooks.useState
instead of React.useState
the main problem being if people have both Fable.React
and Feliz
then Hooks.useState
will depend on the open order.
from feliz.
For me, an element is really just the native DOM elements like div, etc. Also, using React terms would it easier for people to understand what's going on and searching documentation.
I wanted to use "element" because I want users to think of as "just another element you can use in your render functions" there is no distinction between "native element" vs "component" there are only elements. Some "native elements" actually behave more like components such as input
that has internal state but still it is just an element that can be used anywhere.
When you use React.element
you are just creating an element with potentially some internalized state/behavior. Also it is a short word which encourages people to use it.
I like the word component
too but it could mean A LOT of things and people might think it something that you are not supposed to do often but you actually should! Second con of the word is that it is preserved as a "future" F# keyword
For the same reason, I would prefer to use Hooks.useState instead of React.useState the main problem being if people have both Fable.React and Feliz then Hooks.useState will depend on the open order.
In javascript you do import { useState } from 'react'
, that is why I want to put in React
without introducing many modules to look for things. Also it is highly unlikely that someone will open Feliz
and Fable.React
in the same module because they will quickly get name resolution conflicts when using style for some reason
from feliz.
@zanaptak I like React.functionComponent
, I guess you and @MangelMaxime are right, they are function components at the end of the day and the docs say so, I guess we can also have xml docs in the function that refers to the React docs
from feliz.
This is looking really good:
Using React.functionComponent
with React.useState
:
open Feliz
let counter =
React.functionComponent(fun () ->
let (count, setCount) = React.useState(0)
Html.div [
Html.h1 count
Html.button [
prop.text "Increment"
prop.onClick (fun _ -> setCount(count + 1))
]
]
)
Replace MVU with built-in React.useReducer
module Reducers =
type State = { Count : int }
type Msg = Increment | Decrement
let initialState = { Count = 0 }
let update (state: State) = function
| Increment -> { state with Count = state.Count + 1 }
| Decrement -> { state with Count = state.Count - 1 }
let counter = React.functionComponent("Counter", fun () ->
let (state, dispatch) = React.useReducer(update, initialState)
Html.div [
Html.h3 state.Count
Html.button [ prop.onClick (fun _ -> dispatch Increment); prop.text "Increment" ]
Html.button [ prop.onClick (fun _ -> dispatch Decrement); prop.text "Decrement" ]
]
)
Use React.useEffect
:
let ticker =
React.functionComponent("Ticker", fun (props: {| start: int |}) ->
let (tick, setTick) = React.useState props.start
React.useEffect(fun () ->
let interval = setInterval (fun () ->
printfn "Tick"
setTick(tick + 1)) 1000
// creates a disposable value
React.createDisposable(fun () -> clearInterval(interval))
,prop.start) // re-evaluate hook when `props.start` changes
Html.h1 tick
)
// later
Html.fragment [
ticker {| start = 0 |}
ticker {| start = 5 |}
]
from feliz.
Looks great! Will there be an overload of functionComponent
accepting some memo stuff, like Fable.React's FunctionComponent.Of
? (I don't know if it's part of the native React API or not.)
from feliz.
Related Issues (20)
- ReactComponentAttribute for props list HOT 2
- Q: Documentation on breaking changes in 2.6? [WAS Updating Feliz.UseListener to Feliz 2.6.0] HOT 4
- CSS overflow-anchor property HOT 1
- Error with Feliz 2.7 HOT 2
- Making UseElmish's dispatch function stable
- Feliz.Markdown escapeHtml doesn't seem to work HOT 1
- UseElmish: Failed to resolve import "use-sync-external-store/shim" HOT 3
- `react-markdown` removes the `escapeHtml` property HOT 1
- Clarification and Potential Improvement on PR #480 useEffectOnce behavior HOT 5
- Expanding Feliz.Rechart HOT 3
- Component created with a forwardRef that has generic type parameters loses state HOT 2
- "Directory import use-sync-external-store\shim is not supported" in UseElmish.fs.js HOT 2
- Use with Elmish documentation is lacking integration HOT 2
- Enhance Handling of F# Record Types as Props in ReactComponent Attribute HOT 4
- Explore if Feliz.CompilerPlugin can support POJO made using `[<ParamObject>]`
- prop.pattern produces invalid html HOT 4
- React 19 HOT 4
- Svg attribute `fill-rule` missing
- Update tests and move to github actions [Contributions Welcome]
- Doc changes havent been pushed to site HOT 1
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.
from feliz.