Docs/reactive api (#927)

* chore: rename variable in test

* fix: delete named export in vue, vue3 index.umd.ts

* chore: improve core-package-link script

* docs: update reactive api docs

* fix: add setMethods config

* chore: vue demo

* chore: vue3 demo

* chore: update package-lock.json

* fix: fix error in demo

* docs: add reactive api jsdoc

* docs: move reactive api demo to demo tab.

* docs: add slide over, cover flow demo

* docs: translate korean to english

* chore: fix js demo

* chore: remove reactive tab in docusaurus

* docs: replace interface tag with typedef tag in jsdoc

* fix: add options param to connectFlickingReactiveAPI

* feat: add option param to frame work reactive api

* docs: add link to option in explanation

* refactor: add FlickingReactiveAPIOptions interface

* feat: set default value to isReachEnd

* docs: fix some explanation

Author: cjw783

core-packages-link.js

@@ -3,36 +3,73 @@
 /**
  * 프레임워크 컴포넌트를 디버깅할 때 코어 바닐라 로직을 수정하면서 확인할 필요가 있을 때,
  * 이 스크립트를 이용하면 바닐라 로직 수정사항이 프레임워크 컴포넌트 로컬 데모환경에도 반영된다.
- * 
+ * 다만, 바닐라 로직 수정 이후 리액트 데모에 핫 모듈 리로딩까지는 되지 않는다. 
+ * 따라서 수정 사항들을 추가적으로 반영해주려면 바닐라를 다시 빌드해야 한다. 링크는 다시 하지 않아도 된다.
+ *
  * 인자로 프레임워크 컴포넌트 패키지의 루트 디렉토리를 제공하면 된다.
+ * 인자를 제공하지 않으면 packages 하위의 전체 프레임워크 패키지에 대해 링크를 시도한다.
  *
  * 사용 예시: node core-package-link.js react-flicking
+ * 
+ * 
+ * 개발 흐름: 
+ * 1. 이 스크립트를 실행
+ * 2. 바닐라 로직 수정 후 빌드 수행
+ * 3. 프레임워크 컴포넌트의 데모를 실행 (바닐라 로직 변경사항이 반영됨)
+ * 4. 바닐라 로직 추가 수정 후 빌드 수행
+ * 5. 프레임워크 컴포넌트의 데모를 새로고침 (바닐라 로직 변경사항이 반영됨)
+ *   - 원래는 새로고침만 하면 되야 하지만 타입 에러가 발생하는 경우가 있어 데모를 중지하고 다시 실행해야 할 수도 있다.
+ * 
+ * 
  */
 
+
+
+function run(cmd, cwd = process.cwd()) {
+  console.log(`\n▶️ Running: ${cmd} (in ${cwd})`);
+  execSync(cmd, { stdio: "inherit", cwd });
+}
+
 const { execSync } = require("child_process");
 const path = require("path");
 const fs = require("fs");
 
+const frameworks = [
+  "ngx-flicking",
+  "preact-flicking",
+  "react-flicking",
+  "vue-flicking",
+  "vue3-flicking",
+  "svelte-flicking",
+];
+
 const args = process.argv.slice(2);
 const targetDir = args[0];
 
 if (!targetDir) {
-  console.error("❌ 디렉토리명을 인자로 입력하세요.");
-  process.exit(1);
-}
+  console.log(
+    "❗️ 디렉토리명을 인자로 입력하지 않았습니다. 전체 프레임워크에 대해 링크를 시도합니다."
+  );
+  run("npm run build");
+  run("npm link");
+  frameworks.forEach((target) => {
+    const fullPath = path.resolve(process.cwd(), "packages", target);
+    if (!fs.existsSync(fullPath)) {
+      console.error(`❌ 디렉토리 없음: ${fullPath}`);
+      process.exit(1);
+    }
+    run(`npm link '@egjs/flicking'`, fullPath);
+  });
+} else {
+  const fullPath = path.resolve(process.cwd(), "packages", targetDir);
+  if (!fs.existsSync(fullPath)) {
+    console.error(`❌ 디렉토리 없음: ${fullPath}`);
+    process.exit(1);
+  }
 
-const fullPath = path.resolve(process.cwd(), 'packages', targetDir);
-if (!fs.existsSync(fullPath)) {
-  console.error(`❌ 디렉토리 없음: ${fullPath}`);
-  process.exit(1);
+  run("npm run build");
+  run("npm link");
+  run(`npm link '@egjs/flicking'`, fullPath);
 }
 
-function run(cmd, cwd = process.cwd()) {
-  console.log(`\n▶️ Running: ${cmd} (in ${cwd})`);
-  execSync(cmd, { stdio: "inherit", cwd });
-}
 
-run("npm run build");
-run("npm link");
-run(`npm link '@egjs/flicking'`, fullPath);
-run("npm run build", fullPath);

debug/reactive/index.html

@@ -59,19 +59,6 @@
       .pagination-num.active {
         background-color: yellowgreen;
       }
-      #progress-bar {
-        width: 600px;
-        height: 20px;
-        border-radius: 20px;
-        background-color: #e0e0e0;
-        overflow: hidden;
-      }
-      #progress-fill {
-        height: 100%;
-        width: 0%; /* 초기에는 0% 채워짐 */
-        background-color: #4caf50; /* 채워지는 색 */
-        transition: width 0.3s ease; /* 부드럽게 변화 */
-      }
       #scroll-progress-bar {
         width: 600px;
         height: 20px;
