Merge pull request #400 from yunusemredilber/feature/improve-default-…

…fragment-behavior Improve default fragment behavior
puzzle-js · Dec 22, 2022 · 62b73a5 · 62b73a5
2 parents 5b3ba5a + 5987609
commit 62b73a5
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,10 +4,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-# [3.60.10] - 19-12-2022
+# [3.61.0] - 21-12-2022
+### Changed
+- Default behavior for fragments changed as *shouldWait enabled*. (Unstable `chunked` attribute can be used to force previous behavior)
+- Improvements on the fragment `if` attribute
+
+# [3.60.0] - 19-12-2022
 ### Changed
 - Template dependencies recognition and structure refactor.
-- Improvements on the fragment if attribute
+- Improvements on the fragment `if` attribute
 
 # [3.52.0] - 22-11-2022
 ### Changed

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@puzzle-js/core",
-  "version": "3.60.0",
+  "version": "3.61.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "logo": "https://image.ibb.co/jM29on/puzzlelogo.png",

diff --git a/src/template.ts b/src/template.ts
@@ -111,23 +111,19 @@ export class Template {
           gateways[from].fragments[fragmentName].static = true;
         }
       } else {
+        gateways[from].fragments[fragmentName].shouldWait = typeof fragment.attribs.chunked === 'undefined';
+
         if (!gateways[from].fragments[fragmentName].primary) {
           if (typeof fragment.attribs.primary !== 'undefined') {
             if (primaryName != null && primaryName !== fragment.attribs.name) throw new PuzzleError(ERROR_CODES.MULTIPLE_PRIMARY_FRAGMENTS);
             primaryName = fragment.attribs.name;
             gateways[from].fragments[fragmentName].primary = true;
-            gateways[from].fragments[fragmentName].shouldWait = true;
           }
         }
 
-        if (!gateways[from].fragments[fragmentName].shouldWait) {
-          gateways[from].fragments[fragmentName].shouldWait = typeof fragment.attribs.shouldwait !== 'undefined' || (fragment.parent && fragment.parent.name === 'head') || false;
-        }
-
         if (gateways[from].fragments[fragmentName].clientAsync || (typeof fragment.attribs['client-async'] !== "undefined" || typeof fragment.attribs['async-c2'] !== "undefined")) {
           gateways[from].fragments[fragmentName].attributes = Object.assign(gateways[from].fragments[fragmentName].attributes, fragment.attribs);
           gateways[from].fragments[fragmentName].primary = false;
-          gateways[from].fragments[fragmentName].shouldWait = true;
           gateways[from].fragments[fragmentName].clientAsync = true;
           gateways[from].fragments[fragmentName].clientAsyncForce = gateways[from].fragments[fragmentName].clientAsyncForce || typeof fragment.attribs['client-async-force'] !== "undefined";
           gateways[from].fragments[fragmentName].criticalCss = gateways[from].fragments[fragmentName].criticalCss || typeof fragment.attribs['critical-css'] !== "undefined";
@@ -336,7 +332,7 @@ export class Template {
 
       let fragmentContent;
       if ((typeof attributes.if === "boolean" && !attributes.if) || attributes.if === "false") {
-        fragmentContent = "";
+        return;
       } else {
         fragmentContent = await waitedFragmentReplacement.fragment.getContent(attributes, req);
       }

diff --git a/tests/integration/sf.spec.ts b/tests/integration/sf.spec.ts
@@ -172,7 +172,7 @@ describe('Storefront', () => {
             pages: [
                 {
                     url: '/',
-                    html: '<template><div><html><head></head><body><fragment from="Browsing" name="product"/></div></body></html></template>'
+                    html: '<template><div><html><head></head><body><fragment from="Browsing" name="product" chunked /></div></body></html></template>'
                 }
             ]
         } as any);
@@ -309,7 +309,7 @@ describe('Storefront', () => {
             pages: [
                 {
                     url: ['/', '/detail'],
-                    html: `<template><html><head></head><body><fragment from="Browsing" name="${fragment.name}" primary/></div></body></html></template>`
+                    html: `<template><html><head></head><body><fragment from="Browsing" name="${fragment.name}" primary /></div></body></html></template>`
                 }
             ]
         } as any);

diff --git a/tests/page.spec.ts b/tests/page.spec.ts
@@ -59,7 +59,7 @@ describe('Page', () => {
                 criticalCss: false,
                 onDemand: false,
                 primary: false,
-                shouldWait: false,
+                shouldWait: true,
                 from: "Browsing",
                 static: false
               }
@@ -78,7 +78,7 @@ describe('Page', () => {
                 asyncDecentralized: false,
                 criticalCss: false,
                 onDemand: false,
-                shouldWait: false,
+                shouldWait: true,
                 from: "Browsing",
                 static: false
               }
@@ -97,7 +97,7 @@ describe('Page', () => {
                 asyncDecentralized: false,
                 criticalCss: false,
                 onDemand: false,
-                shouldWait: false,
+                shouldWait: true,
                 from: "Browsing",
                 static: false
               }

diff --git a/tests/system/system.spec.ts b/tests/system/system.spec.ts
@@ -65,7 +65,7 @@ describe('System Tests', () => {
       pages: [
         {
           url: '/',
-          html: '<template><html><head></head><body><fragment from="Browsing" name="example"></fragment></body></html></template>'
+          html: '<template><html><head></head><body><fragment from="Browsing" name="example" chunked></fragment></body></html></template>'
         }
       ],
       serverOptions: {
@@ -101,7 +101,7 @@ describe('System Tests', () => {
         });
     });
   });
-  
+
 
   it('should render single static fragment using HTTPS', (done) => {
     const gatewayConfigurator = new GatewayConfigurator();
@@ -158,7 +158,7 @@ describe('System Tests', () => {
       pages: [
         {
           url: '/',
-          html: '<template><html><head></head><body><fragment from="Browsing" name="example"></fragment></body></html></template>'
+          html: '<template><html><head></head><body><fragment from="Browsing" name="example" chunked></fragment></body></html></template>'
         }
       ],
       serverOptions: {

diff --git a/tests/template.spec.ts b/tests/template.spec.ts
@@ -49,7 +49,7 @@ describe('Template', () => {
                 onDemand: false,
                 name: 'product',
                 primary: false,
-                shouldWait: false,
+                shouldWait: true,
                 from: "Browsing",
                 static: false
               }
@@ -175,7 +175,7 @@ describe('Template', () => {
                 onDemand: false,
                 name: 'product',
                 primary: false,
-                shouldWait: false,
+                shouldWait: true,
                 from: "Browsing",
                 static: false
               }
@@ -210,7 +210,7 @@ describe('Template', () => {
                 onDemand: false,
                 name: 'product',
                 primary: false,
-                shouldWait: false,
+                shouldWait: true,
                 from: "Browsing",
                 static: false
               }
@@ -744,7 +744,7 @@ describe('Template', () => {
     const template = new Template(`
                 <template>
                     <div>
-                        <fragment from="Browsing" name="product" if="${false}"> </fragment>
+                        <fragment from="Browsing" name="product" if="${false}" chunked> </fragment>
                     </div>
                 </template>
             `);
@@ -1329,7 +1329,7 @@ describe('Template', () => {
                             </head>
                             <body>
                             <div>
-                                <fragment from="Browsing" name="product"></fragment>
+                                <fragment from="Browsing" name="product" chunked></fragment>
                             </div>
                             </body>
                         </html>
@@ -1399,7 +1399,7 @@ describe('Template', () => {
                             </head>
                             <body>
                             <div>
-                                <fragment from="Browsing" name="product"></fragment>
+                                <fragment from="Browsing" name="product" chunked></fragment>
                             </div>
                             </body>
                         </html>
@@ -1553,7 +1553,7 @@ describe('Template', () => {
                                 <div>
                                     <fragment from="Browsing" name="product"></fragment>
                                 </div>
-                                <fragment from="Browsing" name="footer"></fragment>
+                                <fragment from="Browsing" name="footer" chunked></fragment>
                             </body>
                         </html>
                     </template>
@@ -1644,12 +1644,12 @@ describe('Template', () => {
                                 
                             </head>
                             <body>
-                                <fragment from="Browsing" name="product" partial="header"></fragment>
-                                <fragment from="Browsing" name="product"></fragment>
+                                <fragment from="Browsing" name="product" partial="header" chunked></fragment>
+                                <fragment from="Browsing" name="product" chunked></fragment>
                                 <div>
-                                    <fragment from="Browsing" name="product" partial="side"></fragment>
+                                    <fragment from="Browsing" name="product" partial="side" chunked></fragment>
                                 </div>
-                                <fragment from="Browsing" name="product" partial="footer"></fragment>
+                                <fragment from="Browsing" name="product" partial="footer" chunked></fragment>
                             </body>
                         </html>
                     </template>