dcp-client 5.5.4 → 5.6.0

package/dcp-client.js

@@ -14,17 +14,16 @@
  */
 'use strict';
 (function namespaceIIFE() {
-
   console.log(`%c
-   _____ _____ ___________   _   
-  /  ___|_   _|  _  | ___ \\ | |  
-  \\ \`--.  | | | | | | |_/ / | |  
-   \`--. \\ | | | | | |  __/  |_|  
-  /\\__/ / | | \\ \\_/ / |      _   
-  \\____/  \\_/  \\___/\\_|     |_|  
-                                    
+   _____ _____ ___________   _
+  /  ___|_   _|  _  | ___ \\ | |
+  \\ \`--.  | | | | | | |_/ / | |
+   \`--. \\ | | | | | |  __/  |_|
+  /\\__/ / | | \\ \\_/ / |      _
+  \\____/  \\_/  \\___/\\_|     |_|
+
 %c
-The console is a browser feature intended for developers. If somebody told you to paste something here it may be a scam and your information could be stolen. Help us keep security in mind and keep your keystores safe.
+The console is a browser feature intended for developers. If somebody told you to paste something here it may be a scam and your information could be stolen. Help us keep security in mind and keep your data safe.
   ~ DCP Team
 
 https://distributive.network/`, "font-weight: bold; font-size: 1.2em; color: #00a473;", "font-size: 1.2em;");
@@ -179,32 +178,124 @@ https://distributive.network/`, "font-weight: bold; font-size: 1.2em; color: #00
       }
     }
 
-    /* Shim to make CommonJS Modules/2.0d8 environment (BravoJS, NobleJS) work with dcpClient in requireNative mode */
-    function loadCJS2Shim()
+    /**
+     * Utility code for loading content relative to the Distributive CDN or Auth subsystems, using
+     * information about their locations gleaned from dcpConfig. Since the browser is unable to preload
+     * content based on these tags, page load will be slightly slower than using hard-coded tags. Note
+     * also that loading scripts this way has may cause them to load after the DOMContentLoadeded event
+     * has fired; caveat elitor.
+     *
+     * Examples:
+     * 1. load stylesheet relative to CDN
+     *    <link type="text/css" type="stylesheet" dcp-cdn-href="/path/to/dcp-style.css">
+     * 2. load javascript relative to auth host
+     *    <script dcp-auth-src="/path/to/dcp-script.js"></script>
+     */
+    function initMagicAttribs()
     {
-      var shimScript = document.createElement('SCRIPT');
-      var shimSrc = thisScript.getAttribute("shim") || (thisScript.src.replace('/dcp-client.js', '/cjs2-shim.js'));
-      
-      shimScript.setAttribute('type',    'text/javascript');
-      shimScript.setAttribute('src',     shimSrc);
-      shimScript.setAttribute('id',      '_dcp_client_cjs2_shim');
-      shimScript.setAttribute('dcp-env', 'vanilla-web');
-      shimScript.setAttribute('onerror', `alert('Error DCP-1003: Could not load cjs2 shim from URL ("${shimSrc}")')`);
-
-      document.write(shimScript.outerHTML);
+      if (true
+          && thisScript.getAttribute('disable-magic-attribs')
+          && thisScript.getAttribute('disable-magic-attribs') !== 'false')
+        return;
+
+      function resolveWithQueryString(dcpUrl, urlTail)
+      {
+        const components = urlTail.split('?');
+        const pathname = components[0];
+        const queryString = components[1] ? ('?' + components[1]) : '';
+        return String(dcpUrl.resolve(pathname)) + queryString;
+      }
+
+      function scanForTags()
+      {
+        if (scanForTags.busy)
+          return;
+        scanForTags.busy = true;
+        try
+        {
+          const magic = { cdn: 'cdn', auth: 'pxAuth' }; /* xlate attrib fragment to conf prop */
+          for (const service in magic)
+          {
+            const srcAttribName  = `dcp-${service}-src`;
+            const hrefAttribName = `dcp-${service}-href`;
+            const scripts = document.querySelectorAll(`SCRIPT[${srcAttribName}]`);
+            const location = dcpConfig[magic[service]].location;
+
+            for (const script of scripts)
+            {
+              const src = script.getAttribute(srcAttribName);
+              script.removeAttribute(srcAttribName);
+              script.src = resolveWithQueryString(location, src);
+            }
+
+            const links = document.querySelectorAll(`LINK[${hrefAttribName}]`);
+            for (const link of links)
+            {
+              const href = link.getAttribute(hrefAttribName);
+              link.removeAttribute(hrefAttribName);
+              link.href = resolveWithQueryString(location, href);
+            }
+          }
+        }
+        catch (error)
+        {
+          console.error(error);
+          throw error;
+        }
+        finally
+        {
+          scanForTags.busy = false;
+        }
+      } /* scanForTags */
+
+      document.addEventListener('readystatechange', scanForTags);
+
+      /* Watch DOM for mutations, initialize new magic relative attrib tags as they appear. */
+      function setupMutationObserver()
+      {
+        function handleMutation(mutationList, observer)
+        {
+          for (const mutation of mutationList)
+          {
+            if (true
+                && mutation.type === 'childList'
+                && mutation.target.querySelectorAll('LINK:not([href]), SCRIPT:not([src])').length)
+            {
+              scanForTags();
+              break;
+            }
+          }
+        }
+
+        scanForTags(); /* handle mutations that were missed to due startup races */
+        const observer = new MutationObserver(handleMutation);
+        observer.observe(document.head, { childList: true, subtree: true });
+
+        if (document.body)
+          observer.observe(document.body, { childList: true, subtree: true });
+        else
+          window.addEventListener('DOMContentLoaded', () => observer.observe(document.body, { childList: true, subtree: true }));
+      }
     }
 
