Giter Club home page Giter Club logo

elmish's Introduction

Elmish: Elm-like abstractions for F# applications.

Gitter Windows Build status NuGet version

Elmish implements core abstractions that can be used to build applications following the β€œmodel view update” style of architecture, as made famous by Elm. The library however does not model any "view" and is intended for use in conjuction with a DOM/renderer, like React/ReactNative or VirtualDOM. Those familiar with Redux may find Elmish a more natural fit when targeting React or ReactNative as it allows one to stay completely in idiomatic F#.

Elmish abstractions have been carefully designed to resemble Elm's "look and feel" and anyone familiar with post-Signal Elm terminology will find themselves right at home.

See the docs site for more information.

Using Elmish

v2.0 and above releases use dotnet SDK and can be installed with dotnet nuget or paket:

For use in a Fable project: paket add nuget Fable.Elmish -i

For use in a WebSharper project: paket add nuget WebSharper.Elmish -i

If targeting CLR, please use Elmish package: paket add nuget Elmish -i

For v1.x release information please see the v1.x branch For v2.x release information please see the v2.x branch For v3.x release information please see the v3.x branch

Building Elmish

Elmish depends on dotnet SDK 6:

  • dotnet fsi build.fsx or ./build.fsx on a *nix system.

Contributing

Please have a look at the guidelines.

elmish's People

Contributors

2scomplement avatar alfonsogarciacaro avatar banashek avatar davidpodhola avatar davidtme avatar dependabot[bot] avatar dsyme avatar enricosada avatar espenbrun avatar et1975 avatar forki avatar granicz avatar helegrod avatar hvester avatar inchingforward avatar johlrich avatar jordanmarr avatar kspeakman avatar longtomjr avatar mangelmaxime avatar maxwilsonms avatar mrakgr avatar ncave avatar pauldorehill avatar pirrmann avatar sachinshahredmane avatar scottshingler avatar tarmil avatar zaid-ajaj avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

elmish's Issues

updateWithStorage in TodoMVC sample generate an infinity number of Msg

The following code:

let setStorage (model:Model) : Cmd<Msg> =
    let noop _ = NoOp
    Cmd.ofFunc S.save model noop noop // TODO

let updateWithStorage (msg:Msg) (model:Model) =
  let (newModel, cmds) = update msg model
  newModel, Cmd.batch [ setStorage newModel; cmds ]

Generate an infinity number of Msg.

To visualize this effect simply replace updateWithStorage with this version and then trigger any change in the sample.

let updateWithStorage (msg:Msg) (model:Model) =
  Browser.console.log "Hello from update with storage"
  let (newModel, cmds) = update msg model
  newModel, Cmd.batch [ setStorage newModel; cmds ]

It's not causing any visible problem in this simple sample because we are using lazyview and don't diff/patch the view at each msg.

Also, in less than 1-2 seconds updateWithStorage function has been called more than 500 times on my computer.

One solution would be to use this function:

let updateWithStorage (msg:Msg) (model:Model) =
  match msg with
  // Don't batch NoOp message
  | NoOp -> model, []
  | _ ->
    let (newModel, cmds) = update msg model
    newModel, Cmd.batch [ setStorage newModel; cmds ]

@et1975 If you are ok with this solution I could PR the fix

Does not build on Windows

When I cloned the repo, it does not build on my machine where otherwise I use fable.

I am pretty sure it is because I miss something and generally I am too pedantic on the DevOps (does that still exist?).

Building: C:\Users\david.podhola\Documents\S\fable-elmish\src\elmish
C:\Users\david.podhola\Documents\S\fable-elmish\packages\Npm.js\tools\npm.cmd run build
Running build failed.
Error:
System.Exception: Start of process C:\Users\david.podhola\Documents\S\fable-elmish\packages\Npm.js\tools\npm.cmd failed. The system cannot find the file specified

capture

How to use CSSProp?

Most of the docs I see using style are react-native, how do I use the one under Fable.Helpers.React?

Equals is not a function error when comparing records

