Surface rewritten liquid files to dev and push commands

aswamy · aswamy · commit c53847858906 · 2025-10-16T17:05:11.000-04:00
diff --git a/packages/cli-kit/src/cli/api/graphql/admin/generated/theme_files_upsert.ts b/packages/cli-kit/src/cli/api/graphql/admin/generated/theme_files_upsert.ts
@@ -10,7 +10,7 @@ export type ThemeFilesUpsertMutationVariables = Types.Exact<{
 
 export type ThemeFilesUpsertMutation = {
   themeFilesUpsert?: {
-    upsertedThemeFiles?: {filename: string}[] | null
+    upsertedThemeFiles?: {filename: string; checksumMd5?: string | null}[] | null
     userErrors: {filename?: string | null; message: string}[]
   } | null
 }
@@ -71,6 +71,7 @@ export const ThemeFilesUpsert = {
                     kind: 'SelectionSet',
                     selections: [
                       {kind: 'Field', name: {kind: 'Name', value: 'filename'}},
+                      {kind: 'Field', name: {kind: 'Name', value: 'checksumMd5'}},
                       {kind: 'Field', name: {kind: 'Name', value: '__typename'}},
                     ],
                   },
diff --git a/packages/cli-kit/src/cli/api/graphql/admin/mutations/theme_files_upsert.graphql b/packages/cli-kit/src/cli/api/graphql/admin/mutations/theme_files_upsert.graphql
@@ -2,6 +2,7 @@ mutation themeFilesUpsert($files: [OnlineStoreThemeFilesUpsertFileInput!]!, $the
   themeFilesUpsert(files: $files, themeId: $themeId) {
     upsertedThemeFiles {
       filename
+      checksumMd5
     }
     userErrors {
       filename
diff --git a/packages/cli-kit/src/public/node/themes/api.test.ts b/packages/cli-kit/src/public/node/themes/api.test.ts
@@ -553,11 +553,19 @@ describe('bulkUploadThemeAssets', async () => {
         key: 'snippets/product-variant-picker.liquid',
         success: true,
         operation: Operation.Upload,
+        asset: {
+          checksum: '',
+          key: 'snippets/product-variant-picker.liquid',
+        },
       },
       {
         key: 'templates/404.json',
         success: true,
         operation: Operation.Upload,
+        asset: {
+          checksum: '',
+          key: 'templates/404.json',
+        },
       },
     ])
   })
diff --git a/packages/cli-kit/src/public/node/themes/api.ts b/packages/cli-kit/src/public/node/themes/api.ts
@@ -315,6 +315,10 @@ function processUploadResults(uploadResults: ThemeFilesUpsertMutation): Result[]
       key: file.filename,
       success: true,
       operation: Operation.Upload,
+      asset: {
+        key: file.filename,
+        checksum: file.checksumMd5 ?? '',
+      },
     })
   })
 
diff --git a/packages/theme/src/cli/services/dev.ts b/packages/theme/src/cli/services/dev.ts
@@ -100,14 +100,15 @@ export async function dev(options: DevOptions) {
     session.storefrontPassword = await storefrontPasswordPromise
   }
 
-  const {serverStart, renderDevSetupProgress} = setupDevServer(options.theme, ctx)
+  const {serverStart, renderDevSetupProgress, syncRewrittenFilesPromise} = setupDevServer(options.theme, ctx)
 
   if (!options['theme-editor-sync']) {
     session.storefrontPassword = await storefrontPasswordPromise
   }
 
   await renderDevSetupProgress()
   await serverStart()
