Merge pull request #5768 from Shopify/fix-compiled-assets-issue

Fix an issue with hot-reloading the compiled assets (scripts.js, block-scripts.js, etc)

Author: karreiro

.changeset/orange-bugs-retire.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Fix an issue with hot-reloading the compiled assets (scripts.js, block-scripts.js, etc)

packages/theme/package.json

@@ -51,7 +51,7 @@
     "yaml": "2.7.0"
   },
   "devDependencies": {
-    "@shopify/theme-hot-reload": "^0.0.11",
+    "@shopify/theme-hot-reload": "^0.0.18",
     "@vitest/coverage-istanbul": "^1.6.0",
     "node-stream-zip": "^1.15.0"
   },

packages/theme/src/cli/utilities/theme-environment/hot-reload/server.test.ts

@@ -91,7 +91,7 @@ describe('Hot Reload', () => {
 
       const expectedSectionEvent = `data: {"sync":"local","themeId":"${THEME_ID}","type":"update","key":"${testSectionFileKey}","payload":{"sectionNames":["first","second"],"replaceTemplates":${JSON.stringify(
         getInMemoryTemplates(ctx),
-      )}},"version":"${HOT_RELOAD_VERSION}"}`
+      )},"updatedFileParts":{"stylesheetTag":false,"javascriptTag":false}},"version":"${HOT_RELOAD_VERSION}"}`
 
       // Verify local sync event
       expect(hotReloadEvents.at(-1)).toMatch(expectedSectionEvent)
@@ -142,7 +142,7 @@ describe('Hot Reload', () => {
       // Since this is a template, sectionNames will be empty (no sections to reload)
       const expectedTemplateEvent = `data: {"sync":"local","themeId":"${THEME_ID}","type":"update","key":"${templateKey}","payload":{"sectionNames":[],"replaceTemplates":${JSON.stringify(
         getInMemoryTemplates(ctx),
-      )}},"version":"${HOT_RELOAD_VERSION}"}`
+      )},"updatedFileParts":{"stylesheetTag":false,"javascriptTag":false}},"version":"${HOT_RELOAD_VERSION}"}`
 
       // Verify local sync event for JSON update
       expect(hotReloadEvents.at(-1)).toMatch(expectedTemplateEvent)
@@ -163,7 +163,7 @@ describe('Hot Reload', () => {
       // Since this is a section group, sectionNames will contain all the section names
       const expectedSectionGroupEvent = `data: {"sync":"local","themeId":"${THEME_ID}","type":"update","key":"${sectionGroupKey}","payload":{"sectionNames":["first","second"],"replaceTemplates":${JSON.stringify(
         getInMemoryTemplates(ctx),
-      )}},"version":"${HOT_RELOAD_VERSION}"}`
+      )},"updatedFileParts":{"stylesheetTag":false,"javascriptTag":false}},"version":"${HOT_RELOAD_VERSION}"}`
 
       // Verify local sync event for JSON update
       expect(hotReloadEvents.at(-1)).toMatch(expectedSectionGroupEvent)
@@ -178,7 +178,7 @@ describe('Hot Reload', () => {
       expect(hotReloadEvents.at(-1)).toMatch(
         `data: {"sync":"local","themeId":"${THEME_ID}","type":"update","key":"${anotherSectionKey}","payload":{"sectionNames":["first","second"],"replaceTemplates":${JSON.stringify(
           getInMemoryTemplates(ctx),
-        )}},"version":"${HOT_RELOAD_VERSION}"}`,
+        )},"updatedFileParts":{"stylesheetTag":false,"javascriptTag":false}},"version":"${HOT_RELOAD_VERSION}"}`,
       )
       // Wait for remote sync
       await nextTick()
