feat: enable streaming (#29)

* feat: enable streaming * fix: lint warning * fix: tag search * feat: enable filters on rss
edmundhung · Nov 22, 2022 · b2b563e · b2b563e
1 parent 2a47b88
commit b2b563e
Show file tree

Hide file tree

Showing 12 changed files with 166 additions and 124 deletions.
diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml
@@ -6,8 +6,6 @@ jobs:
     name: 🔍 Testing
     runs-on: ubuntu-latest
     steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/[email protected]
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
       - name: ⎔ Setup node
@@ -27,8 +25,6 @@ jobs:
     name: ⬣ Linting
     runs-on: ubuntu-latest
     steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/[email protected]
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
       - name: ⎔ Setup node

diff --git a/app/components/ResourcesDetails.tsx b/app/components/ResourcesDetails.tsx
@@ -8,7 +8,6 @@ import backIcon from '~/icons/back.svg';
 import bookmarkIcon from '~/icons/bookmark.svg';
 import {
 	getSite,
-	createIntegrationSearch,
 	toggleSearchParams,
 	getResourceURL,
 	getSearchOptions,
@@ -17,6 +16,7 @@ import { PaneContainer, PaneHeader, PaneFooter, PaneContent } from '~/layout';
 import FlashMessage from '~/components/FlashMessage';
 import type { User } from '~/types';
 import IconLink from '~/components/IconLink';
+import { platforms } from '~/config';
 import { isAdministrator } from '~/helpers';
 import { useLists } from '~/hooks';
 
@@ -154,7 +154,10 @@ function ResourcesDetails({
 													<Link
 														key={list.slug}
 														className="text-xs bg-gray-700 hover:bg-gray-500 rounded-md px-2"
-														to={getResourceURL({ list: list.slug })}
+														to={getResourceURL({
+															list: list.slug,
+															sort: 'top',
+														})}
 													>
 														{list.title}
 													</Link>
@@ -163,7 +166,17 @@ function ResourcesDetails({
 												<Link
 													key={integration}
 													className="text-xs bg-gray-700 hover:bg-gray-500 rounded-md px-2"
-													to={getResourceURL({ integrations: [integration] })}
+													to={
+														platforms.includes(integration)
+															? getResourceURL({
+																	sort: 'top',
+																	platform: integration,
+															  })
+															: getResourceURL({
+																	sort: 'top',
+																	integrations: [integration],
+															  })
+													}
 												>
 													{integration}
 												</Link>

diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -1,4 +1,22 @@
-import ReactDOM from 'react-dom';
 import { RemixBrowser } from '@remix-run/react';
+import { startTransition, StrictMode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
 
-ReactDOM.hydrate(<RemixBrowser />, document);
+function hydrate() {
+	startTransition(() => {
+		hydrateRoot(
+			document,
+			<StrictMode>
+				<RemixBrowser />
+			</StrictMode>,
+		);
+	});
+}
+
+if (window.requestIdleCallback) {
+	window.requestIdleCallback(hydrate);
+} else {
+	// Safari doesn't support requestIdleCallback
+	// https://caniuse.com/requestidlecallback
+	window.setTimeout(hydrate, 1);
+}
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -1,21 +1,34 @@
-import ReactDOMServer from 'react-dom/server';
-import type { EntryContext } from '@remix-run/cloudflare';
+import { type EntryContext } from '@remix-run/cloudflare';
 import { RemixServer } from '@remix-run/react';
+import isbot from 'isbot';
+import { renderToReadableStream } from 'react-dom/server';
 
-export default function handleRequest(
+export default async function handleRequest(
 	request: Request,
 	responseStatusCode: number,
 	responseHeaders: Headers,
 	remixContext: EntryContext,
 ) {
-	let markup = ReactDOMServer.renderToString(
+	const body = await renderToReadableStream(
 		<RemixServer context={remixContext} url={request.url} />,
+		{
+			onError: (error) => {
+				responseStatusCode = 500;
+				console.error(error);
+			},
+			signal: request.signal,
+		},
 	);
 
-	responseHeaders.set('Content-Type', 'text/html');
+	if (isbot(request.headers.get('User-Agent'))) {
+		await body.allReady;
+	}
 
-	return new Response('<!DOCTYPE html>' + markup, {
+	const headers = new Headers(responseHeaders);
+	headers.set('Content-Type', 'text/html');
+
+	return new Response(body, {
 		status: responseStatusCode,
-		headers: responseHeaders,
+		headers,
 	});
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -21,6 +21,8 @@ export const PaneContainer = forwardRef<HTMLElement, PaneContainerProps>(
 	},
 );
 
+PaneContainer.displayName = 'PaneContainer';
+
 interface PaneHeaderProps {
 	padding?: Padding;
 	children: ReactNode;

diff --git a/app/routes/[rss.xml].tsx b/app/routes/[rss.xml].tsx
@@ -1,5 +1,6 @@
 import type { LoaderArgs } from '@remix-run/cloudflare';
 import { search } from '~/resources';
+import { getSearchOptions } from '~/search';
 
 interface FeedEntry {
 	title: string;
@@ -8,20 +9,22 @@ interface FeedEntry {
 	guid: string;
 }
 
-export async function loader({ context }: LoaderArgs) {
-	const domain = 'https://remix.guide';
+export async function loader({ request, context }: LoaderArgs) {
+	const url = new URL(request.url);
+	const searchOptions = getSearchOptions(request.url);
 	const resources = await context.resourceStore.list();
 	const list = search(resources, {
-		limit: 25,
+		...searchOptions,
 		sort: 'new',
+		limit: 25,
 	});
 	const entries = list.entries.reduce<FeedEntry[]>((list, resource) => {
 		if (resource.title) {
 			list.push({
 				title: resource.title,
 				pubDate: new Date(resource.createdAt).toUTCString(),
 				link: resource.url,
-				guid: `${domain}/resources/${resource.id}`,
+				guid: `${url.origin}/resources/${resource.id}`,
 			});
 		}
 

diff --git a/app/routes/[sitemap.xml].tsx b/app/routes/[sitemap.xml].tsx
@@ -14,24 +14,24 @@ interface SitemapEntry {
 	priority?: 1.0 | 0.9 | 0.8 | 0.7 | 0.6 | 0.5 | 0.4 | 0.3 | 0.2 | 0.1 | 0.0;
 }
 
-export async function loader({ context }: LoaderArgs) {
+export async function loader({ request, context }: LoaderArgs) {
+	const url = new URL(request.url);
 	const guide = await context.resourceStore.getData();
-	const domain = 'https://remix.guide';
 	const entries: SitemapEntry[] = [
-		{ loc: domain, changefreq: 'hourly', priority: 1 },
+		{ loc: url.origin, changefreq: 'hourly', priority: 1 },
 	];
 
 	for (const list of guide.metadata.lists ?? []) {
 		entries.push({
-			loc: `${domain}/${list.slug}`,
+			loc: `${url.origin}/${list.slug}`,
 			changefreq: 'hourly',
 			priority: 0.8,
 		});
 	}
 
 	for (const [resourceId, resource] of Object.entries(guide.value)) {
 		entries.push({
-			loc: `${domain}/resources/${resourceId}`,
+			loc: `${url.origin}/resources/${resourceId}`,
 			lastmod: resource.updatedAt,
 			changefreq: 'weekly',
 			priority: 0.5,

diff --git a/app/scroll.tsx b/app/scroll.tsx
@@ -111,7 +111,6 @@ export function useFeedScrollRestoration(prefix = 'feed') {
 			// been here before, scroll to it
 			if (y != undefined) {
 				scrollOnElemenIfScrollable(ref.current, 0, y);
-				console.log('restored with y: ', y);
 				return;
 			}
 
@@ -123,7 +122,6 @@ export function useFeedScrollRestoration(prefix = 'feed') {
 
 			// otherwise go to the top on new locations
 			scrollOnElemenIfScrollable(ref.current, 0, 0);
-			console.log('go to top');
 		}, [prefix, location]);
 	}
 

diff --git a/app/search.ts b/app/search.ts
@@ -1,5 +1,4 @@
 import type { SearchOptions } from '~/types';
-import { platforms } from '~/config';
 import { capitalize } from '~/helpers';
 
 /**
@@ -77,18 +76,6 @@ export function getSite(url: string): string {
 	return new URL(url).hostname;
 }
 
-export function createIntegrationSearch(value: string): string {
-	const searchParams = new URLSearchParams({ sort: 'top' });
-
-	if (platforms.includes(value)) {
-		searchParams.set('platform', value);
-	} else {
-		searchParams.set('integration', value);
-	}
-
-	return searchParams.toString();
-}
-
 export function getResourceSearchParams(
 	options: SearchOptions,
 ): URLSearchParams {