Skip to content

Commit 6ae6428

Browse files
author
Maxime Mangel
committed
Save WIP
1 parent da75b83 commit 6ae6428

File tree

15 files changed

+807
-128
lines changed

15 files changed

+807
-128
lines changed

‎docs/docs/2-steps/setup.md‎

Lines changed: 3 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,41 +3,6 @@ title: Setup
33
layout: standard
44
---
55

6-
## Prerequisites
7-
8-
In order to use Fable you will need the following tools:
9-
10-
:::warning
11-
Fable 3, currently has trouble with .NET 7.
12-
13-
If you have .NET 7 installed on your system, you will need to add a `global.json` file to your project to ensure .NET 6 is used.
14-
15-
*Example:*
16-
17-
`{
18-
"sdk": {
19-
"version": "6.0.0",
20-
"rollForward": "latestMinor"
21-
}
22-
}
23-
`
24-
25-
You can also give a try to [Fable 4](https://fable.io/blog/2022/2022-09-28-fable-4-theta.html), as it already has .NET 7 support.
26-
:::
27-
28-
- [.NET Core SDK](https://dotnet.microsoft.com/) to work with F# files and dependencies
29-
- [Node.js](https://nodejs.org/) to execute JS code
30-
- A JS package manager, like [npm](https://www.npmjs.com/) (which comes with Node) or [yarn](https://yarnpkg.com/)
31-
32-
Having the above tools, you may consider using [Femto](https://fable.io/blog/2019/2019-06-29-Introducing-Femto.html) to ease package management.
33-
34-
## Development tools
35-
36-
Basically you will need an editor that lets you code in F# with features like hints on hover, autocomplete, syntax highlighting and so on... and there are many of them to suit your code styling!
37-
38-
- [Visual Studio Code](https://code.visualstudio.com/) with [Ionide](http://ionide.io/)
39-
- [JetBrains Rider](https://www.jetbrains.com/rider/)
40-
- [Visual Studio For Windows](https://visualstudio.microsoft.com/)
41-
- [Visual Studio For Mac](https://visualstudio.microsoft.com/vs/mac/)
42-
- [Vim](https://www.vim.org/) with [F# bindings](https://github.com/fsharp/vim-fsharp)
43-
- [Emacs](https://www.gnu.org/software/emacs/)/[spacemacs](http://spacemacs.org/) with [fsharp-mode](https://github.com/fsharp/emacs-fsharp-mode)
6+
<script type="text/javascript">
7+
window.location.href = "/docs/getting-started/setup.html";
8+
</script>

‎docs/docs/2-steps/your-first-fable-project.md‎

Lines changed: 7 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -3,84 +3,11 @@ title: Start a new project
33
layout: standard
44
---
55

6-
This guide you will show you how to create a Fable project from an F# project.
7-
8-
<ul class="textual-steps">
9-
10-
<li>
11-
12-
Create a new directory for your project and navigate to it.
13-
14-
```bash
15-
mkdir my-fable-project
16-
cd my-fable-project
17-
```
18-
19-
</li>
20-
21-
<li>
22-
23-
Create a new F# project.
24-
25-
```bash
26-
dotnet new console -lang F#
27-
```
28-
29-
You should now have 2 files:
30-
31-
- `Program.fs`: the entry point of your app
32-
- `my-fable-project.fsproj`: the project file which lists your F# code files and libraries
33-
34-
</li>
35-
36-
<li>
37-
38-
Install Fable tool so we can invoke it from the command line.
39-
40-
```bash
41-
dotnet new tool-manifest
42-
dotnet tool install fable
43-
```
44-
45-
</li>
46-
47-
<li>
48-
49-
Add [Fable.Core](https://fable.io/packages/#/package/Fable.Core) to your project.
50-
51-
```bash
52-
dotnet add package Fable.Core
53-
```
54-
55-
</li>
56-
57-
58-
<li>
59-
60-
We can now call Fable to transpile our F# code to the desired target.
61-
62-
```bash
63-
# If you want to transpile to JavaScript
64-
dotnet fable
65-
66-
# If you want to transpile to TypeScript
67-
dotnet fable --lang typescript
68-
69-
# If you want to transpile to Python
70-
dotnet fable --lang python
71-
```
72-
:::info
73-
If you are switching between languages make sure to delete the `fable_modules` folder before invoking Fable again.
74-
:::
75-
76-
You should now see a file `Program.fs.<ext>` where `<ext>` is the target language extension. For example, if you transpiled to JavaScript, you should see a `Program.fs.js` file.
77-
78-
You can now use this file as you would use any other native file in your project.
79-
80-
To go further look into the respective target documentation to have an example of how to use the generated file:
81-
82-
- [JavaScript](/docs/javascript/quickstart.html)
83-
84-
</li>
6+
---
7+
title: Setup
8+
layout: standard
9+
---
8510

86-
</ul>
11+
<script type="text/javascript">
12+
window.location.href = "/docs/getting-started/your-first-fable-project.html";
13+
</script>

‎docs/docs/getting-started/Rust.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Rust
3+
layout: standard
4+
---
5+
6+
:::info
7+
This section is under construction.
8+
:::

‎docs/docs/getting-started/dart.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Dart
3+
layout: standard
4+
---
5+
6+
:::info
7+
This section is under construction.
8+
:::

docs/docs/javascript/quickstart.md renamed to docs/docs/getting-started/javascript.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
---
2-
title: Quickstart
2+
title: JavaScript
33
layout: standard
44
---
55

6+
This section is specific to JavaScript targetting, it will guide you through the process of setting up your project and using Fable with JavaScript.
7+
8+
We will cover the basics of using Node.js and [Vite](https://vitejs.dev/) for the browser, but you can use any tools you want.
9+
610
## Node.js
711

812
:::info

‎docs/docs/getting-started/php.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: PHP
3+
layout: standard
4+
---
5+
6+
:::info
7+
This section is under construction.
8+
:::

‎docs/docs/getting-started/python.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: TypeScript
3+
layout: standard
4+
---
5+
6+
:::info
7+
This section is under construction.
8+
:::

‎docs/docs/getting-started/setup.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Setup
3+
layout: standard
4+
---
5+
6+
## Prerequisites
7+
8+
In order to use Fable you will need the following tools:
9+
10+
:::warning
11+
Fable 3 only support up to .NET 6.
12+
13+
If you have .NET 7 installed on your system, you will need to add a `global.json` file to your project to ensure .NET 6 is used.
14+
15+
*Example:*
16+
17+
`{
18+
"sdk": {
19+
"version": "6.0.0",
20+
"rollForward": "latestMinor"
21+
}
22+
}
23+
`
24+
:::
25+
26+
- [.NET Core SDK](https://dotnet.microsoft.com/) to work with F# files and dependencies
27+
- [Node.js](https://nodejs.org/) to execute JS code
28+
- A JS package manager, like [npm](https://www.npmjs.com/) (which comes with Node) or [yarn](https://yarnpkg.com/)
29+
30+
Having the above tools, you may consider using [Femto](https://fable.io/blog/2019/2019-06-29-Introducing-Femto.html) to ease package management.
31+
32+
## Development tools
33+
34+
Basically you will need an editor that lets you code in F# with features like hints on hover, autocomplete, syntax highlighting and so on... and there are many of them to suit your code styling!
35+
36+
- [Visual Studio Code](https://code.visualstudio.com/) with [Ionide](http://ionide.io/)
37+
- [JetBrains Rider](https://www.jetbrains.com/rider/)
38+
- [Visual Studio For Windows](https://visualstudio.microsoft.com/)
39+
- [Visual Studio For Mac](https://visualstudio.microsoft.com/vs/mac/)
40+
- [Vim](https://www.vim.org/) with [F# bindings](https://github.com/fsharp/vim-fsharp)
41+
- [Emacs](https://www.gnu.org/software/emacs/)/[spacemacs](http://spacemacs.org/) with [fsharp-mode](https://github.com/fsharp/emacs-fsharp-mode)

‎docs/docs/getting-started/typescript.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: TypeScript
3+
layout: standard
4+
---
5+
6+
:::info
7+
This section is under construction.
8+
:::

‎docs/docs/getting-started/your-first-fable-project.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: Start a new project
3+
layout: standard
4+
---
5+
6+
This guide you will show you how to create a Fable project from an F# project.
7+
8+
<ul class="textual-steps">
9+
10+
<li>
11+
12+
Create a new directory for your project and navigate to it.
13+
14+
```bash
15+
mkdir my-fable-project
16+
cd my-fable-project
17+
```
18+
19+
</li>
20+
21+
<li>
22+
23+
Create a new F# project.
24+
25+
```bash
26+
dotnet new console -lang F#
27+
```
28+
29+
You should now have 2 files:
30+
31+
- `Program.fs`: the entry point of your app
32+
- `my-fable-project.fsproj`: the project file which lists your F# code files and libraries
33+
34+
</li>
35+
36+
<li>
37+
38+
Install Fable tool so we can invoke it from the command line.
39+
40+
```bash
41+
dotnet new tool-manifest
42+
dotnet tool install fable
43+
```
44+
45+
</li>
46+
47+
<li>
48+
49+
Add [Fable.Core](https://fable.io/packages/#/package/Fable.Core) to your project.
50+
51+
```bash
52+
dotnet add package Fable.Core
53+
```
54+
55+
</li>
56+
57+
58+
<li>
59+
60+
We can now call Fable to transpile our F# code to the desired target.
61+
62+
```bash
63+
# If you want to transpile to JavaScript
64+
dotnet fable
65+
66+
# If you want to transpile to TypeScript
67+
dotnet fable --lang typescript
68+
69+
# If you want to transpile to Python
70+
dotnet fable --lang python
71+
```
72+
:::info
73+
If you are switching between languages make sure to delete the `fable_modules` folder before invoking Fable again.
74+
:::
75+
76+
You should now see a file `Program.fs.<ext>` where `<ext>` is the target language extension. For example, if you transpiled to JavaScript, you should see a `Program.fs.js` file.
77+
78+
You can now use this file as you would use any other native file in your project.
79+
80+
To go further look into the respective target documentation to have an example of how to use the generated file:
81+
82+
- [JavaScript](/docs/getting-started/javascript.html)
83+
<!-- - [TypeScript](/docs/getting-started/typescript.html)
84+
- [Dart](/docs/getting-started/dart.html)
85+
- [Python](/docs/getting-started/python.html)
86+
- [Rust](/docs/getting-started/rust.html)
87+
- [PHP](/docs/getting-started/php.html) -->
88+
89+
</li>
90+
91+
</ul>

0 commit comments

Comments
 (0)