Add search endpoint to site-server (#1417)

Author: justinfagnani

package-lock.json

@@ -49,7 +49,11 @@
     },
     "start:dev": {
       "command": "FIRESTORE_EMULATOR_HOST=localhost:7450 npm start",
-      "service": true,
+      "service": {
+        "readyWhen": {
+          "lineMatches": "Server started"
+        }
+      },
       "dependencies": [
         "build",
         "emulators:start"
@@ -66,7 +70,11 @@
     },
     "emulators:start": {
       "command": "firebase emulators:start --project wc-catalog --import firebase-data",
-      "service": true,
+      "service": {
+        "readyWhen": {
+          "lineMatches": "All emulators ready"
+        }
+      },
       "files": [
         "firebase.json",
         "firestore.indexes.json",

packages/catalog-server/package.json

@@ -86,9 +86,7 @@
     }
   },
   "dependencies": {
-    "@urql/core": "^3.0.4",
     "@webcomponents/catalog-api": "^0.0.0",
-    "graphql": "^16.6.0",
     "lit": "^2.6.0",
     "lit-analyzer": "^1.2.1"
   }

packages/site-client/package.json

@@ -6,28 +6,10 @@
 
 import {html, css, LitElement} from 'lit';
 import {customElement, query, state} from 'lit/decorators.js';
-import {gql, createClient, defaultExchanges} from '@urql/core';
 import type {CustomElement} from '@webcomponents/catalog-api/lib/schema.js';
 
 import './wco-element-card.js';
 
-const client = createClient({
-  // TODO (justinfagnani): get this URL from server
-  url: 'http://localhost:6451/graphql',
-  exchanges: defaultExchanges,
-});
-
-const elementsQuery = gql`
-  query Elements($query: String) {
-    elements(query: $query, limit: 16) {
-      tagName
-      package
-      version
-      className
-    }
-  }
-`;
-
 @customElement('wco-catalog-search')
 export class WCOCatalogSearch extends LitElement {
   static styles = css`
@@ -78,10 +60,9 @@ export class WCOCatalogSearch extends LitElement {
 
   async _onChange() {
     const searchText = this._search.value;
-    const result = await client
-      .query(elementsQuery, {query: searchText})
-      .toPromise();
-    this._elements = result.data?.elements;
+    const response = await fetch(`/catalog/search?query=${searchText}`);
+    const result = await response.json();
+    this._elements = result.elements;
   }
 }
 

packages/site-client/src/components/wco-catalog-search.ts

@@ -98,7 +98,8 @@
     "test": {
       "command": "NODE_OPTIONS=--enable-source-maps uvu test \"_test\\.js$\"",
       "dependencies": [
-        "start:dev"
+        "start:dev",
+        "../catalog-server:start:dev"
       ]
     }
   },

packages/site-server/package.json

@@ -6,10 +6,16 @@
 
 import Router from '@koa/router';
 import {handleCatalogRoute} from './routes/catalog/catalog-route.js';
+import {handleCatalogSearchRoute} from './routes/catalog/search-route.js';
 import {handleElementRoute} from './routes/element/element-route.js';
+// import cors from '@koa/cors';
 
 export const catalogRouter = new Router();
 
+// catalogRouter.use(cors());
+
 catalogRouter.get('/', handleCatalogRoute);
 
+catalogRouter.get('/search', handleCatalogSearchRoute);
+
 catalogRouter.get('/element/:path+', handleElementRoute);

packages/site-server/src/lib/catalog/router.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {DefaultContext, DefaultState, ParameterizedContext} from 'koa';
+import Router from '@koa/router';
+import {client} from '../../graphql.js';
+import {gql} from '@apollo/client/core/index.js';
+
+import '@webcomponents/internal-site-client/lib/entrypoints/catalog.js';
+
+const elementsQuery = gql`
+  query Elements($query: String) {
+    elements(query: $query, limit: 16) {
+      tagName
+      package
+      version
+      className
+    }
+  }
+`;
+
+export const handleCatalogSearchRoute = async (
+  context: ParameterizedContext<
+    DefaultState,
+    DefaultContext & Router.RouterParamContext<DefaultState, DefaultContext>,
+    unknown
+  >
+) => {
+  const searchText = context.query['query'];
+  context.type = 'json';
+
+  if (typeof searchText !== 'string') {
+    context.status = 400;
+    context.body = {
+      message: 'Query parmeter `query` must be a string',
+    };
+    return;
+  }
+
+  const result = await client.query({
+    query: elementsQuery,
+    variables: {query: searchText},
+  });
+
+  if (result.error) {
+    context.status = 500;
+    context.body = {
+      message: result.error,
+    };
+    return;
+  }
+
+  context.status = 200;
+  context.body = {
+    elements: result.data?.elements,
+  };
+};

packages/site-server/src/lib/catalog/routes/catalog/search-route.ts

@@ -14,19 +14,28 @@ const request = async (path: string) => fetch(`http://127.0.0.1:5450${path}`);
 
 test('Returns 404 for malformed element page URL', async () => {
   // Missing package and element:
-  assert.equal((await request('/element/')).status, 404);
+  assert.equal((await request('/catalog/element/')).status, 404);
 
   // Missing element name on scoped package:
-  assert.equal((await request('/element/@lion/button')).status, 404);
+  assert.equal((await request('/catalog/element/@lion/button')).status, 404);
 
   // Missing element name on non-scoped package:
-  assert.equal((await request('/element/chessboard-element')).status, 404);
+  assert.equal(
+    (await request('/catalog/element/chessboard-element')).status,
+    404
+  );
 
   // Extra path segments on scoped package:
-  assert.equal((await request('/element/@lion/button/a/b')).status, 404);
+  assert.equal(
+    (await request('/catalog/element/@lion/button/a/b')).status,
+    404
+  );
 
   // Extra path segments on non-scoped package:
-  assert.equal((await request('/element/chessboard-element/a/b')).status, 404);
+  assert.equal(
+    (await request('/catalog/element/chessboard-element/a/b')).status,
+    404
+  );
 });
 
 test.run();

packages/site-server/src/test/catalog/routes_test.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {suite} from 'uvu';
+// eslint-disable-next-line import/extensions
+import * as assert from 'uvu/assert';
+
+const test = suite('Route tests');
+
+const request = async (path: string) => fetch(`http://127.0.0.1:5450${path}`);
+
+test('Finds a button', async () => {
+  // Import lion-button
+  assert.equal(
+    (await request('/catalog/element/@lion/button/lion-button')).status,
+    200
+  );
+
+  // Import sl-button
+  assert.equal(
+    (await request('/catalog/element/@shoelace-style/shoelace/sl-button'))
+      .status,
+    200
+  );
+
+  const response = await request('/catalog/search?query=button');
+  assert.equal(response.status, 200);
+  const result = await response.json();
+
+  // Shoelace has a few buttons that all get imported
+  assert.ok(result.elements.length > 2);
+});
+
+test.run();

packages/site-server/src/test/catalog/search_test.ts

@@ -8,10 +8,10 @@ import * as assert from "uvu/assert";
 const test = suite("Route tests");
 const request = async (path) => fetch(`http://127.0.0.1:5450${path}`);
 test("Returns 404 for malformed element page URL", async () => {
-  assert.equal((await request("/element/")).status, 404);
-  assert.equal((await request("/element/@lion/button")).status, 404);
-  assert.equal((await request("/element/chessboard-element")).status, 404);
-  assert.equal((await request("/element/@lion/button/a/b")).status, 404);
-  assert.equal((await request("/element/chessboard-element/a/b")).status, 404);
+  assert.equal((await request("/catalog/element/")).status, 404);
+  assert.equal((await request("/catalog/element/@lion/button")).status, 404);
+  assert.equal((await request("/catalog/element/chessboard-element")).status, 404);
+  assert.equal((await request("/catalog/element/@lion/button/a/b")).status, 404);
+  assert.equal((await request("/catalog/element/chessboard-element/a/b")).status, 404);
 });
 test.run();