docs - add share option

Author: elisherer

docs/src/components/TransformerTester.tsx

@@ -5,6 +5,8 @@ import useJSONString from "../components/hooks/useJSONString";
 import {setSuggestions} from "@site/src/components/monaco/suggestionsProvider";
 import {jsonpathJoin} from "@nlighten/json-transform-core";
 import {JsonTransformer} from "@nlighten/json-transform";
+import JSONGzip from "@site/src/utils/JSONGzip";
+import {useLocation, useHistory} from "@docusaurus/router";
 
 const DEFAULT_INPUT_VALUE = `{
   "first_name": "John",
@@ -44,6 +46,9 @@ const transformAsync = async (input: any, definition: any) => {
 const narrowScreen = window.innerWidth < 996;
 const initialHeight = narrowScreen ? 280 : 450;
 
+export const SHARE_QS = "shared";
+export const GZIP_MARKER = "gzip,";
+
 const TransformerTester = () => {
   const [inputString, setInputString, parsedInput, inputError] = useJSONString(DEFAULT_INPUT_VALUE);
   const [transformerString, setTransformerString, parsedTransformer, transformerError] =
@@ -52,6 +57,9 @@ const TransformerTester = () => {
   const [outputError, setOutputError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
+  const location = useLocation()
+  const history = useHistory()
+
   useEffect(() => {
     if (parsedInput) {
       const generatedSchema = JSONSchemaUtils.generate(parsedInput);
@@ -81,28 +89,95 @@ const TransformerTester = () => {
       .finally(() => setLoading(false));
   }
 
-  return <div className="tester_grid">
-    <h3 className="desktop-title">Input</h3>
-    <h3 className="desktop-title">Transformer</h3>
-    <h3 className="desktop-title">Output</h3>
-    <MonacoEditor language="json" value={inputString} onChange={(value) => setInputString(value)} height={initialHeight}/>
-    <MonacoEditor language="json" model="transformer.json"
-                  value={transformerString}
-                  validateVariables
-                  onChange={(value) => setTransformerString(value)}
-                  height={initialHeight}/>
-    <MonacoEditor language="json" readOnly value={outputJSONString} height={initialHeight}/>
-    <div style={{color: 'red'}}>{inputError?.message}</div>
-    <div className="button-container">
-      <div style={{color: 'red'}}>{transformerError?.message}</div>
-      <button type="button" className="button button--primary transform-button shadow--lw"
-              disabled={loading || !!(inputError || transformerError)}
-              onClick={handleTransform}>Transform
-      </button>
-      <div data-loader className={loading ? undefined:"hide" }></div>
+  useEffect(() => {
+    const searchIndex = location.hash?.indexOf("?");
+    if (searchIndex === -1 || !location.hash.includes(SHARE_QS + "=", searchIndex)) return;
+    const sp = new URLSearchParams(location.hash.substring(searchIndex + 1));
+    if (!sp.has(SHARE_QS)) return;
+    const sharedValue = sp.get(SHARE_QS);
+    if (!sharedValue) return;
+    try {
+      (sharedValue.startsWith(GZIP_MARKER)
+          ? JSONGzip.decompress(sharedValue.substring(GZIP_MARKER.length), "base64url")
+          : Promise.resolve(JSON.parse(sharedValue))
+      )
+        .then(defaults => {
+          setInputString(JSON.stringify(defaults.i, null, 2));
+          setTransformerString(JSON.stringify(defaults.d, null, 2));
+          history.replace("#");
+        })
+        .catch(e => {
+          console.error(e);
+          history.replace("#");
+        });
+    } catch (e: any) {
+      console.error(e);
+      history.replace("#");
+    }
+  }, [location.hash, history.replace]);
+
+  const handleShare = async () => {
+    const input = JSON.stringify({i: parsedInput, d: parsedTransformer});
+    const compressed = await JSONGzip.compress(input, "base64url", "string");
+    const encodedInput = encodeURIComponent(input);
+    const sharedValue = encodedInput.length > compressed.length + GZIP_MARKER.length
+      ? GZIP_MARKER + compressed // compressed is better
+      : encodedInput;
+
+    prompt("Copy this value and share it", window.location.origin + window.location.pathname + `#?${SHARE_QS}=` + sharedValue);
+  };
+
+  return (
+    <div className="tester_grid">
+      <h3 className="hide-on-mobile">Input</h3>
+      <h3 className="hide-on-mobile">Transformer</h3>
+      <h3 style={{display: "flex", flexDirection: "row-reverse", justifyContent: "space-between"}}>
+        <button type="button" className="button button--primary button--sm share-button shadow--lw"
+                disabled={!parsedTransformer}
+                onClick={handleShare}>
+          <span style={{display: 'flex', alignItems: "center", gap: "4px"}}>
+            <svg className="MuiSvgIcon-root" focusable="false" aria-hidden="true"
+                 viewBox="0 0 24 24" width={16} height={16} fill="currentcolor">
+              <path
+                d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92"></path>
+            </svg>
+            Share Input and Transformer
+          </span>
+        </button>
+        <span className="hide-on-mobile">Output</span>
+      </h3>
+      <MonacoEditor language="json" value={inputString} onChange={(value) => setInputString(value)}
+                    height={initialHeight}/>
+      <MonacoEditor language="json" model="transformer.json"
+                    value={transformerString}
+                    validateVariables
+                    onChange={(value) => setTransformerString(value)}
+                    height={initialHeight}/>
+      <MonacoEditor language="json" readOnly value={outputJSONString} height={initialHeight}/>
+      <div style={{color: 'red', fontSize: "0.7em"}}>{inputError?.message}</div>
+      <div className="button-container">
+        <div style={{color: 'red', fontSize: "0.7em"}}>{transformerError?.message}</div>
+        <button type="button" className="button button--primary transform-button shadow--lw"
+                disabled={loading || !!(inputError || transformerError)}
+                onClick={handleTransform}>Transform
+        </button>
+        <div data-loader className={loading ? undefined : "hide"}></div>
+      </div>
+      <div style={
+        outputError
+          ? {color: 'red', fontSize: "0.7em"}
+          : outputJSONString
+            ? {fontSize: "0.7em"}
+            : undefined
+      }>
+        {outputError ??
+          (outputJSONString
+            ? "* You can open the browser console to see debug information about the transformation"
+            : undefined)
+        }
+      </div>
     </div>
-    <div style={outputError ? {color: 'red'} : outputJSONString ? { fontSize: "0.7em"} : undefined}>{outputError ?? (outputJSONString ? "* You can open the browser console to see debug information about the transformation" : undefined)}</div>
-  </div>
+  );
 }
 
 export default TransformerTester;

