@egjs/react-flicking 4.15.0 → 4.16.0-beta.1

package/src/react-flicking/Flicking.tsx

@@ -2,30 +2,31 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import * as React from "react";
+
 import Component from "@egjs/component";
-import ListDiffer, { diff, DiffResult } from "@egjs/list-differ";
 import VanillaFlicking, {
-  FlickingOptions,
-  VirtualRenderingStrategy,
   EVENTS,
-  withFlickingMethods,
-  sync,
-  getRenderingPanels,
+  FlickingEvents,
+  FlickingOptions,
   getDefaultCameraTransform,
+  getRenderingPanels,
+  NormalRenderingStrategy,
   Plugin,
   range,
-  NormalRenderingStrategy,
-  FlickingEvents,
+  sync,
+  VirtualRenderingStrategy,
+  withFlickingMethods
 } from "@egjs/flicking";
+import ListDiffer, { DiffResult, diff } from "@egjs/list-differ";
+import * as React from "react";
 
 import { DEFAULT_PROPS } from "./consts";
-import { FlickingProps } from "./types";
+import NonStrictPanel from "./NonStrictPanel";
+import ReactElementProvider from "./ReactElementProvider";
 import ReactRenderer, { ReactRendererOptions } from "./ReactRenderer";
 import StrictPanel from "./StrictPanel";
-import NonStrictPanel from "./NonStrictPanel";
+import { FlickingProps } from "./types";
 import ViewportSlot from "./ViewportSlot";
