@elementor/wp-media 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,49 @@
+import * as _tanstack_react_query from '@tanstack/react-query';
+
+type Attachment = {
+    id: number;
+    url: string;
+    alt: string;
+    filename: string;
+    title: string;
+    mime: string;
+    type: string;
+    subtype: string;
+    uploadedTo: number;
+    filesize: {
+        inBytes: number;
+        humanReadable: string;
+    };
+    author: {
+        id: number;
+        name: string;
+    };
+    sizes: Record<string, {
+        width: number;
+        height: number;
+        url: string;
+    }>;
+};
+
+declare function useWpMediaAttachment(id: number | undefined): _tanstack_react_query.UseQueryResult<Attachment | null, Error>;
+
+type OpenOptions = {
+    mode?: 'upload' | 'browse';
+};
+type Options = {
+    types: Array<'image'>;
+    title?: string;
+} & ({
+    multiple: true;
+    selected: Array<number | undefined>;
+    onSelect: (val: Attachment[]) => void;
+} | {
+    multiple: false;
+    selected: number | undefined;
+    onSelect: (val: Attachment) => void;
+});
+declare function useWpMediaFrame(options: Options): {
+    open: (openOptions?: OpenOptions) => void;
+};
+
+export { Attachment, useWpMediaAttachment, useWpMediaFrame };

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+import * as _tanstack_react_query from '@tanstack/react-query';
+
+type Attachment = {
+    id: number;
+    url: string;
+    alt: string;
+    filename: string;
+    title: string;
+    mime: string;
+    type: string;
+    subtype: string;
+    uploadedTo: number;
+    filesize: {
+        inBytes: number;
+        humanReadable: string;
+    };
+    author: {
+        id: number;
+        name: string;
+    };
+    sizes: Record<string, {
+        width: number;
+        height: number;
+        url: string;
+    }>;
+};
+
+declare function useWpMediaAttachment(id: number | undefined): _tanstack_react_query.UseQueryResult<Attachment | null, Error>;
+
+type OpenOptions = {
+    mode?: 'upload' | 'browse';
+};
+type Options = {
+    types: Array<'image'>;
+    title?: string;
+} & ({
+    multiple: true;
+    selected: Array<number | undefined>;
+    onSelect: (val: Attachment[]) => void;
+} | {
+    multiple: false;
+    selected: number | undefined;
+    onSelect: (val: Attachment) => void;
+});
+declare function useWpMediaFrame(options: Options): {
+    open: (openOptions?: OpenOptions) => void;
+};
+
+export { Attachment, useWpMediaAttachment, useWpMediaFrame };

package/dist/index.js

