feat: private dep v2 (#746)

Co-authored-by: Filipe Lima <filipe@codesandbox.io>

sandpack-client/src/clients/runtime/index.ts

@@ -58,6 +58,12 @@ export class SandpackRuntime extends SandpackClient {
 
     this.bundlerURL = options.bundlerURL || BUNDLER_URL;
 
+    if (options.teamId) {
+      this.bundlerURL =
+        this.bundlerURL.replace("https://", "https://" + options.teamId + "-") +
+        `?cache=${Date.now()}`;
+    }
+
     this.bundlerState = undefined;
     this.errors = [];
     this.status = "initializing";
@@ -241,6 +247,7 @@ export class SandpackRuntime extends SandpackClient {
       clearConsoleDisabled: !this.options.clearConsoleOnFirstCompile,
       logLevel: this.options.logLevel ?? SandpackLogLevel.Info,
       customNpmRegistries: this.options.customNpmRegistries,
+      teamId: this.options.teamId,
     });
   }
 

sandpack-client/src/clients/runtime/types.ts

@@ -78,6 +78,7 @@ export type SandpackRuntimeMessage = BaseSandpackMessage &
         reactDevTools?: ReactDevToolsMode;
         logLevel?: SandpackLogLevel;
         customNpmRegistries?: NpmRegistry[];
+        teamId?: string;
       }
     | {
         type: "refresh";
@@ -103,4 +104,6 @@ export type SandpackRuntimeMessage = BaseSandpackMessage &
         }>;
       }
     | SandboxTestMessage
+    | { type: "sign-in"; teamId: string }
+    | { type: "sign-out" }
   );

sandpack-client/src/types.ts

@@ -59,6 +59,12 @@ export interface ClientOptions {
    * to retrieve npm packages from your own npm registry.
    */
   customNpmRegistries?: NpmRegistry[];
+
+  /**
+   * CodeSandbox team id: with this information, bundler can connect to CodeSandbox
+   * and unlock a few capabilities
+   */
+  teamId?: string;
 }
 
 export interface SandboxSetup {

sandpack-client/src/utils.ts

@@ -104,7 +104,7 @@ export function extractErrorDetails(msg: SandpackErrorMessage): SandpackError {
     return { title, path, message, line, column };
   }
 
-  const relevantStackFrame = getRelevantStackFrame(msg.payload.frames);
+  const relevantStackFrame = getRelevantStackFrame(msg.payload?.frames);
   if (!relevantStackFrame) {
     return { message: msg.message };
   }

sandpack-react/src/PrivatePackage.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { Sandpack } from "./presets";
+
+export default {
+  title: "Intro/PrivatePackage",
+};
+
+export const Basic: React.FC = () => {
+  return (
+    <div style={{ width: 800, margin: "auto" }}>
+      <Sandpack
+        //         customSetup={{
+        //           dependencies: { "@codesandbox/test-package": "latest" },
+        //         }}
+        //         files={{
+        //           "App.js": `import { Button } from "@codesandbox/test-package";
+
+        // export default function App() {
+        //   return <Button>Hello World</Button>
+        // }`,
+        //         }}
+        // options={{ bundlerURL: `http://localhost:3000` }}
+        options={{ bundlerURL: `https://2-1-0-sandpack.codesandbox.stream/` }}
+        teamId="6756547b-12fb-465e-82c8-b38a981f1f67"
+        template="react"
+      />
+    </div>
+  );
+};

sandpack-react/src/components/Preview/index.tsx

@@ -10,6 +10,11 @@ import {
   useSandpackShell,
 } from "../../hooks";
 import { css, THEME_PREFIX } from "../../styles";
+import {
+  buttonClassName,
+  iconStandaloneClassName,
+  roundedButtonClassName,
+} from "../../styles/shared";
 import { useClassNames } from "../../utils/classNames";
 import { Navigator } from "../Navigator";
 import { ErrorOverlay } from "../common/ErrorOverlay";
@@ -18,6 +23,7 @@ import { OpenInCodeSandboxButton } from "../common/OpenInCodeSandboxButton";
 import { RoundedButton } from "../common/RoundedButton";
 import { SandpackStack } from "../common/Stack";
 import { RefreshIcon, RestartIcon } from "../icons";
+import { SignOutIcon } from "../icons";
 
 export interface PreviewProps {
   style?: React.CSSProperties;
@@ -109,9 +115,8 @@ export const SandpackPreview = React.forwardRef<
     },
     ref
   ) => {
-    const { sandpack, listen, iframe, getClient, clientId } = useSandpackClient(
-      { startRoute }
-    );
+    const { sandpack, listen, iframe, getClient, clientId, dispatch } =
+      useSandpackClient({ startRoute });
     const [iframeComputedHeight, setComputedAutoHeight] = React.useState<
       number | null
     >(null);
@@ -193,6 +198,22 @@ export const SandpackPreview = React.forwardRef<
               </RoundedButton>
             )}
 
