feat: add framework events (#6)

* feat: add reactive event types

* feat: add react events

* feat: add vue2 & vue3 events

* feat: add svelte events

* feat: add angular events

* demo: fix demos

* skip: apply review

config/update-type-consts.js

@@ -0,0 +1,58 @@
+const ts = require("typescript");
+const path = require("path");
+const { writeFileSync } = require("fs");
+
+// Make it static const according to the type.
+const staticConsts = [
+  "ANGULAR_CONVEYER_EVENTS",
+];
+const paths = [
+  path.resolve(__dirname, "../packages/ngx-conveyer/projects/ngx-conveyer/src/public-api.ts"),
+]
+
+const program = ts.createProgram(paths, {
+  target: ts.ScriptTarget.ES5,
+  module: ts.ModuleKind.CommonJS
+});
+
+let checker = program.getTypeChecker();
+let replacers = [];
+
+function visit(node) {
+  if (node.kind === ts.SyntaxKind.FirstStatement) {
+    node.declarationList.declarations.forEach(subNode => visit(subNode));
+  }
+  if (node.kind === ts.SyntaxKind.VariableDeclaration) {
+    const symbol = checker.getSymbolAtLocation(node.name);
+
+    if (staticConsts.indexOf(symbol.escapedName) > -1) {
+      const constTypes = checker.typeToString(checker.getTypeOfSymbolAtLocation(symbol, symbol.valueDeclaration));
+      const expression = node.initializer.expression;
+
+      replacers.push({
+        range: [expression.pos, expression.end],
+        text: ` ${constTypes}`,
+      });
+    }
+  }
+}
+
+// Visit every sourceFile in the program
+for (const sourceFile of program.getSourceFiles()) {
+  if (sourceFile.isDeclarationFile) {
+    continue;
+  }
+  replacers = [];
+  ts.forEachChild(sourceFile, visit);
+
+  let source = sourceFile.text;
+  replacers.sort((a, b) => {
+    return b.range[0] - a.range[0];
+  });
+  replacers.forEach(({ range, text }) => {
+    source = `${source.substring(0, range[0])}${text}${source.substring(range[1])}`;
+  });
+  if (replacers.length) {
+    writeFileSync(sourceFile.fileName, source, { encoding: "utf8" });
+  }
+}

demo/docs/listen-to-events.mdx

@@ -10,22 +10,26 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+Conveyer has scroll related [events](api/Conveyer#events).
+
+You can refer to the documentation and use it according to each framework.
+
 <Tabs
   groupId="cfc"
   defaultValue="js"
   values={[
     { label: "JavaScript", value: "js" },
-    {/* { label: "React", value: "react" },
+    { label: "React", value: "react" },
     { label: "Vue@2", value: "vue2" },
     { label: "Vue@3", value: "vue" },
     { label: "Angular", value: "angular" },
-    { label: "Svelte", value: "svelte" } */}
+    { label: "Svelte", value: "svelte" }
   ]}>
   <TabItem value="js">
 
 You can listen to Conveyer's events with [Conveyer#on](api/Conveyer#on)
 
-Since events occur during initialization, set [autoInit(api/ConveyerOptions) to false if you want to register events.
+Since events occur during initialization, set [autoInit](api/ConveyerOptions) to false if you want to register events.
 
 ```js
 import Conveyer from "@egjs/conveyer";
@@ -54,11 +58,14 @@ import { useConveyer } from "@egjs/react-conveyer";
 
 export default () => {
   const ref = useRef();
-  const { scrollIntoView, onBeginScroll } = useConveyer(ref);
+  const {
+    scrollIntoView,
+    onBeginScroll,
+  } = useConveyer(ref);
 
   onBeginScroll(() => {
     console.log("begin scroll");
-  });
+  }, []);
 
   return <div className="container">
     <div className="buttons">
@@ -112,34 +119,38 @@ import { useConveyer } from "@egjs/vue-conveyer";
 
 export default {
   setup() {
-      const { ref, scrollIntoView, onBeginScroll } = useConveyer({
-        horizontal: false,
-      });
+    const {
+      ref,
+      scrollIntoView,
+      // events
+      onBeginScroll,
+    } = useConveyer({
+      horizontal: false,
+    });
 
-      onBeginScroll(() => {
-        console.log("begin scroll");
-      });
+    onBeginScroll(() => {
+      console.log("begin scroll");
+    });
 
-      return {
-        ref,
-        scrollIntoView,
-      };
+    return {
+      ref,
+      scrollIntoView,
+  };
+  },
+  methods: {
+    prev() {
+      this.scrollIntoView("start", {
+        align: "end",
+        duration: 500,
+      });
     },
-    methods: {
-      prev() {
-        this.scrollIntoView("start", {
-          align: "end",
-          duration: 500,
-        });
-      },
-      next() {
-        this.scrollIntoView("end", {
-          align: "start",
-          duration: 500,
-        });
-      },
+    next() {
+      this.scrollIntoView("end", {
+        align: "start",
+        duration: 500,
+      });
     },
-  });
+  },
 };
 ```
   </TabItem>
@@ -166,33 +177,38 @@ import { useConveyer } from "@egjs/vue2-conveyer";
 
 export default {
   setup() {
-      const { ref, scrollIntoView, onBeginScroll } = useConveyer({
-        horizontal: false,
-      });
+    const {
+      ref,
+      scrollIntoView,
+      // events
+      onBeginScroll,
+    } = useConveyer({
+      horizontal: false,
+    });
 
-      onBeginScroll(() => {
-        console.log("begin scroll");
+    onBeginScroll(() => {
+      console.log("begin scroll");
+    });
+
+    return {
+      ref,
+      scrollIntoView,
+  };
+  },
+  methods: {
+    prev() {
+      this.scrollIntoView("start", {
+        align: "end",
+        duration: 500,
       });
-      return {
-        ref,
-        scrollIntoView,
-      };
     },
-    methods: {
-      prev() {
-        this.scrollIntoView("start", {
-          align: "end",
-          duration: 500,
-        });
-      },
-      next() {
-        this.scrollIntoView("end", {
-          align: "start",
-          duration: 500,
-        });
-      },
+    next() {
+      this.scrollIntoView("end", {
+        align: "start",
+        duration: 500,
+      });
     },
-  });
+  },
 };
 ```
   </TabItem>
@@ -210,7 +226,7 @@ You can listen events of the `ngx-conveyer` using Angular's [event binding](http
   <button id="next" (click)="next()">next</button>
   <div
     class="items"
-    NgxConveyer
+    ngxConveyer
     (beginScroll)="onBeginScroll"
     #conveyer="ngxConveyer"
     >
@@ -233,13 +249,13 @@ You can listen events of the `ngx-conveyer` using Angular's [event binding](http
 ```js title="app.component.ts"
 import { Component, Input, AfterViewInit } from '@angular/core';
 
-import { NgxConveyerComponent } from 'ngx-conveyer';
+import { NgxConveyerDirective } from 'ngx-conveyer';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
 })
 export class AppComponent implements AfterViewInit {
-  @ViewChild("conveyer") conveyer!: NgxConveyerComponent;
+  @ViewChild("conveyer") conveyer!: NgxConveyerDirective;
   onBeginScroll() {
     console.log("begin scroll");
   }
@@ -267,7 +283,12 @@ All events are prefixed with `on-`, and `camelCase`d.
 <script lang="ts">
   import { useConveyer } from "@egjs/svelte-conveyer";
 
-  const { ref, scrollIntoView, onBeginScroll } = useConveyer();
+  const {
+    ref,
+    scrollIntoView,
+    // events
+    onBeginScroll,
+  } = useConveyer();
 
   onBeginScroll(() => {
     console.log("begin scroll");

demo/docs/quick-start.mdx

@@ -160,7 +160,7 @@ export class AppModule { } /* Your app */
 ```
 
 ```html title="app.component.html"
-<div class="items" NgxConveyer #conveyer="ngxConveyer">
+<div class="items" [ngxConveyer]="{ horizontal: true }" #conveyer="ngxConveyer">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>

demo/docs/subscribe-to-reactive-properties.mdx

@@ -128,11 +128,11 @@ See [Component Interaction](https://angular.io/guide/component-interaction#paren
 
 ```html title="app.component.html"
 <div class="container">
-  <button id="prev" [disabled]="conveyer.isReachStart">prev</button>
-  <button id="next" [disabled]="conveyer.isReachEnd">next</button>
+  <button id="prev" [disabled]="conveyer?.isReachStart">prev</button>
+  <button id="next" [disabled]="conveyer?.isReachEnd">next</button>
   <div
     class="items"
-    NgxConveyer
+    ngxConveyer
     #conveyer="ngxConveyer"
     >
     <div class="item"><a href="#1">1</a></div>

demo/docs/use-the-methods.mdx

@@ -181,7 +181,7 @@ See [Component Interaction](https://angular.io/guide/component-interaction#paren
   <button id="next" (click)="next()">next</button>
   <div
     class="items"
-    NgxConveyer
+    ngxConveyer
     #conveyer="ngxConveyer"
     >
     <div class="item"><a href="#1">1</a></div>
@@ -203,13 +203,13 @@ See [Component Interaction](https://angular.io/guide/component-interaction#paren
 ```js title="app.component.ts"
 import { Component, Input, AfterViewInit } from '@angular/core';
 
-import { NgxConveyerComponent } from 'ngx-conveyer';
+import { NgxConveyerDirective } from 'ngx-conveyer';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
 })
 export class AppComponent implements AfterViewInit {
-  @ViewChild("conveyer") conveyer!: NgxConveyerComponent;
+  @ViewChild("conveyer") conveyer!: NgxConveyerDirective;
   prev() {
     this.conveyer.scrollIntoView("start", {
       align: "end",

demo/docusaurus.config.js

@@ -80,18 +80,18 @@ module.exports = {
               label: 'Docs',
               to: 'docs/'
             },
-            // {
-            //   label: 'API',
-            //   to: 'docs/api/conveyer'
-            // },
+            {
+              label: 'API',
+              to: 'docs/api/conveyer'
+            },
           ]
         },
         {
-          title: 'Demo',
+          title: 'Examples',
           items: [
             {
-              label: 'Demos',
-              to: "https://naver.github.io/egjs-conveyer/storybook",
+              label: 'Examples',
+              to: "docs/examples/HorizontalScroll",
             },
           ]
         },

package.json

@@ -14,10 +14,11 @@
 		"docs:build": "jsdoc-to-mdx -c ./jsdoc-to-mdx.json",
 		"docs:version": "node ./config/docs-version-up",
 		"docs:release": "npm run docs:build && npm run docs:version && cd demo && npm run build && cd ..",
-		"packages:update-dist": "npm run build && pvu --distUpdate=react-conveyer,vue-conveyer,vue2-conveyer,svelte-conveyer,ngx-conveyer/projects/ngx-conveyer --distPaths=declaration,dist && npm run packages:update-demo-dist",
-		"packages:update-demo-dist": "pvu --distUpdate=demo --path=./ --distPaths=declaration,dist",
+    "update-angular-consts": "node ./config/update-type-consts.js",
+		"packages:update-dist": "npm run build && pvu --distUpdate=react-conveyer,vue-conveyer,vue2-conveyer,svelte-conveyer,ngx-conveyer/projects/ngx-conveyer --distPaths=declaration,dist && npm run update-angular-consts",
+		"packages:update-demo-dist": "npm run build && pvu --distUpdate=demo --path=./ --distPaths=declaration,dist",
 		"packages": "npm run packages:update && npm run packages:build && npm run packages:publish",
-		"packages:update": "pvu --update=react-conveyer,vue-conveyer,vue2-conveyer,svelte-conveyer,ngx-conveyer/projects/ngx-conveyer",
+		"packages:update": "pvu --update=react-conveyer,vue-conveyer,vue2-conveyer,svelte-conveyer,ngx-conveyer/projects/ngx-conveyer && npm run update-angular-consts",
 		"packages:build": "pvu --build=react-conveyer,vue-conveyer,vue2-conveyer,svelte-conveyer,ngx-conveyer",
 		"packages:publish": "pvu --publish=react-conveyer,vue-conveyer,vue2-conveyer,svelte-conveyer,ngx-conveyer/dist/ngx-conveyer",
 		"test": "karma start",