Skip to content

Commit c0a6ab5

Browse files
committed
docs: fixed readme.md based on nutee's suggestions
1 parent 1f26f38 commit c0a6ab5

File tree

1 file changed

+23
-15
lines changed

1 file changed

+23
-15
lines changed

README.md

+23-15
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Lit Functional components
2-
Aims to provide a cool wrapper around lit-components. That's not a goal to introduce every React like syntax and feature.
2+
Lit Functional Components aims to provide a simple wrapper around Lit components, offering a streamlined development experience without introducing every React-like syntax and feature.
33

4-
## Install
4+
## Installation
55

66
### Yarn
77
`yarn add lit-functions`
@@ -12,10 +12,9 @@ Aims to provide a cool wrapper around lit-components. That's not a goal to intro
1212
## Usage
1313

1414
### Component and props
15-
`useProp` is like `useState` in React, but in Lit there are props and attributes only and there is no point to have a `useState` here. Instead let's define `lit` properties and whenever a property changes the component rerenders.
16-
The intellisense will figure out the type of the props from the `type`.
15+
The useProp function is similar to useState in React. In Lit, properties and attributes are used, eliminating the need for a separate useState. Instead, define Lit properties, and whenever a property changes, the component re-renders. The type of the properties is inferred from the type argument.
1716

18-
The `component` method will create the custom web component and the name is generated from the function name.
17+
The component function creates a custom web component, with the name generated from the function name.
1918

2019
```ts
2120
import { html, css } from "lit";
@@ -52,10 +51,10 @@ component(myElement, [style]);
5251

5352
```
5453

55-
### Lifecycle
54+
### Lifecycle Methods
5655

5756
#### onMount and onUnMount
58-
This is the `connectedCallback` and `disconnectedCallback`, these are high order functions.
57+
These functions correspond to connectedCallback and disconnectedCallback, respectively, and are high-order functions.
5958

6059
```ts
6160
function myElement({onMount, onUnMount}: Props) {
@@ -70,7 +69,7 @@ function myElement({onMount, onUnMount}: Props) {
7069
```
7170

7271
#### updated and attributeChangedCallback
73-
I did not change the method names.
72+
The method names remain the same for clarity.
7473

7574
```ts
7675
function myElement({updated, attributeChangedCallback}: Props) {
@@ -81,14 +80,14 @@ function myElement({updated, attributeChangedCallback}: Props) {
8180
```
8281

8382
#### meta
84-
If you need anything else from Lit, you have the `meta` property that exposes the created lit instance.
83+
If you need direct access to the Lit instance, use the `meta` property.
8584

8685
```ts
8786
function myElement({meta}: { meta: LitElement }) {}
8887
```
8988

90-
### Handling events
91-
You can manage events with the `dispatchEvent` from the props. It dispatches an event on the current `lit-element`.
89+
### Handling Events
90+
Manage events with `dispatchEvent` from the `props`, which dispatches an event on the current Lit element.
9291

9392
```ts
9493
import { html, css } from "lit";
@@ -115,8 +114,7 @@ component(myElement, [style]);
115114
```
116115

117116
## Contributing
118-
119-
Add some test and document what you've done. That's it :D
117+
To contribute, add tests and document your changes. That's it! 😄
120118

121119
### Install
122120

@@ -126,10 +124,20 @@ Add `"private": true` to the package.json to support `yarn workspaces`.
126124

127125
### Start
128126

129-
You can try out ur changes with the command `yarn start:app:ts` or you can test how it works with js either `yarn start:app:js`. Before runninf the JS app, do not forget to create a new version locally with `yarn build && yarn pack` command.
127+
Test your changes with the command:
128+
129+
`yarn start:app:ts`
130+
131+
Or test how it works with JavaScript:
132+
133+
`yarn start:app:js`
134+
135+
Before running the JavaScript app, create a new version locally with:
136+
137+
`yarn build && yarn pack`
130138

131139
### Test
132140

133-
It uses `vitest` and `jsdom` for now.
141+
We use vitest and jsdom for testing.
134142

135143
`yarn test:unit`

0 commit comments

Comments
 (0)