-    /** 
-     * This function is never run directly; it is stringified and emitted in a 
-     * SCRIPT tag that is injected into the document. As such, it cannot close 
+    /**
+     * This function is never run directly; it is stringified and emitted in a
+     * SCRIPT tag that is injected into the document. As such, it cannot close
      * over any non-global variables.
      */
-    function bundleReadyIIFE() {
-      const configScript = document.getElementById("_dcp_config");
+    async function bundleReadyIIFE() {
       const bundleScript = document.getElementById("_dcp_client_bundle");
       const ready        = bundleScript.getAttribute('onready');
       const dcp          = bundleScript.exports;
       const KVIN         = new dcp.kvin.KVIN();
+      const thisScript   = document.currentScript;
+      const ihc          = (true
+                            && thisScript.hasAttribute('inherit-config')
+                            && thisScript.getAttribute('inherit-config') !== 'false'
+                            && (window !== top || window.opener));
+
+      KVIN.userCtors.dcpUrl$$DcpURL  = dcp['dcp-url'].DcpURL;
+      KVIN.userCtors.dcpEth$$Address = dcp.wallet.Address;
 
       if (typeof module !== 'undefined' && typeof module.declare !== 'undefined')
         require('/internal/dcp/cjs2-shim').init(bundleScript.exports); /* CommonJS Modules/2.0d8 environment (BravoJS, NobleJS) */
@@ -212,33 +303,47 @@ https://distributive.network/`, "font-weight: bold; font-size: 1.2em; color: #00
         window.dcp = dcp; /* vanilla JS */
 
       /** Let protocol know where we got out config from, so origin can be reasoned about vis a vis security */
-      dcp.protocol.setSchedulerConfigLocation_fromScript(configScript);
+      if (ihc)
+        dcp.protocol.setSchedulerConfigLocation_fromScript((window.opener || top).document.getElementById("_dcp_config"));
+      else
+        dcp.protocol.setSchedulerConfigLocation_fromScript(document.getElementById("_dcp_config"));
 
       /**
-       * Slide baked-in config underneath the remote config to provide default values.
+       * Slide baked-in config underneath the remote config to provide default values, unless inheriting
+       * config, in which case we deep-clone to get correct constructors for this context etc
        */
-      KVIN.userCtors.dcpUrl$$DcpURL  = dcp['dcp-url'].DcpURL;
-      KVIN.userCtors.dcpEth$$Address = dcp.wallet.Address;
-      dcpConfig = dcp['dcp-config'] = dcp.utils.leafMerge(KVIN.unmarshal(dcp['dcp-default-config']), dcp['dcp-config']);
-
-      /**
-       * Transform instances of Address-like values into Addresses. Necessary since
-       * the config can't access the Address class before the bundle is loaded.
-       */ 
-      dcp.wallet.Address.patchUp(dcpConfig);
-      dcp['dcp-url'].patchup(dcpConfig);
+      if (!ihc)
+      {
+        dcpConfig = dcp['dcp-config'] = dcp.utils.leafMerge(KVIN.unmarshal(dcp['dcp-default-config']), dcp['dcp-config']);
+        /**
+         * Transform instances of Address-like values into Addresses. Necessary since
+         * the config can't access the Address class before the bundle is loaded.
+         */
+        dcp.wallet.Address.patchUp(dcpConfig);
+        dcp['dcp-url'].patchup(dcpConfig);
+      }
+      else
+      {
+        const parent = window.opener || top;
+        dcpConfig = dcp['dcp-config'] = KVIN.unmarshal(await parent.dcp.kvin.marshalAsync(parent.dcpConfig));
+      }
 
       if (ready)
         window.setTimeout(function bundleReadyFire() { let indirectEval=eval; indirectEval(ready) }, 0);
+      window.dispatchEvent(new CustomEvent('dcpclientbundleready', { detail: { dcp, KVIN } })); /* fires as soon as bundle has been parsed */
+      window.dispatchEvent(new CustomEvent('dcpclientready', { detail: dcp })); /* fires as soon as bundle has been parsed and dcp-config is ready */
     }
 
-    /* Load dcp-client bundle from the same location as this module, extract the exports 
+    /* Load dcp-client bundle from the same location as this module, extract the exports
      * from it, and attach them to the global dcp object.
+     *
+     * @param {boolean}   ihc           true if we should inject the inherit-config attribute onto the
+     *                                  bundle's script element
      */
-    function loadBundle(shimCallback) {
+    function loadBundle(ihc) {
       var bundleScript = document.createElement('SCRIPT');
       var bundleSrc = thisScript.getAttribute("bundle") || (thisScript.src.replace('/dcp-client.js', '/dist/dcp-client-bundle.js'));
-      
+
       bundleScript.setAttribute('type', 'text/javascript');
       bundleScript.setAttribute('src', bundleSrc);
       bundleScript.setAttribute('id', '_dcp_client_bundle');
@@ -249,7 +354,7 @@ https://distributive.network/`, "font-weight: bold; font-size: 1.2em; color: #00
       bundleScript.setAttribute('onready', thisScript.getAttribute('onready'));
       thisScript.removeAttribute('onready');
       document.write(bundleScript.outerHTML);
-      document.write(`<script id='_dcp_bundleReadyIIFE'>/* bundleReadyIIFE */;(${bundleReadyIIFE})()</scr` + `ipt>`);
+      document.write(`<script id='_dcp_bundleReadyIIFE' inherit-config="${ihc}">/* bundleReadyIIFE */;(${bundleReadyIIFE})()</scr` + `ipt>`);
       bundleScript = document.getElementById('_dcp_client_bundle');
       if (bundleScript)
         bundleScript.onerror = function(e) {
@@ -258,44 +363,58 @@ https://distributive.network/`, "font-weight: bold; font-size: 1.2em; color: #00
         };
     }
 
-    /* Load the default appearance CSS. This lets us style trivial DCP programs so that the modals use
-     * e.g. so that popups in wallet API look right.
+    /* Load the default CSS. This is enough to make the modals, etc, work without affecting the user
+     * program appearance. If desired, a full DCP style can be loaded from the Distributive CDN; i.e.
+     * <link rel="stylesheet" type="text/css" dcp-cdn-href="/css/dcp-style.css">
      */
     function loadCSS () {
-      // Best-effort to find cdn location
-      //  1. use dcpConfig.cdn.location
-      //  2. use dcpConfigHref to infer where cdn is (when dcpConfigHref is loading through some service)
-      //  3. use thisScriptURL to infer where cdn is
-      var cdnOrigin;
-      if (typeof dcpConfig === 'object' && dcpConfig.cdn?.location?.href)
-        cdnOrigin = dcpConfig.cdn.location.origin
-      else if (typeof dcpConfigHref === 'string' && dcpConfigHref.match(/(portal|auth|cdn|scheduler)\.?/))
-      {
-        cdnOrigin = new URL(dcpConfigHref).origin;
-        cdnOrigin = cdnOrigin.replace(/(portal|auth|cdn|scheduler)\.?/, 'cdn.');
-      }
-      else
-      {
-        cdnOrigin = thisScriptURL.origin.replace(/(portal|auth|cdn|scheduler)\.?/, 'cdn.');
-        if (!cdnOrigin.match(/^(http|https):\/\/cdn/)) // Loaded directly 
-          cdnOrigin = cdnOrigin.replace(/^(http:\/\/|https:\/\/)/, '$1cdn.');
-      }
-
+      var href = thisScript.getAttribute('load-css');
+      if (href === 'false')
+        return;
+      href = thisScriptURL.origin + thisScriptURL.pathname
+        .replace(/\/dcp-client\/dcp-client.js$/, '/dcp-client/assets/dcp-client.css');
       const head = document.getElementsByTagName('head')[0];
       let styleLink = document.createElement('link');
       styleLink.rel = 'stylesheet';
-      styleLink.href = cdnOrigin + '/css/dcp-modals.css';
-      styleLink.id = 'dcp-modal-styles'
+      styleLink.href = href;
       head.appendChild(styleLink);
     }
 
-    let shimCallback;
-    if (typeof module === 'object' && typeof module.declare === 'function')
-      shimCallback = loadCJS2Shim(); /* BravoJS, NobleJS, etc - set up for requireNative */
+    /**
+     * Determine if an inherit attribute has been set on an element IFF we are in a heritable context;
+     * eg the document has been loaded into a popup or frame with the same origin.
+     */
+    function hasInheritAttribute(element, suffix)
+    {
+      return (true
+              && element.hasAttribute(`inherit-${suffix}`)
+              && element.getAttribute(`inherit-${suffix}`) !== 'false'
+              && (window !== top || window.opener)
+              && window.location.origin == (window.opener || top).location.origin);
+    }
+
+    const ihc = hasInheritAttribute(thisScript, 'config');
+    if (!ihc)
+      loadConfig();
+    else
+      window.dcpConfig = (window.opener || top).dcpConfig; /* temp plumbing, re-written in bundleReadyIIFE */
 
-    loadConfig();
+    initMagicAttribs();
     loadCSS();
-    loadBundle(shimCallback);
+
+    if (hasInheritAttribute(thisScript, 'identity'))
+    {
+      window.addEventListener('dcpclientbundleready', ev => {
+        const { dcp, KVIN } = ev.detail;
+        const inheritedIdentity = (window.opener || top).dcp.identity.get();
+        dcp.identity.set(inheritedIdentity);
+      });
+    }
+
+    /* warning: bundle inheritance has context problems; avoid using this feature for non-trivial tasks /wg sep 2025 */
+    if (hasInheritAttribute(thisScript, 'bundle'))
+      window.dcp = window.opener ? window.opener.dcp : top.dcp;
+    else
+      loadBundle(ihc);
   }
-})();
- 
+}) /* namespaceIIFE */();