fable-compiler/Fable

F# to JS compiler

Maxime Mangel

@MangelMaxime

@forki No I don't know any good ones. I am creating my own.

Cody Johnson

@Shmew

I have a picker library but it's for material-ui

Andreas Vilinski

@vilinski

@Shmew I know what the difference, I just need to know how to do it with fable or saturn if I already have Fable.Remoting.

can I use Fable.Remoting together with saturn channels?

Cody Johnson

@Shmew

you can use them together sure, but if you're using websockets for every user then the pros of a rest api drops quite a bit

I haven't used saturn channels, but Elmish.Bridge works quite nicely

Andreas Vilinski

@vilinski

I'm writing internal tool, so there are at most a few simultaneous users. Each of them can start an operation and make others, who has currently opened the page, aware of this. If it works out I will also push some server logs to them

Alf Kåre Lefdal

@aklefdal

Thanks, @Shmew, I will try it out.

Damian Reeves

@DamianReeves

Hi… is there an example/template that cross compiles an F# Library to Fable and .NET core?

Cody Johnson

@Shmew

any of Zaid's libraries are pretty good examples

Damian Reeves

@DamianReeves

So if I understand correctly, the key bit is to package the source in the fable\ folder of the nuget package:

    <ItemGroup>
        <Content Include="*.fsproj; *.fs" PackagePath="fable\" />
    </ItemGroup>

Cody Johnson

@Shmew

yes, it's important that fable has access to the source files

Damian Reeves

@DamianReeves

So does that mean the same nuget package can host .NET Core and fable assets?

Cody Johnson

@Shmew

correct

FSharpPlus works in both dotnet and fable for example

Damian Reeves

@DamianReeves

thanks

Alkasai

@Alkasai

I'm trying to work with dates, but no matter what I try, the UTC <> Local conversion doesn't work.
For example both of these return the same string...

DateTime.Now.ToLongTimeString()
DateTime.UtcNow.ToLongTimeString()

Anyone know how to properly convert dates between UTC and Local?

Steffen Forkmann

@forki

I am creating my own. @MangelMaxime - I'm listening! ;-)

Eugene Tolmachev

@et1975

@ImaginaryDevelopment here's a delay Cmd:

module Cmd =
    open Browser
    open Elmish
    let delay (time:System.TimeSpan) cmd : Cmd<_> =
        let invoke dispatch =
            cmd |> List.iter (fun f -> f dispatch)
        [ fun dispatch -> 
            window.setTimeout(invoke, (int time.TotalMilliseconds), dispatch) |> ignore ]

ImaginaryDevelopment

@ImaginaryDevelopment

Why would I use that over async.sleep?

Maxime Mangel

@MangelMaxime

@ImaginaryDevelopment setTimeout is a native API and so will not include more code.

async as known in F# doesn't exist in JavaScript so we creating our own implementation.

Both will work it's probably a matter of preference I think. In general, I am in favor of the native API

Cody Johnson

@Shmew

Hey @MangelMaxime do you know if there is a way to get fable-splitter to move js source files to the output along with the newly compiled fs -> js files?

doesn't appear it cares if you set Compile Include in the fsproj

I already have allFiles: true in my splitter.config.js

Maxime Mangel

@MangelMaxime

You can force it by adding importSideEffect or something like that.

I think

Cody Johnson

@Shmew

I'd have to do that for every file then, right? What I'm trying to accomplish is copy all my *.test.js.snap to the output tests directory

Maxime Mangel

@MangelMaxime

Yes, or you can attach a hook to fable-splitter and copy the file in your hook

See onCompiled from the readme: https://github.com/fable-compiler/Fable/tree/master/src/fable-splitter

There is also a PR for adding Glob support to Fable fsproj but I am not sure if it will support it for non F# file.
fable-compiler/Fable#1946

Cody Johnson

@Shmew

Yeah that's my PR :)

Maxime Mangel

@MangelMaxime

Ah :p

At least you know I saw it ^^ and you can answer my question ^^

Cody Johnson

@Shmew

yeah it should include anything as far as libraries go, but that shouldn't help in this case. I already have a .snap in my proj and it doesn't copy it

but that's with fable-splitter specifically

Maxime Mangel

@MangelMaxime

Yes, I guess webpack understand .snap thanks to a loader or something.

But fable-splitter is more limited I would say.

Cody Johnson

@Shmew

so if I rename the file to .snap.js then it copies it

but if it isn't fs related or .js it ignores :(

ah there's a babel-plugin-file-loader package that ought to do it

robertj

@robkuz

Hey,
is anybody using Fulma/Bulma and Bootstrap together?

in one project

Maxime Mangel

@MangelMaxime

I don't think and I if someone does I think it will end up creating conflict.

Indeed, both project are using the same class and you will end up with a mix of style. I suppose try to add a div wrapper to isolte which framework to use when but not sure if this will work.

<div class="use-bulma"><div class="button">I am a button styled with Bulma</div></div>

<div class="use-bootstrap"><div class="button">I am a button styled with Bootstrap</div></div>

Or use CSS modules but I don't know them enough to say how to set them up.

robertj

@robkuz

OK. cool. thx for the suggestion

Aleksander Spro

@projecteon

I would highly advice against using 2 css frameworks together. It will also increase bundle size considerably.

Balinth

@Balinth

While trying out the VS Code Debugger for Chrome thingy, for some reason starting the server from the debug window changes the base path where the server looks for additional files (eg appsettings.json) versus building from fake (even with a new SAFE template, and using it's fake script, versus the provided "Debug SAFE application" debug target. Where or what kind of setting should I look for to specify this base path?

as far as I could tell, starting from the debugger still runs the fake build -t run command in the end

Florian Verdonck

@nojaf

Hey @MangelMaxime

Thoth.Json decode question: How would I decode

type Node =
    { Type: string
      Range: Range option
      Properties: Map<string, obj>
      Childs: Node list }

The Properties, I don't really care what is in the object. I only need to display it in my view.
It could look like:

    {
      "Type": "SynModuleOrNamespace.AnonModule",
      "Range": {
        "StartLine": 1,
        "StartCol": 0,
        "EndLine": 1,
        "EndCol": 0
      },
      "Properties": {
        "isModule": "AnonModule",
        "isRecursive": false,
        "longIdent": [
          {
            "Ident": "Script",
            "Range": {
              "StartLine": 1,
              "StartCol": 0,
              "EndLine": 1,
              "EndCol": 0
            }
          }
        ]
      },
      "Childs": []
    }

Florian Verdonck

@nojaf

Found a workaround:

let decodeKeyValue : Decoder<obj> = fun _key jsonValue -> Ok jsonValue

Where communities thrive

People

Repo info

Activity