Shorted import func arg to deps + parent obj to imports ↞ [auto-s…

…ync from https://github.com/KudoAI/chatgpt.js-chrome-starter]
KudoAI · Dec 26, 2024 · 74ebc7c · 74ebc7c
1 parent 1cf590c
commit 74ebc7c
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 33 deletions.
diff --git a/starters/chrome/extension/components/icons.js b/starters/chrome/extension/components/icons.js
@@ -1,9 +1,9 @@
 // Requires lib/dom.js
 
 window.icons = {
-    dependencies: {
-        import(dependencies) { // { app }
-            for (const depName in dependencies) this[depName] = dependencies[depName] }
+    imports: {
+        import(deps) { // { app }
+            for (const depName in deps) this[depName] = deps[depName] }
     },
 
     create({ name, size = 16, width, height, ...additionalAttrs }) {
@@ -26,6 +26,6 @@ window.icons = {
 
     questionMark: {
         type: 'png',
-        get src() { return `${icons.dependencies.app.urls.assetHost}@b5551ac/images/icons/question-mark/icon16.png` }
+        get src() { return `${icons.imports.app.urls.assetHost}@b5551ac/images/icons/question-mark/icon16.png` }
     }
 };
diff --git a/starters/chrome/extension/components/modals.js b/starters/chrome/extension/components/modals.js
@@ -2,11 +2,11 @@
 
 window.modals = {
     stack: [], // of types of undismissed modals
-    get class() { return `${this.dependencies.app.cssPrefix}-modal` },
+    get class() { return `${this.imports.app.cssPrefix}-modal` },
 
-    dependencies: {
-        import(dependencies) { // { app, env }
-            for (const depName in dependencies) this[depName] = dependencies[depName] }
+    imports: {
+        import(deps) { // { app, env }
+            for (const depName in deps) this[depName] = deps[depName] }
     },
 
     alert(title = '', msg = '', btns = '', checkbox = '', width = '') { // generic one from chatgpt.alert()
@@ -39,37 +39,37 @@ window.modals = {
               + 'font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto,'
                   + 'Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif ;'
               + 'padding: 20px 25px 24px 25px !important ; font-size: 20px ;'
-              + `color: ${ this.dependencies.env.ui.scheme == 'dark' ? 'white' : 'black' } !important ;`
+              + `color: ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'black' } !important ;`
               + `background-image: linear-gradient(180deg, ${
-                     this.dependencies.env.ui.scheme == 'dark' ? '#99a8a6 -200px, black 200px'
+                     this.imports.env.ui.scheme == 'dark' ? '#99a8a6 -200px, black 200px'
                                                             : '#b6ebff -296px, white 171px' }) }`
           + `.${this.class} [class*=modal-close-btn] {`
               + 'position: absolute !important ; float: right ; top: 14px !important ; right: 16px !important ;'
               + 'cursor: pointer ; width: 33px ; height: 33px ; border-radius: 20px }'
           + `.${this.class} [class*=modal-close-btn] svg { height: 10px }`
           + `.${this.class} [class*=modal-close-btn] path {`
-              + `${ this.dependencies.env.ui.scheme == 'dark' ? 'stroke: white ; fill: white'
+              + `${ this.imports.env.ui.scheme == 'dark' ? 'stroke: white ; fill: white'
                                                            : 'stroke: #9f9f9f ; fill: #9f9f9f' }}`
-          + ( this.dependencies.env.ui.scheme == 'dark' ?  // invert dark mode hover paths
+          + ( this.imports.env.ui.scheme == 'dark' ?  // invert dark mode hover paths
                 `.${this.class} [class*=modal-close-btn]:hover path { stroke: black ; fill: black }` : '' )
           + `.${this.class} [class*=modal-close-btn]:hover { background-color: #f2f2f2 }` // hover underlay
           + `.${this.class} [class*=modal-close-btn] svg { margin: 11.5px }` // center SVG for hover underlay
           + `.${this.class} a {`
-              + `color: #${ this.dependencies.env.ui.scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }`
+              + `color: #${ this.imports.env.ui.scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }`
           + `.${this.class} h2 { font-weight: bold }`
           + `.${this.class} button {`
               + 'font-size: 14px ; text-transform: uppercase ;' // shrink/uppercase labels
               + 'border-radius: 0 !important ;' // square borders
               + 'transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out ;' // smoothen hover fx
               + 'cursor: pointer !important ;' // add finger cursor
-              + `border: 1px solid ${ this.dependencies.env.ui.scheme == 'dark' ? 'white' : 'black' } !important ;`
+              + `border: 1px solid ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'black' } !important ;`
               + 'padding: 8px !important ; min-width: 102px }' // resize
           + `.${this.class} button:hover {` // add zoom, re-scheme
               + 'transform: scale(1.055) ; color: black !important ;'
-              + `background-color: #${ this.dependencies.env.ui.scheme == 'dark' ? '00cfff' : '9cdaff' } !important }`
-          + ( !this.dependencies.env.browser.isMobile ?
+              + `background-color: #${ this.imports.env.ui.scheme == 'dark' ? '00cfff' : '9cdaff' } !important }`
+          + ( !this.imports.env.browser.isMobile ?
                 `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
-          + `.about-em { color: ${ this.dependencies.env.ui.scheme == 'dark' ? 'white' : 'green' } !important }`
+          + `.about-em { color: ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'green' } !important }`
         )
     },
 
@@ -94,13 +94,13 @@ window.modals = {
 
         // Show modal
         const aboutModal = this.alert(
-            `${this.dependencies.app.symbol} ${chrome.runtime.getManifest().name}`, // title
-            `🏷️ Version: <span class="about-em">${this.dependencies.app.version}</span>\n` // msg
+            `${this.imports.app.symbol} ${chrome.runtime.getManifest().name}`, // title
+            `🏷️ Version: <span class="about-em">${this.imports.app.version}</span>\n` // msg
                 + '⚡ Powered by: '
-                    + `<a href="${this.dependencies.app.urls.chatgptJS}" target="_blank" rel="noopener">chatgpt.js</a>\n`
+                    + `<a href="${this.imports.app.urls.chatgptJS}" target="_blank" rel="noopener">chatgpt.js</a>\n`
                 + '📜 Open source code: '
-                    + `<a href="${this.dependencies.app.urls.gitHub}" target="_blank" rel="nopener">`
-                        + this.dependencies.app.urls.gitHub + '</a>',
+                    + `<a href="${this.imports.app.urls.gitHub}" target="_blank" rel="nopener">`
+                        + this.imports.app.urls.gitHub + '</a>',
             [ function getSupport(){}, function rateUs(){}, function moreAiExtensions(){} ], // button labels
             '', 656 // modal width
         )
@@ -110,7 +110,7 @@ window.modals = {
             'text-align: center ; font-size: 51px ; line-height: 46px ; padding: 15px 0' )
         aboutModal.querySelector('p').style.cssText = (
             'text-align: center ; overflow-wrap: anywhere ;'
-          + `margin: ${ this.dependencies.env.browser.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
+          + `margin: ${ this.imports.env.browser.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
 
         // Hack buttons
         aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
@@ -121,9 +121,9 @@ window.modals = {
             const btnClone = btn.cloneNode(true)
             btn.parentNode.replaceChild(btnClone, btn) ; btn = btnClone
             btn.onclick = () => this.safeWinOpen(
-                btn.textContent == 'Get Support' ? `${modals.dependencies.app.urls.gitHub}/issues`
-              : btn.textContent == 'Rate Us' ? `${modals.dependencies.app.urls.gitHub}/discussions`
-              : modals.dependencies.app.urls.relatedExtensions
+                btn.textContent == 'Get Support' ? `${modals.imports.app.urls.gitHub}/issues`
+              : btn.textContent == 'Rate Us' ? `${modals.imports.app.urls.gitHub}/discussions`
+              : modals.imports.app.urls.relatedExtensions
             )
 
             // Prepend emoji

diff --git a/starters/chrome/extension/content.js b/starters/chrome/extension/content.js
@@ -15,8 +15,8 @@
     const { app } = await chrome.storage.sync.get('app')
 
     // Export DEPENDENCIES to imported resources
-    dom.dependencies.import({ env }) // for env.ui.scheme
-    modals.dependencies.import({ app, env }) // for app data + env.ui.scheme
+    dom.imports.import({ env }) // for env.ui.scheme
+    modals.imports.import({ app, env }) // for app data + env.ui.scheme
 
     // Add CHROME MSG listener
     chrome.runtime.onMessage.addListener(req => { // from service-worker.js + popup/index.html

diff --git a/starters/chrome/extension/lib/dom.js b/starters/chrome/extension/lib/dom.js
@@ -1,8 +1,8 @@
 window.dom = {
 
-    dependencies: {
-        import(dependencies) { // { env) }
-            for (const depName in dependencies) this[depName] = dependencies[depName] }
+    imports: {
+        import(deps) { // { env) }
+            for (const depName in deps) this[depName] = deps[depName] }
     },
 
     create: {
@@ -27,7 +27,7 @@ window.dom = {
           + 'z-index: -1'; // allow interactive elems to be clicked
         ['sm', 'med', 'lg'].forEach(starSize => {
             const starsDiv = document.createElement('div')
-            starsDiv.id = `${ this.dependencies.env.ui.scheme == 'dark' ? 'white' : 'black' }-stars-${starSize}`
+            starsDiv.id = `${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'black' }-stars-${starSize}`
             starsDivsContainer.append(starsDiv)
         })
         targetNode.prepend(starsDivsContainer)

diff --git a/starters/chrome/extension/popup/controller.js b/starters/chrome/extension/popup/controller.js
@@ -10,7 +10,7 @@
 
     // Import APP data
     const { app } = await chrome.storage.sync.get('app')
-    icons.dependencies.import({ app }) // for src's using app.urls.assetHost
+    icons.imports.import({ app }) // for src's using app.urls.assetHost
 
     // Define FUNCTIONS