Flatten the file structute of extension pkg

thetarnav · Dec 19, 2024 · c897ba7 · c897ba7
1 parent 4081416
commit c897ba7
Show file tree

Hide file tree

Showing 25 changed files with 56 additions and 82 deletions.
diff --git a/...extension/assets/icons/solid-gray-128.png → packages/extension/public/solid-gray-128.png b/...extension/assets/icons/solid-gray-128.png → packages/extension/public/solid-gray-128.png
diff --git a/.../extension/assets/icons/solid-gray-16.png → packages/extension/public/solid-gray-16.png b/.../extension/assets/icons/solid-gray-16.png → packages/extension/public/solid-gray-16.png
diff --git a/.../extension/assets/icons/solid-gray-32.png → packages/extension/public/solid-gray-32.png b/.../extension/assets/icons/solid-gray-32.png → packages/extension/public/solid-gray-32.png
diff --git a/.../extension/assets/icons/solid-gray-48.png → packages/extension/public/solid-gray-48.png b/.../extension/assets/icons/solid-gray-48.png → packages/extension/public/solid-gray-48.png
diff --git a/...tension/assets/icons/solid-normal-128.png → ...ges/extension/public/solid-normal-128.png b/...tension/assets/icons/solid-normal-128.png → ...ges/extension/public/solid-normal-128.png
diff --git a/...xtension/assets/icons/solid-normal-16.png → ...ages/extension/public/solid-normal-16.png b/...xtension/assets/icons/solid-normal-16.png → ...ages/extension/public/solid-normal-16.png
diff --git a/...xtension/assets/icons/solid-normal-32.png → ...ages/extension/public/solid-normal-32.png b/...xtension/assets/icons/solid-normal-32.png → ...ages/extension/public/solid-normal-32.png
diff --git a/...xtension/assets/icons/solid-normal-48.png → ...ages/extension/public/solid-normal-48.png b/...xtension/assets/icons/solid-normal-48.png → ...ages/extension/public/solid-normal-48.png
diff --git a/packages/extension/shared/icons.ts b/packages/extension/shared/icons.ts
diff --git a/packages/extension/background/background.ts → packages/extension/src/background.ts b/packages/extension/background/background.ts → packages/extension/src/background.ts
@@ -7,9 +7,9 @@ It has to coordinate the communication between the different scripts based on th
 */
 
 import {error, log} from '@solid-devtools/shared/utils'
-import * as bridge  from '../shared/bridge.ts'
-import * as icons   from '../shared/icons.ts'
 import * as debug   from '@solid-devtools/debugger/types'
+import * as bridge  from './bridge.ts'
+import * as icons   from './icons.ts'
 
 log(bridge.Place_Name.Background+' loaded.')
 
