Add flag to disable data bindings when running bookshop/generate

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-<!-- 
+<!--
     Add changes to the Unreleased section during development.
     Do not change this header — the GitHub action that releases
     this project will edit this file and add the version header for you.
@@ -9,6 +9,9 @@
 
 ## Unreleased
 
+* Added a `--disable-bindings` flag to the `@bookshop/generate` command.
+  * This skips initializing the data panel overlays when live editing, which can significantly improve performance for complex sites.
+
 ## v3.11.0 (October 17, 2024)
 
 * Updated Bookshop's internal Hugo version from `v0.111.3` to `v0.136.1`.
@@ -325,9 +328,9 @@ the bookshop/generate npm package.
 See the [Bookshop 3.0 migration guide](https://github.com/CloudCannon/bookshop/blob/main/guides/migration.adoc) for more information.
 
 * **jekyll:** For data to be accessible when live editing, you will need to set
-`data_config: true` in your `cloudcannon.config.*` file. 
+`data_config: true` in your `cloudcannon.config.*` file.
 
-* **jekyll:** Some collection fields such as page.content 
+* **jekyll:** Some collection fields such as page.content
 and page.excerpt are no longer available when live editing.
 
 * **jekyll:** Data and collections are no longer accessible
@@ -607,4 +610,4 @@ This will take effect with the upcoming CloudCannon editor panels release.
 
 ## 2.0.0 (2021-10-05)
 
-* Initial stable release for Jekyll and Eleventy
+* Initial stable release for Jekyll and Eleventy

javascript-modules/generate/lib/live-connector.js

@@ -3,11 +3,12 @@ import fs from 'fs';
 import fastGlob from 'fast-glob';
 import chalk from 'chalk';
 
-const getLiveEditingConnector = () => {
+const getLiveEditingConnector = (options) => {
   return `
 <script>
 (function(){
     const bookshopLiveSetup = (CloudCannon) => {
+      ${options.disableBindings ? `window.bookshopDataBindings = false;` : ''}
       CloudCannon.enableEvents();
       CloudCannon?.setLoading?.("Loading Bookshop Live Editing");
       let triggeredLoad = false;
@@ -23,7 +24,7 @@ const getLiveEditingConnector = () => {
           }, 2000);
         }
       }, 12000);
-  
+
       const head = document.querySelector('head');
       const script = document.createElement('script');
       script.src = \`/_cloudcannon/bookshop-live.js\`;
@@ -46,7 +47,7 @@ const getLiveEditingConnector = () => {
       }
       head.appendChild(script);
     }
-  
+
     document.addEventListener('cloudcannon:load', function (e) {
       bookshopLiveSetup(e.detail.CloudCannon);
     });
@@ -69,7 +70,7 @@ export const hydrateLiveForSite = async (siteRoot, options) => {
       continue;
     }
 
-    contents = contents.replace('</body>', `${getLiveEditingConnector()}\n</body>`);
+    contents = contents.replace('</body>', `${getLiveEditingConnector(options)}\n</body>`);
 
     fs.writeFileSync(filePath, contents);
     connected += 1;
@@ -85,5 +86,8 @@ export const hydrateLiveForSite = async (siteRoot, options) => {
   if (skipped) {
     console.log(chalk.gray(`Skipped ${skipped} page${skipped === 1 ? '' : 's'} that didn't contain Bookshop components.`));
   }
+  if (options.disableBindings) {
+    console.log(chalk.green(`Disabled data binding panels when live editing`));
+  }
   return true;
 }

javascript-modules/generate/main.js

@@ -24,6 +24,7 @@ async function run() {
     program.option("-d, --dot", "Look for Bookshops inside . directories");
     program.option("--skip-live", "Don't build live editing JS or add live editing scripts to HTML");
     program.option("--skip-components", "Don't build the component browser JS or add component browser scripts to HTML");
+    program.option("--disable-bindings", "Don't create data binding panels when live editing");
     program.parse(process.argv);
     const options = program.opts();
 

javascript-modules/integration-tests/features/generate/script_generation.feature

@@ -46,10 +46,10 @@ Feature: Bookshop Structure Generation
     And stdout should contain "Added live editing to 1 page containing Bookshop components"
     And stdout should contain "Built Bookshop live javascript to site"
     And stdout should contain "bookshop-live.js"
-    And site/public/index.html should leniently contain each row: 
+    And site/public/index.html should leniently contain each row:
       | text |
       | script.src = `/_cloudcannon/bookshop-live.js`; |
-    And site/public/_cloudcannon/bookshop-live.js should leniently contain each row: 
+    And site/public/_cloudcannon/bookshop-live.js should leniently contain each row:
       | text |
       | {{ .card_text }} |
 
@@ -58,4 +58,19 @@ Feature: Bookshop Structure Generation
     Then stderr should be empty
     And stdout should contain "Skipping live editing generation"
     And site/public/index.html should not contain the text "_cloudcannon"
-    And site/public/_cloudcannon/bookshop-live.js should not exist
+    And site/public/_cloudcannon/bookshop-live.js should not exist
+
+  Scenario: Can skip data binding
+    When I run "npm run generate-no-bindings --scripts-prepend-node-path" in the . directory
+    Then stderr should be empty
+    And stdout should contain "Added live editing to 1 page containing Bookshop components"
+    And stdout should contain "Disabled data binding panels when live editing"
+    And stdout should contain "Built Bookshop live javascript to site"
+    And stdout should contain "bookshop-live.js"
+    And site/public/index.html should leniently contain each row:
+      | text |
+      | script.src = `/_cloudcannon/bookshop-live.js`; |
+      | window.bookshopDataBindings = false; |
+    And site/public/_cloudcannon/bookshop-live.js should leniently contain each row:
+      | text |
+      | {{ .card_text }} |

javascript-modules/integration-tests/support/starters/generate/package.json

@@ -4,10 +4,11 @@
   "scripts": {
     "start": "bookshop-generate",
     "generate-no-live": "bookshop-generate --skip-live",
+    "generate-no-bindings": "bookshop-generate --disable-bindings",
     "cc-hugo": "cloudcannon-hugo --baseURL /",
     "cc-astro": "cd site && cloudcannon-reader --output dist"
   },
   "devDependencies": {
     "@bookshop/generate": "file:../../../javascript-modules/generate"
   }
-}
+}