+            {sandpack.teamId && (
+              <button
+                className={classNames("button", [
+                  classNames("icon-standalone"),
+                  buttonClassName,
+                  iconStandaloneClassName,
+                  roundedButtonClassName,
+                ])}
+                onClick={() => dispatch({ type: "sign-out" })}
+                title="Sign out"
+                type="button"
+              >
+                <SignOutIcon />
+              </button>
+            )}
+
             {showOpenInCodeSandbox && <OpenInCodeSandboxButton />}
           </div>
 

sandpack-react/src/components/common/ErrorOverlay.tsx

@@ -12,6 +12,7 @@ import {
   roundedButtonClassName,
 } from "../../styles/shared";
 import { useClassNames } from "../../utils/classNames";
+import { SignInIcon } from "../icons";
 import { RestartIcon } from "../icons";
 
 const mapBundlerErrors = (originalMessage: string): string => {
@@ -42,14 +43,68 @@ export const ErrorOverlay: React.FC<ErrorOverlayProps> = (props) => {
   const { restart } = useSandpackShell();
   const classNames = useClassNames();
   const {
-    sandpack: { runSandpack },
+    sandpack: { runSandpack, teamId },
   } = useSandpack();
+  const { dispatch } = useSandpack();
 
   if (!errorMessage && !children) {
     return null;
   }
 
   const isSandpackBundlerError = errorMessage?.startsWith("[sandpack-client]");
+  const privateDependencyError = errorMessage?.includes(
+    "NPM_REGISTRY_UNAUTHENTICATED_REQUEST"
+  );
+
+  const onSignIn = () => {
+    if (teamId) {
+      dispatch({ type: "sign-in", teamId });
+    }
+  };
+
+  if (privateDependencyError) {
+    return (
+      <div
+        className={classNames("overlay", [
+          classNames("error"),
+          absoluteClassName,
+          errorBundlerClassName,
+          className,
+        ])}
+        {...props}
+      >
+        <p className={classNames("error-message", [errorMessageClassName])}>
+          <strong>Unable to fetch required dependency.</strong>
+        </p>
+
+        <div className={classNames("error-message", [errorMessageClassName])}>
+          <p>
+            Authentication required. Please sign in to your account (make sure
+            to allow pop-ups to this page) and try again. If the issue persists,
+            contact{" "}
+            <a href="mailto:hello@codesandbox.io?subject=Sandpack Timeout Error">
+              support
+            </a>{" "}
+            for further assistance.
+          </p>
+        </div>
+
+        <div>
+          <button
+            className={classNames("button", [
+              buttonClassName,
+              iconStandaloneClassName,
+              roundedButtonClassName,
+            ])}
+            onClick={onSignIn}
+          >
+            <SignInIcon />
+            <span>Sign in</span>
+          </button>
+        </div>
+      </div>
+    );
+  }
 
   if (isSandpackBundlerError && errorMessage) {
     return (
@@ -98,15 +153,23 @@ export const ErrorOverlay: React.FC<ErrorOverlayProps> = (props) => {
       className={classNames("overlay", [
         classNames("error"),
         absoluteClassName,
-        errorClassName,
+        errorClassName({ solidBg: true }),
         className,
       ])}
       translate="no"
       {...otherProps}
     >
-      <div className={classNames("error-message", [errorMessageClassName])}>
+      <p className={classNames("error-message", [errorMessageClassName])}>
+        <strong>Something went wrong</strong>
+      </p>
+
+      <p
+        className={classNames("error-message", [
+          errorMessageClassName({ errorCode: true }),
+        ])}
+      >
         {errorMessage || children}
-      </div>
+      </p>
     </div>
   );
 };

sandpack-react/src/components/common/LoadingOverlay.tsx

@@ -12,6 +12,7 @@ import {
   absoluteClassName,
   buttonClassName,
   errorBundlerClassName,
+  errorClassName,
   errorMessageClassName,
   fadeIn,
   iconStandaloneClassName,
@@ -39,15 +40,16 @@ const loadingClassName = css({
   backgroundColor: "$colors$surface1",
 });
 
-export const LoadingOverlay = ({
+export const LoadingOverlay: React.FC<
+  LoadingOverlayProps & React.HTMLAttributes<HTMLDivElement>
+> = ({
   clientId,
   loading,
   className,
   style,
   showOpenInCodeSandbox,
   ...props
-}: LoadingOverlayProps &
-  React.HTMLAttributes<HTMLDivElement>): JSX.Element | null => {
+}): JSX.Element | null => {
   const classNames = useClassNames();
   const {
     sandpack: { runSandpack, environment },
@@ -83,6 +85,7 @@ export const LoadingOverlay = ({
         className={classNames("overlay", [
           classNames("error"),
           absoluteClassName,
+          errorClassName,
           errorBundlerClassName,
           className,
         ])}
@@ -95,28 +98,34 @@ export const LoadingOverlay = ({
             Couldn't connect to server
           </p>
 
-          <p>
-            This means sandpack cannot connect to the runtime or your network is
-            having some issues. Please check the network tab in your browser and
-            try again. If the problem persists, report it via{" "}
-            <a href="mailto:hello@codesandbox.io?subject=Sandpack Timeout Error">
-              email
-            </a>{" "}
-            or submit an issue on{" "}
-            <a
-              href="https://github.com/codesandbox/sandpack/issues"
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              GitHub.
-            </a>
-          </p>
+          <div className={classNames("error-message", [errorMessageClassName])}>
+            <p>
+              This means sandpack cannot connect to the runtime or your network
+              is having some issues. Please check the network tab in your
+              browser and try again. If the problem persists, report it via{" "}
+              <a href="mailto:hello@codesandbox.io?subject=Sandpack Timeout Error">
+                email
+              </a>{" "}
+              or submit an issue on{" "}
+              <a
+                href="https://github.com/codesandbox/sandpack/issues"
+                rel="noreferrer noopener"
+                target="_blank"
+              >
+                GitHub.
+              </a>
+            </p>
+          </div>
 
-          <pre>
+          <p
+            className={classNames("error-message", [
+              errorMessageClassName({ errorCode: true }),
+            ])}
+          >
             ENV: {environment}
             <br />
             ERROR: TIME_OUT
-          </pre>
+          </p>
 
           <div>
             <button

sandpack-react/src/components/icons/index.tsx

@@ -11,6 +11,20 @@ const SVG: React.FC<React.SVGAttributes<unknown>> = (props) => (
   />
 );
 
+export const SignInIcon = (): React.ReactElement => (
+  <SVG viewBox="0 0 48 48">
+    <title>Sign in</title>
+    <path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h14.55v3H9v30h14.55v3Zm24.3-9.25-2.15-2.15 5.1-5.1h-17.5v-3h17.4l-5.1-5.1 2.15-2.15 8.8 8.8Z" />
+  </SVG>
+);
+
+export const SignOutIcon = (): React.ReactElement => (
+  <SVG viewBox="0 0 48 48">
+    <title>Sign out</title>
+    <path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h14.55v3H9v30h14.55v3Zm24.3-9.25-2.15-2.15 5.1-5.1h-17.5v-3h17.4l-5.1-5.1 2.15-2.15 8.8 8.8Z" />
+  </SVG>
+);
+
 export const RestartIcon = (): React.ReactElement => (
   <SVG fill="none" stroke="currentColor">
     <title>Restart script</title>

sandpack-react/src/contexts/utils/useAppState.ts

@@ -7,6 +7,7 @@ import { getSandpackStateFromProps } from "../../utils/sandpackUtils";
 
 interface SandpackAppState {
   editorState: "pristine" | "dirty";
+  teamId?: string;
 }
 
 type UseAppState = (
@@ -17,6 +18,7 @@ type UseAppState = (
 export const useAppState: UseAppState = (props, files) => {
   const [state, setState] = useState<SandpackAppState>({
     editorState: "pristine",
+    teamId: props.teamId,
   });
 
   const originalStateFromProps = getSandpackStateFromProps(props);