bundle into single js file!

- remove external css - ensure bulma styles don't rely on html, body
- move logo.svg to be loaded inline
- rename scss -> assets
- remove wombat/wombatWorkers, bundled via raw-loader and sw.js

assets/logo.svg

@@ -10,7 +10,7 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    sodipodi:docname="logoonly.svg"
    inkscape:version="1.0rc1 (09960d6, 2020-04-09)"
-   id="svg403"
+   id="wrlogo"
    version="1.1"
    viewBox="0 0 66.712425 66.712425"
    height="66.712425mm"
@@ -40,37 +40,6 @@
        xlink:href="#linearGradient5691"
        inkscape:collect="always" />
   </defs>
-  <sodipodi:namedview
-     inkscape:window-maximized="0"
-     inkscape:window-y="23"
-     inkscape:window-x="0"
-     inkscape:window-height="786"
-     inkscape:window-width="1252"
-     showgrid="false"
-     inkscape:document-rotation="0"
-     inkscape:current-layer="layer1"
-     inkscape:document-units="mm"
-     inkscape:cy="520.33335"
-     inkscape:cx="353.00073"
-     inkscape:zoom="0.35"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     borderopacity="1.0"
-     bordercolor="#666666"
-     pagecolor="#ffffff"
-     id="base" />
-  <metadata
-     id="metadata400">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
   <g
      transform="translate(-12.435223,-10.495135)"
      id="layer1"

assets/main.scss

@@ -33,15 +33,27 @@ $navbar-breakpoint: 800px;
   overflow-x: hidden;
 }
 
-.font-ssp {
-  font-family: 'Source Code Pro', monospace;
-}
-
-.font-ssp-c {
-  font-family: 'Source Code Pro', monospace;
-  letter-spacing: -1.5px; 
-}
 
 @import "../node_modules/bulma/bulma";
 
+// Add html and body styles to :host for webcomponents
+:host {
+  background-color: $body-background-color;
+  font-size: $body-size;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  min-width: $body-min-width;
+  overflow-x: $body-overflow-x;
+  overflow-y: $body-overflow-y;
+  text-rendering: $body-rendering;
+  text-size-adjust: 100%;
 
+  font-family: $body-family;
+  color: $body-color;
+  font-size: $body-font-size;
+  font-weight: $body-weight;
+  line-height: $body-line-height;
+
+  box-sizing: border-box;
+  overflow: hidden;
+}

index.html

@@ -2,7 +2,7 @@
 <html class="no-overflow">
 <head>
 <script src="./dist/frontend.js"></script>
-<link href="./dist/frontend.css" rel="stylesheet"/>
+<!--<link href="./dist/frontend.css" rel="stylesheet"/>-->
 </head>
 <body>
 <app-main></app-main>

package.json

@@ -20,6 +20,7 @@
     "css-loader": "^3.5.3",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.14.0",
+    "raw-loader": "^4.0.1",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.2.1",
     "svg-inline-loader": "^0.8.2",

scss/base.scss

@@ -1,17 +0,0 @@
-html {
-  scroll-behavior: smooth;
-  overflow-y: hidden;
-}
-
-html.no-overflow {
-  overflow-y: hidden;
-};
-
-body {
-  height: 100vh;
-}
-
-@import "../node_modules/bulma/sass/utilities/_all.sass";
-@import "../node_modules/bulma/sass/base/_all.sass";
-
-

src/frontend.js

@@ -9,12 +9,9 @@ import { register } from 'register-service-worker';
 import prettyBytes from 'pretty-bytes';
 import marked from 'marked';
 
-import '../scss/base.scss';
+import allCssRaw from '../assets/main.scss';
-import allCssRaw from '../scss/main.scss';
+import rwpLogo from '../assets/logo.svg';
 
