WIP: Feature: Add setting to ignore components

package.json

@@ -39,7 +39,6 @@
         "split-grid": "^1.0.9",
         "tailwindcss": "^2.0.1"
     },
-    "dependencies": {},
     "husky": {
         "hooks": {
             "pre-commit": "lint-staged"

packages/shell-chrome/assets/manifest.json

@@ -13,7 +13,7 @@
         "default_title": "Alpine.js devtools",
         "default_popup": "popups/not-found.html"
     },
-    "permissions": ["http://*/*", "https://*/*", "file:///*"],
+    "permissions": ["http://*/*", "https://*/*", "file:///*", "storage"],
     "background": {
         "scripts": ["background.js"],
         "persistent": false

packages/shell-chrome/src/devtools/devtools.js

@@ -39,7 +39,6 @@ export default function devtools() {
         latest: null,
         components: [],
         errors: [],
-        showTools: false,
         showTimeout: 1500,
         activeTheme: 'dark-header',
         loadingText: 'Alpine.js tools loading',
@@ -49,12 +48,18 @@ export default function devtools() {
 
         themes: themes,
 
-        settingsPanelEnabled: process.env.NODE_ENV !== 'production',
         settingsPanelOpen: false,
+        settings: {
+            ignoreSelector: '',
+        },
 
         tabsEnabled: process.env.NODE_ENV !== 'production',
         activeTab: 'components',
 
+        get ready() {
+            return this.settings.loaded && this.latest
+        },
+
         get isLatest() {
             if (!this.version || !this.latest) return null
             return isRequiredVersion(this.latest, this.version)
@@ -96,6 +101,21 @@ export default function devtools() {
         },
 
         init() {
+            try {
+                chrome.storage.sync.get(['alpine-devtools-settings'], (result) => {
+                    result = result['alpine-devtools-settings']
+                    result.loaded = true
+                    result.error = ''
+                    Object.assign(this.settings, result)
+                    console.log(this.settings)
+                })
+            } catch (error) {
+                this.settings = {
+                    loaded: true,
+                    error: error.message,
+                }
+                console.warn(error.message, this.settings)
+            }
             this.initSplitPanes()
 
             this.$watch('activeTab', (value) => {
@@ -107,24 +127,29 @@ export default function devtools() {
                 this.scrollToLastError()
             })
 
-            this.$watch('components', () => {
-                if (!this.showTools) {
-                    fetchWithTimeout('https://registry.npmjs.com/alpinejs', { timeout: this.showTimeout })
-                        .then((data) => {
-                            this.latest = data['dist-tags'].latest
-                            this.showTools = true
-                        })
-                        .catch((_error) => {
-                            console.error('Could not load Alpine.js version data from registry.npmjs.com')
-                            // latest will be as defaulted in state.js
-                            this.showTools = true
-                        })
-                }
-            })
+            fetchWithTimeout('https://registry.npmjs.com/alpinejs', { timeout: this.showTimeout })
+                .then((data) => {
+                    this.latest = data['dist-tags'].latest
+                })
+                .catch((_error) => {
+                    console.error('Could not load Alpine.js version data from registry.npmjs.com')
+                })
 
             this.$watch('orientation', () => {
                 this.initSplitPanes()
             })
+
+            this.$watch('settings', (value) => {
+                chrome.storage.sync.set({ 'alpine-devtools-settings': JSON.parse(JSON.stringify(value)) }, () => {
+                    console.log('Settings updated', JSON.parse(JSON.stringify(value)))
+                })
+            })
+        },
+
+        updateSetting(name, value) {
+            const settings = this.settings
+            settings[name] = value
+            this.settings = settings
         },
 
         initSplitPanes() {

packages/shell-chrome/views/_partials/footer.edge

@@ -1,5 +1,5 @@
 <div
-    x-show="showTools"
+    x-show="ready"
     class="flex font-bold text-gray-400 border-t border-gray-300 bg-white"
 >
     <div class="flex-1">
@@ -12,13 +12,13 @@
                         <span x-text="`${components.length} ${components.length > 1 || components.length == 0? 'components' : 'component'}`"></span>
                         @endverbatim
                     </a>
-                    
+
                     @if(devOnly)
                         ,&nbsp;
-                        <a 
-                            href="#" 
-                            data-testid="footer-warnings-link" 
-                            @click.prevent="activeTab = 'warnings'" 
+                        <a
+                            href="#"
+                            data-testid="footer-warnings-link"
+                            @click.prevent="activeTab = 'warnings'"
                             :class="{
                                 'text-red-400': errors.length > 0
                             }"
@@ -39,8 +39,8 @@
             >
                 <svg
                     :class="{
-                            'text-green-500': showTools && isLatest,
-                            'text-orange-500': showTools && !isLatest,
+                            'text-green-500': ready && isLatest,
+                            'text-orange-500': ready && !isLatest,
                         }"
                     class="mr-1.5 h-2 w-2 transition transition-colors duration-700 ease-in-out"
                     fill="currentColor"
@@ -94,7 +94,6 @@
         <button
             data-testid="settings-panel-open-button"
             class="hover:opacity-75 focus:outline-none"
-            x-show="settingsPanelEnabled"
             @click="settingsPanelOpen = true"
         >
             <svg

packages/shell-chrome/views/_partials/header.edge

@@ -1,7 +1,7 @@
 <div
     :class="{
-        'bg-gray-100': !showTools,
-        [theme['bg-header']]: showTools,
+        'bg-gray-100': !ready,
+        [theme['bg-header']]: ready,
     }"
     class="{{ devOnly ? '' : 'py-2' }} flex items-center h-15 pl-3 pr-1 xs:pr-3 text-base tracking-tight font-bold text-white border-b border-gray-300 transition duration-700 transition-colors ease-in-out"
 >
@@ -16,16 +16,16 @@
             >
                 <polygon
                     :class="{
-                        'text-gray-600': !showTools,
-                        [theme['bg-logo-dark']]: showTools,
+                        'text-gray-600': !ready,
+                        [theme['bg-logo-dark']]: ready,
                     }"
                     class="transform transition-colors duration-700"
                     points="50,230 140,140 320,320 140,320"
                 />
                 <polygon
                     :class="{
-                        'text-gray-400': !showTools,
-                        [theme['bg-logo-light']]: showTools,
+                        'text-gray-400': !ready,
+                        [theme['bg-logo-light']]: ready,
                     }"
                     class="transform transition-colors duration-700"
                     points="320,140 410,230 320,320 230,230"
@@ -36,7 +36,7 @@
             <div
                 data-testid="status-line"
                 :class="{
-                    'hidden': showTools,
+                    'hidden': ready,
                 }"
                 class="flex items-center px-1 py-0.5 rounded text-xs text-gray-600 font-medium leading-4 bg-gray-300 bg-opacity-50 animate-pulse-fast transition transition-colors duration-700 ease-in-out"
                 :title="isLatest? 'Latest Version' : `Latest Version: ${latest}`"
@@ -57,7 +57,7 @@
     @if(devOnly)
         <div
             :class="{
-            'opacity-0': !showTools,
+            'opacity-0': !ready,
         }"
             class="flex items-center text-sm text-ice-500 xs:space-x-3 pb-px transition"
             style="line-height: 3.25rem"