@@ -103,9 +90,6 @@
         <button class="navigation-btn" id="next">Next</button>
       </div>
       <div id="pagination"></div>
-      <div id="progress-bar">
-        <div id="progress-fill"></div>
-      </div>
       <div id="scroll-progress-bar">
         <div id="scroll-progress-fill"></div>
       </div>
@@ -128,6 +112,9 @@
         const flicking = new Flicking(".flicking-viewport", {
           renderOnlyVisible: true,
           // circular: true
+          // horizontal: false
+          // align: 'center',
+          defaultIndex: 2,
         });
         const { connectFlickingReactiveAPI } = Flicking;
         const reactiveObj = connectFlickingReactiveAPI(flicking);
@@ -137,6 +124,7 @@
           totalPanelCount,
           currentPanelIndex,
           moveTo,
+          progress,
         } = reactiveObj;
 
         // Navigation buttons
@@ -204,7 +192,6 @@
           flicking.remove(0);
         });
 
-        // active panel을 지우는 경우 포커스가 가장 처음으로 돌아가는 현상이 있음.
         removeLastButton.addEventListener("click", () => {
           flicking.remove(flicking.panelCount - 1);
         });
@@ -214,7 +201,6 @@
         });
 
         const paginationElement = document.getElementById("pagination");
-        const progressFillElement = document.getElementById("progress-fill");
 
         const pageNums = Array.from({ length: totalPanelCount }, (_, i) => {
           const div = document.createElement("div");
@@ -243,6 +229,8 @@
         const scrollProgressFillElement = document.getElementById(
           "scroll-progress-fill"
         );
+        scrollProgressFillElement.style.width = `${progress}%`;
+
         reactiveObj.subscribe("progress", (nextValue) => {
           scrollProgressFillElement.style.width = `${nextValue}%`;
         });

docs/docusaurus.config.js

@@ -56,11 +56,6 @@ module.exports = {
           label: "Options",
           position: "left"
         },
-        {
-          to: "Reactive",
-          label: "Reactive",
-          position: "left"
-        },
         {
           to: "Plugins",
           label: "Plugins",
@@ -120,10 +115,6 @@ module.exports = {
             {
               label: "Options",
               to: "Options/"
-            },
-            {
-              label: "Reactive",
-              to: "Reactive/"
             }
           ]
         },