Merge pull request #29 from puzzle-js/feature/client-async-force

Implement client async forced fragments

Author: cihadhoruzoglu

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@puzzle-js/client-lib",
   "main": "dist/index.js",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "author": "<emre.kul@trendyol.com>",
   "license": "MIT",
   "repository": {

package.json

@@ -31,6 +31,11 @@ export class Core extends Module {
       });
     }
 
+    const forcedFragments = Core.__pageConfiguration.fragments.filter(i => i.clientAsync && i.clientAsyncForce);
+    if (forcedFragments.length) {
+      forcedFragments.forEach(fragment => Core.renderAsyncFragment(fragment.name));
+    }
+
     if (this.isIntersectionObserverSupported()) {
       const asyncFragments = Core.__pageConfiguration.fragments.some(i => i.clientAsync);
 

src/core.ts

@@ -31,6 +31,7 @@ export interface IPageFragmentConfig {
   name: string;
   chunked: boolean;
   clientAsync: boolean;
+  clientAsyncForce: boolean | undefined;
   asyncDecentralized: boolean;
   attributes: { [name: string]: string };
   source: string | undefined;

src/types.ts

@@ -202,6 +202,60 @@ describe('Module - Core', () => {
         },
         chunked: true,
         clientAsync: true,
+        clientAsyncForce: undefined,
+        source: undefined,
+        asyncDecentralized: false
+      }],
+      page: 'page',
+      peers: []
+    } as IPageLibConfiguration;
+
+    const fragmentContainer = global.window.document.createElement('div');
+    fragmentContainer.setAttribute('puzzle-fragment', 'test');
+    global.window.document.body.appendChild(fragmentContainer);
+
+    const fetchStub = global.fetch as SinonStub;
+    const stubAsyncRenderResponse = sandbox.stub(Core as any, "asyncRenderResponse").resolves();
+
+    Core.config(JSON.stringify(config));
+    await Core.renderAsyncFragment('test');
+    await Core.renderAsyncFragment('test');
+    
+    expect(fetchStub.calledOnce).to.eq(true);
+    expect(fetchStub.getCall(0).lastArg.headers).to.haveOwnProperty("originalurl");
+    expect(stubAsyncRenderResponse.calledOnce).to.eq(true);
+  });
+
+  it('should render forced async fragment', async () => {
+    const assets = [
+      {
+        name: 'bundle1',
+        dependent: ['vendor1'],
+        preLoaded: false,
+        link: 'bundle1.js',
+        fragment: 'test',
+        loadMethod: RESOURCE_LOADING_TYPE.ON_PAGE_RENDER,
+        type: RESOURCE_TYPE.JS
+      }
+    ] as IPageLibAsset[];
+    const dependencies = [
+      {
+        name: 'vendor1',
+        link: 'vendor1.js',
+        preLoaded: false
+      }
+    ] as IPageLibDependency[];
+    const config = {
+      dependencies,
+      assets,
+      fragments: [{
+        name: 'test',
+        attributes: {
+          if: "false"
+        },
+        chunked: true,
+        clientAsync: true,
+        clientAsyncForce: true,
         source: undefined,
         asyncDecentralized: false
       }],