Skip to content

Commit e99b385

Browse files
FreymaurerFreymaurer
committed
fix tests and add Changelog files
1 parent eed2325 commit e99b385

12 files changed

Lines changed: 321 additions & 27 deletions

File tree

‎src/Feliz.CompilerPlugins/CHANGELOG.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [Unreleased]
9+
10+
### Added
11+
12+
- `[<ReactLazyComponent>]` attribute
13+
14+
### Changed
15+
16+
- Make `[<ReactComponent>]` transpile arguments to JavaScript object instead of `any` for better typescript support
17+
18+
## 2.2.0 - 2023-03-21
19+
20+
### Added
21+
22+
- Last release before start of Changelog
23+

‎src/Feliz/CHANGELOG.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [Unreleased]
9+
10+
### Added
11+
12+
- Feliz.JSX module
13+
- Test suit
14+
15+
### Changed
16+
17+
- Make React hooks align closer to React API
18+
- Change React.lazy' API (see docs)
19+
20+
## 2.9.0 - 2024-10-26
21+
22+
### Added
23+
24+
- Last release before start of Changelog
25+

‎src/Feliz/React.fs‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,50 +5,71 @@ open Fable.Core
55
open Fable.Core.JsInterop
66
open Browser.Types
77

8+
module internal ReactInternal =
9+
10+
[<Import("createElement","react")>]
11+
let createElementWithChildren(``type``: ReactNode, props: obj, [<ParamArray>] children: seq<ReactElement>): ReactElement = jsNative
12+
13+
[<Import("createElement","react")>]
14+
let createElementWithChild(``type``: ReactNode, props: obj, children: ReactElement): ReactElement = jsNative
15+
16+
[<Import("createElement","react")>]
17+
let createElementWithProps(``type``: ReactNode, props: obj): ReactElement = jsNative
18+
19+
[<Import("createElement","react")>]
20+
let createElement(``type``: ReactNode): ReactElement = jsNative
21+
22+
23+
open ReactInternal
24+
825
[<Erase>]
926
type ReactLegacy =
1027

1128
static member inline createElement(``type``: string, props: obj, children: seq<ReactElement>): ReactElement =
12-
(import "createElement" "react")(``type``, props, children)
29+
createElementWithChildren(!^``type``, props, children)
1330

1431
static member inline createElement(``type``: string, props: obj, children: ReactElement): ReactElement =
15-
(import "createElement" "react")(``type``, props, children = children)
32+
createElementWithChild(!^``type``, props, children)
1633

1734
static member inline createElement(``type``: string, children: seq<ReactElement>): ReactElement =
18-
(import "createElement" "react")(``type``, null, children = children)
35+
createElementWithChildren(!^``type``, null, children)
1936

2037
static member inline createElement(``type``: string, children: ReactElement): ReactElement =
21-
(import "createElement" "react")(``type``, null, children = children)
38+
createElementWithChild(!^``type``, null, children)
2239

2340
static member inline createElement(``type``: string, props: obj): ReactElement =
24-
(import "createElement" "react")(``type``, props)
41+
createElementWithProps(!^``type``, props)
2542

2643
static member inline createElement(``type``: ReactElement, props: obj, children: seq<ReactElement>): ReactElement =
27-
(import "createElement" "react")(``type``, props, children = children)
44+
createElementWithChildren(!^``type``, props, children)
2845
static member inline createElement(``type``: ReactElement, props: obj, children: ReactElement): ReactElement =
29-
(import "createElement" "react")(``type``, props, children = children)
46+
createElementWithChild(!^``type``, props, children)
3047

3148
static member inline createElement(``type``: ReactElement, children: seq<ReactElement>): ReactElement =
32-
(import "createElement" "react")(``type``, null, children = children)
49+
createElementWithChildren(!^``type``, null, children)
3350
static member inline createElement(``type``: ReactElement, children: ReactElement): ReactElement =
34-
(import "createElement" "react")(``type``, null, children = children)
51+
createElementWithChild(!^``type``, null, children)
3552

3653
static member inline createElement(``type``: ReactElement, props: obj): ReactElement =
37-
(import "createElement" "react")(``type``, props)
54+
createElementWithProps(!^``type``, props)
3855

