fable-compiler / fable-react Goto Github PK

Ref currently takes in a function with the signature Element -> unit.

This is incorrect, as per the react documentation:

React will call the ref callback with the DOM element when the component mounts, and call it with null when it unmounts.

Therefore, Ref should take i.e. an Element option -> unit.

Hi,
I downloaded and installed the Fable.Recharts NuGet package in my app (I used the SAFE-NIGHTWATCH app as my starting point). I am currently getting the following error when bundling index.android.js:

Bundling index.android.js [development, non-minified, hmr disabled] 0.0% (5/693), failed.
error: bundling failed: "Unable to resolve module events from `D:\Dev\feature-create-charts\node_modules\recharts\lib\util\Events.js.

I checked and the file is there.

Any help to resolve this issue will be appreciated. Thanks!

@alfonsogarciacaro in the past we had a discussion about improving the binding of Fable.React

I saw that you introduced version 4.0.0-alpha would you agree if I try to propose a new version for the bindings ?

The in editor documentation is dense. Couldn't we add some documentation?

I'm curious what is the use for ICSSProp? I have some hassles using ICSSProp that work better using CSSProp directly.

Consider this initial (working) code:

let view1 model =
  div [
    Style [
      BackgroundColor model.BackgroundColor
      BackgroundImage model.BackgroundImage
      BackgroundPosition model.BackgroundPosition
    ]
  ] []

Now suppose I want to use yield syntax to have conditional style properties:

let view2 model =
  div [
    Style [
      yield BackgroundColor model.BackgroundColor
      if model.HasBackgroundImage then
        yield BackgroundImage model.BackgroundImage
        yield BackgroundPosition model.BackgroundPosition
    ]
  ] []

That won't compile:

This expression was expected to have type
    'ICSSProp'    
but here has type
    'CSSProp'

So I have to cast or unbox everything:

let view3 model =
  div [
    Style [
      yield BackgroundColor model.BackgroundColor :> ICSSProp // cast example
      if model.HasBackgroundImage then
        yield !! BackgroundImage model.BackgroundImage // unbox examples
        yield unbox BackgroundPosition model.BackgroundPosition
    ]
  ] []

However, if I define my own Style' to use CSSProp instead of ICSSProp, then I don't have the extra hassle of casting/unboxing and it still works fine at runtime:

let inline Style' (css: CSSProp list): HTMLAttr =
    !!("style", keyValueList CaseRules.LowerFirst css)

let view4 model =
  div [
    Style' [
      yield BackgroundColor model.BackgroundColor
      if model.HasBackgroundImage then
        yield BackgroundImage model.BackgroundImage
        yield BackgroundPosition model.BackgroundPosition
    ]
  ] []

Unless there's something important about ICSSProp or some better syntax I can use, maybe the internal Style could be defined this way?

Hi,

I'm new in web and Fable development. However, I'm a big fan of F#. So I decided to give it a try.

So far, I'm trying just to display google maps. I have started with https://github.com/elmish/templates. As I was able to run the build a minimal project from https://github.com/elmish/templates Then I followed instructions from https://github.com/fable-compiler/fable-react/tree/master/src/Fable.ReactGoogleMaps, but I couldn't make it work.

As soon as I added @babel/plugin-proposal-class-properties to my webpack, I've got the following issue when I build an app:

Executing task: dotnet fable yarn-run start <

Fable (1.3.3) daemon started on port 61225
CWD: /Users/PavelOborin/projects/fable_telemetry
yarn run start
yarn run v1.12.3
$ webpack-dev-server
internal/modules/cjs/loader.js:589
    throw err;
    ^

