Skip to content

Commit 24419b2

Browse files
Copilotgoswinr
andauthored
Add JS Pojo documentation
Agent-Logs-Url: https://github.com/goswinr/fable-compiler.github.io/sessions/503643fb-da74-4411-b4e6-797450c8df20 Co-authored-by: goswinr <884885+goswinr@users.noreply.github.com>
1 parent e45bdc8 commit 24419b2

1 file changed

Lines changed: 45 additions & 2 deletions

File tree

docs/docs/javascript/features.md

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -687,7 +687,9 @@ export const user = {
687687

688688
Fable offers several ways to work with POJOs.
689689

690-
The recommended way to work with POJOs is to use `[<ParamObject>]` as they are the closest to normal F# classes. But we will explore all the potential options, from the simplest to the more verbose.
690+
The recommended way to work with POJOs is to use `[<JS.Pojo>]` when you can target Fable 5 or newer. For older Fable versions, or for methods where only some arguments should be grouped into an options object, use `[<ParamObject>]`.
691+
692+
We will explore all the potential options, from the simplest to the more verbose.
691693

692694
### Anonymous records
693695

@@ -792,13 +794,54 @@ export const user = {
792794
};
793795
```
794796

797+
### `[<JS.Pojo>]`
798+
799+
<p class="tag is-info is-medium">
800+
Added in v5.0.0
801+
</p>
802+
803+
`JS.Pojo` is the simplest way to write class-based POJO bindings when targeting Fable 5 or newer.
804+
805+
It lets you define an F# class that is created as a plain JavaScript object, without combining `[<Global>]`, `[<ParamObject>]` and `[<Emit("$0")>]`.
806+
807+
```fs
808+
open Fable.Core
809+
810+
[<AllowNullLiteral>]
811+
[<JS.Pojo>]
812+
type Options
813+
(
814+
searchTerm: string,
815+
?isCaseSensitive: bool
816+
) =
817+
member val searchTerm: string = jsNative with get, set
818+
member val isCaseSensitive: bool option = jsNative with get, set
819+
820+
let options1 = new Options("foo")
821+
822+
let options2 = new Options("foo", isCaseSensitive = true)
823+
```
824+
825+
generates
826+
827+
```js
828+
export const options1 = {
829+
searchTerm: "foo",
830+
};
831+
832+
export const options2 = {
833+
searchTerm: "foo",
834+
isCaseSensitive: true,
835+
};
836+
```
837+
795838
### `[<ParamObject>]`
796839

797840
<p class="tag is-info is-medium">
798841
Added in v3.4.0
799842
</p>
800843

801-
`ParamObject` allows the most native F# experience when working with POJOs.
844+
`ParamObject` allows a native F# experience when working with POJOs, and is the pre-Fable 5 way to define class-based POJO bindings.
802845

803846
It also has the benefit of supporting other ways of creating POJOs, allowing consumer of your code to use the method they prefer.
804847

0 commit comments

Comments
 (0)