From 53533bf09a7f327f7a63a4e6cbdf17675b875cd1 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Tue, 29 Jan 2019 18:16:17 +0530 Subject: [PATCH 1/7] render file preview iframe in subdomain --- preview/index.html | 1 + preview/service-worker.js | 59 +++++++++++++++++++++++ preview/talk.html | 72 +++++++++++++++++++++++++++++ src/components/CodeEditor.jsx | 2 - src/components/ContentWrapFiles.jsx | 15 ++++-- 5 files changed, 143 insertions(+), 6 deletions(-) create mode 100644 preview/index.html create mode 100644 preview/service-worker.js create mode 100644 preview/talk.html diff --git a/preview/index.html b/preview/index.html new file mode 100644 index 0000000..da28569 --- /dev/null +++ b/preview/index.html @@ -0,0 +1 @@ +Loading... diff --git a/preview/service-worker.js b/preview/service-worker.js new file mode 100644 index 0000000..1213f69 --- /dev/null +++ b/preview/service-worker.js @@ -0,0 +1,59 @@ +const CACHE_NAME = 'webmaker-vfiles'; +self.addEventListener('fetch', function(event) { + // console.log('fetch event', event.request.url, event.request); + event.respondWith( + caches.open(CACHE_NAME).then(function(cache) { + return cache + .match(event.request) + .then(response => { + // console.log('responding with ', response); + if (response !== undefined) { + return response; + } + return fetch(event.request); + }) + .catch(function(e) { + // Fall back to just fetch()ing the request if some unexpected error + // prevented the cached response from being valid. + console.warn( + 'Couldn\'t serve response for "%s" from cache: %O', + event.request.url, + e + ); + return fetch(event.request); + }); + }) + ); + // } +}); + +function getContentType(url) { + if (url.match(/\.html$/)) { + return 'text/html; charset=UTF-8'; + } else if (url.match(/\.css$/)) { + return 'text/css; charset=UTF-8'; + } + if (url.match(/\.js$/)) { + return 'application/javascript; charset=UTF-8'; + } + return 'text/html; charset=UTF-8'; +} + +self.addEventListener('message', function(e) { + // console.log('message aya sw main', e.data); + caches.open(CACHE_NAME).then(function(cache) { + for (const url in e.data) { + if (Object.prototype.hasOwnProperty.call(e.data, url)) { + // console.log('Received data', url, e.data[url]) + cache.put( + url, + new Response(e.data[url], { + headers: { + 'Content-Type': getContentType(url) + } + }) + ); + } + } + }); +}); diff --git a/preview/talk.html b/preview/talk.html new file mode 100644 index 0000000..7d439ec --- /dev/null +++ b/preview/talk.html @@ -0,0 +1,72 @@ +Hello + + + + + diff --git a/src/components/CodeEditor.jsx b/src/components/CodeEditor.jsx index 06eae83..ceb59e6 100644 --- a/src/components/CodeEditor.jsx +++ b/src/components/CodeEditor.jsx @@ -244,8 +244,6 @@ export default class CodeEditor extends Component { } async initEditor() { - console.log('init editor'); - this.editorReadyDeferred = deferred(); await this.loadDeps(); diff --git a/src/components/ContentWrapFiles.jsx b/src/components/ContentWrapFiles.jsx index b222174..a139896 100644 --- a/src/components/ContentWrapFiles.jsx +++ b/src/components/ContentWrapFiles.jsx @@ -226,7 +226,7 @@ export default class ContentWrapFiles extends Component { ); // Namespace all file paths to '/user' because thats what the service worker // recognizes. - const files = linearizeFiles(assignFilePaths(duplicateFiles, '/user')); + const files = linearizeFiles(assignFilePaths(duplicateFiles, '')); files.forEach(file => { obj[file.path] = file.content || ''; @@ -245,13 +245,16 @@ export default class ContentWrapFiles extends Component { } }); - navigator.serviceWorker.controller.postMessage(obj); + // navigator.serviceWorker.controller.postMessage(obj); + window.talkFrame.contentWindow.postMessage(obj, '*'); if (this.detachedWindow) { log('✉️ Sending message to detached window'); this.detachedWindow.postMessage({ contents: '/user/index.html' }, '*'); } else { - this.frame.src = '/user/index.html'; + setTimeout(() => { + this.frame.src = 'https://preview.webmaker.com:8083/index.html'; + }, 10); } } cleanupErrors() { @@ -650,11 +653,15 @@ export default class ContentWrapFiles extends Component {