chore: update demo script

lerna.json

@@ -17,6 +17,9 @@
       }
     ],
     "beforeReleaseScripts": [
+      "npm run packages:build",
+      "npm run demo:build",
+      "npm run demo:deploy"
     ]
   }
 }

packages/docs/versioned_docs/version-1.6.1/api/CONVEYER_METHODS.mdx

@@ -0,0 +1,14 @@
+---
+custom_edit_url: null
+---
+
+```ts
+const CONVEYER_METHODS
+```
+
+<div>
+
+</div>
+
+<p>egjs-conveyer<br />Copyright (c) 2022-present NAVER Corp.<br />MIT license</p>
+

packages/docs/versioned_docs/version-1.6.1/api/Component.mdx

@@ -0,0 +1,211 @@
+---
+custom_edit_url: null
+---
+
+```ts
+class Component
+```
+
+<div>
+
+</div>
+
+<p>A class used to manage events in a component</p>
+
+<div className="container">
+  <div className="row mb-2"><div className="col col--6"><strong>Properties</strong></div><div className="col col--6"><strong>Methods</strong></div></div>
+  <div className="row"><div className="col col--6"><a href="#VERSION">VERSION</a><span className="badge badge--info margin-left--sm">static</span></div><div className="col col--6"><a href="#trigger">trigger</a><br/><a href="#once">once</a><br/><a href="#hasOn">hasOn</a><br/><a href="#on">on</a><br/><a href="#off">off</a></div></div>
+</div>
+
+## Properties
+### VERSION {#VERSION}
+
+<div>
+  <span className="badge badge--info">static</span>
+</div>
+
+<p>Version info string</p>
+
+**Type**: string
+
+Component.VERSION;  // ex) 3.0.0
+
+## Methods
+
+### trigger {#trigger}
+
+<div>
+
+</div>
+
+<p>Trigger a custom event.</p>
+
+**Returns**: this
+- <p>An instance of the component itself</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|event|string \| ComponentEvent|||<p>The name of the custom event to be triggered or an instance of the ComponentEvent</p>|
+|params|Array&lt;any&gt; \| $ts:...|||<p>Event data to be sent when triggering a custom event </p>|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  beforeHi: ComponentEvent<{ foo: number; bar: string }>;
+  hi: { foo: { a: number; b: boolean } };
+  someEvent: (foo: number, bar: string) => void;
+  someOtherEvent: void; // When there's no event argument
+}> {
+  some(){
+    if(this.trigger("beforeHi")){ // When event call to stop return false.
+      this.trigger("hi");// fire hi event.
+    }
+  }
+}
+
+const some = new Some();
+some.on("beforeHi", e => {
+  if(condition){
+    e.stop(); // When event call to stop, `hi` event not call.
+  }
+  // `currentTarget` is component instance.
+  console.log(some === e.currentTarget); // true
+
+  typeof e.foo; // number
+  typeof e.bar; // string
+});
+some.on("hi", e => {
+  typeof e.foo.b; // boolean
+});
+// If you want to more know event design. You can see article.
+// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
+```
+
+### once {#once}
+
+<div>
+
+</div>
+
+<p>Executed event just one time.</p>
+
+**Returns**: this
+- <p>An instance of the component itself</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string \| $ts:...|||<p>The name of the event to be attached or an event name - event handler mapped object.</p>|
+|handlerToAttach|function \| $ts:...|✔️||<p>The handler function of the event to be attached </p>|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  hi: ComponentEvent;
+}> {
+  hi() {
+    alert("hi");
+  }
+  thing() {
+    this.once("hi", this.hi);
+  }
+}
+
+var some = new Some();
+some.thing();
+some.trigger(new ComponentEvent("hi"));
+// fire alert("hi");
+some.trigger(new ComponentEvent("hi"));
+// Nothing happens
+```
+
+### hasOn {#hasOn}
+
+<div>
+
+</div>
+
+<p>Checks whether an event has been attached to a component.</p>
+
+**Returns**: boolean
+- <p>Indicates whether the event is attached. </p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string|||<p>The name of the event to be attached </p>|
+
+```ts
+import Component from "@egjs/component";
+
+class Some extends Component<{
+  hi: void;
+}> {
+  some() {
+    this.hasOn("hi");// check hi event.
+  }
+}
+```
+
+### on {#on}
+
+<div>
+
+</div>
+
+<p>Attaches an event to a component.</p>
+
+**Returns**: this
+- <p>An instance of a component itself</p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string \| $ts:...|||<p>The name of the event to be attached or an event name - event handler mapped object.</p>|
+|handlerToAttach|function \| $ts:...|✔️||<p>The handler function of the event to be attached </p>|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  hi: void;
+}> {
+  hi() {
+    console.log("hi");
+  }
+  some() {
+    this.on("hi",this.hi); //attach event
+  }
+}
+```
+
+### off {#off}
+
+<div>
+
+</div>
+
+<p>Detaches an event from the component.<br/>If the <code>eventName</code> is not given this will detach all event handlers attached.<br/>If the <code>handlerToDetach</code> is not given, this will detach all event handlers for <code>eventName</code>.</p>
+
+**Returns**: this
+- <p>An instance of a component itself </p>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|eventName|string \| $ts:...|✔️||<p>The name of the event to be detached </p>|
+|handlerToDetach|function \| $ts:...|✔️||<p>The handler function of the event to be detached </p>|
+
+```ts
+import Component, { ComponentEvent } from "@egjs/component";
+
+class Some extends Component<{
+  hi: void;
+}> {
+  hi() {
+    console.log("hi");
+  }
+  some() {
+    this.off("hi",this.hi); //detach event
+  }
+}
+```
+