@@ -78,7 +78,7 @@
                     d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
                 />
             </svg>
-            @endcomponent 
+            @endcomponent
 
             @component('_components.tab-link', { tab: 'events' })
             <svg
@@ -95,7 +95,7 @@
                     d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z"
                 />
             </svg>
-            @endcomponent 
+            @endcomponent
 
             @component('_components.tab-link', { tab: 'warnings' })
             <svg xmlns="http://www.w3.org/2000/svg" class="{{ iconClasses }}" viewBox="0 0 20 20" fill="currentColor">

packages/shell-chrome/views/_partials/tabs/components.edge

@@ -1,15 +1,15 @@
 <div
     x-ref="panes"
     :class="{
-        'opacity-75': !showTools,
+        'opacity-75': !ready,
         'grid-cols-panes': orientation === 'landscape',
         'grid-rows-panes': orientation === 'portrait',
     }"
     class="grid h-full w-full overflow-hidden"
 >
     <!-- Components -->
     <div class="relative flex-1 flex flex-col max-h-full overflow-scroll">
-        <template x-if="showTools && components.length === 0">
+        <template x-if="ready && components.length === 0">
             <div
                 data-testid="no-components-message"
                 class="flex flex-1 h-full w-full items-center justify-center p-4 text-gray-400 text-sm"