Description

Hello, when I'm trying to compare records I get following error:

x.Equals is not a function

The workaround is to use one field to compare but comparing records works in F# itself. Is it possible to have it working in Fable?

Repro code

records |> List.filter (fun r -> r = record2)

Depreciate elmish-snabbdom

Reminder:

  • Depreciate the package on npm
  • Delete src/elmish-snabbdom
  • Delete samples/snabbdom
  • Update the Readme

Implement "lazy" views

Elm can avoid vdom reconciliation by implementing lazy function, Elmish should be able to do that as well.

Fable compiler message when compiling example todomvc

Hello,

I cloned repo and try to compile the sample in available at:
https://github.com/fable-compiler/fable-elmish/tree/master/samples/react/todomvc

I did:

  1. npm install
  2. fable todomvc.fsx

Fable compiler returns:
"Cannot find replacement for Microsoft.FSharp.Control.MailBoxProcessor.receive at ...\elmish.fs (100,31 - 110, 43)"

This prevents the compiler from finishing to create the file: todomvc.fs in out/ directory. So I can't run the sample.

Thanks in advance for your help;
Edouard

Mapbox integration

Hi,
I'm trying to make my mind around the integration of a mapbox component into the elmish architecture.

So currently, a mapbox component is rendered to a known HtmlElement. Following our discussion of yesterday, I've tried to initialize my map when the View is ready by using Ref. Therefore the mapbox map is correctly appended.

let root =
  div
    [  
      Id "mapid" 
      Ref( fun x ->
        printfn ("init map")
        Mapbox.AccessToken <- "my.access.token"
        Mapbox.Map("mapid","mapbox.streets") |> ignore
      )
    ] []

Now my problem arises on unmount since I would like to destroy the mapbox component (= calling map.remove() , not removing the actual Html element) when I render a new view.

The leaflet component exists in the DOM and has it's own lifecycle independant on the VDom.

So my question is: where should I store a reference to my map component so that I can call map.remove()? In a more generic fashion, what would be the best architecture for this kind of problem?

Thanks!

Try using `requestAnimationFrame` to schedule view renderings instead of calling it directly from the dispatch

From evancs' performance harness:

requestAnimationFrame lets you say β€œhere is a function that modifies the DOM, but I want the browser to make the changes whenever it thinks it is a good idea.” That means the repaints get smoothed out to 60 FPS no matter how crazy your JS happens to be.

Say you get events coming in extremely quickly, and you get four events within a single frame. A naive use of requestAnimationFrame would just schedule them all to happen in sequence. So you would build all four virtual DOMs, diff them against each other in sequence, and show the final result to the user. We can do better though! We can just skip three of those frames entirely. Instead diff the current virtual DOM against the latest virtual DOM. The end result is exactly the same (the user sees the final result) but we skipped 75% of the work!

Elm does this optimization by default.

Setting input value reset the cursor

Description

When setting the value of an input it's resetting the cursor to the end of the field.

Repro code

You can reproduce the problem by using the Template added here #59

Code used to set the input:

input
  [ ClassName "input"
    Type "text"
    Placeholder "Type your name"
    Value (U2.Case1 model)
    AutoFocus true
    OnChange (fun ev -> !!ev.target?value |> ChangeStr |> dispatch )
  ] [ ]

Step to reproduce:

  1. Type Mxme
  2. Try fixing the typos to write Maxime
  3. See that the cursor is being reset to the end of the field.

Expected and actual results

Input value set without resetting the cursor.

Related information

  • fable-elmish version: 0.9.0-beta-6
  • fable-elmish-react version: 0.9.0-beta-4
  • fable-react version: 1.0.0-narumi-4

Port debugger support for Fable 1.x

Changes to DU representation break existing functionality. Can also switch to pluggable serialization in remotedev that has been added since original impl.

How can I compose multiple components/functions into a parent view

I made an attempt at putting two simple counters into a container with separate state, but I can't seem to get my head around how nested types are supposed to give different types of messages to the main loop's mailbox processor.

