update README, build scripts, bump Ace, preview message channel, environment setup

Author: Bill Yosafat

.gitignore

@@ -1,5 +1,6 @@
 # node_modules cloned assets
 codetmp/assets/js/ace-builds@*
+codetmp/assets/js/ace-builds
 
 # Logs
 logs

README.md

@@ -56,55 +56,68 @@ Both classes and inline styles will be concatenated into single attribute (class
 Read more at https://github.com/tmpmachine/divless-html.
 
 ## Development
-There are two main directories : `/codetmp` for the IDE, and `/cpreview` for file preview (works like file hosting).
-
-For editor-only development (`/codetmp`), simply grab a clone of this repo and open `codetmp/index.html` without local server. 
-
-You will need local server to test file preview and accessing 3rd party APIs (Google Drive sync, deploy Firebase Hosting, Git clone). 
+This project is developed using plain JavaScript, so you might have a hard time to navigate around the codebase. I don't plan to change this into TS or anything, sorry! I want to see how far can this project go with plain JavaScript.
 
-Developing `/cpreview` requires both projects to run on the same host or domain. The communication is done through iframes by claiming service worker registration client.
+There are two main directories : `/codetmp` for the IDE, and `/cpreview` for file preview (works like file hosting).
 
-### Running and Building The Project
-1. Initial setup.
-```
-# install dependencies
-npm install
+### Building and Running The Project
+I host the project on firebase hosting, but you can run the project just fine without installing [firebase-tools](https://www.npmjs.com/package/firebase-tools). I've prepared a server setup using [express](https://www.npmjs.com/package/express).
 
-# clone ace editor build files to codetmp/assets/js/ace-builds@version
-# You may need to adjust the versioning in codetmp/index.js (see ACE_CDN_BASEPATH), also in codetmp/manifest-cache.json for offline mode caching.
-npm run setup-dev
-```
-2. Serving the projects. I use `firebase-tools`, but you can use any local web server just fine. Open `firebase.dev.json` for firebase hosting configuration.
+Run below commands for initial setup and running the servers :
 ```
+npm i
+npm run setup
 npm run dev
 ```
-3. Deploying the projects to firebase (see configuration at `firebase.prod.json`) :
+
+You should get the following:
 ```
-npm run deploy
+Servers running at:
+codetmp: http://localhost:8000/
+cpreview: http://localhost:8001/
+cpreview: http://localhost:8002/
 ```
 
-#### Minimized Build
-To build minimized files for `/codetmp` project, run :
+
+### Publishing The Project
+
+Both **codetmp** and **cpreview** utilize service worker to enable offline access. You'll need to update the cache counter on both service workers to trigger application update on end user, otherwise they'll need to manually clear the app cache.
+
+1. codetmp/sw.js : increase **unique numer** counter by +1 on each update on codetmp.
+2. cpreview/sw.js : increase `cacheVersion` by +1 on each update on cpreview.
+
+> Notes : Codetmp7 editor has an option to clear and update application cache in **Settings** menu.
+
+#### Building Minimized Project
+
+If you need a minimized version of **codetmp**, run the following :
 ```
 npm run build
 ```
 Minimized files are stored in `codetmp/deploy`.
 
-### Features Development
-
-#### Google Drive Synchronization
-See `codetmp/js/drive.js`.
+**cpreview** project doesn't have minimized build, so you can publish it as is.
 
-#### File Preview
-See `codetmp/js/preview.js`. Codetmp7 editor use communication API and workers client claiming to allow serving `codetmp` storage files requested by `cpreview` project.
-
-Due to recent policy updates on browser storage partitioning, this communication only possible if both `codetmp` and `cpreview` project hosted in the same domain.
+### Features Development
+Below is the file tree that you'll most likely be working on when developing a new feature.
+```
+/codetmp
+  /js
+    /components           -> components
+    /uis                  -> components UI
+    /require              -> libraries
+    dom-events.js         -> global events mapping
+    ui.js                 -> global UI
+    view-states-map.js    -> view states mapping
+  environment.js
+  index.js                -> main app entry
+  manifest-cache.json     -> chache index
+```
 
-#### File and Folder Management
-See `codetmp/js/file-manager.js`.
+### How Previewing Files Works
+Codetmp7 editor use communication API and workers client claiming to allow serving **codetmp** storage files requested by **cpreview** project.
 
-#### ACE Editor
-See `compoEditor.Init()`. Ace editor by Ajax.org Cloud9 Editor.
+Due to recent policy updates on browser storage partitioning, this communication is only possible if both **codetmp** and **cpreview** project hosted in the same domain.
 
 
 ## Aknowledgements

codetmp/environment.js

@@ -0,0 +1,16 @@
+let environment = {
+    activeEnvironment: 'production', // production or development
+    
+    production: {
+        previewUrl: 'https://preview.codetmp7.dev/',
+        previewUrlPWA: 'https://pwa.codetmp7.dev/', 
+    }, 
+    development: {
+        previewUrl: 'http://localhost:8001/',
+        previewUrlPWA: 'http://localhost:8002/', 
+    }
+};
+
+export function GetEnv() {
+    return environment[environment.activeEnvironment];
+}

codetmp/index.html

@@ -814,7 +814,7 @@ <h5><b>Trash <span class="w3-tiny">(Preview only)</span> <span class="w3-black w
   </script>
 
   <script src="js/app.js"></script>
-  <script src="index.js"></script>
+  <script src="index.js" type="module"></script>
   <script src="pwa.js"></script>
 
   <script type="module">

codetmp/index.js

@@ -1,15 +1,13 @@
-const ACE_CDN_BASEPATH = '/assets/js/ace-builds@1.32.3/src-min-noconflict';
+import { GetEnv } from './environment.js';
+
+let environment = GetEnv();
+let ACE_CDN_BASEPATH = '/assets/js/ace-builds/src-min-noconflict';
 let activeWorkspace = 0;
-let environment = {
-  previewUrl: 'https://preview.codetmp7.dev/',
-  previewUrlPWA: 'https://pwa.codetmp7.dev/',
-};
 
-// URL for cpreview. development-only.
-/* let environment = {
-  previewUrl: 'https://glorious-space-robot-v6jp7v6g5wxcxw5-5000.app.github.dev/',
-  previewUrlPWA: 'https://glorious-space-robot-v6jp7v6g5wxcxw5-5000.app.github.dev/',
-}; */
+// use window while migrating script to module
+window.environment = environment;
+window.activeWorkspace = activeWorkspace;
+window.ACE_CDN_BASEPATH = ACE_CDN_BASEPATH;
 
 app.loadFiles([
   {

codetmp/manifest-cache.json

@@ -1,21 +1,21 @@
 {
   "ace": [
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/ace.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/theme-github.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/mode-html.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/mode-json.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/mode-css.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/mode-javascript.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/worker-html.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/worker-json.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/worker-css.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/worker-javascript.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/ext-searchbox.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/ext-prompt.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/ext-language_tools.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/snippets/javascript.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/snippets/html.js",
-    "/assets/js/ace-builds@1.32.3/src-min-noconflict/snippets/markdown.js",
+    "/assets/js/ace-builds/src-min-noconflict/ace.js",
+    "/assets/js/ace-builds/src-min-noconflict/theme-github.js",
+    "/assets/js/ace-builds/src-min-noconflict/mode-html.js",
+    "/assets/js/ace-builds/src-min-noconflict/mode-json.js",
+    "/assets/js/ace-builds/src-min-noconflict/mode-css.js",
+    "/assets/js/ace-builds/src-min-noconflict/mode-javascript.js",
+    "/assets/js/ace-builds/src-min-noconflict/worker-html.js",
+    "/assets/js/ace-builds/src-min-noconflict/worker-json.js",
+    "/assets/js/ace-builds/src-min-noconflict/worker-css.js",
+    "/assets/js/ace-builds/src-min-noconflict/worker-javascript.js",
+    "/assets/js/ace-builds/src-min-noconflict/ext-searchbox.js",
+    "/assets/js/ace-builds/src-min-noconflict/ext-prompt.js",
+    "/assets/js/ace-builds/src-min-noconflict/ext-language_tools.js",
+    "/assets/js/ace-builds/src-min-noconflict/snippets/javascript.js",
+    "/assets/js/ace-builds/src-min-noconflict/snippets/html.js",
+    "/assets/js/ace-builds/src-min-noconflict/snippets/markdown.js",
 
     "/assets/ace/theme-codetmp-markdown.js",
     "/assets/ace/theme-codetmp.js"

cpreview/index.html

@@ -13,32 +13,17 @@
     Nothing to show here. Please go to <a href="https://codetmp.web.app">Codetmp</a> and write your code.
   </span>
 
-  <script> L = console.log </script>
-  <script> window.$ = document.querySelector.bind(document); </script>
-  
   <!-- service worker handler -->
   <script>
 
-    let channelName = 'preview'; // default channel name
-    try {
-      channelName = location.hostname.split('.')[0]; // get sub domain name
-      
-      // dev port settings
-      if (location.hostname.includes(':')) {
-        if (channelName.includes('5002')) {
-          channelName = 'preview';
-        } else {
-          channelName = 'pwa';
-        }
-      }
-    } catch (e) { }
+    let channelName = (window.name == 'PreviewFramePWA' ? 'pwa' : 'preview');
     let controllerResolver = null;
 
     if (window.opener !== null) {
       new Promise(function(resolve) {
         controllerResolver = resolve;
       }).then(function() {
-        $('#js-txt-message').textContent = 'Initializing connection port ...';
+        document.querySelector('#js-txt-message')?.replaceChildren('Initializing connection port ...');
         window.opener.postMessage({ 
           channelName,
           message: 'preview-frame-isReady',
@@ -62,15 +47,15 @@
 
         if (sw.waiting) {
           sw.waiting.postMessage({message: 'skipWaiting'});
-          L('Preview page updated. You might want to reload the page.');
+          console.log('Preview page updated. You might want to reload the page.');
           return;
         }
 
         if (sw.installing) {
           sw.installing.addEventListener('statechange', function() {
             if (sw.installing.state == 'installed') {
               sw.waiting.postMessage({message: 'skipWaiting'});
-              L('Preview page updated. You might want to reload the page.');
+              console.log('Preview page updated. You might want to reload the page.');
             }
           })
           return;
@@ -80,7 +65,7 @@
           sw.installing.addEventListener('statechange', function() {
             if (this.state == 'installed') {
               sw.waiting.postMessage({message: 'skipWaiting'});
-              L('Preview page updated. You might want to reload the page.');
+              console.log('Preview page updated. You might want to reload the page.');
             }
           })
         })
@@ -102,11 +87,13 @@
       	switch (e.data.message) {
           case 'init-message-port':
 	          navigator.serviceWorker.controller.postMessage({ 
+              channelName,
               message: 'init-message-port',
             }, [e.ports[0]]);
             break;
             case 'reinit-message-port':
             navigator.serviceWorker.controller.postMessage({ 
+              channelName,
               message: 'reinit-message-port',
             }, [e.ports[0]]);
           break;

cpreview/sw.js

@@ -1,5 +1,4 @@
-let asd = L = console.log;
-let cacheVersion = '10';
+let cacheVersion = '11';
 let cacheItem = 'cpreview-'+cacheVersion;
 let messagePort;
 let resolverQueue = {};
@@ -8,17 +7,6 @@ let catchedBlob = {};
 let isRelinkingMessagePort = false;
 
 let channelName = 'preview';
-try {
-  channelName = location.hostname.split('.')[0]; // get sub domain name
-  // dev port settings
-  if (location.hostname.includes(':')) {
-    if (channelName.includes('5002')) {
-      channelName = 'preview';
-    } else {
-      channelName = 'pwa';
-    }
-  }
-} catch (e) { }
 
 function portMessageHandler(e) {
   switch (e.data.message) {
@@ -80,11 +68,13 @@ self.addEventListener('message', async function(e) {
       self.skipWaiting();
     break;
     case 'reinit-message-port':
+      channelName = e.data.channelName;
       messagePort = e.ports[0];
       messagePort.onmessage = portMessageHandler;
       isRelinkingMessagePort = false;
     break;
     case 'init-message-port':
+      channelName = e.data.channelName;
       messagePort = e.ports[0];
       messagePort.onmessage = portMessageHandler;
       messagePort.postMessage({ message: 'message-port-opened' });
@@ -165,7 +155,7 @@ function relinkMissingPort() {
     return relinkingPromise;
   }
 
-  relinkingPromise =new Promise((resolve, reject) => {
+  relinkingPromise = new Promise((resolve, reject) => {
 
     self.clients.matchAll({
       includeUncontrolled: true,
@@ -233,7 +223,7 @@ function responseByFetch(e, resolve) {
 self.addEventListener('fetch', function(e) {
 
   let reqUrl = new URL(e.request.url);
-  if (reqUrl.pathName == '/') {
+  if (reqUrl.pathname == '/') {
     e.respondWith(
       caches.match(e.request).then(function(resp) {
         if (resp) {