@@ -0,0 +1,140 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  useWpMediaAttachment: () => useWpMediaAttachment,
+  useWpMediaFrame: () => useWpMediaFrame
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/hooks/use-wp-media-attachment.ts
+var import_query = require("@elementor/query");
+
+// src/errors.ts
+var import_utils = require("@elementor/utils");
+var WpMediaNotAvailableError = (0, import_utils.createError)({
+  code: "wp_media_not_available",
+  message: "`wp.media` is not available, make sure the `media-model` handle is set in the dependencies array"
+});
+
+// src/media.ts
+var wpMediaWindow = window;
+var media_default = () => {
+  if (!wpMediaWindow.wp?.media) {
+    throw new WpMediaNotAvailableError();
+  }
+  return wpMediaWindow.wp.media;
+};
+
+// src/normalize.ts
+function normalize(attachment) {
+  const { filesizeInBytes, filesizeHumanReadable, author, authorName, ...rest } = attachment;
+  return {
+    ...rest,
+    filesize: {
+      inBytes: filesizeInBytes,
+      humanReadable: filesizeHumanReadable
+    },
+    author: {
+      id: parseInt(author),
+      name: authorName
+    }
+  };
+}
+
+// src/hooks/use-wp-media-attachment.ts
+function useWpMediaAttachment(id) {
+  return (0, import_query.useQuery)({
+    queryKey: ["wp-attachment", id],
+    queryFn: getAttachment,
+    enabled: !!id
+  });
+}
+async function getAttachment({ queryKey: [, id] }) {
+  if (!id) {
+    return null;
+  }
+  const model = media_default().attachment(id);
+  const wpAttachment = model.toJSON();
+  const isFetched = "url" in wpAttachment;
+  if (isFetched) {
+    return normalize(wpAttachment);
+  }
+  try {
+    return normalize(await model.fetch());
+  } catch (e) {
+    return null;
+  }
+}
+
+// src/hooks/use-wp-media-frame.ts
+var import_react = require("react");
+function useWpMediaFrame(options) {
+  const frame = (0, import_react.useRef)();
+  const open = (openOptions = {}) => {
+    cleanupFrame();
+    frame.current = createFrame({ ...options, ...openOptions });
+    frame.current?.open();
+  };
+  const cleanupFrame = () => {
+    frame.current?.detach();
+    frame.current?.remove();
+  };
+  (0, import_react.useEffect)(() => {
+    return () => {
+      cleanupFrame();
+    };
+  }, []);
+  return {
+    open
+  };
+}
+function createFrame({ onSelect, multiple, types, selected, title, mode = "browse" }) {
+  const frame = media_default()({
+    title,
+    multiple,
+    library: {
+      type: types
+    }
+  }).on("open", () => {
+    applyMode(frame, mode);
+    applySelection(frame, selected);
+  }).on("close", () => frame.detach()).on("insert select", () => select(frame, multiple, onSelect));
+  return frame;
+}
+function applyMode(frame, mode = "browse") {
+  frame.content.mode(mode);
+}
+function applySelection(frame, selected) {
+  const selectedAttachments = (typeof selected === "number" ? [selected] : selected)?.filter((id) => !!id).map((id) => media_default().attachment(id));
+  frame.state().get("selection").set(selectedAttachments || []);
+}
+function select(frame, multiple, onSelect) {
+  const attachments = frame.state().get("selection").toJSON().map(normalize);
+  const onSelectFn = onSelect;
+  onSelectFn(multiple ? attachments : attachments[0]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useWpMediaAttachment,
+  useWpMediaFrame
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/hooks/use-wp-media-attachment.ts","../src/errors.ts","../src/media.ts","../src/normalize.ts","../src/hooks/use-wp-media-frame.ts"],"sourcesContent":["export type { Attachment } from './types/attachment';\n\nexport { default as useWpMediaAttachment } from './hooks/use-wp-media-attachment';\nexport { default as useWpMediaFrame } from './hooks/use-wp-media-frame';\n","import { useQuery } from '@elementor/query';\nimport media from '../media';\nimport normalize from '../normalize';\n\nexport default function useWpMediaAttachment( id: number | undefined ) {\n\treturn useQuery( {\n\t\tqueryKey: [ 'wp-attachment', id ],\n\t\tqueryFn: getAttachment,\n\t\tenabled: !! id,\n\t} );\n}\n\nasync function getAttachment( { queryKey: [ , id ] }: { queryKey: [ string, number | undefined ] } ) {\n\tif ( ! id ) {\n\t\treturn null;\n\t}\n\n\tconst model = media().attachment( id );\n\tconst wpAttachment = model.toJSON();\n\n\tconst isFetched = 'url' in wpAttachment;\n\n\tif ( isFetched ) {\n\t\treturn normalize( wpAttachment );\n\t}\n\n\ttry {\n\t\treturn normalize( await model.fetch() );\n\t} catch ( e ) {\n\t\treturn null;\n\t}\n}\n","import { createError } from '@elementor/utils';\n\nexport const WpMediaNotAvailableError = createError( {\n\tcode: 'wp_media_not_available',\n\tmessage: '`wp.media` is not available, make sure the `media-model` handle is set in the dependencies array',\n} );\n","import { WpMediaWindow } from './types/wp-media';\nimport { WpMediaNotAvailableError } from './errors';\n\nconst wpMediaWindow = window as unknown as WpMediaWindow;\n\nexport default () => {\n\tif ( ! wpMediaWindow.wp?.media ) {\n\t\tthrow new WpMediaNotAvailableError();\n\t}\n\n\treturn wpMediaWindow.wp.media;\n};\n","import { WpAttachmentJSON } from './types/wp-media';\nimport { Attachment } from './types/attachment';\n\nexport default function normalize( attachment: WpAttachmentJSON ): Attachment {\n\tconst { filesizeInBytes, filesizeHumanReadable, author, authorName, ...rest } = attachment;\n\n\treturn {\n\t\t...rest,\n\t\tfilesize: {\n\t\t\tinBytes: filesizeInBytes,\n\t\t\thumanReadable: filesizeHumanReadable,\n\t\t},\n\t\tauthor: {\n\t\t\tid: parseInt( author ),\n\t\t\tname: authorName,\n\t\t},\n\t};\n}\n","import { useEffect, useRef } from 'react';\nimport normalize from '../normalize';\nimport { MediaFrame } from '../types/wp-media';\nimport { Attachment } from '../types/attachment';\nimport media from '../media';\n\ntype OpenOptions = {\n\tmode?: 'upload' | 'browse';\n};\n\ntype Options = {\n\ttypes: Array< 'image' >;\n\ttitle?: string;\n} & (\n\t| {\n\t\t\tmultiple: true;\n\t\t\tselected: Array< number | undefined >;\n\t\t\tonSelect: ( val: Attachment[] ) => void;\n\t  }\n\t| {\n\t\t\tmultiple: false;\n\t\t\tselected: number | undefined;\n\t\t\tonSelect: ( val: Attachment ) => void;\n\t  }\n);\n\nexport default function useWpMediaFrame( options: Options ) {\n\tconst frame = useRef< MediaFrame >();\n\n\tconst open = ( openOptions: OpenOptions = {} ) => {\n\t\tcleanupFrame();\n\n\t\tframe.current = createFrame( { ...options, ...openOptions } );\n\n\t\tframe.current?.open();\n\t};\n\n\tconst cleanupFrame = () => {\n\t\tframe.current?.detach();\n\t\tframe.current?.remove();\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanupFrame();\n\t\t};\n\t}, [] );\n\n\treturn {\n\t\topen,\n\t};\n}\n\nfunction createFrame( { onSelect, multiple, types, selected, title, mode = 'browse' }: Options & OpenOptions ) {\n\tconst frame: MediaFrame = media()( {\n\t\ttitle,\n\t\tmultiple,\n\t\tlibrary: {\n\t\t\ttype: types,\n\t\t},\n\t} )\n\t\t.on( 'open', () => {\n\t\t\tapplyMode( frame, mode );\n\t\t\tapplySelection( frame, selected );\n\t\t} )\n\t\t.on( 'close', () => frame.detach() )\n\t\t.on( 'insert select', () => select( frame, multiple, onSelect ) );\n\n\treturn frame;\n}\n\nfunction applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {\n\tframe.content.mode( mode );\n}\n\nfunction applySelection( frame: MediaFrame, selected: number | undefined | Array< number | undefined > ) {\n\tconst selectedAttachments = ( typeof selected === 'number' ? [ selected ] : selected )\n\t\t?.filter( ( id ) => !! id )\n\t\t.map( ( id ) => media().attachment( id as number ) );\n\n\tframe\n\t\t.state()\n\t\t.get( 'selection' )\n\t\t.set( selectedAttachments || [] );\n}\n\nfunction select( frame: MediaFrame, multiple: boolean, onSelect: Options[ 'onSelect' ] ) {\n\tconst attachments = frame.state().get( 'selection' ).toJSON().map( normalize );\n\n\tconst onSelectFn = onSelect as ( val: Attachment | Attachment[] ) => void;\n\n\tonSelectFn( multiple ? attachments : attachments[ 0 ] );\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,112 @@
+// src/hooks/use-wp-media-attachment.ts
+import { useQuery } from "@elementor/query";
+
+// src/errors.ts
+import { createError } from "@elementor/utils";
+var WpMediaNotAvailableError = createError({
+  code: "wp_media_not_available",
+  message: "`wp.media` is not available, make sure the `media-model` handle is set in the dependencies array"
+});
+
+// src/media.ts
+var wpMediaWindow = window;
+var media_default = () => {
+  if (!wpMediaWindow.wp?.media) {
+    throw new WpMediaNotAvailableError();
+  }
+  return wpMediaWindow.wp.media;
+};
+
+// src/normalize.ts
+function normalize(attachment) {
+  const { filesizeInBytes, filesizeHumanReadable, author, authorName, ...rest } = attachment;
+  return {
+    ...rest,
+    filesize: {
+      inBytes: filesizeInBytes,
+      humanReadable: filesizeHumanReadable
+    },
+    author: {
+      id: parseInt(author),
+      name: authorName
+    }
+  };
+}
+
+// src/hooks/use-wp-media-attachment.ts
+function useWpMediaAttachment(id) {
+  return useQuery({
+    queryKey: ["wp-attachment", id],
+    queryFn: getAttachment,
+    enabled: !!id
+  });
+}
+async function getAttachment({ queryKey: [, id] }) {
+  if (!id) {
+    return null;
+  }
+  const model = media_default().attachment(id);
+  const wpAttachment = model.toJSON();
+  const isFetched = "url" in wpAttachment;
+  if (isFetched) {
+    return normalize(wpAttachment);
+  }
+  try {
+    return normalize(await model.fetch());
+  } catch (e) {
+    return null;
+  }
+}
+
+// src/hooks/use-wp-media-frame.ts
+import { useEffect, useRef } from "react";
+function useWpMediaFrame(options) {
+  const frame = useRef();
+  const open = (openOptions = {}) => {
+    cleanupFrame();
+    frame.current = createFrame({ ...options, ...openOptions });
+    frame.current?.open();
+  };
+  const cleanupFrame = () => {
+    frame.current?.detach();
+    frame.current?.remove();
+  };
+  useEffect(() => {
+    return () => {
+      cleanupFrame();
+    };
+  }, []);
+  return {
+    open
+  };
+}
+function createFrame({ onSelect, multiple, types, selected, title, mode = "browse" }) {
+  const frame = media_default()({
+    title,
+    multiple,
+    library: {
+      type: types
+    }
+  }).on("open", () => {
+    applyMode(frame, mode);
+    applySelection(frame, selected);
+  }).on("close", () => frame.detach()).on("insert select", () => select(frame, multiple, onSelect));
+  return frame;
+}
+function applyMode(frame, mode = "browse") {
+  frame.content.mode(mode);
+}
+function applySelection(frame, selected) {
+  const selectedAttachments = (typeof selected === "number" ? [selected] : selected)?.filter((id) => !!id).map((id) => media_default().attachment(id));
+  frame.state().get("selection").set(selectedAttachments || []);
+}
+function select(frame, multiple, onSelect) {
+  const attachments = frame.state().get("selection").toJSON().map(normalize);
+  const onSelectFn = onSelect;
+  onSelectFn(multiple ? attachments : attachments[0]);
+}
+export {
+  useWpMediaAttachment,
+  useWpMediaFrame
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-wp-media-attachment.ts","../src/errors.ts","../src/media.ts","../src/normalize.ts","../src/hooks/use-wp-media-frame.ts"],"sourcesContent":["import { useQuery } from '@elementor/query';\nimport media from '../media';\nimport normalize from '../normalize';\n\nexport default function useWpMediaAttachment( id: number | undefined ) {\n\treturn useQuery( {\n\t\tqueryKey: [ 'wp-attachment', id ],\n\t\tqueryFn: getAttachment,\n\t\tenabled: !! id,\n\t} );\n}\n\nasync function getAttachment( { queryKey: [ , id ] }: { queryKey: [ string, number | undefined ] } ) {\n\tif ( ! id ) {\n\t\treturn null;\n\t}\n\n\tconst model = media().attachment( id );\n\tconst wpAttachment = model.toJSON();\n\n\tconst isFetched = 'url' in wpAttachment;\n\n\tif ( isFetched ) {\n\t\treturn normalize( wpAttachment );\n\t}\n\n\ttry {\n\t\treturn normalize( await model.fetch() );\n\t} catch ( e ) {\n\t\treturn null;\n\t}\n}\n","import { createError } from '@elementor/utils';\n\nexport const WpMediaNotAvailableError = createError( {\n\tcode: 'wp_media_not_available',\n\tmessage: '`wp.media` is not available, make sure the `media-model` handle is set in the dependencies array',\n} );\n","import { WpMediaWindow } from './types/wp-media';\nimport { WpMediaNotAvailableError } from './errors';\n\nconst wpMediaWindow = window as unknown as WpMediaWindow;\n\nexport default () => {\n\tif ( ! wpMediaWindow.wp?.media ) {\n\t\tthrow new WpMediaNotAvailableError();\n\t}\n\n\treturn wpMediaWindow.wp.media;\n};\n","import { WpAttachmentJSON } from './types/wp-media';\nimport { Attachment } from './types/attachment';\n\nexport default function normalize( attachment: WpAttachmentJSON ): Attachment {\n\tconst { filesizeInBytes, filesizeHumanReadable, author, authorName, ...rest } = attachment;\n\n\treturn {\n\t\t...rest,\n\t\tfilesize: {\n\t\t\tinBytes: filesizeInBytes,\n\t\t\thumanReadable: filesizeHumanReadable,\n\t\t},\n\t\tauthor: {\n\t\t\tid: parseInt( author ),\n\t\t\tname: authorName,\n\t\t},\n\t};\n}\n","import { useEffect, useRef } from 'react';\nimport normalize from '../normalize';\nimport { MediaFrame } from '../types/wp-media';\nimport { Attachment } from '../types/attachment';\nimport media from '../media';\n\ntype OpenOptions = {\n\tmode?: 'upload' | 'browse';\n};\n\ntype Options = {\n\ttypes: Array< 'image' >;\n\ttitle?: string;\n} & (\n\t| {\n\t\t\tmultiple: true;\n\t\t\tselected: Array< number | undefined >;\n\t\t\tonSelect: ( val: Attachment[] ) => void;\n\t  }\n\t| {\n\t\t\tmultiple: false;\n\t\t\tselected: number | undefined;\n\t\t\tonSelect: ( val: Attachment ) => void;\n\t  }\n);\n\nexport default function useWpMediaFrame( options: Options ) {\n\tconst frame = useRef< MediaFrame >();\n\n\tconst open = ( openOptions: OpenOptions = {} ) => {\n\t\tcleanupFrame();\n\n\t\tframe.current = createFrame( { ...options, ...openOptions } );\n\n\t\tframe.current?.open();\n\t};\n\n\tconst cleanupFrame = () => {\n\t\tframe.current?.detach();\n\t\tframe.current?.remove();\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanupFrame();\n\t\t};\n\t}, [] );\n\n\treturn {\n\t\topen,\n\t};\n}\n\nfunction createFrame( { onSelect, multiple, types, selected, title, mode = 'browse' }: Options & OpenOptions ) {\n\tconst frame: MediaFrame = media()( {\n\t\ttitle,\n\t\tmultiple,\n\t\tlibrary: {\n\t\t\ttype: types,\n\t\t},\n\t} )\n\t\t.on( 'open', () => {\n\t\t\tapplyMode( frame, mode );\n\t\t\tapplySelection( frame, selected );\n\t\t} )\n\t\t.on( 'close', () => frame.detach() )\n\t\t.on( 'insert select', () => select( frame, multiple, onSelect ) );\n\n\treturn frame;\n}\n\nfunction applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {\n\tframe.content.mode( mode );\n}\n\nfunction applySelection( frame: MediaFrame, selected: number | undefined | Array< number | undefined > ) {\n\tconst selectedAttachments = ( typeof selected === 'number' ? [ selected ] : selected )\n\t\t?.filter( ( id ) => !! id )\n\t\t.map( ( id ) => media().attachment( id as number ) );\n\n\tframe\n\t\t.state()\n\t\t.get( 'selection' )\n\t\t.set( selectedAttachments || [] );\n}\n\nfunction select( frame: MediaFrame, multiple: boolean, onSelect: Options[ 'onSelect' ] ) {\n\tconst attachments = frame.state().get( 'selection' ).toJSON().map( normalize );\n\n\tconst onSelectFn = onSelect as ( val: Attachment | Attachment[] ) => void;\n\n\tonSelectFn( multiple ? attachments : attachments[ 0 ] );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@elementor/wp-media",
+  "description": "An adapter for WordPress' media utils",
+  "version": "0.1.0",
+  "private": false,
+  "author": "Elementor Team",
+  "homepage": "https://elementor.com/",
+  "license": "GPL-3.0-or-later",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elementor/elementor-packages.git",
+    "directory": "packages/libs/wp-media"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor-packages/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "/dist",
+    "/src",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  },
+  "dependencies": {
+    "@elementor/query": "^0.2.2",
+    "@elementor/utils": "^0.2.1"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "gitHead": "a3d9694582a79d4a5ab51276030a24cf3736dca9"
+}

