move code util to own module

website/docs/api/standard.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-import { code as ts } from "/src/components/CustomSandpack";
+import ts from "/src/lib/code";
 import { ConsoleSandbox } from "/src/components/ConsoleSandbox";
 
 # Standard Methods

website/docs/setup.mdx

@@ -9,18 +9,19 @@ A "history adapter" for managing undoable (and redoable) state changes with [imm
 
 Also includes a Redux specific version, with additional utilities for use with Redux Toolkit.
 
-## Redux Sandbox
+## Sandboxes
 
 import PatchesTabs from "/src/components/PatchesTabs";
 import RTKCounter from "/src/components/RTKCounter";
+import ZustandCounter from "/src/components/ZustandCounter";
+
+### Redux Toolkit
 
 <PatchesTabs>
   <RTKCounter />
 </PatchesTabs>
 
-## Zustand Sandbox
-
-import ZustandCounter from "/src/components/ZustandCounter";
+### Zustand
 
 <PatchesTabs>
   <ZustandCounter />

website/src/components/ConsoleSandbox.tsx

@@ -1,10 +1,8 @@
 import type { SandpackProps } from "@codesandbox/sandpack-react";
-import {
-  CustomSandpack,
-  code as ts,
-  code as tsx,
-  code as css,
-} from "./CustomSandpack";
+import { CustomSandpack } from "./CustomSandpack";
+import code from "../lib/code";
+
+const { ts, tsx, css } = code;
 
 export function ConsoleSandbox({
   code,

website/src/components/CustomSandpack.tsx

@@ -3,13 +3,6 @@ import { Sandpack } from "@codesandbox/sandpack-react";
 import { dracula, githubLight } from "@codesandbox/sandpack-themes";
 import { useColorMode } from "@docusaurus/theme-common";
 
-const removeLeadingTrailingNewlines: typeof String.raw = (str, ...args) =>
-  String.raw(str, ...args)
-    .replace(/^\n/, "")
-    .replace(/\n$/, "");
-
-export const code = removeLeadingTrailingNewlines;
-
 export function CustomSandpack(props: SandpackProps) {
   const { colorMode } = useColorMode();
   const theme = colorMode === "dark" ? dracula : githubLight;

website/src/components/RTKCounter.tsx

@@ -1,6 +1,9 @@
 import type { SandpackFiles } from "@codesandbox/sandpack-react";
-import { CustomSandpack, code as ts } from "./CustomSandpack";
+import { CustomSandpack } from "./CustomSandpack";
 import { usePatches } from "./PatchesTabs";
+import code from "../lib/code";
+
+const { ts } = code;
 
 export const defaultFiles = {
   "/counterSlice.ts": ts`

website/src/components/ZustandCounter.tsx

@@ -1,6 +1,9 @@
 import type { SandpackFiles } from "@codesandbox/sandpack-react";
-import { CustomSandpack, code as ts } from "./CustomSandpack";
+import { CustomSandpack } from "./CustomSandpack";
 import { usePatches } from "./PatchesTabs";
+import code from "../lib/code";
+
+const { ts } = code;
 
 export const defaultFiles = {
   "/counterStore.ts": ts`

website/src/lib/code.ts

@@ -0,0 +1,17 @@
+const stripPatterns = [/^\n/, /\n$/];
+
+const code: typeof String.raw = (template, ...subs) => {
+  let str = String.raw(template, ...subs);
+  for (const pattern of stripPatterns) {
+    str = str.replace(pattern, "");
+  }
+  return str;
+};
+
+export default new Proxy(code as typeof code & Record<string, typeof code>, {
+    get(target, p, receiver) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        if (Reflect.has(target, p)) { return Reflect.get(target, p, receiver); }
+        return code;
+    },
+})