diff --git a/package-lock.json b/package-lock.json index 7f614a391f..d4311914cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33419,7 +33419,8 @@ "source-map-support": "^0.5.21", "tiny-invariant": "^1.3.1", "type-fest": "^4.5.0", - "use-resize-observer": "^9.1.0" + "use-resize-observer": "^9.1.0", + "worktop": "^0.7.3" }, "devDependencies": { "@remix-run/dev": "^2.9.2", @@ -41851,7 +41852,8 @@ "tiny-invariant": "^1.3.1", "type-fest": "^4.5.0", "use-resize-observer": "^9.1.0", - "vitest": "^1.0.4" + "vitest": "^1.0.4", + "worktop": "^0.7.3" }, "dependencies": { "type-fest": { diff --git a/packages/cli/package.json b/packages/cli/package.json index 0027f22dae..32520f2ad0 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -9,7 +9,7 @@ "type": "module", "scripts": { "build": "tsup && node scripts/build-check.mjs", - "dev": "tsup --watch ./src", + "dev": "tsup --watch ./src --watch ../../templates/skeleton", "typecheck": "tsc --noEmit", "generate:manifest": "node scripts/generate-manifest.mjs", "test": "cross-env SHOPIFY_UNIT_TEST=1 vitest run --test-timeout=20000", diff --git a/packages/cli/src/commands/hydrogen/build.ts b/packages/cli/src/commands/hydrogen/build.ts index 156eec88ec..87e6582e01 100644 --- a/packages/cli/src/commands/hydrogen/build.ts +++ b/packages/cli/src/commands/hydrogen/build.ts @@ -5,7 +5,7 @@ import {outputWarn, collectLog} from '@shopify/cli-kit/node/output'; import {fileSize, removeFile} from '@shopify/cli-kit/node/fs'; import {getPackageManager} from '@shopify/cli-kit/node/node-package-manager'; import {commonFlags, flagsToCamelObject} from '../../lib/flags.js'; -import {copyDiffBuild, prepareDiffDirectory} from '../../lib/template-diff.js'; +import {prepareDiffDirectory} from '../../lib/template-diff.js'; import {hasViteConfig, getViteConfig} from '../../lib/vite-config.js'; import {checkLockfileStatus} from '../../lib/check-lockfile.js'; import {findMissingRoutes} from '../../lib/missing-routes.js'; @@ -48,11 +48,12 @@ export default class Build extends Command { const originalDirectory = flags.path ? resolvePath(flags.path) : process.cwd(); - let directory = originalDirectory; - if (flags.diff) { - directory = await prepareDiffDirectory(originalDirectory, flags.watch); - } + const diff = flags.diff + ? await prepareDiffDirectory(originalDirectory, flags.watch) + : undefined; + + const directory = diff?.targetDirectory ?? originalDirectory; const buildParams = { ...flagsToCamelObject(flags), @@ -65,18 +66,20 @@ export default class Build extends Command { : await runClassicCompilerBuild(buildParams); if (buildParams.watch) { - if (flags.diff || result?.close) { + if (diff || result?.close) { setupResourceCleanup(async () => { await result?.close(); - if (flags.diff) { - await copyDiffBuild(directory, originalDirectory); + if (diff) { + await diff.copyDiffBuild(); + await diff.cleanup(); } }); } } else { - if (flags.diff) { - await copyDiffBuild(directory, originalDirectory); + if (diff) { + await diff.copyDiffBuild(); + await diff.cleanup(); } // The Remix compiler hangs due to a bug in ESBuild: diff --git a/packages/cli/src/commands/hydrogen/debug/cpu.ts b/packages/cli/src/commands/hydrogen/debug/cpu.ts index cdfd3a394e..1953ffca69 100644 --- a/packages/cli/src/commands/hydrogen/debug/cpu.ts +++ b/packages/cli/src/commands/hydrogen/debug/cpu.ts @@ -39,20 +39,25 @@ export default class DebugCpu extends Command { async run(): Promise { const {flags} = await this.parse(DebugCpu); - let directory = flags.path ? resolvePath(flags.path) : process.cwd(); - const output = resolvePath(directory, flags.output); + const originalDirectory = flags.path + ? resolvePath(flags.path) + : process.cwd(); - if (flags.diff) { - directory = await prepareDiffDirectory(directory, true); - } + const diff = + flags.build && flags.diff + ? await prepareDiffDirectory(originalDirectory, true) + : undefined; const {close} = await runDebugCpu({ ...flagsToCamelObject(flags), - directory, - output, + directory: diff?.targetDirectory ?? originalDirectory, + output: resolvePath(originalDirectory, flags.output), }); - setupResourceCleanup(close); + setupResourceCleanup(async () => { + await close(); + await diff?.cleanup(); + }); } } diff --git a/packages/cli/src/commands/hydrogen/deploy.ts b/packages/cli/src/commands/hydrogen/deploy.ts index ab052be3bb..c27d2f2cdb 100644 --- a/packages/cli/src/commands/hydrogen/deploy.ts +++ b/packages/cli/src/commands/hydrogen/deploy.ts @@ -49,6 +49,7 @@ import {getViteConfig} from '../../lib/vite-config.js'; import {prepareDiffDirectory} from '../../lib/template-diff.js'; import {hasRemixConfigFile} from '../../lib/remix-config.js'; import {packageManagers} from '../../lib/package-managers.js'; +import {setupResourceCleanup} from '../../lib/resource-cleanup.js'; const DEPLOY_OUTPUT_FILE_HANDLE = 'h2_deploy_log.json'; @@ -150,10 +151,9 @@ export default class Deploy extends Command { const deploymentOptions = this.flagsToOxygenDeploymentOptions(flags); if (flags.diff) { - deploymentOptions.path = await prepareDiffDirectory( - deploymentOptions.path, - false, - ); + const diff = await prepareDiffDirectory(deploymentOptions.path, false); + deploymentOptions.path = diff.targetDirectory; + setupResourceCleanup(diff.cleanup); } await runDeploy(deploymentOptions); diff --git a/packages/cli/src/commands/hydrogen/dev.ts b/packages/cli/src/commands/hydrogen/dev.ts index 3ece0ab66a..a50cf3f1d9 100644 --- a/packages/cli/src/commands/hydrogen/dev.ts +++ b/packages/cli/src/commands/hydrogen/dev.ts @@ -1,4 +1,15 @@ -import {fileURLToPath} from 'node:url'; +import type {ViteDevServer} from 'vite'; +import Command from '@shopify/cli-kit/node/base-command'; +import colors from '@shopify/cli-kit/node/colors'; +import {joinPath, resolvePath} from '@shopify/cli-kit/node/path'; +import {collectLog} from '@shopify/cli-kit/node/output'; +import { + type AlertCustomSection, + renderSuccess, + renderInfo, +} from '@shopify/cli-kit/node/ui'; +import {AbortError} from '@shopify/cli-kit/node/error'; +import {Flags, Config} from '@oclif/core'; import { enhanceH2Logs, isH2Verbose, @@ -13,20 +24,10 @@ import { flagsToCamelObject, overrideFlag, } from '../../lib/flags.js'; -import Command from '@shopify/cli-kit/node/base-command'; -import colors from '@shopify/cli-kit/node/colors'; -import {resolvePath} from '@shopify/cli-kit/node/path'; -import {collectLog} from '@shopify/cli-kit/node/output'; -import {type AlertCustomSection, renderSuccess} from '@shopify/cli-kit/node/ui'; -import {AbortError} from '@shopify/cli-kit/node/error'; -import {Flags, Config} from '@oclif/core'; import {spawnCodegenProcess} from '../../lib/codegen.js'; import {getAllEnvironmentVariables} from '../../lib/environment-variables.js'; import {displayDevUpgradeNotice} from './upgrade.js'; -import { - prepareDiffDirectory, - copyShopifyConfig, -} from '../../lib/template-diff.js'; +import {prepareDiffDirectory} from '../../lib/template-diff.js'; import { getDebugBannerLine, startTunnelAndPushConfig, @@ -35,6 +36,7 @@ import { getDevConfigInBackground, getUtilityBannerlines, TUNNEL_DOMAIN, + getRepoMeta, } from '../../lib/dev-shared.js'; import {getCliCommand} from '../../lib/shell.js'; import {findPort} from '../../lib/find-port.js'; @@ -46,6 +48,7 @@ import {importVite} from '../../lib/import-utils.js'; import {createEntryPointErrorHandler} from '../../lib/deps-optimizer.js'; import {getCodeFormatOptions} from '../../lib/format-code.js'; import {setupResourceCleanup} from '../../lib/resource-cleanup.js'; +import {removeFile} from '@shopify/cli-kit/node/fs'; export default class Dev extends Command { static descriptionWithMarkdown = `Runs a Hydrogen storefront in a local runtime that emulates an Oxygen worker for development. @@ -114,11 +117,12 @@ export default class Dev extends Command { const originalDirectory = flags.path ? resolvePath(flags.path) : process.cwd(); - let directory = originalDirectory; - if (flags.diff) { - directory = await prepareDiffDirectory(directory, true); - } + const diff = flags.diff + ? await prepareDiffDirectory(originalDirectory, true) + : undefined; + + const directory = diff?.targetDirectory ?? originalDirectory; const devParams = { ...flagsToCamelObject(flags), @@ -131,11 +135,14 @@ export default class Dev extends Command { ? await runDev(devParams) : await runClassicCompilerDev(devParams); - setupResourceCleanup(close); + setupResourceCleanup(async () => { + await close(); - if (flags.diff) { - await copyShopifyConfig(directory, originalDirectory); - } + if (diff) { + await diff.copyShopifyConfig(); + await diff.cleanup(); + } + }); } } @@ -154,7 +161,6 @@ type DevOptions = { debug?: boolean; sourcemap?: boolean; inspectorPort?: number; - isLocalDev?: boolean; customerAccountPush?: boolean; cliConfig: Config; verbose?: boolean; @@ -174,7 +180,6 @@ export async function runDev({ debug = false, disableVersionCheck = false, inspectorPort, - isLocalDev = false, customerAccountPush: customerAccountPushFlag = false, cliConfig, verbose, @@ -211,10 +216,12 @@ export async function runDev({ const vite = await importVite(root); - // Allow Vite to read files from the Hydrogen packages in local development. - const fs = isLocalDev - ? {allow: [root, fileURLToPath(new URL('../../../../', import.meta.url))]} - : undefined; + const {hydrogenPackagesPath} = getRepoMeta(); + + if (hydrogenPackagesPath) { + // Force reoptimizing deps without printing the message + await removeFile(joinPath(root, 'node_modules/.vite')); + } const customLogger = vite.createLogger(); if (process.env.SHOPIFY_UNIT_TEST) { @@ -232,7 +239,13 @@ export async function runDev({ root, customLogger, clearScreen: false, - server: {fs, host: host ? true : undefined}, + server: { + host: host ? true : undefined, + // Allow Vite to read files from the Hydrogen packages in local development. + fs: hydrogenPackagesPath + ? {allow: [root, hydrogenPackagesPath]} + : undefined, + }, plugins: [ { name: 'hydrogen:cli', @@ -293,30 +306,28 @@ export async function runDev({ const h2PluginOptions = h2Plugin.api?.getPluginOptions?.(); - const codegenProcess = useCodegen - ? spawnCodegenProcess({ - rootDirectory: root, - configFilePath: codegenConfigPath, - appDirectory: h2PluginOptions?.remixConfig?.appDirectory, - }) + let codegenProcess: ReturnType | undefined; + const setupCodegen = useCodegen + ? () => { + codegenProcess?.kill(0); + codegenProcess = spawnCodegenProcess({ + rootDirectory: root, + configFilePath: codegenConfigPath, + appDirectory: h2PluginOptions?.remixConfig?.appDirectory, + }); + } : undefined; - // handle unhandledRejection so that the process won't exit - process.on('unhandledRejection', (err) => { - console.log('Unhandled Rejection: ', err); - }); + setupCodegen?.(); + + if (hydrogenPackagesPath) { + setupMonorepoReload(viteServer, hydrogenPackagesPath, setupCodegen); + } // Store the port passed by the user in the config. const publicPort = appPort ?? viteServer.config.server.port ?? DEFAULT_APP_PORT; - // TODO -- Need to change Remix' component - // const assetsPort = await findPort(publicPort + 100); - // if (assetsPort) { - // // Note: Set this env before loading Remix config! - // process.env.HYDROGEN_ASSET_BASE_URL = buildAssetsUrl(assetsPort); - // } - const [tunnel, cliCommand] = await Promise.all([ backgroundPromise.then(({customerAccountPush, storefrontId}) => customerAccountPush @@ -407,3 +418,61 @@ function showSuccessBanner({ customSections, }); } + +function setupMonorepoReload( + viteServer: ViteDevServer, + monorepoPackagesPath: string, + setupCodegen?: () => void, +) { + // Note: app code is already tracked by Vite in monorepos + // so there is no need to watch it and do manual work here. + // We need to track, however, code that is not imported in + // the app and manually reload things here. + + viteServer.httpServer?.once('listening', () => { + // Watch the Hydrogen plugin for changes and restart Vite server. + // Virtual routes are already tracked by Vite because they are in-app code. + viteServer.watcher.add( + monorepoPackagesPath + 'hydrogen/dist/vite/plugin.js', + ); + + // Any change in MiniOxygen will overwrite every file in `dist`. + // We watch the plugin file for example and restart Vite server, + // which also restarts the MiniOxygen worker. + // The only exception is worker-entry because it follows a separate + // build in TSUP. + viteServer.watcher.add( + monorepoPackagesPath + 'mini-oxygen/dist/vite/plugin.js', + ); + viteServer.watcher.add( + monorepoPackagesPath + 'mini-oxygen/dist/vite/worker-entry.js', + ); + + // Watch any file in hydrogen-codegen to restart the codegen process. + viteServer.watcher.add( + monorepoPackagesPath + 'hydrogen-codegen/dist/esm/index.js', + ); + + viteServer.watcher.on('change', async (file) => { + if (file.includes(monorepoPackagesPath)) { + if (file.includes('/packages/hydrogen-codegen/')) { + if (setupCodegen) { + setupCodegen(); + renderInfo({ + headline: 'The Hydrogen Codegen source has been modified.', + body: 'The codegen process has been restarted.', + }); + } + } else { + // Restart Vite server, which also restarts MiniOxygen + await viteServer.restart(true); + console.log(''); + renderInfo({ + headline: 'The H2O Vite plugins have been modified.', + body: 'The Vite server has been restarted to reflect the changes.', + }); + } + } + }); + }); +} diff --git a/packages/cli/src/commands/hydrogen/preview.ts b/packages/cli/src/commands/hydrogen/preview.ts index a5546919fb..b41e234f7d 100644 --- a/packages/cli/src/commands/hydrogen/preview.ts +++ b/packages/cli/src/commands/hydrogen/preview.ts @@ -21,7 +21,7 @@ import {runBuild} from './build.js'; import {runClassicCompilerBuild} from '../../lib/classic-compiler/build.js'; import {setupResourceCleanup} from '../../lib/resource-cleanup.js'; import {deferPromise} from '../../lib/defer.js'; -import {copyDiffBuild, prepareDiffDirectory} from '../../lib/template-diff.js'; +import {prepareDiffDirectory} from '../../lib/template-diff.js'; export default class Preview extends Command { static descriptionWithMarkdown = @@ -69,11 +69,13 @@ export default class Preview extends Command { const originalDirectory = flags.path ? resolvePath(flags.path) : process.cwd(); - let directory = originalDirectory; - if (flags.build && flags.diff) { - directory = await prepareDiffDirectory(originalDirectory, flags.watch); - } + const diff = + flags.build && flags.diff + ? await prepareDiffDirectory(originalDirectory, flags.watch) + : undefined; + + const directory = diff?.targetDirectory ?? originalDirectory; const {close} = await runPreview({ ...flagsToCamelObject(flags), @@ -82,8 +84,9 @@ export default class Preview extends Command { setupResourceCleanup(async () => { await close(); - if (flags.diff) { - await copyDiffBuild(directory, originalDirectory); + if (diff) { + await diff.copyDiffBuild(); + await diff.cleanup(); } }); } diff --git a/packages/cli/src/lib/build.ts b/packages/cli/src/lib/build.ts index 57fcdec4f9..fa7c04077a 100644 --- a/packages/cli/src/lib/build.ts +++ b/packages/cli/src/lib/build.ts @@ -39,8 +39,8 @@ export function getTemplateAppFile(filepath: string, root = getStarterDir()) { return url.protocol === 'file:' ? fileURLToPath(url) : url.toString(); } -export function getStarterDir() { - if (process.env.NODE_ENV === 'test') { +export function getStarterDir(useSource = !!process.env.SHOPIFY_UNIT_TEST) { + if (useSource) { return getSkeletonSourceDir(); } diff --git a/packages/cli/src/lib/dev-shared.ts b/packages/cli/src/lib/dev-shared.ts index ae29b4f852..2bdc251537 100644 --- a/packages/cli/src/lib/dev-shared.ts +++ b/packages/cli/src/lib/dev-shared.ts @@ -130,3 +130,15 @@ export function getUtilityBannerlines(host: string) { subdued: `${index === 0 ? '' : '\n\n'}${value}`, })); } + +export function getRepoMeta() { + const monorepoPackagesPath = new URL('../../..', import.meta.url).pathname; + const isHydrogenMonorepo = monorepoPackagesPath.endsWith( + '/hydrogen/packages/', + ); + + return { + isHydrogenMonorepo, + hydrogenPackagesPath: isHydrogenMonorepo ? monorepoPackagesPath : undefined, + }; +} diff --git a/packages/cli/src/lib/template-diff.ts b/packages/cli/src/lib/template-diff.ts index 0fd783e6d6..e2343ddae3 100644 --- a/packages/cli/src/lib/template-diff.ts +++ b/packages/cli/src/lib/template-diff.ts @@ -1,4 +1,3 @@ -import {rmdirSync} from 'node:fs'; import {temporaryDirectory} from 'tempy'; import {createSymlink, copy as copyDirectory} from 'fs-extra/esm'; import { @@ -8,9 +7,11 @@ import { } from '@shopify/cli-kit/node/fs'; import {joinPath, relativePath} from '@shopify/cli-kit/node/path'; import {readAndParsePackageJson} from '@shopify/cli-kit/node/node-package-manager'; +import {outputInfo} from '@shopify/cli-kit/node/output'; import colors from '@shopify/cli-kit/node/colors'; import {getRepoNodeModules, getStarterDir} from './build.js'; import {mergePackageJson} from './file.js'; +import {getRepoMeta} from './dev-shared.js'; /** * Creates a new temporary project directory with the starter template and diff applied. @@ -23,26 +24,37 @@ export async function prepareDiffDirectory( watch: boolean, ) { const targetDirectory = temporaryDirectory({prefix: 'tmp-hydrogen-diff-'}); - process.on('exit', () => rmdirSync(targetDirectory, {recursive: true})); - console.info( + // Do not use a banner here to avoid breaking the targetDirectory filepath + // to keep it clickable in the terminal. + outputInfo( `\n-- Applying diff to starter template in\n${colors.dim( targetDirectory, )}\n`, ); - await applyTemplateDiff(targetDirectory, diffDirectory); + // Intuitively, we think the files are coming from the skeleton + // template in the monorepo instead of the CLI package so we forget + // forget to start the dev process for the CLI when tinkering with + // diff examples. Let's use the skeleton source files from the + // monorepo directly if available to avoid this situation. + const templateDirectory = getStarterDir(getRepoMeta().isHydrogenMonorepo); + await applyTemplateDiff(targetDirectory, diffDirectory, templateDirectory); await createSymlink( await getRepoNodeModules(), joinPath(targetDirectory, 'node_modules'), ); - if (watch) { - const pw = await import('@parcel/watcher').catch((error) => { - console.log('Could not watch for file changes.', error); - }); + const pw = watch + ? await import('@parcel/watcher').catch((error) => { + console.log('Could not watch for file changes.', error); + }) + : undefined; + const subscriptions = await Promise.all([ + // Copy back the changes in generated d.ts from the + // temporary directory to the original diff directory. pw?.subscribe( targetDirectory, (error, events) => { @@ -59,8 +71,10 @@ export async function prepareDiffDirectory( }); }, {ignore: ['!*.generated.d.ts']}, - ); + ), + // Copy new changes in the original diff directory to + // the temporary directory. pw?.subscribe( diffDirectory, async (error, events) => { @@ -75,16 +89,118 @@ export async function prepareDiffDirectory( relativePath(diffDirectory, event.path), ); + const fileInTemplate = event.path.replace( + diffDirectory, + templateDirectory, + ); + + return event.type === 'delete' + ? fileExists(fileInTemplate) + .then((exists) => + exists + ? // Replace it with original file from the starter template. + copyFile(fileInTemplate, targetFile) + : // Remove the file otherwise. + remove(targetFile), + ) + .catch(() => {}) + : copyFile(event.path, targetFile); + }); + }, + { + ignore: [ + '*.generated.d.ts', + 'package.json', + 'tsconfig.json', + '.shopify', + ], + }, + ), + + // Copy new changes in the starter template to the temporary + // directory only if they don't overwrite the files in the + // original diff directory, which have higher priority. + pw?.subscribe( + templateDirectory, + async (error, events) => { + if (error) { + console.error(error); + return; + } + + await events.map(async (event) => { + const fileInDiff = event.path.replace( + templateDirectory, + diffDirectory, + ); + + // File in diff directory has higher priority. + if (await fileExists(fileInDiff)) return; + + const targetFile = joinPath( + targetDirectory, + relativePath(templateDirectory, event.path), + ); + return event.type === 'delete' ? remove(targetFile).catch(() => {}) : copyFile(event.path, targetFile); }); }, - {ignore: ['*.generated.d.ts', 'package.json', 'tsconfig.json']}, - ); - } + { + ignore: [ + '*.generated.d.ts', + 'package.json', + 'tsconfig.json', + '.shopify', + ], + }, + ), + ]); - return targetDirectory; + return { + /** + * The temporary directory with the starter template and diff applied. + */ + targetDirectory, + /** + * Removes the temporary directory and stops the file watchers. + */ + cleanup: async () => { + await Promise.all(subscriptions.map((sub) => sub?.unsubscribe())); + await remove(targetDirectory); + }, + /** + * Brings the `.shopify` directory back to the original project. + * This is important to keep a reference of the tunnel configuration + * so that it can be removed in the next run. + */ + async copyShopifyConfig() { + const source = joinPath(targetDirectory, '.shopify'); + if (!(await fileExists(source))) return; + + const target = joinPath(diffDirectory, '.shopify'); + await remove(target); + await copyDirectory(source, target, {overwrite: true}); + }, + /** + * Brings the `dist` directory back to the original project. + * This is used to run `h2 preview` with the resulting build. + */ + async copyDiffBuild() { + const target = joinPath(diffDirectory, 'dist'); + await remove(target); + await Promise.all([ + copyDirectory(joinPath(targetDirectory, 'dist'), target, { + overwrite: true, + }), + copyFile( + joinPath(targetDirectory, '.env'), + joinPath(diffDirectory, '.env'), + ), + ]); + }, + }; } type DiffOptions = { @@ -113,7 +229,8 @@ export async function applyTemplateDiff( await copyDirectory(templateDir, targetDirectory, { filter: createFilter( - /(^|\/|\\)(dist|node_modules|\.cache|.turbo|CHANGELOG\.md)(\/|\\|$)/i, + // Do not copy .shopify from skeleton to avoid linking in examples inadvertedly + /(^|\/|\\)(dist|node_modules|\.cache|\.turbo|\.shopify|CHANGELOG\.md)(\/|\\|$)/i, diffOptions.skipFiles || [], ), }); @@ -156,43 +273,3 @@ export async function applyTemplateDiff( }, }); } - -/** - * Brings the `dist` directory back to the original project. - * This is used to run `h2 preview` with the resulting build. - */ -export async function copyDiffBuild( - generatedDirectory: string, - diffDirectory: string, -) { - const target = joinPath(diffDirectory, 'dist'); - await remove(target); - await Promise.all([ - copyDirectory(joinPath(generatedDirectory, 'dist'), target, { - overwrite: true, - }), - copyFile( - joinPath(generatedDirectory, '.env'), - joinPath(diffDirectory, '.env'), - ), - ]); -} - -/** - * Brings the `.shopify` directory back to the original project. - * This is important to keep a reference of the tunnel configuration - * so that it can be removed in the next run. - */ -export async function copyShopifyConfig( - generatedDirectory: string, - diffDirectory: string, -) { - const source = joinPath(generatedDirectory, '.shopify'); - if (!(await fileExists(source))) return; - - const target = joinPath(diffDirectory, '.shopify'); - await remove(target); - await copyDirectory(joinPath(generatedDirectory, '.shopify'), target, { - overwrite: true, - }); -} diff --git a/packages/hydrogen-react/package.json b/packages/hydrogen-react/package.json index a1ac86c4eb..46ff087f6f 100644 --- a/packages/hydrogen-react/package.json +++ b/packages/hydrogen-react/package.json @@ -108,8 +108,7 @@ "dev": "run-s dev:demo", "dev:story": "ladle serve", "dev:demo": "run-p dev:demo:* copy-storefront-types", - "dev:demo:browser-prod": "vite build --watch --emptyOutDir false --clearScreen false", - "dev:demo:node-prod": "vite build --watch --emptyOutDir false --clearScreen false --ssr", + "dev:demo:browser-dev": "vite build --watch --emptyOutDir false --clearScreen false --mode devbuild", "dev:demo:ts": "tsc --watch --emitDeclarationOnly", "build": "npm-run-all --sequential clean-dist --parallel build:vite:* build:tsc:es --parallel build:tsc:cjs copy-storefront-types", "build:vite:browser-dev": "vite build --mode devbuild", diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json index d214915260..b26780939e 100644 --- a/packages/hydrogen/package.json +++ b/packages/hydrogen/package.json @@ -68,7 +68,8 @@ "type-fest": "^4.5.0", "source-map-support": "^0.5.21", "tiny-invariant": "^1.3.1", - "use-resize-observer": "^9.1.0" + "use-resize-observer": "^9.1.0", + "worktop": "^0.7.3" }, "devDependencies": { "@remix-run/dev": "^2.9.2", diff --git a/packages/hydrogen/src/vite/plugin.ts b/packages/hydrogen/src/vite/plugin.ts index 835c6355ad..8488038414 100644 --- a/packages/hydrogen/src/vite/plugin.ts +++ b/packages/hydrogen/src/vite/plugin.ts @@ -67,7 +67,11 @@ export function hydrogen(pluginOptions: HydrogenPluginOptions = {}): Plugin[] { // Vite performs an initial reload after optimizing these dependencies. // Do it early to avoid the initial reload: optimizeDeps: { - include: ['@shopify/hydrogen'], + include: [ + 'content-security-policy-builder', + 'tiny-invariant', + 'worktop/cookie', + ], }, }; },