@egjs/flicking 4.3.1 → 4.5.0

package/README.md

@@ -6,7 +6,6 @@
 <p align="center" style="line-height: 2;">
   <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/flicking.svg?style=flat-square&color=007acc&label=version&logo=NPM" alt="version" /></a>
   <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img alt="npm bundle size (scoped)" src="https://img.shields.io/bundlephobia/minzip/@egjs/flicking.svg?style=flat-square&label=%F0%9F%92%BE%20gzipped&color=007acc" /></a>
-  <a href="https://travis-ci.org/naver/egjs-flicking" target="_blank"><img alt="Travis (.org)" src="https://img.shields.io/travis/naver/egjs-flicking.svg?style=flat-square&label=build&logo=travis%20ci" /></a>
   <a href="https://coveralls.io/github/naver/egjs-flicking?branch=master&style=flat-square" target="_blank"><img alt="Coveralls github" src="https://img.shields.io/coveralls/github/naver/egjs-flicking.svg?style=flat-square&label=%E2%9C%85%20coverage" /></a>
   <a href="https://deepscan.io/dashboard#view=project&tid=3998&pid=5802&bid=46086"><img src="https://deepscan.io/api/teams/3998/projects/5802/branches/46086/badge/grade.svg" alt="DeepScan grade" /></a>
 </p>
