embedding tweaks: resolve relative "source" URL to current page before passing to app

docs: embedding: add example using latest npm release for testing, recommend versioned releases for production

docs/embedding.md

@@ -63,7 +63,7 @@ The `<replay-web-page>` tag is a web component and supports a number of addition
 
 | Attribute    | Description      |
 |:-------------|:-----------------|
-| `source`     | Source URL for the archive file. It should be a URL in one of the [supported formats](/docs/formats) loaded from one of the [support locations](/docs/locations) and is required. If it is a relative URL, it will be evaluated relative to `replayBase`. |
+| `source`     | Source URL for the archive file. It should be a URL in one of the [supported formats](/docs/formats) loaded from one of the [support locations](/docs/locations) and is required. |
 | `url`        | The starting URL to load from the archive. If omitted, will start with the page list or URL search view. |
 | `ts`         | The timestamp of the starting URL to load. If omitted, the latest available version is used. |
 | `deepLink`   | (`true` / `false`) if set to true, allow 'deep linking' to exact pages in the embed, besides the starting URL. |
@@ -75,24 +75,27 @@ The `<replay-web-page>` tag is a web component and supports a number of addition
 
 ### Versioning
 
-Note that the above example uses the paths as, which is a CDN for Javascript packages:
+Note that the above example uses the paths as, which is a CDN for Javascript packages at a specific version:
 
 - `https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.version }}/ui.js`
 - `https://cdn.jsdelivr.net/npm/replaywebpage@{{ site.version }}/sw.js`
 
-Another alternative using a different would be:
-
-- `https://unpkg.com/replaywebpage@{{ site.version }}/ui.js`
-- `https://unpkg.com/replaywebpage@{{ site.version }}/sw.js`
-
 These URLs point to a specific version of ReplayWeb.page software released on NPM, eg. `{{ site.version }}`, meaning that your replay should stay stable, even if ReplayWeb.page is updated.
 
-You can choose another of ReplayWeb.page (or even try different versions) to ensure that you have the best available replay.
+Although ReplayWeb.page strives to remain backwards compatible, this addresses any potential issue of older embeds breaking when the replay system is updated.
 
-This addresses the potential issue of older sites breaking when web archive replay software is updated.
+You can also use the latest stable release by omitting the version, and the URL will automatically load the latest published release:
+
+- `https://cdn.jsdelivr.net/npm/replaywebpage/ui.js`
+- `https://cdn.jsdelivr.net/npm/replaywebpage/sw.js`
+
+This is not recommended for full production use as this is more likely to break in case there is a breaking change.
+
+For testing the very latest, it is possible to simply link to replayweb.page itself, eg. `https://replayweb.page/ui.js`
+and `https://replayweb.page/sw.js` but these are updated the most frequently and more likely to break.
+
+For production use, it is recommended to use a fixed version and explicitly upgrade as necessary.
 
-For production use, it is advised against linking to the latest version, eg. `https://replayweb.page/ui.js`
-and `https://replayweb.page/sw.js` as these will be updated frequently and make break your embed.
 
 ## Common Issues
 

src/embed.js

@@ -121,8 +121,10 @@ class Embed extends LitElement
 
       this.embed = this.embed || "default";
 
