@egjs/flicking 4.4.0 → 4.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@egjs/flicking",
-	"version": "4.4.0",
+	"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",

package/src/Flicking.ts

@@ -80,6 +80,8 @@ export interface FlickingOptions {
   autoInit: boolean;
   autoResize: boolean;
   useResizeObserver: boolean;
+  externalRenderer: ExternalRenderer | null;
+  // @deprecated
   renderExternal: {
     renderer: new (options: RendererOptions) => ExternalRenderer;
     rendererOptions: RendererOptions;
@@ -146,6 +148,7 @@ class Flicking extends Component<FlickingEvents> {
   private _autoInit: FlickingOptions["autoInit"];
   private _autoResize: FlickingOptions["autoResize"];
   private _useResizeObserver: FlickingOptions["useResizeObserver"];
+  private _externalRenderer: FlickingOptions["externalRenderer"];
   private _renderExternal: FlickingOptions["renderExternal"];
 
   // Internal State
@@ -599,10 +602,18 @@ class Flicking extends Component<FlickingEvents> {
   /**
    * 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; }
 
@@ -730,6 +741,7 @@ class Flicking extends Component<FlickingEvents> {
     autoInit = true,
     autoResize = true,
     useResizeObserver = true,
+    externalRenderer = null,
     renderExternal = null
   }: Partial<FlickingOptions> = {}) {
     super();
@@ -766,6 +778,7 @@ class Flicking extends Component<FlickingEvents> {
     this._autoInit = autoInit;
     this._autoResize = autoResize;
     this._useResizeObserver = useResizeObserver;
+    this._externalRenderer = externalRenderer;
     this._renderExternal = renderExternal;
 
     // Create core components
@@ -1361,16 +1374,26 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   private _createRenderer(): Renderer {
-    const renderExternal = this._renderExternal;
-
+    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 renderExternal
-      ? this._createExternalRenderer()
-      : this._createVanillaRenderer();
+    return externalRenderer
+      ? externalRenderer
+      : this._renderExternal
+        ? this._createExternalRenderer()
+        : this._createVanillaRenderer();
+  }
+
+  private _createExternalRenderer(): ExternalRenderer {
+    const {
+      renderer,
+      rendererOptions
+    } = this._renderExternal!;
+
+    return new (renderer)({ align: this._align, ...rendererOptions });
   }
 
   private _createVanillaRenderer(): VanillaRenderer {
@@ -1381,21 +1404,11 @@ class Flicking extends Component<FlickingEvents> {
       strategy: virtual
         ? new VirtualRenderingStrategy()
         : new NormalRenderingStrategy({
-          providerCtor: VanillaElementProvider,
-          panelCtor: Panel
+          providerCtor: VanillaElementProvider
         })
     });
   }
 
-  private _createExternalRenderer(): ExternalRenderer {
-    const {
-      renderer,
-      rendererOptions
-    } = this._renderExternal!;
-
-    return new (renderer)({ align: this._align, ...rendererOptions });
-  }
-
   private async _moveToInitialPanel(): Promise<void> {
     const renderer = this._renderer;
     const control = this._control;

package/src/core/Viewport.ts

@@ -124,10 +124,10 @@ class Viewport {
     this._width = el.clientWidth;
     this._height = el.clientHeight;
     this._padding = {
-      left: parseFloat(elStyle.paddingLeft),
-      right: parseFloat(elStyle.paddingRight),
-      top: parseFloat(elStyle.paddingTop),
-      bottom: parseFloat(elStyle.paddingBottom)
+      left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,
+      right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,
+      top: elStyle.paddingTop ? parseFloat(elStyle.paddingTop) : 0,
+      bottom: elStyle.paddingBottom ? parseFloat(elStyle.paddingBottom) : 0
     };
     this._isBorderBoxSizing = elStyle.boxSizing === "border-box";
   }

package/src/core/VirtualManager.ts

@@ -87,7 +87,7 @@ class VirtualManager {
 
     if (!flicking.virtualEnabled) return;
 
-    if (!flicking.renderExternal) {
+    if (!flicking.externalRenderer && !flicking.renderExternal) {
       this._initVirtualElements();
     }
 

package/src/core/panel/index.ts

@@ -3,18 +3,15 @@
  * egjs projects are licensed under the MIT license
  */
 import Panel, { PanelOptions } from "./Panel";
-import ExternalPanel, { ExternalPanelOptions } from "./ExternalPanel";
 import VirtualPanel from "./VirtualPanel";
 
 export * from "./provider";
 
 export {
   Panel,
-  ExternalPanel,
   VirtualPanel
 };
 
 export type {
-  PanelOptions,
-  ExternalPanelOptions
+  PanelOptions
 };

package/src/core/panel/provider/ElementProvider.ts

@@ -6,6 +6,7 @@ import Flicking from "../../../Flicking";
 
 interface ElementProvider {
   element: HTMLElement;
+  rendered: boolean;
   show(flicking: Flicking): void;
   hide(flicking: Flicking): void;
 }

package/src/core/panel/provider/VanillaElementProvider.ts

@@ -11,11 +11,14 @@ import ElementProvider from "./ElementProvider";
  */
 class VanillaElementProvider implements ElementProvider {
   private _element: HTMLElement;
+  private _rendered: boolean;
 
   public get element() { return this._element; }
+  public get rendered() { return this._rendered; }
 
   public constructor(element: HTMLElement) {
     this._element = element;
+    this._rendered = true;
   }
 
   public show(flicking: Flicking): void {
@@ -24,6 +27,7 @@ class VanillaElementProvider implements ElementProvider {
 
     if (el.parentElement !== cameraEl) {
       cameraEl.appendChild(el);
+      this._rendered = true;
     }
   }
 
@@ -33,6 +37,7 @@ class VanillaElementProvider implements ElementProvider {
 
     if (el.parentElement === cameraEl) {
       cameraEl.removeChild(el);
+      this._rendered = false;
     }
   }
 }

package/src/core/panel/provider/VirtualElementProvider.ts

@@ -15,12 +15,15 @@ class VirtualElementProvider implements ElementProvider {
   private _flicking: Flicking;
   private _panel: VirtualPanel;
 
-  public get element() {
+  public get element() { return this._virtualElement.nativeElement; }
+  public get rendered() { return this._virtualElement.visible; }
+
+  private get _virtualElement() {
     const flicking = this._flicking;
     const elIndex = this._panel.elementIndex;
     const virtualElements = flicking.virtual.elements;
 
-    return virtualElements[elIndex].nativeElement;
+    return virtualElements[elIndex];
   }
 
   public constructor(flicking: Flicking) {

package/src/core/panel/provider/index.ts

@@ -3,7 +3,6 @@
  * egjs projects are licensed under the MIT license
  */
 import ElementProvider from "./ElementProvider";
-import ExternalElementProvider from "./ExternalElementProvider";
 import VanillaElementProvider from "./VanillaElementProvider";
 import VirtualElementProvider from "./VirtualElementProvider";
 
@@ -13,6 +12,5 @@ export {
 };
 
 export type {
-  ElementProvider,
-  ExternalElementProvider
+  ElementProvider
 };

package/src/renderer/ExternalRenderer.ts

@@ -7,14 +7,10 @@ import Panel from "../core/panel/Panel";
 import Renderer from "./Renderer";
 
 /**
- *
+ * @internal
  */
 abstract class ExternalRenderer extends Renderer {
   /* eslint-disable @typescript-eslint/no-unused-vars */
-  protected _insertPanelElements(panels: Panel[], nextSibling: Panel | null): void {
-    // DO NOTHING, overrided to prevent an unexpected error
-  }
-
   protected _removePanelElements(panels: Panel[]): void {
     // DO NOTHING, overrided to prevent an unexpected error
   }
@@ -23,34 +19,6 @@ abstract class ExternalRenderer extends Renderer {
     // DO NOTHING, overrided to prevent an unexpected error
   }
   /* eslint-enable @typescript-eslint/no-unused-vars */
-
-  // protected _renderVirtualPanels() {
-  //   const flicking = getFlickingAttached(this._flicking);
-  //   const virtualManager = this._virtualManager;
-
-  //   if (!virtualManager) return;
-
-  //   const elements = virtualManager.elements;
-  //   const visiblePanels = flicking.visiblePanels as VirtualPanel[];
-  //   const invisibles = elements.map((_, idx) => idx);
-
-  //   visiblePanels.forEach(panel => {
-  //     const virtualEl = panel.virtualElement;
-
-  //     invisibles[virtualEl.index] = -1;
-  //     virtualEl.renderingPanel = panel;
-  //     virtualEl.show();
-  //     panel.markForShow();
-  //   });
-
-  //   invisibles.filter(val => val >= 0)
-  //     .forEach(idx => {
-  //       const virtualEl = elements[idx];
-  //       virtualEl.hide();
-  //       virtualEl.renderingPanel?.markForHide();
-  //       virtualEl.renderingPanel = null;
-  //     });
-  // }
 }
 
 export default ExternalRenderer;

package/src/renderer/strategy/NormalRenderingStrategy.ts

@@ -12,17 +12,14 @@ import RenderingStrategy from "./RenderingStrategy";
 
 export interface NormalRenderingStrategyOptions {
   providerCtor: new (...args: any) => ElementProvider;
-  panelCtor: new (options: PanelOptions) => Panel;
 }
 
 
 class NormalRenderingStrategy implements RenderingStrategy {
   private _providerCtor: NormalRenderingStrategyOptions["providerCtor"];
-  private _panelCtor: NormalRenderingStrategyOptions["panelCtor"];
 
-  public constructor({ providerCtor, panelCtor }: NormalRenderingStrategyOptions) {
+  public constructor({ providerCtor }: NormalRenderingStrategyOptions) {
     this._providerCtor = providerCtor;
-    this._panelCtor = panelCtor;
   }
 
   public renderPanels() {
@@ -58,7 +55,7 @@ class NormalRenderingStrategy implements RenderingStrategy {
   ) {
     const align = parsePanelAlign(flicking.renderer.align);
 
-    return elements.map((el, index) => new this._panelCtor({
+    return elements.map((el, index) => new Panel({
       index,
       elementProvider: new this._providerCtor(el),
       align,
@@ -70,7 +67,7 @@ class NormalRenderingStrategy implements RenderingStrategy {
     element: any,
     options: Omit<PanelOptions, "elementProvider">
   ) {
-    return new this._panelCtor({
+    return new Panel({
       ...options,
       elementProvider: new this._providerCtor(element)
     });

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

@@ -1,13 +0,0 @@
-import Panel, { PanelOptions } from "./Panel";
-import ExternalElementProvider from "./provider/ExternalElementProvider";
-export interface ExternalPanelOptions extends PanelOptions {
-    elementProvider: ExternalElementProvider;
-}
-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/provider/ExternalElementProvider.d.ts

@@ -1,8 +0,0 @@
-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/src/core/panel/ExternalPanel.ts

@@ -1,40 +0,0 @@
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
-import Panel, { PanelOptions } from "./Panel";
-import ExternalElementProvider from "./provider/ExternalElementProvider";
-
-export interface ExternalPanelOptions extends PanelOptions {
-  elementProvider: ExternalElementProvider;
-}
-
-/**
- * A slide data component that holds information of a single HTMLElement
- * @ko 슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다
- */
-class ExternalPanel extends Panel {
-  protected _elProvider: ExternalElementProvider;
-
-  public get rendered() { return this._elProvider.rendered; }
-
-  public constructor(options: ExternalPanelOptions) {
-    super(options);
-
-    this._elProvider = options.elementProvider;
-  }
-
-  public markForShow() {
-    this._elProvider.show(this._flicking);
-
-    return super.markForShow();
-  }
-
-  public markForHide() {
-    this._elProvider.hide(this._flicking);
-
-    return super.markForHide();
-  }
-}
-
-export default ExternalPanel;

package/src/core/panel/provider/ExternalElementProvider.ts

@@ -1,15 +0,0 @@
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
-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;