Skip to content

Commit f0aa6f3

Browse files
committed
Generate docs (test)
1 parent c617d53 commit f0aa6f3

File tree

97 files changed

+36886
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

97 files changed

+36886
-0
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,3 +135,5 @@ build
135135

136136
.idea/
137137
src/**/*.py
138+
139+
.ionide/

docs/_images/notebooks_2_0.png

111 KB
Loading

docs/_panels_static/panels-main.c949a650a448cc0ae9fd3441c0e17fb0.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
:root {
2+
--tabs-color-label-active: hsla(231, 99%, 66%, 1);
3+
--tabs-color-label-inactive: rgba(178, 206, 245, 0.62);
4+
--tabs-color-overline: rgb(207, 236, 238);
5+
--tabs-color-underline: rgb(207, 236, 238);
6+
--tabs-size-label: 1rem;
7+
}
Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,274 @@
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

Comments
 (0)