Here is the sample application:

module AwesomeApp

open System
open Fable.Core
open Fable.Import
open Fable.Import.ReactNative
open Fable.Helpers.ReactNative
open Fable.Helpers.ReactNative.Props
open Fable.Elmish

// Basic Counter

module Counter =
  // Model
  type CounterModel =
    { Count:int
      Visible:bool }

  let initCounter =
    { Count = 0
      Visible = true }

  // Update
  type CounterAction =
    | Decrement of int
    | Increment of int

  let counterUpdate ( model : CounterModel) ( command : CounterAction) : CounterModel =
    match command with
    | Decrement x -> { model with Count = model.Count - 1 }
    | Increment x -> { model with Count = model.Count + 1 }


  // View
  module R = Fable.Helpers.ReactNative

  let counterView model dispatch =
    let bgColor =
      match model.Count with
      | x when x > 0 -> "green"
      | x when x < 0 -> "red"
      | _ -> "blue"

    let onClick msg =
      fun _ -> msg |> dispatch

    R.view []
      [
        Styles.button "-" (onClick (model, Decrement))
        R.text [ TextProperties.Style [TextStyle.BackgroundColor bgColor]] (string model.Count)
        Styles.button "+" (onClick (model, Increment))
      ]

// Container

module Container =
  module cnt = Counter
  // Model
  type ContainerModel =
    { Top:cnt.CounterModel
      Bottom:cnt.CounterModel }

  let initContainer() =
    { Top = cnt.initCounter
      Bottom = cnt.initCounter }, Cmd.none

  // Update
  type ContainerAction =
    | Reset
    | Top of cnt.CounterAction
    | Bottom of cnt.CounterAction

  let containerUpdate (command:ContainerAction) (model:ContainerModel) : ContainerModel*Cmd<ContainerAction> =
    match command with
    | Reset -> {Top = cnt.initCounter; Bottom = cnt.initCounter}, []
    | Top cmd ->
      let res = cnt.counterUpdate model.Top cmd
      {model with Top = res}, []
    | Bottom cmd ->
      let res = cnt.counterUpdate model.Bottom cmd
      {model with Bottom = res}, []

  // View
  module R = Fable.Helpers.ReactNative

  let containerView model dispatch =
    let onClick msg =
      fun _ -> msg |> dispatch
    R.view
      []
      [
        cnt.counterView model.Top dispatch
        cnt.counterView model.Bottom dispatch
        (*Styles.button "Reset" (onClick Reset)*)
      ]

// App
module C = Container

let program =
    Program.mkProgram C.initContainer C.containerUpdate
    |> Program.withConsoleTrace

type App() as this =
    inherit React.Component<obj, C.ContainerModel>()

    let safeState state =
        match unbox this.props with
        | false -> this.state <- state
        | _ -> this.setState state

    let dispatch = program |> Program.run safeState

    member this.componentDidMount() =
        this.props <- true

    member this.render() =
        C.containerView this.state dispatch

Getting type errors on the last line with the dispatch.
I believe it's because I'm trying to use the same dispatch for both the Container as well as the Counters.
I was looking at Program.run which looks like it it returns a closure of a Post method to the inbox.
The type mismatch on the dispatch on the last line has me a bit confused though.

I get one dispatch from the main app(), which seems to want to be a dispatcher for counter messages rather than container messages.

Any thoughts on where I'm going on? or is the library more designed for a single large application with a single update/dispatch function (as in the todomvc sample).

ActivityIndicator has no time to spin in RN

let update msg model =
    match msg with
    | Start ->
        { model with 
            Status = InProgress }, Cmd.ofPromise longRunningPromise () Loaded Error
    | Loaded ->
        { model with 
            Status = Done }, Cmd.none
    // ...

let view model dispatch =
    view [][
        // ...
        activityIndicator [ActivityIndicator.ActivityIndicatorProperties.Animating (model.Status = Status.InProgress)]
    ]

This doesn't work. The spinner will not start because the UI doesn't get rerendered.

