mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
fix: React version mismatch, add forward refs
This commit is contained in:
Wesley Luyten
@@ -11,14 +11,14 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@vjs-10/react": "workspace:*",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"tailwindcss": "^4.1.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/vite": "^4.1.0",
|
||||
"@types/react": "^19.1.13",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"@vitejs/plugin-react": "^5.0.3",
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.6"
|
||||
|
||||
+2
-1
@@ -43,7 +43,8 @@
|
||||
"eslint-plugin-react-refresh": "^0.4.21",
|
||||
"lint-staged": "^16.2.0",
|
||||
"prettier": "^3.6.2",
|
||||
"react": "^18.3.1",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"simple-git-hooks": "^2.13.1",
|
||||
"turbo": "^2.5.8",
|
||||
"typescript": "^5.9.2"
|
||||
|
||||
@@ -43,8 +43,8 @@
|
||||
"react": ">=16.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.0.0",
|
||||
"react": "^19.0.0",
|
||||
"@types/react": "^18.0.0",
|
||||
"react": "^18.0.0",
|
||||
"tsdown": "^0.15.4",
|
||||
"typescript": "^5.9.2"
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { Placement } from '@floating-ui/react';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
import React, { createContext, useContext, useState } from 'react';
|
||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||
|
||||
import {
|
||||
autoUpdate,
|
||||
@@ -117,7 +117,7 @@ function PopoverPositioner({ side = 'top', sideOffset = 5, children }: PopoverPo
|
||||
const { open, refs, floatingStyles, updatePositioning } = usePopoverContext();
|
||||
|
||||
// Update positioning when props change
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
updatePositioning(side, sideOffset);
|
||||
}, [side, sideOffset, updatePositioning]);
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ import type {
|
||||
VideoHTMLAttributes,
|
||||
} from 'react';
|
||||
|
||||
import { useImperativeHandle, useRef } from 'react';
|
||||
import { forwardRef, useImperativeHandle, useRef } from 'react';
|
||||
|
||||
import { createMediaStateOwner } from '@vjs-10/media';
|
||||
import { useMediaRef } from '@vjs-10/react-media-store';
|
||||
@@ -52,7 +52,7 @@ const useMediaStateOwner = (ref: Ref<any>, createMediaStateOwner: CreateMediaSta
|
||||
|
||||
const DefaultVideoComponent: ElementType<
|
||||
Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & { ref: Ref<any> }
|
||||
> = ({ children, ref, ...props }) => {
|
||||
> = forwardRef<any, any>(({ children, ...props }, ref) => {
|
||||
const { updateMediaElement } = useMediaStateOwner(ref, createMediaStateOwner);
|
||||
return (
|
||||
<video
|
||||
@@ -65,7 +65,7 @@ const DefaultVideoComponent: ElementType<
|
||||
{children}
|
||||
</video>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* @description This is a "thin wrapper" around the media component whose primary responsibility is to wire up the element
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { FC, ReactElement } from 'react';
|
||||
|
||||
import { createContext, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from 'react';
|
||||
import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from 'react';
|
||||
|
||||
export type StateHookFn<TProps = any, TState = any> = (props: TProps) => TState;
|
||||
|
||||
@@ -34,11 +34,15 @@ export const toConnectedComponent = <
|
||||
defaultRender: TRenderFn,
|
||||
displayName: string
|
||||
): ConnectedComponent<TProps, TRenderFn> => {
|
||||
const ConnectedComponent = ({ render = defaultRender, ...props }: TProps & { render?: TRenderFn }) => {
|
||||
const connectedState = useStateHook(props as TProps);
|
||||
const connectedProps = usePropsHook(props as TProps, connectedState);
|
||||
return <Context.Provider value={connectedState}>{render(connectedProps, connectedState)}</Context.Provider>;
|
||||
};
|
||||
const ConnectedComponent = forwardRef<any, TProps & { render?: TRenderFn }>(
|
||||
({ render = defaultRender, ...props }, ref) => {
|
||||
const connectedState = useStateHook(props as TProps);
|
||||
const connectedProps = usePropsHook(props as TProps, connectedState);
|
||||
// Add ref to connectedProps if it exists
|
||||
const propsWithRef = ref ? { ...connectedProps, ref } : connectedProps;
|
||||
return <Context.Provider value={connectedState}>{render(propsWithRef, connectedState)}</Context.Provider>;
|
||||
}
|
||||
);
|
||||
|
||||
ConnectedComponent.displayName = displayName;
|
||||
|
||||
@@ -70,11 +74,15 @@ export const toContextComponent = <
|
||||
defaultRender: TRenderFn,
|
||||
displayName: string
|
||||
): ContextComponent<TProps, TRenderFn> => {
|
||||
const ContextComponent = ({ render = defaultRender, ...props }: TProps & { render?: TRenderFn }) => {
|
||||
const context = useContext(Context);
|
||||
const contextProps = usePropsHook(props as TProps, context);
|
||||
return render(contextProps, context);
|
||||
};
|
||||
const ContextComponent = forwardRef<any, TProps & { render?: TRenderFn }>(
|
||||
({ render = defaultRender, ...props }, ref) => {
|
||||
const context = useContext(Context);
|
||||
const contextProps = usePropsHook(props as TProps, context);
|
||||
// Add ref to contextProps if it exists
|
||||
const propsWithRef = ref ? { ...contextProps, ref } : contextProps;
|
||||
return render(propsWithRef, context);
|
||||
}
|
||||
);
|
||||
|
||||
ContextComponent.displayName = displayName;
|
||||
|
||||
|
||||
Generated
+41
-48
@@ -51,8 +51,11 @@ importers:
|
||||
specifier: ^3.6.2
|
||||
version: 3.6.2
|
||||
react:
|
||||
specifier: ^18.3.1
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.1(react@18.3.1)
|
||||
simple-git-hooks:
|
||||
specifier: ^2.13.1
|
||||
version: 2.13.1
|
||||
@@ -82,11 +85,11 @@ importers:
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/react/react
|
||||
react:
|
||||
specifier: ^19.1.1
|
||||
version: 19.1.1
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.1
|
||||
react-dom:
|
||||
specifier: ^19.1.1
|
||||
version: 19.1.1(react@19.1.1)
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.1(react@18.3.1)
|
||||
tailwindcss:
|
||||
specifier: ^4.1.13
|
||||
version: 4.1.13
|
||||
@@ -95,11 +98,11 @@ importers:
|
||||
specifier: ^4.1.0
|
||||
version: 4.1.13(vite@7.1.6(@types/node@22.18.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.1))
|
||||
'@types/react':
|
||||
specifier: ^19.1.13
|
||||
version: 19.1.13
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.24
|
||||
'@types/react-dom':
|
||||
specifier: ^19.1.9
|
||||
version: 19.1.9(@types/react@19.1.13)
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.7(@types/react@18.3.24)
|
||||
'@vitejs/plugin-react':
|
||||
specifier: ^5.0.3
|
||||
version: 5.0.3(vite@7.1.6(@types/node@22.18.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.1))
|
||||
@@ -303,7 +306,7 @@ importers:
|
||||
dependencies:
|
||||
'@floating-ui/react':
|
||||
specifier: ^0.27.16
|
||||
version: 0.27.16(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
|
||||
version: 0.27.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@vjs-10/core':
|
||||
specifier: workspace:*
|
||||
version: link:../../core/core
|
||||
@@ -324,11 +327,11 @@ importers:
|
||||
version: link:../react-media-store
|
||||
devDependencies:
|
||||
'@types/react':
|
||||
specifier: ^19.0.0
|
||||
version: 19.1.13
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.24
|
||||
react:
|
||||
specifier: ^19.0.0
|
||||
version: 19.1.1
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.1
|
||||
tsdown:
|
||||
specifier: ^0.15.4
|
||||
version: 0.15.4(typescript@5.9.2)
|
||||
@@ -1382,17 +1385,14 @@ packages:
|
||||
'@types/prop-types@15.7.15':
|
||||
resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
|
||||
|
||||
'@types/react-dom@19.1.9':
|
||||
resolution: {integrity: sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==}
|
||||
'@types/react-dom@18.3.7':
|
||||
resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
|
||||
peerDependencies:
|
||||
'@types/react': ^19.0.0
|
||||
'@types/react': ^18.0.0
|
||||
|
||||
'@types/react@18.3.24':
|
||||
resolution: {integrity: sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==}
|
||||
|
||||
'@types/react@19.1.13':
|
||||
resolution: {integrity: sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==}
|
||||
|
||||
'@types/unist@3.0.3':
|
||||
resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
|
||||
|
||||
@@ -3153,10 +3153,10 @@ packages:
|
||||
queue-microtask@1.2.3:
|
||||
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
||||
|
||||
react-dom@19.1.1:
|
||||
resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
|
||||
react-dom@18.3.1:
|
||||
resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
|
||||
peerDependencies:
|
||||
react: ^19.1.1
|
||||
react: ^18.3.1
|
||||
|
||||
react-is@16.13.1:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
@@ -3169,10 +3169,6 @@ packages:
|
||||
resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
react@19.1.1:
|
||||
resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
readdirp@4.1.2:
|
||||
resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
|
||||
engines: {node: '>= 14.18.0'}
|
||||
@@ -3270,8 +3266,8 @@ packages:
|
||||
resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
scheduler@0.26.0:
|
||||
resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
|
||||
scheduler@0.23.2:
|
||||
resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
|
||||
|
||||
scslre@0.3.0:
|
||||
resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
|
||||
@@ -4185,18 +4181,18 @@ snapshots:
|
||||
'@floating-ui/core': 1.7.3
|
||||
'@floating-ui/utils': 0.2.10
|
||||
|
||||
'@floating-ui/react-dom@2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
|
||||
'@floating-ui/react-dom@2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@floating-ui/dom': 1.7.4
|
||||
react: 19.1.1
|
||||
react-dom: 19.1.1(react@19.1.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
|
||||
'@floating-ui/react@0.27.16(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
|
||||
'@floating-ui/react@0.27.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@floating-ui/react-dom': 2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
|
||||
'@floating-ui/react-dom': 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@floating-ui/utils': 0.2.10
|
||||
react: 19.1.1
|
||||
react-dom: 19.1.1(react@19.1.1)
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
tabbable: 6.2.0
|
||||
|
||||
'@floating-ui/utils@0.2.10': {}
|
||||
@@ -4628,19 +4624,15 @@ snapshots:
|
||||
|
||||
'@types/prop-types@15.7.15': {}
|
||||
|
||||
'@types/react-dom@19.1.9(@types/react@19.1.13)':
|
||||
'@types/react-dom@18.3.7(@types/react@18.3.24)':
|
||||
dependencies:
|
||||
'@types/react': 19.1.13
|
||||
'@types/react': 18.3.24
|
||||
|
||||
'@types/react@18.3.24':
|
||||
dependencies:
|
||||
'@types/prop-types': 15.7.15
|
||||
csstype: 3.1.3
|
||||
|
||||
'@types/react@19.1.13':
|
||||
dependencies:
|
||||
csstype: 3.1.3
|
||||
|
||||
'@types/unist@3.0.3': {}
|
||||
|
||||
'@typescript-eslint/eslint-plugin@8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.36.0(jiti@2.5.1))(typescript@5.9.2)':
|
||||
@@ -6831,10 +6823,11 @@ snapshots:
|
||||
|
||||
queue-microtask@1.2.3: {}
|
||||
|
||||
react-dom@19.1.1(react@19.1.1):
|
||||
react-dom@18.3.1(react@18.3.1):
|
||||
dependencies:
|
||||
react: 19.1.1
|
||||
scheduler: 0.26.0
|
||||
loose-envify: 1.4.0
|
||||
react: 18.3.1
|
||||
scheduler: 0.23.2
|
||||
|
||||
react-is@16.13.1: {}
|
||||
|
||||
@@ -6844,8 +6837,6 @@ snapshots:
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
|
||||
react@19.1.1: {}
|
||||
|
||||
readdirp@4.1.2: {}
|
||||
|
||||
refa@0.12.1:
|
||||
@@ -6994,7 +6985,9 @@ snapshots:
|
||||
es-errors: 1.3.0
|
||||
is-regex: 1.2.1
|
||||
|
||||
scheduler@0.26.0: {}
|
||||
scheduler@0.23.2:
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
|
||||
scslre@0.3.0:
|
||||
dependencies:
|
||||
|
||||
Reference in New Issue
Block a user