From 37506db28d170f15836553065a5c8487d45cea02 Mon Sep 17 00:00:00 2001 From: Ndekocode Date: Mon, 26 Aug 2024 18:27:11 +0200 Subject: [PATCH 1/5] refactor: update to latest react version --- index.d.ts | 16 ++++++--- index.js | 91 +++++++++++++++++++++++++++++----------------------- package.json | 14 ++++++-- 3 files changed, 73 insertions(+), 48 deletions(-) diff --git a/index.d.ts b/index.d.ts index b2575d6..263afdf 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,8 +1,16 @@ -import React from 'react' -import { GitHubButtonProps } from 'github-buttons' +import React from 'react'; -interface ReactGitHubButtonProps extends GitHubButtonProps { +export interface GitHubButtonProps extends React.AnchorHTMLAttributes { + href: string; + 'data-color-scheme'?: 'no-preference' | 'light' | 'dark'; + 'data-icon'?: 'octicon-star' | 'octicon-repo-forked' | 'octicon-eye' | 'octicon-issue-opened' | 'octicon-git-pull-request'; + 'data-size'?: 'large' | 'small'; + 'data-show-count'?: boolean | 'true' | 'false'; + 'data-text'?: string; + 'aria-label'?: string; children?: React.ReactNode; } -export default class GitHubButton extends React.PureComponent {} +declare const GitHubButton: React.FC; + +export default GitHubButton; \ No newline at end of file diff --git a/index.js b/index.js index 142940e..2eea8d0 100644 --- a/index.js +++ b/index.js @@ -1,42 +1,51 @@ -import React, { PureComponent } from 'react' - -class GitHubButton extends PureComponent { - constructor (props) { - super(props) - this.$ = React.createRef() - this._ = React.createRef() - } - render () { - return React.createElement('span', { ref: this.$ }, React.createElement('a', { ...this.props, ref: this._ }, this.props.children)) - } - componentDidMount () { - this.paint() - } - getSnapshotBeforeUpdate () { - this.reset() - return null - } - componentDidUpdate () { - this.paint() - } - componentWillUnmount () { - this.reset() - } - paint () { - const _ = this.$.current.appendChild(document.createElement('span')) - import(/* webpackMode: "eager" */ 'github-buttons').then(({ render }) => { - if (this._.current != null) { - render(_.appendChild(this._.current), function (el) { - try { - _.parentNode.replaceChild(el, _) - } catch (_) {} - }) +import React, { useCallback, useEffect, useRef } from "react"; + +const GitHubButton = React.memo(({ children, ...props }) => { + const containerRef = useRef(null); + const buttonRef = useRef(null); + + const paint = useCallback(() => { + if (!containerRef.current) return; + + const tempSpan = document.createElement("span"); + containerRef.current.appendChild(tempSpan); + + import(/* webpackMode: "eager" */ "github-buttons") + .then(({ render }) => { + if (buttonRef.current && containerRef.current) { + render(tempSpan.appendChild(buttonRef.current), (el) => { + containerRef.current?.contains(tempSpan) && + containerRef.current.replaceChild(el, tempSpan); + }); + } + }) + .catch((error) => { + console.error("Error loading github-buttons:", error); + containerRef.current?.contains(tempSpan) && containerRef.current.removeChild(tempSpan); + }); }, []); + + useEffect(() => { + paint(); + + return () => { + if (containerRef.current) { + const lastChild = containerRef.current.lastChild; + if (lastChild && lastChild !== buttonRef.current) { + containerRef.current.removeChild(lastChild); + } } - }) - } - reset () { - this.$.current.replaceChild(this._.current, this.$.current.lastChild) - } -} - -export default GitHubButton + }; + }, [paint]); + + return ( + + + {children} + + + ); +}); + +GitHubButton.displayName = "GitHubButton"; + +export default GitHubButton; diff --git a/package.json b/package.json index 2255636..1ef47fd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-github-btn", - "version": "1.4.0", + "version": "2.0.0", "description": "GitHub button component for React.js", "main": "index.js", "type": "module", @@ -27,7 +27,15 @@ "dependencies": { "github-buttons": "^2.22.0" }, + "devDependencies": { + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", + "typescript": "^4.5.0" + }, "peerDependencies": { - "react": ">=16.3.0" + "react":"^18.3.1" + }, + "engines": { + "node": ">=14" } -} +} \ No newline at end of file From 94e56e241c435ae77be899073d5c869c45a69e38 Mon Sep 17 00:00:00 2001 From: Ndekocode Date: Mon, 26 Aug 2024 20:03:44 +0200 Subject: [PATCH 2/5] refactor: extend an intersection type --- index.d.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index 263afdf..d75898b 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,6 +1,6 @@ import React from 'react'; -export interface GitHubButtonProps extends React.AnchorHTMLAttributes { +export interface GitHubButtonProps { href: string; 'data-color-scheme'?: 'no-preference' | 'light' | 'dark'; 'data-icon'?: 'octicon-star' | 'octicon-repo-forked' | 'octicon-eye' | 'octicon-issue-opened' | 'octicon-git-pull-request'; @@ -11,6 +11,8 @@ export interface GitHubButtonProps extends React.AnchorHTMLAttributes; +export interface ReactGitHubButtonProps extends GitHubButtonProps & React.AnchorHTMLAttributes {} + +declare const GitHubButton: React.FC; export default GitHubButton; \ No newline at end of file From cd6833ca416862b32a6c303bc6a3d476bfda45a6 Mon Sep 17 00:00:00 2001 From: Ndekocode Date: Mon, 26 Aug 2024 20:10:53 +0200 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20correct=20the=20typescript=20error?= =?UTF-8?q?=20=E2=80=98=E2=80=99,=E2=80=98=20expected.ts(1005)=E2=80=99=20?= =?UTF-8?q?by=20using=20=E2=80=98type=E2=80=99=20instead=20of=20=E2=80=98i?= =?UTF-8?q?nterface=E2=80=99.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index d75898b..3046cb0 100644 --- a/index.d.ts +++ b/index.d.ts @@ -11,7 +11,7 @@ export interface GitHubButtonProps { children?: React.ReactNode; } -export interface ReactGitHubButtonProps extends GitHubButtonProps & React.AnchorHTMLAttributes {} +export type ReactGitHubButtonProps = GitHubButtonProps & React.AnchorHTMLAttributes; declare const GitHubButton: React.FC; From 8799a3fe3bec6b739b7d4f058daa7a0534317fc6 Mon Sep 17 00:00:00 2001 From: Ndekocode Date: Mon, 26 Aug 2024 20:28:30 +0200 Subject: [PATCH 4/5] fix: Ensure correct rendering by checking lastChild and handling stale props --- index.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 2eea8d0..45b722e 100644 --- a/index.js +++ b/index.js @@ -12,17 +12,31 @@ const GitHubButton = React.memo(({ children, ...props }) => { import(/* webpackMode: "eager" */ "github-buttons") .then(({ render }) => { - if (buttonRef.current && containerRef.current) { + if ( + buttonRef.current && + containerRef.current && + containerRef.current.lastChild === tempSpan + ) { render(tempSpan.appendChild(buttonRef.current), (el) => { - containerRef.current?.contains(tempSpan) && + if ( + containerRef.current && + containerRef.current.lastChild === tempSpan + ) { containerRef.current.replaceChild(el, tempSpan); + } }); } }) .catch((error) => { console.error("Error loading github-buttons:", error); - containerRef.current?.contains(tempSpan) && containerRef.current.removeChild(tempSpan); - }); }, []); + if ( + containerRef.current && + containerRef.current.lastChild === tempSpan + ) { + containerRef.current.removeChild(tempSpan); + } + }); + }, []); useEffect(() => { paint(); From 0708ed27637fa3ce66bf9813858ae87237411f56 Mon Sep 17 00:00:00 2001 From: Ndekocode Date: Mon, 26 Aug 2024 20:31:04 +0200 Subject: [PATCH 5/5] refactor: update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1ef47fd..829368b 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "typescript": "^4.5.0" }, "peerDependencies": { - "react":"^18.3.1" + "react":">=18.0.0" }, "engines": { "node": ">=14"