Add mage-init detection

kingfisherdirect · May 24, 2022 · e4e63e2 · e4e63e2
1 parent 5da7ddb
commit e4e63e2
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@ Features:
 
 - **Does not affect structure** or existing styles 👌
 - Detects **Knockout** components and templates 🤜
+- Finds Magento **mage-init scripts** within templates/layouts 📌
 - Uses dev-tools like **element picker** to select elements 🔫
 - Prints **browseable structure** and internal informations in console 👀
 - Adds a button to open edit page for CMS Blocks 🖊️

diff --git a/view/base/web/js/LayoutHints.js b/view/base/web/js/LayoutHints.js
@@ -1,8 +1,9 @@
 define([
     './highlights',
     './debug/KnockoutDebugger',
-    './debug/MageLayoutDebugger'
-], function (highlights, KnockoutDebugger, MageLayoutDebugger) {
+    './debug/MageLayoutDebugger',
+    './debug/MageInitDebugger'
+], function (highlights, KnockoutDebugger, MageLayoutDebugger, MageInitDebugger) {
     var colors = {
         blue4: "36 47 155",
         blue3: "100 111 212",
@@ -25,15 +26,19 @@ define([
             LayoutHints.instance = this
 
             this.debuggers = {}
-            this.debuggers.mage = new MageLayoutDebugger(
+
+            this.debuggers.mageInit = new MageInitDebugger(this)
+
+            this.debuggers.mageLayout = new MageLayoutDebugger(
                 this,
                 mageLayoutTree,
                 {
                     largerFontSize: "1.25em",
                     labelStyleBlue,
                     labelStyleNavy,
                     labelStyleBrown,
-                    blockEditUrl: initOptions.blockEditUrl
+                    blockEditUrl: initOptions.blockEditUrl,
+                    mageInitDebugger: this.debuggers.mageInit
                 }
             )
 
@@ -70,11 +75,12 @@ define([
                 for (var type in this.debuggers) {
                     var typeDebugger = this.debuggers[type]
 
-                    if (!typeDebugger.isInspectable(element)) {
+                    if (typeof typeDebugger.isInspectable !== 'function' || !typeDebugger.isInspectable(element)) {
                         continue
                     }
 
                     var inspectable = typeDebugger.getInspectable(element)
+                    inspectable.element = element
                     inspectable.type = type
 
                     return inspectable
@@ -105,15 +111,15 @@ define([
         }
 
         highlight (data, options) {
-            if (!this.debuggers[data.type]) {
+            if (!this.debuggers[data.type] || typeof this.debuggers[data.type].highlight !== 'function') {
                 throw new Error(`Cannot highlight element of type ${data.type}`)
             }
 
             return this.debuggers[data.type].highlight(data, options)
         }
 
         consolePrint (data, options) {
-            if (!this.debuggers[data.type]) {
+            if (!this.debuggers[data.type] || typeof this.debuggers[data.type].consolePrint !== 'function') {
                 throw new Error(`Cannot consolePrint element of type ${data.type}`)
             }
 

diff --git a/view/base/web/js/debug/MageInitDebugger.js b/view/base/web/js/debug/MageInitDebugger.js
@@ -0,0 +1,68 @@
+define([], function () {
+    return class MageInitDebugger {
+        constructor (layoutHints) {
+            this.layoutHints = layoutHints
+            this.inits = new Map()
+
+            this.collectInits()
+        }
+
+        collectInits () {
+            var mageInits = document.querySelectorAll('[data-mage-init], script[type="text/x-magento-init"]')
+
+            for (var el of mageInits) {
+                var script = el.tagName === 'SCRIPT'
+                    ? el
+                    : null
+
+                var targetElement = script
+                    ? el.parentElement
+                    : el
+
+                var elementInits = this.inits.has(targetElement)
+                    ? this.inits.get(targetElement)
+                    : []
+
+                var mageInit = script
+                    ? el.innerHTML
+                    : el.dataset.mageInit
+
+                elementInits.push({
+                    el: targetElement,
+                    script,
+                    mageInit
+                })
+
+                this.inits.set(targetElement, elementInits)
+            }
+        }
+
+        getInspectablesInside (elements) {
+            if (!Array.isArray(elements)) {
+                elements = [elements]
+            }
+
+            var matches = []
+
+            if (elements.includes(document.body)) {
+                matches = this.inits.keys()
+            } else {
+                for (var element of elements) {
+                    for (var [initElement] of this.inits) {
+                        if (element === initElement || element.contains(initElement)) {
+                            matches.push(initElement)
+                        }
+                    }
+                }
+            }
+
+            var allInits = []
+
+            for (var element of matches) {
+                allInits.push(...this.inits.get(element))
+            }
+
+            return allInits
+        }
+    }
+})
diff --git a/view/base/web/js/debug/MageLayoutDebugger.js b/view/base/web/js/debug/MageLayoutDebugger.js
@@ -2,6 +2,7 @@ define(['../highlights'], function (highlights) {
     return class MageLayoutDebugger {
         constructor (layoutHints, layoutTree, options = {}) {
             this.layoutHints = layoutHints
+            this.mageInitDebugger = options.mageInitDebugger
             this.blockEditUrl = options.blockEditUrl
 
             this.largerFontSize = options.largerFontSize || ''
@@ -98,7 +99,7 @@ define(['../highlights'], function (highlights) {
                 throw new Error("This element is not inspectable!")
             }
 
-            return { type: 'mage', element, layout: element.mageLayout }
+            return { layout: element.mageLayout }
         }
 
         highlight (data, { printOnClick = true } = {}) {
@@ -127,7 +128,17 @@ define(['../highlights'], function (highlights) {
             }
 
             for (var domEl of layoutElement.elements) {
-                var highlightEl = highlights.create(domEl, content)
+                var elementContent = content
+
+                if (this.mageInitDebugger) {
+                    var initInspectables = this.mageInitDebugger.getInspectablesInside(domEl)
+
+                    if (initInspectables.length > 0) {
+                        elementContent += `<p>Mage Inits: <b>${initInspectables.length}</b></p>`
+                    }
+                }
+
+                var highlightEl = highlights.create(domEl, elementContent)
 
                 if (printOnClick) {
                     highlightEl.addEventListener("click", () => this.consolePrint(data))
@@ -150,7 +161,7 @@ define(['../highlights'], function (highlights) {
             if (!collapse) {
                 console.group(
                     `${groupNameWithStyles}%c${blockId}%c${label}`,
-                    ...groupName.map(a => `${this.labelStyleBlue} font-size: ${this.largerFontSize}`),
+                    ...groupName.map(() => `${this.labelStyleBlue} font-size: ${this.largerFontSize}`),
                     `${this.labelStyleBrown} font-size: ${this.largerFontSize}`,
                     `${this.labelStyleNavy} font-size: ${this.largerFontSize}`
                 )
@@ -207,6 +218,23 @@ define(['../highlights'], function (highlights) {
                 console.log(`DOM:`, ...layoutElement.elements)
             }
 
+            if (this.mageInitDebugger) {
+                var initInspectables = this.mageInitDebugger.getInspectablesInside(layoutElement.elements)
+
+                if (initInspectables && initInspectables.length > 0) {
+                    console.log(`Mage Inits (${initInspectables.length}):`)
+
+                    for (var initInspectable of initInspectables) {
+                        if (initInspectable.script) {
+                            console.log(initInspectable.el, JSON.parse(initInspectable.mageInit), initInspectable.script)
+                            continue
+                        }
+
+                        console.log(initInspectable.el, JSON.parse(initInspectable.mageInit))
+                    }
+                }
+            }
+
             console.groupEnd()
         }
     }