Initial commit

Author: garethweaver

.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

README.md

@@ -0,0 +1,15 @@
+# Demonstrates the issue with server rendering and Algolia Autocomplete Astro
+
+```
+yarn dev # start dev server with all 3 components rendering
+yarn build # will error if the server only search input is present
+
+```
+To get yarn build to work slash out the `Server render` component
+
+* `Server render` component renders on the server and mounts with `client:idle`
+causing an issue
+* `Hot replace` has a fake input which renders on the server and then mounts the
+Algolia autocomplete input over the top
+* `Client render` only renders on the client and shows CLS issues as there is no
+server rendered input

astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import react from "@astrojs/react";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [react()],
+});

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "astro-algolia",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@algolia/autocomplete-core": "^1.11.1",
+    "@algolia/autocomplete-preset-algolia": "^1.11.1",
+    "@astrojs/react": "^3.0.3",
+    "@types/react": "^18.2.29",
+    "@types/react-dom": "^18.2.14",
+    "algoliasearch": "^4.20.0",
+    "astro": "^3.3.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

public/favicon.svg

@@ -0,0 +1,28 @@
+---
+import Search from './Search.jsx'
+---
+
+<div class="wrapper">
+  <h1>Server render fake input</h1>
+  <div className="aa-Autocomplete">
+    <!--
+      this is a fake input rendered on the server which has the appearance of
+      being the agolia input before it has been initialized.
+    -->
+    <input className="aa-Input" style={{ background: 'red' }} />
+  </div>
+  <div class="react">
+    <Search title="Server render fake input" client:only />
+  </div>
+</div>
+<style>
+  :global(h1) { margin-top: 0}
+  .wrapper {
+    position: relative;
+  }
+  .react {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+</style>

src/components/ClientSearch.astro

@@ -0,0 +1,90 @@
+import { useState, useMemo } from "react";
+import algoliasearch from "algoliasearch/lite";
+import { createAutocomplete } from "@algolia/autocomplete-core";
+import { getAlgoliaResults } from "@algolia/autocomplete-preset-algolia";
+
+export default function ({ title }) {
+  const searchClient = algoliasearch(
+    "latency",
+    "6be0576ff61c053d5f9a3225e2a90f76"
+  );
+
+  // (1) Create a React state.
+  const [autocompleteState, setAutocompleteState] = useState({});
+  const autocomplete = useMemo(
+    () =>
+      createAutocomplete({
+        onStateChange({ state }) {
+          // (2) Synchronize the Autocomplete state with the React state.
+          setAutocompleteState(state);
+        },
+        id: 'Search thing',
+        getSources() {
+          return [
+            // (3) Use an Algolia index source.
+            {
+              sourceId: "products",
+              getItemInputValue({ item }) {
+                return item.query;
+              },
+              getItems({ query }) {
+                return getAlgoliaResults({
+                  searchClient,
+                  queries: [
+                    {
+                      indexName: "instant_search",
+                      query,
+                      params: {
+                        hitsPerPage: 4,
+                        highlightPreTag: "<mark>",
+                        highlightPostTag: "</mark>",
+                      },
+                    },
+                  ],
+                });
+              },
+              getItemUrl({ item }) {
+                return item.url;
+              },
+            },
+          ];
+        },
+      }),
+    []
+  );
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <div className="aa-Autocomplete" {...autocomplete.getRootProps({})}>
+        <input className="aa-Input" {...autocomplete.getInputProps({})} />
+        <div className="aa-Panel" {...autocomplete.getPanelProps({})}>
+          {autocompleteState.isOpen &&
+            autocompleteState.collections.map((collection, index) => {
+              const { source, items } = collection;
+              return (
+                <div key={`source-${index}`} className="aa-Source">
+                  {items.length > 0 && (
+                    <ul className="aa-List" {...autocomplete.getListProps()}>
+                      {items.map((item) => (
+                        <li
+                          key={item.objectID}
+                          className="aa-Item"
+                          {...autocomplete.getItemProps({
+                            item,
+                            source,
+                          })}
+                        >
+                          {item.name}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Search.jsx

@@ -0,0 +1 @@
+/// <reference types="astro/client" />