docs/src/css/custom.css

@@ -54,7 +54,7 @@
   .tester_grid {
     grid-template-columns: auto;
   }
-  .desktop-title, p, h3 {
+  .hide-on-mobile {
     display: none;
   }
 }

docs/src/pages/playground.tsx

@@ -17,7 +17,8 @@ const playground = () => {
     <Layout>
       <div className="container" style={{
         // @ts-ignore
-        "--ifm-container-width-xl": "1600px"
+        "--ifm-container-width-xl": "1600px",
+        paddingBottom: "10px"
       }}>
         <br/>
         <h1>Playground</h1>

docs/src/utils/JSONGzip.ts

@@ -0,0 +1,69 @@
+const Base64Url = {
+  from(b64: string) {
+    return b64.replace(/=+/g, "").replace(/\+/g, "-").replace(/\//g, "_");
+  },
+  toBase64(b64Url: string) {
+    return b64Url.replace(/-/g, "+").replace(/_/g, "/");
+  },
+};
+
+const blobToBase64 = (blob: Blob): Promise<string> => {
+  const reader = new FileReader();
+  reader.readAsDataURL(blob);
+  return new Promise(resolve => {
+    reader.onloadend = () => {
+      const dataUrl = reader.result as string;
+      resolve(dataUrl.substring(dataUrl.indexOf(";") + 1));
+    };
+  });
+};
+
+const base64ToUint8Array = (base64: string) => {
+  base64 = base64.replace(/[\s\t\n]/g, "");
+  if (base64.length % 4 !== 0) {
+    base64 = base64 + "=".repeat(4 - (base64.length % 4));
+  }
+  const bytesString = atob(base64);
+  const length = bytesString.length;
+  const bytes = new Uint8Array(length);
+  for (let i = 0; i < length; i++) {
+    bytes[i] = bytesString.charCodeAt(i);
+  }
+  return bytes;
+};
+
+class JSONGzip {
+  public static async compress(
+    value: string,
+    format: "base64" | "base64url" = "base64",
+    valueType: "string" | "json" = "json",
+  ) {
+    const stream = new Blob([valueType === "string" ? value : JSON.stringify(value)], {
+      type: "application/json",
+    }).stream();
+    const compressedStream = stream.pipeThrough(new CompressionStream("gzip"));
+    const response = new Response(compressedStream);
+    const blob = await response.blob();
+    const base64 = await blobToBase64(blob);
+    // const buffer = await response.blob().then(blob => blob.arrayBuffer());
+    // const base64 = btoa(String.fromCharCode(...new Uint8Array(buffer)));
+    if (format === "base64url") {
+      return Base64Url.from(base64);
+    }
+    return base64;
+  }
+
+  public static async decompress(compressed: string, format: "base64" | "base64url" = "base64") {
+    const base64Input = format === "base64url" ? Base64Url.toBase64(compressed) : compressed;
+    const buffer = base64ToUint8Array(base64Input);
+    const stream = new Blob([buffer], { type: "text/plain" }).stream();
+    const decompressedStream = stream.pipeThrough(new DecompressionStream("gzip"));
+    const response = new Response(decompressedStream);
+    return response
+      .blob()
+      .then(blob => blob.text())
+      .then(text => JSON.parse(text));
+  }
+}
+
+export default JSONGzip;