Add support for external libs

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');
+    ```

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>