You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Thats awesome! There are many ways you can contribute to the Feliz project:
4
+
5
+
1. 🏷️ Start by creating an issue of your planned changes. This allows us to discuss the changes before you start working on them and ensure that they are aligned with the project goals.
6
+
2. 🛠️ Fork the repository and create a new branch for your changes.
7
+
- Check out the section below to find the most important instructions for setting up your development environment.
8
+
3. ✨ Make your changes and ensure that you follow the coding style and conventions used in the project. (Styling should be automatically applied by Fantomas if you use VS Code with Ionide)
9
+
4. ✅ Write tests for your changes to ensure that they work as expected and do not introduce any regressions.
10
+
5. 📚 Document your changes!
11
+
- Every Feliz-.fsproj has a related "CHANGELOG" file. Add your changes following the instructions inside the file!
12
+
13
+
Please use the following base structure for your changelog entries:
Copy file name to clipboardExpand all lines: docs/docs/api-docs/Contributing.md
+3-81Lines changed: 3 additions & 81 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,89 +5,11 @@ sidebar_position: 10
5
5
6
6
# Contributing
7
7
8
-
If you are enjoying the Feliz project, consider contributing back and helping out with the community. There are many ways you can contribute, the first of which is to simply use Feliz in your project and report issues you come across whether there are missing style properties or properties that were incorrectly implemeneted.
8
+
**We need your help!** We actually do! Feliz is an open-source project and thrives thanks to the contributions from the community. Whether it's fixing bugs, adding new features, improving documentation, or suggesting ideas, we need your help to make Feliz even better.
9
9
10
-
# I want to contribute! What should i do?
10
+
Do not shy away from contributing just because you think you are "not experienced enough".
11
11
12
-
Thats awesome! There are many ways you can contribute to the Feliz project:
12
+
Check out the [CONTRIBUTING.md](https://github.com/fable-hub/Feliz/blob/master/CONTRIBUTING.md) file in the repository and get in contact with us via the issues ❤️!
13
13
14
-
1. 🏷️ Start by creating an issue of your planned changes. This allows us to discuss the changes before you start working on them and ensure that they are aligned with the project goals.
15
-
2. 🛠️ Fork the repository and create a new branch for your changes.
16
-
- Check out the section below to find the most important instructions for setting up your development environment.
17
-
3. ✨ Make your changes and ensure that you follow the coding style and conventions used in the project. (Styling should be automatically applied by Fantomas if you use VS Code with Ionide)
18
-
4. ✅ Write tests for your changes to ensure that they work as expected and do not introduce any regressions.
19
-
5. 📚 Document your changes!
20
-
- Every Feliz-.fsproj has a related "CHANGELOG" file. Add your changes following the instructions inside the file!
21
-
- Write/Update documentation under `./docs`!
22
-
6. 📄 Create a pull request with a clear description of your changes and the issue it addresses.
23
14
24
-
---
25
-
26
-
# Setting up your development environment
27
-
28
-
## Requirements
29
-
30
-
1.[.NET SDK 8.0 or later](https://dotnet.microsoft.com/en-us/download)
31
-
2.[Node.js 20 or later](https://nodejs.org/)
32
-
33
-
## Setup
34
-
35
-
1. Clone the repository
36
-
2. Install dependencies: `dotnet run --project ./build/Build.fsproj setup`.
37
-
38
-
<details>
39
-
40
-
<summary>Alternatively, you can manually install the dependencies:</summary>
41
-
42
-
- NPM dependencies:
43
-
44
-
```bash
45
-
npm install
46
-
```
47
-
48
-
- .NET dependencies:
49
-
50
-
```bash
51
-
dotnet restore
52
-
```
53
-
54
-
- .NET tools:
55
-
56
-
```bash
57
-
dotnet tool restore
58
-
```
59
-
60
-
</details>
61
-
62
-
3. Verify correct setup by running the tests `dotnet run --project ./build/Build.fsproj test`
63
-
4. Ready! 🎉
64
-
65
-
66
-
# Workflows
67
-
68
-
Feliz uses a f# build project to run common tasks such as testing. You can find the entrypoint for the build project under `./build/Build.fsproj`.
69
-
70
-
:::info
71
-
- **On Windows** you can also use `.\build.cmd` to run the build tasks instead of `dotnet run --project ./build/Build.fsproj`.
72
-
- **On MacOS/Linux** you can also use `./build.sh` to run the build tasks instead of `dotnet run --project ./build/Build.fsproj`.
In Feliz you can pass props to components in a similar way as you would in React with JSX. Props are simply function parameters that you define in your component function.
12
+
13
+
## Example
14
+
15
+
<ComponentRendercode={RawExample}defaultOpen>
16
+
<Example />
17
+
</ComponentRender>
18
+
19
+
## Passing Children
20
+
21
+
In JSX syntax you typically pass children between the opening and closing tags of a component.
22
+
23
+
```JSX
24
+
<MyButton onClick={handleClick}>
25
+
Click Me
26
+
</MyButton>
27
+
```
28
+
29
+
This behavior is mimicked in Feliz by defining a `children` parameter in your component function. You can then pass the children as an argument when calling the component.
30
+
31
+
```fsharp
32
+
[<ReactComponent(true)>]
33
+
let MyButton(children: ReactElement, onClick: unit -> unit, props: IReactProperty list) =
34
+
Html.button [
35
+
prop.style [
36
+
style.padding 10
37
+
style.backgroundColor.lightBlue
38
+
style.borderRadius 5
39
+
style.cursor.pointer
40
+
]
41
+
prop.onClick (fun _ -> onClick())
42
+
yield! props // same as `...props` in JSX. Can overwrite existing props
43
+
prop.children children
44
+
]
45
+
```
46
+
47
+
48
+
## Spreading props
49
+
50
+
You can also spread additional props using the `yield!` syntax inside the `prop` list. This allows you to pass any number of additional properties to the component, similar to the spread operator (`...props`) in JSX. Be aware that spreading props can overwrite existing props if there are conflicts.
51
+
52
+
::::info
53
+
54
+
When using prop spreading, be cautious as it can lead to unintended overwrites of existing props, which may cause unexpected behavior in your components.
55
+
56
+
In a list of properties, the last occurrence of a property takes precedence. Therefore, if you spread props after defining specific properties, the spread props can overwrite those specific properties.
57
+
58
+
:::danger
59
+
The exception to this rule is the `children` property. For children the first occurrence takes precedence.
60
+
:::
61
+
62
+
::::
63
+
64
+
65
+
:::tip
66
+
It is recommended to define most arguments explicitly for better type safety and clarity. Use spreading only when necessary.
67
+
:::
68
+
69
+
```fsharp
70
+
[<ReactComponent(true)>]
71
+
let MyButton(children: ReactElement, props: IReactProperty list) =
72
+
Html.button [
73
+
yield! props // same as `...props` in JSX. Can overwrite existing props
0 commit comments