From 4dede7008ec818ada9c296fa2552dfd10ee41a82 Mon Sep 17 00:00:00 2001 From: Sensa Date: Tue, 4 Feb 2025 10:24:24 -0600 Subject: [PATCH 1/5] Fix deprecated findDOMNode usage in React 19 Update the library to remove the use of deprecated `findDOMNode` and replace it with a ref-based approach. * **NonStrictPanel.tsx** - Replace `findDOMNode` with `React.createRef` to access the DOM element. - Update the `nativeElement` getter to return the current ref. - Modify the `render` method to clone the element with the ref. * **ReactElementProvider.ts** - Update the constructor to accept a ref instead of a `StrictPanel` or `NonStrictPanel`. - Update the `element` getter to return the current ref. - Modify the `show` and `hide` methods to use the ref. * **Flicking.tsx** - Remove the `useFindDOMNode` prop and use a ref-based approach. - Update the `_createPanelRefs` method to use `React.createRef`. - Update the `_getPanels` method to use the new ref-based approach. * **ReactRenderer.ts** - Update the `_collectPanels` method to use the new ref-based approach. - Update the `_createPanel` method to use the new ref-based approach. * **package-lock.json** - Update the version to `4.12.0-snapshot`. --- package-lock.json | 4 ++-- .../src/react-flicking/Flicking.tsx | 4 +--- .../src/react-flicking/NonStrictPanel.tsx | 8 +++++--- .../src/react-flicking/ReactElementProvider.ts | 18 +++++++++++------- .../src/react-flicking/ReactRenderer.ts | 4 ++-- 5 files changed, 21 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index 033a22b7ac..f2d3cfa0cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@egjs/flicking", - "version": "4.11.4-snapshot", + "version": "4.12.0-snapshot", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@egjs/flicking", - "version": "4.11.4-snapshot", + "version": "4.12.0-snapshot", "license": "MIT", "dependencies": { "@egjs/axes": "^3.9.1", diff --git a/packages/react-flicking/src/react-flicking/Flicking.tsx b/packages/react-flicking/src/react-flicking/Flicking.tsx index f12340ffea..4de33c5aa4 100644 --- a/packages/react-flicking/src/react-flicking/Flicking.tsx +++ b/packages/react-flicking/src/react-flicking/Flicking.tsx @@ -332,9 +332,7 @@ class Flicking extends React.Component> : getRenderingPanels(vanillaFlicking, diff(origChildren, origChildren)) : origChildren; - return this.props.useFindDOMNode - ? children.map((child, idx) => {child}) - : children.map((child, idx) => {child}) + return children.map((child, idx) => {child}); } private _isFragment(child: React.ReactElement) { diff --git a/packages/react-flicking/src/react-flicking/NonStrictPanel.tsx b/packages/react-flicking/src/react-flicking/NonStrictPanel.tsx index 1543365df9..6430d01fb1 100644 --- a/packages/react-flicking/src/react-flicking/NonStrictPanel.tsx +++ b/packages/react-flicking/src/react-flicking/NonStrictPanel.tsx @@ -3,18 +3,20 @@ * egjs projects are licensed under the MIT license */ import * as React from "react"; -import { findDOMNode } from "react-dom"; class NonStrictPanel extends React.Component<{ children?: React.ReactElement }> { private _hide: boolean = false; + private _elRef: React.RefObject = React.createRef(); - public get nativeElement() { return findDOMNode(this) as HTMLElement; } + public get nativeElement() { return this._elRef.current!; } public get rendered() { return !this._hide; } public render() { return this._hide ? <> - : this.props.children; + : React.cloneElement(React.Children.only(this.props.children) as React.ReactElement, { + ref: this._elRef + }); } public show() { diff --git a/packages/react-flicking/src/react-flicking/ReactElementProvider.ts b/packages/react-flicking/src/react-flicking/ReactElementProvider.ts index 76205c9cef..2b9f9d0ca3 100644 --- a/packages/react-flicking/src/react-flicking/ReactElementProvider.ts +++ b/packages/react-flicking/src/react-flicking/ReactElementProvider.ts @@ -7,21 +7,25 @@ import StrictPanel from "./StrictPanel"; import NonStrictPanel from "./NonStrictPanel"; class ReactElementProvider implements ElementProvider { - private _el: StrictPanel | NonStrictPanel; + private _elRef: React.RefObject; - public get element() { return this._el.nativeElement; } - public get rendered() { return this._el.rendered; } + public get element() { return this._elRef.current!; } + public get rendered() { return this._elRef.current !== null; } - public constructor(el: StrictPanel | NonStrictPanel) { - this._el = el; + public constructor(elRef: React.RefObject) { + this._elRef = elRef; } public show() { - this._el.show(); + if (this._elRef.current) { + this._elRef.current.style.display = ""; + } } public hide() { - this._el.hide(); + if (this._elRef.current) { + this._elRef.current.style.display = "none"; + } } } diff --git a/packages/react-flicking/src/react-flicking/ReactRenderer.ts b/packages/react-flicking/src/react-flicking/ReactRenderer.ts index 508836b107..217ed05a12 100644 --- a/packages/react-flicking/src/react-flicking/ReactRenderer.ts +++ b/packages/react-flicking/src/react-flicking/ReactRenderer.ts @@ -66,13 +66,13 @@ class ReactRenderer extends ExternalRenderer { protected _collectPanels() { const flicking = getFlickingAttached(this._flicking); const reactFlicking = this._reactFlicking; - const reactPanels = reactFlicking.reactPanels; + const reactPanels = reactFlicking.reactPanels.map(panel => panel.nativeElement); this._panels = this._strategy.collectPanels(flicking, reactPanels); } protected _createPanel(externalComponent: StrictPanel | NonStrictPanel | HTMLDivElement, options: PanelOptions) { - return this._strategy.createPanel(externalComponent, options); + return this._strategy.createPanel(externalComponent.nativeElement, options); } } From f06e0a964b014e3160b15a72e008a05b2ab67034 Mon Sep 17 00:00:00 2001 From: Sensa Date: Tue, 4 Feb 2025 10:50:55 -0600 Subject: [PATCH 2/5] Replace `findDOMNode` with `React.createRef` in `NonStrictPanel.tsx` * Add `nativeElement` getter to return the current ref * Update `ReactElementProvider.ts` constructor to accept a ref instead of a `StrictPanel` or `NonStrictPanel` * Update `element` getter to return the current ref * Replace `useFindDOMNode` prop with a ref-based approach in `Flicking.tsx` * Update `_createPanelRefs` method to use `React.createRef` * Update `_getPanels` method to use the new ref-based approach * Update `_collectPanels` method in `ReactRenderer.ts` to use the new ref-based approach * Update `_createPanel` method to use the new ref-based approach --- .devcontainer/devcontainer.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .devcontainer/devcontainer.json diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..d4caead036 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,5 @@ +{ + "tasks": { + "build": "npm run build:bundle" + } +} \ No newline at end of file From 72a5e87d641f3a673ed955fd352e8308732a7e98 Mon Sep 17 00:00:00 2001 From: Sensa Date: Tue, 4 Feb 2025 11:38:13 -0600 Subject: [PATCH 3/5] --- .gitignore | 3 +-- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index 0340ad9861..d9d768bea8 100644 --- a/.gitignore +++ b/.gitignore @@ -222,5 +222,4 @@ packages/**/*/dist/ demo/_data/version.yml outjs/ -declaration/ -dist/ +declaration/ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index f2d3cfa0cb..275cd349dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@egjs/flicking", - "version": "4.12.0-snapshot", + "version": "4.12.1-react19", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@egjs/flicking", - "version": "4.12.0-snapshot", + "version": "4.12.1-react19", "license": "MIT", "dependencies": { "@egjs/axes": "^3.9.1", diff --git a/package.json b/package.json index 449a03ddbd..d63a4abdfe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@egjs/flicking", - "version": "4.12.0-snapshot", + "version": "4.12.1-react19", "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.", "main": "dist/flicking.cjs.js", "module": "dist/flicking.esm.js", From 6b1808fc6ff5790b3aa0054564bcc23fc34c1cdf Mon Sep 17 00:00:00 2001 From: Sensa Date: Tue, 4 Feb 2025 11:52:35 -0600 Subject: [PATCH 4/5] --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index d9d768bea8..d7a02101e9 100644 --- a/.gitignore +++ b/.gitignore @@ -221,5 +221,4 @@ demo/release packages/**/*/dist/ demo/_data/version.yml -outjs/ declaration/ \ No newline at end of file From 2adb523341969654aaec8235061b7f653ee2fb01 Mon Sep 17 00:00:00 2001 From: Sensa Date: Tue, 4 Feb 2025 12:13:56 -0600 Subject: [PATCH 5/5] --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d63a4abdfe..c245916969 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ }, "repository": { "type": "git", - "url": "https://github.com/naver/egjs-flicking" + "url": "https://github.com/jtwite/egjs-flicking" }, "author": { "name": "NAVER Corp."