+      const source = new URL(this.source, document.baseURI);
+
       this.paramString = new URLSearchParams({
-        source: this.source,
+        source,
         customColl: this.coll,
         config: this.config,
         basePageUrl: window.location.href.split("#")[0],

ui.js

@@ -2302,7 +2302,7 @@ const It=new WeakMap,Rt=v(e=>t=>{if(!(t instanceof D))throw new Error("unsafeHTM
         `):q`<tr class="section"><td colspan="4"><i>No Results Found.</i></td></tr>`}
       </tbody>
     </table>
-      `}onSort(e){e.preventDefault();const t=e.currentTarget.getAttribute("data-key");t===this.sortKey?this.sortDesc=!this.sortDesc:(this.sortDesc=!1,this.sortKey=t)}onSortChanged(e){this.sortedResults=e.detail.sortedData,this.sortKey=e.detail.sortKey,this.sortDesc=e.detail.sortDesc}onReplay(e){e.preventDefault();const t={url:e.currentTarget.getAttribute("data-url"),ts:e.currentTarget.getAttribute("data-ts")};return this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{data:t}})),!1}}customElements.define("wr-coll-resources",li);var ci=document.currentScript&&document.currentScript.src;class di extends re{constructor(){super(),this.replaybase="./replay/",this.swName="sw.js",this.view="replay",this.ts="",this.url="",this.query="",this.config="",this.coll="",this.paramString=null,this.deepLink=!1,this.swInited=!1,this.embed=null,this.reloadCount=0}static get properties(){return{url:{type:String},ts:{type:String},query:{type:String},source:{type:String},view:{type:String},embed:{type:String},replaybase:{type:String},swName:{type:String},title:{type:String},coll:{type:String},config:{type:String},swInited:{type:Boolean},paramString:{type:String},hashString:{type:String},deepLink:{type:Boolean},noSW:{type:Boolean}}}async doRegister(){try{await Se(this.swName,this.replaybase),console.log("done"),this.swInited=!0}catch(e){console.log(e),this.noSW=!0}}firstUpdated(){this.doRegister(),window.addEventListener("message",e=>{const t=this.renderRoot.querySelector("iframe");if(t&&e.source===t.contentWindow){if(e.data.title&&(this.title=e.data.title),!this.deepLink)return;const t=new URLSearchParams(e.data),i=new URL(window.location.href);i.hash="#"+t.toString(),window.history.replaceState({},"",i)}}),this.deepLink&&(this.updateFromHash(),window.addEventListener("hashchange",e=>this.updateFromHash()))}updateFromHash(){const e=new URLSearchParams(window.location.hash.slice(1));e.has("url")&&(this.url=e.get("url")),e.has("ts")&&(this.ts=e.get("ts")),e.has("query")&&(this.query=e.get("query")),e.has("view")&&(this.view=e.get("view"))}updated(e){(e.has("url")||e.has("ts")||e.has("query")||e.has("view")||e.has("source"))&&(this.embed=this.embed||"default",this.paramString=new URLSearchParams({source:this.source,customColl:this.coll,config:this.config,basePageUrl:window.location.href.split("#")[0],embed:this.embed}).toString(),this.hashString=new URLSearchParams({url:this.url,ts:this.ts,query:this.query,view:this.view}).toString())}static get styles(){return ue(ie`
+      `}onSort(e){e.preventDefault();const t=e.currentTarget.getAttribute("data-key");t===this.sortKey?this.sortDesc=!this.sortDesc:(this.sortDesc=!1,this.sortKey=t)}onSortChanged(e){this.sortedResults=e.detail.sortedData,this.sortKey=e.detail.sortKey,this.sortDesc=e.detail.sortDesc}onReplay(e){e.preventDefault();const t={url:e.currentTarget.getAttribute("data-url"),ts:e.currentTarget.getAttribute("data-ts")};return this.dispatchEvent(new CustomEvent("coll-tab-nav",{detail:{data:t}})),!1}}customElements.define("wr-coll-resources",li);var ci=document.currentScript&&document.currentScript.src;class di extends re{constructor(){super(),this.replaybase="./replay/",this.swName="sw.js",this.view="replay",this.ts="",this.url="",this.query="",this.config="",this.coll="",this.paramString=null,this.deepLink=!1,this.swInited=!1,this.embed=null,this.reloadCount=0}static get properties(){return{url:{type:String},ts:{type:String},query:{type:String},source:{type:String},view:{type:String},embed:{type:String},replaybase:{type:String},swName:{type:String},title:{type:String},coll:{type:String},config:{type:String},swInited:{type:Boolean},paramString:{type:String},hashString:{type:String},deepLink:{type:Boolean},noSW:{type:Boolean}}}async doRegister(){try{await Se(this.swName,this.replaybase),console.log("done"),this.swInited=!0}catch(e){console.log(e),this.noSW=!0}}firstUpdated(){this.doRegister(),window.addEventListener("message",e=>{const t=this.renderRoot.querySelector("iframe");if(t&&e.source===t.contentWindow){if(e.data.title&&(this.title=e.data.title),!this.deepLink)return;const t=new URLSearchParams(e.data),i=new URL(window.location.href);i.hash="#"+t.toString(),window.history.replaceState({},"",i)}}),this.deepLink&&(this.updateFromHash(),window.addEventListener("hashchange",e=>this.updateFromHash()))}updateFromHash(){const e=new URLSearchParams(window.location.hash.slice(1));e.has("url")&&(this.url=e.get("url")),e.has("ts")&&(this.ts=e.get("ts")),e.has("query")&&(this.query=e.get("query")),e.has("view")&&(this.view=e.get("view"))}updated(e){if(e.has("url")||e.has("ts")||e.has("query")||e.has("view")||e.has("source")){this.embed=this.embed||"default";const e=new URL(this.source,document.baseURI);this.paramString=new URLSearchParams({source:e,customColl:this.coll,config:this.config,basePageUrl:window.location.href.split("#")[0],embed:this.embed}).toString(),this.hashString=new URLSearchParams({url:this.url,ts:this.ts,query:this.query,view:this.view}).toString()}}static get styles(){return ue(ie`
       .logo {
         margin: 1em;
         flex-grow: 1;