Merge pull request #149 from codeitcodes/dev

Dev

Author: benhatsor

filebrowser.js

@@ -1399,8 +1399,7 @@ async function renderBranchMenuHTML(renderAll) {
 
   // if clicked on show more button,
   // render all branches
-  if (renderAll
-      || (branchResp.length === 2)) {
+  if (renderAll) {
 
     // run on all branches
     branchResp.forEach(branch => {
@@ -1418,7 +1417,7 @@ async function renderBranchMenuHTML(renderAll) {
 
 
   // render show more button
-  if (!renderAll && branchResp.length > 2) {
+  if (!renderAll && branchResp.length > 1) {
 
     out += '<div class="icon see-more">' + moreIcon + '<a>see more</a></div>';
 

live-view/live-view.js

@@ -742,7 +742,7 @@ let liveFile;
 async function handleLiveViewRequest(requestPath) {
 
   // if requesting base path
-  if (requestPath === livePath) {
+  if (requestPath.split('?')[0] === livePath) {
 
     // return live file
     return {
@@ -1001,19 +1001,25 @@ async function renderLiveViewHTML(file) {
   }
 
 
-  liveView.innerHTML = '<iframe src="'+ livePath +'" name="Live view" title="Live view" class="live-frame" allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write" allowfullscreen="true" allowpaymentrequest="true" loading="lazy" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation" scrolling="yes" frameborder="0"></iframe>';
+  liveView.innerHTML = '<iframe src="'+ livePath +'?'+ workerClientId +'/" name="Live view" title="Live view" class="live-frame" allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write" allowfullscreen="true" allowpaymentrequest="true" loading="lazy" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation" scrolling="yes" frameborder="0"></iframe>';
 
 
-  const liveFrame = liveView.querySelector('.live-frame');
+  liveFile = file;
+  
 
-  liveFrame.contentWindow.addEventListener('load', () => {
+  const liveFrame = liveView.querySelector('.live-frame');
 
-    liveView.classList.add('loaded');
+  liveFrame.contentWindow.addEventListener('DOMContentLoaded', () => {
 
+    liveFrame.contentWindow.history.replaceState({}, 'Live view', livePath);
+    
   });
 
-
-  liveFile = file;
+  liveFrame.contentWindow.addEventListener('load', () => {
+    
+    liveView.classList.add('loaded');
+    
+  });
 
 }
 

worker/client-channel.js

@@ -4,7 +4,7 @@
 
 
 // update worker name when updating worker
-const WORKER_NAME = 'codeit-worker-v501';
+const WORKER_NAME = 'codeit-worker-v503';
 
 
 // internal paths
@@ -16,12 +16,19 @@ const INTERNAL_PATHS = {
   run: 'https://codeit.codes/run',
   run_: 'https://dev.codeit.codes/run',
 
+  relLivePath: ('/run/' + '_/'.repeat(15)),
+  
   clientId: 'https://codeit.codes/worker/getClientId',
   clientId_: 'https://dev.codeit.codes/worker/getClientId',
 
 }
 
 
+// key                : value
+// live view client ID: codeit client ID
+let liveViewClients = {};
+
+
 // get path type
 function getPathType(path) {
 
@@ -72,51 +79,56 @@ function createResponse(data, type, status) {
 
 
 // send fetch request to client
-function sendRequestToClient(request) {
+function sendRequestToClient(request, clientId) {
 
   return new Promise((resolve, reject) => {
 
+    // get client ID
+    clientId = liveViewClients[clientId] ?? clientId;
+    
+    let url = request.url;
+
+    // append .html to url if navigating
+    if (request.mode === 'navigate'
+        && !url.endsWith('.html')
+        && !url.endsWith('/')) url += '.html';
+          
+    // send request to client
+    workerChannel.postMessage({
+      url: url,
+      toClient: clientId,
+      type: 'request'
+    });
+    
+
     // set MIME type depending on request mode
     let mimeType = 'application/octet-stream';
 
     if (request.mode === 'navigate'
-        || request.url.endsWith('.html')) mimeType = 'text/html';
+        || url.endsWith('.html')) mimeType = 'text/html';
 
     if (request.mode === 'script'
-        || request.url.endsWith('.js')) mimeType = 'text/javascript';
+        || url.endsWith('.js')) mimeType = 'text/javascript';
 
     if (request.mode === 'style'
-        || request.url.endsWith('.css')) mimeType = 'text/css';
+        || url.endsWith('.css')) mimeType = 'text/css';
+
+    if (url.endsWith('.wasm')) mimeType = 'application/wasm';
 
-    if (request.url.endsWith('.wasm')) mimeType = 'application/wasm';
 
     if (enableDevLogs) {
       console.warn(mimeType, request.mode, request.url);
     }
 
 
-    let url = request.url;
-
-    // append .html to url if navigating
-    if (request.mode === 'navigate'
-        && !url.endsWith('.html')
-        && !url.endsWith('/')) url += '.html';
-
-
-    // send request to client
-    workerChannel.postMessage({
-      url: url,
-      type: 'request'
-    });
-
-
     // add worker/client channel listener
 
     function workerListener(event) {
 
       // if response url matches
       if (event.data.type === 'response' &&
-          event.data.url === url) {
+          event.data.url === url &&
+          event.data.fromClient === clientId) {
 
         if (enableDevLogs) {
           console.debug('[ServiceWorker] Recived response data from client', event.data);
@@ -186,9 +198,34 @@ function handleFetchRequest(request, event) {
       if (enableDevLogs) {
         console.debug('[ServiceWorker] Intercepted live fetch', request.url, request);
       }
+      
+      
+      let clientId = event.clientId;
+      
+      let [url, parentClientId] = request.url.split('?');
+            
+      const liveFramePath = INTERNAL_PATHS.relLivePath;
+      
+      // if codeit client is creating a new live view
+      if (url.endsWith(liveFramePath)
+          && event.resultingClientId) {
+        
+        // add live view to client array
+                
+        const liveViewClientId = event.resultingClientId;
+        
+        parentClientId = parentClientId.slice(0, -1);
+        clientId = parentClientId;
+
+        // pair live view client ID
+        // with codeit client ID
+        // in client array
+        liveViewClients[liveViewClientId] = parentClientId;
+        
+      }
 
       // return response from client
-      resolve(sendRequestToClient(request));
+      resolve(sendRequestToClient(request, clientId));
 
     } else if (pathType === 'clientId') { // if fetching client ID
 

worker/worker-channel.js

@@ -59,32 +59,38 @@ async function setupWorkerChannel() {
   // add worker channel listener
   workerChannel.addEventListener('message', async (event) => {
 
-    // if recived request
-    if (event.data.type === 'request') {
-
-      // send request to /live-view/live-view.js
-      // for handling
-      const {fileContent, respStatus} =
-            await handleLiveViewRequest(event.data.url);
-
-      // send response back to worker
-      workerChannel.postMessage({
-        url: event.data.url,
-        resp: fileContent,
-        respStatus: (respStatus ?? 200),
-        type: 'response'
-      });
-
-    } else if (event.data.type === 'reload') { // if recived reload request
-
-      // reload page
-      window.location.reload();
-
-    } else if (event.data.type === 'message') { // if recived message
-
-      // log message
-      console.debug(event.data.message);
+    // if message is for current client
+    if (event.data.toClient === workerClientId) {
 
+      // if recived request
+      if (event.data.type === 'request') {
+  
+        // send request to /live-view/live-view.js
+        // for handling
+        const {fileContent, respStatus} =
+              await handleLiveViewRequest(event.data.url);
+  
+        // send response back to worker
+        workerChannel.postMessage({
+          url: event.data.url,
+          resp: fileContent,
+          respStatus: (respStatus ?? 200),
+          fromClient: workerClientId,
+          type: 'response'
+        });
+  
+      } else if (event.data.type === 'reload') { // if recived reload request
+  
+        // reload page
+        window.location.reload();
+  
+      } else if (event.data.type === 'message') { // if recived message
+  
+        // log message
+        console.debug(event.data.message);
+  
+      }
+      
     }
 
   });