Error: Cannot find module 'babel-plugin-@babel/plugin-proposal-class-properties'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15)
    at Function.resolve (internal/modules/cjs/helpers.js:32:19)
    at resolve (/Users/PavelOborin/projects/fable_telemetry/node_modules/fable-utils/index.js:13:24)
    at ar.map.item (/Users/PavelOborin/projects/fable_telemetry/node_modules/fable-utils/index.js:18:15)
    at Array.map (<anonymous>)
    at resolveArray (/Users/PavelOborin/projects/fable_telemetry/node_modules/fable-utils/index.js:16:19)
    at Object.exports.resolveBabelOptions (/Users/PavelOborin/projects/fable_telemetry/node_modules/fable-utils/index.js:25:27)
    at Object.<anonymous> (/Users/PavelOborin/projects/fable_telemetry/webpack.config.js:9:31)
    at Module._compile (internal/modules/cjs/loader.js:707:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Closing Fable daemon...
The terminal process terminated with exit code: 1

here is my webpack

var path = require("path");
var webpack = require("webpack");
var fableUtils = require("fable-utils");

function resolve(filePath) {
    return path.join(__dirname, filePath)
}

var babelOptions = fableUtils.resolveBabelOptions({
    presets: [["es2015", { "modules": false }]],
    plugins: [["transform-runtime", {
        "helpers": true,
        // We don't need the polyfills as we're already calling
        // cdn.polyfill.io/v2/polyfill.js in index.html
        "polyfill": false,
        "regenerator": false
    }],
    "@babel/plugin-proposal-class-properties"]
});

var isProduction = process.argv.indexOf("-p") >= 0;
console.log("Bundling for " + (isProduction ? "production" : "development") + "...");

module.exports = {
    devtool: isProduction ? undefined : "source-map",
    entry: resolve('./src/fable_telemetry.fsproj'),
    output: {
        filename: 'bundle.js',
        path: resolve('./public'),
    },
    resolve: {
        modules: [
            "node_modules", resolve("./node_modules/")
        ]
    },
    devServer: {
        contentBase: resolve('./public'),
        port: 8080,
        hot: true,
        inline: true
    },
    module: {
        rules: [
            {
                test: /\.fs(x|proj)?$/,
                use: {
                    loader: "fable-loader",
                    options: {
                        babel: babelOptions,
                        define: isProduction ? [] : ["DEBUG"]
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: babelOptions
                },
            },
            {
                test: /\.sass$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    plugins: isProduction ? [] : [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    ]
};

Is ReactLeaflet really needs to be included in general purpose fable-react lib?

I don't need it at all and don't want to download it every time I install/upgrade the very basic and only a common fable-react.
I guess it should be distributed by separate, it's own repo.

Otherwise we should include here every React-integration library...

Is it strictly necessary? Are we using any of the netstandard2.0?
I believe we should keep targeting 1.6, while migrating the build itself to SDK 2.0.
This would lower the requirements for the consumers, which is a good thing.

EDIT: Elmish building with SDK 2.0, targeting netstandard1.6 - https://github.com/fable-elmish/elmish/blob/master/src/Fable.Elmish.fsproj

In my application often need to define this type:

[<Pojo>]
type DangerousInnerHtml =
    { __html : string }

This is useful, when you are rendering markdown for example.

let htmlFromMarkdown str = div [ DangerouslySetInnerHTML { __html = Marked.Globals.marked.parse (str) } ] []

I guess we could add under Fable.Helpers.React.Props what do you think ?

I think one of the big advantages of using Fable and React over e.g. Elm is that it is possible to use an ocean full of ready made React components. However, it is somewhat unclear what needs to be done to declare the required props etc. to use a third party React component. It would be great if this repo in the readme or the Fable docs could have a section on how to do this.

I don't know what the potential issues are with various kinds of e.g. Higher Order Components etc but it might be worth spelling these out explicitly as well. Please let me know if there is anything I can help with in particular to bring this forward.

I've spent some effort on creating a custom react component using props and state (including componentDidMount, componentWillReceiveProps, setState and such).

There's a few lines in source code suggesting to do something like:

type MyComponent(initialProps) =
    inherit React.Component<MyProps, MyState>(initialProps)
    base.setInitState({ value = 5 })
    ...

... that I tried to follow, but then I got issues with React reporting errors about component's Children being an object rather than react component and such.
I did fiddle something creating some Pojo objects for MyState and MyProps types, but I'm not really sure what I did and if I did it correctly (I was more like a monkey that somehow managed to write a Shakespeare novel).

It would be really nice to have the concept of strongly typed state and props described somewhere in the documentation.

@alfonsogarciacaro promised to add this to react native bindings once things moved to 1.0 :P

open Fable.Core.JsInterop
module R = Fable.Helpers.React

type RCom = Fable.Import.React.ComponentClass<obj>

let SignaturePad: RCom = importDefault "react-native-signature-pad"

/// Opens a signature pad with callbacks for onError and onChange
let signaturePad (props:Fable.Helpers.ReactNative.Props.IStyle list) (onError:exn -> unit) (onChange:string -> unit) : React.ReactElement =
    let onChange (o:obj) = onChange(o?base64DataUrl |> unbox)
    let pad =
        createObj
            [ "style" ==> props
            "onError" ==> onError
            "onChange" ==> onChange ]
        |> unbox

    R.from SignaturePad pad []

Concretely, suppose you have the following in javascript (which seems quite common):

import { Select } from 'react-select' 
let render = () => <Select.Creatable options={...} /> 

How to import the Creatable element from the Select component?

This is a followup to elmish/react#12 (comment) regarding handling jumping cursor at the library level.

Here is a prototype idea for replacement input elements which automatically fix the cursor, see input' and textarea' below. They do this by altering the prop list to inject a Ref that conditionally updates the value (like Elmish valueOrDefault behavior). If a Ref already exists it grabs the existing Ref function and chains it after the conditional update.

I guess these would result in extra unnecessary processing in many cases (e.g. non-Elmish usage?) but if the impact is small then it may be worth avoiding the trap of premature optimization to ensure correct UI behavior out of the box.

If users did encounter problems with it they could revert to the original functions and the manual valueOrDefault workarounds; this would confine the workarounds to the select few who really need them.

open Fable.Core
open Fable.Core.JsInterop
open Fable.Import.React
open Fable.Helpers.React
open Fable.Helpers.React.Props

// Check if prop is HTMLAttr.Value and return the value.
let tryValueProp (prop:IHTMLProp) =
  match prop with
  | :? HTMLAttr as attr ->
    match attr with
    | HTMLAttr.Value v -> Some v
    | _ -> None
  | _ -> None

// Check if prop is Prop.Ref and return the value.
let tryRefProp (prop:IHTMLProp) =
  match prop with
  | :? Prop as p ->
    match p with
    | Prop.Ref refFn -> Some refFn
    | _ -> None
  | _ -> None

// Update value of an element if different, then call chained function.
let updateValueIfDifferent value (chainFn:Fable.Import.Browser.Element -> unit) =
  fun (e:Fable.Import.Browser.Element) ->
    if e |> isNull |> not && !!e?value <> !!value then e?value <- !!value
    chainFn e

// Replaces Value prop with Ref prop that sets the value only if different, to avoid cursor jump.
// If Ref prop already exists, chain the existing function after the one we are adding.
let convertValueToRef (props: IHTMLProp seq) =
  let tryValue = props |> Seq.tryPick tryValueProp
  match tryValue with
  | None -> props
  | Some v ->
    let tryRefFn = props |> Seq.tryPick tryRefProp
    let chainFn = tryRefFn |> Option.defaultValue ignore
    let newRefFn = updateValueIfDifferent v chainFn
    props
    |> Seq.filter (tryValueProp >> Option.isNone)
    |> Seq.filter (tryRefProp >> Option.isNone)
    |> Seq.append (Seq.singleton (Prop.Ref newRefFn :> IHTMLProp))

let input' props =
  createElement("input", props |> convertValueToRef |> keyValueList CaseRules.LowerFirst, [])
let textarea' props children =
  createElement("textarea", props |> convertValueToRef |> keyValueList CaseRules.LowerFirst, children)

Hello @alfonsogarciacaro ,

I think it would be nice to implement Elmish commands in Fable.Helpers.React.ReactiveCom to make it fully compliant with Fable.Elmish.

I have played with this over the week-end and I am going to submit a PR to show what I came up with.

** Warning ** : This includes a new depedency to Fable.Elmish in the projet. If you want me to rewrite Elmish.Cmd<'Msg> I can do it. But I thought over time the codebase of the 2 project may not stay in sync.

Feel free to reply with suggestions.

Regards;
Edouard

Any idea when would the next publish to nuget would be?
The latest commits contain some fixes I'm interested in.
What is the release policy? Is it more ad-hoc or on a monthly base?

https://github.com/fable-compiler/fable-elmish/blob/master/samples/react/todomvc/todomvc.fsx#L201

^^ is that the best way to do it?

let divStyle =
  [
    Width "100px"
    Height "100px"
    Custom ("background", "red")
  ]
div [ Style divStyle ] []

This works fine in the editor and when doing dotnet build, but Fable emits this error:

ERROR in ./src/App.fs
G:/projects/demo/src/App.fs(129,12): (129,18) error FSHARP: The value or constructor 'Custom' is not defined. Maybe you want one of the following:
   CustomEqualityAttribute
 @ ./src/CSSDemo.fsproj 1:0-25 1:0-25
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/CSSDemo.fsproj

The problem is this:

I guess the DLL in the NuGet package (v3.1.2) was compiled without FABLE_COMPILER, so it contains this union case. But when compiling using Fable, it picks up the source file and can't find the union case, because Fable defines FABLE_COMPILER. To fix the error, you have to use CSSProp.Custom.

Also, why does the static method return an SVGAttr instead of a CSSProp?

I am currently setting up my developer blog with Gatsby and I like the experience.

I want to create something like that based on Fable and Elmish. I think a MVP should be able to generate Elmish components/pages at designtime from Markdown.

A more general approach and the next logical step would be sourcing from GraphQL at design time. That would be a great upstream use case and battletest for https://github.com/fsprojects/FSharp.Data.GraphQL.

Can any of you give me advice what placed to dive in first? I would really love to host my blog with technologies I promote ... for credibility and trust building that would be an advantage 😄

Why we should not use Height attribute in HTML5 ? Indicated at this lines

Also, it's not the only properties conflicting with CSSProp, shouldn't we threat all the same way ?

Looks like docs are not updated for GoogleMaps

@nojaf

How do I set the Center (required) property of a Circle for ReactLeaflet? Is it missing?

In react, when setting the state you can do:
this.setState({ a: 123 }) or
this.setState((state, props) => { a: state + 1 }) (if you need the current state to calculate the next state)

Doing this.setState({ a: this.state + 1 }) is documented (but not necessarily well-known) to be incorrect and a source of bugs (since setState calls are asynchronous and batched, is its possible for this.state to be stale; see https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous for more information on this).

In JavaScript, the first overload is still useful though, because you don't always need the original state, and you can specify only the properties you wish to change (and it will merge them in for you):
this.setState({ a: 123 }) when props is { a: number, b: number } will keep b and merge in the new value for a.

In Fable however, this is not even possible (when staying within 100% type-safe code). In order to set the state, you have to pass a full instance of the state type specified when creating the component (Component<'P, 'S>) which results in code like this:
this.setState({ this.state with a = 123 })
which looks correct at first, but is a source of bugs since it uses this.state.

The only way around this--until F# gets a way to specify sparse, partial types derived from other types (which languages like TypeScript have via mapped types)--is to always use the callback version of setState:
this.setState(fun state props -> { state with a = 123 })

Since there isn't a correct usage of the first overload of this.setState due to F# immutability, I think we should mark it with some sort of warning or remove it altogether.

Additionally, the second overload this.setState(updater) actually also takes an optional callback this.setState(updater[, callback]) which is a simple unit -> unit function that is called when this.state is done being updated and ready to use.

It would be nice if we had a helper for React.memo.
I believe @vbfox had already suggested a possible approach at FableConf. Any news on this?

Hello,

I had the idea earlier, that interfacing with existing HTML could be a lot easier if there was a tool, that simply translates HTML snippets to Fable.React F# code.

Ideally this would be shipped as VS Code plugin, so that you can select some HTML and replace it with Fable.React code.

What do you think of the idea? Or does something like that already exist?

I am trying to do the custom HOC.
There is the code:

type FunctionComponent<'a> = 'a -> Fable.Import.React.ReactElement
type EnhanceFunction<'a> = FunctionComponent<'a> -> 'a -> seq<Fable.Import.React.ReactElement> -> Fable.Import.React.ReactElement

type DivComponentProps = { value: string; ClassName: string;}
let enhanceDiv: EnhanceFunction<DivComponentProps> = fun comp -> fun props ->
        React.ofFunction comp { props with ClassName = props.ClassName + " red" }


type SpanComponentProps = { text: string; ClassName: string; } 
let enhanceSpan: EnhanceFunction<SpanComponentProps> = fun comp -> fun props ->
    React.ofFunction comp { props with ClassName = props.ClassName + " red" }



let SpanComponent (props: SpanComponentProps) =
    React.span [
        ClassName props.ClassName
    ] [ React.str props.text ]


let DivComponent (props: DivComponentProps) =
    React.div [
        ClassName props.ClassName
    ] [ React.str props.value ]


let EnhancedDiv = enhanceDiv DivComponent
let EnhancedSpan = enhanceSpan SpanComponent

How to make the general enhance function instead of enhanceDiv and enhanceSpan ones?

P.S Playground for testing current code.

Converted TODO sample, keyboard events are not firing, mouse seems ok.

Apparently I can't release Fable.Elmish.React without React bindings package that uses Fable.Browser nuget.

For faster and nicer development it would be nice to be able to use the React Toolbox (http://react-toolbox.com/#/).

Is there a way to implement that toolbox?

Best,

Tim

When using a select element that has Multiple true property, React forces us to pass a string array as Value, however this prop is currently typed as Value of string, which makes unboxing a needed (after the dev discover the error at runtime).

We have two solutions to fix this:

• Make it obj as we have done for other items, I assume the runtime will automatically transform things as numbers to string, but it may not be the format they expect.
• Make it U2<string, string[]>, which will break a lot of code forcing devs to add !^ everywhere.

What do you think? @MangelMaxime @nojaf

Hello, I'm playing around with some Mobx bindings for Fable but I'm running into one major blocker. I've got an imported component that needs to accept a function as its child. The function will be called later by the parent component and should return a list of React elements like the result of any plain render function.

In JSX it would look like this:

<Observer>
  {() => <div>Hello World!</div>}
</Observer>

I've tried using a combination of Fable React's fn and from to do this:

let imported: React.ComponentClass<_> = import "Observer" "mobx-react"
let fn = R.fn<obj> (fun _ -> R.div [] [R.str "Hello world"]) [] [R.str "Hello world 2"]
R.from<obj> imported [] [fn]

But while this compiles just fine, React just gives me errors saying "React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined." I assume that fn is actually meant for things like stateless components and I'm using it incorrectly here.

Is it possible to pass a function as the child of an imported component, or even just a react element? Any help would be appreciated, thanks for reading!

Edit: The React error I wrote above was incorrect and not the one I'm running into. I'm actually getting the following when trying to use a function as the component's child: "Failed prop type: Invalid prop null of type object supplied to Observer, expected function."

These two properties seem to be missing from the imports/helpers

Apparently the docs are editable, maybe worth adding F# section here:
https://github.com/reactjs/reactjs.org/blob/master/content/docs/static-type-checking.md

I don't undertand why but running ./build.sh PublishPackages result in an error now.

➜  fable-react git:(master) ✗ ./build.sh PublishPackages
Performance:
 - Runtime: 496 milliseconds
Building project with version: LocalBuild
Shortened DependencyGraph for Target PublishPackages:
<== PublishPackages
   <== Bootstrap

The running order is:
  - Bootstrap
  - PublishPackages
Running build with 1 worker
Starting Target: Bootstrap
Deleting contents of /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/bin
Deleting contents of /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet/bin
Deleting contents of /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.Recharts/bin
Deleting contents of /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.Recharts.Sample/bin
Deleting contents of /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/obj
Deleting contents of /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet/obj
Deleting contents of /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.Recharts/obj
Deleting contents of /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.Recharts.Sample/obj
dotnet --version
dotnetcli 2.1.4 already installed in PATH
Finished Target: Bootstrap
Starting Target: PublishPackages (==> Bootstrap)
CWD: /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet
dotnet restore
  /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet/obj/paket.locked is locked by paket.exe (PID = 86546). Waiting...
  Performance:
   - Disk IO: 17 milliseconds
   - Runtime: 4 seconds
  Performance:
   - Disk IO: 26 milliseconds
   - Runtime: 2 seconds
  Restore completed in 31,11 ms for /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.React.fsproj.
  Restore completed in 30,24 ms for /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet/Fable.ReactLeaflet.fsproj.
Deleting contents of /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet/temp
CWD: /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet
dotnet pack -c Release -o /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet/temp
Microsoft (R) Build Engine version 15.5.180.51428 pour .NET Core
Copyright (C) Microsoft Corporation. Tous droits réservés.

  Restoring packages for /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet/Fable.ReactLeaflet.fsproj...
  Restore completed in 29,21 ms for /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.React.fsproj.
  Restore completed in 240,35 ms for /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet/Fable.ReactLeaflet.fsproj.
/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.Helpers.React.fs(786,36): error FS0039: Le champ, le constructeur ou le membre 'GetProperty' n'est pas défini. Peut-être souhaitez-vous l'unedes options suivantes :   GetTypeCode [/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.React.fsproj]
/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.Helpers.React.fs(787,13): error FS0072: Recherche d'un objet de type indéterminé basé sur des informations situées avant ce point du programme. Une annotation de type peut être nécessaire avant ce point du programme pour contraindre le type de l'objet. Cela peut permettre la résolution de la recherche. [/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.React.fsproj]
/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.Helpers.React.fs(788,30): error FS0039: Le champ, le constructeur ou le membre 'GetMethod' n'est pas défini. [/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.React.fsproj]
/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.Helpers.React.fs(789,13): error FS0072: Recherche d'un objet de type indéterminé basé sur des informations situées avant ce point du programme. Une annotation de type peut être nécessaire avant ce point du programme pour contraindre le type de l'objet. Cela peut permettre la résolution de la recherche. [/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.React.fsproj]
/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.Helpers.React.fs(789,13): error FS0008: Ce forçage de type ou test de type au moment de l'exécution du type    'a     en     ReactElement    implique un type indéterminé basé sur des informations situées avant ce point du programme. Les tests de types au moment de l'exécution ne sont pas autorisés sur certains types. Des annotations de type supplémentaires sont nécessaires. [/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.React.fsproj]
/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.Helpers.React.fs(794,26): error FS0039: Le champ, le constructeur ou le membre 'GetProperty' n'est pas défini. Peut-être souhaitez-vous l'unedes options suivantes :   GetTypeCode [/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.React.fsproj]
/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.Helpers.React.fs(798,44): error FS0039: Le champ, le constructeur ou le membre 'GetProperties' n'est pas défini. Peut-être souhaitez-vous l'une des options suivantes :   GetRuntimeProperties   get_IsPointer   GetRuntimeProperty [/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.React.fsproj]
/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.Helpers.React.fs(800,24): error FS0072: Recherche d'un objet de type indéterminé basé sur des informations situées avant ce point du programme. Une annotation de type peut être nécessaire avant ce point du programme pour contraindre le type de l'objet. Cela peut permettre la résolution de la recherche. [/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.React/Fable.React.fsproj]
There's been an error when pushing project: Fable.ReactLeaflet
Please revert the version change in .fsproj
Running build failed.
Error:
System.Exception: '/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet> dotnet pack -c Release -o /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet/temp' task failed
  at Microsoft.FSharp.Core.PrintfModule+PrintFormatToStringThenFail@1379[TResult].Invoke (System.String message) [0x00001] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.PrintfImpl+StringPrintfEnv`1[TResult].Finalize () [0x00012] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.PrintfImpl+Final3@247[TState,TResidue,TResult,A,B,C].Invoke (Microsoft.FSharp.Core.FSharpFunc`2[T,TResult] env, A a, B b, C c) [0x0007d] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.OptimizedClosures+Invoke@3301-2[T2,T3,T4,TResult,T1].Invoke (T2 u, T3 v, T4 w) [0x00001] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.OptimizedClosures+Invoke@3266-1[T2,T3,TResult,T1].Invoke (T2 u, T3 v) [0x00001] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.OptimizedClosures+Invoke@3253[T2,TResult,T1].Invoke (T2 u) [0x00001] in <5893d081904cf4daa745038381d09358>:0
  at [email protected] (System.String arg30) [0x00001] in <c594ec5c06b84fcd8da875ac6c3d30c1>:0
  at Microsoft.FSharp.Core.FSharpFunc`2[T,TResult].InvokeFast[V] (Microsoft.FSharp.Core.FSharpFunc`2[T,TResult] func, T arg1, TResult arg2) [0x0001f] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.FSharpFunc`2[T,TResult].InvokeFast[V,W] (Microsoft.FSharp.Core.FSharpFunc`2[T,TResult] func, T arg1, TResult arg2, V arg3) [0x0003d] in <5893d081904cf4daa745038381d09358>:0
  at FSI_0005.Fable.FakeHelpers.run (System.String workingDir, System.String fileName, System.String args) [0x000f8] in <c594ec5c06b84fcd8da875ac6c3d30c1>:0
  at FSI_0005.Fable.FakeHelpers.pushNuget (System.String dotnetExePath, Fake.ReleaseNotesHelper+ReleaseNotes releaseNotes, Microsoft.FSharp.Core.FSharpOption`1[T] build, System.String projFile) [0x001a2] in <c594ec5c06b84fcd8da875ac6c3d30c1>:0
  at FSI_0005.Fable.FakeHelpers.publishPackages2 (System.String baseDir, System.String dotnetExePath, Microsoft.FSharp.Collections.FSharpList`1[T] packages) [0x000e7] in <c594ec5c06b84fcd8da875ac6c3d30c1>:0
  at FSI_0005.Fable.FakeHelpers.publishPackages (System.String baseDir, System.String dotnetExePath, Microsoft.FSharp.Collections.FSharpList`1[T] packages) [0x00017] in <c594ec5c06b84fcd8da875ac6c3d30c1>:0
  at [email protected] (Microsoft.FSharp.Core.Unit unitVar0) [0x00010] in <c594ec5c06b84fcd8da875ac6c3d30c1>:0
  at Fake.TargetHelper+targetFromTemplate@209-1[a].Invoke (Microsoft.FSharp.Core.Unit unitVar0) [0x00001] in <59b649fdccf1c534a7450383fd49b659>:0
  at Fake.TargetHelper.runSingleTarget (Fake.TargetHelper+TargetTemplate`1[a] target) [0x0004b] in <59b649fdccf1c534a7450383fd49b659>:0

---------------------------------------------------------------------
Build Time Report
---------------------------------------------------------------------
Target            Duration
------            --------
Bootstrap         00:00:00.2029209
PublishPackages   Failure
Total:            00:00:21.5487564
---------------------------------------------------------------------
Status:           Failure
---------------------------------------------------------------------
---------------------------------------------------------------------
  1) System.Exception: '/Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet> dotnet pack -c Release -o /Users/mangelmaxime/Workspace/Github/fable-compiler/fable-react/src/Fable.ReactLeaflet/temp' task failed
  at Microsoft.FSharp.Core.PrintfModule+PrintFormatToStringThenFail@1379[TResult].Invoke (System.String message) [0x00001] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.PrintfImpl+StringPrintfEnv`1[TResult].Finalize () [0x00012] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.PrintfImpl+Final3@247[TState,TResidue,TResult,A,B,C].Invoke (Microsoft.FSharp.Core.FSharpFunc`2[T,TResult] env, A a, B b, C c) [0x0007d] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.OptimizedClosures+Invoke@3301-2[T2,T3,T4,TResult,T1].Invoke (T2 u, T3 v, T4 w) [0x00001] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.OptimizedClosures+Invoke@3266-1[T2,T3,TResult,T1].Invoke (T2 u, T3 v) [0x00001] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.OptimizedClosures+Invoke@3253[T2,TResult,T1].Invoke (T2 u) [0x00001] in <5893d081904cf4daa745038381d09358>:0
  at [email protected] (System.String arg30) [0x00001] in <c594ec5c06b84fcd8da875ac6c3d30c1>:0
  at Microsoft.FSharp.Core.FSharpFunc`2[T,TResult].InvokeFast[V] (Microsoft.FSharp.Core.FSharpFunc`2[T,TResult] func, T arg1, TResult arg2) [0x0001f] in <5893d081904cf4daa745038381d09358>:0
  at Microsoft.FSharp.Core.FSharpFunc`2[T,TResult].InvokeFast[V,W] (Microsoft.FSharp.Core.FSharpFunc`2[T,TResult] func, T arg1, TResult arg2, V arg3) [0x0003d] in <5893d081904cf4daa745038381d09358>:0
  at FSI_0005.Fable.FakeHelpers.run (System.String workingDir, System.String fileName, System.String args) [0x000f8] in <c594ec5c06b84fcd8da875ac6c3d30c1>:0
  at FSI_0005.Fable.FakeHelpers.pushNuget (System.String dotnetExePath, Fake.ReleaseNotesHelper+ReleaseNotes releaseNotes, Microsoft.FSharp.Core.FSharpOption`1[T] build, System.String projFile) [0x001a2] in <c594ec5c06b84fcd8da875ac6c3d30c1>:0
  at FSI_0005.Fable.FakeHelpers.publishPackages2 (System.String baseDir, System.String dotnetExePath, Microsoft.FSharp.Collections.FSharpList`1[T] packages) [0x000e7] in <c594ec5c06b84fcd8da875ac6c3d30c1>:0
  at FSI_0005.Fable.FakeHelpers.publishPackages (System.String baseDir, System.String dotnetExePath, Microsoft.FSharp.Collections.FSharpList`1[T] packages) [0x00017] in <c594ec5c06b84fcd8da875ac6c3d30c1>:0
  at [email protected] (Microsoft.FSharp.Core.Unit unitVar0) [0x00010] in <c594ec5c06b84fcd8da875ac6c3d30c1>:0
  at Fake.TargetHelper+targetFromTemplate@209-1[a].Invoke (Microsoft.FSharp.Core.Unit unitVar0) [0x00001] in <59b649fdccf1c534a7450383fd49b659>:0
  at Fake.TargetHelper.runSingleTarget (Fake.TargetHelper+TargetTemplate`1[a] target) [0x0004b] in <59b649fdccf1c534a7450383fd49b659>:0

