Fix hot module reloading for theme development

.changeset/fix-theme-editor-hot-reload-cors.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Fix `theme dev` hot reload not working in the theme editor by allowing the Online Store Editor origin through the dev server's CORS policy

.changeset/perky-melons-arrive.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Bump @shopify/theme-hot-reload to address HMR issues

packages/theme/package.json

@@ -49,7 +49,7 @@
     "yaml": "2.8.3"
   },
   "devDependencies": {
-    "@shopify/theme-hot-reload": "^0.0.18",
+    "@shopify/theme-hot-reload": "^0.0.22",
     "@vitest/coverage-istanbul": "^3.1.4",
     "node-stream-zip": "^1.15.0"
   },

packages/theme/src/cli/utilities/theme-environment/theme-environment.test.ts

@@ -257,6 +257,27 @@ describe('setupDevServer', () => {
       expect(vi.mocked(render)).not.toHaveBeenCalled()
     })
 
+    test('CORS allows the theme editor (Online Store Editor) origin so hot reload works in the editor', async () => {
+      const {res} = await dispatchEvent('/assets/file2.css', {origin: 'https://online-store-web.shopifyapps.com'})
+      expect(res.getHeader('access-control-allow-origin')).toEqual('https://online-store-web.shopifyapps.com')
+    })
+
+    test('CORS allows the storefront origin', async () => {
+      const origin = `https://${defaultServerContext.session.storeFqdn}`
+      const {res} = await dispatchEvent('/assets/file2.css', {origin})
+      expect(res.getHeader('access-control-allow-origin')).toEqual(origin)
+    })
+
+    test('CORS does not allow unknown origins', async () => {
+      const {res} = await dispatchEvent('/assets/file2.css', {origin: 'https://evil.example.com'})
+      expect(res.getHeader('access-control-allow-origin')).toBeUndefined()
+    })
+
+    test('CORS does not set headers on direct navigation without an Origin header', async () => {
+      const {res} = await dispatchEvent('/assets/file2.css')
+      expect(res.getHeader('access-control-allow-origin')).toBeUndefined()
+    })
+
     test('serves proxied local assets', async () => {
       const eventPromise = dispatchEvent('/cdn/somepathhere/assets/file1.css')
       await expect(eventPromise).resolves.not.toThrow()

packages/theme/src/cli/utilities/theme-environment/theme-environment.ts

@@ -130,7 +130,12 @@ interface DevelopmentServerInstance {
 
 function createDevelopmentServer(theme: Theme, ctx: DevServerContext, initialWork: Promise<void>) {
   const app = createApp()
-  const allowedOrigins = [`http://${ctx.options.host}:${ctx.options.port}`, `https://${ctx.session.storeFqdn}`]
+  const allowedOrigins = [
+    `http://${ctx.options.host}:${ctx.options.port}`,
+    `https://${ctx.session.storeFqdn}`,
+    // Required for HMR with the theme editor
+    'https://online-store-web.shopifyapps.com',
+  ]
 
   app.use(
     defineLazyEventHandler(async () => {