You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
3
+
Sometimes, we'd like to use the power of Fable in our Python apps. For instance, to call some handy F# code from our new
4
+
Python function or even call some powerful json parsing into our Python app.
5
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.
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 Python?
7
+
First you need to understand a bit how the generated Python code looks like so you can call it correctly.
7
8
8
-
> Remember you can use the [Fable REPL](https://fable.io/repl/) to easily check the generated JS for your F# code!
9
+
> Remember you can use the [Fable REPL](https://fable.io/repl/) to easily check the generated Python for your F# code!
10
+
> Just switch to Python on the options panel.
9
11
10
12
## Name mangling
11
13
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:
14
+
Because Python doesn't support overloading or multiple modules in a single file, Fable needs to mangle the name of some
15
+
members to avoid clashes, which makes it difficult to call such functions or values from Python. However, there're some
16
+
cases where Fable guarantees names won't change in order to improve interop:
13
17
14
18
- Record fields
15
19
- Interface and abstract members
16
20
- Functions and values in the root module
17
21
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.
22
+
What's a root module? Because F# accepts multiple modules in the same file, we consider the root module the first one
23
+
containing actual members and is not nested by any other.
19
24
20
25
```fsharp
21
26
// It doesn't matter if we have a long namespace, Fable only starts
@@ -30,7 +35,8 @@ module Nested =
30
35
let add (x: int) (y: int) = x * y
31
36
```
32
37
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:
38
+
In F# it's possible to have more than one root module in a single file, in that case everything will be mangled. You
39
+
should avoid this pattern if you want to expose code to Python:
34
40
35
41
```fsharp
36
42
namespace SharedNamespace
@@ -48,26 +54,35 @@ module Bar =
48
54
49
55
In some cases, it's possible to change the default behavior towards name mangling:
50
56
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.
57
+
- If you want to have all members attached to a class (as in standard Python classes) and not-mangled use the
58
+
`AttachMembers` attribute. But be aware **overloads won't work** in this case.
59
+
- If you are not planning to use an interface to interact with Python and want to have overloaded members, you can
60
+
decorate the interface declaration with the `Mangle` attribute. Note: Interfaces coming from .NET BCL (like
61
+
System.Collections.IEnumerator) are mangled by default.
53
62
54
63
## Common types and objects
55
64
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:
65
+
Some F#/.NET types have [counterparts in Python](../dotnet/compatibility.md). Fable takes advantage of this to compile
66
+
to native types that are more performant and reduce bundle size. You can also use this to improve interop when
67
+
exchanging data between F# and Python. The most important common types are:
57
68
58
69
-**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.
70
+
-**Chars** are compiled as Python strings of length 1. This is mainly because string indexing in Python gives you
71
+
another string. But you can use a char as a number with an explicit conversion like `int16 '家'`.
72
+
-**Numeric types** compile to Python integers, except for `long`, `decimal` and `bigint`.
73
+
-**Arrays** (and `ResizeArray`) compile to Python lists. _Numeric arrays_ compile to [array](https://docs.python.org/3/library/array.html) in most
74
+
situations, though this shouldn't make a difference for most common operations like indexing, iterating or mapping.
75
+
- Any **IEnumerable** (or `seq`) can be traversed in Python as if it were an [Iterable](https://docs.python.org/3/library/collections.abc.html#collections.abc.Iterable).
76
+
-**DateTime** compiles to Python `datetime`.
77
+
-**Regex** compiles to Python `re`.
78
+
- Mutable **dictionaries** (not F# maps) compile to Python dictionaries.
79
+
- Mutable **hashsets** (not F# sets) compile to a custom HashSet type.
80
+
81
+
> If the dictionary or hashset requires custom or structural equality, Fable will generate a custom type, but it will
82
+
> share the same properties as JS maps and sets.
83
+
84
+
-**Objects**: As seen above, only record fields and interface members will be attached to objects without name
85
+
mangling. Take this into account when sending to or receiving an object from Python.
71
86
72
87
```fsharp
73
88
type MyRecord =
@@ -92,49 +107,52 @@ let createClass(value: float) =
// Fails, this member is not actually attached to the object
104
-
record.FiveTimes();
118
+
# Fails, this member is not actually attached to the object
119
+
record.FiveTimes()
105
120
106
-
var myClass =createClass(5);
121
+
var myClass =create_class(5)
107
122
108
-
// Fails
109
-
myClass.Value;
123
+
# Fails
124
+
myClass.Value
110
125
111
-
// Ok, this is an interface member
112
-
myClass.Square(); // 25
126
+
# Ok, this is an interface member
127
+
myClass.Square()# 25
113
128
```
114
129
115
130
## Functions: automatic uncurrying
116
131
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.
132
+
Fable will automatically uncurry functions in many situations: when they're passed as functions, when set as a record
133
+
field... So in most cases you can pass them to and from Python as if they were functions without curried arguments.
> Check [this](https://fsharpforfunandprofit.com/posts/currying/) for more information on function currying in F# (and other functional languages).
146
+
> Check [this](https://fsharpforfunandprofit.com/posts/currying/) for more information on function currying in F# (and
147
+
> other functional languages).
131
148
132
149
### Using delegates for disambiguation
133
150
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:
151
+
There are some situations where Fable uncurrying mechanism can get confused, particularly with functions that return
152
+
other functions. Let's consider the following example:
135
153
136
154
```fsharp
137
-
open Fable.Core.JsInterop
155
+
open Fable.Core.PyInterop
138
156
139
157
let myEffect() =
140
158
printfn "Effect!"
@@ -149,9 +167,13 @@ let useEffect (effect: unit -> (unit -> unit)): unit =
149
167
useEffect myEffect
150
168
```
151
169
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.
170
+
The problem here is the compiler cannot tell `unit -> unit -> unit` apart from `unit -> (unit -> unit)`, it can only see
171
+
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
172
+
sending the function to JS as in this case, Fable will incorrectly try to uncurry it causing unexpected results.
153
173
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:
174
+
To disambiguate these cases, you can use
175
+
[delegates](https://docs.microsoft.com/en-us/dotnet/fsharp/language-reference/delegates), like `System.Func` which are
176
+
not curried:
155
177
156
178
```fsharp
157
179
open System
@@ -162,113 +184,4 @@ let useEffect (effect: Func<unit, (unit -> unit)>): unit =
162
184
163
185
// Works
164
186
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:
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
-
<scriptsrc="bundle.js"></script>
249
-
<scripttype="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