OnReset is a valid event for forms but it is missing in DomAttr. Please add it.

Given a component like this

type Test(intialProps) =
    inherit Component<obj,obj>(intialProps)
    member x.Text with get() = x.props.ToString()
    override x.render() =
        str x.Text

and a helper creation function

let inline test props = ofType<Test,_,_> props [] :?> Test

The below code will compile and run but the result is not as expected

let t  =  test "test text"
printfn "******************* %s ******************" t.Text

Expected result ******************* test text ****************** or that the cast fails
Actual resul ******************* undefined ******************

I'm using the latest version of this docker image nojaf/fable

The server side module ReactServer.renderToString is super useful as a template engine for static html page templating with lightweight dependencies.

I was wondering wether it could be good to have a version of the function that doesn't add the reactroot, and that can write to a stream instead of returning a string…

If it makes sense, I can propose a PR of course.

In #112 @vbfox has added bindings for React.memo and also some types and helpers to handle references to React components. There was already a helper to instantiate a component from a direct reference, but it's true it wasn't used a lot and the only way to declare a ComponentClass was by typing and imported element from JS. Should we deprecate the from helper in favor of the new ReactElementType module?

And about SSR, what would the equivalente to ReactElementType and how can we make the memo bindings compatible? @zaaack @thinkbeforecoding

