Adding esbuild script for plain javascript integration

README.md

@@ -30,6 +30,7 @@ The library includes functions for rendering common ACCESS user interface compon
 
 ## Example
 
+### ES6
 ```html
 <div id="universal-menus"></div>
 <div id="header"></div>
@@ -124,3 +125,94 @@ The library includes functions for rendering common ACCESS user interface compon
   footer({ target: document.getElementById("footer") });
 </script>
 ```
+
+### Plain Javascript
+
+The components will be created for those defined in window.ACCESS_CI_UI_CONFIG. As long as each component 
+has at least {} or true as its value, the components will be generated successfully.
+
+```html
+<div id="universal-menus"></div>
+<div id="header"></div>
+<div id="site-menus"></div>
+<div id="main" class="container">
+  <div id="body">
+    <h1>Page Title</h1>
+    <h2>First Section</h2>
+    <h2>Second Section</h2>
+    <h2>Third Section</h2>
+  </div>
+  <div id="table-of-contents"></div>
+</div>
+<div id="footer-menus"></div>
+<div id="footer"></div>
+<script>
+
+  const siteItems = [
+    {
+      name: "One",
+      items: [
+        {
+          name: "Item A",
+          href: "/one/a",
+        },
+        {
+          name: "Item B",
+          href: "/one/b",
+        },
+        {
+          name: "Item C",
+          href: "/one/c",
+        },
+      ],
+    },
+    {
+      name: "Two",
+      items: [
+        {
+          name: "Item A",
+          href: "/two/a",
+        },
+        {
+          name: "Item B",
+          href: "/two/b",
+        },
+      ],
+    },
+    {
+      name: "Three",
+      href: "/three",
+    },
+  ];
+
+  window.ACCESS_CI_UI_CONFIG = {
+      universalMenus: {
+        loginUrl: "/login",
+        logoutUrl: "/logout",
+        siteName: "Allocations",
+        targetId: "universal-menus"
+      },
+      header: {
+        siteName: "Allocations",
+        targetId: "header"
+      },
+      siteMenus: {
+        items: siteItems,
+        siteName: "Allocations",
+        targetId: "site-menus"
+      },
+      tableOfContents: {
+        headings: document.querySelectorAll("#body h1, #body h2"),
+        targetId: "table-of-contents",
+      },
+      footerMenus: {
+        items: siteItems,
+        targetId: "footer-menus"
+      },
+      footer: {
+        targetId: "footer"
+      }
+    }
+</script>
+<script src="https://cdn.jsdelivr.net/gh/access-ci-org/access-ci-ui@<version>/dist/access-ci-ui.esbuild.js"></script>
+```

package.json

@@ -19,7 +19,10 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "preversion": "",
+    "version": "npm run build && esbuild ./dist/access-ci-ui.js --bundle --outfile=./dist/access-ci-ui.esbuild.js && git add -f -A dist",
+    "postversion": "git push && git push --tags"
   },
   "dependencies": {
     "preact": "^10.24.1"

src/index.jsx

@@ -5,6 +5,52 @@ import { loginMenuItem, myAccessMenuItem, universalMenuItems } from "./items";
 import { TableOfContents } from "./table-of-contents";
 import { renderShadow } from "./utils";
 
+const windowParamConfig = {...window.ACCESS_CI_UI_CONFIG};
+console.log("windowParamConfig", windowParamConfig)
+
+const paramConfig = {
+  universalMenus: {
+    loginUrl: "/login",
+    logoutUrl: "/logout",
+    siteName: "Allocations",
+    targetId: "universal-menus",
+    ...windowParamConfig.universalMenus
+  },
+  header: {
+    siteName: "Allocations",
+    targetId: "header",
+    ...windowParamConfig.header
+  },
+  siteMenus: {
+    items: [],
+    siteName: "Allocations",
+    targetId: "site-menus",
+    ...windowParamConfig.siteMenus
+  },
+  tableOfContents: {
+    headings: document.querySelectorAll("#body h1, #body h2"),
+    targetId: "table-of-contents",
+    ...windowParamConfig.tableOfContents
+  },
+  footerMenus: {
+    items: [],
+    targetId: "footer-menus",
+    ...windowParamConfig.footerMenus
+  },
+  footer: {
+    targetId: "footer",
+    ...windowParamConfig.footer
+  }
+};
+
+console.log("paramConfig", paramConfig)
+
+for (let key in paramConfig) {
+  if (!paramConfig[key].target) {
+    paramConfig[key].target = document.getElementById(paramConfig[key].targetId)
+  }
+}
+
 const footer = (params = {}) => {
   renderShadow(<Footer {...params} />, params.target);
 };
@@ -67,6 +113,31 @@ const footerMenus = ({ items, target }) =>
 const tableOfContents = ({ headings = [], target }) =>
   renderShadow(<TableOfContents headings={headings} />, target);
 
+// Create the components if the config variable is defined only.
+if(window.ACCESS_CI_UI_CONFIG.footer) {
+  footer(paramConfig.footer);
+}
+
+if(window.ACCESS_CI_UI_CONFIG.header) {
+  header(paramConfig.header);
+}
+
+if(window.ACCESS_CI_UI_CONFIG.universalMenus) {
+  universalMenus(paramConfig.universalMenus);
+}
+
+if(window.ACCESS_CI_UI_CONFIG.footerMenus) {
+  footerMenus(paramConfig.footerMenus);
+}
+
+if(window.ACCESS_CI_UI_CONFIG.siteMenus) {
+  siteMenus(paramConfig.siteMenus);
+}
+
+if(window.ACCESS_CI_UI_CONFIG.tableOfContents) {
+  tableOfContents(paramConfig.tableOfContents);
+}
+
 export {
   footer,
   header,