@egjs/flicking 4.3.0 → 4.4.2

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,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";
@@ -54,21 +55,24 @@ 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;
@@ -78,6 +82,7 @@ declare class Flicking extends Component<FlickingEvents> {
     private _panelsPerView;
     private _noPanelStyleOverride;
     private _resizeOnContentsReady;
+    private _virtual;
     private _needPanelThreshold;
     private _preventEventsBeforeInit;
     private _deceleration;
@@ -92,8 +97,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 +110,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;
@@ -135,13 +143,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 +176,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, 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 +203,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

@@ -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;
@@ -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(): 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;
+    updateOffset(): this;
     lookAt(pos: number): void;
-    protected _applyTransform(): 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/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;

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[];
     checkPanelContentsReady(checkingPanels: Panel[]): void;
-    protected _getPanelAlign(): string | number;
     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 };

package/declaration/renderer/strategy/NormalRenderingStrategy.d.ts

@@ -0,0 +1,23 @@
+import Flicking from "../../Flicking";
+import Panel, { PanelOptions } from "../../core/panel/Panel";
+import ElementProvider from "../../core/panel/provider/ElementProvider";
+import RenderingStrategy from "./RenderingStrategy";
+export interface NormalRenderingStrategyOptions {
+    providerCtor: new (...args: any) => ElementProvider;
+}
+declare class NormalRenderingStrategy implements RenderingStrategy {
+    private _providerCtor;
+    constructor({ providerCtor }: NormalRenderingStrategyOptions);
+    renderPanels(): void;
+    getRenderingIndexesByOrder(flicking: Flicking): number[];
+    getRenderingElementsByOrder(flicking: Flicking): HTMLElement[];
+    updateRenderingPanels(flicking: Flicking): void;
+    collectPanels(flicking: Flicking, elements: any[]): Panel[];
+    createPanel(element: any, options: Omit<PanelOptions, "elementProvider">): Panel;
+    updatePanelSizes(flicking: Flicking, size: Partial<{
+        width: number | string;
+        height: number | string;
+    }>): void;
+    private _showOnlyVisiblePanels;
+}
+export default NormalRenderingStrategy;

package/declaration/renderer/strategy/RenderingStrategy.d.ts

@@ -0,0 +1,15 @@
+import Flicking from "../../Flicking";
+import Panel, { PanelOptions } from "../../core/panel/Panel";
+interface RenderingStrategy {
+    renderPanels(flicking: Flicking): void;
+    getRenderingIndexesByOrder(flicking: Flicking): number[];
+    getRenderingElementsByOrder(flicking: Flicking): HTMLElement[];
+    updateRenderingPanels(flicking: Flicking): void;
+    createPanel(element: any, options: Omit<PanelOptions, "elementProvider">): Panel;
+    collectPanels(flicking: Flicking, elements: any[]): Panel[];
+    updatePanelSizes(flicking: Flicking, size: Partial<{
+        width: number | string;
+        height: number | string;
+    }>): void;
+}
+export default RenderingStrategy;

package/declaration/renderer/strategy/VirtualRenderingStrategy.d.ts

@@ -0,0 +1,17 @@
+import Flicking from "../../Flicking";
+import { PanelOptions } from "../../core/panel/Panel";
+import VirtualPanel from "../../core/panel/VirtualPanel";
+import RenderingStrategy from "./RenderingStrategy";
+declare class VirtualRenderingStrategy implements RenderingStrategy {
+    renderPanels(flicking: Flicking): void;
+    getRenderingIndexesByOrder(flicking: Flicking): number[];
+    getRenderingElementsByOrder(flicking: Flicking): HTMLElement[];
+    updateRenderingPanels(flicking: Flicking): void;
+    collectPanels(flicking: Flicking): VirtualPanel[];
+    createPanel(_el: any, options: PanelOptions): VirtualPanel;
+    updatePanelSizes(flicking: Flicking, size: Partial<{
+        width: number | string;
+        height: number | string;
+    }>): void;
+}
+export default VirtualRenderingStrategy;

package/declaration/renderer/strategy/index.d.ts

@@ -0,0 +1,5 @@
+import RenderingStrategy from "./RenderingStrategy";
+import NormalRenderingStrategy, { NormalRenderingStrategyOptions } from "./NormalRenderingStrategy";
+import VirtualRenderingStrategy from "./VirtualRenderingStrategy";
+export { NormalRenderingStrategy, VirtualRenderingStrategy };
+export type { RenderingStrategy, NormalRenderingStrategyOptions };

package/declaration/utils.d.ts

@@ -6,7 +6,7 @@ export declare const merge: <From extends object, To extends object>(target: Fro
 export declare const getElement: (el: HTMLElement | string | null, parent?: HTMLElement) => HTMLElement;
 export declare const checkExistence: (value: any, nameOnErrMsg: string) => void;
 export declare const clamp: (x: number, min: number, max: number) => number;
-export declare const getFlickingAttached: (val: Flicking | null, nameToThrowOnError: string) => Flicking;
+export declare const getFlickingAttached: (val: Flicking | null) => Flicking;
 export declare const toArray: <T>(iterable: ArrayLike<T>) => T[];
 export declare const parseAlign: (align: LiteralUnion<ValueOf<typeof ALIGN>> | number, size: number) => number;
 export declare const parseBounce: (bounce: FlickingOptions["bounce"], size: number) => number[];
@@ -16,6 +16,7 @@ export declare const parseArithmeticExpression: (cssValue: number | string) => {
     absolute: number;
 } | null;
 export declare const parseCSSSizeValue: (val: string | number) => string;
+export declare const parsePanelAlign: (align: FlickingOptions["align"]) => string | number;
 export declare const getDirection: (start: number, end: number) => ValueOf<typeof DIRECTION>;
 export declare const parseElement: (element: ElementLike | ElementLike[]) => HTMLElement[];
 export declare const getMinusCompensatedIndex: (idx: number, max: number) => number;
@@ -27,6 +28,11 @@ export declare const findRight: <T>(array: T[], checker: (val: T) => boolean) =>
 export declare const findIndex: <T>(array: T[], checker: (val: T) => boolean) => number;
 export declare const getProgress: (pos: number, prev: number, next: number) => number;
 export declare const getStyle: (el: HTMLElement) => CSSStyleDeclaration;
+export declare const setSize: (el: HTMLElement, { width, height }: Partial<{
+    width: number | string;
+    height: number | string;
+}>) => void;
 export declare const isBetween: (val: number, min: number, max: number) => boolean;
 export declare const circulateIndex: (index: number, max: number) => number;
+export declare const range: (end: number) => number[];
 export declare const setPrototypeOf: (o: any, proto: object) => any;