diff --git a/package-lock.json b/package-lock.json index 898e7d8..43e8396 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", @@ -2310,9 +2309,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 +6359,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": { @@ -10820,9 +10816,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,23 +10936,15 @@ }, "packages/react-uploader": { "name": "@uploadcare/react-uploader", - "version": "0.3.0", + "version": "0.3.0-alpha.4", "license": "MIT", "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" }, "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/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..165f9d4 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,7 +13,7 @@ const ensureEventMapForNode = ( node: Element, ): Map => { let events = listenedEvents.get(node); - if (!events) { + if (events === undefined) { events = new Map(); listenedEvents.set(node, events); } @@ -27,24 +28,28 @@ export const registerPropAndEvent = ({ 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) as EventListenerObject; - if (valueProp) { - const handler: EventListenerObject = { - handleEvent: valueProp as (e?: Event) => void, - }; - if (!handlerExists) { - node.addEventListener(event, handler); + if (valueProp !== undefined) { + if (!handlerExists) { + handler = { handleEvent: valueProp as THandleEvent }; + events.set(event, handler); + // @ts-ignore + node.addEventListener(event, (event: CustomEvent) => + handler.handleEvent(event.detail), + ); + } 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; } 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..9943cff 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,10 +16,10 @@ const AdapterFileUploaderInline = customElementToReactComponent({ elClass: LR.FileUploaderMinimal, }); -const CSS_SRC_INLINE = getStyleSource("inline"); export const FileUploaderInline: FC = ({ ctxName, className, + classNameUploader, apiRef, ...props }) => { @@ -41,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 d7f1d53..4ac5aee 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,11 +16,11 @@ const AdapterFileUploaderMinimal = customElementToReactComponent({ elClass: LR.FileUploaderMinimal, }); -const CSS_SRC_MINIMAL = getStyleSource("minimal"); export const FileUploaderMinimal: FC = ({ ctxName, className, + classNameUploader, apiRef, ...props }) => { @@ -41,10 +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 74fae3d..52eeb3e 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,11 +16,10 @@ const AdapterFileUploaderRegular = customElementToReactComponent({ elClass: LR.FileUploaderRegular, }); -const CSS_SRC_REGULAR = getStyleSource("regular"); - export const FileUploaderRegular: FC = ({ ctxName, className, + classNameUploader, apiRef, ...props }) => { @@ -42,10 +40,8 @@ export const FileUploaderRegular: FC = ({ ctx-name={CTX_NAME} {...eventHandlers} /> - + {/* @ts-ignore */} + ); }; 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/Uploader/types.ts b/packages/react-uploader/src/Uploader/types.ts index 8f6a104..881839b 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]["detail"], + ) => void; }; type TRefUploadCtxProvider = { @@ -27,6 +29,7 @@ type TPropsWithConfig = Partial; type TDefaultProps = { className?: string; + classNameUploader?: string; ctxName?: string; }; diff --git a/packages/react-uploader/src/libs.ts b/packages/react-uploader/src/libs.ts index e9e24c9..7f1b5d9 100644 --- a/packages/react-uploader/src/libs.ts +++ b/packages/react-uploader/src/libs.ts @@ -3,3 +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 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 }), + ], });