+  await syncRewrittenFilesPromise()
 
   renderLinks(urls)
   if (options.open) {
diff --git a/packages/theme/src/cli/services/push.ts b/packages/theme/src/cli/services/push.ts
@@ -210,7 +210,10 @@ async function executePush(
     session,
     themeChecksums,
     themeFileSystem,
-    options,
+    {
+      ...options,
+      handleRewrittenFiles: 'warn',
+    },
     context,
   )
 
diff --git a/packages/theme/src/cli/utilities/theme-downloader.ts b/packages/theme/src/cli/utilities/theme-downloader.ts
@@ -86,7 +86,12 @@ function buildDownloadTasks(
   return batches
 }
 
-async function downloadFiles(theme: Theme, fileSystem: ThemeFileSystem, filenames: string[], session: AdminSession) {
+export async function downloadFiles(
+  theme: Theme,
+  fileSystem: ThemeFileSystem,
+  filenames: string[],
+  session: AdminSession,
+) {
   const assets = await fetchThemeAssets(theme.id, filenames, session)
   if (!assets) return
 
diff --git a/packages/theme/src/cli/utilities/theme-environment/theme-environment.test.ts b/packages/theme/src/cli/utilities/theme-environment/theme-environment.test.ts
@@ -34,7 +34,12 @@ vi.mock('../theme-uploader.js', async () => {
 })
 beforeEach(() => {
   vi.mocked(uploadTheme).mockImplementation(() => {
-    return {workPromise: Promise.resolve(), uploadResults: new Map(), renderThemeSyncProgress: () => Promise.resolve()}
+    return {
+      workPromise: Promise.resolve(),
+      uploadResults: new Map(),
+      renderThemeSyncProgress: () => Promise.resolve(),
+      syncRewrittenFilesPromise: Promise.resolve(),
+    }
   })
 })
 
@@ -125,6 +130,7 @@ describe('setupDevServer', () => {
       nodelete: true,
       deferPartialWork: true,
       backgroundWorkCatch: expect.any(Function),
+      handleRewrittenFiles: 'fix',
     })
   })
 
@@ -175,6 +181,7 @@ describe('setupDevServer', () => {
       nodelete: true,
       deferPartialWork: true,
       backgroundWorkCatch: expect.any(Function),
+      handleRewrittenFiles: 'fix',
     })
   })
 
diff --git a/packages/theme/src/cli/utilities/theme-environment/theme-environment.ts b/packages/theme/src/cli/utilities/theme-environment/theme-environment.ts
@@ -25,6 +25,7 @@ export function setupDevServer(theme: Theme, ctx: DevServerContext) {
     serverStart: server.start,
     dispatchEvent: server.dispatch,
     renderDevSetupProgress: envSetup.renderProgress,
+    syncRewrittenFilesPromise: () => envSetup.syncRewrittenFilesPromise,
   }
 }
 
@@ -44,6 +45,7 @@ function ensureThemeEnvironmentSetup(theme: Theme, ctx: DevServerContext) {
         nodelete: ctx.options.noDelete,
         deferPartialWork: true,
         backgroundWorkCatch: abort,
+        handleRewrittenFiles: 'fix',
       })
     })
     .catch(abort)
@@ -67,6 +69,7 @@ function ensureThemeEnvironmentSetup(theme: Theme, ctx: DevServerContext) {
 
       await renderThemeSyncProgress()
     },
+    syncRewrittenFilesPromise: uploadPromise.then((result) => result.syncRewrittenFilesPromise).catch(abort),
   }
 }
 
diff --git a/packages/theme/src/cli/utilities/theme-fs.ts b/packages/theme/src/cli/utilities/theme-fs.ts
@@ -7,10 +7,17 @@ import {DEFAULT_IGNORE_PATTERNS, timestampDateFormat} from '../constants.js'
 import {glob, readFile, ReadOptions, fileExists, mkdir, writeFile, removeFile} from '@shopify/cli-kit/node/fs'
 import {joinPath, basename, relativePath} from '@shopify/cli-kit/node/path'
 import {lookupMimeType, setMimeTypes} from '@shopify/cli-kit/node/mimes'
-import {outputContent, outputDebug, outputInfo, outputToken, outputWarn} from '@shopify/cli-kit/node/output'
+import {
+  outputContent,
+  outputDebug,
+  outputInfo,
+  outputToken,
+  outputWarn,
+  TokenizedString,
+} from '@shopify/cli-kit/node/output'
 import {buildThemeAsset} from '@shopify/cli-kit/node/themes/factories'
 import {AdminSession} from '@shopify/cli-kit/node/session'
