@egjs/flicking 4.2.4 → 4.4.0

package/README.md

@@ -131,7 +131,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,9 +1,10 @@
 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 { Renderer, ExternalRenderer, RendererOptions } from "./renderer";
 import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION } 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";
@@ -39,6 +40,7 @@ export interface FlickingOptions {
     adaptive: boolean;
     panelsPerView: number;
     noPanelStyleOverride: boolean;
+    resizeOnContentsReady: boolean;
     needPanelThreshold: number;
     preventEventsBeforeInit: boolean;
     deceleration: number;
@@ -53,21 +55,23 @@ export interface FlickingOptions {
     preventClickOnDrag: boolean;
     disableOnInit: boolean;
     renderOnlyVisible: boolean;
+    virtual: VirtualOptions | null;
     autoInit: boolean;
     autoResize: boolean;
+    useResizeObserver: boolean;
     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;
@@ -76,6 +80,8 @@ declare class Flicking extends Component<FlickingEvents> {
     private _adaptive;
     private _panelsPerView;
     private _noPanelStyleOverride;
+    private _resizeOnContentsReady;
+    private _virtual;
     private _needPanelThreshold;
     private _preventEventsBeforeInit;
     private _deceleration;
@@ -90,8 +96,9 @@ declare class Flicking extends Component<FlickingEvents> {
     private _preventClickOnDrag;
     private _disableOnInit;
     private _renderOnlyVisible;
-    private _autoResize;
     private _autoInit;
+    private _autoResize;
+    private _useResizeObserver;
     private _renderExternal;
     private _initialized;
     private _plugins;
@@ -101,6 +108,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;
@@ -118,6 +126,7 @@ declare class Flicking extends Component<FlickingEvents> {
     get adaptive(): FlickingOptions["adaptive"];
     get panelsPerView(): FlickingOptions["panelsPerView"];
     get noPanelStyleOverride(): FlickingOptions["noPanelStyleOverride"];
+    get resizeOnContentsReady(): FlickingOptions["resizeOnContentsReady"];
     get needPanelThreshold(): FlickingOptions["needPanelThreshold"];
     get preventEventsBeforeInit(): FlickingOptions["preventEventsBeforeInit"];
     get deceleration(): FlickingOptions["deceleration"];
@@ -132,13 +141,13 @@ 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 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"]);
@@ -148,6 +157,7 @@ declare class Flicking extends Component<FlickingEvents> {
     set adaptive(val: FlickingOptions["adaptive"]);
     set panelsPerView(val: FlickingOptions["panelsPerView"]);
     set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]);
+    set resizeOnContentsReady(val: FlickingOptions["resizeOnContentsReady"]);
     set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]);
     set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]);
     set deceleration(val: FlickingOptions["deceleration"]);
@@ -163,7 +173,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, 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, bound, adaptive, panelsPerView, noPanelStyleOverride, resizeOnContentsReady, needPanelThreshold, preventEventsBeforeInit, deceleration, duration, easing, inputType, moveType, threshold, interruptable, bounce, iOSEdgeSwipeThreshold, preventClickOnDrag, disableOnInit, renderOnlyVisible, virtual, autoInit, autoResize, useResizeObserver, renderExternal }?: Partial<FlickingOptions>);
     init(): Promise<void>;
     destroy(): void;
     prev(duration?: number): Promise<void>;
@@ -189,6 +200,8 @@ declare class Flicking extends Component<FlickingEvents> {
     private _createControl;
     private _createCamera;
     private _createRenderer;
+    private _createVanillaRenderer;
+    private _createExternalRenderer;
     private _moveToInitialPanel;
 }
 export default Flicking;

package/declaration/camera/Camera.d.ts

@@ -23,6 +23,7 @@ declare abstract class Camera {
         next: boolean;
     };
     get element(): HTMLElement;
+    get children(): HTMLElement[];
     get position(): number;
     get alignPosition(): number;
     get offset(): number;
