From 76b1819a9038dff17cfb9d583ec578bb9ba7871e Mon Sep 17 00:00:00 2001 From: Egor Didenko Date: Thu, 16 May 2024 08:41:36 -0400 Subject: [PATCH 1/8] feat(react-uploader): updated @uploadcare/blocks and implement styles --- package-lock.json | 190 ++++++++++++++++-- package.json | 1 + packages/react-uploader/package.json | 9 +- .../Uploader/Inline/FileUploaderInline.tsx | 7 +- .../Uploader/Minimal/FileUploaderMinimal.tsx | 6 +- .../Uploader/Regular/FileUploaderRegular.tsx | 10 +- .../react-uploader/src/Uploader/default.ts | 6 - packages/react-uploader/src/libs.ts | 2 + packages/react-uploader/vite.config.js | 9 +- 9 files changed, 196 insertions(+), 44 deletions(-) delete mode 100644 packages/react-uploader/src/Uploader/default.ts diff --git a/package-lock.json b/package-lock.json index 898e7d8..9498136 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,7 @@ "version": "1.0.0", "license": "ISC", "workspaces": [ - "packages/react-adapter", - "packages/react-uploader" + "packages/*" ], "devDependencies": { "@biomejs/biome": "1.6.4", @@ -23,9 +22,157 @@ "typescript": "^5.2.2", "vite": "^5.1.4", "vite-plugin-dts": "^3.7.3", + "vite-plugin-lib-inject-css": "^2.1.1", "vitest": "^1.3.1" } }, + "node_modules/@ast-grep/napi": { + "version": "0.22.3", + "resolved": "https://registry.npmjs.org/@ast-grep/napi/-/napi-0.22.3.tgz", + "integrity": "sha512-Viv/PQo4H6heDt0lQ6R0S8INpHhvmhm3MAXCBhMNZbsrrW8hdd9zxJ0rfSgv7jUFqRqRLCxA0crO2ObeMlySjQ==", + "dev": true, + "engines": { + "node": ">= 10" + }, + "optionalDependencies": { + "@ast-grep/napi-darwin-arm64": "0.22.3", + "@ast-grep/napi-darwin-x64": "0.22.3", + "@ast-grep/napi-linux-arm64-gnu": "0.22.3", + "@ast-grep/napi-linux-x64-gnu": "0.22.3", + "@ast-grep/napi-linux-x64-musl": "0.22.3", + "@ast-grep/napi-win32-arm64-msvc": "0.22.3", + "@ast-grep/napi-win32-ia32-msvc": "0.22.3", + "@ast-grep/napi-win32-x64-msvc": "0.22.3" + } + }, + "node_modules/@ast-grep/napi-darwin-arm64": { + "version": "0.22.3", + "resolved": "https://registry.npmjs.org/@ast-grep/napi-darwin-arm64/-/napi-darwin-arm64-0.22.3.tgz", + "integrity": "sha512-BD2uyj9UVii04G6YivQArwoeUvOhMFU+MHw5kbLdc0IBncAru65qOg/I6D/ggEAZIgfyw8e2b6ch4ywbIhMnZw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@ast-grep/napi-darwin-x64": { + "version": "0.22.3", + "resolved": "https://registry.npmjs.org/@ast-grep/napi-darwin-x64/-/napi-darwin-x64-0.22.3.tgz", + "integrity": "sha512-w0kw+YYAjDW6Q5EB4I+hSU4Ax9FVxVDlPeZi3h94pRIgNjRMD8SjG/aglNImzPOACDp3bZg8m26iMc9RbZaduQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@ast-grep/napi-linux-arm64-gnu": { + "version": "0.22.3", + "resolved": "https://registry.npmjs.org/@ast-grep/napi-linux-arm64-gnu/-/napi-linux-arm64-gnu-0.22.3.tgz", + "integrity": "sha512-859+EcrYLhmCCsBcQZtP3frNXgdxjyAT2zSJ0/QWVweJ//ArlW+lUf+smmp/4KZeWSZglFNRj5EYvcwUPJj6JA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@ast-grep/napi-linux-x64-gnu": { + "version": "0.22.3", + "resolved": "https://registry.npmjs.org/@ast-grep/napi-linux-x64-gnu/-/napi-linux-x64-gnu-0.22.3.tgz", + "integrity": "sha512-amc+61OeDXguX7ZV5V4JCmtPw4Thcr8zIvmnUozP3vFhO/QCql3t8rjxt2kifqPgoGbYIwW7sTIhtpA4CBxUbw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@ast-grep/napi-linux-x64-musl": { + "version": "0.22.3", + "resolved": "https://registry.npmjs.org/@ast-grep/napi-linux-x64-musl/-/napi-linux-x64-musl-0.22.3.tgz", + "integrity": "sha512-GmG4D7HTg5gPD0LT27WsOIIsOHZazcZ8nIlylVVN27WrxhVchLU+3fnybchgANbx7ojnMce/xWhKgP29vrseIA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@ast-grep/napi-win32-arm64-msvc": { + "version": "0.22.3", + "resolved": "https://registry.npmjs.org/@ast-grep/napi-win32-arm64-msvc/-/napi-win32-arm64-msvc-0.22.3.tgz", + "integrity": "sha512-mJAZdQwFwLtNON6pUbwTfrw6+iKelvBCZGd38TAPC0b3zapwdY7z7oVp8KfENy32eHh4OsBiGeN3CpsKaTeT5Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@ast-grep/napi-win32-ia32-msvc": { + "version": "0.22.3", + "resolved": "https://registry.npmjs.org/@ast-grep/napi-win32-ia32-msvc/-/napi-win32-ia32-msvc-0.22.3.tgz", + "integrity": "sha512-hJLvg9gSYh+GjNIol8ukgOWYnfpo4sIT+D0ExOZU/KgFDwhrTXZK/gBOKyO1IefzBl9GOjrjvaKxp8TItewM7Q==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@ast-grep/napi-win32-x64-msvc": { + "version": "0.22.3", + "resolved": "https://registry.npmjs.org/@ast-grep/napi-win32-x64-msvc/-/napi-win32-x64-msvc-0.22.3.tgz", + "integrity": "sha512-JnJctkkGmX6MX/aI6fJ2wK4fnPSftiqZ1fUsiPLWaBnnjvJe+ibvIByUp3sigZiStDEsjUdQ5KUDF2n9CVShyw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@babel/code-frame": { "version": "7.24.2", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz", @@ -2310,9 +2457,9 @@ } }, "node_modules/@uploadcare/blocks": { - "version": "0.36.1-alpha.1", - "resolved": "https://registry.npmjs.org/@uploadcare/blocks/-/blocks-0.36.1-alpha.1.tgz", - "integrity": "sha512-GOXxNuNp3guRgU4K3GyguG5lw5FmVlI+oXVl9AVCtRfbjzXxhdG7D/SHXxBlL52QWJrg6nfz+6+SYF/olYa6dg==", + "version": "0.39.1", + "resolved": "https://registry.npmjs.org/@uploadcare/blocks/-/blocks-0.39.1.tgz", + "integrity": "sha512-WdjlUYCeuaju83ImELIVsrLlZpi6IIWidnh+/LfIiX8ht1KJGH9DgK7ekoUyWxjE8ggwnPNIz4xnMKmIGlow7w==", "dependencies": { "@symbiotejs/symbiote": "^1.11.7", "@uploadcare/image-shrink": "^6.14.1", @@ -6360,15 +6507,12 @@ } }, "node_modules/magic-string": { - "version": "0.30.8", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz", - "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==", + "version": "0.30.10", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz", + "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==", "dev": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" - }, - "engines": { - "node": ">=12" } }, "node_modules/make-dir": { @@ -10451,6 +10595,20 @@ } } }, + "node_modules/vite-plugin-lib-inject-css": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/vite-plugin-lib-inject-css/-/vite-plugin-lib-inject-css-2.1.1.tgz", + "integrity": "sha512-RIMeVnqBK/8I0E9nnQWzws6pdj5ilRMPJSnXYb6nWxNR4EmDPnksnb/ACoR5Fy7QfzULqS4gtQMrjwnNCC9zoA==", + "dev": true, + "dependencies": { + "@ast-grep/napi": "^0.22.3", + "magic-string": "^0.30.10", + "picocolors": "^1.0.0" + }, + "peerDependencies": { + "vite": "*" + } + }, "node_modules/vitest": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.4.0.tgz", @@ -10820,9 +10978,9 @@ } }, "node_modules/ws": { - "version": "8.16.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz", - "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==", + "version": "8.17.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz", + "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==", "engines": { "node": ">=10.0.0" }, @@ -10940,10 +11098,10 @@ }, "packages/react-uploader": { "name": "@uploadcare/react-uploader", - "version": "0.3.0", + "version": "0.3.0-alpha.2", "license": "MIT", "dependencies": { - "@uploadcare/blocks": "^0.36.1-alpha.1", + "@uploadcare/blocks": "^0.39.1", "@uploadcare/react-adapter": "^0.0.1-alpha.1" }, "peerDependencies": { diff --git a/package.json b/package.json index f6e13cc..b8aa2cd 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "typescript": "^5.2.2", "vite": "^5.1.4", "vite-plugin-dts": "^3.7.3", + "vite-plugin-lib-inject-css": "^2.1.1", "vitest": "^1.3.1" } } diff --git a/packages/react-uploader/package.json b/packages/react-uploader/package.json index 6c61a5f..282c3b6 100644 --- a/packages/react-uploader/package.json +++ b/packages/react-uploader/package.json @@ -1,7 +1,7 @@ { "name": "@uploadcare/react-uploader", "description": "React component for file uploads using Uploadcare", - "version": "0.3.0", + "version": "0.3.0-alpha.2", "private": false, "type": "module", "files": [ @@ -14,7 +14,8 @@ ".": { "import": "./dist/react-uploader.js", "require": "./dist/react-uploader.cjs" - } + }, + "./core.css": "./dist/libs.css" }, "scripts": { "dev": "tsc && vite build --watch", @@ -26,8 +27,8 @@ "@types/react": "17 || 18" }, "dependencies": { - "@uploadcare/blocks": "^0.36.1-alpha.1", - "@uploadcare/react-adapter": "^0.0.1-alpha.1" + "@uploadcare/blocks": "^0.39.1", + "@uploadcare/react-adapter": "0.2.0" }, "repository": { "type": "git", diff --git a/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx b/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx index 807f74c..59a8470 100644 --- a/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx +++ b/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx @@ -1,12 +1,12 @@ import React, { type FC, useMemo } from "react"; import * as LR from "@uploadcare/blocks"; +import "@uploadcare/blocks/web/lr-file-uploader-inline.min.css"; import { customElementToReactComponent } from "@uploadcare/react-adapter"; import { AdapterConfig } from "../core/AdapterConfig"; import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider"; import type { TProps } from "../types"; -import { getStyleSource } from "../default"; import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps"; -import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration.ts"; +import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration"; LR.registerBlocks(LR); @@ -16,7 +16,6 @@ const AdapterFileUploaderInline = customElementToReactComponent({ elClass: LR.FileUploaderMinimal, }); -const CSS_SRC_INLINE = getStyleSource("inline"); export const FileUploaderInline: FC = ({ ctxName, className, @@ -41,7 +40,7 @@ export const FileUploaderInline: FC = ({ {...eventHandlers} /> - + ); }; diff --git a/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx b/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx index d7f1d53..ac2e609 100644 --- a/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx +++ b/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx @@ -1,12 +1,12 @@ import React, { type FC, useMemo } from "react"; import * as LR from "@uploadcare/blocks"; +import "@uploadcare/blocks/web/lr-file-uploader-minimal.min.css" import { customElementToReactComponent } from "@uploadcare/react-adapter"; import { AdapterConfig } from "../core/AdapterConfig"; import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider"; import type { TProps } from "../types"; -import { getStyleSource } from "../default"; import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps"; -import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration.ts"; +import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration"; LR.registerBlocks(LR); @@ -16,7 +16,6 @@ const AdapterFileUploaderMinimal = customElementToReactComponent({ elClass: LR.FileUploaderMinimal, }); -const CSS_SRC_MINIMAL = getStyleSource("minimal"); export const FileUploaderMinimal: FC = ({ ctxName, @@ -43,7 +42,6 @@ export const FileUploaderMinimal: FC = ({ /> ); diff --git a/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx b/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx index 74fae3d..b4069e0 100644 --- a/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx +++ b/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx @@ -3,11 +3,10 @@ import * as LR from "@uploadcare/blocks"; import { customElementToReactComponent } from "@uploadcare/react-adapter"; import { AdapterConfig } from "../core/AdapterConfig"; import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider"; -import { getStyleSource } from "../default"; import type { TProps } from "../types"; import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps"; -import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration.ts"; +import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration"; LR.registerBlocks(LR); @@ -17,8 +16,6 @@ const AdapterFileUploaderRegular = customElementToReactComponent({ elClass: LR.FileUploaderRegular, }); -const CSS_SRC_REGULAR = getStyleSource("regular"); - export const FileUploaderRegular: FC = ({ ctxName, className, @@ -42,10 +39,7 @@ export const FileUploaderRegular: FC = ({ ctx-name={CTX_NAME} {...eventHandlers} /> - + ); }; diff --git a/packages/react-uploader/src/Uploader/default.ts b/packages/react-uploader/src/Uploader/default.ts deleted file mode 100644 index 2baeaf2..0000000 --- a/packages/react-uploader/src/Uploader/default.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { PACKAGE_VERSION } from "@uploadcare/blocks"; - -export type TTypeUploader = "regular" | "minimal" | "inline"; - -export const getStyleSource = (typeUploader: TTypeUploader) => - `https://cdn.jsdelivr.net/npm/@uploadcare/blocks@${PACKAGE_VERSION}/web/lr-file-uploader-${typeUploader}.min.css`; diff --git a/packages/react-uploader/src/libs.ts b/packages/react-uploader/src/libs.ts index e9e24c9..b24ec34 100644 --- a/packages/react-uploader/src/libs.ts +++ b/packages/react-uploader/src/libs.ts @@ -3,3 +3,5 @@ export { FileUploaderMinimal } from "./Uploader/Minimal/FileUploaderMinimal"; export { FileUploaderInline } from "./Uploader/Inline/FileUploaderInline"; export { type TProps, UploadCtxProvider } from "./Uploader/types"; + +export { defineLocale } from "@uploadcare/blocks" \ No newline at end of file diff --git a/packages/react-uploader/vite.config.js b/packages/react-uploader/vite.config.js index ac1bc53..1697947 100644 --- a/packages/react-uploader/vite.config.js +++ b/packages/react-uploader/vite.config.js @@ -5,8 +5,11 @@ import dts from "vite-plugin-dts"; export default defineConfig({ build: { + cssCodeSplit: true, lib: { - entry: [resolve(__dirname, "src/libs.ts")], + entry: [ + resolve(__dirname, "src/libs.ts"), + ], name: "@uploadcare/react-uploader", formats: ["es", "cjs"], @@ -22,5 +25,7 @@ export default defineConfig({ }, }, }, - plugins: [dts({ rollupTypes: true, insertTypesEntry: true })], + plugins: [ + dts({ rollupTypes: true, insertTypesEntry: true }), + ], }); From fa43d988d58fa774bd8aabdd56f9f7b29338dc44 Mon Sep 17 00:00:00 2001 From: Egor Didenko Date: Thu, 16 May 2024 15:04:52 -0400 Subject: [PATCH 2/8] feat(react-uploader): added the prop classNameUploader for styles --- .../src/Uploader/Inline/FileUploaderInline.tsx | 4 +++- .../src/Uploader/Minimal/FileUploaderMinimal.tsx | 6 +++--- .../src/Uploader/Regular/FileUploaderRegular.tsx | 4 +++- packages/react-uploader/src/Uploader/types.ts | 1 + 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx b/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx index 59a8470..9943cff 100644 --- a/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx +++ b/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx @@ -19,6 +19,7 @@ const AdapterFileUploaderInline = customElementToReactComponent({ export const FileUploaderInline: FC = ({ ctxName, className, + classNameUploader, apiRef, ...props }) => { @@ -40,7 +41,8 @@ export const FileUploaderInline: FC = ({ {...eventHandlers} /> - + {/* @ts-ignore */} + ); }; diff --git a/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx b/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx index ac2e609..4ac5aee 100644 --- a/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx +++ b/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx @@ -20,6 +20,7 @@ const AdapterFileUploaderMinimal = customElementToReactComponent({ export const FileUploaderMinimal: FC = ({ ctxName, className, + classNameUploader, apiRef, ...props }) => { @@ -40,9 +41,8 @@ export const FileUploaderMinimal: FC = ({ ctx-name={CTX_NAME} {...eventHandlers} /> - + {/* @ts-ignore */} + ); }; diff --git a/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx b/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx index b4069e0..52eeb3e 100644 --- a/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx +++ b/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx @@ -19,6 +19,7 @@ const AdapterFileUploaderRegular = customElementToReactComponent({ export const FileUploaderRegular: FC = ({ ctxName, className, + classNameUploader, apiRef, ...props }) => { @@ -39,7 +40,8 @@ export const FileUploaderRegular: FC = ({ ctx-name={CTX_NAME} {...eventHandlers} /> - + {/* @ts-ignore */} + ); }; diff --git a/packages/react-uploader/src/Uploader/types.ts b/packages/react-uploader/src/Uploader/types.ts index 8f6a104..e763d77 100644 --- a/packages/react-uploader/src/Uploader/types.ts +++ b/packages/react-uploader/src/Uploader/types.ts @@ -27,6 +27,7 @@ type TPropsWithConfig = Partial; type TDefaultProps = { className?: string; + classNameUploader?: string; ctxName?: string; }; From 58170d80f7fea1303d864f31504d99b1230b3157 Mon Sep 17 00:00:00 2001 From: Egor Didenko Date: Fri, 17 May 2024 16:01:46 -0400 Subject: [PATCH 3/8] fix(react-adapter): fixed events, because the data didn't come in --- .../src/customElementToReactComponent.ts | 4 +- .../src/utils/registerPropAndEvent.ts | 39 ++++++++++--------- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/packages/react-adapter/src/customElementToReactComponent.ts b/packages/react-adapter/src/customElementToReactComponent.ts index 1e0ab76..7e54a5a 100644 --- a/packages/react-adapter/src/customElementToReactComponent.ts +++ b/packages/react-adapter/src/customElementToReactComponent.ts @@ -10,7 +10,7 @@ export type Options< > = { react: typeof React; tag: string; - elClass: { new (): I }; + elClass: { new(): I }; schemaEvents?: E; }; @@ -54,7 +54,7 @@ export const customElementToReactComponent = < Record, Set, I - // @ts-ignore + // @ts-ignore >(props, eventKeyOfProps, elClass); React.useLayoutEffect(() => { diff --git a/packages/react-adapter/src/utils/registerPropAndEvent.ts b/packages/react-adapter/src/utils/registerPropAndEvent.ts index 2396b68..328e81c 100644 --- a/packages/react-adapter/src/utils/registerPropAndEvent.ts +++ b/packages/react-adapter/src/utils/registerPropAndEvent.ts @@ -1,4 +1,5 @@ const listenedEvents = new WeakMap>(); +type THandleEvent = (e?: Event) => void type TRegisterEvent = { node: E; @@ -12,9 +13,8 @@ const ensureEventMapForNode = ( node: Element, ): Map => { let events = listenedEvents.get(node); - if (!events) { - events = new Map(); - listenedEvents.set(node, events); + if (events === undefined) { + listenedEvents.set(node, (events = new Map())); } return events; }; @@ -26,26 +26,27 @@ export const registerPropAndEvent = ({ prevValueProp, event, }: TRegisterEvent) => { + // Subscribe to the event if it is defined - if (event !== undefined && valueProp !== prevValueProp) { - const events = ensureEventMapForNode(node); - const handlerExists = events.has(event); + if (event !== undefined) { + if (valueProp !== prevValueProp) { + const events = ensureEventMapForNode(node); + const handlerExists = events.has(event); + let handler = events.get(event); - if (valueProp) { - const handler: EventListenerObject = { - handleEvent: valueProp as (e?: Event) => void, - }; - if (!handlerExists) { - node.addEventListener(event, handler); + if (valueProp !== undefined) { + if (!handlerExists) { + events.set(event, (handler = { handleEvent: valueProp as THandleEvent })) + node.addEventListener(event, handler); + } else { + handler.handleEvent = valueProp as THandleEvent + } + } else if (handlerExists) { + events.delete(event); + node.removeEventListener(event, handler) } - events.set(event, handler); - } else if (handlerExists) { - const handler = events.get(event); - node.removeEventListener(event, handler!); - events.delete(event); } - - return; + return } node[nameProp as keyof E] = valueProp as E[keyof E]; From 5a9fe1d440adaa6713cce3b0a4ea2cb9d1830dc7 Mon Sep 17 00:00:00 2001 From: Egor Didenko Date: Fri, 17 May 2024 16:58:52 -0400 Subject: [PATCH 4/8] fix(react-uploader): added type in event --- packages/react-uploader/src/Uploader/types.ts | 4 +++- packages/react-uploader/src/libs.ts | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-uploader/src/Uploader/types.ts b/packages/react-uploader/src/Uploader/types.ts index e763d77..37d44ad 100644 --- a/packages/react-uploader/src/Uploader/types.ts +++ b/packages/react-uploader/src/Uploader/types.ts @@ -14,7 +14,9 @@ type TExtraPrefixOn = `on${Capitalize}`; type TPrefixOnAndCamelCase = TExtraPrefixOn>; export type TEventsSchema = { - [K in keyof EventMap as TPrefixOnAndCamelCase]: EventMap[K]; + [K in keyof EventMap as TPrefixOnAndCamelCase]: ( + event: EventMap[K], + ) => void; }; type TRefUploadCtxProvider = { diff --git a/packages/react-uploader/src/libs.ts b/packages/react-uploader/src/libs.ts index b24ec34..7f1b5d9 100644 --- a/packages/react-uploader/src/libs.ts +++ b/packages/react-uploader/src/libs.ts @@ -3,5 +3,6 @@ export { FileUploaderMinimal } from "./Uploader/Minimal/FileUploaderMinimal"; export { FileUploaderInline } from "./Uploader/Inline/FileUploaderInline"; export { type TProps, UploadCtxProvider } from "./Uploader/types"; +export { type TEventsSchema } from './Uploader/types' export { defineLocale } from "@uploadcare/blocks" \ No newline at end of file From 7aaa86b5d32f8f543b665e2b096d00bcb4485530 Mon Sep 17 00:00:00 2001 From: Egor Didenko Date: Tue, 21 May 2024 07:22:06 -0400 Subject: [PATCH 5/8] fix(react-adapter): fixed types --- .../src/utils/registerPropAndEvent.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/react-adapter/src/utils/registerPropAndEvent.ts b/packages/react-adapter/src/utils/registerPropAndEvent.ts index 328e81c..184a0e9 100644 --- a/packages/react-adapter/src/utils/registerPropAndEvent.ts +++ b/packages/react-adapter/src/utils/registerPropAndEvent.ts @@ -1,5 +1,5 @@ const listenedEvents = new WeakMap>(); -type THandleEvent = (e?: Event) => void +type THandleEvent = (e?: Event) => void; type TRegisterEvent = { node: E; @@ -14,7 +14,8 @@ const ensureEventMapForNode = ( ): Map => { let events = listenedEvents.get(node); if (events === undefined) { - listenedEvents.set(node, (events = new Map())); + events = new Map(); + listenedEvents.set(node, events); } return events; }; @@ -26,27 +27,27 @@ export const registerPropAndEvent = ({ prevValueProp, event, }: TRegisterEvent) => { - // Subscribe to the event if it is defined if (event !== undefined) { if (valueProp !== prevValueProp) { const events = ensureEventMapForNode(node); const handlerExists = events.has(event); - let handler = events.get(event); + let handler = events.get(event) as EventListenerObject; if (valueProp !== undefined) { if (!handlerExists) { - events.set(event, (handler = { handleEvent: valueProp as THandleEvent })) + handler = { handleEvent: valueProp as THandleEvent }; + events.set(event, handler); node.addEventListener(event, handler); } else { - handler.handleEvent = valueProp as THandleEvent + handler.handleEvent = valueProp as THandleEvent; } } else if (handlerExists) { events.delete(event); - node.removeEventListener(event, handler) + node.removeEventListener(event, handler); } } - return + return; } node[nameProp as keyof E] = valueProp as E[keyof E]; From b66900e450f482f41b293a8383722072676569a2 Mon Sep 17 00:00:00 2001 From: Egor Didenko Date: Wed, 22 May 2024 12:01:08 -0400 Subject: [PATCH 6/8] feat(react-adapter): added handler event.detail --- packages/react-adapter/src/utils/registerPropAndEvent.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-adapter/src/utils/registerPropAndEvent.ts b/packages/react-adapter/src/utils/registerPropAndEvent.ts index 184a0e9..165f9d4 100644 --- a/packages/react-adapter/src/utils/registerPropAndEvent.ts +++ b/packages/react-adapter/src/utils/registerPropAndEvent.ts @@ -38,7 +38,10 @@ export const registerPropAndEvent = ({ if (!handlerExists) { handler = { handleEvent: valueProp as THandleEvent }; events.set(event, handler); - node.addEventListener(event, handler); + // @ts-ignore + node.addEventListener(event, (event: CustomEvent) => + handler.handleEvent(event.detail), + ); } else { handler.handleEvent = valueProp as THandleEvent; } From f65c98c429d5f039693d56cb47e927b64c494420 Mon Sep 17 00:00:00 2001 From: Egor Didenko Date: Wed, 22 May 2024 12:02:10 -0400 Subject: [PATCH 7/8] feat: removed vite-plugin-lib-inject-css --- package-lock.json | 174 +--------------------------------------------- package.json | 1 - 2 files changed, 2 insertions(+), 173 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9498136..43e8396 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,157 +22,9 @@ "typescript": "^5.2.2", "vite": "^5.1.4", "vite-plugin-dts": "^3.7.3", - "vite-plugin-lib-inject-css": "^2.1.1", "vitest": "^1.3.1" } }, - "node_modules/@ast-grep/napi": { - "version": "0.22.3", - "resolved": "https://registry.npmjs.org/@ast-grep/napi/-/napi-0.22.3.tgz", - "integrity": "sha512-Viv/PQo4H6heDt0lQ6R0S8INpHhvmhm3MAXCBhMNZbsrrW8hdd9zxJ0rfSgv7jUFqRqRLCxA0crO2ObeMlySjQ==", - "dev": true, - "engines": { - "node": ">= 10" - }, - "optionalDependencies": { - "@ast-grep/napi-darwin-arm64": "0.22.3", - "@ast-grep/napi-darwin-x64": "0.22.3", - "@ast-grep/napi-linux-arm64-gnu": "0.22.3", - "@ast-grep/napi-linux-x64-gnu": "0.22.3", - "@ast-grep/napi-linux-x64-musl": "0.22.3", - "@ast-grep/napi-win32-arm64-msvc": "0.22.3", - "@ast-grep/napi-win32-ia32-msvc": "0.22.3", - "@ast-grep/napi-win32-x64-msvc": "0.22.3" - } - }, - "node_modules/@ast-grep/napi-darwin-arm64": { - "version": "0.22.3", - "resolved": "https://registry.npmjs.org/@ast-grep/napi-darwin-arm64/-/napi-darwin-arm64-0.22.3.tgz", - "integrity": "sha512-BD2uyj9UVii04G6YivQArwoeUvOhMFU+MHw5kbLdc0IBncAru65qOg/I6D/ggEAZIgfyw8e2b6ch4ywbIhMnZw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@ast-grep/napi-darwin-x64": { - "version": "0.22.3", - "resolved": "https://registry.npmjs.org/@ast-grep/napi-darwin-x64/-/napi-darwin-x64-0.22.3.tgz", - "integrity": "sha512-w0kw+YYAjDW6Q5EB4I+hSU4Ax9FVxVDlPeZi3h94pRIgNjRMD8SjG/aglNImzPOACDp3bZg8m26iMc9RbZaduQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@ast-grep/napi-linux-arm64-gnu": { - "version": "0.22.3", - "resolved": "https://registry.npmjs.org/@ast-grep/napi-linux-arm64-gnu/-/napi-linux-arm64-gnu-0.22.3.tgz", - "integrity": "sha512-859+EcrYLhmCCsBcQZtP3frNXgdxjyAT2zSJ0/QWVweJ//ArlW+lUf+smmp/4KZeWSZglFNRj5EYvcwUPJj6JA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@ast-grep/napi-linux-x64-gnu": { - "version": "0.22.3", - "resolved": "https://registry.npmjs.org/@ast-grep/napi-linux-x64-gnu/-/napi-linux-x64-gnu-0.22.3.tgz", - "integrity": "sha512-amc+61OeDXguX7ZV5V4JCmtPw4Thcr8zIvmnUozP3vFhO/QCql3t8rjxt2kifqPgoGbYIwW7sTIhtpA4CBxUbw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@ast-grep/napi-linux-x64-musl": { - "version": "0.22.3", - "resolved": "https://registry.npmjs.org/@ast-grep/napi-linux-x64-musl/-/napi-linux-x64-musl-0.22.3.tgz", - "integrity": "sha512-GmG4D7HTg5gPD0LT27WsOIIsOHZazcZ8nIlylVVN27WrxhVchLU+3fnybchgANbx7ojnMce/xWhKgP29vrseIA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@ast-grep/napi-win32-arm64-msvc": { - "version": "0.22.3", - "resolved": "https://registry.npmjs.org/@ast-grep/napi-win32-arm64-msvc/-/napi-win32-arm64-msvc-0.22.3.tgz", - "integrity": "sha512-mJAZdQwFwLtNON6pUbwTfrw6+iKelvBCZGd38TAPC0b3zapwdY7z7oVp8KfENy32eHh4OsBiGeN3CpsKaTeT5Q==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@ast-grep/napi-win32-ia32-msvc": { - "version": "0.22.3", - "resolved": "https://registry.npmjs.org/@ast-grep/napi-win32-ia32-msvc/-/napi-win32-ia32-msvc-0.22.3.tgz", - "integrity": "sha512-hJLvg9gSYh+GjNIol8ukgOWYnfpo4sIT+D0ExOZU/KgFDwhrTXZK/gBOKyO1IefzBl9GOjrjvaKxp8TItewM7Q==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@ast-grep/napi-win32-x64-msvc": { - "version": "0.22.3", - "resolved": "https://registry.npmjs.org/@ast-grep/napi-win32-x64-msvc/-/napi-win32-x64-msvc-0.22.3.tgz", - "integrity": "sha512-JnJctkkGmX6MX/aI6fJ2wK4fnPSftiqZ1fUsiPLWaBnnjvJe+ibvIByUp3sigZiStDEsjUdQ5KUDF2n9CVShyw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, "node_modules/@babel/code-frame": { "version": "7.24.2", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz", @@ -10595,20 +10447,6 @@ } } }, - "node_modules/vite-plugin-lib-inject-css": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/vite-plugin-lib-inject-css/-/vite-plugin-lib-inject-css-2.1.1.tgz", - "integrity": "sha512-RIMeVnqBK/8I0E9nnQWzws6pdj5ilRMPJSnXYb6nWxNR4EmDPnksnb/ACoR5Fy7QfzULqS4gtQMrjwnNCC9zoA==", - "dev": true, - "dependencies": { - "@ast-grep/napi": "^0.22.3", - "magic-string": "^0.30.10", - "picocolors": "^1.0.0" - }, - "peerDependencies": { - "vite": "*" - } - }, "node_modules/vitest": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.4.0.tgz", @@ -11098,23 +10936,15 @@ }, "packages/react-uploader": { "name": "@uploadcare/react-uploader", - "version": "0.3.0-alpha.2", + "version": "0.3.0-alpha.4", "license": "MIT", "dependencies": { "@uploadcare/blocks": "^0.39.1", - "@uploadcare/react-adapter": "^0.0.1-alpha.1" + "@uploadcare/react-adapter": "0.2.0" }, "peerDependencies": { "@types/react": "17 || 18" } - }, - "packages/react-uploader/node_modules/@uploadcare/react-adapter": { - "version": "0.0.1-alpha.1", - "resolved": "https://registry.npmjs.org/@uploadcare/react-adapter/-/react-adapter-0.0.1-alpha.1.tgz", - "integrity": "sha512-7OYsb3j3RK69WQBT0Tw4dc91qu1qq2eIddZXoMEccHHyolzZitWly5lqBcOjuYvprmRMIKbVy2oyCKO+kjFceA==", - "peerDependencies": { - "@types/react": "17 || 18" - } } } } diff --git a/package.json b/package.json index b8aa2cd..f6e13cc 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,6 @@ "typescript": "^5.2.2", "vite": "^5.1.4", "vite-plugin-dts": "^3.7.3", - "vite-plugin-lib-inject-css": "^2.1.1", "vitest": "^1.3.1" } } From f7b19cb4d3e570f3432298af364928ce7e108725 Mon Sep 17 00:00:00 2001 From: Egor Didenko Date: Wed, 22 May 2024 14:48:11 -0400 Subject: [PATCH 8/8] type: return type of detail for TEventsSchema --- packages/react-uploader/src/Uploader/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-uploader/src/Uploader/types.ts b/packages/react-uploader/src/Uploader/types.ts index 37d44ad..881839b 100644 --- a/packages/react-uploader/src/Uploader/types.ts +++ b/packages/react-uploader/src/Uploader/types.ts @@ -15,7 +15,7 @@ type TPrefixOnAndCamelCase = TExtraPrefixOn>; export type TEventsSchema = { [K in keyof EventMap as TPrefixOnAndCamelCase]: ( - event: EventMap[K], + event: EventMap[K]["detail"], ) => void; };