fix: open preview url with params (#93)

decentraland · Sep 12, 2024 · f728ac7 · f728ac7
1 parent 5312ba3
commit f728ac7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 22 deletions.
diff --git a/packages/main/src/modules/cli.ts b/packages/main/src/modules/cli.ts
@@ -22,8 +22,13 @@ export async function start(path: string) {
     args: ['start', '--port', port.toString(), '--no-browser'],
     cwd: path,
   });
-  await previewServer.waitFor(/available/i);
-  return port;
+  const message = await previewServer.waitFor(/available/i);
+  const match = message.match(/http:\/\/(\d|\.)+:\d+\?(.*)\n/); // match url printed by success message
+  if (match) {
+    return match[0].slice(0, -1); // remove last char because it's a new line '\n'
+  } else {
+    return `http://localhost:${port}`; // if match fails fallback to localhost and port, it should never happen unless the message from the CLI is changed, and the regex is not updated
+  }
 }
 
 export let deployServer: Child | null = null;

diff --git a/packages/renderer/src/hooks/useEditor.ts b/packages/renderer/src/hooks/useEditor.ts
@@ -41,18 +41,13 @@ export const useEditor = () => {
 
   const openPreview = useCallback(() => {
     if (project) {
-      if (editor.previewPort > 0) {
-        dispatch(editorActions.openPreview(editor.previewPort));
+      if (editor.previewUrl) {
+        dispatch(editorActions.openPreview(editor.previewUrl));
       } else {
         dispatch(editorActions.runSceneAndOpenPreview(project));
       }
     }
-  }, [
-    editorActions.openPreview,
-    editorActions.runSceneAndOpenPreview,
-    project,
-    editor.previewPort,
-  ]);
+  }, [editorActions.openPreview, editorActions.runSceneAndOpenPreview, project, editor.previewUrl]);
 
   const openCode = useCallback(() => {
     if (project) {

diff --git a/packages/renderer/src/modules/store/editor/slice.ts b/packages/renderer/src/modules/store/editor/slice.ts
@@ -1,4 +1,4 @@
-import { editor } from '#preload';
+import { editor, misc } from '#preload';
 import { createAsyncThunk, createSlice, type PayloadAction } from '@reduxjs/toolkit';
 
 import { type ThunkAction } from '#store';
@@ -12,12 +12,12 @@ export const install = createAsyncThunk('editor/install', editor.install);
 export const startInspector = createAsyncThunk('editor/startInspector', editor.startInspector);
 export const runScene = createAsyncThunk('editor/runScene', editor.runScene);
 export const publishScene = createAsyncThunk('editor/publishScene', editor.publishScene);
-export const openPreview = createAsyncThunk('editor/openPreview', editor.openPreview);
+export const openPreview = createAsyncThunk('editor/openPreview', misc.openExternal);
 export const runSceneAndOpenPreview: (project: Project) => ThunkAction =
   project => async dispatch => {
     const action = dispatch(runScene(project.path));
-    const port = await action.unwrap();
-    await dispatch(openPreview(port));
+    const url = await action.unwrap();
+    await dispatch(openPreview(url));
   };
 export const openTutorial = createAsyncThunk('editor/openTutorial', editor.openTutorial);
 
@@ -27,7 +27,7 @@ export type EditorState = {
   project?: Project;
   inspectorPort: number;
   publishPort: number;
-  previewPort: number;
+  previewUrl: string;
   loadingInspector: boolean;
   loadingPublish: boolean;
   loadingPreview: boolean;
@@ -41,7 +41,7 @@ const initialState: EditorState = {
   version: null,
   inspectorPort: 0,
   publishPort: 0,
-  previewPort: 0,
+  previewUrl: '',
   loadingInspector: false,
   loadingPublish: false,
   loadingPreview: false,
@@ -60,7 +60,7 @@ export const slice = createSlice({
   reducers: {
     setProject: (state, { payload: project }: PayloadAction<Project>) => {
       state.project = project;
-      state.previewPort = 0;
+      state.previewUrl = '';
     },
   },
   extraReducers: builder => {
@@ -93,7 +93,7 @@ export const slice = createSlice({
     });
     builder.addCase(workspaceActions.createProject.fulfilled, (state, action) => {
       state.project = action.payload;
-      state.previewPort = 0;
+      state.previewUrl = '';
     });
     builder.addCase(install.pending, state => {
       state.isInstalling = true;
@@ -123,15 +123,15 @@ export const slice = createSlice({
       }
     });
     builder.addCase(runScene.pending, state => {
-      state.previewPort = 0;
+      state.previewUrl = '';
       state.loadingPreview = true;
     });
     builder.addCase(runScene.fulfilled, (state, { payload: port }) => {
-      state.previewPort = port;
+      state.previewUrl = port;
       state.loadingPreview = false;
     });
     builder.addCase(runScene.rejected, state => {
-      state.previewPort = 0;
+      state.previewUrl = '';
       state.loadingPreview = false;
     });
   },

diff --git a/packages/shared/types/ipc.ts b/packages/shared/types/ipc.ts
@@ -11,7 +11,7 @@ export interface Ipc {
   'bin.install': () => Promise<void>;
   'bin.code': (path: string) => Promise<void>;
   'cli.init': (path: string, repo?: string) => Promise<void>;
-  'cli.start': (path: string) => Promise<number>;
+  'cli.start': (path: string) => Promise<string>;
   'cli.deploy': (opts: DeployOptions) => Promise<number>;
   'analytics.track': (event: string, data?: Record<string, any>) => void;
   'analytics.getUserId': () => Promise<string>;