@@ -131,7 +130,7 @@ var flicking = new Flicking("#my-flicking", { circular: true });
 |[**@egjs/vue-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/vue-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue-flicking.svg?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/vue.svg" valign="middle" alt="Vue.js" /> [Vue.js@2](https://vuejs.org/v2/guide/index.html) port of @egjs/flicking|
 |[**@egjs/vue3-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/vue3-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/vue3-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue3-flicking.svg?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/vue.svg" valign="middle" alt="Vue.js" /> [Vue.js@3](https://v3.vuejs.org/) port of @egjs/flicking|
 |[**@egjs/preact-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/preact-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/preact-flicking.svg?style=flat-square&color=673ab8&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/preact.svg" valign="middle" alt="Preact" /> [Preact](https://preactjs.com/guide/v10/getting-started) port of @egjs/flicking|
-|[**@egjs/svelte-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/svelte-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/svelte-flicking.svg?style=flat-square&color=FF3E00&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/images/svelte.svg" valign="middle" alt="Svelte" /> [Svelte](https://svelte.dev/) port of @egjs/flicking|
+|[**@egjs/svelte-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md)|<a href="https://www.npmjs.com/package/@egjs/svelte-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/svelte-flicking.svg?style=flat-square&color=FF3E00&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/svelte.svg" valign="middle" alt="Svelte" /> [Svelte](https://svelte.dev/) port of @egjs/flicking|
 
 ## 🌐 Supported Browsers
 |<img width="20" src="https://simpleicons.org/icons/internetexplorer.svg" alt="IE" />|<img width="20" src="https://simpleicons.org/icons/googlechrome.svg" alt="Chrome" />|<img width="20" src="https://simpleicons.org/icons/firefoxbrowser.svg" alt="Firefox" />|<img width="20" src="https://simpleicons.org/icons/safari.svg" alt="Safari" />|<img width="20" src="https://simpleicons.org/icons/apple.svg" alt="iOS" />|<img width="20" src="https://simpleicons.org/icons/android.svg" alt="Android" />|

package/declaration/Flicking.d.ts

@@ -1,10 +1,11 @@
 import Component from "@egjs/component";
 import Viewport from "./core/Viewport";
 import { Panel } from "./core/panel";
+import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
 import { Control } from "./control";
 import { Camera } from "./camera";
-import { Renderer, ExternalRenderer } from "./renderer";
-import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION } from "./const/external";
+import { Renderer, ExternalRenderer, RendererOptions } from "./renderer";
+import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION, CIRCULAR_FALLBACK } from "./const/external";
 import { HoldStartEvent, HoldEndEvent, MoveStartEvent, SelectEvent, MoveEvent, MoveEndEvent, WillChangeEvent, WillRestoreEvent, NeedPanelEvent, VisibleChangeEvent, ReachEdgeEvent, ReadyEvent, AfterResizeEvent, BeforeResizeEvent, ChangedEvent, RestoredEvent, PanelChangeEvent } from "./type/event";
 import { LiteralUnion, ValueOf } from "./type/internal";
 import { ElementLike, Plugin, Status, MoveTypeOptions } from "./type/external";
@@ -35,6 +36,7 @@ export interface FlickingOptions {
     defaultIndex: number;
     horizontal: boolean;
     circular: boolean;
+    circularFallback: LiteralUnion<ValueOf<typeof CIRCULAR_FALLBACK>>;
     bound: boolean;
     adaptive: boolean;
     panelsPerView: number;
@@ -54,30 +56,35 @@ export interface FlickingOptions {
     preventClickOnDrag: boolean;
     disableOnInit: boolean;
     renderOnlyVisible: boolean;
+    virtual: VirtualOptions | null;
     autoInit: boolean;
     autoResize: boolean;
+    useResizeObserver: boolean;
+    externalRenderer: ExternalRenderer | null;
     renderExternal: {
-        renderer: typeof ExternalRenderer;
-        rendererOptions: {
-            [key: string]: any;
-        };
+        renderer: new (options: RendererOptions) => ExternalRenderer;
+        rendererOptions: RendererOptions;
     } | null;
 }
 declare class Flicking extends Component<FlickingEvents> {
     static VERSION: string;
     private _viewport;
+    private _autoResizer;
     private _camera;
     private _control;
     private _renderer;
+    private _virtualManager;
     private _align;
     private _defaultIndex;
     private _horizontal;
     private _circular;
+    private _circularFallback;
     private _bound;
     private _adaptive;
     private _panelsPerView;
     private _noPanelStyleOverride;
     private _resizeOnContentsReady;
+    private _virtual;
     private _needPanelThreshold;
     private _preventEventsBeforeInit;
     private _deceleration;
@@ -92,8 +99,10 @@ declare class Flicking extends Component<FlickingEvents> {
     private _preventClickOnDrag;
     private _disableOnInit;
     private _renderOnlyVisible;
-    private _autoResize;
     private _autoInit;
+    private _autoResize;
+    private _useResizeObserver;
+    private _externalRenderer;
     private _renderExternal;
     private _initialized;
     private _plugins;
@@ -103,6 +112,7 @@ declare class Flicking extends Component<FlickingEvents> {
     get viewport(): Viewport;
     get initialized(): boolean;
     get circularEnabled(): boolean;
+    get virtualEnabled(): boolean;
     get index(): number;
     get element(): HTMLElement;
     get currentPanel(): Panel;
@@ -116,6 +126,10 @@ declare class Flicking extends Component<FlickingEvents> {
     get defaultIndex(): FlickingOptions["defaultIndex"];
     get horizontal(): FlickingOptions["horizontal"];
     get circular(): FlickingOptions["circular"];
+    get circularFallback(): LiteralUnion<ValueOf<{
+        readonly LINEAR: "linear";
+        readonly BOUND: "bound";
+    }>, string>;
     get bound(): FlickingOptions["bound"];
     get adaptive(): FlickingOptions["adaptive"];
     get panelsPerView(): FlickingOptions["panelsPerView"];
@@ -135,13 +149,14 @@ declare class Flicking extends Component<FlickingEvents> {
     get preventClickOnDrag(): FlickingOptions["preventClickOnDrag"];
     get disableOnInit(): FlickingOptions["disableOnInit"];
     get renderOnlyVisible(): FlickingOptions["renderOnlyVisible"];
+    get virtual(): VirtualManager;
     get autoInit(): boolean;
     get autoResize(): FlickingOptions["autoResize"];
+    get useResizeObserver(): FlickingOptions["useResizeObserver"];
+    get externalRenderer(): ExternalRenderer;
     get renderExternal(): {
-        renderer: typeof ExternalRenderer;
-        rendererOptions: {
-            [key: string]: any;
-        };
+        renderer: new (options: RendererOptions) => ExternalRenderer;
+        rendererOptions: RendererOptions;
     };
     set align(val: FlickingOptions["align"]);
     set defaultIndex(val: FlickingOptions["defaultIndex"]);
@@ -167,7 +182,8 @@ declare class Flicking extends Component<FlickingEvents> {
     set disableOnInit(val: FlickingOptions["disableOnInit"]);
     set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]);
     set autoResize(val: FlickingOptions["autoResize"]);
-    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, renderOnlyVisible, autoInit, autoResize, renderExternal }?: Partial<FlickingOptions>);
+    set useResizeObserver(val: FlickingOptions["useResizeObserver"]);
+    constructor(root: HTMLElement | string, { align, defaultIndex, horizontal, circular, circularFallback, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, externalRenderer, renderExternal }?: Partial<FlickingOptions>);
     init(): Promise<void>;
     destroy(): void;
     prev(duration?: number): Promise<void>;
@@ -193,6 +209,8 @@ declare class Flicking extends Component<FlickingEvents> {
     private _createControl;
     private _createCamera;
     private _createRenderer;
+    private _createExternalRenderer;
+    private _createVanillaRenderer;
     private _moveToInitialPanel;
 }
 export default Flicking;

package/declaration/camera/Camera.d.ts

@@ -1,31 +1,32 @@
 import Flicking, { FlickingOptions } from "../Flicking";
 import Panel from "../core/panel/Panel";
 import AnchorPoint from "../core/AnchorPoint";
+import { CameraMode } from "./mode";
 export interface CameraOptions {
     align: FlickingOptions["align"];
 }
-declare abstract class Camera {
-    protected _align: FlickingOptions["align"];
-    protected _flicking: Flicking | null;
-    protected _el: HTMLElement;
-    protected _transform: string;
-    protected _position: number;
-    protected _alignPos: number;
-    protected _offset: number;
-    protected _range: {
-        min: number;
-        max: number;
-    };
-    protected _visiblePanels: Panel[];
-    protected _anchors: AnchorPoint[];
-    protected _needPanelTriggered: {
-        prev: boolean;
-        next: boolean;
-    };
+declare class Camera {
+    private _align;
+    private _flicking;
+    private _mode;
+    private _el;
+    private _transform;
+    private _position;
+    private _alignPos;
+    private _offset;
+    private _circularOffset;
+    private _circularEnabled;
+    private _range;
+    private _visiblePanels;
+    private _anchors;
+    private _needPanelTriggered;
     get element(): HTMLElement;
+    get children(): HTMLElement[];
     get position(): number;
     get alignPosition(): number;
     get offset(): number;
+    get circularEnabled(): boolean;
+    get mode(): CameraMode;
     get range(): {
         min: number;
         max: number;
@@ -51,7 +52,6 @@ declare abstract class Camera {
     get align(): FlickingOptions["align"];
     set align(val: FlickingOptions["align"]);
     constructor({ align }?: Partial<CameraOptions>);
-    abstract updateRange(): this;
     init(flicking: Flicking): this;
     destroy(): this;
     lookAt(pos: number): void;
@@ -64,16 +64,19 @@ declare abstract class Camera {
     clampToReachablePosition(position: number): number;
     canReach(panel: Panel): boolean;
     canSee(panel: Panel): boolean;
+    updateRange(): this;
     updateAlignPos(): this;
     updateAnchors(): this;
     updateAdaptiveHeight(): void;
-    updateOffset(): void;
+    updateOffset(): this;
     resetNeedPanelHistory(): this;
-    protected _resetInternalValues(): void;
-    protected _refreshVisiblePanels(): void;
-    protected _checkNeedPanel(): void;
-    protected _checkReachEnd(prevPos: number, newPos: number): void;
-    protected _applyTransform(): void;
-    protected _checkTranslateSupport: () => void;
+    applyTransform(): this;
+    private _resetInternalValues;
+    private _refreshVisiblePanels;
+    private _checkNeedPanel;
+    private _checkReachEnd;
+    private _checkTranslateSupport;
+    private _updateMode;
+    private _togglePanels;
 }
 export default Camera;

package/declaration/camera/index.d.ts

@@ -1,6 +1,4 @@
 import Camera, { CameraOptions } from "./Camera";
-import LinearCamera from "./LinearCamera";
-import CircularCamera from "./CircularCamera";
-import BoundCamera from "./BoundCamera";
-export { Camera, LinearCamera, CircularCamera, BoundCamera };
+export { Camera };
 export type { CameraOptions };
+export * from "./mode";

package/declaration/camera/mode/BoundCameraMode.d.ts

@@ -0,0 +1,13 @@
+import AnchorPoint from "../../core/AnchorPoint";
+import CameraMode from "./CameraMode";
+declare class BoundCameraMode extends CameraMode {
+    checkAvailability(): boolean;
+    getRange(): {
+        min: number;
+        max: number;
+    };
+    getAnchors(): AnchorPoint[];
+    findAnchorIncludePosition(position: number): AnchorPoint | null;
+    private _findNearestPanel;
+}
+export default BoundCameraMode;

package/declaration/camera/mode/CameraMode.d.ts

@@ -0,0 +1,19 @@
+import Flicking from "../../Flicking";
+import Panel from "../../core/panel/Panel";
+import AnchorPoint from "../../core/AnchorPoint";
+declare abstract class CameraMode {
+    protected _flicking: Flicking;
+    constructor(flicking: Flicking);
+    abstract checkAvailability(): boolean;
+    abstract getRange(): {
+        min: number;
+        max: number;
+    };
+    getAnchors(): AnchorPoint[];
+    findAnchorIncludePosition(position: number): AnchorPoint | null;
+    clampToReachablePosition(position: number): number;
+    getCircularOffset(): number;
+    canReach(panel: Panel): boolean;
+    canSee(panel: Panel): boolean;
+}
+export default CameraMode;

package/declaration/camera/mode/CircularCameraMode.d.ts

@@ -0,0 +1,18 @@
+import Panel from "../../core/panel/Panel";
+import AnchorPoint from "../../core/AnchorPoint";
+import CameraMode from "./CameraMode";
+declare class CircularCameraMode extends CameraMode {
+    checkAvailability(): boolean;
+    getRange(): {
+        min: number;
+        max: number;
+    };
+    getAnchors(): AnchorPoint[];
+    findAnchorIncludePosition(position: number): AnchorPoint | null;
+    getCircularOffset(): number;
+    clampToReachablePosition(position: number): number;
+    canReach(panel: Panel): boolean;
+    canSee(panel: Panel): boolean;
+    private _calcPanelAreaSum;
+}
+export default CircularCameraMode;

package/declaration/camera/mode/LinearCameraMode.d.ts

@@ -0,0 +1,9 @@
+import CameraMode from "./CameraMode";
+declare class LinearCameraMode extends CameraMode {
+    checkAvailability(): boolean;
+    getRange(): {
+        min: number;
+        max: number;
+    };
+}
+export default LinearCameraMode;

package/declaration/camera/mode/index.d.ts

@@ -0,0 +1,6 @@
+import CameraMode from "./CameraMode";
+import LinearCameraMode from "./LinearCameraMode";
+import CircularCameraMode from "./CircularCameraMode";
+import BoundCameraMode from "./BoundCameraMode";
+export { LinearCameraMode, CircularCameraMode, BoundCameraMode };
+export type { CameraMode };

package/declaration/const/error.d.ts

@@ -13,12 +13,13 @@ export declare const CODE: {
     readonly NOT_ALLOWED_IN_FRAMEWORK: 11;
     readonly NOT_INITIALIZED: 12;
     readonly NO_ACTIVE: 13;
+    readonly NOT_ALLOWED_IN_VIRTUAL: 14;
 };
 export declare const MESSAGE: {
     readonly WRONG_TYPE: (wrongVal: any, correctTypes: string[]) => string;
     readonly ELEMENT_NOT_FOUND: (selector: string) => string;
     readonly VAL_MUST_NOT_NULL: (val: any, name: string) => string;
-    readonly NOT_ATTACHED_TO_FLICKING: (name: string) => string;
+    readonly NOT_ATTACHED_TO_FLICKING: "This module is not attached to the Flicking instance. \"init()\" should be called first.";
     readonly WRONG_OPTION: (optionName: string, val: any) => string;
     readonly INDEX_OUT_OF_RANGE: (val: number, min: number, max: number) => string;
     readonly POSITION_NOT_REACHABLE: (position: number) => string;
@@ -29,4 +30,5 @@ export declare const MESSAGE: {
     readonly NOT_ALLOWED_IN_FRAMEWORK: "This behavior is not allowed in the frameworks like React, Vue, or Angular.";
     readonly NOT_INITIALIZED: "Flicking is not initialized yet, call init() first.";
     readonly NO_ACTIVE: "There's no active panel that Flicking has selected. This may be due to the absence of any panels.";
+    readonly NOT_ALLOWED_IN_VIRTUAL: "This behavior is not allowed when the virtual option is enabled";
 };

package/declaration/const/external.d.ts

@@ -33,3 +33,12 @@ export declare const MOVE_TYPE: {
     readonly FREE_SCROLL: "freeScroll";
     readonly STRICT: "strict";
 };
+export declare const CLASS: {
+    VERTICAL: string;
+    HIDDEN: string;
+    DEFAULT_VIRTUAL: string;
+};
+export declare const CIRCULAR_FALLBACK: {
+    readonly LINEAR: "linear";
+    readonly BOUND: "bound";
+};

package/declaration/core/AutoResizer.d.ts

@@ -0,0 +1,13 @@
+import Flicking from "../Flicking";
+declare class AutoResizer {
+    private _flicking;
+    private _enabled;
+    private _resizeObserver;
+    get enabled(): boolean;
+    constructor(flicking: Flicking);
+    enable(): this;
+    disable(): this;
+    private _onResize;
+    private _skipFirstResize;
+}
+export default AutoResizer;

package/declaration/core/VirtualManager.d.ts

@@ -0,0 +1,37 @@
+import Flicking from "../Flicking";
+import VirtualPanel from "./panel/VirtualPanel";
+export interface VirtualOptions {
+    renderPanel: (panel: VirtualPanel, index: number) => string;
+    initialPanelCount: number;
+    cache?: boolean;
+    panelClass?: string;
+}
+declare class VirtualManager {
+    private _flicking;
+    private _renderPanel;
+    private _initialPanelCount;
+    private _cache;
+    private _panelClass;
+    private _elements;
+    get elements(): {
+        nativeElement: HTMLElement;
+        visible: boolean;
+    }[];
+    get renderPanel(): VirtualOptions["renderPanel"];
+    get initialPanelCount(): number;
+    get cache(): NonNullable<VirtualOptions["cache"]>;
+    get panelClass(): NonNullable<VirtualOptions["panelClass"]>;
+    set renderPanel(val: VirtualOptions["renderPanel"]);
+    set cache(val: NonNullable<VirtualOptions["cache"]>);
+    set panelClass(val: NonNullable<VirtualOptions["panelClass"]>);
+    constructor(flicking: Flicking, options: VirtualOptions | null);
+    init(): void;
+    show(index: number): void;
+    hide(index: number): void;
+    append(count?: number): VirtualPanel[];
+    prepend(count?: number): VirtualPanel[];
+    insert(index: number, count?: number): VirtualPanel[];
+    remove(index: number, count: number): VirtualPanel[];
+    private _initVirtualElements;
+}
+export default VirtualManager;

package/declaration/core/index.d.ts

@@ -1,5 +1,6 @@
 import Viewport from "./Viewport";
 import FlickingError from "./FlickingError";
 import AnchorPoint from "./AnchorPoint";
-export { Viewport, FlickingError, AnchorPoint };
+import VirtualManager from "./VirtualManager";
+export { Viewport, FlickingError, AnchorPoint, VirtualManager };
 export * from "./panel";

package/declaration/core/panel/Panel.d.ts

@@ -1,13 +1,16 @@
 import Flicking from "../../Flicking";
 import { ALIGN, DIRECTION } from "../../const/external";
 import { LiteralUnion, ValueOf } from "../../type/internal";
+import ElementProvider from "./provider/ElementProvider";
 export interface PanelOptions {
     index: number;
     align: LiteralUnion<ValueOf<typeof ALIGN>> | number;
     flicking: Flicking;
+    elementProvider: ElementProvider;
 }
-declare abstract class Panel {
+declare class Panel {
     protected _flicking: Flicking;
+    protected _elProvider: ElementProvider;
     protected _index: number;
     protected _pos: number;
     protected _size: number;
@@ -17,13 +20,15 @@ declare abstract class Panel {
         next: number;
     };
     protected _alignPos: number;
+    protected _rendered: boolean;
     protected _removed: boolean;
     protected _loading: boolean;
     protected _toggleDirection: ValueOf<typeof DIRECTION>;
     protected _toggled: boolean;
     protected _togglePosition: number;
     protected _align: PanelOptions["align"];
-    abstract get element(): HTMLElement;
+    get element(): HTMLElement;
+    get elementProvider(): ElementProvider;
     get index(): number;
     get position(): number;
     get size(): number;
@@ -35,8 +40,8 @@ declare abstract class Panel {
     };
     get alignPosition(): number;
     get removed(): boolean;
+    get rendered(): boolean;
     get loading(): boolean;
-    abstract get rendered(): any;
     get range(): {
         min: number;
         max: number;
@@ -50,9 +55,9 @@ declare abstract class Panel {
     set loading(val: boolean);
     get align(): PanelOptions["align"];
     set align(val: PanelOptions["align"]);
-    constructor({ index, align, flicking }: PanelOptions);
-    abstract markForShow(): any;
-    abstract markForHide(): any;
+    constructor({ index, align, flicking, elementProvider }: PanelOptions);
+    markForShow(): void;
+    markForHide(): void;
     resize(cached?: {
         size: number;
         height: number;
@@ -61,7 +66,7 @@ declare abstract class Panel {
             next: number;
         };
     }): this;
-    setSize({ width, height }: Partial<{
+    setSize(size: Partial<{
         width: number | string;
         height: number | string;
     }>): this;
@@ -69,6 +74,7 @@ declare abstract class Panel {
     destroy(): void;
     includePosition(pos: number, includeMargin?: boolean): boolean;
     includeRange(min: number, max: number, includeMargin?: boolean): boolean;
+    isVisibleOnRange(min: number, max: number): boolean;
     focus(duration?: number): Promise<void>;
     prev(): Panel | null;
     next(): Panel | null;

package/declaration/core/panel/VirtualPanel.d.ts

@@ -0,0 +1,19 @@
+import Panel, { PanelOptions } from "./Panel";
+import VirtualElementProvider from "./provider/VirtualElementProvider";
+interface VirtualPanelOptions extends PanelOptions {
+    elementProvider: VirtualElementProvider;
+}
+declare class VirtualPanel extends Panel {
+    protected _elProvider: VirtualElementProvider;
+    protected _cachedInnerHTML: string | null;
+    get element(): HTMLElement;
+    get cachedInnerHTML(): string;
+    get elementIndex(): number;
+    constructor(options: VirtualPanelOptions);
+    cacheRenderResult(result: string): void;
+    uncacheRenderResult(): void;
+    render(): void;
+    increaseIndex(val: number): this;
+    decreaseIndex(val: number): this;
+}
+export default VirtualPanel;

package/declaration/core/panel/index.d.ts

@@ -1,5 +1,5 @@
 import Panel, { PanelOptions } from "./Panel";
-import ElementPanel, { ElementPanelOptions } from "./ElementPanel";
-import ExternalPanel, { ExternalPanelOptions } from "./ExternalPanel";
-export { Panel, ElementPanel, ExternalPanel };
-export type { PanelOptions, ElementPanelOptions, ExternalPanelOptions };
+import VirtualPanel from "./VirtualPanel";
+export * from "./provider";
+export { Panel, VirtualPanel };
+export type { PanelOptions };

package/declaration/core/panel/provider/ElementProvider.d.ts

@@ -0,0 +1,8 @@
+import Flicking from "../../../Flicking";
+interface ElementProvider {
+    element: HTMLElement;
+    rendered: boolean;
+    show(flicking: Flicking): void;
+    hide(flicking: Flicking): void;
+}
+export default ElementProvider;

package/declaration/core/panel/provider/VanillaElementProvider.d.ts

@@ -0,0 +1,12 @@
+import Flicking from "../../../Flicking";
+import ElementProvider from "./ElementProvider";
+declare class VanillaElementProvider implements ElementProvider {
+    private _element;
+    private _rendered;
+    get element(): HTMLElement;
+    get rendered(): boolean;
+    constructor(element: HTMLElement);
+    show(flicking: Flicking): void;
+    hide(flicking: Flicking): void;
+}
+export default VanillaElementProvider;

package/declaration/core/panel/provider/VirtualElementProvider.d.ts

@@ -0,0 +1,15 @@
+import Flicking from "../../../Flicking";
+import VirtualPanel from "../VirtualPanel";
+import ElementProvider from "./ElementProvider";
+declare class VirtualElementProvider implements ElementProvider {
+    private _flicking;
+    private _panel;
+    get element(): HTMLElement;
+    get rendered(): boolean;
+    private get _virtualElement();
+    constructor(flicking: Flicking);
+    init(panel: VirtualPanel): void;
+    show(): void;
+    hide(): void;
+}
+export default VirtualElementProvider;

package/declaration/core/panel/provider/index.d.ts

@@ -0,0 +1,5 @@
+import ElementProvider from "./ElementProvider";
+import VanillaElementProvider from "./VanillaElementProvider";
+import VirtualElementProvider from "./VirtualElementProvider";
+export { VanillaElementProvider, VirtualElementProvider };
+export type { ElementProvider };

package/declaration/index.d.ts

@@ -1,3 +1,13 @@
 import Flicking from "./Flicking";
-export * from "./exports";
+import type { FlickingOptions, FlickingEvents } from "./Flicking";
+export * from "./core";
+export * from "./camera";
+export * from "./control";
+export * from "./renderer";
+export * from "./const/external";
+export * from "./cfc";
+export * from "./utils";
+export * from "./type/event";
+export * from "./type/external";
+export type { FlickingOptions, FlickingEvents };
 export default Flicking;

package/declaration/renderer/ExternalRenderer.d.ts

@@ -1,7 +1,7 @@
 import Panel from "../core/panel/Panel";
 import Renderer from "./Renderer";
 declare abstract class ExternalRenderer extends Renderer {
-    protected _insertPanelElements(panels: Panel[], nextSibling: Panel | null): void;
     protected _removePanelElements(panels: Panel[]): void;
+    protected _removeAllChildsFromCamera(): void;
 }
 export default ExternalRenderer;