package/src/errors.ts

@@ -0,0 +1,6 @@
+import { createError } from '@elementor/utils';
+
+export const WpMediaNotAvailableError = createError( {
+	code: 'wp_media_not_available',
+	message: '`wp.media` is not available, make sure the `media-model` handle is set in the dependencies array',
+} );

package/src/hooks/use-wp-media-attachment.ts

@@ -0,0 +1,32 @@
+import { useQuery } from '@elementor/query';
+import media from '../media';
+import normalize from '../normalize';
+
+export default function useWpMediaAttachment( id: number | undefined ) {
+	return useQuery( {
+		queryKey: [ 'wp-attachment', id ],
+		queryFn: getAttachment,
+		enabled: !! id,
+	} );
+}
+
+async function getAttachment( { queryKey: [ , id ] }: { queryKey: [ string, number | undefined ] } ) {
+	if ( ! id ) {
+		return null;
+	}
+
+	const model = media().attachment( id );
+	const wpAttachment = model.toJSON();
+
+	const isFetched = 'url' in wpAttachment;
+
+	if ( isFetched ) {
+		return normalize( wpAttachment );
+	}
+
+	try {
+		return normalize( await model.fetch() );
+	} catch ( e ) {
+		return null;
+	}
+}

package/src/hooks/use-wp-media-frame.ts