@@ -197,7 +197,7 @@ describe('Hot Reload', () => {
       expect(getInMemoryTemplates(ctx)).toEqual({[anotherSectionKey]: 'default-value'})
       const expectedUnreferencedSectionEvent = `data: {"sync":"local","themeId":"${THEME_ID}","type":"update","key":"${anotherSectionKey}","payload":{"sectionNames":[],"replaceTemplates":${JSON.stringify(
         getInMemoryTemplates(ctx),
-      )}},"version":"${HOT_RELOAD_VERSION}"}`
+      )},"updatedFileParts":{"stylesheetTag":false,"javascriptTag":false}},"version":"${HOT_RELOAD_VERSION}"}`
       expect(hotReloadEvents.at(-1)).toMatch(expectedUnreferencedSectionEvent)
       await nextTick()
       expect(hotReloadEvents.at(-1)).toMatch(expectedUnreferencedSectionEvent.replace('local', 'remote'))
@@ -207,7 +207,7 @@ describe('Hot Reload', () => {
       await triggerFileEvent('add', cssFileKey)
       // It does not add assets to the in-memory templates:
       expect(getInMemoryTemplates(ctx)).toEqual({})
-      const expectedCssEvent = `data: {"sync":"local","themeId":"${THEME_ID}","type":"update","key":"${cssFileKey}","payload":{"sectionNames":[],"replaceTemplates":{}},"version":"${HOT_RELOAD_VERSION}"}`
+      const expectedCssEvent = `data: {"sync":"local","themeId":"${THEME_ID}","type":"update","key":"${cssFileKey}","payload":{"sectionNames":[],"replaceTemplates":{},"updatedFileParts":{"stylesheetTag":false,"javascriptTag":false}},"version":"${HOT_RELOAD_VERSION}"}`
       expect(hotReloadEvents.at(-1)).toMatch(expectedCssEvent)
       // Wait for remote sync
       await nextTick()
@@ -218,7 +218,7 @@ describe('Hot Reload', () => {
       await triggerFileEvent('add', cssLiquidFileKey)
       // It does not add assets to the in-memory templates:
       expect(getInMemoryTemplates(ctx)).toEqual({})
-      const expectedCssLiquidEvent = `data: {"sync":"local","themeId":"${THEME_ID}","type":"update","key":"${cssLiquidFileKey}","payload":{"sectionNames":[],"replaceTemplates":{}},"version":"${HOT_RELOAD_VERSION}"}`
+      const expectedCssLiquidEvent = `data: {"sync":"local","themeId":"${THEME_ID}","type":"update","key":"${cssLiquidFileKey}","payload":{"sectionNames":[],"replaceTemplates":{},"updatedFileParts":{"stylesheetTag":false,"javascriptTag":false}},"version":"${HOT_RELOAD_VERSION}"}`
       expect(hotReloadEvents.at(-1)).toMatch(expectedCssLiquidEvent)
       // Wait for remote sync
       await nextTick()
@@ -227,7 +227,7 @@ describe('Hot Reload', () => {
       // -- Test other file types (e.g. JS) --
       const jsFileKey = 'assets/something.js'
       await triggerFileEvent('add', jsFileKey)
-      const expectedJsEvent = `data: {"sync":"local","themeId":"${THEME_ID}","type":"update","key":"${jsFileKey}","payload":{"sectionNames":[],"replaceTemplates":{}},"version":"${HOT_RELOAD_VERSION}"}`
+      const expectedJsEvent = `data: {"sync":"local","themeId":"${THEME_ID}","type":"update","key":"${jsFileKey}","payload":{"sectionNames":[],"replaceTemplates":{},"updatedFileParts":{"stylesheetTag":false,"javascriptTag":false}},"version":"${HOT_RELOAD_VERSION}"}`
       expect(hotReloadEvents.at(-1)).toMatch(expectedJsEvent)
       // Wait for remote sync
       await nextTick()

packages/theme/src/cli/utilities/theme-environment/hot-reload/server.ts

@@ -17,16 +17,26 @@ import {renderError, renderInfo, renderWarning} from '@shopify/cli-kit/node/ui'
 import {extname, joinPath} from '@shopify/cli-kit/node/path'
 import {parseJSON} from '@shopify/theme-check-node'
 import {readFile} from '@shopify/cli-kit/node/fs'
+import {NodeTypes, toLiquidHtmlAST, walk} from '@shopify/liquid-html-parser'
 import EventEmitter from 'node:events'
 import type {
   HotReloadEvent,
   HotReloadFileEvent,
   HotReloadOpenEvent,
   HotReloadFullEvent,
 } from '@shopify/theme-hot-reload'
-import type {Theme, ThemeFSEventPayload} from '@shopify/cli-kit/node/themes/types'
+import type {Theme, ThemeAsset, ThemeFSEventPayload} from '@shopify/cli-kit/node/themes/types'
 import type {DevServerContext} from '../types.js'
 
+// --- Section tag content cache ---
+
+interface TagContent {
+  content: string
+  changed: boolean
+}
+
+const tagContentCache = new Map<string, {checksum: string; stylesheet: TagContent; javascript: TagContent}>()
+
 // --- Template Replacers ---
 
 /** Store existing section names and types read from JSON files in the project */
@@ -352,6 +362,7 @@ function collectReloadInfoForFile(key: string, ctx: DevServerContext) {
   return {
     sectionNames: type === 'sections' ? findSectionNamesToReload(key, ctx) : [],
     replaceTemplates: needsTemplateUpdate(key) ? getInMemoryTemplates(ctx) : {},
+    updatedFileParts: getUpdatedFileParts(key, ctx),
   }
 }
 
@@ -392,3 +403,52 @@ export function handleHotReloadScriptInjection(html: string, ctx: DevServerConte
 function isAsset(key: string) {
   return key.startsWith('assets/')
 }
+
+function getUpdatedFileParts(key: string, ctx: DevServerContext): {stylesheetTag: boolean; javascriptTag: boolean} {
+  const file = ctx.localThemeFileSystem.files.get(key)
+  const validPrefixes = ['sections/', 'snippets/', 'blocks/']
+  const isValidFileType = validPrefixes.some((prefix) => key.startsWith(prefix)) && key.endsWith('.liquid')
+
+  if (!file || !isValidFileType) {
+    return {stylesheetTag: false, javascriptTag: false}
+  }
+
+  const tagContents = getTagContents(file)
+
+  return {
+    stylesheetTag: tagContents.stylesheet.changed,
+    javascriptTag: tagContents.javascript.changed,
+  }
+}
+
+function getTagContents(file: ThemeAsset) {
+  const cached = tagContentCache.get(file.key)
+  const cacheEntry = {
+    checksum: file.checksum,
+    stylesheet: {content: '', changed: false},
+    javascript: {content: '', changed: false},
+  }
+
+  if (cached?.checksum === file.checksum) {
+    return cached
+  }
+
+  tagContentCache.delete(file.key)
+
+  if (!file.value) return cacheEntry
+
+  walk(toLiquidHtmlAST(file.value), (node) => {
+    if (node.type !== NodeTypes.LiquidRawTag) return
+
+    if (node.name === 'stylesheet' || node.name === 'javascript') {
+      const content = node.body.value
+      const changed = !cached || content !== cached[node.name].content
+
+      cacheEntry[node.name] = {content, changed}
+    }
+  })
+
+  tagContentCache.set(file.key, cacheEntry)
+
+  return cacheEntry
+}