Skip to content

Commit 5f070b1

Browse files
jkone27jkone27
authored
Merge pull request #4 from jkone27/add-component
Add component
2 parents 307d614 + 2af3cac commit 5f070b1

File tree

6 files changed

+139
-123
lines changed

6 files changed

+139
-123
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"dev": "vite",
88
"build": "vite build",
99
"preview": "vite preview",
10-
"test": "vitest run"
10+
"test": "vitest run --environment jsdom"
1111
},
1212
"dependencies": {
1313
"solid-js": "^1.9.5"

‎src/App.fs‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ let viteLogo: string = importDefault "./assets/vite.svg"
1010
let solidLogo: string = importDefault "./assets/solid.svg"
1111

1212

13+
let Counter() : JSX.Element = import "Counter" "./components/Counter.fs"
14+
15+
1316
[<JSX.Component>]
1417
let App() =
1518
let count, setCount = Solid.createSignal(0)
@@ -51,22 +54,7 @@ let App() =
5154
]
5255
]
5356
Html.h1 "Vite + Solid + Feliz"
54-
Html.div [
55-
Attr.className "card"
56-
Html.children [
57-
Html.button [
58-
Ev.onClick (fun _ -> setCount (count() + 1))
59-
Html.children [
60-
Html.text $"count is {count()}"
61-
]
62-
]
63-
Html.div [
64-
Html.text "Edit "
65-
Html.code "src/App.fs"
66-
Html.text " and save to test HMR"
67-
]
68-
]
69-
]
57+
Counter()
7058
Html.p [
7159
Attr.className "read-the-docs"
7260
Html.children [

‎src/App.fsproj‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
</PropertyGroup>
77

88
<ItemGroup>
9+
<Compile Include="./components/Counter.fs" />
910
<Compile Include="App.fs" />
11+
<Compile Include="Testing.fs" />
1012
<Compile Include="App.test.fs" />
1113
<Compile Include="Index.fs" />
1214
</ItemGroup>

‎src/App.test.fs‎

Lines changed: 1 addition & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,7 @@
11
namespace App
22

3-
open Fable.Core.JsInterop
43
open Fable.Core
5-
open Feliz.JSX.Solid
6-
7-
// https://vitest.dev/config/#environment
8-
// https://docs.solidjs.com/guides/testing
9-
// https://github.com/fable-compiler/Feliz.JSX
10-
// https://fable.io/blog/2022/2022-10-18-fable-solid.html
11-
// https://github.com/fable-compiler/Fable.Solid
12-
13-
// IMPORTANT! https://fable.io/docs/javascript/features.html
14-
15-
// as inspiration for types: https://github.com/Shmew/Fable.Jester/blob/master/src/Fable.Jester/Expect.fs
16-
17-
module Dom =
18-
open Fable.Core.JsInterop
19-
open Fable.Core
20-
21-
type IRenderResult =
22-
abstract getByText: string -> obj
23-
abstract getByRole: string -> obj
24-
25-
type DomEvent = {
26-
click: obj -> unit
27-
}
28-
29-
[<Import("render", from = "@solidjs/testing-library")>]
30-
let render (fableComponent: obj) : IRenderResult = jsNative
31-
32-
[<Import("cleanup", from = "@solidjs/testing-library")>]
33-
let cleanup(): unit = jsNative
34-
35-
[<Import("screen", from = "@solidjs/testing-library")>]
36-
let screen: IRenderResult = jsNative
37-
38-
[<Import("fireEvent", from = "@solidjs/testing-library")>]
39-
let fireEvent: DomEvent = jsNative
40-
41-
// for each Fable import try to match JS signature and try create
42-
// correct types based on original typescript definitions but as F# types e.g. record types
43-
44-
module Vi =
45-
type IMatcherResult =
46-
abstract toBe: obj -> unit
47-
abstract toEqual: obj -> unit
48-
abstract toMatchObject: obj -> unit
49-
abstract toHaveBeenCalled: unit -> unit
50-
abstract toHaveBeenCalledWith: obj -> unit
51-
abstract toHaveBeenCalledTimes: int -> unit
52-
abstract toBeInTheDocument: unit -> unit
53-
abstract toHaveTextContent: string -> unit
54-
abstract toHaveClass: string -> unit
55-
abstract toHaveStyle: string -> unit
56-
abstract toHaveAttribute: string -> unit
57-
abstract toHaveProperty: string -> unit
58-
abstract toHaveValue: string -> unit
59-
abstract toHaveFocus: unit -> unit
60-
abstract toHaveFormValues: obj -> unit
61-
abstract toHaveLength: int -> unit
62-
abstract toBeDisabled: unit -> unit
63-
abstract toBeEnabled: unit -> unit
64-
abstract toBeVisible: unit -> unit
65-
abstract toBeEmpty: unit -> unit
66-
abstract toBeChecked: unit -> unit
67-
abstract toBeSelected: unit -> unit
68-
abstract toBeTruthy: unit -> unit
69-
abstract toBeFalsy: unit -> unit
70-
abstract toBeNull: unit -> unit
71-
abstract toBeUndefined: unit -> unit
72-
abstract toBeNaN: unit -> unit
73-
abstract toBeGreaterThan: obj -> unit
74-
abstract toBeLessThan: obj -> unit
75-
abstract toBeGreaterThanOrEqual: obj -> unit
76-
abstract toBeLessThanOrEqual: obj -> unit
77-
abstract toBeCloseTo: obj -> unit
78-
79-
[<Import("expect", from = "vitest")>]
80-
let expect(value: obj): IMatcherResult = jsNative
81-
82-
[<Import("toBeInTheDocument", from = "@testing-library/jest-dom/matchers")>]
83-
let toBeInTheDocument: obj = jsNative
84-
85-
// Extension method for expect
86-
[<Emit("$0.toBeInTheDocument()")>]
87-
let inline expectToBeInTheDocument (value: obj): obj = jsNative
88-
89-
[<Import("beforeEach", from = "vitest")>]
90-
let beforeEach(test: unit -> unit) = jsNative
91-
92-
[<Import("afterEach", from = "vitest")>]
93-
let afterEach(test: unit -> unit) = jsNative
94-
95-
[<Import("beforeAll", from = "vitest")>]
96-
let beforeAll(test: unit -> unit) = jsNative
97-
98-
[<Import("afterAll", from = "vitest")>]
99-
let afterAll(test: unit -> unit) = jsNative
100-
101-
[<Import("it", from = "vitest")>]
102-
let it(name: string, test: unit -> unit) = jsNative
103-
104-
[<Import("test", from = "vitest")>]
105-
let test(name: string, test: unit -> unit) = jsNative
106-
107-
[<Import("describe", from = "vitest")>]
108-
let describe(name: string, testSuite: unit -> unit) = jsNative
109-
4+
open Testing
1105

1116
module Test =
1127

‎src/Testing.fs‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
namespace Testing
2+
3+
open Fable.Core
4+
5+
// https://vitest.dev/config/#environment
6+
// https://docs.solidjs.com/guides/testing
7+
// https://github.com/fable-compiler/Feliz.JSX
8+
// https://fable.io/blog/2022/2022-10-18-fable-solid.html
9+
// https://github.com/fable-compiler/Fable.Solid
10+
11+
// IMPORTANT! https://fable.io/docs/javascript/features.html
12+
13+
// as inspiration for types: https://github.com/Shmew/Fable.Jester/blob/master/src/Fable.Jester/Expect.fs
14+
15+
module Dom =
16+
17+
type IRenderResult =
18+
abstract getByText: string -> obj
19+
abstract getByRole: string -> obj
20+
21+
type DomEvent = {
22+
click: obj -> unit
23+
}
24+
25+
[<Import("render", from = "@solidjs/testing-library")>]
26+
let render (fableComponent: obj) : IRenderResult = jsNative
27+
28+
[<Import("cleanup", from = "@solidjs/testing-library")>]
29+
let cleanup(): unit = jsNative
30+
31+
[<Import("screen", from = "@solidjs/testing-library")>]
32+
let screen: IRenderResult = jsNative
33+
34+
[<Import("fireEvent", from = "@solidjs/testing-library")>]
35+
let fireEvent: DomEvent = jsNative
36+
37+
// for each Fable import try to match JS signature and try create
38+
// correct types based on original typescript definitions but as F# types e.g. record types
39+
40+
module Vi =
41+
type IMatcherResult =
42+
abstract toBe: obj -> unit
43+
abstract toEqual: obj -> unit
44+
abstract toMatchObject: obj -> unit
45+
abstract toHaveBeenCalled: unit -> unit
46+
abstract toHaveBeenCalledWith: obj -> unit
47+
abstract toHaveBeenCalledTimes: int -> unit
48+
abstract toBeInTheDocument: unit -> unit
49+
abstract toHaveTextContent: string -> unit
50+
abstract toHaveClass: string -> unit
51+
abstract toHaveStyle: string -> unit
52+
abstract toHaveAttribute: string -> unit
53+
abstract toHaveProperty: string -> unit
54+
abstract toHaveValue: string -> unit
55+
abstract toHaveFocus: unit -> unit
56+
abstract toHaveFormValues: obj -> unit
57+
abstract toHaveLength: int -> unit
58+
abstract toBeDisabled: unit -> unit
59+
abstract toBeEnabled: unit -> unit
60+
abstract toBeVisible: unit -> unit
61+
abstract toBeEmpty: unit -> unit
62+
abstract toBeChecked: unit -> unit
63+
abstract toBeSelected: unit -> unit
64+
abstract toBeTruthy: unit -> unit
65+
abstract toBeFalsy: unit -> unit
66+
abstract toBeNull: unit -> unit
67+
abstract toBeUndefined: unit -> unit
68+
abstract toBeNaN: unit -> unit
69+
abstract toBeGreaterThan: obj -> unit
70+
abstract toBeLessThan: obj -> unit
71+
abstract toBeGreaterThanOrEqual: obj -> unit
72+
abstract toBeLessThanOrEqual: obj -> unit
73+
abstract toBeCloseTo: obj -> unit
74+
75+
[<Import("expect", from = "vitest")>]
76+
let expect(value: obj): IMatcherResult = jsNative
77+
78+
[<Import("toBeInTheDocument", from = "@testing-library/jest-dom/matchers")>]
79+
let toBeInTheDocument: obj = jsNative
80+
81+
// Extension method for expect
82+
[<Emit("$0.toBeInTheDocument()")>]
83+
let inline expectToBeInTheDocument (value: obj): obj = jsNative
84+
85+
[<Import("beforeEach", from = "vitest")>]
86+
let beforeEach(test: unit -> unit) = jsNative
87+
88+
[<Import("afterEach", from = "vitest")>]
89+
let afterEach(test: unit -> unit) = jsNative
90+
91+
[<Import("beforeAll", from = "vitest")>]
92+
let beforeAll(test: unit -> unit) = jsNative
93+
94+
[<Import("afterAll", from = "vitest")>]
95+
let afterAll(test: unit -> unit) = jsNative
96+
97+
[<Import("it", from = "vitest")>]
98+
let it(name: string, test: unit -> unit) = jsNative
99+
100+
[<Import("test", from = "vitest")>]
101+
let test(name: string, test: unit -> unit) = jsNative
102+
103+
[<Import("describe", from = "vitest")>]
104+
let describe(name: string, testSuite: unit -> unit) = jsNative

‎src/components/Counter.fs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
module Componenents
2+
3+
open Feliz.JSX.Solid
4+
open Fable.Core.JsInterop
5+
open Fable.Core
6+
7+
[<JSX.Component>]
8+
let Counter() =
9+
let count, setCount = Solid.createSignal(0)
10+
11+
Html.div [
12+
Attr.className "card"
13+
Html.children [
14+
Html.h2 "I am a counter from: Counter.fs"
15+
Html.button [
16+
Ev.onClick (fun _ -> setCount (count() + 1))
17+
Html.children [
18+
Html.text $"count is {count()}"
19+
]
20+
]
21+
Html.div [
22+
Html.text "Edit "
23+
Html.code "src/components/Counter.fs"
24+
Html.text " and save to test HMR"
25+
]
26+
]
27+
]

0 commit comments

Comments
 (0)