All files marked as executable

Description

Follow the tutorial and then run dotnet restore in the created project folder.

Now all non-executable files have file mode 744, but they should have 644.

-rwxr--r--   1 h  staff   361B Jun 16 15:14 README.md

[discussion] Server-Side Rendering

Fable-Elmish core architecture is independent of renderers. So to build a browser web application we could use react or any other virtual DOM renderer. To realize server-side rendering with React we need to run node-server along with .net http server (i.e. Suave). As I can see - to avoid starting a node server, we need to develop our own Virtual DOM implementation, which could be rendered on the server, and then on the client side bind events to the rendered elements.

Creating that Isomorphic Virtual DOM - Is this the right direction? I would like to discuss.

[Dicussion] Planning merge of Fable-Arch and Elmish

Context

As shown by the benchmark Elmish-Snabbdom is fast.

I think we can consider making Elmish-Snabbdom available in 0.1. If you are ok I will add a last commit to #36 to switch Elmish-Snabbdom out of alpha and then we could merge the PR.

Also this confirmation allow our self to move on for planning the merge of Fable-Arch and Elmish.

Next steps

IMO the next steps are the following:

  • Make a doc explaining how to convert an application from Fable-Arch to Elmish
  • Make a docs site for Elmish (That always appreciated)
  • Depreciate Fable-Arch in favor of Elmish

With @mastoj we was dicussing about the name of the project.

Using a name different from "elm..." makes a stronger stand on this is our way of doing things
that's why I choose arch, I had fable architecture in mind and hoped that this could be the fable architecture for applications

And personally I agree with his point of view. I think this could be a good thing to say Fable as it's own solution for building Web App. And not giving the impression it's just a "copy" as it more than that in my opinion.

Proposition

If you agree I can port the Fable-Arch doc site to Elmish and we could adapt the design etc. For example, add a way to select the renderer on the sample list.

Just pinging people I think are interested on the subject: @mastoj @et1975 @alfonsogarciacaro @Zaid-Ajaj

Fable.Template.Elmish.React is shipping with node_modules causing npm install to fail

Version 0.1.5 of the template is shipping with the node_modules folder populated - possibly with non windows os content

When following the instructions npm install does not error but on windows the webpack.cmd etc are not present in the node_modules/.bin folder causing the dotnet fable npm-start command to fail with an error complaining that webpack-dev-server cannot be found

Using yarn install instead of npm does correctly re-install the npm packages and the app can be startedas expected

Generate docs

Should match fable process and style.
Should have running React examples on github.io.

Logo

That autogenerated logo in the Github org page looks a bit sad ;)

Figure out CI problems

Builds for me locally on OSX, but AppVeyor and Travis report an error:

/home/travis/.nuget/packages/fsharp.net.sdk/1.0.0-beta-060000/build/FSharp.NET.Core.Sdk.targets(137,9): error MSB3073: The command ""/home/travis/build/fable-compiler/fable-elmish/dotnetsdk/sdk/1.0.1/../../dotnet" compile-fsc "@/home/travis/build/fable-compiler/fable-elmish/src/elmish/node_modules/fable-powerpack/obj/Debug/netstandard1.6/dotnet-compile.rsp" " exited with code 1. [/home/travis/build/fable-compiler/fable-elmish/src/elmish/node_modules/fable-powerpack/Fable.PowerPack.fsproj]
/home/travis/build/fable-compiler/fable-elmish/dotnetsdk/sdk/1.0.1/Sdks/Microsoft.NET.Sdk/build/Microsoft.NET.Sdk.targets(92,5): error : Cannot find project info for '/home/travis/build/fable-compiler/fable-elmish/src/elmish/node_modules/fable-powerpack/Fable.PowerPack.fsproj'. This can indicate a missing project reference. [/home/travis/build/fable-compiler/fable-elmish/src/elmish/Fable.Elmish.fsproj]
  • fable-elmish version: (master)
  • fable-compiler version: (narumi)
  • fable-core version: (narumi)
  • Operating system: linux, windows