-import ReactElementProvider from "./ReactElementProvider";
 
 class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {
   public static defaultProps: FlickingProps = DEFAULT_PROPS;
@@ -36,11 +37,15 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
   protected _jsxDiffer: ListDiffer<React.ReactElement>;
   protected _viewportElement: HTMLElement;
   private _diffResult: DiffResult<React.ReactElement> | null;
-  private _renderEmitter = new Component<{ render: void }>();
+  private _renderEmitter = new Component<{ render: undefined }>();
   protected _prevChildren: React.ReactElement[];
 
-  public get reactPanels() { return this._panels.map(panel => panel.current!); }
-  public get renderEmitter() { return this._renderEmitter; }
+  public get reactPanels() {
+    return this._panels.map(panel => panel.current!);
+  }
+  public get renderEmitter() {
+    return this._renderEmitter;
+  }
 
   public constructor(props: Partial<FlickingProps & FlickingOptions>) {
     super(props);
@@ -55,20 +60,18 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
     const rendererOptions: ReactRendererOptions = {
       reactFlicking: this,
       align: props.align,
-      strategy: props.virtual && props.panelsPerView > 0
-        ? new VirtualRenderingStrategy()
-        : new NormalRenderingStrategy({
-          providerCtor: ReactElementProvider
-        })
+      strategy:
+        props.virtual && props.panelsPerView > 0
+          ? new VirtualRenderingStrategy()
+          : new NormalRenderingStrategy({
+              providerCtor: ReactElementProvider
+            })
     };
 
-    const flicking = new VanillaFlicking(
-      this._viewportElement,
-      {
-        ...props,
-        externalRenderer: new ReactRenderer(rendererOptions)
-      },
-    );
+    const flicking = new VanillaFlicking(this._viewportElement, {
+      ...props,
+      externalRenderer: new ReactRenderer(rendererOptions)
+    });
 
     this._vanillaFlicking = flicking;
 
@@ -168,23 +171,28 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
 
     const { viewportClasses, cameraClasses, cameraProps } = this._getClasses(attributes, props);
 
-    const panels = !!props.virtual && (props.panelsPerView ?? -1) > 0
-      ? this._getVirtualPanels()
-      : this._getPanels();
+    const panels = !!props.virtual && (props.panelsPerView ?? -1) > 0 ? this._getVirtualPanels() : this._getPanels();
 
     return (
-      <Viewport {...attributes} className={viewportClasses.join(" ")} ref={(e?: HTMLElement) => {
-        e && (this._viewportElement = e);
-      }}>
+      <Viewport
+        {...attributes}
+        className={viewportClasses.join(" ")}
+        ref={(e?: HTMLElement) => {
+          e && (this._viewportElement = e);
+        }}
+      >
         <Camera className={cameraClasses.join(" ")} {...cameraProps}>
-          { panels }
+          {panels}
         </Camera>
-        { this._getViewportSlot() }
+        {this._getViewportSlot()}
       </Viewport>
     );
   }
 
-  private _createPanelRefs(props: this["props"], children: Array<React.ReactElement<any>>): React.RefObject<StrictPanel | NonStrictPanel | HTMLDivElement>[] {
+  private _createPanelRefs(
+    props: this["props"],
+    children: Array<React.ReactElement<any>>
+  ): React.RefObject<StrictPanel | NonStrictPanel | HTMLDivElement>[] {
     const panelsPerView = props.panelsPerView ?? -1;
 
     return panelsPerView > 0 && !!props.virtual
@@ -227,12 +235,10 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
   protected _getClasses(attributes: { [key: string]: any }, props: typeof this.props) {
     const flicking = this._vanillaFlicking;
 
-    const initialized = flicking && flicking.initialized;
+    const initialized = flicking?.initialized;
     const viewportClasses: string[] = ["flicking-viewport"];
     const cameraClasses: string[] = ["flicking-camera"];
-    const isHorizontal = flicking
-      ? flicking.horizontal
-      : props.horizontal ?? true;
+    const isHorizontal = flicking ? flicking.horizontal : (props.horizontal ?? true);
 
     if (!isHorizontal) {
       viewportClasses.push("vertical");
@@ -247,16 +253,19 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
       cameraClasses.push(props.cameraClass);
     }
 
-    const cameraProps = !initialized && props.firstPanelSize
-      ? { style: {
-        transform: getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)
-      }}
-      : {};
+    const cameraProps =
+      !initialized && props.firstPanelSize
+        ? {
+            style: {
+              transform: getDefaultCameraTransform(this.props.align, this.props.horizontal, this.props.firstPanelSize)
+            }
+          }
+        : {};
 
     return {
       viewportClasses,
       cameraClasses,
-      cameraProps,
+      cameraProps
     };
   }
 
@@ -281,43 +290,42 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
   }
 
   protected _getViewportSlot() {
-    return (React.Children.toArray(this.props.children) as Array<React.ReactElement<any>>)
-      .filter(child => child.type === ViewportSlot);
+    return (React.Children.toArray(this.props.children) as Array<React.ReactElement<any>>).filter(
+      child => child.type === ViewportSlot
+    );
   }
 
   private _unpackFragment(child: React.ReactElement) {
     return this._isFragment(child)
-      ? React.Children.toArray(child.props.children)
-        .reduce((allChilds: React.ReactElement[], fragChild: React.ReactElement) => [...allChilds, ...this._unpackFragment(fragChild)], [] as React.ReactElement[])
+      ? React.Children.toArray(child.props.children).reduce(
+          (allChilds: React.ReactElement[], fragChild: React.ReactElement) => [
+            ...allChilds,
+            ...this._unpackFragment(fragChild)
+          ],
+          [] as React.ReactElement[]
+        )
       : [child];
   }
 
   private _getVirtualPanels() {
-    const {
-      panelClass = "flicking-panel"
-    } = this.props.virtual!;
+    const { panelClass = "flicking-panel" } = this.props.virtual!;
     const panelsPerView = this.props.panelsPerView!;
     const flicking = this._vanillaFlicking;
-    const initialized = flicking && flicking.initialized;
+    const initialized = flicking?.initialized;
 
     const renderingIndexes = initialized
       ? flicking.renderer.strategy.getRenderingIndexesByOrder(flicking)
       : range(panelsPerView + 1);
 
-    const firstPanel = flicking && flicking.panels[0];
-    const size = firstPanel
-      ? flicking.horizontal
-        ? { width: firstPanel.size }
-        : { height: firstPanel.size }
-      : {};
+    const firstPanel = flicking?.panels[0];
+    const size = firstPanel ? (flicking.horizontal ? { width: firstPanel.size } : { height: firstPanel.size }) : {};
 
     return renderingIndexes.map(idx => {
-      return <StrictPanel key={idx} ref={this._panels[idx] as any}>
-          <div
-          data-element-index={idx}
-          className={panelClass}
-          style={size} />
-        </StrictPanel>;
+      return (
+        <StrictPanel key={idx} ref={this._panels[idx] as any}>
+          <div data-element-index={idx} className={panelClass} style={size} />
+        </StrictPanel>
+      );
     });
   }
 
@@ -326,13 +334,17 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
     const vanillaFlicking = this._vanillaFlicking;
     const diffResult = this._diffResult;
 
-    const children: React.ReactElement[] = vanillaFlicking && vanillaFlicking.initialized
+    const children: React.ReactElement[] = vanillaFlicking?.initialized
       ? diffResult
         ? getRenderingPanels(vanillaFlicking, diffResult)
         : getRenderingPanels(vanillaFlicking, diff(origChildren, origChildren))
       : origChildren;
 
-      return children.map((child, idx) => <StrictPanel key={child.key!} ref={this._panels[idx] as any}>{child}</StrictPanel>);
+    return children.map((child, idx) => (
+      <StrictPanel key={child.key!} ref={this._panels[idx] as any}>
+        {child}
+      </StrictPanel>
+    ));
   }
 
   private _isFragment(child: React.ReactElement) {
@@ -344,5 +356,5 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
   }
 }
 
-interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking { }
+interface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, VanillaFlicking {}
 export default Flicking;

package/src/react-flicking/NonStrictPanel.tsx

@@ -8,16 +8,24 @@ class NonStrictPanel extends React.Component<{ children?: React.ReactElement }>
   private _hide: boolean = false;
   private _elRef: React.RefObject<HTMLElement> = React.createRef();
 
-  public get nativeElement() { return this._elRef.current!; }
-  public get rendered() { return !this._hide; }
-  public get elRef() { return this._elRef; }
+  public get nativeElement() {
+    return this._elRef.current!;
+  }
+  public get rendered() {
+    return !this._hide;
+  }
+  public get elRef() {
+    return this._elRef;
+  }
 
   public render() {
-    return this._hide
-      ? <></>
-      : React.cloneElement(React.Children.only(this.props.children) as React.ReactElement, {
+    return this._hide ? (
+      <></>
+    ) : (
+      React.cloneElement(React.Children.only(this.props.children) as React.ReactElement, {
         ref: this._elRef
-      });
+      })
+    );
   }
 
   public show() {

package/src/react-flicking/ReactElementProvider.ts

@@ -4,14 +4,16 @@
  */
 import { ElementProvider } from "@egjs/flicking";
 import StrictPanel from "./StrictPanel";
-import NonStrictPanel from "./NonStrictPanel";
-import React from "react";
 
 class ReactElementProvider implements ElementProvider {
   private _el: StrictPanel;
 
-  public get element() { return this._el?.nativeElement }
-  public get rendered() { return this._el?.rendered; }
+  public get element() {
+    return this._el?.nativeElement;
+  }
+  public get rendered() {
+    return this._el?.rendered;
+  }
 
   public constructor(el: StrictPanel) {
     this._el = el;

package/src/react-flicking/ReactRenderer.ts

@@ -2,11 +2,10 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import { ExternalRenderer, PanelOptions, RendererOptions, getFlickingAttached } from "@egjs/flicking";
+import { ExternalRenderer, getFlickingAttached, PanelOptions, RendererOptions } from "@egjs/flicking";
 
 import ReactFlicking from "./Flicking";
 import StrictPanel from "./StrictPanel";
-import NonStrictPanel from "./NonStrictPanel";
 
 export interface ReactRendererOptions extends RendererOptions {
   reactFlicking: ReactFlicking;

package/src/react-flicking/StrictPanel.tsx

@@ -9,14 +9,18 @@ class StrictPanel extends React.Component<{ children?: React.ReactElement }> {
 
   private _elRef: React.RefObject<HTMLElement> = React.createRef();
 
-  public get nativeElement() { return this._elRef.current!; }
-  public get rendered() { return !this._hide; }
-  public get elRef() { return this._elRef; }
+  public get nativeElement() {
+    return this._elRef.current!;
+  }
+  public get rendered() {
+    return !this._hide;
+  }
+  public get elRef() {
+    return this._elRef;
+  }
 
   public render() {
-    return this._hide
-      ? <></>
-      : this._getElement();
+    return this._hide ? <></> : this._getElement();
   }
 
   public show() {

package/src/react-flicking/consts.ts

@@ -3,23 +3,23 @@
  * egjs projects are licensed under the MIT license
  */
 import {
-  SelectEvent,
-  NeedPanelEvent,
-  VisibleChangeEvent,
-  HoldStartEvent,
+  AfterResizeEvent,
+  BeforeResizeEvent,
+  ChangedEvent,
   HoldEndEvent,
-  MoveStartEvent,
-  MoveEvent,
+  HoldStartEvent,
   MoveEndEvent,
-  WillChangeEvent,
-  ChangedEvent,
-  WillRestoreEvent,
-  RestoredEvent,
-  ReadyEvent,
-  BeforeResizeEvent,
-  AfterResizeEvent,
+  MoveEvent,
+  MoveStartEvent,
+  NeedPanelEvent,
+  PanelChangeEvent,
   ReachEdgeEvent,
-  PanelChangeEvent
+  ReadyEvent,
+  RestoredEvent,
+  SelectEvent,
+  VisibleChangeEvent,
+  WillChangeEvent,
+  WillRestoreEvent
 } from "@egjs/flicking";
 
 import { FlickingProps } from "./types";

package/src/react-flicking/index.ts

@@ -2,18 +2,15 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import Flicking from "./Flicking";
+
 import CrossFlicking from "./CrossFlicking";
 import CrossGroup from "./CrossGroup";
+import Flicking from "./Flicking";
 import ViewportSlot from "./ViewportSlot";
 
 export * from "@egjs/flicking";
-export * from "./types";
 export * from "./reactive";
+export * from "./types";
 
-export {
-  CrossFlicking,
-  CrossGroup,
-  ViewportSlot,
-}
+export { CrossFlicking, CrossGroup, ViewportSlot };
 export default Flicking;

package/src/react-flicking/index.umd.ts

@@ -3,8 +3,8 @@
  * egjs projects are licensed under the MIT license
  */
 import Flicking from "./Flicking";
-import ViewportSlot from "./ViewportSlot";
 import { useFlickingReactiveAPI } from "./reactive";
+import ViewportSlot from "./ViewportSlot";
 
 (Flicking as any).ViewportSlot = ViewportSlot;
 (Flicking as any).useFlickingReactiveAPI = useFlickingReactiveAPI;

package/src/react-flicking/reactive.ts

@@ -1,11 +1,11 @@
+import { useReactive } from "@cfcs/react";
 import { FlickingReactiveAPIOptions, flickingReactiveAPIAdapter } from "@egjs/flicking";
 import { RefObject } from "react";
 import Flicking from "./Flicking";
-import { useReactive } from "@cfcs/react";
 
 export const useFlickingReactiveAPI = (flickingRef: RefObject<Flicking>, options?: FlickingReactiveAPIOptions) => {
   return useReactive(flickingReactiveAPIAdapter, () => ({
     flicking: flickingRef.current ?? undefined,
     options
-  }))
-}
+  }));
+};

package/src/react-flicking/types.ts

@@ -2,28 +2,29 @@
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
  */
-import ReactFlicking from "./Flicking";
+
 import {
-  SelectEvent,
-  NeedPanelEvent,
-  VisibleChangeEvent,
-  HoldStartEvent,
+  AfterResizeEvent,
+  BeforeResizeEvent,
+  ChangedEvent,
   HoldEndEvent,
-  MoveStartEvent,
-  MoveEvent,
+  HoldStartEvent,
   MoveEndEvent,
-  WillChangeEvent,
-  ChangedEvent,
-  WillRestoreEvent,
-  RestoredEvent,
-  ReadyEvent,
-  BeforeResizeEvent,
-  AfterResizeEvent,
-  ReachEdgeEvent,
+  MoveEvent,
+  MoveStartEvent,
+  NeedPanelEvent,
   PanelChangeEvent,
   Plugin,
-  Status
+  ReachEdgeEvent,
+  ReadyEvent,
+  RestoredEvent,
+  SelectEvent,
+  Status,
+  VisibleChangeEvent,
+  WillChangeEvent,
+  WillRestoreEvent
 } from "@egjs/flicking";
+import ReactFlicking from "./Flicking";
 
 export interface FlickingProps {
   viewportTag: keyof JSX.IntrinsicElements;
@@ -54,4 +55,3 @@ export interface FlickingProps {
   onPanelChange: (e: PanelChangeEvent<ReactFlicking>) => any;
   [key: string]: any;
 }
-

package/tsconfig.json

@@ -1,18 +1,13 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strictNullChecks": true,
     "esModuleInterop": true,
     "importHelpers": true,
     "experimentalDecorators": true,
-    "suppressImplicitAnyIndexErrors": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
@@ -24,7 +19,5 @@
     "noEmit": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }

package/vite.config.ts

@@ -0,0 +1,38 @@
+import { createViteConfig } from "../../config/vite-build-helper";
+// @ts-expect-error: resolveJsonModule issue in build environment
+import pkg from "./package.json";
+
+const name = "ReactFlicking";
+const external = {
+  react: "React",
+  "react-dom": "ReactDOM",
+  "@egjs/flicking": "Flicking",
+  "@egjs/component": "Component",
+  "@egjs/list-differ": "eg.ListDiffer"
+};
+
+// Determine build target based on environment variable
+// usage: VITE_BUILD_FORMAT=umd vite build
+const buildFormat = process.env.VITE_BUILD_FORMAT || "esm";
+
+let input = "src/react-flicking/index.ts";
+let formats: any[] = ["es"];
+
+if (buildFormat === "cjs") {
+  input = "src/react-flicking/index.umd.ts";
+  formats = ["cjs"];
+} else if (buildFormat === "umd") {
+  input = "src/react-flicking/index.umd.ts";
+  formats = ["umd"];
+}
+// Default (esm) uses index.ts
+
+export default createViteConfig({
+  input,
+  name,
+  packageJson: pkg,
+  external,
+  formats,
+  tsconfig: "tsconfig.build.json", // Use build specific tsconfig
+  output: "dist/flicking" // Base name for output files
+});

package/vite.dev.config.ts

@@ -0,0 +1,58 @@
+import path from "node:path";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig(({ mode }) => {
+  const useBuild = mode === "production";
+
+  return {
+    plugins: [
+      react({
+        babel: {
+          plugins: [
+            ["@babel/plugin-proposal-decorators", { legacy: true }],
+            ["@babel/plugin-proposal-class-properties", { loose: true }]
+          ]
+        }
+      })
+    ],
+    root: path.resolve(__dirname, "dev"),
+    server: {
+      port: 3001,
+      open: true,
+      fs: {
+        allow: [".."]
+      }
+    },
+    resolve: {
+      alias: useBuild
+        ? {
+            // 빌드 검증 모드 - 빌드 결과물 사용
+            "@dev/flicking": path.resolve(__dirname, "../flicking/dist/flicking.esm.js"),
+            "@dev/react-flicking": path.resolve(__dirname, "dist/flicking.esm.js"),
+            "@dev/plugins": path.resolve(__dirname, "../flicking-plugins/dist/plugins.esm.js"),
+            "@dev/flicking-css": path.resolve(__dirname, "../flicking/dist/flicking.css"),
+            "@dev/plugins-css": path.resolve(__dirname, "../flicking-plugins/dist/flicking-plugins.css"),
+            // 소스코드 내부의 @egjs/flicking 참조용
+            "@egjs/flicking": path.resolve(__dirname, "../flicking/dist/flicking.esm.js")
+          }
+        : {
+            // 개발 모드 - 모든 소스 직접 참조 (HMR!)
+            "@dev/flicking": path.resolve(__dirname, "../flicking/src/index.ts"),
+            "@dev/react-flicking": path.resolve(__dirname, "src/react-flicking/index.ts"),
+            "@dev/plugins": path.resolve(__dirname, "../flicking-plugins/src/index.ts"),
+            "@dev/flicking-css": path.resolve(__dirname, "../flicking/sass/flicking.sass"),
+            "@dev/plugins-css": path.resolve(__dirname, "../flicking-plugins/css/all.css"),
+            // 소스코드 내부의 @egjs/flicking 참조용
+            "@egjs/flicking": path.resolve(__dirname, "../flicking/src/index.ts")
+          },
+      extensions: [".ts", ".tsx", ".js", ".jsx"]
+    },
+    optimizeDeps: {
+      include: ["react", "react-dom", "@egjs/axes", "@egjs/component", "@egjs/imready", "@egjs/list-differ"]
+    },
+    define: {
+      __DEV__: JSON.stringify(!useBuild)
+    }
+  };
+});