Merge pull request #4432 from Shopify/jm/patch-watcher-init

[Themes] - Theme Dev - Reduce API calls and IO operations triggered from theme reconciliation step
Shopify · Sep 18, 2024 · 6669c25 · 6669c25
2 parents ec86e77 + 60f895a
commit 6669c25
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.test.ts b/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.test.ts
@@ -32,7 +32,7 @@ describe('hot-reload server', () => {
  files: [[assetJsonKey, JSON.stringify(assetJsonValue)]],
  })
 
- await setupInMemoryTemplateWatcher(mockTheme, ctx)
+ await setupInMemoryTemplateWatcher(ctx)
  const {event: subscribeEvent, data: hotReloadEvents} = createH3Event('/__hot-reload/subscribe')
  const streamPromise = hotReloadHandler(subscribeEvent)
  // Next tick to flush the connection:

diff --git a/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.ts b/packages/theme/src/cli/utilities/theme-environment/hot-reload/server.ts
@@ -91,7 +91,7 @@ export function getInMemoryTemplates(ctx: DevServerContext, currentRoute?: strin
  * Watchs for file changes and updates in-memory templates, triggering
  * HotReload if needed.
  */
-export function setupInMemoryTemplateWatcher(theme: Theme, ctx: DevServerContext) {
+export function setupInMemoryTemplateWatcher(ctx: DevServerContext) {
  const handleFileUpdate = ({fileKey, onContent, onSync}: ThemeFSEventPayload) => {
  const extension = extname(fileKey)
  const isAsset = fileKey.startsWith('assets/')
@@ -128,7 +128,6 @@ export function setupInMemoryTemplateWatcher(theme: Theme, ctx: DevServerContext
  // is reloaded, we can quickly find what to update in the DOM without
  // spending time reading files.
  return ctx.localThemeFileSystem.ready().then(async () => {
- await ctx.localThemeFileSystem.startWatcher(theme.id.toString(), ctx.session)
  const files = [...ctx.localThemeFileSystem.files]
  return Promise.allSettled(
  files.map(async ([fileKey, file]) => {

diff --git a/packages/theme/src/cli/utilities/theme-environment/theme-environment.ts b/packages/theme/src/cli/utilities/theme-environment/theme-environment.ts
@@ -12,9 +12,11 @@ import type {Checksum, Theme} from '@shopify/cli-kit/node/themes/types'
 import type {DevServerContext} from './types.js'
 
 export function setupDevServer(theme: Theme, ctx: DevServerContext) {
- const watcherPromise = setupInMemoryTemplateWatcher(theme, ctx)
+ const watcherPromise = setupInMemoryTemplateWatcher(ctx)
  const envSetup = ensureThemeEnvironmentSetup(theme, ctx)
- const workPromise = Promise.all([watcherPromise, envSetup.workPromise]).then(() => {})
+ const workPromise = Promise.all([watcherPromise, envSetup.workPromise]).then(() =>
+ ctx.localThemeFileSystem.startWatcher(theme.id.toString(), ctx.session),
+ )
  const server = createDevelopmentServer(theme, ctx, workPromise)
 
  return {

diff --git a/packages/theme/src/cli/utilities/theme-fs.test.ts b/packages/theme/src/cli/utilities/theme-fs.test.ts
@@ -181,6 +181,8 @@ describe('theme-fs', () => {
  key: 'assets/new_file.css',
  checksum: '1010',
  value: 'content',
+ stats: {size: 7, mtime: expect.any(Number)},
+ attachment: '',
  })
  })
 
@@ -203,6 +205,8 @@ describe('theme-fs', () => {
  key: 'assets/new_image.gif',
  checksum: '1010',
  attachment,
+ value: '',
+ stats: {size: 6, mtime: expect.any(Number)},
  })
  })
 
@@ -216,7 +220,13 @@ describe('theme-fs', () => {
 
  let filesUpdated = false
  vi.mocked(writeFile).mockImplementationOnce(() => {
- filesUpdated = themeFileSystem.files.get(newAsset.key) === newAsset
+ expect(themeFileSystem.files.get(newAsset.key)).toEqual({
+ ...newAsset,
+ attachment: '',
+ stats: {size: 7, mtime: expect.any(Number)},
+ })
+ filesUpdated = true
+
  return Promise.resolve()
  })
 

diff --git a/packages/theme/src/cli/utilities/theme-fs.ts b/packages/theme/src/cli/utilities/theme-fs.ts
@@ -219,7 +219,15 @@ export function mountThemeFileSystem(root: string, options?: ThemeFileSystemOpti
  await removeThemeFile(root, fileKey)
  },
  write: async (asset: ThemeAsset) => {
- files.set(asset.key, asset)
+ files.set(
+ asset.key,
+ buildThemeAsset({
+ key: asset.key,
+ checksum: asset.checksum,
+ value: asset.value ?? '',
+ attachment: asset.attachment ?? '',
+ }),
+ )
  await writeThemeFile(root, asset)
  },
  read,