Elmish 0.9 don't use the same code as in the repo

Description

When trying to use Elmish 0.9 we don't have the same as in the github repo causing this error:

packages\Fable.Elmish\fable\program.fs(67,12): (67,70) error FSHARP: The member or object constructor 'WriteLine' does not take 2 argument(s). An overload was found taking 0 arguments.

We have this code in the Nuget code:

    let withConsoleTrace (program: Program<'arg, 'model, 'msg, 'view>) =
        let inline toPlain o = toJson o |> JS.JSON.parse
        let traceInit (arg:'arg) =
            let initModel,cmd = program.init arg
            System.Console.WriteLine ("Intial model: {0}", toPlain initModel)
            initModel,cmd

        let traceUpdate msg model =
            System.Console.WriteLine("Processing: {0}", toPlain msg)
            let newModel,cmd = program.update msg model
            System.Console.WriteLine("Updated: {0}", toPlain newModel)
            newModel,cmd

        { program with
            init = traceInit 
            update = traceUpdate }

where we should have:

    let withConsoleTrace (program: Program<'arg, 'model, 'msg, 'view>) =
        let inline toPlain o = toJson o |> JSON.parse
        let traceInit (arg:'arg) =
            let initModel,cmd = program.init arg
            console.log ("New model:", toPlain initModel)
            initModel,cmd

        let traceUpdate msg model =
            console.log ("New message:", toPlain msg)
            let newModel,cmd = program.update msg model
            console.log ("Updated:", toPlain newModel)
            newModel,cmd

        { program with
            init = traceInit 
            update = traceUpdate }

@et1975 Can you republish a 0.9.1 version ?

UWP/Windows ReactNative samples

Would be nice to have RN samples targeting Windows/UWP, seems like right now that would be the only way to program UWP apps in F#.
I don't have a Windows to try it on, so hopefully someone can PR this.

What is snabbdom?

Hi

Love F#, new to Fable Elmish. What is snabbdom? Which is better for production, react or snabbdom?

Thanks

[fable-elmish@next + fable-elmish-snabbdom@next] problems with Fable.Import and Result

A few things I encountered when trying to get running on Fable 1.0:

  • node_modules/fable-elmish-snabbdom/Fable.Import.Snabbdom.fs(L1,13) : error FSHARP: A namespace and a module named 'Fable.Import' both occur in two parts of this assembly

I think this is caused by the use of module Fable.Import inside Fable.Import.Snabbdom.fs instead of using namespace Fable.Import.

  • the Result type from result.fs inside Elmish conflicts with F#'s Result

best practices for webapi calls?

I'm curious what the best practices are for making webapi calls with regards to Messages and sub components.

  • Should all of the webapi calls be at the application level or should each component be able to make webapi calls?
  • Should each webapi response be a separate message?

In a very simple app that is displaying a list of data, I have:

    | Msg.Failure err ->
        console.error(err)
        model, Cmd.none
    | Msg.GetLatest ->
        let cmd = Cmd.ofPromise WebApi.getLatest () Msg.GotLatest (fun _ -> Msg.Failure "getLatest failed")
        model, cmd
    | Msg.GotLatest rows ->
        { model with LatestList = rows }, Cmd.none

Are there any good React apps that we can port to Fable to use as a more complicated example/sample? Something with a few react components and a few webapi calls would be perfect.

Error with Redux DevTools - Can't replay actions

I tried the counter sample with the Redux DevTools. Everything works fine but when I try to reverse or replay actions, I get the error below in the console

Unable to process monitor command Object {type: "DISPATCH", payload: Object, state: "2", id: "1", source: "@devtools-extension"} Error: Cannot resolve generic argument a: TypeError: Cannot read property 'generics' of undefined
    at resolveGeneric (http://localhost:8080/bundle.js:24552:15)
    at inflate (http://localhost:8080/bundle.js:24913:127)
    at inflatePublic (http://localhost:8080/bundle.js:24984:12)
    at http://localhost:8080/bundle.js:25928:145
    at <anonymous>:1:23668
    at <anonymous>:1:20331
    at Array.forEach (native)
    at <anonymous>:1:20311
    at Array.forEach (native)
    at handleMessages (<anonymous>:1:20237)
(anonymous) @ debugger.js:127
(anonymous) @ VM1007:1
(anonymous) @ VM1007:1
(anonymous) @ VM1007:1
handleMessages @ VM1007:1

I'm getting similar errors with the other samples.

Part of the code for the sample is as below

module Counter =
  type Msg =
    | Increment
    | Decrement
  
  type Model = int
  let init () = 0
  let update msg count =
    match msg with
    | Increment -> count + 1
    | Decrement -> count - 1
  
  open Fable.Helpers.React
  open Fable.Helpers.React.Props

  let view (model:int) dispatch =
    div []
      [ button 
          [ OnClick <| fun _ -> dispatch Decrement ] 
          [ str "-" ]
        span [] [ str <| string model ]
        button 
          [ OnClick <| fun _ -> dispatch Increment ]
          [ str "+" ] ]


open Elmish.React
open Elmish.Debug

let run =
    Program.withConsoleTrace
    >> Program.withReact "main"
    >> Program.withDebugger
    >> Program.run

let counter () = Program.mkSimple Counter.init Counter.update Counter.view

counter () |> run

Screen cast here
What am I missing?

Elmish with React: Initialize component once rendered

(Note: I am using React.)

Yesterday I stumbled on a rather simple problem that arose when I wanted to initialize a newly added component to my view.

For starters here is the presentation of the component: http://materializecss.com/collapsible.html
It's a simple accordion whose elements can be expanded on a click.

When I create my view, I then need to call a script to register my freshly created components:

   $('.collapsible').collapsible();     

Now apart from using a setTimeout (which works but seems dirty), how and when do I actually know that my components has been rendered and is ready to be used?

Looking on the official doc, it seems that React has some ComponentDidMount callback triggered whne the component is ready.

Do you think this is something we could use from Elmish? (for info: react bindings).

Thanks for your help!

Resolve depencies using paket

@forki pointed me that thus dependencies are resolve by nuget.

<ItemGroup>
  <PackageReference Include="FSharp.NET.Sdk" Version="1.0.*" PrivateAssets="All" />
  <PackageReference Include="FSharp.Core" Version="4.1.*" />
  <PackageReference Include="Fable.Core" Version="1.0.0-narumi-*" />
  <DotNetCliToolReference Include="dotnet-fable" Version="1.0.0-narumi-*" />
</ItemGroup>

We should use paket with a .lock file.

Can't run navigation example

Details
Trying to just run and learn how navigation works with fable-elmish with latest version also using @et1975's fork.

Error:
[Error] unable to process a message:
NotSupportedError (DOM Exception 9): The operation is not supported.
createEvent
(anonymous function) β€” elmish-browser-nav.fs:21
(anonymous function) β€” elmish.fs:121
fold β€” fable-core.js:1821
iterate β€” fable-core.js:1934
(anonymous function) β€” elmish.fs:121
(anonymous function) β€” fable-core.js:3954
(anonymous function) β€” fable-core.js:3911
(anonymous function) β€” fable-core.js:4001
(anonymous function) β€” fable-core.js:3911
__processEvents β€” fable-core.js:4195
post β€” fable-core.js:4216
(anonymous function) β€” elmish.fs:131
(anonymous function) β€” app.fsx:139
[native code]
dispatchEvent
invokeGuardedCallback β€” ReactErrorUtils.js:70
executeDispatch β€” EventPluginUtils.js:89
executeDispatchesInOrder β€” EventPluginUtils.js:112
executeDispatchesAndRelease β€” EventPluginHub.js:44
forEach
forEachAccumulated β€” forEachAccumulated.js:25
processEventQueue β€” EventPluginHub.js:231
runEventQueueInBatch β€” ReactEventEmitterMixin.js:18
handleTopLevel β€” ReactEventEmitterMixin.js:29
handleTopLevelImpl β€” ReactEventListener.js:73
perform β€” Transaction.js:138
batchedUpdates β€” ReactDefaultBatchingStrategy.js:63
batchedUpdates β€” ReactUpdates.js:98
dispatchEvent β€” ReactEventListener.js:150
dispatchEvent
    (anonymous function) (bundle.js:5475)
    onError (bundle.js:4465)
    (anonymous function) (bundle.js:4370)
    (anonymous function) (bundle.js:4458)
    (anonymous function) (bundle.js:4368)
    __processEvents (bundle.js:4652)
    post (bundle.js:4673)
    (anonymous function) (bundle.js:5493)
    (anonymous function) (bundle.js:386)
    (anonymous function)
    dispatchEvent
    invokeGuardedCallback (bundle.js:12136)
    executeDispatch (bundle.js:11920)
    executeDispatchesInOrder (bundle.js:11943)
    executeDispatchesAndRelease (bundle.js:11365)
    forEach
    forEachAccumulated (bundle.js:12237)
    processEventQueue (bundle.js:11552)
    runEventQueueInBatch (bundle.js:18872)
    handleTopLevel (bundle.js:18883)
    handleTopLevelImpl (bundle.js:23502)
    perform (bundle.js:14549)
    batchedUpdates (bundle.js:23419)
    batchedUpdates (bundle.js:13211)
    dispatchEvent (bundle.js:23579)
    dispatchEvent

screen shot 2016-10-24 at 10 43 12 pm

OS: macOS
F# Version: 4.1
.NET Mono Version: 4.6.1
Fable:

[Discussion] move to the fable-elmish org

Just a thread for people discuss the transition.

Why are we doing this?

From the begging I wasn't comfortable with mono-repo approach the rest of fable (and JS) ecosystem seems to be following. Specifically:

  • As the project grows, there are some things I care more about and would like to have a complete control over w/o involving a committee in a discussion. I promise to restrict the ************ to the absolute minimum of code, that's why I favour a lot of small libs and a project-per-lib approach.
  • As a member of the org you'll have the ability to add your own projects and organize it any way you like, I will not police what goes in your projects, although I will offer an advise if you ask for it.
  • I'd like to tie a build to the release, and use all the facilities of CI and github that go with it.

Elm-org follows this structure and from the discussion with @MangelMaxime he felt the same way, so there you have it.

How will we tie all the projects together?

We'll create the github.io org site and collect the gh-pages from all the subprojects.
Your docs, your samples, etc will be listed once you PR the links/changes to the main site.

How will I be able to update a bunch of project at once?

Hopefully the need for this will be minimal, but you can create a root org folder and checkout multiple projects under it, thus having the same search-replace capabilities as you do now.

None of the samples work under windows with Fable 1.0

Description

I have .net core 1.0.1 installed with fable 1.0 but non of the samples work. First problem is those instructions popd etc are *nix specific Even without them the build process fails with some erros like :
Restoring packages for C:\Users\onur\Projects\Fable\fable-elmish-master\samples\react\todomvc\app.fsproj...
C:\Program Files\dotnet\sdk\1.0.1\NuGet.targets(97,5): error : Unable to resolve 'C:\Users\onur\Projects\Fable\fable-elmish-master\samples\react\node_modules\fable-powerpack\Fable.PowerPack.fsproj' for '.NETStandard,Version=v1.6'. [C:\Users\onur\Projects\Fable\fable-elmish-master\samples\react\todomvc\app.fsproj]

Issue with elmish on IE11 and below

We use fable elmish-react for our website and it works mostly fine.

But in IE we have a strange issue. When you click a navigation link then the adress bar changes, but the site content remains the same until you press F5.

@MangelMaxime looked at our code and found that something is using the 'popstate' event.
He found a bug report - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3740423/
It's marked as resolved but we don't know for which version of IE.

He also sad that Fable-Arch is using the 'hashchange' event because it's working across all the browsers.

@et1975 any chance to change that?

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.