WIP

.eslintrc.json

@@ -2,5 +2,13 @@
   "extends": ["@alleyinteractive/eslint-config/typescript-react"],
   "parserOptions": {
     "project": "./tsconfig.eslint.json"
-  }
+  },
+  "overrides": [
+    {
+        "files": ["*.tsx", "*.d.ts"],
+        "rules": {
+            "no-undef": "off"
+        }
+    }
+  ]
 }

entries/command-palette/app.tsx

@@ -1,100 +1,17 @@
-import { Command, CommandMenu, useCommandLoader } from '@wordpress/commands';
-import { arrowRight } from '@wordpress/icons';
-
-// import {
-//   post, page, layout, symbolFilled,
-// } from '@wordpress/icons';
-import { useCallback } from 'react';
+import { useMemo } from 'react';
+import { CommandMenu, useCommandLoader } from '@wordpress/commands';
+import commands from '@/services/commands';
 
+/**
+ * Command Palette Application
+ */
 function App() {
-  console.log('aaa');
-
-  const settingsPageLinks = useCallback(() => {
-    const links = document.querySelectorAll('#adminmenu a');
-    const index: Command[] = [];
-
-    Array.from(links).forEach((link) => {
-      const url = link.getAttribute('href');
-      let label = link.textContent;
-
-      if (url?.endsWith('edit-comments.php')) {
-        label = 'Comments';
-      }
-
-      if (url && label) {
-        index.push({
-          label: `Go to Settings: ${label}`,
-          url,
-          name: url,
-          icon: arrowRight,
-          callback: (args: any) => {
-            console.log('the args', args);
-
-            window.location.href = url;
-          },
-        });
-      }
-    });
-
-    return index;
-  }, []);
-
-  // function usePageSearchCommandLoader({ search }) {
-  //   console.log('search', search);
-
-  //   return {
-  //     commands: settingsPageLinks(),
-  //     isLoading: false,
-  //   };
-  //   // // Retrieve the pages for the "search" term.
-  //   // const { records, isLoading } = useSelect( ( select ) => {
-  //   //     const { getEntityRecords } = select( coreStore );
-  //   //     const query = {
-  //   //         search: !! search ? search : undefined,
-  //   //         per_page: 10,
-  //   //         orderby: search ? 'relevance' : 'date',
-  //   //     };
-  //   //     return {
-  //   //         records: getEntityRecords( 'postType', 'page', query ),
-  //   //         isLoading: ! select( coreStore ).hasFinishedResolution(
-  //   //             'getEntityRecords',
-  //   //             'postType', 'page', query ]
-  //   //         ),
-  //   //     };
-  //   // }, [ search ] );
-
-  //   // // Create the commands.
-  //   // const commands = useMemo( () => {
-  //   //     return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
-  //   //         return {
-  //   //             name: record.title?.rendered + ' ' + record.id,
-  //   //             label: record.title?.rendered
-  //   //                 ? record.title?.rendered
-  //   //                 : __( '(no title)' ),
-  //   //             icon: icons[ postType ],
-  //   //             callback: ( { close } ) => {
-  //   //                 const args = {
-  //   //                     postType,
-  //   //                     postId: record.id,
-  //   //                     ...extraArgs,
-  //   //                 };
-  //   //                 document.location = addQueryArgs( 'site-editor.php', args );
-  //   //                 close();
-  //   //             },
-  //   //         };
-  //   //     } );
-  //   // }, [ records, history ] );
-
-  //   // return {
-  //   //     commands,
-  //   //     isLoading,
-  //   // };
-  // }
+  const availableCommands = useMemo(() => commands(), []);
 
   useCommandLoader({
     name: 'wp-command-palette',
     hook: () => ({
-      commands: settingsPageLinks(),
+      commands: availableCommands,
       isLoading: false,
     }),
   });

package.json

@@ -60,6 +60,7 @@
     "@alleyinteractive/create-entry": "^0.0.4",
     "@alleyinteractive/eslint-config": "^0.1.6",
     "@alleyinteractive/stylelint-config": "^0.0.2",
+    "@alleyinteractive/tsconfig": "^0.1.1",
     "@babel/preset-env": "^7.24.7",
     "@types/jest": "^29.5.12",
     "@types/wordpress__block-editor": "^11.5.11",

services/commands/adminMenu.ts

@@ -0,0 +1,39 @@
+import { arrowRight } from '@wordpress/icons';
+import type { Command } from '@wordpress/commands';
+
+/**
+ * Collect all admin menu links as possible commands.
+ */
+const adminMenu = (): Command[] => {
+  const links = document.querySelectorAll('#adminmenu a');
+  const index: Command[] = [];
+
+  Array.from(links).forEach((link) => {
+    const url = link.getAttribute('href');
+
+    if (!url || url === '#') {
+      return;
+    }
+
+    let label = link.textContent;
+
+    if (url.endsWith('edit-comments.php')) {
+      label = 'Comments';
+    }
+
+    if (url && label) {
+      index.push({
+        label: `Go to Settings: ${label}`,
+        name: url,
+        icon: arrowRight,
+        callback: () => {
+          window.location.href = url;
+        },
+      });
+    }
+  });
+
+  return index;
+};
+
+export default adminMenu;

services/commands/index.ts

@@ -0,0 +1,10 @@
+import adminMenu from './adminMenu';
+
+/**
+ * Commands available to be added by the plugin.
+ */
+const commands = () => [
+  ...adminMenu(),
+];
+
+export default commands;

tsconfig.json

@@ -1,15 +1,8 @@
 {
+  "extends": "@alleyinteractive/tsconfig/base.json",
   "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
+    "allowJs": false,
     "baseUrl": ".",
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "module": "es6",
-    "moduleResolution": "node",
-    "noImplicitAny": true,
-    "outDir": "build",
     "paths": {
       "@/*": ["*"]
     },
@@ -20,7 +13,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "es2020"
+    "target": "ESNext"
   },
   "exclude": [
     "vendor",

types/wordpressCommands.d.ts

@@ -2,7 +2,7 @@ declare module '@wordpress/commands' {
   export type Command = {
     name: string;
     label: string;
-    icon?: React.ReactNode;
+    icon?: import('react').ReactNode;
     callback: (args: { close: () => void }) => void;
   };