From 2946a3264bb58291115dfe68d96f07a18f18645d Mon Sep 17 00:00:00 2001
From: Satya Deep Maheshwari <satyam@adobe.com>
Date: Sun, 24 Sep 2023 21:50:05 +0530
Subject: [PATCH] Add support for external libs

---
 README.md          | 41 +++++++++++++++++++++++++++++++++++++++++
 scripts/scripts.js | 21 +++++++++++----------
 2 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 6ee45969..cdc1e3aa 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,9 @@
 # Sunstar Website
+
 Franklin project for https://www.sunstar.com/
 
 ## Environments
+
 - Preview: https://main--sunstar--hlxsites.hlx.page/
 - Live: https://main--sunstar--hlxsites.hlx.live/
 - Edit: https://adobe.sharepoint.com/:f:/r/sites/HelixProjects/Shared%20Documents/sites/sunstar/sunstar
@@ -23,3 +25,42 @@ npm run lint
 1. Install the [Helix CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/helix-cli`
 1. Start Franklin Proxy: `hlx up` (opens your browser at `http://localhost:3000`)
 1. Open the `{repo}` directory in your favorite IDE and start coding :)
+
+## Adding external JS libraries
+
+You can add external JS libraries to your project but you need to make sure to copy over the files to be used in front end code in browser to the [ext-libs](./ext-libs/) folder. This would make them avaialble for execution in the client browser.
+
+Here are the steps to follow:
+
+1. Add the JS library to the [package.json](./package.json) file in the `dependencies` section. For example, to add the `jslinq` library, add the following line to the [package.json](./package.json) file:
+
+    ```
+    "dependencies": {
+        "jslinq": "^1.0.22"
+    }
+    ```
+
+2. Run `npm install` to install the library in the [node_modules](./node_modules) folder.
+
+3. Run
+    ```
+    npm run copy node_modules/jslinq/build ext-libs jslinq
+    ```
+    to copy the library from the [node_modules](./node_modules) folder to the [ext-libs](./ext-libs) folder.
+
+4. Add a mapping in [.ext-libs-mapping.json](./.ext-libs-mapping.json) file to map the library to its respective location on [ext-libs](./ext-libs/) folder.
+
+    For example, to map the `jslinq` library, add the following line to the [.ext-libs-mapping.json](./.ext-libs-mapping.json) file:
+
+    ```
+        {
+            "name": "jslinq",
+            "source": "node_modules/jslinq/build",
+            "target": "ext-libs/jslinq"
+        }
+    ```
+5. THe library is now available in the [ext-libs](./ext-libs/) folder and can be used in the front end code in the browser. For e.g. , add the following in the fron end code to load the `jslinq` library:
+
+    ```
+    await loadScript('/ext-libs/jslinq/jslinq.min.js');
+    ```
\ No newline at end of file
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 51a6ea65..e646f0c7 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -332,16 +332,6 @@ export async function fetchIndex(indexFile, sheet, pageSize = 500) {
   return newIndex;
 }
 
-// export async function queryIndex(select, where, orderBy, rowCount, sheet) {
-//   let index = await fetchIndex('query-index', sheet);
-//   // Fetch the index until it is complete
-//   while (!index.complete) {
-//     // eslint-disable-next-line no-await-in-loop
-//     index = await fetchIndex('query-index', sheet);
-//   }
-//   const result = query(select, index.data, where, orderBy, rowCount);
-//   return result;
-// }
 /**
  * Loads everything that happens a lot later,
  * without impacting the user experience.
@@ -450,6 +440,17 @@ export async function loadScript(url, attrs = {}) {
   return loadingPromise;
 }
 
+export async function queryIndex(sheet) {
+  await loadScript('/ext-libs/jslinq/jslinq.min.js');
+  const index = await fetchIndex('query-index', sheet);
+  // Fetch the index until it is complete
+  while (!index.complete) {
+    // eslint-disable-next-line no-await-in-loop
+    await fetchIndex('query-index', sheet);
+  }
+  const { jslinq } = window;
+  return jslinq(index.data);
+}
 /**
  * Add a paging widget to the div. The paging widget looks like this:
  * <pre><code>