@@ -0,0 +1,93 @@
+import { useEffect, useRef } from 'react';
+import normalize from '../normalize';
+import { MediaFrame } from '../types/wp-media';
+import { Attachment } from '../types/attachment';
+import media from '../media';
+
+type OpenOptions = {
+	mode?: 'upload' | 'browse';
+};
+
+type Options = {
+	types: Array< 'image' >;
+	title?: string;
+} & (
+	| {
+			multiple: true;
+			selected: Array< number | undefined >;
+			onSelect: ( val: Attachment[] ) => void;
+	  }
+	| {
+			multiple: false;
+			selected: number | undefined;
+			onSelect: ( val: Attachment ) => void;
+	  }
+);
+
+export default function useWpMediaFrame( options: Options ) {
+	const frame = useRef< MediaFrame >();
+
+	const open = ( openOptions: OpenOptions = {} ) => {
+		cleanupFrame();
+
+		frame.current = createFrame( { ...options, ...openOptions } );
+
+		frame.current?.open();
+	};
+
+	const cleanupFrame = () => {
+		frame.current?.detach();
+		frame.current?.remove();
+	};
+
+	useEffect( () => {
+		return () => {
+			cleanupFrame();
+		};
+	}, [] );
+
+	return {
+		open,
+	};
+}
+
+function createFrame( { onSelect, multiple, types, selected, title, mode = 'browse' }: Options & OpenOptions ) {
+	const frame: MediaFrame = media()( {
+		title,
+		multiple,
+		library: {
+			type: types,
+		},
+	} )
+		.on( 'open', () => {
+			applyMode( frame, mode );
+			applySelection( frame, selected );
+		} )
+		.on( 'close', () => frame.detach() )
+		.on( 'insert select', () => select( frame, multiple, onSelect ) );
+
+	return frame;
+}
+
+function applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {
+	frame.content.mode( mode );
+}
+
+function applySelection( frame: MediaFrame, selected: number | undefined | Array< number | undefined > ) {
+	const selectedAttachments = ( typeof selected === 'number' ? [ selected ] : selected )
+		?.filter( ( id ) => !! id )
+		.map( ( id ) => media().attachment( id as number ) );
+
+	frame
+		.state()
+		.get( 'selection' )
+		.set( selectedAttachments || [] );
+}
+
+function select( frame: MediaFrame, multiple: boolean, onSelect: Options[ 'onSelect' ] ) {
+	const attachments = frame.state().get( 'selection' ).toJSON().map( normalize );
+
+	const onSelectFn = onSelect as ( val: Attachment | Attachment[] ) => void;
+
+	onSelectFn( multiple ? attachments : attachments[ 0 ] );
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export type { Attachment } from './types/attachment';
+
+export { default as useWpMediaAttachment } from './hooks/use-wp-media-attachment';
+export { default as useWpMediaFrame } from './hooks/use-wp-media-frame';

package/src/media.ts

@@ -0,0 +1,12 @@
+import { WpMediaWindow } from './types/wp-media';
+import { WpMediaNotAvailableError } from './errors';
+
+const wpMediaWindow = window as unknown as WpMediaWindow;
+
+export default () => {
+	if ( ! wpMediaWindow.wp?.media ) {
+		throw new WpMediaNotAvailableError();
+	}
+
+	return wpMediaWindow.wp.media;
+};

package/src/normalize.ts

@@ -0,0 +1,18 @@
+import { WpAttachmentJSON } from './types/wp-media';
+import { Attachment } from './types/attachment';
+
+export default function normalize( attachment: WpAttachmentJSON ): Attachment {
+	const { filesizeInBytes, filesizeHumanReadable, author, authorName, ...rest } = attachment;
+
+	return {
+		...rest,
+		filesize: {
+			inBytes: filesizeInBytes,
+			humanReadable: filesizeHumanReadable,
+		},
+		author: {
+			id: parseInt( author ),
+			name: authorName,
+		},
+	};
+}

package/src/types/attachment.ts

@@ -0,0 +1,27 @@
+export type Attachment = {
+	id: number;
+	url: string;
+	alt: string;
+	filename: string;
+	title: string;
+	mime: string;
+	type: string;
+	subtype: string;
+	uploadedTo: number;
+	filesize: {
+		inBytes: number;
+		humanReadable: string;
+	};
+	author: {
+		id: number;
+		name: string;
+	};
+	sizes: Record<
+		string,
+		{
+			width: number;
+			height: number;
+			url: string;
+		}
+	>;
+};