@elementor/wp-media 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [e7f4706]
8
+ - @elementor/utils@0.3.0
9
+
3
10
  ## 0.2.1
4
11
 
5
12
  ### Patch Changes
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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 | null ) {\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 | null ] } ) {\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 {\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-models` 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 | null >;\n\t\t\tonSelect: ( val: Attachment[] ) => void;\n\t }\n\t| {\n\t\t\tmultiple: false;\n\t\t\tselected: number | null;\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( frame.current );\n\n\t\tframe.current = createFrame( { ...options, ...openOptions } );\n\n\t\tframe.current?.open();\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanupFrame( frame.current );\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', () => cleanupFrame( frame ) )\n\t\t.on( 'insert select', () => select( frame, multiple, onSelect ) );\n\n\treturn frame;\n}\n\nfunction cleanupFrame( frame?: MediaFrame ) {\n\tframe?.detach();\n\tframe?.remove();\n}\n\nfunction applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {\n\tframe.content.mode( mode );\n}\n\nfunction applySelection( frame: MediaFrame, selected: number | null | Array< number | null > ) {\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":[]}
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';\n\nimport media from '../media';\nimport normalize from '../normalize';\n\nexport default function useWpMediaAttachment( id: number | null ) {\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 | null ] } ) {\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 {\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-models` handle is set in the dependencies array',\n} );\n","import { WpMediaNotAvailableError } from './errors';\nimport { type WpMediaWindow } from './types/wp-media';\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 { type Attachment } from './types/attachment';\nimport { type WpAttachmentJSON } from './types/wp-media';\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';\n\nimport media from '../media';\nimport normalize from '../normalize';\nimport { type Attachment } from '../types/attachment';\nimport { type MediaFrame } from '../types/wp-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 | null >;\n\t\t\tonSelect: ( val: Attachment[] ) => void;\n\t }\n\t| {\n\t\t\tmultiple: false;\n\t\t\tselected: number | null;\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( frame.current );\n\n\t\tframe.current = createFrame( { ...options, ...openOptions } );\n\n\t\tframe.current?.open();\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanupFrame( frame.current );\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', () => cleanupFrame( frame ) )\n\t\t.on( 'insert select', () => select( frame, multiple, onSelect ) );\n\n\treturn frame;\n}\n\nfunction cleanupFrame( frame?: MediaFrame ) {\n\tframe?.detach();\n\tframe?.remove();\n}\n\nfunction applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {\n\tframe.content.mode( mode );\n}\n\nfunction applySelection( frame: MediaFrame, selected: number | null | Array< number | null > ) {\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":[]}
@@ -1 +1 @@
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 | null ) {\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 | null ] } ) {\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 {\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-models` 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 | null >;\n\t\t\tonSelect: ( val: Attachment[] ) => void;\n\t }\n\t| {\n\t\t\tmultiple: false;\n\t\t\tselected: number | null;\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( frame.current );\n\n\t\tframe.current = createFrame( { ...options, ...openOptions } );\n\n\t\tframe.current?.open();\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanupFrame( frame.current );\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', () => cleanupFrame( frame ) )\n\t\t.on( 'insert select', () => select( frame, multiple, onSelect ) );\n\n\treturn frame;\n}\n\nfunction cleanupFrame( frame?: MediaFrame ) {\n\tframe?.detach();\n\tframe?.remove();\n}\n\nfunction applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {\n\tframe.content.mode( mode );\n}\n\nfunction applySelection( frame: MediaFrame, selected: number | null | Array< number | null > ) {\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":[]}
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';\n\nimport media from '../media';\nimport normalize from '../normalize';\n\nexport default function useWpMediaAttachment( id: number | null ) {\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 | null ] } ) {\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 {\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-models` handle is set in the dependencies array',\n} );\n","import { WpMediaNotAvailableError } from './errors';\nimport { type WpMediaWindow } from './types/wp-media';\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 { type Attachment } from './types/attachment';\nimport { type WpAttachmentJSON } from './types/wp-media';\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';\n\nimport media from '../media';\nimport normalize from '../normalize';\nimport { type Attachment } from '../types/attachment';\nimport { type MediaFrame } from '../types/wp-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 | null >;\n\t\t\tonSelect: ( val: Attachment[] ) => void;\n\t }\n\t| {\n\t\t\tmultiple: false;\n\t\t\tselected: number | null;\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( frame.current );\n\n\t\tframe.current = createFrame( { ...options, ...openOptions } );\n\n\t\tframe.current?.open();\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanupFrame( frame.current );\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', () => cleanupFrame( frame ) )\n\t\t.on( 'insert select', () => select( frame, multiple, onSelect ) );\n\n\treturn frame;\n}\n\nfunction cleanupFrame( frame?: MediaFrame ) {\n\tframe?.detach();\n\tframe?.remove();\n}\n\nfunction applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {\n\tframe.content.mode( mode );\n}\n\nfunction applySelection( frame: MediaFrame, selected: number | null | Array< number | null > ) {\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 CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elementor/wp-media",
3
3
  "description": "An adapter for WordPress' media utils",
4
- "version": "0.2.1",
4
+ "version": "0.2.2",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -41,7 +41,7 @@
41
41
  },
42
42
  "dependencies": {
43
43
  "@elementor/query": "^0.2.3",
44
- "@elementor/utils": "^0.2.2"
44
+ "@elementor/utils": "^0.3.0"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "react": "^18.3.1"
@@ -1,4 +1,5 @@
1
1
  import { useQuery } from '@elementor/query';
2
+
2
3
  import media from '../media';
3
4
  import normalize from '../normalize';
4
5
 
@@ -1,8 +1,9 @@
1
1
  import { useEffect, useRef } from 'react';
2
- import normalize from '../normalize';
3
- import { MediaFrame } from '../types/wp-media';
4
- import { Attachment } from '../types/attachment';
2
+
5
3
  import media from '../media';
4
+ import normalize from '../normalize';
5
+ import { type Attachment } from '../types/attachment';
6
+ import { type MediaFrame } from '../types/wp-media';
6
7
 
7
8
  type OpenOptions = {
8
9
  mode?: 'upload' | 'browse';
package/src/media.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { WpMediaWindow } from './types/wp-media';
2
1
  import { WpMediaNotAvailableError } from './errors';
2
+ import { type WpMediaWindow } from './types/wp-media';
3
3
 
4
4
  const wpMediaWindow = window as unknown as WpMediaWindow;
5
5
 
package/src/normalize.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { WpAttachmentJSON } from './types/wp-media';
2
- import { Attachment } from './types/attachment';
1
+ import { type Attachment } from './types/attachment';
2
+ import { type WpAttachmentJSON } from './types/wp-media';
3
3
 
4
4
  export default function normalize( attachment: WpAttachmentJSON ): Attachment {
5
5
  const { filesizeInBytes, filesizeHumanReadable, author, authorName, ...rest } = attachment;