-//import fasArrowLeft from '@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg';
-
-//import fasInfo from '@fortawesome/fontawesome-free/svgs/solid/info-circle.svg';
 import fasArchiveIcon from '@fortawesome/fontawesome-free/svgs/solid/info-circle.svg';
 import fasRefresh from '@fortawesome/fontawesome-free/svgs/solid/redo-alt.svg';
 import fasFullscreen from '@fortawesome/fontawesome-free/svgs/solid/desktop.svg';
@@ -66,7 +63,7 @@ class AppMain extends LitElement
 
   static get styles() {
     return wrapCss(css`
-    #logo {
+    #wrlogo {
       max-height: 2.5rem;
       margin-right: 8px;
     }
@@ -100,7 +97,7 @@ class AppMain extends LitElement
       <nav class="navbar has-background-info" role="navigation" aria-label="main navigation">
       <div class="navbar-brand">
         <a class="navbar-item has-text-weight-bold is-size-5 has-allcaps" href="/">
-          <img id="logo" src="/static/logo.svg"/>
+          <fa-icon id="wrlogo" size="2.5rem" .svg=${rwpLogo}></fa-icon>
           <span class="has-text-primary">replay</span>
           <span class="has-text-link">web.page</span>
         </a>
@@ -469,7 +466,7 @@ You can select a file to upload from the main page by clicking the \'Choose File
     return html`
     <section class="container">
     <div class="level has-text-centered">
-    <img class="level-item logo" src="/static/logo.svg"/>
+    <fa-icon class="level-item logo" size="96px" .svg=${rwpLogo}></fa-icon>
   </div>
       <div class="level">
         <p class="level-item">Loading&nbsp;<b>${this.sourceUrl}</b>...</p>
@@ -721,8 +718,8 @@ class WrColl extends LitElement
     super();
     this.sourceUrl = null;
 
-    this.baseApiPrefix = "/wabac/api";
+    this.baseApiPrefix = "./wabac/api";
-    this.baseReplayPrefix = "/wabac";
+    this.baseReplayPrefix = "./wabac";
     this.apiPrefix = "";
     this.replayPrefix = "";
 
@@ -2085,7 +2082,7 @@ function registerSW(url) {
   });
   
   register(url, {
-    registrationOptions: { scope: '/' },
+    registrationOptions: { scope: './' },
     ready (registration) {
       console.log('Service worker is active.');
       resolve();

static/wombatWorkers.js

@@ -1,449 +0,0 @@
-/**
- * Mini wombat for performing URL rewriting within the
- * Web/Shared/Service Worker context
- * @param {Object} info
- * @return {WBWombat}
- */
-function WBWombat(info) {
-  if (!(this instanceof WBWombat)) return new WBWombat(info);
-  /** @type {Object} */
-  this.info = info;
-  this.initImportScriptsRewrite();
-  this.initHTTPOverrides();
-  this.initClientApisOverride();
-  this.initCacheApisOverride();
-}
-
-/**
- * Returns T/F indicating if the supplied URL is not to be rewritten
- * @param {string} url
- * @return {boolean}
- */
-WBWombat.prototype.noRewrite = function(url) {
-  return (
-    !url ||
-    url.indexOf('blob:') === 0 ||
-    url.indexOf('javascript:') === 0 ||
-    url.indexOf('data:') === 0 ||
-    url.indexOf(this.info.prefix) === 0
-  );
-};
-
-/**
- * Returns T/F indicating if the supplied URL is an relative URL
- * @param {string} url
- * @return {boolean}
- */
-WBWombat.prototype.isRelURL = function(url) {
-  return url.indexOf('/') === 0 || url.indexOf('http:') !== 0;
-};
-
-/**
- * Attempts to resolve the supplied relative URL against
- * the origin this worker was created on
- * @param {string} maybeRelURL
- * @param {string} against
- * @return {string}
- */
-WBWombat.prototype.maybeResolveURL = function(maybeRelURL, against) {
-  if (!against) return maybeRelURL;
-  try {
-    var resolved = new URL(maybeRelURL, against);
-    return resolved.href;
-  } catch (e) {}
-  return maybeRelURL;
-};
-
-/**
- * Returns null to indicate that the supplied URL is not to be rewritten.
- * Otherwise returns a URL that can be rewritten
- * @param {*} url
- * @param {string} resolveAgainst
- * @return {?string}
- */
-WBWombat.prototype.ensureURL = function(url, resolveAgainst) {
-  if (!url) return url;
-  var newURL;
-  switch (typeof url) {
-    case 'string':
-      newURL = url;
-      break;
-    case 'object':
-      newURL = url.toString();
-      break;
-    default:
-      return null;
-  }
-  if (this.noRewrite(newURL)) return null;
-  if (this.isRelURL(newURL)) {
-    return this.maybeResolveURL(newURL, resolveAgainst);
-  }
-
-  // if url starts with current origin, but not properly rewritten, rewrite against current baseUr
-  if (newURL.indexOf(self.location.origin) === 0) {
-    return this.maybeResolveURL(newURL.slice(self.location.origin.length), resolveAgainst);
-  }
-  return newURL;
-};
-
-/**
- * Rewrites the supplied URL
- * @param {string} url
- * @return {string}
- */
-WBWombat.prototype.rewriteURL = function(url) {
-  var rwURL = this.ensureURL(url, this.info.originalURL);
-  if (!rwURL) return url;
-  if (this.info.prefixMod) {
-    return this.info.prefixMod + rwURL;
-  }
-  return rwURL;
-};
-
-/**
- * Rewrites the supplied URL of an controlled page using the mp\_ modifier
- * @param {string} url
- * @param {WindowClient} [client]
- * @return {string}
- */
-WBWombat.prototype.rewriteClientWindowURL = function(url, client) {
-  var rwURL = this.ensureURL(url, client ? client.url : this.info.originalURL);
-  if (!rwURL) return url;
-  if (this.info.prefix) {
-    return this.info.prefix + 'mp_/' + rwURL;
-  }
-  return rwURL;
-};
-
-/**
- * Mini url rewriter specifically for rewriting web sockets
- * @param {?string} originalURL
- * @return {string}
- */
-WBWombat.prototype.rewriteWSURL = function(originalURL) {
-  // If undefined, just return it
-  if (!originalURL) return originalURL;
-
-  var urltype_ = typeof originalURL;
-  var url = originalURL;
-
-  // If object, use toString
-  if (urltype_ === 'object') {
-    url = originalURL.toString();
-  } else if (urltype_ !== 'string') {
-    return originalURL;
-  }
-
-  // empty string check
-  if (!url) return url;
-
-  var wsScheme = 'ws://';
-  var wssScheme = 'wss://';
-  var https = 'https://';
-
-  var wbSecure = this.info.prefix.indexOf(https) === 0;
-  var wbPrefix =
-    this.info.prefix.replace(
-      wbSecure ? https : 'http://',
-      wbSecure ? wssScheme : wsScheme
-    ) + 'ws_/';
-  return wbPrefix + url;
-};
-
-/**
- * Rewrites all URLs in the supplied arguments object
- * @param {Object} argsObj
- * @return {Array<string>}
- */
-WBWombat.prototype.rewriteArgs = function(argsObj) {
-  // recreate the original arguments object just with URLs rewritten
-  var newArgObj = new Array(argsObj.length);
-  for (var i = 0; i < newArgObj.length; i++) {
-    newArgObj[i] = this.rewriteURL(argsObj[i]);
-  }
-  return newArgObj;
-};
-
-/**
- * Rewrites the input to one of the Fetch APIs
- * @param {*|string|Request} input
- * @return {*|string|Request}
- */
-WBWombat.prototype.rewriteFetchApi = function(input) {
-  var rwInput = input;
-  switch (typeof input) {
-    case 'string':
-      rwInput = this.rewriteURL(input);
-      break;
-    case 'object':
-      if (input.url) {
-        var new_url = this.rewriteURL(input.url);
-        if (new_url !== input.url) {
-          // not much we can do here Request.url is read only
-          // https://developer.mozilla.org/en-US/docs/Web/API/Request/url
-          rwInput = new Request(new_url, input);
-        }
-      } else if (input.href) {
-        // it is likely that input is either self.location or self.URL
-        // we cant do anything here so just let it go
-        rwInput = input.href;
-      }
-      break;
-  }
-  return rwInput;
-};
-
-/**
- * Rewrites the input to one of the Cache APIs
- * @param {*|string|Request} request
- * @return {*|string|Request}
- */
-WBWombat.prototype.rewriteCacheApi = function(request) {
-  var rwRequest = request;
-  if (typeof request === 'string') {
-    rwRequest = this.rewriteURL(request);
-  }
-  return rwRequest;
-};
-
-/**
- * Applies an override to the importScripts function
- * @see https://html.spec.whatwg.org/multipage/workers.html#dom-workerglobalscope-importscripts
- */
-WBWombat.prototype.initImportScriptsRewrite = function() {
-  if (!self.importScripts) return;
-  var wombat = this;
-  var origImportScripts = self.importScripts;
-  self.importScripts = function importScripts() {
-    // rewrite the arguments object and call original function via fn.apply
-    var rwArgs = wombat.rewriteArgs(arguments);
-    return origImportScripts.apply(this, rwArgs);
-  };
-};
-
-/**
- * Applies overrides to the XMLHttpRequest.open and XMLHttpRequest.responseURL
- * in order to ensure URLs are rewritten.
- *
- * Applies an override to window.fetch in order to rewrite URLs and URLs of
- * the supplied Request objects used as arguments to fetch.
- *
- * Applies overrides to window.Request, window.Response, window.EventSource,
- * and window.WebSocket in order to ensure URLs they operate on are rewritten.
- *
- * @see https://xhr.spec.whatwg.org/
- * @see https://fetch.spec.whatwg.org/
- * @see https://html.spec.whatwg.org/multipage/web-sockets.html#websocket
- * @see https://html.spec.whatwg.org/multipage/server-sent-events.html#the-eventsource-interface
- */
-WBWombat.prototype.initHTTPOverrides = function() {
-  var wombat = this;
-  if (
-    self.XMLHttpRequest &&
-    self.XMLHttpRequest.prototype &&
-    self.XMLHttpRequest.prototype.open
-  ) {
-    var oXHROpen = self.XMLHttpRequest.prototype.open;
-    self.XMLHttpRequest.prototype.open = function open(
-      method,
-      url,
-      async,
-      user,
-      password
-    ) {
-      var rwURL = wombat.rewriteURL(url);
-      var openAsync = true;
-      if (async != null && !async) openAsync = false;
-      oXHROpen.call(this, method, rwURL, openAsync, user, password);
-      if (rwURL.indexOf('data:') === -1) {
-        this.setRequestHeader('X-Pywb-Requested-With', 'XMLHttpRequest');
-      }
-    };
-  }
-
-  if (self.fetch != null) {
-    // this fetch is Worker.fetch
-    var orig_fetch = self.fetch;
-    self.fetch = function fetch(input, init_opts) {
-      var rwInput = wombat.rewriteFetchApi(input);
-      var newInitOpts = init_opts || {};
-      newInitOpts['credentials'] = 'include';
-      return orig_fetch.call(this, rwInput, newInitOpts);
-    };
-  }
-
-  if (self.Request && self.Request.prototype) {
-    var orig_request = self.Request;
-    self.Request = (function(Request_) {
-      return function Request(input, init_opts) {
-        var newInitOpts = init_opts || {};
-        var newInput = wombat.rewriteFetchApi(input);
-        newInitOpts['credentials'] = 'include';
-        return new Request_(newInput, newInitOpts);
-      };
-    })(self.Request);
-    self.Request.prototype = orig_request.prototype;
-  }
-
-  if (self.Response && self.Response.prototype) {
-    var originalRedirect = self.Response.prototype.redirect;
-    self.Response.prototype.redirect = function redirect(url, status) {
-      var rwURL = wombat.rewriteUrl(url);
-      return originalRedirect.call(this, rwURL, status);
-    };
-  }
-
-  if (self.EventSource && self.EventSource.prototype) {
-    var origEventSource = self.EventSource;
-    self.EventSource = (function(EventSource_) {
-      return function EventSource(url, configuration) {
-        var rwURL = url;
-        if (url != null) {
-          rwURL = wombat.rewriteUrl(url);
-        }
-        return new EventSource_(rwURL, configuration);
-      };
-    })(self.EventSource);
-    self.EventSource.prototype = origEventSource.prototype;
-    Object.defineProperty(self.EventSource.prototype, 'constructor', {
-      value: self.EventSource
-    });
-  }
-
-  if (self.WebSocket && self.WebSocket.prototype) {
-    var origWebSocket = self.WebSocket;
-    self.WebSocket = (function(WebSocket_) {
-      return function WebSocket(url, configuration) {
-        var rwURL = url;
-        if (url != null) {
-          rwURL = wombat.rewriteWSURL(url);
-        }
-        return new WebSocket_(rwURL, configuration);
-      };
-    })(self.WebSocket);
-    self.WebSocket.prototype = origWebSocket.prototype;
-    Object.defineProperty(self.WebSocket.prototype, 'constructor', {
-      value: self.WebSocket
-    });
-  }
-};
-
-/**
- * Applies an override to Clients.openWindow and WindowClient.navigate that rewrites
- * the supplied URL that represents a controlled window
- * @see https://w3c.github.io/ServiceWorker/#window-client-interface
- * @see https://w3c.github.io/ServiceWorker/#clients-interface
- */
-WBWombat.prototype.initClientApisOverride = function() {
-  var wombat = this;
-  if (
-    self.Clients &&
-    self.Clients.prototype &&
-    self.Clients.prototype.openWindow
-  ) {
-    var oClientsOpenWindow = self.Clients.prototype.openWindow;
-    self.Clients.prototype.openWindow = function openWindow(url) {
-      var rwURL = wombat.rewriteClientWindowURL(url);
-      return oClientsOpenWindow.call(this, rwURL);
-    };
-  }
-
-  if (
-    self.WindowClient &&
-    self.WindowClient.prototype &&
-    self.WindowClient.prototype.navigate
-  ) {
-    var oWinClientNavigate = self.WindowClient.prototype.navigate;
-    self.WindowClient.prototype.navigate = function navigate(url) {
-      var rwURL = wombat.rewriteClientWindowURL(url, this);
-      return oWinClientNavigate.call(this, rwURL);
-    };
-  }
-};
-
-/**
- * Applies overrides to the CachStorage and Cache interfaces in order
- * to rewrite the URLs they operate on
- * @see https://w3c.github.io/ServiceWorker/#cachestorage
- * @see https://w3c.github.io/ServiceWorker/#cache-interface
- */
-WBWombat.prototype.initCacheApisOverride = function() {
-  var wombat = this;
-  if (
-    self.CacheStorage &&
-    self.CacheStorage.prototype &&
-    self.CacheStorage.prototype.match
-  ) {
-    var oCacheStorageMatch = self.CacheStorage.prototype.match;
-    self.CacheStorage.prototype.match = function match(request, options) {
-      var rwRequest = wombat.rewriteCacheApi(request);
-      return oCacheStorageMatch.call(this, rwRequest, options);
-    };
-  }
-
-  if (self.Cache && self.Cache.prototype) {
-    if (self.Cache.prototype.match) {
-      var oCacheMatch = self.Cache.prototype.match;
-      self.Cache.prototype.match = function match(request, options) {
-        var rwRequest = wombat.rewriteCacheApi(request);
-        return oCacheMatch.call(this, rwRequest, options);
-      };
-    }
-
-    if (self.Cache.prototype.matchAll) {
-      var oCacheMatchAll = self.Cache.prototype.matchAll;
-      self.Cache.prototype.matchAll = function matchAll(request, options) {
-        var rwRequest = wombat.rewriteCacheApi(request);
-        return oCacheMatchAll.call(this, rwRequest, options);
-      };
-    }
-
-    if (self.Cache.prototype.add) {
-      var oCacheAdd = self.Cache.prototype.add;
-      self.Cache.prototype.add = function add(request, options) {
-        var rwRequest = wombat.rewriteCacheApi(request);
-        return oCacheAdd.call(this, rwRequest, options);
-      };
-    }
-
-    if (self.Cache.prototype.addAll) {
-      var oCacheAddAll = self.Cache.prototype.addAll;
-      self.Cache.prototype.addAll = function addAll(requests) {
-        var rwRequests = requests;
-        if (Array.isArray(requests)) {
-          rwRequests = new Array(requests.length);
-          for (var i = 0; i < requests.length; i++) {
-            rwRequests[i] = wombat.rewriteCacheApi(requests[i]);
-          }
-        }
-        return oCacheAddAll.call(this, rwRequests);
-      };
-    }
-
-    if (self.Cache.prototype.put) {
-      var oCachePut = self.Cache.prototype.put;
-      self.Cache.prototype.put = function put(request, response) {
-        var rwRequest = wombat.rewriteCacheApi(request);
-        return oCachePut.call(this, rwRequest, response);
-      };
-    }
-
-    if (self.Cache.prototype.delete) {
-      var oCacheDelete = self.Cache.prototype.delete;
-      self.Cache.prototype.delete = function newCacheDelete(request, options) {
-        var rwRequest = wombat.rewriteCacheApi(request);
-        return oCacheDelete.call(this, rwRequest, options);
-      };
-    }
-
-    if (self.Cache.prototype.keys) {
-      var oCacheKeys = self.Cache.prototype.keys;
-      self.Cache.prototype.keys = function keys(request, options) {
-        var rwRequest = wombat.rewriteCacheApi(request);
-        return oCacheKeys.call(this, rwRequest, options);
-      };
-    }
-  }
-};
-
-self.WBWombat = WBWombat;

webpack.config.js

@@ -8,8 +8,7 @@ module.exports = (env, argv) => {
     entry: {
       'frontend': './src/frontend.js',
       'embed': './src/embed.js',
-      'sw': 'wabac/src/sw.js',
+      'sw': 'wabac/src/sw.js'
-      'wombat': 'wombat/src/wbWombat.js',
     },
 
     output: {
@@ -61,6 +60,10 @@ module.exports = (env, argv) => {
         test: /main.scss$/,
         loaders: ['to-string-loader', 'css-loader', 'sass-loader']
       },
+      {
+        test: /wombat.js|wombatWorkers.js$/i,
+        loaders: ['raw-loader'],
+      }
       ]
     }
   }

yarn.lock

@@ -3754,6 +3754,14 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-loader@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.1.tgz#14e1f726a359b68437e183d5a5b7d33a3eba6933"
+  integrity sha512-baolhQBSi3iNh1cglJjA0mYzga+wePk7vdEX//1dTFd+v4TsQlQE0jitJSNF1OIP82rdYulH7otaVmdlDaJ64A==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.5"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -4020,7 +4028,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.6.1, schema-utils@^2.6.6:
+schema-utils@^2.6.1, schema-utils@^2.6.5, schema-utils@^2.6.6:
   version "2.6.6"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.6.tgz#299fe6bd4a3365dc23d99fd446caff8f1d6c330c"
   integrity sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==