@@ -54,7 +55,7 @@ declare abstract class Camera {
     abstract updateRange(): this;
     init(flicking: Flicking): this;
     destroy(): this;
-    lookAt(pos: number): Promise<void>;
+    lookAt(pos: number): void;
     getPrevAnchor(anchor: AnchorPoint): AnchorPoint | null;
     getNextAnchor(anchor: AnchorPoint): AnchorPoint | null;
     getProgressInPanel(panel: Panel): number;
@@ -67,13 +68,13 @@ declare abstract class Camera {
     updateAlignPos(): this;
     updateAnchors(): this;
     updateAdaptiveHeight(): void;
-    updateOffset(): void;
+    updateOffset(): this;
     resetNeedPanelHistory(): this;
+    applyTransform(): this;
     protected _resetInternalValues(): void;
-    protected _refreshVisiblePanels(): Promise<void>;
+    protected _refreshVisiblePanels(): void;
     protected _checkNeedPanel(): void;
     protected _checkReachEnd(prevPos: number, newPos: number): void;
-    protected _applyTransform(): void;
     protected _checkTranslateSupport: () => void;
 }
 export default Camera;

package/declaration/camera/CircularCamera.d.ts

@@ -27,8 +27,9 @@ declare class CircularCamera extends Camera {
     canReach(panel: Panel): boolean;
     canSee(panel: Panel): boolean;
     updateRange(): this;
-    lookAt(pos: number): Promise<void>;
-    protected _applyTransform(): void;
+    updateOffset(): this;
+    lookAt(pos: number): void;
+    applyTransform(): this;
     protected _resetInternalValues(): void;
     private _calcPanelAreaSum;
     private _updateCircularOffset;

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,8 @@ export declare const MOVE_TYPE: {
     readonly FREE_SCROLL: "freeScroll";
     readonly STRICT: "strict";
 };
+export declare const CLASS: {
+    VERTICAL: string;
+    HIDDEN: string;
+    DEFAULT_VIRTUAL: string;
+};

package/declaration/control/Control.d.ts

@@ -19,7 +19,7 @@ declare abstract class Control {
     destroy(): void;
     enable(): this;
     disable(): this;
-    updatePosition(_progressInPanel: number): Promise<void>;
+    updatePosition(_progressInPanel: number): void;
     updateInput(): this;
     resetActive(): this;
     moveToPanel(panel: Panel, { duration, direction, axesEvent }: {
@@ -27,6 +27,7 @@ declare abstract class Control {
         direction?: ValueOf<typeof DIRECTION>;
         axesEvent?: OnRelease;
     }): Promise<void>;
+    setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean): void;
     protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease): void;
     protected _animateToPosition({ position, duration, newActivePanel, axesEvent }: {
         position: number;
@@ -34,6 +35,5 @@ declare abstract class Control {
         newActivePanel: Panel;
         axesEvent?: OnRelease;
     }): Promise<void>;
-    protected _setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean): void;
 }
 export default Control;

package/declaration/control/FreeControl.d.ts

@@ -8,7 +8,7 @@ declare class FreeControl extends Control {
     get stopAtEdge(): FreeControlOptions["stopAtEdge"];
     set stopAtEdge(val: FreeControlOptions["stopAtEdge"]);
     constructor({ stopAtEdge }?: Partial<FreeControlOptions>);
-    updatePosition(progressInPanel: number): Promise<void>;
+    updatePosition(progressInPanel: number): void;
     moveToPosition(position: number, duration: number, axesEvent?: OnRelease): Promise<void>;
 }
 export default FreeControl;

package/declaration/control/StrictControl.d.ts

@@ -13,7 +13,7 @@ declare class StrictControl extends Control {
     destroy(): void;
     updateInput(): this;
     moveToPosition(position: number, duration: number, axesEvent?: OnRelease): Promise<void>;
-    protected _setActive: (newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) => void;
+    setActive: (newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean) => void;
     private _resetIndexRange;
 }
 export default StrictControl;

package/declaration/control/states/State.d.ts

@@ -14,7 +14,8 @@ declare abstract class State {
     protected _delta: number;
     protected _targetPanel: Panel | null;
     get delta(): number;
-    get targetPanel(): Panel;
+    get targetPanel(): Panel | null;
+    set targetPanel(val: Panel | null);
     onEnter(prevState: State): void;
     onHold(ctx: {
         flicking: Flicking;

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/ExternalPanel.d.ts

@@ -1,9 +1,13 @@
 import Panel, { PanelOptions } from "./Panel";
-export interface ExternalPanelOptions<T> extends PanelOptions {
-    externalComponent: T;
+import ExternalElementProvider from "./provider/ExternalElementProvider";
+export interface ExternalPanelOptions extends PanelOptions {
+    elementProvider: ExternalElementProvider;
 }
-declare abstract class ExternalPanel<T = any> extends Panel {
-    protected _externalComponent: T;
-    constructor(options: ExternalPanelOptions<T>);
+declare class ExternalPanel extends Panel {
+    protected _elProvider: ExternalElementProvider;
+    get rendered(): boolean;
+    constructor(options: ExternalPanelOptions);
+    markForShow(): void;
+    markForHide(): void;
 }
 export default ExternalPanel;

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,12 +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;
@@ -34,7 +40,8 @@ declare abstract class Panel {
     };
     get alignPosition(): number;
     get removed(): boolean;
-    abstract get rendered(): any;
+    get rendered(): boolean;
+    get loading(): boolean;
     get range(): {
         min: number;
         max: number;
@@ -45,11 +52,12 @@ declare abstract class Panel {
     get progress(): number;
     get outsetProgress(): number;
     get visibleRatio(): number;
+    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;
@@ -58,7 +66,7 @@ declare abstract class Panel {
             next: number;
         };
     }): this;
-    setSize({ width, height }: Partial<{
+    setSize(size: Partial<{
         width: number | string;
         height: number | string;
     }>): this;
@@ -66,16 +74,15 @@ 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;
     increaseIndex(val: number): this;
     decreaseIndex(val: number): this;
-    increasePosition(val: number): this;
-    decreasePosition(val: number): this;
+    updatePosition(): this;
     toggle(prevPos: number, newPos: number): boolean;
     updateCircularToggleDirection(): this;
-    private _moveBy;
     private _updateAlignPos;
     private _resetInternalStates;
 }

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,6 @@
 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, ExternalPanel, VirtualPanel };
+export type { PanelOptions, ExternalPanelOptions };

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

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

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

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

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

@@ -0,0 +1,10 @@
+import Flicking from "../../../Flicking";
+import ElementProvider from "./ElementProvider";
+declare class VanillaElementProvider implements ElementProvider {
+    private _element;
+    get element(): HTMLElement;
+    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,13 @@
+import Flicking from "../../../Flicking";
+import VirtualPanel from "../VirtualPanel";
+import ElementProvider from "./ElementProvider";
+declare class VirtualElementProvider implements ElementProvider {
+    private _flicking;
+    private _panel;
+    get element(): HTMLElement;
+    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,6 @@
+import ElementProvider from "./ElementProvider";
+import ExternalElementProvider from "./ExternalElementProvider";
+import VanillaElementProvider from "./VanillaElementProvider";
+import VirtualElementProvider from "./VirtualElementProvider";
+export { VanillaElementProvider, VirtualElementProvider };
+export type { ElementProvider, ExternalElementProvider };

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

@@ -3,5 +3,6 @@ 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;

package/declaration/renderer/Renderer.d.ts

@@ -1,40 +1,45 @@
 import Flicking, { FlickingOptions } from "../Flicking";
 import Panel, { PanelOptions } from "../core/panel/Panel";
+import RenderingStrategy from "./strategy/RenderingStrategy";
 export interface RendererOptions {
-    align: FlickingOptions["align"];
+    align?: FlickingOptions["align"];
+    strategy: RenderingStrategy;
 }
 declare abstract class Renderer {
     protected _flicking: Flicking | null;
     protected _panels: Panel[];
-    protected _align: RendererOptions["align"];
+    protected _align: NonNullable<RendererOptions["align"]>;
+    protected _strategy: RendererOptions["strategy"];
     get panels(): Panel[];
     get panelCount(): number;
-    get align(): RendererOptions["align"];
-    set align(val: RendererOptions["align"]);
-    constructor({ align }?: Partial<RendererOptions>);
+    get strategy(): RenderingStrategy;
+    get align(): NonNullable<RendererOptions["align"]>;
+    set align(val: NonNullable<RendererOptions["align"]>);
+    constructor({ align, strategy }: RendererOptions);
     abstract render(): Promise<void>;
-    abstract forceRenderAllPanels(): Promise<void>;
     protected abstract _collectPanels(): void;
-    protected abstract _createPanel(el: any, options: PanelOptions): Panel;
-    protected abstract _insertPanelElements(panels: Panel[], nextSibling: Panel | null): void;
-    protected abstract _removePanelElements(panels: Panel[]): void;
+    protected abstract _createPanel(el: any, options: Omit<PanelOptions, "elementProvider">): Panel;
     init(flicking: Flicking): this;
     destroy(): void;
     getPanel(index: number): Panel | null;
+    forceRenderAllPanels(): Promise<void>;
     updatePanelSize(): this;
     batchInsert(...items: Array<{
         index: number;
         elements: any[];
+        hasDOMInElements: boolean;
     }>): Panel[];
     batchRemove(...items: Array<{
         index: number;
         deleteCount: number;
+        hasDOMInElements: boolean;
     }>): Panel[];
-    protected _getPanelAlign(): string | number;
-    protected _getPanelSizeSum(panels: Panel[]): number;
+    checkPanelContentsReady(checkingPanels: Panel[]): void;
     protected _updateCameraAndControl(): void;
-    protected _updateRenderingPanels(): void;
     protected _showOnlyVisiblePanels(flicking: Flicking): void;
-    protected _updatePanelSizeByGrid(flicking: Flicking): void;
+    protected _updatePanelSizeByGrid(referencePanel: Panel, panels: Panel[]): void;
+    protected _removeAllChildsFromCamera(): void;
+    protected _insertPanelElements(panels: Panel[], nextSibling?: Panel | null): void;
+    protected _removePanelElements(panels: Panel[]): void;
 }
 export default Renderer;

package/declaration/renderer/VanillaRenderer.d.ts

@@ -1,15 +1,10 @@
 import Panel, { PanelOptions } from "../core/panel/Panel";
-import ElementPanel from "../core/panel/ElementPanel";
 import Renderer from "./Renderer";
 declare class VanillaRenderer extends Renderer {
     render(): Promise<void>;
-    forceRenderAllPanels(): Promise<void>;
     protected _collectPanels(): void;
-    protected _createPanel(el: HTMLElement, options: PanelOptions): ElementPanel;
-    protected _insertPanelElements(panels: Panel[], nextSibling: Panel | null): this;
-    protected _removePanelElements(panels: Panel[]): this;
+    protected _createPanel(el: HTMLElement, options: Omit<PanelOptions, "elementProvider">): Panel;
     private _resetPanelElementOrder;
-    private _removeAllChildsFromCamera;
-    private _getRenderingPanelsByOrder;
+    private _removeAllTextNodes;
 }
 export default VanillaRenderer;

package/declaration/renderer/index.d.ts

@@ -1,5 +1,6 @@
 import Renderer, { RendererOptions } from "./Renderer";
 import VanillaRenderer from "./VanillaRenderer";
 import ExternalRenderer from "./ExternalRenderer";
+export * from "./strategy";
 export { Renderer, VanillaRenderer, ExternalRenderer };
 export type { RendererOptions };