[<ReactComponent(import="*", from="./Components/GettingStarted.js")>] it could work too
@zaid_ajaj_twitter I have tried with import="*", import="default" and import="GetStarted", but I always get a similar output in the lines of:
...
import GetStarted_1 from "./components/GetStarted.js";
export function GetStarted() {
return null;
}
ReactDOM_render_Z3D10464(() => createElement(GetStarted_1, null), document.getElementById("get-started"));
...It works in all cases, but my question was why is the generated JS different than what I expect it to be. If set let private GetStarted () = React.imported(), then:
export function GetStarted() {
return null;
}becomes:
function GetStarted() {
return null;
}but why is that function even needed if it returns null and is not used at all. I assume that it has something to do with the way JS library/ React component is imported using let and the compiler has to do something with the placeholder variable?
@mabasic If you speak of an external JS file or CSS file for example, you can use importSideEffect or import and store it in a variable
Just knows, that if you are using a bundler like Webpack you probably need to configure it correctly or it could detect it as unused code and remove it.
If you want to use it for importing CSS files you should be fine as Webpack understand that.
@mabasic I think it should be in this section of the documentation: https://fable.io/docs/communicate/js-from-fable.html#Miscellaneous-import-helpers
However, importSideEffect is missing
importSideEffects there... :D I find Fable very nice to work with, but it lacks documentation. For example where can I find the documentation for Fable React? Is this all there is: https://github.com/fable-compiler/fable-react/tree/master/docs ?
Fable documentation is hosted on this repo: https://github.com/fable-compiler/fable-compiler.github.io
And the file you want to edit is in this folder: https://github.com/fable-compiler/fable-compiler.github.io/tree/dev/docsrc/communicate
About Fable React documentation i think that the main part of the documentation and other part were "mentionned" in the blog...
The documentation has always been something we wanted to improve on Fable project but that's also something hard and not a lot of people are interested motivated enough to do it.
For example, https://fable.io/docs/ is the result of several month of work from contributors.
Hello @ramiro-nd,
I don't think we an SVG version of the logo.
You can find the logo used by the docs site here https://github.com/fable-compiler/fable-compiler.github.io/tree/dev/public/img
But it is as a PNG file
How can I handle this code : let value = if target?("type") = "checkbox" then target?("checked") else target?value when target?("checked") returns a boolean, and target?value returns a string?
You should not have to use the same "function" to get the value for different filed type. As you see it doesn't play well as in one cause you got a string and another case you have a boolean.
It is really difficult to help with just some glimpse of code. It would be easier if you could share a small reproduction code.
Like that someone will be able to "rewrite" it in a more idiomatic way so you can take a look at it.
module Elmish.SimpleInput
(**
Minimal application showing how to use Elmish
You can find more info about Emish architecture and samples at https://elmish.github.io/
*)
open Fable.Core.JsInterop
open Fable.React
open Fable.React.Props
open Elmish
open Elmish.React
// MODEL
type Model =
{
Name : string
RememberMe : bool
}
type Msg =
| ChangeName of string
| ToggleRememberMe
let init () =
{
Name = ""
RememberMe = false
}
, Cmd.none
// UPDATE
let update (msg:Msg) (model:Model) =
match msg with
| ChangeName newValue ->
{ model with
Name = newValue
}
, Cmd.none
| ToggleRememberMe ->
{ model with
RememberMe = not model.RememberMe
}
, Cmd.none
// VIEW (rendered with React)
let view model dispatch =
div [ ]
[
input
[
Value model.Name
OnChange (fun ev ->
ev.target?value
|> string
|> ChangeName
|> dispatch
)
]
br [ ]
label [ Name "remember-me" ]
[
input
[
HtmlFor "remember-me"
Type "checkbox"
OnChange (fun ev ->
dispatch ToggleRememberMe
)
]
str "Remember me"
]
br [ ]
br [ ]
str (sprintf "Name value is: %s" model.Name)
br [ ]
str (sprintf "RememberMe value is: %b" model.RememberMe)
]
// App
Program.mkProgram init update view
|> Program.withConsoleTrace
|> Program.withReactSynchronous "elmish-app"
|> Program.runFable.React you can use ev.Value and ev.Checked to avoid the cast and dynamic typings.
HTMLInputElement; what if I have a textarea, should I not use HTMLTextAreaElement? I also think that I am misusing records somehow. I'm sending you a link to Javascript code which I am trying to convert to F# and the current F# code which I have wrote.
For the HTMLTextAreaElement / HTMLInputElement thing you will have to ask on Feliz repo.
But in theory, you could update to HTMLElement and then downcast to HTMLTextAreaElement.
Also, Feliz has a lot of onChange overload which avoid you to reason in term of HTMLElement type but more on what information you want back from the onChange event:
For example, if you help the F# compiler with type inference you can say I always want a string back so it will works for both the input and textarea:
prop.onChange (fun (newValue : string) -> ...)Another advice I can give you is that when using Fable/F#, you can't always do a 1 to 1 with the JavaScript code.
You can't always force a language to work as the other one works.