Merge pull request #351 from puzzle-js/feature/on-demand-fragments

Implement on demand client async fragments
puzzle-js · Jul 6, 2021 · 90da229 · 90da229
2 parents aac7792 + aa069e4
commit 90da229
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@puzzle-js/core",
-  "version": "3.44.3",
+  "version": "3.45.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "logo": "https://image.ibb.co/jM29on/puzzlelogo.png",
@@ -67,7 +67,7 @@
     "lint:ts:fix": "./node_modules/.bin/tslint -p ./tsconfig.json --fix"
   },
   "dependencies": {
-    "@puzzle-js/client-lib": "^1.4.6",
+    "@puzzle-js/client-lib": "^1.5.0",
     "@types/socket.io-client": "^1.4.32",
     "async": "^3.0.1",
     "cheerio": "^1.0.0-rc.2",

diff --git a/src/fragment.ts b/src/fragment.ts
@@ -183,6 +183,7 @@ export class FragmentStorefront extends Fragment {
     delete value.primary;
     delete value['client-async'];
     delete value['client-async-force'];
+    delete value['on-demand'];
     delete value.name;
     delete value.from;
     delete value.primary;
@@ -198,6 +199,7 @@ export class FragmentStorefront extends Fragment {
   static = false;
   clientAsync = false;
   clientAsyncForce = false;
+  onDemand = false;
   from: string;
   gatewayPath!: string;
   fragmentUrl: string | undefined;

diff --git a/src/resource-injector.ts b/src/resource-injector.ts
@@ -276,6 +276,7 @@ export default class ResourceInjector {
       chunked: fragment.config ? (fragment.shouldWait || (fragment.config.render.static || false)) : false,
       clientAsync: fragment.clientAsync,
       clientAsyncForce: fragment.clientAsyncForce,
+      onDemand: fragment.onDemand,
       asyncDecentralized: fragment.asyncDecentralized,
       attributes: fragment.attributes,
       source: fragment.attributes['source'] || fragment.assetUrl || fragment.fragmentUrl

diff --git a/src/template.ts b/src/template.ts
@@ -125,6 +125,7 @@ export class Template {
           this.fragments[fragment.attribs.name].shouldWait = true;
           this.fragments[fragment.attribs.name].clientAsync = true;
           this.fragments[fragment.attribs.name].clientAsyncForce = this.fragments[fragment.attribs.name].clientAsyncForce || typeof fragment.attribs['client-async-force'] !== "undefined";
+          this.fragments[fragment.attribs.name].onDemand = this.fragments[fragment.attribs.name].onDemand || typeof fragment.attribs['on-demand'] !== "undefined";
           this.fragments[fragment.attribs.name].asyncDecentralized = this.fragments[fragment.attribs.name].asyncDecentralized || typeof fragment.attribs['async-c2'] !== "undefined";
         }
       }

diff --git a/tests/page.spec.ts b/tests/page.spec.ts
@@ -52,6 +52,7 @@ describe('Page', () => {
             clientAsync: false,
             clientAsyncForce: false,
             asyncDecentralized: false,
+            onDemand: false,
             primary: false,
             shouldWait: false,
             from: "Browsing",
@@ -70,6 +71,7 @@ describe('Page', () => {
             clientAsync: false,
             clientAsyncForce: false,
             asyncDecentralized: false,
+            onDemand: false,
             shouldWait: false,
             from: "Browsing",
             static: false
@@ -87,6 +89,7 @@ describe('Page', () => {
             clientAsync: false,
             clientAsyncForce: false,
             asyncDecentralized: false,
+            onDemand: false,
             shouldWait: false,
             from: "Browsing",
             static: false

diff --git a/tests/template.spec.ts b/tests/template.spec.ts
@@ -47,6 +47,7 @@ describe('Template', () => {
             clientAsync: false,
             clientAsyncForce: false,
             asyncDecentralized: false,
+            onDemand: false,
             name: 'product',
             primary: false,
             shouldWait: false,
@@ -98,6 +99,7 @@ describe('Template', () => {
             clientAsync: false,
             clientAsyncForce: false,
             asyncDecentralized: false,
+            onDemand: false,
             name: 'product',
             primary: true,
             shouldWait: true,
@@ -132,6 +134,7 @@ describe('Template', () => {
             clientAsync: false,
             clientAsyncForce: false,
             asyncDecentralized: false,
+            onDemand: false,
             name: 'product',
             primary: false,
             shouldWait: false,
@@ -165,6 +168,7 @@ describe('Template', () => {
             clientAsync: false,
             clientAsyncForce: false,
             asyncDecentralized: false,
+            onDemand: false,
             name: 'product',
             primary: false,
             shouldWait: false,
@@ -194,6 +198,37 @@ describe('Template', () => {
             clientAsync: true,
             clientAsyncForce: true,
             asyncDecentralized: false,
+            onDemand: false,
+            name: 'product',
+            primary: false,
+            shouldWait: true,
+            from: "Browsing",
+            static: false
+          }
+        }
+      }
+    });
+  });
+
+  it('should parse fragment attribute on-demand', () => {
+    const template = new Template('<template><div><fragment from="Browsing" name="product" client-async on-demand></fragment></div></template>');
+    const dependencyList = template.getDependencies();
+    expect(dependencyList).to.deep.include({
+      gateways: {
+        Browsing: {
+          gateway: null,
+          ready: false
+        }
+      },
+      fragments: {
+        product: {
+          gateway: 'Browsing',
+          instance: {
+            "_attributes": {},
+            clientAsync: true,
+            clientAsyncForce: false,
+            onDemand: true,
+            asyncDecentralized: false,
             name: 'product',
             primary: false,
             shouldWait: true,
@@ -252,6 +287,7 @@ describe('Template', () => {
             clientAsync: false,
             clientAsyncForce: false,
             asyncDecentralized: false,
+            onDemand: false,
             name: 'product',
             primary: true,
             shouldWait: true,
@@ -292,6 +328,7 @@ describe('Template', () => {
             clientAsync: false,
             clientAsyncForce: false,
             asyncDecentralized: false,
+            onDemand: false,
             name: 'product',
             primary: false,
             shouldWait: true,
@@ -334,6 +371,7 @@ describe('Template', () => {
             clientAsync: false,
             clientAsyncForce: false,
             asyncDecentralized: false,
+            onDemand: false,
             name: 'product',
             primary: false,
             shouldWait: true,
@@ -440,6 +478,7 @@ describe('Template', () => {
             clientAsync: false,
             clientAsyncForce: false,
             asyncDecentralized: false,
+            onDemand: false,
             primary: false,
             shouldWait: true,
             from: "Browsing",