Update dependencies

package.json

@@ -31,32 +31,31 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@playwright/test": "^1.19.0",
+    "@playwright/test": "^1.35.1",
     "@stackblitz/sdk": "^1.6.0",
-    "@types/node": "^17.0.21",
+    "@types/node": "^20.3.1",
     "@typescript-eslint/eslint-plugin": "^5.14.0",
     "@typescript-eslint/parser": "^5.14.0",
     "c8": "^7.11.0",
     "eslint": "^8.8.0",
-    "fuse.js": "^6.5.3",
+    "fuse.js": "^6.6.2",
     "happy-dom": "^2.31.1",
     "prettier": "2.6.0",
     "shiki": "^0.10.1",
-    "solid-app-router": "^0.2.1",
-    "solid-js": "^1.3.2",
-    "solid-transition-group": "0.0.8",
-    "tinykeys": "^1.4.0",
-    "ts-node": "^10.5.0",
-    "typescript": "^4.6.2",
-    "vite": "^2.7.10",
-    "vite-plugin-solid": "^2.2.1",
-    "vitest": "^0.3.2"
+    "solid-js": "^1.7.6",
+    "solid-transition-group": "^0.2.2",
+    "tinykeys": "^2.1.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
+    "vite-plugin-solid": "^2.7.0",
+    "vitest": "^0.32.2"
   },
   "peerDependencies": {
     "fuse.js": "^6.5.3",
     "solid-js": "^1.3.2",
-    "solid-transition-group": "0.0.8",
-    "tinykeys": "^1.4.0"
+    "solid-transition-group": "^0.2.2",
+    "tinykeys": "^2.1.0"
   },
   "files": [
     "pkg-dist"
@@ -83,5 +82,8 @@
     "search bar",
     "solidhack",
     "best_ecosystem"
-  ]
+  ],
+  "dependencies": {
+    "@solidjs/router": "^0.8.2"
+  }
 }

snippets/api-root.snippet.tsx

@@ -6,17 +6,15 @@ import { Root } from 'solid-command-palette';
     [myAction.id]: myAction,
     /* ... other actions ... */
   }}
-
   /* share App's signals and methods with actions */
   actionsContext={{
     count,
     incrementCount,
     deleteMessage,
   }}
-
   /* Custom components to render in palette */
   components={{
     /* content for action in search result list */
     ResultContent,
   }}
-/>
+/>;

src/app/App.tsx

@@ -1,10 +1,10 @@
 import { Component, lazy } from 'solid-js';
-import { RouteDefinition, useRoutes } from 'solid-app-router';
 import AppShellView from './views/app/AppShell.view';
 import DocsShellView from './views/docs/DocsShell/DocsShell.view';
 import DocsView from './views/docs/Docs.view';
 import ApiView from './views/docs/Api/Api.view';
 import HomeView from './views/home/Home.view';
