feat: add createLocalStorage to enable custom storage namespace (#3022

)

Co-authored-by: Rikki Schulte <[email protected]>
Co-authored-by: Thomas Heyenbrock <[email protected]>

.changeset/lovely-glasses-cross.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/toolkit': minor
+---
+
+Add a new utility function `createLocalStorage` that creates a local storage with support for custom namespaces

examples/monaco-graphql-react-vite/vite.config.ts

@@ -3,6 +3,9 @@ import react from '@vitejs/plugin-react';
 import monacoEditorPlugin from 'vite-plugin-monaco-editor';
 
 export default defineConfig({
+  build: {
+    minify: false,
+  },
   plugins: [
     react(),
     monacoEditorPlugin({

packages/graphiql-toolkit/src/storage/custom.ts

@@ -0,0 +1,47 @@
+/**
+ * This function enables a custom namespace for localStorage
+ */
+
+import { Storage } from './base';
+
+export type CreateLocalStorageOptions = {
+  /**
+   * specify a different storage namespace prefix from the default of 'graphiql'
+   */
+  namespace?: string;
+};
+/**
+ * generate a custom local storage adapter for GraphiQL `storage` prop.
+ */
+export function createLocalStorage({
+  namespace,
+}: CreateLocalStorageOptions): Storage {
+  const storageKeyPrefix = `${namespace}:`;
+  const getStorageKey = (key: string) => `${storageKeyPrefix}${key}`;
+
+  const storage: Storage = {
+    setItem: (key, value) => localStorage.setItem(getStorageKey(key), value),
+    getItem: key => localStorage.getItem(getStorageKey(key)),
+    removeItem: key => localStorage.removeItem(getStorageKey(key)),
+    get length() {
+      let keys = 0;
+      for (const key in window.localStorage) {
+        if (key.indexOf(storageKeyPrefix) === 0) {
+          keys += 1;
+        }
+      }
+      return keys;
+    },
+
+    clear() {
+      // We only want to clear the namespaced items
+      for (const key in window.localStorage) {
+        if (key.indexOf(storageKeyPrefix) === 0) {
+          window.localStorage.removeItem(key);
+        }
+      }
+    },
+  };
+
+  return storage;
+}

packages/graphiql-toolkit/src/storage/index.ts

@@ -1,3 +1,4 @@
 export * from './base';
 export * from './history';
 export * from './query';
+export * from './custom';

packages/monaco-graphql/test/monaco-editor.test.ts

@@ -13,7 +13,7 @@ describe('monaco-editor', () => {
     expect(lines[0]).toBe('$ vite build');
     expect(lines[1]).toMatch(' building for production...');
     expect(lines[2]).toBe('transforming...');
-    expect(lines[3]).toMatch('✓ 1092 modules transformed.');
+    expect(lines[3]).toMatch('✓ 1093 modules transformed.');
     expect(lines[4]).toBe('rendering chunks...');
     expect(lines[5]).toBe('computing gzip size...');
     expect(lines[6]).toMatch('dist/index.html');