Feature: inject component globals (#124)

* feat(add $x0, $x1 etc globals for components) * display $x0 in the panel * Apply formatting changes * add .edge files to lint-staged * add check for title attribute * bump cypress version * increase component hover state contrast
alpine-collective · Dec 14, 2020 · 8ad12a0 · 8ad12a0
1 parent 8697815
commit 8ad12a0
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 64 deletions.
diff --git a/cypress/integration/component.js b/cypress/integration/component.js
@@ -9,6 +9,33 @@ it('should get names of components', () => {
         .should('contain.text', 'combobox')
 })
 
+it('should create globals + add annotation for each component', () => {
+    let win
+    cy.frameLoaded('#target').then(() => {
+        win = cy.$$('#target').get(0).contentWindow
+    })
+
+    cy.iframe('#target')
+        .find('[x-data]')
+        .then((components) => {
+            components.each((i, component) => {
+                expect(win[`$x${i}`].$el).to.equal(component)
+                expect(win[`$x${i}`]).to.equal(component.__x)
+            })
+            return components.length
+        })
+        .then((componentCount) => {
+            cy.get('[data-testid="console-global"]')
+                .should('contain.text', '= $x0')
+                .should('have.attr', 'title', 'Available as $x0 in the console')
+                .should('contain.text', '= $x1')
+                .should('contain.text', '= $x2')
+                .should('contain.text', '= $x3')
+                .should('contain.text', '= $x4')
+                .should('contain.text', `= $x${componentCount - 1}`)
+        })
+})
+
 it('should handle adding and removing new components', () => {
     cy.visit('/')
         .get('[data-testid=component-name]')

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
         "@rollup/plugin-replace": "^2.3.4",
         "@tailwindcss/forms": "^0.2.1",
         "alpinejs": "^2.7.3",
-        "cypress": "^6.0.1",
+        "cypress": "^6.1.0",
         "cypress-iframe": "^1.0.1",
         "edge.js": "^1.1.4",
         "husky": "^4.3.0",
@@ -46,6 +46,6 @@
         }
     },
     "lint-staged": {
-        "*.{js,css,md,html}": "prettier --write"
+        "*.{js,css,md,html,edge}": "prettier --write"
     }
 }
diff --git a/packages/shell-chrome/src/backend.js b/packages/shell-chrome/src/backend.js
@@ -5,6 +5,7 @@ window.__alpineDevtool = {
     uuid: 0,
     stopMutationObserver: false,
     hoverElement: null,
+    observer: null,
 }
 window.addEventListener('message', handshake)
 
@@ -40,7 +41,7 @@ function handleMessages(e) {
 
         if (e.data.payload.action == 'hover') {
             Alpine.discoverComponents((component) => {
-                if (component.__alpineDevtool && component.__alpineDevtool.id == e.data.payload.componentId) {
+                if (component.__alpineDevtool && component.__alpineDevtool.id === e.data.payload.componentId) {
                     cleanupWindowHoverElement()
 
                     let hoverElement = document.createElement('div')
@@ -67,7 +68,7 @@ function handleMessages(e) {
             })
         }
 
-        if (e.data.payload.action == 'hoverLeft') {
+        if (e.data.payload.action === 'hoverLeft') {
             window.__alpineDevtool.stopMutationObserver = true
 
             Alpine.discoverComponents((component) => {
@@ -80,9 +81,9 @@ function handleMessages(e) {
             }, 10)
         }
 
-        if (e.data.payload.action == 'editAttribute') {
+        if (e.data.payload.action === 'editAttribute') {
             Alpine.discoverComponents((component) => {
-                if (component.__alpineDevtool.id == e.data.payload.componentId) {
+                if (component.__alpineDevtool.id === e.data.payload.componentId) {
                     const { attributeSequence, attributeValue } = e.data.payload
                     set(component.__x.$data, attributeSequence, attributeValue)
                 }
@@ -121,10 +122,10 @@ function serializeDataProperty(value) {
 }
 
 function discoverComponents() {
-    var rootEls = document.querySelectorAll('[x-data]')
+    const rootEls = document.querySelectorAll('[x-data]')
     // Exit early if no components have been added or removed
     const allComponentsInitialized = Object.values(rootEls).every((e) => e.__alpineDevtool)
-    if (window.__alpineDevtool.length === rootEls.length && allComponentsInitialized) {
+    if (window.__alpineDevtool.components.length === rootEls.length && allComponentsInitialized) {
         return false
     }
 
@@ -138,7 +139,8 @@ function discoverComponents() {
         }
 
         if (!rootEl.__alpineDevtool.id) {
-            rootEl.__alpineDevtool.id = ++window.__alpineDevtool.uuid
+            rootEl.__alpineDevtool.id = window.__alpineDevtool.uuid++
+            window[`$x${rootEl.__alpineDevtool.id}`] = rootEl.__x
         }
 
         var depth = 0
@@ -200,32 +202,32 @@ function getAlpineVersion() {
     )
 }
 
-observer = null
-
 function observeNode(node) {
     const observerOptions = {
         childList: true,
         attributes: true,
         subtree: true,
     }
 
-    observer = new MutationObserver((mutations) => {
+    window.__alpineDevtool.observer = new MutationObserver((mutations) => {
         if (!window.__alpineDevtool.stopMutationObserver) {
             discoverComponents()
         }
     })
 
-    observer.observe(node, observerOptions)
+    window.__alpineDevtool.observer.observe(node, observerOptions)
 }
 
 function disconnectObserver() {
-    if (observer) {
-        observer.disconnect()
+    if (window.__alpineDevtool.observer) {
+        window.__alpineDevtool.observer.disconnect()
+        window.__alpineDevtool.observer = null
     }
 }
 
 function cleanupWindowHoverElement() {
     if (window.__alpineDevtool.hoverElement) {
         window.__alpineDevtool.hoverElement.remove()
+        window.__alpineDevtool.hoverElement = null
     }
 }
diff --git a/packages/shell-chrome/views/_partials/component.edge b/packages/shell-chrome/views/_partials/component.edge
@@ -1,9 +1,9 @@
 @verbatim
 <a
     :class="{
-            'text-white bg-alpine-300' : component.isOpened,
-            'text-gray-600 hover:bg-blue-100' : !component.isOpened,
-        }"
+        'text-white bg-alpine-300' : component.isOpened,
+        'text-gray-600 hover:bg-blue-200' : !component.isOpened,
+    }"
     class="block cursor-pointer rounded"
     :style="`padding-left: ${component.depth * 20}px; `"
     @mouseenter="alpineState.hoverOnComponent(component)"
@@ -15,6 +15,13 @@
         <span class="opacity-25">&lt;</span>
         <span data-testid="component-name" x-text="component.name" class="text-base"></span>
         <span class="opacity-25">&gt;</span>
+        <div
+            data-testid="console-global"
+            class="text-white pl-2 text-xs"
+            :title="`Available as $x${component.id} in the console`"
+        >
+            = <span x-text="`$x${component.id}`"></span>
+        </div>
     </h5>
 </a>
 @endverbatim