fix(sandpack): expose showOpenInCodeSandbox prop (#443)

* Update Playground.stories.tsx and Sandpack.tsx * temp * revert
codesandbox · Apr 19, 2022 · f5b9eda · f5b9eda
1 parent b2308d3
commit f5b9eda
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/sandpack-react/package.json b/sandpack-react/package.json
@@ -51,8 +51,8 @@
     "@codesandbox/sandpack-client": "^0.18.0",
     "@react-hook/intersection-observer": "^3.1.1",
     "codesandbox-import-util-types": "^2.2.3",
-    "codesandbox-import-utils": "^2.2.3",
     "lodash.isequal": "^4.5.0",
+    "lz-string": "^1.4.4",
     "react-devtools-inline": "4.4.0",
     "react-is": "^17.0.2"
   },
@@ -66,6 +66,7 @@
     "@types/fs-extra": "^5.0.4",
     "@types/glob": "^5.0.35",
     "@types/lodash.isequal": "^4.5.2",
+    "@types/lz-string": "^1.3.34",
     "@types/node": "^9.4.6",
     "@types/react": "^17.0.2",
     "autoprefixer": "^10.2.4",

diff --git a/sandpack-react/src/common/OpenInCodeSandboxButton/UnstyledOpenInCodeSandboxButton.tsx b/sandpack-react/src/common/OpenInCodeSandboxButton/UnstyledOpenInCodeSandboxButton.tsx
@@ -1,10 +1,18 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import type { SandpackBundlerFiles } from "@codesandbox/sandpack-client";
-import { getParameters } from "codesandbox-import-utils/lib/api/define";
+import LZString from "lz-string";
 import * as React from "react";
 
 import { useSandpack } from "../../hooks/useSandpack";
 import type { SandboxEnvironment } from "../../types";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getParameters = (parameters: Record<string, any>): string =>
+  LZString.compressToBase64(JSON.stringify(parameters))
+    .replace(/\+/g, "-") // Convert '+' to '-'
+    .replace(/\//g, "_") // Convert '/' to '_'
+    .replace(/=+$/, ""); /* Remove ending '='*/
+
 const CSB_URL = "https://codesandbox.io/api/v1/sandboxes/define";
 
 const getFileParameters = (
@@ -66,7 +74,9 @@ export const UnstyledOpenInCodeSandboxButton: React.FC<
     [sandpack.activePath, sandpack.environment, sandpack.files]
   );
 
-  // Register the usage of the codesandbox link
+  /**
+   * Register the usage of the codesandbox link
+   */
   React.useEffect(function registerUsage() {
     sandpack.openInCSBRegisteredRef.current = true;
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -86,8 +96,8 @@ export const UnstyledOpenInCodeSandboxButton: React.FC<
         <form ref={formRef} action={CSB_URL} method="POST" target="_blank">
           {Array.from(
             paramsValues as unknown as Array<[string, string]>,
-            ([k, v]) => (
-              <input key={k} name={k} type="hidden" value={v} />
+            ([key, value]) => (
+              <input key={key} name={key} type="hidden" value={value} />
             )
           )}
         </form>

diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx
@@ -36,6 +36,7 @@ export interface SandpackProps {
     showNavigator?: boolean;
     showLineNumbers?: boolean;
     showInlineErrors?: boolean;
+    showOpenInCodeSandbox?: boolean;
     showTabs?: boolean;
     closableTabs?: boolean;
     wrapContent?: boolean;
@@ -88,6 +89,7 @@ export const Sandpack: React.FC<SandpackProps> = (props) => {
 
   const previewOptions: PreviewProps = {
     showNavigator: props.options?.showNavigator,
+    showOpenInCodeSandbox: props?.options?.showOpenInCodeSandbox,
   };
 
   const codeEditorOptions: CodeEditorProps = {