fix(x-model-updates) (#168)

* fix(x-model-updates)

* bump cypress version

* remove unnecessary assertions

* fix(backend-reload-iife)

* fix(add-visits-in-tests)

Author: HugoDF

cypress/integration/component.js

@@ -10,6 +10,8 @@ it('should get names of components', () => {
 })
 
 it('should create globals + add annotation for each component', () => {
+    cy.visit('/').get('[data-testid=component-name]').should('be.visible')
+
     let win
     cy.frameLoaded('#target').then(() => {
         win = cy.$$('#target').get(0).contentWindow
@@ -69,8 +71,7 @@ it('should handle replacing a component and keep its listed position', () => {
 it('should add/remove hover overlay on component mouseenter/leave', () => {
     cy.visit('/')
     // check overlay works for first component
-    cy.get('[data-testid=component-container]').first().should('be.visible')
-    cy.get('[data-testid=component-container]').first().trigger('mouseenter')
+    cy.get('[data-testid=component-container]').first().should('be.visible').trigger('mouseenter')
 
     cy.iframe('#target').find('[data-testid=hover-element]').should('be.visible')
 
@@ -100,7 +101,6 @@ it('should add/remove hover overlay on component mouseenter/leave', () => {
     cy.get('[data-testid=component-container]').last().trigger('mouseleave')
 
     cy.iframe('#target').find('[data-testid=hover-element]').should('not.exist')
-    cy.get('[data-testid=component-container]').last().should('be.visible')
 
     cy.get('[data-testid=component-container]').last().trigger('mouseenter')
 
@@ -119,8 +119,6 @@ it('should add/remove hover overlay on component mouseenter/leave', () => {
     cy.iframe('#target').find('[data-testid=hover-element]').should('not.exist')
 
     // check overlay disappears on `shutdown`
-    cy.get('[data-testid=component-container]').first().should('be.visible')
-
     cy.get('[data-testid=component-container]').first().trigger('mouseenter')
 
     cy.iframe('#target').find('[data-testid=hover-element]').should('be.visible')
@@ -146,7 +144,11 @@ it('should support selecting/unselecting a component', () => {
     cy.get('[data-testid=component-container]').last().should('not.have.class', 'text-white bg-alpine-300')
 })
 
-it('should display read-only function/HTMLElement attributes', () => {
+it('should display read-only function/HTMLElement attributes + allow editing of booleans, numbers and strings', () => {
+    cy.visit('/').get('[data-testid=component-name]').should('be.visible')
+
+    cy.get('[data-testid=component-container]').first().click()
+
     cy.get('[data-testid=data-property-name-myFunction]').should('be.visible').contains('myFunction')
 
     cy.get('[data-testid=data-property-value-myFunction]').should('contain.text', 'function')
@@ -172,9 +174,7 @@ it('should display read-only function/HTMLElement attributes', () => {
 
     cy.get('[data-testid=data-property-name-attributes]').should('not.be.visible')
     cy.get('[data-testid=data-property-name-children]').should('not.be.visible')
-})
 
-it('should allow editing of booleans, numbers and strings', () => {
     // booleans
     cy.get('[data-testid=data-property-name-bool]').should('be.visible').contains('bool')
     cy.get('[data-testid=data-property-value-bool]').should('contain.text', 'true')
@@ -219,6 +219,25 @@ it('should allow editing of booleans, numbers and strings', () => {
     cy.iframe('#target').contains('Str, type: "string", value: "devtools"')
 })
 
+it('should support x-model updates (even without a re-render) and editing values', () => {
+    cy.visit('/').get('[data-testid=component-name]').should('be.visible')
+
+    cy.get('[data-testid=component-name]').contains('model-no-render').click().trigger('mouseleave')
+    cy.get('[data-testid=data-property-name-text]').should('be.visible').contains('text')
+    cy.get('[data-testid=data-property-value-text]').should('be.visible').contains('initial')
+    cy.iframe('#target').find('[data-testid=model-no-render]').should('be.visible').clear().type('updated')
+    cy.get('[data-testid=data-property-value-text]').should('be.visible').contains('updated')
+
+    cy.get('[data-testid=edit-icon-text]').click({ force: true })
+    cy.get('[data-testid=input-text]')
+        .clear({ force: true })
+        .type('from-devtools', { force: true })
+        .siblings('[data-testid=save-icon]')
+        .click({ force: true })
+
+    cy.iframe('#target').find('[data-testid=model-no-render]').should('have.value', 'from-devtools')
+})
+
 it('should display message with number of components watched', () => {
     cy.visit('/')
         .get('[data-testid=component-name]')

package-lock.json

@@ -24,7 +24,7 @@
         "@rollup/plugin-replace": "^2.3.4",
         "@tailwindcss/forms": "^0.2.1",
         "alpinejs": "^2.8.1",
-        "cypress": "^6.3.0",
+        "cypress": "^6.6.0",
         "cypress-iframe": "^1.0.1",
         "edge.js": "^1.1.4",
         "husky": "^4.3.0",

package.json

@@ -1,3 +1,4 @@
+import { DEVTOOLS_RENDER_ATTR_NAME, DEVTOOLS_RENDER_BINDING_ATTR_NAME } from './constants'
 import { getComponentName, isSerializable, serializeHTMLElement, set, waitForAlpine, isRequiredVersion } from './utils'
 
 function serializeDataProperty(value) {
@@ -37,6 +38,7 @@ function init() {
             this.errorSourceId = 1
 
             this._stopMutationObserver = false
+            this._lastComponentCrawl = Date.now()
         }
 
         runWithMutationPaused(cb) {
@@ -126,10 +128,28 @@ function init() {
 
         discoverComponents() {
             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 (this.components.length === rootEls.length && allComponentsInitialized) {
-                return false
+            if (allComponentsInitialized) {
+                const lastAlpineRender = [...rootEls].reduce((acc, el) => {
+                    // we add `:data-devtools-render="Date.now()"` when initialising components
+                    const renderTimeStr = el.getAttribute(DEVTOOLS_RENDER_ATTR_NAME)
+                    const renderTime = parseInt(renderTimeStr, 10)
+                    if (renderTime && renderTime > acc) {
+                        return renderTime
+                    }
+                    return acc
+                }, this._lastComponentCrawl)
+
+                const someComponentHasUpdated = lastAlpineRender > this._lastComponentCrawl
+                if (someComponentHasUpdated) {
+                    this._lastComponentCrawl = Date.now()
+                }
+
+                // Exit early if no components have been added, removed and no data has changed
+                if (!someComponentHasUpdated && this.components.length === rootEls.length) {
+                    return false
+                }
             }
 
             this.components = []
@@ -143,11 +163,12 @@ function init() {
                 Alpine.initializeComponent(rootEl)
 
                 if (!rootEl.__alpineDevtool) {
-                    rootEl.__alpineDevtool = {}
-                }
-
-                if (!rootEl.__alpineDevtool.id) {
-                    rootEl.__alpineDevtool.id = this.uuid++
+                    // add an attr to trigger the mutation observer and run this function
+                    // that will send updated state to devtools
+                    rootEl.setAttribute(DEVTOOLS_RENDER_BINDING_ATTR_NAME, 'Date.now()')
+                    rootEl.__alpineDevtool = {
+                        id: this.uuid++,
+                    }
                     window[`$x${rootEl.__alpineDevtool.id - 1}`] = rootEl.__x
                 }
 

packages/shell-chrome/src/backend.js

@@ -0,0 +1,3 @@
+export const DEVTOOLS_RENDER_ATTR_NAME = 'data-devtools-render'
+export const DEVTOOLS_RENDER_BINDING_ATTR_NAME = `:${DEVTOOLS_RENDER_ATTR_NAME}`
+export const ADDED_ATTRIBUTES = [DEVTOOLS_RENDER_ATTR_NAME, DEVTOOLS_RENDER_BINDING_ATTR_NAME]

packages/shell-chrome/src/constants.js

@@ -1,3 +1,5 @@
+import { ADDED_ATTRIBUTES } from './constants'
+
 export function fetchWithTimeout(resource, options) {
     const { timeout = 3000 } = options
     const controller = new AbortController()
@@ -152,7 +154,9 @@ function isReadyOnlyType(type) {
 export function serializeHTMLElement(element, { include = [] } = {}) {
     let object = { name: element.localName }
     if (include.includes('attributes')) {
-        object.attributes = Array.from(element.attributes).map((attribute) => attribute.name)
+        object.attributes = Array.from(element.attributes)
+            .filter((attribute) => !ADDED_ATTRIBUTES.includes(attribute.name))
+            .map((attribute) => attribute.name)
     }
     // `include` is used to avoid getting the children of children.
     // For the top-level iteration, children are included,

packages/shell-chrome/src/utils.js

@@ -55,6 +55,12 @@
         <div role="combobox" x-data="{ hello: 'world' }">
             <span x-text="hello"></span>
         </div>
+        <div x-title="model-no-render" x-data="{ text: 'initial' }">
+            <label>
+                Doesn't re-render but has x-model
+                <input type="text" x-model="text" data-testid="model-no-render" />
+            </label>
+        </div>
         <button
             data-testid="replace-component-button"
             onclick="event.target.parentNode.replaceChild(window.span, event.target)"

packages/simulator/example.html

@@ -57,6 +57,7 @@ export default [
         input,
         output: {
             dir: 'dist/chrome',
+            format: 'iife',
         },
         plugins: [
             replace({