Using 5.0.0-alpha-002

fable: Compiled .fable\Fable.React.5.0.0-alpha-002\Fable.Helpers.ReactServer.fs
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(20,13): (20,30) error FABLE: Cannot resolve System.IO.TextWriter.Write
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(21,13): (21,30) error FABLE: Cannot resolve System.IO.TextWriter.Write
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(22,13): (22,31) error FABLE: Cannot resolve System.IO.TextWriter.Write
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(23,13): (23,29) error FABLE: Cannot resolve System.IO.TextWriter.Write
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(24,13): (24,29) error FABLE: Cannot resolve System.IO.TextWriter.Write
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(25,13): (25,24) error FABLE: Cannot resolve System.IO.TextWriter.Write
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(33,2): (33,16) error FABLE: Cannot resolve System.IO.TextWriter.Write
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(34,2): (34,16) error FABLE: Cannot resolve System.IO.TextWriter.Write
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(28,2): (28,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(37,19)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(30,4): (30,19) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(37,19)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(28,2): (28,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(38,21)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(30,4): (30,19) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(38,21)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(456,82): (456,96) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(468,36)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(469,33)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(460,2): (460,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(469,33)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(462,2): (462,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(469,33)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(470,16)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(460,2): (460,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(470,16)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(462,2): (462,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(470,16)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(471,23)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(460,2): (460,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(471,23)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(462,2): (462,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(471,23)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(472,19)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(460,2): (460,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(472,19)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(462,2): (462,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(472,19)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(473,16)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(460,2): (460,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(473,16)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(462,2): (462,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(473,16)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(456,82): (456,96) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(474,25)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(456,82): (456,96) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(475,27)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(476,13)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(460,2): (460,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(476,13)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(462,2): (462,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(476,13)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(456,82): (456,96) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(477,22)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(456,82): (456,96) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(478,22)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(456,82): (456,96) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(479,15)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(480,22)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(460,2): (460,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(480,22)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(462,2): (462,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(480,22)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(456,82): (456,96) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(481,19)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(456,82): (456,96) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(482,18)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(456,82): (456,96) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(483,17)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(484,21)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(460,2): (460,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(484,21)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(462,2): (462,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(484,21)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(485,21)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(460,2): (460,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(485,21)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(462,2): (462,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(485,21)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(486,17)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(460,2): (460,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(486,17)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(462,2): (462,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(486,17)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(487,19)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(460,2): (460,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(487,19)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(462,2): (462,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(487,19)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(488,17)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(460,2): (460,18) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(488,17)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(462,2): (462,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(488,17)
C:/Temp/GetDark/.fable/Fable.React.5.0.0-alpha-002/Fable.Helpers.ReactServer.fs(459,2): (459,16) error FABLE: Cannot resolve System.IO.TextWriter.Write - Inline call from .(489,19)

Hmm, also the same problem with 4.1.3

According to MDN some HTML elements can be void.

When the React binding has been created thus elements were defined as any other (with property and children).

I propose we take the opportunity offered by the Fable 1.0 release to introduce a breaking change into the binding for thus elements.

I understand that under now we didn't make thus changes but that means we will always have this errors in the bindings.

The breaking change isn't so hard to fix thanks to F# compiler. People having application in production would "only" need to remove the empty [] they used for thus elements.

I'm trying to write a binding for https://github.com/Netflix/vizceral-react.

I just start with the Elmish template and add the following right into Counter/View.fs

[<RequireQualifiedAccess>]
type Vizceral =
    | AllowDraggingOfNodes of bool
    | ShowLabels of bool
    | TargetFramerate of int
    | Traffic of string
    interface IProp

let vizceralEl : obj = import "Vizceral" "vizceral-react"

let inline vizceral (props: IProp list) (childred: React.ReactElement list) : React.ReactElement =
    createElement (vizceralEl, keyValueList CaseRules.LowerFirst props, childred)

let data = """... a json copied from https://github.com/Netflix/vizceral-example/blob/master/src/sample_data_simple.json ..."""

let root model dispatch =
  div []
    [ vizceral [ Vizceral.Traffic data ] []  ]

(I tried to follow the approach I found in https://github.com/fable-compiler/fable-react/blob/master/src/Fable.Recharts/Fable.Recharts.f)

I've got this error at runtime:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of LazyView.

and a warning:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of LazyView.
in LazyView

Hello fellows.
I've tried to get the React-Table extension working with F# and Fable but so far I haven't had much success.

Currently I try to use this code (similar used for React Charts here):

let inline reactTable (props: IProp list) (children: React.ReactElement list): React.ReactElement =
    ofImport "ReactTable" "react-table" (keyValueList CaseRules.LowerFirst props) children

to get an ReactTable element. However it already fails here. I've checked many things, e.g dependencies, configurations ... but I won't get rid of the message that the element is unknown to React:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined

After I tried to fix this stuff for some hours I'm asking for help 😢 Maybe I missed something super stupid here?

PS: Future plan is to hand my results over to this repository!

Little dilemma here... It's quite easy to extend memo support to get a much simplified usage, with this helper :

let simpleMemo (name: string) (render: 'props -> ReactElement) : 'props -> ReactElement =
    let memoType = memo name render
    fun props -> ofElementType memoType props []

Usage become as simple as :

// Definition
type HelloProps = { Name: string }
let hello = simpleMemo "HelloWorld" <| fun p ->
	span [] [str "Hello, "; str p.Name]

// Usage
let view model =
    hello { Name = "World" }

Up till there I would say !

Until someone does that :

type HelloProps = { Name: string }
let view model =
    simpleMemo "HelloWorld" (fun p -> span [] [str "Hello, "; str p.Name]) { Name = "World" }

Or even that :

let view model =
    simpleMemo "HelloWorld" (fun () -> span [] [str "Hello, "; str model.Name]) ()

It has after all a very similar signature to all other helpers, except that this completely break all the memo optimizations...

Still I might find myself using it in a lot of my projects, so I don't know. What do you think ?

There are very useful latest changes, but it is not published yet. Especially about added many missing CSS props - manually managing them is annoying.

Hi,
just stumbled on this problem:

this does not work

  open Fable.Recharts
  open Fable.Recharts.Props
  module SVG = Fable.Helpers.React.Props
  open Fable.Helpers.React

and leads to this error:

warning.js:33 Warning: React does not recognize the dataKey prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase datakey instead. If you accidentally passed it from a parent component, remove it from the DOM element.

meanwhile this works

  open Fable.Recharts
  open Fable.Recharts.Props
  module SVG = Fable.Helpers.React.Props
  // open Fable.Helpers.React

maybe something with modules loading?

I'm having a hard time to use https://github.com/clauderic/react-sortable-hoc with Fable.
I can import

let SortableContainer<'t> : obj -> SortableContainerProp<'t> -> React.ReactElement = import "SortableContainer" "react-sortable-hoc"

But I never seem to port https://github.com/clauderic/react-sortable-hoc/blob/master/examples/basic.js.
What exactly should the function signature be of SortableContainer if you know the imported code is https://github.com/clauderic/react-sortable-hoc/blob/e599da7fefa5550f9a1d65cad302e5c77ea6ac7b/src/SortableContainer/index.js#L18??

I have tried several examples and despite configuring fable with babel under IE 11 I am getting below errors:

I am fully aware this issue is not directly related to Fable but I would appreciate a working sample for IE11 if supported or else document IE11 is not supported.

When the children of a react element are coming from another function IE11 renders a blank page.

let returnList =
    [ R.str "hello1"
      R.str "hello2" ]

let app = R.div [] returnList

This is a minimal example which returns a blank page on IE11.
The error log is empty, so it is very obscure what's happening here.

All other browsers I've tested (Chrome, Firefox, Edge) return the children as expected.

I've created a repo with the code: https://github.com/toburger/fable-react-ie11-minimal-repo

Apologies but I filed the pull request before the issue. I was exploring SVG with Fable on a flight on weekend and realized there was no obvious way to specify Height attribute for a rectangle (or the SVG tag itself). Width is in there. I added a local Height and everything works fine, so I sent in a PR but apologies if there was something obvious in there I missed. Was an absolute dream getting an SVG app working in react. thanks for a nice library!

Is there an example with using

https://github.com/fable-compiler/fable-react/blob/next/fable-react/Fable.Helpers.React.fs#L588

to create an Element? I'm trying to upgrade the react native demo project to 1.0, and seem to be hitting issues here when transpiling.