-import {bulkUploadThemeAssets, deleteThemeAssets} from '@shopify/cli-kit/node/themes/api'
+import {bulkUploadThemeAssets, deleteThemeAssets, fetchThemeAssets} from '@shopify/cli-kit/node/themes/api'
 import EventEmitter from 'node:events'
 import {fileURLToPath} from 'node:url'
 import type {
@@ -125,6 +132,19 @@ export function mountThemeFileSystem(root: string, options?: ThemeFileSystemOpti
     return notifier?.notify(fileKey) ?? Promise.resolve()
   }
 
+  const write = async (asset: ThemeAsset) => {
+    files.set(
+      asset.key,
+      buildThemeAsset({
+        key: asset.key,
+        checksum: asset.checksum,
+        value: asset.value ?? '',
+        attachment: asset.attachment ?? '',
+      }),
+    )
+    await writeThemeFile(root, asset)
+  }
+
   const handleFileUpdate = (
     eventName: 'add' | 'change',
     themeId: string,
@@ -152,14 +172,15 @@ export function mountThemeFileSystem(root: string, options?: ThemeFileSystemOpti
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         value: file.value || undefined,
         attachment: file.attachment,
+        checksum: file.checksum,
       }
     })
 
     const syncPromise = contentPromise
       .then((content) => {
         if (!content) return
 
-        return handleSyncUpdate(unsyncedFileKeys, uploadErrors, fileKey, themeId, adminSession)(content)
+        return handleSyncUpdate(unsyncedFileKeys, uploadErrors, fileKey, themeId, adminSession, write)(content)
       })
       .catch(createSyncingCatchError(fileKey, 'upload'))
 
@@ -242,18 +263,7 @@ export function mountThemeFileSystem(root: string, options?: ThemeFileSystemOpti
       files.delete(fileKey)
       await removeThemeFile(root, fileKey)
     },