@@ -19,7 +19,7 @@
         </template>
         <div
             :class="{
-                'hidden': !showTools,
+                'hidden': !ready,
             }"
             class="absolute min-w-full min-h-full p-2"
         >
@@ -47,14 +47,14 @@
         <template x-if="!openComponent.name">
             <div
                 data-testid="select-component-message"
-                x-text="showTools && components.length > 0 ? 'Select a component to view' : ''"
+                x-text="ready && components.length > 0 ? 'Select a component to view' : ''"
                 class="flex h-full w-full items-center justify-center p-4 text-gray-400 text-sm bg-gray-50"
             ></div>
         </template>
 
         <div
             :class="{
-            'hidden': !showTools || !openComponent.name,
+            'hidden': !ready || !openComponent.name,
         }"
             class="flex-1 px-3 py-2"
         >

packages/shell-chrome/views/_partials/tabs/warnings.edge

@@ -1,12 +1,12 @@
 <div
     :class="{
-        'opacity-75': !showTools,
+        'opacity-75': !ready,
     }"
     class="grid h-full w-full overflow-hidden"
     data-testid="warnings-tab-content"
 >
     <div x-ref="warnings" class="flex-1 flex flex-col max-h-full overflow-scroll text-gray-600" data-testid="warnings-scroll-container">
-        <template x-if="showTools && errors.length === 0">
+        <template x-if="ready && errors.length === 0">
             <div
                 data-testid="no-warnings-message"
                 class="flex flex-1 h-full w-full items-center justify-center p-4 text-gray-400 text-sm"
@@ -15,7 +15,7 @@
             </div>
         </template>
 
-        <template x-if="showTools && errors.length > 0">
+        <template x-if="ready && errors.length > 0">
             <div>
                 <template x-for="(error, index) in errors" :key="error.errorId">
                     <div
@@ -26,7 +26,7 @@
                     >
                         @verbatim
                         <template x-if="error.type === 'eval'">
-                            <div 
+                            <div
                             :class="{
                                 'border-b': !isWarningsOverflowing || (isWarningsOverflowing && index !== errors.length - 1)
                             }"
@@ -45,7 +45,7 @@
                                             Error evaluating "<span class="text-purple" x-text="error.expression"></span>"
                                         </div>
 
-                                        <div 
+                                        <div
                                             class="flex"
                                             @click="activeTab = 'componenets', alpineState.renderComponentData(component)"
                                         >

packages/shell-chrome/views/panel.edge

@@ -13,9 +13,17 @@
     </head>
 
     <body class="antialiased">
-        <div x-data x-show="false" class="preload">Devtools loading...</div>
+        <div data-testid="panel-root" x-data x-show="false" class="preload">Devtools loading...</div>
 
-        <div id="app" class="h-full" x-cloak x-data="devtools()" x-init="init()" x-spread="devtoolsRootDirectives()">
+        <div
+            id="app"
+            data-testid="panel-root"
+            class="h-full"
+            x-cloak
+            x-data="devtools()"
+            x-init="init()"
+            x-spread="devtoolsRootDirectives()"
+        >
             <div class="bg-white flex flex-col relative h-full w-full mx-auto">
                 @include('_partials.header')
 
@@ -37,7 +45,7 @@
 
                 @include('_partials.footer')
 
-                @include('_partials.settings')
+                @include('settings.index')
             </div>
         </div>
         <script src="./panel.js"></script>