From 06b707caeaa84c05c87afa0ae6bf5dca6f1d16c0 Mon Sep 17 00:00:00 2001
From: AkaraChen <85140972+AkaraChen@users.noreply.github.com>
Date: Fri, 23 Dec 2022 10:35:29 +0800
Subject: [PATCH] docs: fix typo

---
 docs/components/defining.md            | 10 +++++-----
 docs/components/lifecycle.md           | 10 +++++-----
 docs/components/reactive-properties.md |  2 +-
 docs/components/rendering.md           |  2 +-
 docs/publish/typescript.md             |  2 +-
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/components/defining.md b/docs/components/defining.md
index e542100..eb2c4b5 100644
--- a/docs/components/defining.md
+++ b/docs/components/defining.md
@@ -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 {
   /* ... */
 }
@@ -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:
 
@@ -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();
@@ -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.
 :::
 
 
diff --git a/docs/components/lifecycle.md b/docs/components/lifecycle.md
index 85692dd..bb5c376 100644
--- a/docs/components/lifecycle.md
+++ b/docs/components/lifecycle.md
@@ -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();
@@ -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();
@@ -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();
@@ -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,
@@ -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();
diff --git a/docs/components/reactive-properties.md b/docs/components/reactive-properties.md
index f482bfc..fd70043 100644
--- a/docs/components/reactive-properties.md
+++ b/docs/components/reactive-properties.md
@@ -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() {
diff --git a/docs/components/rendering.md b/docs/components/rendering.md
index df3d8b1..af15045 100644
--- a/docs/components/rendering.md
+++ b/docs/components/rendering.md
@@ -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() {
diff --git a/docs/publish/typescript.md b/docs/publish/typescript.md
index 303f203..2b5c4b8 100644
--- a/docs/publish/typescript.md
+++ b/docs/publish/typescript.md
@@ -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() {