fix(sandpack client): introduce auto reload

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

@@ -117,7 +117,9 @@ export const SandpackCodeEditor = React.forwardRef<
             wrapContent={wrapContent}
           />
 
-          {showRunButton && status === "idle" ? <RunButton /> : null}
+          {!sandpack.autoReload || (showRunButton && status === "idle") ? (
+            <RunButton />
+          ) : null}
         </div>
       </SandpackStack>
     );

sandpack-react/src/components/Console/Console.stories.tsx

@@ -203,8 +203,8 @@ export const MaxMessageCount = () => {
         <SandpackLayout>
           <SandpackCodeEditor />
           <SandpackConsole
-            standalone
             maxMessageCount={Number(maxMessageCount)}
+            standalone
           />
         </SandpackLayout>
         <div
@@ -225,9 +225,9 @@ export const MaxMessageCount = () => {
           <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
             <span>Max Message Count</span>
             <input
+              onChange={(e) => setMaxMessageCount(+e.target.value)}
               type="number"
               value={maxMessageCount}
-              onChange={(e) => setMaxMessageCount(+e.target.value)}
             />
           </label>
         </div>

sandpack-react/src/contexts/sandpackContext.tsx

@@ -31,6 +31,8 @@ export const SandpackProvider: React.FC<SandpackProviderProps> = (props) => {
         ...fileOperations,
         ...clientOperations,
 
+        autoReload: props.options?.autoReload ?? true,
+
         listen: addListener,
         dispatch: dispatchMessage,
       }}

sandpack-react/src/presets/Sandpack.stories.tsx

@@ -145,7 +145,7 @@ export const ExternalResources: React.FC = () => (
   />
 );
 
-export const RunnableComponent = (): React.ReactElement => (
+export const AutoRun = (): React.ReactElement => (
   <Sandpack
     files={{
       "/App.js": `export default function Kitten() {
@@ -164,6 +164,23 @@ export const RunnableComponent = (): React.ReactElement => (
   />
 );
 
+export const AutoReload = (): React.ReactElement => (
+  <Sandpack
+    files={{
+      "/App.js": `export default function Kitten() {
+  return (
+    <img src="https://placekitten.com/200/250" alt="Kitten" />
+  );
+}`,
+    }}
+    options={{
+      autorun: true,
+      autoReload: false,
+    }}
+    template="react"
+  />
+);
+
 export const InitModeUserVisible: React.FC = () => {
   return (
     <>

sandpack-react/src/presets/Sandpack.tsx

@@ -62,6 +62,7 @@ export const Sandpack: SandpackInternal = ({
     recompileMode: options.recompileMode,
     recompileDelay: options.recompileDelay,
     autorun: options.autorun,
+    autoReload: options.autoReload,
     bundlerURL: options.bundlerURL,
     startRoute: options.startRoute,
     skipEval: options.skipEval,
@@ -245,7 +246,7 @@ export const Sandpack: SandpackInternal = ({
               style={topRowStyle}
             />
           )}
-          
+
           {mode === "tests" && (
             <SandpackTests
               actionsChildren={actionsChildren}

sandpack-react/src/types.ts

@@ -133,7 +133,24 @@ export interface SandpackOptions {
    */
   initMode?: SandpackInitMode;
   initModeObserverOptions?: IntersectionObserverInit;
+  /**
+   * Determines whether or not the bundling process should start automatically
+   *  for a component in Sandpack. By default, when the component gets closer
+   *  to the viewport or when the page loads and the component is already in
+   *  the viewport, the bundling process will start automatically. However,
+   *  if this prop is set to false, the bundling process will only start when
+   *  triggered manually by the user.
+   */
   autorun?: boolean;
+  /**
+   * Determines whether or not the component should automatically reload when
+   *  changes are made to the code. When this prop is set to true, any changes
+   *  made to the code will trigger an automatic reload of the component,
+   * allowing the user to see the changes immediately. However, if this prop
+   *  is set to false, the component will need to be manually reloaded by the
+   *  user to see the changes.
+   */
+  autoReload?: boolean;
   recompileMode?: "immediate" | "delayed";
   recompileDelay?: number;
 
@@ -424,6 +441,7 @@ export interface SandpackInternalOptions<
   initMode?: SandpackInitMode;
   initModeObserverOptions?: IntersectionObserverInit;
   autorun?: boolean;
+  autoReload?: boolean;
   recompileMode?: "immediate" | "delayed";
   recompileDelay?: number;
   id?: string;
@@ -525,6 +543,8 @@ export interface SandpackState {
   activeFile: string;
   startRoute?: string;
 
+  autoReload: boolean;
+
   /**
    * Returns the current state of the editor, meaning that any
    * changes from the original `files` must return a `dirty` value;

website/docs/src/pages/getting-started/layout.mdx

@@ -164,11 +164,15 @@ export default function App() {
 `}
 </CodeBlock>
 
-### Autorun
+### Autorun & auto reload
 
-By default, the bundling process will start as soon as the component is getting closer to the viewport, or when the page loads, if the component is already in the viewport. But you can allow users to trigger the process manually.
+**`autorun`**
 
-When a Sandpack instance is not set on `autorun`, which is the default setting, it will show a `Run` button that initializes the bundling process. This can be handy in situations in which you don't want multiple sandpack instances to run everytime the user loads the page.
+Determines whether or not the bundling process should start automatically for a component in Sandpack. By default, when the component gets closer to the viewport or when the page loads and the component is already in the viewport, the bundling process will start automatically. However, if this prop is set to false, the bundling process will only start when triggered manually by the user.
+
+**`autoReload`**
+
+Determines whether or not the component should automatically reload when changes are made to the code. When this prop is set to true, any changes made to the code will trigger an automatic reload of the component, allowing the user to see the changes immediately. However, if this prop is set to false, the component will need to be manually reloaded by the user to see the changes.
 
 <CodeBlock stack>
 {`import { Sandpack } from "@codesandbox/sandpack-react";
@@ -178,7 +182,8 @@ export default function App() {
     <Sandpack 
       template="react"
       options={{
-        autorun: false
+        autorun: false,
+        autoReload: false
       }}
     />
   );