Merge pull request framer#448 from framer/global-search/add-design-pages

Global search: Design Pages Support

Author: elmarburke

.yarn/cache/framer-plugin-npm-3.7.0-alpha.1-efd02724c2-f253047cf9.zip

@@ -16,7 +16,7 @@
     "dependencies": {
         "@tanstack/react-virtual": "^3.13.12",
         "clsx": "^2.1.1",
-        "framer-plugin": "3.7.0-alpha.0",
+        "framer-plugin": "3.7.0-alpha.1",
         "idb": "^8.0.3",
         "react": "^18.3.1",
         "react-aria": "^3.43.2",

plugins/global-search/package.json

@@ -73,6 +73,7 @@ const defaultIconClassName = "text-tertiary-light dark:text-tertiary-dark"
 export function ResultIcon({ rootNodeType }: { rootNodeType: RootNodeType }) {
     switch (rootNodeType) {
         case "WebPageNode":
+        case "DesignPageNode":
             return <IconWebPage className={defaultIconClassName} />
         case "Collection":
             return <IconCollection className={defaultIconClassName} />

plugins/global-search/src/components/GroupHeader.tsx

@@ -88,30 +88,25 @@ export function SearchScene() {
     )
 }
 
-/**
- * Contains if you can filter by a root node type.
- *
- * During current state of the plugin, not all types are indexed yet.
- */
-const optionsEnabled = {
+const searchOptions: Record<RootNodeType, true> = {
     ComponentNode: true,
     WebPageNode: true,
     Collection: true,
     CodeFile: true,
+    DesignPageNode: true,
 }
 
-const defaultSearchOptions = entries(optionsEnabled)
-    .filter(([, enabled]) => enabled)
-    .map(([rootNode]) => rootNode)
+const defaultSearchOptions = entries(searchOptions).map(([rootNode]) => rootNode)
 
 const optionsMenuLabels = {
     ComponentNode: "Components",
     WebPageNode: "Pages",
+    DesignPageNode: "Designs",
     Collection: "Collections",
     CodeFile: "Code",
 } as const satisfies Record<RootNodeType, string>
 
-const sortedRootNodeTypes = entries(optionsEnabled).sort(([a], [b]) => compareRootNodeTypeByPriority(a, b))
+const sortedRootNodeTypes = entries(searchOptions).sort(([a], [b]) => compareRootNodeTypeByPriority(a, b))
 
 function useOptionsMenuItems() {
     const [searchOptions, setSearchOptions] = useState<readonly RootNodeType[]>(defaultSearchOptions)

plugins/global-search/src/components/SearchScene.tsx

@@ -81,7 +81,13 @@ export async function groupResults(
     return groups.sort((a, b) => compareRootNodeTypeByPriority(a.entry.rootNodeType, b.entry.rootNodeType))
 }
 
-const orderOfResults = ["WebPageNode", "Collection", "ComponentNode", "CodeFile"] satisfies RootNodeType[]
+const orderOfResults = [
+    "WebPageNode",
+    "DesignPageNode",
+    "Collection",
+    "ComponentNode",
+    "CodeFile",
+] satisfies RootNodeType[]
 
 export function compareRootNodeTypeByPriority(a: RootNodeType, b: RootNodeType): number {
     return orderOfResults.indexOf(a) - orderOfResults.indexOf(b)

plugins/global-search/src/utils/filter/group-results.ts

@@ -4,6 +4,7 @@ import {
     type Collection,
     framer,
     isComponentNode,
+    isDesignPageNode,
     isFrameNode,
     isTextNode,
     isWebPageNode,
@@ -27,6 +28,10 @@ async function getNodeName(node: AnyNode): Promise<string | null> {
         return node.path
     }
 
+    if (isDesignPageNode(node)) {
+        return node.name ?? "Design"
+    }
+
     if (isComponentNode(node)) {
         return node.name ?? "Component"
     }
@@ -203,7 +208,9 @@ export class GlobalSearchIndexer {
         rootNodes: readonly CanvasRootNode[],
         abortSignal?: AbortSignal
     ) {
-        const validRootNodes = rootNodes.filter(rootNode => isComponentNode(rootNode) || isWebPageNode(rootNode))
+        const validRootNodes = rootNodes.filter(
+            rootNode => isComponentNode(rootNode) || isWebPageNode(rootNode) || isDesignPageNode(rootNode)
+        )
 
         for await (const batch of this.crawlNodes(currentIndexRun, validRootNodes)) {
             if (this.abortRequested || abortSignal?.aborted) break
@@ -258,10 +265,11 @@ export class GlobalSearchIndexer {
             const lastIndexRun = await this.db.getLastIndexRun()
             const currentIndexRun = lastIndexRun + 1
 
-            const [pages, components, canvasRoot] = await Promise.all([
+            const [canvasRoot, ...rootNodes] = await Promise.all([
+                framer.getCanvasRoot(),
                 framer.getNodesWithType("WebPageNode"),
                 framer.getNodesWithType("ComponentNode"),
-                framer.getCanvasRoot(),
+                framer.getNodesWithType("DesignPageNode"),
             ])
 
             this.abortRequested = false
@@ -273,9 +281,7 @@ export class GlobalSearchIndexer {
 
             // Remove the current open canvas root from the list of root nodes to index
             // as it's already being indexed by the canvas root watcher
-            const rootNodesWithoutCurrentRoot = [...pages, ...components].filter(
-                rootNode => rootNode.id !== canvasRoot.id
-            )
+            const rootNodesWithoutCurrentRoot = rootNodes.flat().filter(rootNode => rootNode.id !== canvasRoot.id)
 
             await Promise.all([
                 this.processNodes(currentIndexRun, rootNodesWithoutCurrentRoot),

plugins/global-search/src/utils/indexer/indexer.ts

@@ -1,6 +1,6 @@
-import { type AnyNode, ComponentNode, isTextNode, TextNode, WebPageNode } from "framer-plugin"
+import { type AnyNode, ComponentNode, DesignPageNode, isTextNode, TextNode, WebPageNode } from "framer-plugin"
 
-export type IndexNodeRootNode = ComponentNode | WebPageNode
+export type IndexNodeRootNode = ComponentNode | WebPageNode | DesignPageNode
 export type IndexNodeRootNodeType = IndexNodeRootNode["__class"]
 
 export type IndexableNode = TextNode

plugins/global-search/src/utils/indexer/types.ts

@@ -6236,6 +6236,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"framer-plugin@npm:3.7.0-alpha.1":
+  version: 3.7.0-alpha.1
+  resolution: "framer-plugin@npm:3.7.0-alpha.1"
+  peerDependencies:
+    react: ^18.2.0
+    react-dom: ^18.2.0
+  checksum: 10/f253047cf9b4f0fe9cf61aa27dd0651a6e1d3b13cd4cde0b8b467700ccd45189f4e134f665875a8a727c5c5ba36be5d2d83ad074781768281b1772f0077aa140
+  languageName: node
+  linkType: hard
+
 "framer-plugin@npm:^3.6.0":
   version: 3.6.0
   resolution: "framer-plugin@npm:3.6.0"
@@ -6342,7 +6352,7 @@ __metadata:
     "@types/react-dom": "npm:^18.3.7"
     "@vitest/ui": "npm:^3.2.4"
     clsx: "npm:^2.1.1"
-    framer-plugin: "npm:3.7.0-alpha.0"
+    framer-plugin: "npm:3.7.0-alpha.1"
     happy-dom: "npm:^18.0.1"
     idb: "npm:^8.0.3"
     react: "npm:^18.3.1"