+import { RouteDefinition, useRoutes } from '@solidjs/router';
 
 const routes: Array<RouteDefinition> = [
   {

src/app/index.tsx

@@ -1,7 +1,7 @@
 import { render } from 'solid-js/web';
-import { Router } from 'solid-app-router';
 
 import App from './App';
+import { Router } from '@solidjs/router';
 
 const appRender = () => {
   return (

src/app/views/app/AppShell.view.tsx

@@ -1,10 +1,10 @@
 import { Component, Show } from 'solid-js';
-import { Link, NavLink, NavLinkProps, Outlet, useMatch, useNavigate } from 'solid-app-router';
 import { Root, CommandPalette } from '../../../lib';
 import { SocialIcon, socialsData } from './SocialIcons';
 import { actions } from './actions';
 import utilStyles from '../../utils.module.css';
 import styles from './AppShell.module.css';
+import { Link, NavLink, NavLinkProps, Outlet, useMatch, useNavigate } from '@solidjs/router';
 
 const HeaderNavLink: Component<NavLinkProps> = (p) => {
   return (

src/app/views/demo/Demo.view.tsx

@@ -1,5 +1,4 @@
 import { Component, createSignal, Show } from 'solid-js';
-import { useSearchParams } from 'solid-app-router';
 import { Root, CommandPalette, KbdShortcut } from '../../../lib';
 import { actions } from './actions';
 import { NestedActionDemo } from './NestedActionDemo/NestedActionDemo';
@@ -9,6 +8,7 @@ import { Profile } from './types';
 import utilStyles from '../../utils.module.css';
 import demoStyles from './demoUtils.module.css';
 import styles from './Demo.module.css';
+import { useSearchParams } from '@solidjs/router';
 
 const DemoView: Component = () => {
   const [count, setCount] = createSignal(0);

src/app/views/docs/Api/Api.view.tsx

@@ -1,4 +1,4 @@
-import { Navigate } from 'solid-app-router';
+import { Navigate } from '@solidjs/router';
 import { Component } from 'solid-js';
 
 const ApiView: Component = () => {

src/app/views/docs/Api/ApiDefineAction.view.tsx

@@ -1,7 +1,7 @@
 import { Component } from 'solid-js';
-import { Link } from 'solid-app-router';
 import { Snippet } from '../Snippet/Snippet';
 import docsStyles from '../docsUtils.module.css';
+import { Link } from '@solidjs/router';
 
 const ApiRootView: Component = () => {
   return (

src/app/views/docs/Docs.view.tsx

@@ -1,5 +1,5 @@
+import { Navigate } from '@solidjs/router';
 import { Component } from 'solid-js';
-import { Navigate } from 'solid-app-router';
 
 const DocsView: Component = () => {
   return <Navigate href="/docs/overview" />;

src/app/views/docs/DocsShell/DocsShell.view.tsx

@@ -1,7 +1,7 @@
-import { Component, Suspense } from 'solid-js';
-import { NavLink, NavLinkProps, Outlet, useIsRouting } from 'solid-app-router';
+import { Component, Show, Suspense } from 'solid-js';
 import { Loader } from '../../../shared/Loader/Loader';
 import styles from './DocsShell.module.css';
+import { NavLink, NavLinkProps, useIsRouting } from '@solidjs/router';
 
 const SidebarNavLink: Component<NavLinkProps> = (p) => {
   return (
@@ -51,7 +51,10 @@ const DocsShellView: Component = () => {
         </Show>
       </aside>
       <main class={styles.main}>
-        <Suspense fallback={<Loader size="large" />}>
+        <Suspense
+          fallback={<Loader size="large" />}
+          children={undefined}
+        >
           <div class={styles.mainContent}>
             <Outlet />
           </div>

src/lib/CommandPalette.tsx

@@ -9,7 +9,7 @@ import {
   Show,
 } from 'solid-js';
 import { Transition } from 'solid-transition-group';
-import tinykeys from 'tinykeys';
+import { tinykeys } from 'tinykeys';
 import { useStore } from './StoreContext';
 import { CommandPalettePortal } from './CommandPalettePortal';
 import { KbdShortcut } from './KbdShortcut/KbdShortcut';
@@ -283,7 +283,7 @@ const CommandPaletteInternal: Component<CommandPaletteProps> = (p) => {
             }}
           >
             <label
-              htmlFor={searchInputId}
+              for={searchInputId}
               id={searchLabelId}
               class={utilStyles.visuallyHidden}
             >

src/lib/CommandPalettePortal.tsx

@@ -1,9 +1,9 @@
-import { Component, createRenderEffect, onCleanup } from 'solid-js';
+import { Component, JSX, createRenderEffect, onCleanup } from 'solid-js';
 import { Portal } from 'solid-js/web';
 
 type PortalElem = undefined | HTMLDivElement;
 
-export const CommandPalettePortal: Component = (p) => {
+export const CommandPalettePortal: Component<{ children: JSX.Element }> = (p) => {
   let portalElem: PortalElem;
 
   createRenderEffect(() => {

src/lib/Panel/Result/Result.tsx

@@ -25,7 +25,7 @@ const ResultContent: Component<ResultContentProps> = (p) => {
           {(shortcut) => (
             <KbdShortcut
               class={styles.resultShortcut}
-              shortcut={shortcut}
+              shortcut={shortcut()}
             />
           )}
         </Show>

src/lib/Root.tsx

@@ -33,7 +33,6 @@ export const Root: Component<RootProps> = (p) => {
       setState('searchText', newValue);
     },
     setActionsContext(actionId, newData) {
-      // @ts-expect-error need to figure out nested store setters.
       setState('actionsContext', 'dynamic', actionId, newData);
     },
     resetActionsContext(actionId) {

src/lib/createKbdShortcuts.ts

@@ -1,5 +1,5 @@
 import { onMount, onCleanup } from 'solid-js';
-import tinykeys from 'tinykeys';
+import { tinykeys } from 'tinykeys';
 import { useStore } from './StoreContext';
 import { createActionList } from './createActionList';
 import { getShortcutHandlersMap } from './actionUtils/actionUtils';

src/lib/types.ts

@@ -1,4 +1,4 @@
-import { Component } from 'solid-js';
+import { Component, JSX } from 'solid-js';
 import { DeepReadonly, Store } from 'solid-js/store';
 
 export type ActionId = string;
@@ -60,6 +60,7 @@ export interface RootProps {
   actions: Actions;
   actionsContext: ActionContext;
   components?: Components;
+  children?: JSX.Element;
 }
 
 export interface StoreState {

src/lib/useControls.ts

@@ -7,5 +7,5 @@ export function useControls() {
     openPalette: storeMethods.openPalette,
     closePalette: storeMethods.closePalette,
     togglePalette: storeMethods.togglePalette,
-  }
+  };
 }

vite.config.ts

@@ -7,10 +7,12 @@ export default defineConfig({
   plugins: [solidPlugin()],
   build: {
     target: 'esnext',
-    polyfillDynamicImport: false,
   },
   test: {
     environment: 'happy-dom',
     clearMocks: true,
   },
+  server: {
+    port: 3000,
+  },
 });