@egjs/flicking 4.2.5 → 4.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.2.5",
+	"version": "4.4.1",
 	"description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
 	"main": "dist/flicking.js",
 	"module": "dist/flicking.esm.js",
@@ -13,9 +13,9 @@
 		"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
 		"css": "postcss css/*.css --use autoprefixer postcss-clean -d dist/ -m",
 		"printsizes": "print-sizes ./dist --exclude=\\.map",
-		"test": "karma start",
-		"test:chrome": "karma start --chrome",
-		"coverage": "karma start --coverage && print-coveralls --sort=desc",
+		"test": "npm run test --prefix test/unit",
+		"test:chrome": "npm run test:chrome --prefix test/unit",
+		"test:cfc": "npm run test --prefix test/cfc",
 		"lint": "eslint 'src/**/*.ts'",
 		"lint:test": "eslint 'test/unit/**/*.ts'",
 		"jsdoc": "jsdoc -c jsdoc.json",
@@ -69,26 +69,22 @@
 		"egjs"
 	],
 	"devDependencies": {
+		"@babel/preset-env": "^7.16.0",
 		"@daybrush/jsdoc": "^0.3.10",
-		"@egjs/flicking-plugins": "^4.0.0-beta.1",
+		"@egjs/flicking-plugins": "^4.2.2",
 		"@egjs/release-helper": "0.0.3",
 		"@rollup/plugin-babel": "^5.3.0",
 		"@rollup/plugin-commonjs": "^11.1.0",
 		"@rollup/plugin-node-resolve": "^7.1.3",
 		"@rollup/plugin-replace": "^2.4.1",
-		"@types/chai": "^4.2.15",
 		"@types/fs-extra": "^9.0.11",
-		"@types/karma-chai": "^0.1.1",
-		"@types/mocha": "^5.2.5",
 		"@types/node": "^14.14.35",
-		"@types/sinon": "^7.0.3",
 		"@typescript-eslint/eslint-plugin": "^4.18.0",
 		"@typescript-eslint/eslint-plugin-tslint": "^4.18.0",
 		"@typescript-eslint/parser": "^4.18.0",
 		"autoprefixer": "^9.8.5",
 		"babel-loader": "^8.2.2",
-		"chai": "^4.3.4",
-		"chalk": "^2.4.2",
+		"babel-preset-env": "^1.7.0",
 		"concurrently": "^6.0.0",
 		"core-js": "^3.9.1",
 		"coveralls": "^3.0.2",
@@ -105,15 +101,7 @@
 		"http-serve": "^1.0.1",
 		"husky": "^1.3.1",
 		"jsdoc-to-mdx": "^1.0.5",
-		"karma": "^3.1.4",
-		"karma-chai": "^0.1.0",
-		"karma-chrome-launcher": "^2.2.0",
-		"karma-mocha": "^1.3.0",
-		"karma-mocha-reporter": "^2.2.5",
-		"karma-sinon": "^1.0.5",
-		"karma-typescript-egjs": "^4.0.0",
-		"karma-viewport": "^1.0.8",
-		"mocha": "^5.2.0",
+		"karma-typescript-es6-transform": "^5.5.2",
 		"postcss-clean": "^1.2.2",
 		"postcss-cli": "^7.1.1",
 		"print-coveralls": "^1.2.2",
@@ -124,10 +112,9 @@
 		"rollup-plugin-postcss": "^3.1.3",
 		"rollup-plugin-prototype-minify": "^1.1.0",
 		"rollup-plugin-serve": "^1.1.0",
+		"rollup-plugin-terser": "^7.0.2",
 		"rollup-plugin-typescript2": "^0.30.0",
-		"rollup-plugin-uglify": "^6.0.4",
 		"rollup-plugin-visualizer": "^4.2.1",
-		"sinon": "^7.2.3",
 		"sync-exec": "^0.6.2",
 		"ts-mock-imports": "^1.3.3",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
@@ -140,6 +127,7 @@
 	"dependencies": {
 		"@egjs/axes": "^2.8.0",
 		"@egjs/component": "^3.0.1",
+		"@egjs/imready": "^1.1.3",
 		"@egjs/list-differ": "^1.0.0"
 	},
 	"husky": {

package/src/Flicking.ts

@@ -6,10 +6,13 @@ import Component, { ComponentEvent } from "@egjs/component";
 
 import FlickingError from "./core/FlickingError";
 import Viewport from "./core/Viewport";
+import AutoResizer from "./core/AutoResizer";
 import { Panel } from "./core/panel";
+import { VanillaElementProvider } from "./core/panel/provider";
+import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
 import { Control, SnapControl, SnapControlOptions, FreeControl, StrictControl, FreeControlOptions, StrictControlOptions } from "./control";
 import { BoundCamera, Camera, CircularCamera, LinearCamera } from "./camera";
-import { Renderer, VanillaRenderer, ExternalRenderer } from "./renderer";
+import { Renderer, VanillaRenderer, ExternalRenderer, RendererOptions, NormalRenderingStrategy, VirtualRenderingStrategy } from "./renderer";
 import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION } from "./const/external";
 import * as ERROR from "./const/error";
 import { findIndex, getElement, includes, parseElement } from "./utils";
@@ -53,6 +56,7 @@ export interface FlickingOptions {
   adaptive: boolean;
   panelsPerView: number;
   noPanelStyleOverride: boolean;
+  resizeOnContentsReady: boolean;
   // EVENT
   needPanelThreshold: number;
   preventEventsBeforeInit: boolean;
@@ -71,12 +75,16 @@ export interface FlickingOptions {
   disableOnInit: boolean;
   // PERFORMANCE
   renderOnlyVisible: boolean;
+  virtual: VirtualOptions | null;
   // OTHERS
   autoInit: boolean;
   autoResize: boolean;
+  useResizeObserver: boolean;
+  externalRenderer: ExternalRenderer | null;
+  // @deprecated
   renderExternal: {
-    renderer: typeof ExternalRenderer;
-    rendererOptions: {[key: string]: any};
+    renderer: new (options: RendererOptions) => ExternalRenderer;
+    rendererOptions: RendererOptions;
   } | null;
 }
 
@@ -101,9 +109,11 @@ class Flicking extends Component<FlickingEvents> {
 
   // Core components
   private _viewport: Viewport;
+  private _autoResizer: AutoResizer;
   private _camera: Camera;
   private _control: Control;
   private _renderer: Renderer;
+  private _virtualManager: VirtualManager;
 
   // Options
   private _align: FlickingOptions["align"];
@@ -114,6 +124,8 @@ class Flicking extends Component<FlickingEvents> {
   private _adaptive: FlickingOptions["adaptive"];
   private _panelsPerView: FlickingOptions["panelsPerView"];
   private _noPanelStyleOverride: FlickingOptions["noPanelStyleOverride"];
+  private _resizeOnContentsReady: FlickingOptions["resizeOnContentsReady"];
+  private _virtual: FlickingOptions["virtual"];
 
   private _needPanelThreshold: FlickingOptions["needPanelThreshold"];
   private _preventEventsBeforeInit: FlickingOptions["preventEventsBeforeInit"];
@@ -133,8 +145,10 @@ class Flicking extends Component<FlickingEvents> {
 
   private _renderOnlyVisible: FlickingOptions["renderOnlyVisible"];
 
-  private _autoResize: FlickingOptions["autoResize"];
   private _autoInit: FlickingOptions["autoInit"];
+  private _autoResize: FlickingOptions["autoResize"];
+  private _useResizeObserver: FlickingOptions["useResizeObserver"];
+  private _externalRenderer: FlickingOptions["externalRenderer"];
   private _renderExternal: FlickingOptions["renderExternal"];
 
   // Internal State
@@ -205,6 +219,16 @@ class Flicking extends Component<FlickingEvents> {
    * @readonly
    */
   public get circularEnabled() { return this._camera.controlParams.circular; }
+  /**
+   * Whether the `virtual` option is enabled.
+   * The {@link Flicking#virtual virtual} option can't be enabled when  {@link Flicking#panelsPerView panelsPerView} is less or equal than zero.
+   * @ko {@link Flicking#virtual virtual} 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
+   * {@link Flicking#virtual virtual} 옵션은 {@link Flicking#panelsPerView panelsPerView} 옵션의 값이 0보다 같거나 작으면 비활성화됩니다.
+   * @type {boolean}
+   * @default false
+   * @readonly
+   */
+  public get virtualEnabled() { return this._panelsPerView > 0 && this._virtual != null; }
   /**
    * Index number of the {@link Flicking#currentPanel currentPanel}
    * @ko {@link Flicking#currentPanel currentPanel}의 인덱스 번호
@@ -356,6 +380,15 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    */
   public get noPanelStyleOverride() { return this._noPanelStyleOverride; }
+  /**
+   * Enabling this option will automatically call {@link Flicking#resize} when all image/video inside panels are loaded.
+   * This can be useful when you have contents inside Flicking that changes its size when it's loaded
+   * @ko 이 옵션을 활성화할 경우, Flicking 패널 내부의 이미지/비디오들이 로드되었을 때 자동으로 {@link Flicking#resize}를 호출합니다.
+   * 이 동작은 Flicking 내부에 로드 전/후로 크기가 변하는 콘텐츠를 포함하고 있을 때 유용하게 사용하실 수 있습니다.
+   * @type {boolean}
+   * @default false
+   */
+  public get resizeOnContentsReady() { return this._resizeOnContentsReady; }
   // EVENTS
   /**
    * A Threshold from viewport edge before triggering `needPanel` event
@@ -504,12 +537,45 @@ class Flicking extends Component<FlickingEvents> {
   public get disableOnInit() { return this._disableOnInit; }
   // PERFORMANCE
   /**
-   * Whether to render visible panels only. This can dramatically increase performance when there're many panels.
-   * @ko 보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다.
+   * Whether to render visible panels only. This can dramatically increase performance when there're many panels
+   * @ko 보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다
    * @type {boolean}
    * @default false
    */
   public get renderOnlyVisible() { return this._renderOnlyVisible; }
+  /**
+   * By enabling this option, it will reduce memory consumption by restricting the number of DOM elements to `panelsPerView + 1`
+   * Must be used with `panelsPerview`.
+   * After Flicking's initialized, this property can be used to add/remove the panel count.
+   * @ko 이 옵션을 활성화할 경우 패널 엘리먼트의 개수를 `panelsPerView + 1` 개로 고정함으로써, 메모리 사용량을 줄일 수 있습니다.
+   * `panelsPerView` 옵션과 함께 사용되어야만 합니다.
+   * Flicking 초기화 이후에, 이 프로퍼티는 렌더링하는 패널의 개수를 추가/제거하기 위해 사용될 수 있습니다.
+   * @type {VirtualManager}
+   * @property {function} renderPanel A rendering function for the panel element's innerHTML<ko>패널 엘리먼트의 innerHTML을 렌더링하는 함수</ko>
+   * @property {number} initialPanelCount Initial panel count to render<ko>최초로 렌더링할 패널의 개수</ko>
+   * @property {boolean} [cache=false] Whether to cache rendered panel's innerHTML<ko>렌더링된 패널의 innerHTML 정보를 캐시할지 여부</ko>
+   * @property {string} [panelClass="flicking-panel"] The class name that will be applied to rendered panel elements<ko>렌더링되는 패널 엘리먼트에 적용될 클래스 이름</ko>
+   * @example
+   * ```ts
+   * import Flicking, { VirtualPanel } from "@egjs/flicking";
+   *
+   * const flicking = new Flicking("#some_el", {
+   *   panelsPerView: 3,
+   *   virtual: {
+   *     renderPanel: (panel: VirtualPanel, index: number) => `Panel ${index}`,
+   *     initialPanelCount: 100
+   *   }
+   * });
+   *
+   * // Add 100 virtual panels (at the end)
+   * flicking.virtual.append(100);
+   *
+   * // Remove 100 virtual panels from 0 to 100
+   * flicking.virtual.remove(0, 100);
+   * ```
+   */
+  public get virtual() { return this._virtualManager; }
+
   // OTHERS
   /**
    * Call {@link Flicking#init init()} automatically when creating Flicking's instance
@@ -520,22 +586,35 @@ class Flicking extends Component<FlickingEvents> {
    */
   public get autoInit() { return this._autoInit; }
   /**
-   * Attach Flicking's {@link Flicking#resize resize} method to window's resize event.
-   * Flicking will automatically call {@link Flicking#resize resize} window size and orientation change.
-   * @ko Flicking의 {@link Flicking#resize resize} 메소드를 window의 resize 이벤트 핸들러로 등록합니다.
-   * 설정시 window 창 크기 및 orientation 변경에 의해 자동으로 {@link Flicking#resize resize}를 호출합니다.
+   * Whether to automatically call {@link Flicking#resize resize()} when the viewport element(.flicking-viewport)'s size is changed
+   * @ko 뷰포트 엘리먼트(.flicking-viewport)의 크기 변경시 {@link Flicking#resize resize()} 메소드를 자동으로 호출할지 여부를 설정합니다
    * @type {boolean}
    * @default true
    */
   public get autoResize() { return this._autoResize; }
+  /**
+   * Whether to listen {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}'s event instead of Window's {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} event when using the `autoResize` option
+   * @ko autoResize 옵션 사용시 {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}의 이벤트를 Window객체의 {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} 이벤트 대신 수신할지 여부를 설정합니다
+   * @type {boolean}
+   * @default true
+   */
+  public get useResizeObserver() { return this._useResizeObserver; }
   /**
    * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
    * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
-   * @type {boolean}
-   * @default false
+   * @default null
    * @internal
    * @readonly
    */
+  public get externalRenderer() { return this._externalRenderer; }
+  /**
+   * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
+   * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
+   * @default null
+   * @internal
+   * @readonly
+   * @deprecated
+   */
   public get renderExternal() { return this._renderExternal; }
 
   // Options Setter
@@ -553,6 +632,7 @@ class Flicking extends Component<FlickingEvents> {
   public set adaptive(val: FlickingOptions["adaptive"]) { this._adaptive = val; }
   public set panelsPerView(val: FlickingOptions["panelsPerView"]) { this._panelsPerView = val; }
   public set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]) { this._noPanelStyleOverride = val; }
+  public set resizeOnContentsReady(val: FlickingOptions["resizeOnContentsReady"]) { this._resizeOnContentsReady = val; }
   // EVENTS
   public set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]) { this._needPanelThreshold = val; }
   public set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]) { this._preventEventsBeforeInit = val; }
@@ -587,7 +667,23 @@ class Flicking extends Component<FlickingEvents> {
   // PERFORMANCE
   public set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]) { this._renderOnlyVisible = val; }
   // OTHERS