@@ -39,7 +39,7 @@ const queryActiveTabId = async (): Promise<number | Error> => {
 
         let tab = tabs[0]!
         if (!tab.id) return new Error('Active tab has no id')
-        
+
         return tab.id
     } catch (e) {
         return e instanceof Error ? e : new Error('Unknown error')
@@ -159,7 +159,7 @@ chrome.runtime.onConnect.addListener(async port => {
             error(tab)
             break
         }
-        
+
         let devtools_messanger = bridge.createPortMessanger(
             bridge.Place_Name.Background,
             bridge.Place_Name.Devtools_Script,
@@ -172,7 +172,7 @@ chrome.runtime.onConnect.addListener(async port => {
 
         /* Devtools Script Disconnected */
         port.onDisconnect.addListener(() => {
-            
+
             tab.devtools_messanger = undefined
 
             if (tab.content) {
@@ -261,7 +261,7 @@ function panel_handle_versions(tab: TabData, panel_messanger: PortMessanger, ver
     }
 }
 
-/** 
+/**
  To be called whenever direct connection between content-script and panel needs to be recreated
  Like when page refreshes or panel gets closed and opened
 */

diff --git a/packages/extension/shared/bridge.ts → packages/extension/src/bridge.ts b/packages/extension/shared/bridge.ts → packages/extension/src/bridge.ts
diff --git a/packages/extension/content/content.ts → packages/extension/src/content.ts b/packages/extension/content/content.ts → packages/extension/src/content.ts
@@ -10,12 +10,12 @@ This script is injected into every page and is responsible for:
 */
 
 import {error, log} from '@solid-devtools/shared/utils'
-import * as bridge from '../shared/bridge.ts'
+import * as bridge from './bridge.ts'
 
 // @ts-expect-error ?script&module query ensures output in ES module format and only import the script path
-import detectorPath from './detector?script&module'
+import detectorPath from './detector.ts?script&module'
 // @ts-expect-error ?script&module query ensures output in ES module format and only import the script path
-import debuggerPath from './debugger?script&module'
+import debuggerPath from './debugger.ts?script&module'
 
 if (import.meta.env.DEV) log(bridge.Place_Name.Content_Script+' loaded.')
 
@@ -85,7 +85,7 @@ window.addEventListener('message', e => {
 })
 
 fromClient('Debugger_Connected', versions => {
-    
+
     // eslint-disable-next-line no-console
     console.log(
         '🚧 %csolid-devtools%c is in early development! 🚧\nPlease report any bugs to https://github.com/thetarnav/solid-devtools/issues',

diff --git a/packages/extension/content/debugger.ts → packages/extension/src/debugger.ts b/packages/extension/content/debugger.ts → packages/extension/src/debugger.ts
@@ -8,7 +8,7 @@ Debugger Client injected into the inspected page
 import {useDebugger} from '@solid-devtools/debugger'
 import {type Debugger} from '@solid-devtools/debugger/types'
 import {log, warn} from '@solid-devtools/shared/utils'
-import * as bridge from '../shared/bridge.ts'
+import * as bridge from './bridge.ts'
 
 if (import.meta.env.DEV) log(bridge.Place_Name.Debugger_Real_World+' loaded.')
 

diff --git a/packages/extension/content/detector.ts → packages/extension/src/detector.ts b/packages/extension/content/detector.ts → packages/extension/src/detector.ts
@@ -7,7 +7,7 @@ and notify the content script
 
 import {detectSolid, onSolidDevDetect, onSolidDevtoolsDetect} from '@solid-devtools/shared/detect'
 import {log, warn} from '@solid-devtools/shared/utils'
-import * as bridge from '../shared/bridge.ts'
+import * as bridge from './bridge.ts'
 
 if (import.meta.env.DEV) log(bridge.Place_Name.Detector_Real_World+' loaded.')
 

diff --git a/packages/extension/devtools/devtools.html → packages/extension/src/devtools.html b/packages/extension/devtools/devtools.html → packages/extension/src/devtools.html
@@ -2,9 +2,8 @@
 <html>
     <head>
         <meta charset="utf-8" />
+        <script src="./devtools.ts" type="module"></script>
     </head>
-
     <body>
-        <script src="./devtools.ts" type="module"></script>
     </body>
 </html>
diff --git a/packages/extension/devtools/devtools.ts → packages/extension/src/devtools.ts b/packages/extension/devtools/devtools.ts → packages/extension/src/devtools.ts
@@ -8,8 +8,8 @@ It connects to the background script.
 */
 
 import {error, log} from '@solid-devtools/shared/utils'
-import * as bridge from '../shared/bridge.ts'
-import * as icons from '../shared/icons.ts'
+import * as bridge from './bridge.ts'
+import * as icons from './icons.ts'
 
 log(bridge.Place_Name.Devtools_Script+' loaded.')
 
@@ -32,7 +32,7 @@ bridge.once(bg_messanger.on, 'Versions', () => {
     chrome.devtools.panels.create(
         'Solid',
         PATH_PREFIX + icons.OUTLINE_32,
-        PATH_PREFIX + 'index.html',
+        PATH_PREFIX + 'src/panel.html',
         () => {
             if (chrome.runtime.lastError) {
                 error('Creating Devtools_Panel Failed', chrome.runtime.lastError)

diff --git a/packages/extension/env.d.ts → packages/extension/src/env.d.ts b/packages/extension/env.d.ts → packages/extension/src/env.d.ts
diff --git a/packages/extension/src/icons.ts b/packages/extension/src/icons.ts
@@ -0,0 +1,26 @@
+
+export const SOLID_BLUE_16  = 'solid-normal-16.png'
+export const SOLID_BLUE_32  = 'solid-normal-32.png'
+export const SOLID_BLUE_48  = 'solid-normal-48.png'
+export const SOLID_BLUE_128 = 'solid-normal-128.png'
+
+export const SOLID_GRAY_16  = 'solid-gray-16.png'
+export const SOLID_GRAY_32  = 'solid-gray-32.png'
+export const SOLID_GRAY_48  = 'solid-gray-48.png'
+export const SOLID_GRAY_128 = 'solid-gray-128.png'
+
+export const OUTLINE_32     = 'solid-white-32.png'
+
+export const blue: chrome.runtime.ManifestIcons = {
+    16:  SOLID_BLUE_16,
+    32:  SOLID_BLUE_32,
+    48:  SOLID_BLUE_48,
+    128: SOLID_BLUE_128,
+}
+
+export const gray: chrome.runtime.ManifestIcons = {
+    16:  SOLID_GRAY_16,
+    32:  SOLID_GRAY_32,
+    48:  SOLID_GRAY_48,
+    128: SOLID_GRAY_128,
+}
diff --git a/packages/extension/index.html → packages/extension/src/panel.html b/packages/extension/index.html → packages/extension/src/panel.html
@@ -3,14 +3,11 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#000000" />
-        <title>Solid Devtools</title>
+        <script src="./panel.tsx" type="module"></script>
     </head>
 
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
-
-        <script src="./panel/panel.tsx" type="module"></script>
     </body>
 </html>
diff --git a/packages/extension/panel/panel.tsx → packages/extension/src/panel.tsx b/packages/extension/panel/panel.tsx → packages/extension/src/panel.tsx
@@ -7,7 +7,7 @@ import {render} from 'solid-js/web'
 import {type Debugger} from '@solid-devtools/debugger/types'
 import {log} from '@solid-devtools/shared/utils'
 import {createDevtools, MountIcons} from '@solid-devtools/frontend'
-import * as bridge from '../shared/bridge.ts'
+import * as bridge from './bridge.ts'
 
 import '@solid-devtools/frontend/dist/styles.css'
 

diff --git a/packages/extension/popup/popup.css → packages/extension/src/popup.css b/packages/extension/popup/popup.css → packages/extension/src/popup.css
diff --git a/packages/extension/popup/popup.html → packages/extension/src/popup.html b/packages/extension/popup/popup.html → packages/extension/src/popup.html
@@ -3,12 +3,10 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#000000" />
-        <title>Solid Devtools</title>
+        <script src="./popup.tsx" type="module"></script>
     </head>
 
     <body>
         <div id="root"></div>
-        <script src="./popup.tsx" type="module"></script>
     </body>
 </html>
diff --git a/packages/extension/popup/popup.tsx → packages/extension/src/popup.tsx b/packages/extension/popup/popup.tsx → packages/extension/src/popup.tsx
@@ -3,7 +3,7 @@
 import * as s from 'solid-js'
 import {render} from 'solid-js/web'
 import {log} from '@solid-devtools/shared/utils'
-import * as bridge from '../shared/bridge.ts'
+import * as bridge from './bridge.ts'
 
 import './popup.css'
 

diff --git a/packages/extension/tsconfig.json b/packages/extension/tsconfig.json
@@ -4,13 +4,5 @@
         "outDir": "dist",
         "types": ["vite/client", "@types/chrome"],
     },
-    "include": [
-        "panel/**/*",
-        "background/**/*",
-        "content/**/*",
-        "devtools/**/*",
-        "shared/**/*",
-        "popup/**/*",
-        "env.d.ts"
-    ]
+    "include": ["src/**/*"]
 }
diff --git a/packages/extension/vite.config.ts b/packages/extension/vite.config.ts
@@ -5,7 +5,7 @@ import * as assert from 'node:assert'
 import * as vite   from 'vite'
 import      solid  from 'vite-plugin-solid'
 import      pkg    from './package.json' with {type: 'json'}
-import * as icons  from './shared/icons.js'
+import * as icons  from './src/icons.ts'
 
 const require = module.createRequire(import.meta.url)
 
@@ -42,40 +42,26 @@ const manifest: crx.ManifestV3Export & Manifest_Additional_Fields = {
         : {gecko: {id: '{abfd162e-9948-403a-a75c-6e61184e1d47}'}},
     author: is_chrome ? {email: 'gthetarnav@gmail.com'} : 'Damian Tarnawski' as any,
     minimum_chrome_version: '94',
-    devtools_page: 'devtools/devtools.html',
-    /*
-     TODO: instead of running a content script on document start for every url
-     could potentially be replaced with `permissions: ['activeTab']`,
-     removing the content_script field
-     and running the content script programatically in bg script
-
-     chrome.action.onClicked.addListener((tab) => {
-         if (tab.id) chrome.scripting.executeScript({
-             target: { tabId: tab.id },
-             files: ['content/content.ts'],
-         });
-     });
-
-    */
+    devtools_page: 'src/devtools.html',
     content_scripts: [{
         matches: ['*://*/*'],
-        js: ['content/content.ts'],
+        js: ['src/content.ts'],
         run_at: 'document_start',
     }],
     background: is_chrome
         ? {
-            service_worker: 'background/background.ts',
+            service_worker: 'src/background.ts',
             type: 'module',
         }
         : {
-            scripts: ['background/background.ts'],
+            scripts: ['src/background.ts'],
             type: 'module',
         },
     permissions: [],
     action: {
         default_icon:  icons.gray,
         default_title: 'Solid Devtools',
-        default_popup: 'popup/popup.html',
+        default_popup: 'src/popup.html',
     },
     icons: icons.blue,
 }
@@ -114,7 +100,9 @@ const vite_config: vite.UserConfig = {
         emptyOutDir: !is_dev,
         outDir: 'dist/' + browser,
         rollupOptions: {
-            input: {panel: 'index.html'},
+            // adds panel as additional input because it's not a part of the manifest
+            // and is loaded dynamically in devtools.ts
+            input: {panel: 'src/panel.html'},
         },
         target: 'esnext',
     },