Add syncing of external resources to CodeSandbox Live

Author: CompuIves

packages/app/src/app/overmind/effects/live/index.ts

@@ -195,6 +195,11 @@ export default {
       this.send('live:module_state', {});
     }
   },
+  sendExternalResourcesChanged(externalResources: string[]) {
+    return this.send('sandbox:external-resources', {
+      externalResources,
+    });
+  },
   sendUserCurrentModule(moduleShortid: string) {
     return this.send('user:current-module', {
       moduleShortid,

packages/app/src/app/overmind/namespaces/live/actions.ts

@@ -97,6 +97,7 @@ export const liveMessageReceived: Operator<LiveMessage> = pipe(
     [LiveMessageEvent.MODULE_STATE]: liveMessage.onModuleState,
     [LiveMessageEvent.USER_ENTERED]: liveMessage.onUserEntered,
     [LiveMessageEvent.USER_LEFT]: liveMessage.onUserLeft,
+    [LiveMessageEvent.EXTERNAL_RESOURCES]: liveMessage.onExternalResources,
     [LiveMessageEvent.MODULE_SAVED]: liveMessage.onModuleSaved,
     [LiveMessageEvent.MODULE_CREATED]: liveMessage.onModuleCreated,
     [LiveMessageEvent.MODULE_MASS_CREATED]: liveMessage.onModuleMassCreated,

packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts

@@ -36,6 +36,13 @@ export const onModuleState: Operator<LiveMessage<{
   actions.live.internal.initializeModuleState(data.module_state);
 });
 
+export const onExternalResources: Operator<LiveMessage<{
+  externalResources: string[];
+}>> = mutate(({ state, actions }, { data }) => {
+  state.editor.currentSandbox.externalResources = data.externalResources;
+  actions.editor.internal.updatePreviewCode();
+});
+
 export const onUserEntered: Operator<LiveMessage<{
   users: any[];
   editor_ids: string[];

packages/app/src/app/overmind/namespaces/workspace/actions.ts

@@ -148,6 +148,11 @@ export const externalResourceAdded: AsyncAction<string> = withOwnedSandbox(
         state.editor.currentSandbox.id,
         resource
       );
+      if (state.live.isLive) {
+        effects.live.sendExternalResourcesChanged(
+          state.editor.currentSandbox.externalResources
+        );
+      }
     } catch (error) {
       externalResources.splice(externalResources.indexOf(resource), 1);
       actions.internal.handleError({
@@ -172,6 +177,11 @@ export const externalResourceRemoved: AsyncAction<string> = withOwnedSandbox(
         state.editor.currentSandbox.id,
         resource
       );
+      if (state.live.isLive) {
+        effects.live.sendExternalResourcesChanged(
+          state.editor.currentSandbox.externalResources
+        );
+      }
     } catch (error) {
       externalResources.splice(resourceIndex, 0, resource);
 

packages/common/src/types/index.ts

@@ -682,6 +682,7 @@ export enum LiveMessageEvent {
   MODULE_MASS_CREATED = 'module:mass-created',
   MODULE_UPDATED = 'module:updated',
   MODULE_DELETED = 'module:deleted',
+  EXTERNAL_RESOURCES = 'sandbox:external-resources',
   DIRECTORY_CREATED = 'directory:created',
   DIRECTORY_UPDATED = 'directory:updated',
   DIRECTORY_DELETED = 'directory:deleted',