-  public set autoResize(val: FlickingOptions["autoResize"]) { this._autoResize = val; }
+  public set autoResize(val: FlickingOptions["autoResize"]) {
+    this._autoResize = val;
+
+    if (val) {
+      this._autoResizer.enable();
+    } else {
+      this._autoResizer.disable();
+    }
+  }
+
+  public set useResizeObserver(val: FlickingOptions["useResizeObserver"]) {
+    this._useResizeObserver = val;
+
+    if (this._autoResize) {
+      this._autoResizer.enable();
+    }
+  }
 
   /**
    * @param root A root HTMLElement to initialize Flicking on it. When it's a typeof `string`, it should be a css selector string
@@ -626,6 +722,7 @@ class Flicking extends Component<FlickingEvents> {
     adaptive = false,
     panelsPerView = -1,
     noPanelStyleOverride = false,
+    resizeOnContentsReady = false,
     needPanelThreshold = 0,
     preventEventsBeforeInit = true,
     deceleration = 0.0075,
@@ -640,8 +737,11 @@ class Flicking extends Component<FlickingEvents> {
     preventClickOnDrag = true,
     disableOnInit = false,
     renderOnlyVisible = false,
+    virtual = null,
     autoInit = true,
     autoResize = true,
+    useResizeObserver = true,
+    externalRenderer = null,
     renderExternal = null
   }: Partial<FlickingOptions> = {}) {
     super();
@@ -659,6 +759,8 @@ class Flicking extends Component<FlickingEvents> {
     this._adaptive = adaptive;
     this._panelsPerView = panelsPerView;
     this._noPanelStyleOverride = noPanelStyleOverride;
+    this._resizeOnContentsReady = resizeOnContentsReady;
+    this._virtual = virtual;
     this._needPanelThreshold = needPanelThreshold;
     this._preventEventsBeforeInit = preventEventsBeforeInit;
     this._deceleration = deceleration;
@@ -673,17 +775,19 @@ class Flicking extends Component<FlickingEvents> {
     this._preventClickOnDrag = preventClickOnDrag;
     this._disableOnInit = disableOnInit;
     this._renderOnlyVisible = renderOnlyVisible;
-    this._autoResize = autoResize;
     this._autoInit = autoInit;
+    this._autoResize = autoResize;
+    this._useResizeObserver = useResizeObserver;
+    this._externalRenderer = externalRenderer;
     this._renderExternal = renderExternal;
 
     // Create core components
     this._viewport = new Viewport(getElement(root));
+    this._autoResizer = new AutoResizer(this);
     this._renderer = this._createRenderer();
     this._camera = this._createCamera();
     this._control = this._createControl();
-
-    this.resize = this.resize.bind(this);
+    this._virtualManager = new VirtualManager(this, virtual);
 
     if (this._autoInit) {
       void this.init();
@@ -704,10 +808,12 @@ class Flicking extends Component<FlickingEvents> {
     const camera = this._camera;
     const renderer = this._renderer;
     const control = this._control;
+    const virtualManager = this._virtualManager;
     const originalTrigger = this.trigger;
     const preventEventsBeforeInit = this._preventEventsBeforeInit;
 
     camera.init(this);
+    virtualManager.init();
     renderer.init(this);
     control.init(this);
 
@@ -721,7 +827,7 @@ class Flicking extends Component<FlickingEvents> {
     await this._moveToInitialPanel();
 
     if (this._autoResize) {
-      window.addEventListener("resize", this.resize);
+      this._autoResizer.enable();
     }
     if (this._preventClickOnDrag) {
       control.controller.addPreventClickHandler();
@@ -729,6 +835,7 @@ class Flicking extends Component<FlickingEvents> {
     if (this._disableOnInit) {
       this.disableInput();
     }
+    renderer.checkPanelContentsReady(renderer.panels);
 
     this._plugins.forEach(plugin => plugin.init(this));
 
@@ -748,11 +855,9 @@ class Flicking extends Component<FlickingEvents> {
    * @return {void}
    */
   public destroy(): void {
-    if (!this._initialized) return;
-
     this.off();
-    window.removeEventListener("resize", this.resize);
 
+    this._autoResizer.disable();
     this._control.destroy();
     this._camera.destroy();
     this._renderer.destroy();
@@ -938,7 +1043,7 @@ class Flicking extends Component<FlickingEvents> {
    * @param {boolean} [options.includePanelHTML=false] Include panel's `outerHTML` to the returning status<ko>패널의 `outerHTML`을 반환값에 포함시킵니다</ko>
    * @param {boolean} [options.visiblePanelsOnly=false] Include only {@link Flicking#visiblePanel visiblePanel}'s HTML. This option is available only when the `includePanelHTML` is true
    * <ko>현재 보이는 패널({@link Flicking#visiblePanel visiblePanel})의 HTML만 반환합니다. `includePanelHTML`이 `true`일 경우에만 동작합니다.</ko>
-   * @return {Partial<Status>} An object with current status value information<ko>현재 상태값 정보를 가진 객체.</ko>
+   * @return {Status} An object with current status value information<ko>현재 상태값 정보를 가진 객체.</ko>
    */
   public getStatus({
     index = true,
@@ -1013,8 +1118,8 @@ class Flicking extends Component<FlickingEvents> {
 
     // Can't add/remove panels on external rendering
     if (panels[0]?.html && !this._renderExternal) {
-      renderer.batchRemove({ index: 0, deleteCount: this.panels.length });
-      renderer.batchInsert({ index: 0, elements: parseElement(panels.map(panel => panel.html!)) });
+      renderer.batchRemove({ index: 0, deleteCount: this.panels.length, hasDOMInElements: true });
+      renderer.batchInsert({ index: 0, elements: parseElement(panels.map(panel => panel.html!)), hasDOMInElements: true });
     }
 
     if (index) {
@@ -1206,7 +1311,7 @@ class Flicking extends Component<FlickingEvents> {
       throw new FlickingError(ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK, ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK);
     }
 
-    return this._renderer.batchInsert({ index, elements: parseElement(element) });
+    return this._renderer.batchInsert({ index, elements: parseElement(element), hasDOMInElements: true });
   }
 
   /**
@@ -1223,7 +1328,7 @@ class Flicking extends Component<FlickingEvents> {
       throw new FlickingError(ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK, ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK);
     }
 
-    return this._renderer.batchRemove({ index, deleteCount });
+    return this._renderer.batchRemove({ index, deleteCount, hasDOMInElements: true });
   }
 
   private _createControl(): Control {
@@ -1269,15 +1374,39 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   private _createRenderer(): Renderer {
-    const rendererOptions = {
-      align: this._align
-    };
+    const externalRenderer = this._externalRenderer;
+    if (this._virtual && this._panelsPerView <= 0) {
+      // eslint-disable-next-line no-console
+      console.warn("\"virtual\" and \"panelsPerView\" option should be used together, ignoring virtual.");
+    }
+
+    return externalRenderer
+      ? externalRenderer
+      : this._renderExternal
+        ? this._createExternalRenderer()
+        : this._createVanillaRenderer();
+  }
 
-    const renderExternal = this._renderExternal;
+  private _createExternalRenderer(): ExternalRenderer {
+    const {
+      renderer,
+      rendererOptions
+    } = this._renderExternal!;
 
-    return renderExternal
-      ? new (renderExternal.renderer as any)({ ...rendererOptions, ...renderExternal.rendererOptions })
-      : new VanillaRenderer(rendererOptions);
+    return new (renderer)({ align: this._align, ...rendererOptions });
+  }
+
+  private _createVanillaRenderer(): VanillaRenderer {
+    const virtual = this.virtualEnabled;
+
+    return new VanillaRenderer({
+      align: this._align,
+      strategy: virtual
+        ? new VirtualRenderingStrategy()
+        : new NormalRenderingStrategy({
+          providerCtor: VanillaElementProvider
+        })
+    });
   }
 
   private async _moveToInitialPanel(): Promise<void> {
@@ -1287,6 +1416,8 @@ class Flicking extends Component<FlickingEvents> {
 
     if (!initialPanel) return;
 
+    control.setActive(initialPanel, null, false);
+
     return control.moveToPanel(initialPanel, {
       duration: 0
     });

package/src/camera/BoundCamera.ts

@@ -23,7 +23,7 @@ class BoundCamera extends Camera {
    * @return {this}
    */
   public updateRange() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const renderer = flicking.renderer;
     const alignPos = this._alignPos;
 
@@ -61,7 +61,7 @@ class BoundCamera extends Camera {
   }
 
   public updateAnchors(): this {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
+    const flicking = getFlickingAttached(this._flicking);
     const panels = flicking.renderer.panels;
 
     if (panels.length <= 0) {