refactor: move code that should be shipped client side to the server side
+ 18
- 9
@@ -1,5 +1,5 @@
 {
-  "_generatedAtUnix": 1664145470090,
+  "_generatedAtUnix": 1664146136057,
   "_hashAlgorithm": "sha1",
   "_version": 2,
   "islands": {

app/components/Code.tsx
@@ -1,7 +1,6 @@
 // 3rd-party
 import React, { VFC, useMemo } from "react";
 import Prism from "prismjs";
-import loadLanguages from "prismjs/components/";
 import styled, { css } from "styled-components";
 // app
 import type { AppThemeScheme, WithThemeSchemeProp } from "../types";

...
@@ -13,10 +12,6 @@ interface CodeProps {
   [x: string]: unknown;
 }
 
-if (typeof window === "undefined") {
-  loadLanguages();
-}
-
 export const Code: VFC<CodeProps & WithThemeSchemeProp> = ({
   code,
   language,

app/components/Layout.tsx
@@ -1,5 +1,3 @@
-// 1st-party
-import { removeCommentsAndSpacing } from "@ethicdevs/react-monolith";
 // 3rd-party
 import React, { FC } from "react";
 import styled, { css } from "styled-components";

...
@@ -17,6 +15,10 @@ interface LayoutProps extends CommonViewProps {
 const BRANDLINE_HEIGHT = 4;
 const HEADER_HEIGHT = 72;
 
+function removeCommentsAndSpacing(str = "") {
+  return str.replace(/\/\*.*\*\//g, " ").replace(/\s+/g, " ");
+}
+
 export const Layout: FC<LayoutProps & WithThemeSchemeProp> = (commonProps) => {
   const { children, themeScheme } = commonProps;
 

@@ -1,4 +1,4 @@
-// 3rd-party
+// 1st-party
 import { InMemoryCacheAdapter } from "@ethicdevs/fastify-stream-react-views";
 import {
   AppServer,

...
@@ -6,6 +6,7 @@ import {
   startAppServer,
   stopAppServerAndExit,
 } from "@ethicdevs/react-monolith";
+// 3rd-party
 import cuid from "cuid";
 import fastifyCookie, { CookieSerializeOptions } from "@fastify/cookie";
 import fastifyCustomSession, {

...
@@ -14,6 +15,7 @@ import fastifyCustomSession, {
 import fastifyFormBody from "@fastify/formbody";
 import fastifyGitServer from "@ethicdevs/fastify-git-server";
 import fastifyServeStatic from "fastify-static";
+import loadPrismJsLanguages from "prismjs/components/";
 // generated via script[generate:prisma]
 import { GlobalRole, PrismaClient } from "@prisma/client";
 // app root

...
@@ -180,6 +182,16 @@ async function main(): Promise<AppServer> {
       // add a preHandler to warn against bad localhost usage (so cookies works)
       s.addHook("preHandler", localAppDomainPreHandler);
 
+      // load Prism languages/grammars to enable SSR syntax highlighting
+      try {
+        loadPrismJsLanguages();
+      } catch (err) {
+        console.error(
+          "Could not load Prism.JS languages, syntax highlighting may not work as expected.",
+          `Error: ${(err as Error).message}`
+        );
+      }
+
       // add a reply decorator so we can reply with common props from app
       s.decorateReply("makeRequestHandler", makeRequestHandler);