-    write: async (asset: ThemeAsset) => {
-      files.set(
-        asset.key,
-        buildThemeAsset({
-          key: asset.key,
-          checksum: asset.checksum,
-          value: asset.value ?? '',
-          attachment: asset.attachment ?? '',
-        }),
-      )
-      await writeThemeFile(root, asset)
-    },
+    write,
     read,
     applyIgnoreFilters: (files) => applyIgnoreFilters(files, filterPatterns),
     addEventListener: (eventName, cb) => {
@@ -282,7 +292,8 @@ export function handleSyncUpdate(
   fileKey: string,
   themeId: string,
   adminSession: AdminSession,
-): (content: {value?: string; attachment?: string}) => PromiseLike<boolean> {
+  write: (asset: ThemeAsset) => Promise<void>,
+): (content: {value?: string; attachment?: string; checksum: string}) => PromiseLike<boolean> {
   return async (content) => {
     if (!unsyncedFileKeys.has(fileKey)) {
       return false
@@ -306,6 +317,15 @@ export function handleSyncUpdate(
     unsyncedFileKeys.delete(fileKey)
     outputSyncResult('update', fileKey)
 
+    if (content.checksum !== result?.asset?.checksum) {
+      const [remoteAsset] = await fetchThemeAssets(Number(themeId), [fileKey], adminSession)
+
+      if (remoteAsset) {
+        await write(remoteAsset)
+        outputSyncResult('rewrite', fileKey)
+      }
+    }
+
     return true
   }
 }
@@ -462,10 +482,18 @@ function dirPath(filePath: string) {
   return filePath.substring(0, fileNameIndex)
 }
 
-function outputSyncResult(action: 'update' | 'delete', fileKey: string): void {
-  outputInfo(
-    outputContent`• ${timestampDateFormat.format(new Date())}  Synced ${outputToken.raw('»')} ${action} ${fileKey}`,
-  )
+function outputSyncResult(action: 'update' | 'delete' | 'rewrite', fileKey: string): void {
+  let content: TokenizedString
+
+  if (action === 'rewrite') {
+    content = outputContent`• ${timestampDateFormat.format(new Date())}  Overwritten locally ${fileKey}`
+  } else {
+    content = outputContent`• ${timestampDateFormat.format(new Date())}  Synced ${outputToken.raw(
+      '»',
+    )} ${action} ${fileKey}`
+  }
+
+  outputInfo(content)
 }
 
 export function inferLocalHotReloadScriptPath() {
diff --git a/packages/theme/src/cli/utilities/theme-uploader.ts b/packages/theme/src/cli/utilities/theme-uploader.ts
@@ -3,10 +3,11 @@ import {rejectGeneratedStaticAssets} from './asset-checksum.js'
 import {createSyncingCatchError, renderThrownError} from './errors.js'
 import {triggerBrowserFullReload} from './theme-environment/hot-reload/server.js'
 import {renderTasksToStdErr} from './theme-ui.js'
+import {downloadFiles} from './theme-downloader.js'
 import {AdminSession} from '@shopify/cli-kit/node/session'
 import {Result, Checksum, Theme, ThemeFileSystem} from '@shopify/cli-kit/node/themes/types'
 import {AssetParams, bulkUploadThemeAssets, deleteThemeAssets} from '@shopify/cli-kit/node/themes/api'
-import {Task} from '@shopify/cli-kit/node/ui'
+import {renderInfo, Task} from '@shopify/cli-kit/node/ui'
 import {outputDebug} from '@shopify/cli-kit/node/output'
 import {recordEvent} from '@shopify/cli-kit/node/analytics'
 import {Writable} from 'stream'
@@ -17,6 +18,7 @@ interface UploadOptions {
   backgroundWorkCatch?: (error: Error) => never
   environment?: string
   multiEnvironment?: boolean
+  handleRewrittenFiles?: 'warn' | 'fix'
 }
 
 type ChecksumWithSize = Checksum & {size: number}
@@ -60,7 +62,7 @@ export function uploadTheme(
     .then(() => buildDeleteJob(remoteChecksums, themeFileSystem, theme, session, options, uploadResults))
 
   const workPromise = options?.deferPartialWork
-    ? themeCreationPromise
+    ? themeCreationPromise.then(() => {})
     : deleteJobPromise.then((result) => result.promise)
 
   if (options?.backgroundWorkCatch) {
@@ -72,9 +74,66 @@ export function uploadTheme(
     ]).catch(options.backgroundWorkCatch)
   }
 
+  const syncRewrittenFilesPromise = options?.handleRewrittenFiles
+    ? Promise.all([themeFileSystem.ready(), themeCreationPromise, uploadJobPromise, deleteJobPromise]).then(
+        async ([_, _themeCreationResults, _uploadJob, _deleteJob]) => {
+          const filesDifferentFromRemote: string[] = []
+
+          for (const uploadResult of uploadResults.values()) {
+            if (!uploadResult.key.endsWith('.liquid')) continue
+
+            const localFile = themeFileSystem.files.get(uploadResult.key)
+
+            if (
+              localFile &&
+              uploadResult.success &&
+              uploadResult.asset?.checksum &&
+              uploadResult.asset.checksum !== localFile.checksum
+            ) {
+              filesDifferentFromRemote.push(uploadResult.key)
+            }
+          }
+
+          if (filesDifferentFromRemote.length > 0) {
+            if (options.handleRewrittenFiles === 'fix') {
+              renderInfo({
+                headline: `Updated Liquid files to conform to latest Liquid standards.`,
+                body: [
+                  `The following Liquid files were updated locally and remotely:`,
+                  {
+                    list: {
+                      items: filesDifferentFromRemote,
+                    },
+                  },
+                ],
+              })
+              await downloadFiles(theme, themeFileSystem, filesDifferentFromRemote, session)
+            } else if (options.handleRewrittenFiles === 'warn') {
+              renderInfo({
+                headline: `Liquid files were updated remotely to conform to latest Liquid standards.`,
+                body: [
+                  'The following Liquid files were updated remotely. Fetch the latest files using',
+                  {
+                    command: 'shopify theme pull',
+                  },
+                  'to sync them locally.',
+                  {
+                    list: {
+                      items: filesDifferentFromRemote,
+                    },
+                  },
+                ],
+              })
+            }
+          }
+        },
+      )
+    : Promise.resolve()
+
   return {
     uploadResults,
     workPromise,
+    syncRewrittenFilesPromise,
     renderThemeSyncProgress: async () => {
       if (options?.deferPartialWork) return
 
@@ -237,9 +296,7 @@ async function ensureThemeCreation(theme: Theme, session: AdminSession, remoteCh
   const remoteAssetKeys = new Set(remoteChecksums.map((checksum) => checksum.key))
   const missingAssets = MINIMUM_THEME_ASSETS.filter(({key}) => !remoteAssetKeys.has(key))
 
-  if (missingAssets.length > 0) {
-    await bulkUploadThemeAssets(theme.id, missingAssets, session)
-  }
+  return bulkUploadThemeAssets(theme.id, missingAssets, session)
 }
 
 interface SyncJob {

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ mutation themeFilesUpsert($files: [OnlineStoreThemeFilesUpsertFileInput!]!, $the`
`2`	`2`	`themeFilesUpsert(files: $files, themeId: $themeId) {`
`3`	`3`	`upsertedThemeFiles {`
`4`	`4`	`filename`
	`5`	`+ checksumMd5`
`5`	`6`	`}`
`6`	`7`	`userErrors {`
`7`	`8`	`filename`
Original file line number	Diff line number	Diff line change
`@@ -100,14 +100,15 @@ export async function dev(options: DevOptions) {`
`100`	`100`	`session.storefrontPassword = await storefrontPasswordPromise`
`101`	`101`	`}`
`102`	`102`
`103`		`- const {serverStart, renderDevSetupProgress} = setupDevServer(options.theme, ctx)`
	`103`	`+ const {serverStart, renderDevSetupProgress, syncRewrittenFilesPromise} = setupDevServer(options.theme, ctx)`
`104`	`104`
`105`	`105`	`if (!options['theme-editor-sync']) {`
`106`	`106`	`session.storefrontPassword = await storefrontPasswordPromise`
`107`	`107`	`}`
`108`	`108`
`109`	`109`	`await renderDevSetupProgress()`
`110`	`110`	`await serverStart()`
	`111`	`+ await syncRewrittenFilesPromise()`
`111`	`112`
`112`	`113`	`renderLinks(urls)`
`113`	`114`	`if (options.open) {`
Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@ export function setupDevServer(theme: Theme, ctx: DevServerContext) {`
`25`	`25`	`serverStart: server.start,`
`26`	`26`	`dispatchEvent: server.dispatch,`
`27`	`27`	`renderDevSetupProgress: envSetup.renderProgress,`
	`28`	`+ syncRewrittenFilesPromise: () => envSetup.syncRewrittenFilesPromise,`
`28`	`29`	`}`
`29`	`30`	`}`
`30`	`31`
`@@ -44,6 +45,7 @@ function ensureThemeEnvironmentSetup(theme: Theme, ctx: DevServerContext) {`
`44`	`45`	`nodelete: ctx.options.noDelete,`
`45`	`46`	`deferPartialWork: true,`
`46`	`47`	`backgroundWorkCatch: abort,`
	`48`	`+ handleRewrittenFiles: 'fix',`
`47`	`49`	`})`
`48`	`50`	`})`
`49`	`51`	`.catch(abort)`
`@@ -67,6 +69,7 @@ function ensureThemeEnvironmentSetup(theme: Theme, ctx: DevServerContext) {`
`67`	`69`
`68`	`70`	`await renderThemeSyncProgress()`
`69`	`71`	`},`
	`72`	`+ syncRewrittenFilesPromise: uploadPromise.then((result) => result.syncRewrittenFilesPromise).catch(abort),`
`70`	`73`	`}`
`71`	`74`	`}`
`72`	`75`