3956
static member inline createElement(``type``: ReactNode, props: obj, children: seq<ReactElement>): ReactElement =
40-
(import "createElement" "react")(``type``, props, children = children)
57+
createElementWithChildren(``type``, props, children)
58+
4159
static member inline createElement(``type``: ReactNode, props: obj, children: ReactElement): ReactElement =
42-
(import "createElement" "react")(``type``, props, children = children)
60+
createElementWithChild(``type``, props, children)
4361

4462
static member inline createElement(``type``: ReactNode, children: seq<ReactElement>): ReactElement =
45-
(import "createElement" "react")(``type``, null, children = children)
63+
createElementWithChildren(``type``, null, children)
4664

4765
static member inline createElement(``type``: ReactNode, children: ReactElement): ReactElement =
48-
(import "createElement" "react")(``type``, null, children = children)
66+
createElementWithChild(``type``, null, children)
4967

5068
static member inline createElement(``type``: ReactNode, props: obj): ReactElement =
51-
(import "createElement" "react")(``type``, props)
69+
createElementWithProps(``type``, props)
70+
71+
static member inline createElement(``type``: ReactNode): ReactElement =
72+
createElement(``type``)
5273

5374

5475
[<ImportMember("react")>]
@@ -506,7 +527,7 @@ useLayoutEffect(() => {
506527
/// <param name='children'>The elements that will be rendered with additional
507528
/// checks and warnings.</param>
508529
static member StrictMode (children: seq<ReactElement>) : ReactElement =
509-
ReactLegacy.createElement(unbox<ReactNode> (import "StrictMode" "react"), children = children)
530+
ReactLegacy.createElement(unbox<ReactNode> (import "StrictMode" "react"), children)
510531

511532
/// <summary>
512533
/// Lets you define a component that is loaded dynamically. Which helps with code splitting.

‎src/Vitest.JestDom/CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [Unreleased]
9+
10+
### Added
11+
12+
- Create core bindings for `@testing-library/jest-dom` and `jsdom`

‎src/Vitest.ReactTestingLibrary/CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [Unreleased]
9+
10+
### Added
11+
12+
- Create core bindings for `@testing-library/react`

‎src/Vitest.UserEvent/CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [Unreleased]
9+
10+
### Added
11+
12+
- Create core bindings for `@testing-library/user-event`

‎src/Vitest/CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Changelog
2+
3+
All notable changes to this project will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7+
8+
## [Unreleased]
9+
10+
### Added
11+
12+
- Create core bindings for `vitest`

‎tests/Feliz/Basic.fs‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
module Tests.Basic
2+
3+
open Fable.Core
4+
open Feliz
5+
6+
7+
[<Erase; Mangle(false)>]
8+
type Components =
9+
10+
[<JSX.Component>]
11+
static member DivWithClassesAndChildren() =
12+
Html.div [
13+
prop.className "simple-div"
14+
prop.style [ style.backgroundColor "lightblue" ]
15+
prop.id "simpleDiv"
16+
prop.testId "simpleDiv"
17+
prop.onClick (fun _ -> Browser.Dom.console.log("Div clicked!"))
18+
prop.children [
19+
Html.h1 "Hello, World!"
20+
Html.p "This is a simple div component."
21+
]
22+
]
23+
24+
[<JSX.Component>]
25+
static member ConditionalHtmlNode(show: bool) =
26+
Html.div [
27+
if show then
28+
Html.h1 [
29+
prop.testId "conditional"
30+
prop.text "Hello, World!"
31+
]
32+
Html.p [
33+
prop.text "This is a simple div component."
34+
]
35+
]
36+
37+
38+
[<JSX.Component>]
39+
static member DisplayConditionalHtmlNodeTrue() =
40+
Html.div [
41+
Components.ConditionalHtmlNode(true)
42+
]
43+
44+
[<JSX.Component>]
45+
static member DisplayConditionalHtmlNodeFalse() =
46+
Html.div [
47+
Components.ConditionalHtmlNode(false)
48+
]
49+
50+
[<JSX.Component>]
51+
static member ComponentWithSubcomponent() =
52+
Html.div [
53+
prop.id "simpleDiv"
54+
prop.testId "simpleDiv"
55+
prop.children [
56+
Html.h1 "Hello, World!"
57+
Html.p "This is a simple div component."
58+
Components.DivWithClassesAndChildren()
59+
]
60+
]
61+
62+
[<JSX.Component>]
63+
static member ComponentWithArgs(idBase: string, initCount: int, ?text: string, ?onClick: unit -> unit) =
64+
let count, setCount = React.useStateWithUpdater(initCount)
65+
let text = defaultArg text "Default Text"
66+
let onClick = defaultArg onClick (fun () -> ())
67+
Html.div [
68+
prop.id (idBase + "simpleDiv")
69+
prop.testId (idBase + "simpleDiv")
70+
prop.children [
71+
Html.h1 text
72+
Html.button [
73+
prop.text "Increment"
74+
prop.onClick (fun _ ->
75+
setCount(fun c -> c + 1)
76+
onClick())
77+
]
78+
Html.p $"Count: {count}"
79+
]
80+
]
81+
82+
[<JSX.Component>]
83+
static member DisplayComponentWithArgs() =
84+
Html.div [
85+
Components.ComponentWithArgs("no_optional", 0)
86+
Components.ComponentWithArgs("with_optional", 0, text = "Hello, World!", onClick = fun () -> Browser.Dom.console.log("Button clicked!"))
87+
]
88+
89+
[<JSX.Component>]
90+
static member SVGElement() =
91+
Svg.svg [
92+
svg.viewBox (0, 0, 100, 100)
93+
svg.children [
94+
Svg.circle [
95+
svg.cx 50
96+
svg.cy 50
97+
svg.r 40
98+
svg.fill "red"
99+
]
100+
]
101+
]
102+
103+
/// ```fsharp
104+
/// // This is allowed:
105+
/// static member inline transform (transforms: seq<ITransformProperty>) =
106+
/// transforms
107+
/// |> unbox<seq<string>>
108+
/// |> Seq.map (fun transform -> transform.Replace("px", "").Replace("deg", ""))
109+
/// |> String.concat " "
110+
/// |> Interop.svgAttribute "transform"
111+
/// ```
112+
///
113+
/// ```fsharp
114+
/// // This fails:
115+
/// static member inline transform (transforms: seq<ITransformProperty>) =
116+
/// let removedUnits =
117+
/// transforms
118+
/// |> unbox<seq<string>>
119+
/// |> Seq.map (fun transform -> transform.Replace("px", "").Replace("deg", ""))
120+
/// |> String.concat " "
121+
///
122+
/// Interop.svgAttribute "transform" removedUnits
123+
/// ```
124+
///
125+
[<JSX.Component>]
126+
static member NestedSVGElement() =
127+
Svg.svg [
128+
Svg.g [
129+
svg.testId "test-combined-translate"
130+
svg.transform [
131+
transform.translateX 1
132+
transform.translateY 2
133+
transform.translateZ (length.px 3)
134+
transform.translate(11, 22)
135+
transform.translate3D(111, 222, 333)
136+
]
137+
]
138+
]
139+
140+
// [<JSX.Component>]
141+
// static member ConditionalProperty(?condition: bool) =
142+
// Html.div [
143+
// if condition.IsSome && condition.Value then
144+
// prop.className "conditional-class"
145+
// prop.onClick (fun _ -> Browser.Dom.console.log("Div clicked!"))
146+
// prop.children [
147+
// Html.div "Hello, World!"
148+
// ]
149+
// ]

‎tests/Feliz/Basic.test.fs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module Tests.BasicTests
2+
3+
open Fable.Core
4+
open Fable.Core.JsInterop
5+
open Feliz
6+
open Browser
7+
open Fable.Core
8+
open Vitest
9+
open Basic
10+
11+
describe "Basic Tests" <| fun _ ->
12+
13+
test "Html elements can be rendered" <| fun _ ->
14+
RTL.render(
15+
Components.DivWithClassesAndChildren()
16+
) |> ignore
17+
18+
let div = RTL.screen.getByTestId "simpleDiv"
19+
20+
expect(div).toBeInTheDocument()

‎tests/Feliz/EnsureJSX.fs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ module Tests.EnsureJSX
22

33
open Fable.Core
44
open Feliz
5+
open Feliz.JSX
56

67
[<Erase; Mangle(false)>]
78
type Components =

0 commit comments

Comments
 (0)