Skip to content

Commit

Permalink
docs: fix typo
Browse files Browse the repository at this point in the history
  • Loading branch information
AkaraChen committed Dec 23, 2022
1 parent 81f6f97 commit 06b707c
Show file tree
Hide file tree
Showing 5 changed files with 13 additions and 13 deletions.
10 changes: 5 additions & 5 deletions docs/components/defining.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ Define a Jwc component by creating a class that extends `JwcComponent` or a func
::: code-group

```tsx [Class Based]
@JwcComponent({ name: "app-element" })
@Component({ name: "app-element" })
export class App extends JwcComponent {
/* ... */
}
Expand All @@ -19,13 +19,13 @@ export class App extends JwcComponent {

## Class Based

The `@JwcComponent` decorator is used to define a Jwc component. It takes an object with the following properties:
The `@Component` decorator is used to define a Jwc component. It takes an object with the following properties:

- `name` - The name of the component. This is used to identify the component in the DOM. It must be unique.
- [`css`](./styles.md) - The CSS to be applied to the component. The CSS is applied to the shadow DOM of the component.
- `options` - The options to be passed to the component. Follows the ElementDefinitionOptions interface from the [Custom Elements API](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#Parameters).

I recommend you do not use JavaScript to define your component. Instead, use TypeScript. This will allow you to use the `@JwcComponent` decorator to define your component.
I recommend you do not use JavaScript to define your component. Instead, use TypeScript. This will allow you to use the `@Component` decorator to define your component.

But if you do use JavaScript or you want to define without using the decorator:

Expand All @@ -35,7 +35,7 @@ But if you do use JavaScript or you want to define without using the decorator:
/* ... */
}; // [!code ++]

@JwcComponent({ name: "app-element" /* ... */ }) // [!code --]
@Component({ name: "app-element" /* ... */ }) // [!code --]
export class App extends JwcComponent {
constructor() {
super();
Expand Down Expand Up @@ -65,7 +65,7 @@ export class App extends JwcComponent {
```

::: warning
Although you can define a component without using the `@JwcComponent` decorator, it is not recommended. We won't use that in our documentation.
Although you can define a component without using the `@Component` decorator, it is not recommended. We won't use that in our documentation.
:::


Expand Down
10 changes: 5 additions & 5 deletions docs/components/lifecycle.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ In class-based components, you can override these methods. In function-based com
The constructor is called when the component is created. This is where you can initialize the component.

```ts
@JwcComponent({ name: "app-element" })
@Component({ name: "app-element" })
export class App extends JwcComponent {
constructor() {
super();
Expand All @@ -37,7 +37,7 @@ Jwc will get the `options` property from the `@JwcComponent` decorator and pass
The connected callback is called when the component is added to the DOM.

```ts
@JwcComponent({ name: "app-element" })
@Component({ name: "app-element" })
export class App extends JwcComponent {
override connectedCallback() {
super.connectedCallback();
Expand All @@ -57,7 +57,7 @@ At last, Jwc will render the component in the `connectedCallback` method and app
The disconnected callback is called when the component is removed from the DOM.

```ts
@JwcComponent({ name: "app-element" })
@Component({ name: "app-element" })
export class App extends JwcComponent {
override disconnectedCallback() {
super.disconnectedCallback();
Expand All @@ -75,7 +75,7 @@ Jwc will remove the rendered result from the shadowRoot in the `disconnectedCall
The attribute changed callback is called when an attribute of the component is changed.

```ts
@JwcComponent({ name: "app-element" })
@Component({ name: "app-element" })
export class App extends JwcComponent {
override attributeChangedCallback(
name: string,
Expand All @@ -97,7 +97,7 @@ Jwc will update dom in the `attributeChangedCallback` method.
The adopted callback is called when the component is moved to a new document.

```ts
@JwcComponent({ name: "app-element" })
@Component({ name: "app-element" })
export class App extends JwcComponent {
override adoptedCallback() {
super.adoptedCallback();
Expand Down
2 changes: 1 addition & 1 deletion docs/components/reactive-properties.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Jwc components have reactive properties. These properties are automatically upda
::: code-group

```tsx [Class Based]
@JwcComponent({ name: "app-element" })
@Component({ name: "app-element" })
export class App extends JwcComponent {
@Prop() name: string = "World";
override render() {
Expand Down
2 changes: 1 addition & 1 deletion docs/components/rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ You have 2 choices for rendering a component:
::: code-group

```tsx [Class Based]
@JwcComponent({ name: "app-element" })
@Component({ name: "app-element" })
export class App extends JwcComponent {
/* ... */
override render() {
Expand Down
2 changes: 1 addition & 1 deletion docs/publish/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ When you define a web components, TypeScript doesn't know anything about it, all
## Define for TypeScript

```ts
@JwcComponent({ name: "app-element" })
@Component({ name: "app-element" })
export class App extends JwcComponent {
@Prop() name: string = "World";
override render() {
Expand Down

0 comments on commit 06b707c

Please sign in to comment.