@podium/client 4.5.35 → 4.6.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [4.6.0](https://github.com/podium-lib/client/compare/v4.5.35...v4.6.0) (2023-11-16)
+
+
+### Features
+
+* use manifest asset scope field to filter assets ([fd83d64](https://github.com/podium-lib/client/commit/fd83d6486f9454f4fef2cdbcf3a05b86c81205c5))
+
 ## [4.5.35](https://github.com/podium-lib/client/compare/v4.5.34...v4.5.35) (2023-10-19)
 
 

package/README.md

@@ -384,6 +384,8 @@ the content of the component. Before the stream starts flowing a `beforeStream`
 with a Response object, containing `headers`, `css` and `js` references is
 emitted.
 
+**Note:** If the podlet is unavailable, the client will not receive `headers` and therefore will not set `headers` on the response.
+
 #### incoming (required)
 
 A HttpIncoming object. See https://github.com/podium-lib/utils/blob/master/lib/http-incoming.js
@@ -428,6 +430,26 @@ stream.once('beforeStream', (data) => {
 });
 ```
 
+**Note:** If the podlet is unavailable, the client will not receive `headers` and therefore `data.headers` will be undefined.
+
+### Asset Scope
+
+Both the .fetch() method and the .stream() method give you access to podlet asset objects and these CSS and JS asset objects will be filtered if the asset objects contain a `scope` property and that `scope` property matches the current response type (either content or fallback).
+
+For example, if the podlet manifest contains a JavaScript asset definition of the form:
+```
+{
+	js: [{ value: "https://assets.com/path/to/file.js", scope: "content" }],
+}
+```
+And the client performs a fetch like so:
+```js
+const result = await component.fetch();
+```
+Then, if the podlet successfully responds from its content route, the `result.js` property will contain the asset defined above. If, however, the podlet's content route errors and the client is forced to use the podlet's fallback content, then `result.js` property will be an empty array.
+
+Possible `scope` values are `content`, `fallback` and `all`. For backwards compatibility reasons, when assets do not provide a `scope` property, they will always be included in both `content` and `fallback` responses.
+
 ## Controlling caching of the manifest
 
 The client has an internal cache where it keeps a cached version of the manifest

package/lib/http-outgoing.js

@@ -24,6 +24,7 @@ const _maxAge = Symbol('podium:httpoutgoing:maxage');
 const _status = Symbol('podium:httpoutgoing:status');
 const _name = Symbol('podium:httpoutgoing:name');
 const _uri = Symbol('podium:httpoutgoing:uri');
+const _isfallback = Symbol('podium:httpoutgoing:isfallback');
 
 const PodletClientHttpOutgoing = class PodletClientHttpOutgoing extends PassThrough {
     constructor(
@@ -114,6 +115,9 @@ const PodletClientHttpOutgoing = class PodletClientHttpOutgoing extends PassThro
         // When redirectable is true, this object should be populated with redirect information
         // such that a user can perform manual redirection
         this[_redirect] = null;
+
+        // When isfallback is true, content fetch has failed and fallback will be served instead
+        this[_isfallback] = false;
     }
 
     get [Symbol.toStringTag]() {
@@ -240,9 +244,21 @@ const PodletClientHttpOutgoing = class PodletClientHttpOutgoing extends PassThro
         this[_redirectable] = value;
     }
 
+    /**
+     * Boolean getter that indicates whether the client is responding with a content or fallback payload.
+     * @example
+     * ```
+     * if (outgoing.isFallback) console.log("Fallback!");
+     * ```
+     */
+    get isFallback() {
+        return this[_isfallback];
+    }
+
     pushFallback() {
         this.push(this[_manifest]._fallback);
         this.push(null);
+        this[_isfallback] = true;
     }
 };
 module.exports = PodletClientHttpOutgoing;

package/lib/resolver.content.js

@@ -81,6 +81,13 @@ module.exports = class PodletClientContentResolver {
                 );
                 outgoing.success = true;
                 outgoing.pushFallback();
+                outgoing.emit(
+                    'beforeStream',
+                    new Response({
+                        js: utils.filterAssets("fallback", outgoing.manifest.js),
+                        css: utils.filterAssets("fallback", outgoing.manifest.css),
+                    }),
+                );
                 resolve(outgoing);
                 return;
             }
@@ -101,6 +108,13 @@ module.exports = class PodletClientContentResolver {
                 );
                 outgoing.success = true;
                 outgoing.pushFallback();
+                outgoing.emit(
+                    'beforeStream',
+                    new Response({
+                        js: utils.filterAssets("fallback", outgoing.manifest.js),
+                        css: utils.filterAssets("fallback", outgoing.manifest.css),
+                    }),
+                );
                 resolve(outgoing);
                 return;
             }
@@ -181,6 +195,14 @@ module.exports = class PodletClientContentResolver {
                     );
                     outgoing.success = true;
                     outgoing.pushFallback();
+                    outgoing.emit(
+                        'beforeStream',
+                        new Response({
+                            headers: outgoing.headers,
+                            js: utils.filterAssets("fallback", outgoing.manifest.js),
+                            css: utils.filterAssets("fallback", outgoing.manifest.css),
+                        }),
+                    );
                     resolve(outgoing);
                     return;
                 }
@@ -228,8 +250,8 @@ module.exports = class PodletClientContentResolver {
                     'beforeStream',
                     new Response({
                         headers: outgoing.headers,
-                        js: outgoing.manifest.js,
-                        css: outgoing.manifest.css,
+                        js: utils.filterAssets("content", outgoing.manifest.js),
+                        css: utils.filterAssets("content", outgoing.manifest.css),
                         redirect: outgoing.redirect,
                     }),
                 );
@@ -273,8 +295,15 @@ module.exports = class PodletClientContentResolver {
                 );
 
                 outgoing.success = true;
-
                 outgoing.pushFallback();
+                outgoing.emit(
+                    'beforeStream',
+                    new Response({
+                        js: utils.filterAssets('fallback', outgoing.manifest.js),
+                        css: utils.filterAssets('fallback', outgoing.manifest.css),
+                    }),
+                );
+
                 resolve(outgoing);
             });
 

package/lib/resource.js

@@ -12,6 +12,7 @@ const util = require('util');
 const HttpOutgoing = require('./http-outgoing');
 const Response = require('./response');
 const Resolver = require('./resolver');
+const utils = require('./utils');
 
 const _resolver = Symbol('podium:client:resource:resolver');
 const _options = Symbol('podium:client:resource:options');
@@ -74,7 +75,7 @@ const PodiumClientResource = class PodiumClientResource {
 
         stream.pipeline(outgoing, to);
 
-        const { manifest, headers, redirect } = await this[_resolver].resolve(
+        const { manifest, headers, redirect, isFallback } = await this[_resolver].resolve(
             outgoing,
         );
 
@@ -85,8 +86,8 @@ const PodiumClientResource = class PodiumClientResource {
         return new Response({
             headers,
             content,
-            css: manifest.css,
-            js: manifest.js,
+            css: utils.filterAssets(isFallback ? "fallback" : "content", manifest.css),
+            js: utils.filterAssets(isFallback ? "fallback" : "content", manifest.js),
             redirect,
         });
     }

package/lib/utils.js

@@ -71,3 +71,34 @@ module.exports.validateIncoming = (incoming = {}) => {
     inc.context = incoming;
     return inc;
 };
+
+/**
+ * @typedef {import("@podium/utils").AssetCss | import("@podium/utils").AssetJs} Asset
+ */
+
+/**
+ * Filter assets array based on scope.
+ * If scope property is not present, asset will be included (backwards compatibility)
+ * If scope property is set to "all", asset will be included.
+ * If scope is set to "content" and asset scope property is set to "fallback", asset will not be included
+ * If scope is set to "fallback" and asset scope property is set to "content", asset will not be included
+ * @param {"content" | "fallback" | "all"} scope
+ * @param {Asset[]} assets
+ * @returns {Asset[]}
+ *
+ * @example
+ * ```
+ * // plain objects work
+ * const assets = filterAssets("content", [{..., scope: "content"}, {..., scope: "fallback"}]);
+ * // as do AssetJs and AssetCSS objects
+ * const assets = filterAssets("content", [new AssetCss(), new AssetCss()]);
+ * ```
+ */
+module.exports.filterAssets = (scope, assets) => {
+    // if undefined or null, passthrough
+    if (!assets) return assets;
+    // if a non array value is given, throw
+    if (!Array.isArray(assets)) throw new TypeError(`Asset definition must be of type array. Got ${typeof assets}`);
+    // filter the array of asset definitions to matchin scope or anything with all. Treat no scope the same as "all" for backwards compatibility.
+    return assets.filter(asset => !asset.scope || asset.scope === scope || asset.scope === "all");
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@podium/client",
-  "version": "4.5.35",
+  "version": "4.6.0",
   "main": "lib/client.js",
   "license": "MIT",
   "keywords": [
@@ -37,8 +37,8 @@
   "dependencies": {
     "@hapi/boom": "^9.0.0",
     "@metrics/client": "2.5.2",
-    "@podium/schemas": "4.1.34",
-    "@podium/utils": "4.4.41",
+    "@podium/schemas": "4.2.0",
+    "@podium/utils": "4.5.0",
     "abslog": "2.4.0",
     "http-cache-semantics": "^4.0.3",
     "lodash.clonedeep": "^4.5.0",