|
| 1 | +# Call Fable from Python |
| 2 | + |
| 3 | +Sometimes, we'd like to use the power of Fable in our JavaScript apps. For instance, to create a new |
| 4 | +[js node in Node-RED](https://nodered.org/docs/creating-nodes/first-node) or call some handy F# code from our new Node.js serverless function or even call some powerful json parsing into our JavaScript app. |
| 5 | + |
| 6 | +It may allow you to play with Fable and add features, one at a time. So what does it take to call Fable from JavaScript? First you need to understand a bit how the generated JS code looks like so you can call it correctly. |
| 7 | + |
| 8 | +> Remember you can use the [Fable REPL](https://fable.io/repl/) to easily check the generated JS for your F# code! |
| 9 | +
|
| 10 | +## Name mangling |
| 11 | + |
| 12 | +Because JS doesn't support overloading or multiple modules in a single file, Fable needs to mangle the name of some members to avoid clashes, which makes it difficult to call such functions or values from JS. However, there're some cases where Fable guarantees names won't change in order to improve interop: |
| 13 | + |
| 14 | +- Record fields |
| 15 | +- Interface and abstract members |
| 16 | +- Functions and values in the root module |
| 17 | + |
| 18 | +What's a root module? Because F# accepts multiple modules in the same file, we consider the root module the first one containing actual members and is not nested by any other. |
| 19 | + |
| 20 | +```fsharp |
| 21 | +// It doesn't matter if we have a long namespace, Fable only starts |
| 22 | +// counting when it finds actual code |
| 23 | +module A.Long.Namespace.RootModule |
| 24 | +
|
| 25 | +// The name of this function will be the same in JS |
| 26 | +let add (x: int) (y: int) = x + y |
| 27 | +
|
| 28 | +module Nested = |
| 29 | + // This will be prefixed with the name of the module in JS |
| 30 | + let add (x: int) (y: int) = x * y |
| 31 | +``` |
| 32 | + |
| 33 | +In F# it's possible to have more than one root module in a single file, in that case everything will be mangled. You should avoid this pattern if you want to expose code to JS: |
| 34 | + |
| 35 | +```fsharp |
| 36 | +namespace SharedNamespace |
| 37 | +
|
| 38 | +// Here both functions will be mangled |
| 39 | +// to prevent name conflicts |
| 40 | +module Foo = |
| 41 | + let add x y = x + y |
| 42 | +
|
| 43 | +module Bar = |
| 44 | + let add x y = x * y |
| 45 | +``` |
| 46 | + |
| 47 | +### Custom behaviour |
| 48 | + |
| 49 | +In some cases, it's possible to change the default behavior towards name mangling: |
| 50 | + |
| 51 | +- If you want to have all members attached to a class (as in standard Python classes) and not-mangled use the `AttachMembers` attribute. But be aware **overloads won't work** in this case. |
| 52 | +- If you are not planning to use an interface to interact with Python and want to have overloaded members, you can decorate the interface declaration with the `Mangle` attribute. Note: Interfaces coming from .NET BCL (like System.Collections.IEnumerator) are mangled by default. |
| 53 | + |
| 54 | +## Common types and objects |
| 55 | + |
| 56 | +Some F#/.NET types have [counterparts in JS](../dotnet/compatibility.md). Fable takes advantage of this to compile to native types that are more performant and reduce bundle size. You can also use this to improve interop when exchanging data between F# and Python. The most important common types are: |
| 57 | + |
| 58 | +- **Strings and booleans** behave the same in F# and Python. |
| 59 | +- **Chars** are compiled as Python strings of length 1. This is mainly because string indexing in JS gives you another string. But you can use a char as a number with an explicit conversion like `int16 '家'`. |
| 60 | +- **Numeric types** compile to JS numbers, except for `long`, `decimal` and `bigint`. |
| 61 | +- **Arrays** (and `ResizeArray`) compile to JS arrays. _Numeric arrays_ compile to [Typed Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) in most situations, though this shouldn't make a difference for most common operations like indexing, iterating or mapping. You can disable this behavior with [the `typedArrays` option](https://www.npmjs.com/package/fable-loader#options). |
| 62 | +- Any **IEnumerable** (or `seq`) can be traversed in JS as if it were an [Iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables). |
| 63 | +- **DateTime** compiles to JS `Date`. |
| 64 | +- **Regex** compiles to JS `RegExp`. |
| 65 | +- Mutable **dictionaries** (not F# maps) compile to [ES2015 Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map). |
| 66 | +- Mutable **hashsets** (not F# sets) compile to [ES2015 Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). |
| 67 | + |
| 68 | +> If the dictionary or hashset requires custom or structural equality, Fable will generate a custom type, but it will share the same properties as JS maps and sets. |
| 69 | +
|
| 70 | +- **Objects**: As seen above, only record fields and interface members will be attached to objects without name mangling. Take this into account when sending to or receiving an object from JS. |
| 71 | + |
| 72 | +```fsharp |
| 73 | +type MyRecord = |
| 74 | + { Value: int |
| 75 | + Add: int -> int -> int } |
| 76 | + member this.FiveTimes() = |
| 77 | + this.Value * 5 |
| 78 | +
|
| 79 | +type IMyInterface = |
| 80 | + abstract Square: unit -> float |
| 81 | +
|
| 82 | +type MyClass(value: float) = |
| 83 | + member __.Value = value |
| 84 | + interface IMyInterface with |
| 85 | + member __.Square() = value * value |
| 86 | +
|
| 87 | +let createRecord(value: int) = |
| 88 | + { Value = value |
| 89 | + Add = fun x y -> x + y } |
| 90 | +
|
| 91 | +let createClass(value: float) = |
| 92 | + MyClass(value) |
| 93 | +``` |
| 94 | + |
| 95 | +```js |
| 96 | +import { createRecord, createClass } from "./Tests.fs" |
| 97 | + |
| 98 | +var record = createRecord(2); |
| 99 | + |
| 100 | +// Ok, we're calling a record field |
| 101 | +record.Add(record.Value, 2); // 4 |
| 102 | + |
| 103 | +// Fails, this member is not actually attached to the object |
| 104 | +record.FiveTimes(); |
| 105 | + |
| 106 | +var myClass = createClass(5); |
| 107 | + |
| 108 | +// Fails |
| 109 | +myClass.Value; |
| 110 | + |
| 111 | +// Ok, this is an interface member |
| 112 | +myClass.Square(); // 25 |
| 113 | +``` |
| 114 | + |
| 115 | +## Functions: automatic uncurrying |
| 116 | + |
| 117 | +Fable will automatically uncurry functions in many situations: when they're passed as functions, when set as a record field... So in most cases you can pass them to and from JS as if they were functions without curried arguments. |
| 118 | + |
| 119 | +```fsharp |
| 120 | +let execute (f: int->int->int) x y = |
| 121 | + f x y |
| 122 | +``` |
| 123 | + |
| 124 | +```js |
| 125 | +import { execute } from "./TestFunctions.fs" |
| 126 | + |
| 127 | +execute(function (x, y) { return x * y }, 3, 5) // 15 |
| 128 | +``` |
| 129 | + |
| 130 | +> Check [this](https://fsharpforfunandprofit.com/posts/currying/) for more information on function currying in F# (and other functional languages). |
| 131 | +
|
| 132 | +### Using delegates for disambiguation |
| 133 | + |
| 134 | +There are some situations where Fable uncurrying mechanism can get confused, particularly with functions that return other functions. Let's consider the following example: |
| 135 | + |
| 136 | +```fsharp |
| 137 | +open Fable.Core.JsInterop |
| 138 | +
|
| 139 | +let myEffect() = |
| 140 | + printfn "Effect!" |
| 141 | + fun () -> printfn "Cleaning up" |
| 142 | +
|
| 143 | +// Method from a JS module, expects a function |
| 144 | +// that returns another function for disposing |
| 145 | +let useEffect (effect: unit -> (unit -> unit)): unit = |
| 146 | + importMember "my-js-module" |
| 147 | +
|
| 148 | +// Fails, Fable thinks this is a 2-arity function |
| 149 | +useEffect myEffect |
| 150 | +``` |
| 151 | + |
| 152 | +The problem here is the compiler cannot tell `unit -> unit -> unit` apart from `unit -> (unit -> unit)`, it can only see a 2-arity lambda (a function accepting two arguments). This won't be an issue if all your code is in F#, but if you're sending the function to JS as in this case, Fable will incorrectly try to uncurry it causing unexpected results. |
| 153 | + |
| 154 | +To disambiguate these cases, you can use [delegates](https://docs.microsoft.com/en-us/dotnet/fsharp/language-reference/delegates), like `System.Func` which are not curried: |
| 155 | + |
| 156 | +```fsharp |
| 157 | +open System |
| 158 | +
|
| 159 | +// Remove the ambiguity by using a delegate |
| 160 | +let useEffect (effect: Func<unit, (unit -> unit)>): unit = |
| 161 | + importMember "my-js-module" |
| 162 | +
|
| 163 | +// Works |
| 164 | +useEffect(Func<_,_> myEffect) |
| 165 | +``` |
| 166 | + |
| 167 | +## Call Fable source code from a JS file |
| 168 | + |
| 169 | +Webpack makes it very easy to include files in different programming languages in your project by using loaders. Because in a Fable project we assume you're already using the [fable-loader](https://www.npmjs.com/package/fable-loader), if you have a file like the following: |
| 170 | + |
| 171 | +```fsharp |
| 172 | +module HelloFable |
| 173 | +
|
| 174 | +let sayHelloFable() = "Hello Fable!" |
| 175 | +``` |
| 176 | + |
| 177 | +Importing and using it from JS is as simple as if it were another JS file: |
| 178 | + |
| 179 | +```js |
| 180 | +import { sayHelloFable } from "./HelloFable.fs" |
| 181 | + |
| 182 | +console.log(sayHelloFable()); |
| 183 | +``` |
| 184 | + |
| 185 | +### Importing Fable code from Typescript |
| 186 | + |
| 187 | +For better or worse, Typescript wants to check your imported modules and because it doesn't know a thing of F#, it will complain if you try to import an .fs file: |
| 188 | + |
| 189 | +```ts |
| 190 | +// Typescript will complain because it cannot read the file |
| 191 | +import { sayHelloFable } from "./HelloFable.fs" |
| 192 | +``` |
| 193 | + |
| 194 | +To appease the Typescript compiler, we need a [declaration file](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html), which also gives us the opportunity to tell Typescript what is actually exported by our Fable code. If you place a `HelloFable.d.ts` file like the following, the import above will work: |
| 195 | + |
| 196 | +```ts |
| 197 | +// Unfortunately declaration files don't accept relative paths |
| 198 | +// so we just use the * wildcard |
| 199 | +declare module "*HelloFable.fs" { |
| 200 | + function sayHelloFable(): string; |
| 201 | +} |
| 202 | +``` |
| 203 | + |
| 204 | +## Call Fable compiled code as a library |
| 205 | + |
| 206 | +### ..from your web app |
| 207 | + |
| 208 | +If your project is a web app and you're using Webpack, it just takes two lines of code in the Webpack configuration in the `output` section of `module.exports`: |
| 209 | + |
| 210 | +```js |
| 211 | +libraryTarget: 'var', |
| 212 | +library: 'MyFableLib' |
| 213 | +``` |
| 214 | + |
| 215 | +For instance: |
| 216 | + |
| 217 | +```js |
| 218 | + output: { |
| 219 | + path: path.join(__dirname, "./public"), |
| 220 | + filename: "bundle.js", |
| 221 | + libraryTarget: 'var', |
| 222 | + library: 'MyFableLib' |
| 223 | + }, |
| 224 | +``` |
| 225 | + |
| 226 | +This tells Webpack that we want our Fable code to be available from a global variable named `MyFableLib`. That's it! |
| 227 | + |
| 228 | +:::{note} |
| 229 | +Only the public functions and values in the **last file of the project** will be exposed. |
| 230 | +::: |
| 231 | + |
| 232 | +#### Let's try! |
| 233 | + |
| 234 | +Let's compile the HelloFable app from above with a webpack.config.js that includes the following: |
| 235 | + |
| 236 | +```js |
| 237 | +output: { |
| 238 | + ... |
| 239 | + libraryTarget: 'var', |
| 240 | + library: 'OMGFable' |
| 241 | +} |
| 242 | +``` |
| 243 | + |
| 244 | +Now let's try this directly in our `index.html` file: |
| 245 | + |
| 246 | +```html |
| 247 | +<body> |
| 248 | + <script src="bundle.js"></script> |
| 249 | + <script type="text/JavaScript"> |
| 250 | + alert( OMGFable.sayHelloFable() ); |
| 251 | + </script> |
| 252 | +</body> |
| 253 | +``` |
| 254 | + |
| 255 | +Et voilà! We're done! You can find a [full sample here](https://github.com/fable-compiler/fable2-samples/tree/master/interopFableFromJS). |
| 256 | + |
| 257 | +### ...from your Node.js app |
| 258 | + |
| 259 | +Basically it's the same thing. If you want to see a complete sample using a `commonjs` output instead of `var`, please [check this project](https://github.com/fable-compiler/fable2-samples/tree/master/nodejsbundle). There you'll see that we've added the following lines to the Webpack config: |
| 260 | + |
| 261 | +```js |
| 262 | + library:"app", |
| 263 | + libraryTarget: 'commonjs' |
| 264 | +``` |
| 265 | + |
| 266 | +and then you can call your code from JavaScript like this: |
| 267 | + |
| 268 | +```js |
| 269 | +let app = require("./App.js"); |
| 270 | +``` |
| 271 | + |
| 272 | +### Learn more about Webpack `libraryTarget` |
| 273 | + |
| 274 | +If you want to know what your options are, please consult the [official documentation](https://webpack.js.org/configuration/output/#outputlibrarytarget). |
0 commit comments