fix(api): transform icon when creating icon menu item and predefined …

…about menu item with icon (tauri-apps#11741)

.changes/api-transfrom-icon-about-menu-item.md

@@ -0,0 +1,6 @@
+---
+"@tauri-apps/api": "patch:bug"
+---
+
+Fix error when calling `PredefinedMenuItem.new` to create an `About` menu item that uses an `Image` instance for the about icon.
+

.changes/api-transfrom-icon-icon-menu-item.md

@@ -0,0 +1,6 @@
+---
+"@tauri-apps/api": "patch:bug"
+---
+
+Fix error when calling `IconMenuItem.new` using an `Image` instance for the icon.
+

package.json

@@ -28,7 +28,7 @@
   "packageManager": "[email protected]",
   "pnpm": {
     "overrides": {
-      "rollup@>=4.0.0 <4.22.4": ">=4.22.4",
+      "cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5",
       "cookie@<0.7.0": ">=0.7.0"
     }
   }

packages/api/src/menu/base.ts

@@ -6,6 +6,7 @@ import { Channel, invoke, Resource } from '../core'
 import { transformImage } from '../image'
 import { CheckMenuItemOptions } from './checkMenuItem'
 import { IconMenuItemOptions } from './iconMenuItem'
+import { MenuOptions } from './menu'
 import { MenuItemOptions } from './menuItem'
 import { PredefinedMenuItemOptions } from './predefinedMenuItem'
 import { SubmenuOptions } from './submenu'
@@ -18,19 +19,16 @@ export type ItemKind =
   | 'Submenu'
   | 'Menu'
 
-function injectChannel(
-  i:
-    | MenuItemOptions
-    | SubmenuOptions
-    | IconMenuItemOptions
-    | PredefinedMenuItemOptions
-    | CheckMenuItemOptions
-):
+type MenuItemOptionsAlias =
+  | MenuItemOptions
   | SubmenuOptions
+  | IconMenuItemOptions
   | PredefinedMenuItemOptions
-  | ((MenuItemOptions | IconMenuItemOptions | CheckMenuItemOptions) & {
-      handler?: Channel<string>
-    }) {
+  | CheckMenuItemOptions
+
+function injectChannel(i: MenuItemOptionsAlias): MenuItemOptionsAlias & {
+  handler?: Channel<string>
+} {
   if ('items' in i) {
     i.items = i.items?.map((item) =>
       'rid' in item ? item : injectChannel(item)
@@ -46,7 +44,13 @@ function injectChannel(
 
 export async function newMenu(
   kind: ItemKind,
-  opts?: unknown
+  opts?:
+    | MenuOptions
+    | MenuItemOptions
+    | SubmenuOptions
+    | PredefinedMenuItemOptions
+    | CheckMenuItemOptions
+    | IconMenuItemOptions
 ): Promise<[number, string]> {
   const handler = new Channel<string>()
 
@@ -56,22 +60,30 @@ export async function newMenu(
       delete opts.action
     }
 
+    // about predefined menu item icon
+    if (
+      'item' in opts &&
+      opts.item &&
+      typeof opts.item === 'object' &&
+      'About' in opts.item &&
+      opts.item.About &&
+      typeof opts.item.About === 'object' &&
+      'icon' in opts.item.About &&
+      opts.item.About.icon
+    ) {
+      opts.item.About.icon = transformImage(opts.item.About.icon)
+    }
+
+    // icon menu item icon
+    if ('icon' in opts && opts.icon) {
+      opts.icon = transformImage(opts.icon)
+    }
+
+    // submenu items
     if ('items' in opts && opts.items) {
       function prepareItem(
-        i:
-          | { rid: number; kind: string }
-          | MenuItemOptions
-          | SubmenuOptions
-          | IconMenuItemOptions
-          | PredefinedMenuItemOptions
-          | CheckMenuItemOptions
-      ):
-        | [number, string]
-        | SubmenuOptions
-        | PredefinedMenuItemOptions
-        | MenuItemOptions
-        | IconMenuItemOptions
-        | CheckMenuItemOptions {
+        i: { rid: number; kind: string } | MenuItemOptionsAlias
+      ): [number, string] | MenuItemOptionsAlias {
         if ('rid' in i) {
           return [i.rid, i.kind]
         }
@@ -93,6 +105,8 @@ export async function newMenu(
         return injectChannel(i)
       }
 
+      // @ts-expect-error the `prepareItem` return doesn't exactly match
+      // this is fine, because the difference is in `[number, string]` variant
       opts.items = (opts.items as []).map(prepareItem)
     }
   }

packages/api/src/menu/menu.ts

@@ -13,40 +13,12 @@ import { MenuItem } from './menuItem'
 import { CheckMenuItem } from './checkMenuItem'
 import { IconMenuItem } from './iconMenuItem'
 import { PredefinedMenuItem } from './predefinedMenuItem'
-import { Submenu } from './submenu'
+import { itemFromKind, Submenu } from './submenu'
 import { type LogicalPosition, PhysicalPosition, Position } from '../dpi'
 import { type Window } from '../window'
 import { invoke } from '../core'
 import { type ItemKind, MenuItemBase, newMenu } from './base'
 
-function itemFromKind([rid, id, kind]: [number, string, ItemKind]):
-  | Submenu
-  | MenuItem
-  | PredefinedMenuItem
-  | CheckMenuItem
-  | IconMenuItem {
-  /* eslint-disable @typescript-eslint/no-unsafe-return */
-  switch (kind) {
-    case 'Submenu':
-      // @ts-expect-error constructor is protected for external usage only
-      return new Submenu(rid, id)
-    case 'Predefined':
-      // @ts-expect-error constructor is protected for external usage only
-      return new PredefinedMenuItem(rid, id)
-    case 'Check':
-      // @ts-expect-error constructor is protected for external usage only
-      return new CheckMenuItem(rid, id)
-    case 'Icon':
-      // @ts-expect-error constructor is protected for external usage only
-      return new IconMenuItem(rid, id)
-    case 'MenuItem':
-    default:
-      // @ts-expect-error constructor is protected for external usage only
-      return new MenuItem(rid, id)
-  }
-  /* eslint-enable @typescript-eslint/no-unsafe-return */
-}
-
 /** Options for creating a new menu. */
 export interface MenuOptions {
   /** Specify an id to use for the new menu. */

packages/api/src/menu/submenu.ts

@@ -17,7 +17,8 @@ import { type ItemKind, MenuItemBase, newMenu } from './base'
 import { type MenuOptions } from './menu'
 import { Position } from '../dpi'
 
-function itemFromKind([rid, id, kind]: [number, string, ItemKind]):
+/** @ignore */
+export function itemFromKind([rid, id, kind]: [number, string, ItemKind]):
   | Submenu
   | MenuItem
   | PredefinedMenuItem