@shopify/cli-hydrogen 9.0.4 → 9.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/assets/hydrogen/starter/CHANGELOG.md +87 -0
  2. package/dist/assets/hydrogen/starter/app/root.tsx +12 -2
  3. package/dist/assets/hydrogen/starter/app/routes/collections._index.tsx +1 -0
  4. package/dist/assets/hydrogen/starter/package.json +10 -10
  5. package/dist/assets/hydrogen/starter/tsconfig.json +1 -1
  6. package/dist/assets/hydrogen/starter/vite.config.ts +1 -0
  7. package/dist/assets/hydrogen/tailwind/package.json +1 -1
  8. package/dist/assets/hydrogen/tailwind/tailwind.css +1 -1
  9. package/dist/assets/hydrogen/vite/package.json +1 -1
  10. package/dist/assets/hydrogen/vite/vite.config.js +1 -0
  11. package/dist/commands/hydrogen/upgrade.js +1 -1
  12. package/dist/lib/setups/css/index.js +1 -1
  13. package/dist/lib/setups/css/replacers.js +12 -30
  14. package/oclif.manifest.json +1 -1
  15. package/package.json +12 -7
package/dist/assets/hydrogen/starter/CHANGELOG.md CHANGED
@@ -1,5 +1,92 @@
1
1
  # skeleton
2
2
 
3
+ ## 2025.1.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Bump vite, Remix versions and tailwind v4 alpha to beta ([#2696](https://github.com/Shopify/hydrogen/pull/2696)) by [@wizardlyhel](https://github.com/wizardlyhel)
8
+
9
+ - Workaround for "Error: failed to execute 'insertBefore' on 'Node'" that sometimes happen during development. ([#2701](https://github.com/Shopify/hydrogen/pull/2701)) by [@wizardlyhel](https://github.com/wizardlyhel)
10
+
11
+ ```diff
12
+ // root.tsx
13
+
14
+ /**
15
+ * The main and reset stylesheets are added in the Layout component
16
+ * to prevent a bug in development HMR updates.
17
+ *
18
+ * This avoids the "failed to execute 'insertBefore' on 'Node'" error
19
+ * that occurs after editing and navigating to another page.
20
+ *
21
+ * It's a temporary fix until the issue is resolved.
22
+ * https://github.com/remix-run/remix/issues/9242
23
+ */
24
+ export function links() {
25
+ return [
26
+ - {rel: 'stylesheet', href: resetStyles},
27
+ - {rel: 'stylesheet', href: appStyles},
28
+ {
29
+ rel: 'preconnect',
30
+ href: 'https://cdn.shopify.com',
31
+ },
32
+ {
33
+ rel: 'preconnect',
34
+ href: 'https://shop.app',
35
+ },
36
+ {rel: 'icon', type: 'image/svg+xml', href: favicon},
37
+ ];
38
+ }
39
+
40
+ ...
41
+
42
+ export function Layout({children}: {children?: React.ReactNode}) {
43
+ const nonce = useNonce();
44
+ const data = useRouteLoaderData<RootLoader>('root');
45
+
46
+ return (
47
+ <html lang="en">
48
+ <head>
49
+ <meta charSet="utf-8" />
50
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
51
+ + <link rel="stylesheet" href={resetStyles}></link>
52
+ + <link rel="stylesheet" href={appStyles}></link>
53
+
54
+ ```
55
+
56
+ - Turn on future flag `v3_lazyRouteDiscovery` ([#2702](https://github.com/Shopify/hydrogen/pull/2702)) by [@wizardlyhel](https://github.com/wizardlyhel)
57
+
58
+ In your vite.config.ts, add the following line:
59
+
60
+ ```diff
61
+ export default defineConfig({
62
+ plugins: [
63
+ hydrogen(),
64
+ oxygen(),
65
+ remix({
66
+ presets: [hydrogen.preset()],
67
+ future: {
68
+ v3_fetcherPersist: true,
69
+ v3_relativeSplatPath: true,
70
+ v3_throwAbortReason: true,
71
+ + v3_lazyRouteDiscovery: true,
72
+ },
73
+ }),
74
+ tsconfigPaths(),
75
+ ],
76
+ ```
77
+
78
+ Test your app by running `npm run dev` and nothing should break
79
+
80
+ - Fix image size warnings on collections page ([#2703](https://github.com/Shopify/hydrogen/pull/2703)) by [@wizardlyhel](https://github.com/wizardlyhel)
81
+
82
+ - Bump cli version ([#2732](https://github.com/Shopify/hydrogen/pull/2732)) by [@wizardlyhel](https://github.com/wizardlyhel)
83
+
84
+ - Bump SFAPI to 2025-01 ([#2715](https://github.com/Shopify/hydrogen/pull/2715)) by [@rbshop](https://github.com/rbshop)
85
+
86
+ - Updated dependencies [[`fdab06f5`](https://github.com/Shopify/hydrogen/commit/fdab06f5d34076b526d406698bdf6fca6787660b), [`ae6d71f0`](https://github.com/Shopify/hydrogen/commit/ae6d71f0976f520ca177c69ff677f852af63859e), [`650d57b3`](https://github.com/Shopify/hydrogen/commit/650d57b3e07125661e23900e73c0bb3027ddbcde), [`064de138`](https://github.com/Shopify/hydrogen/commit/064de13890c68cabb1c3fdbe7f77409a0cf1c384)]:
87
+ - @shopify/remix-oxygen@2.0.10
88
+ - @shopify/hydrogen@2025.1.0
89
+
3
90
  ## 2024.10.4
4
91
 
5
92
  ### Patch Changes
package/dist/assets/hydrogen/starter/app/root.tsx CHANGED
@@ -37,10 +37,18 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
37
37
  return defaultShouldRevalidate;
38
38
  };
39
39
 
40
+ /**
41
+ * The main and reset stylesheets are added in the Layout component
42
+ * to prevent a bug in development HMR updates.
43
+ *
44
+ * This avoids the "failed to execute 'insertBefore' on 'Node'" error
45
+ * that occurs after editing and navigating to another page.
46
+ *
47
+ * It's a temporary fix until the issue is resolved.
48
+ * https://github.com/remix-run/remix/issues/9242
49
+ */
40
50
  export function links() {
41
51
  return [
42
- {rel: 'stylesheet', href: resetStyles},
43
- {rel: 'stylesheet', href: appStyles},
44
52
  {
45
53
  rel: 'preconnect',
46
54
  href: 'https://cdn.shopify.com',
@@ -138,6 +146,8 @@ export function Layout({children}: {children?: React.ReactNode}) {
138
146
  <head>
139
147
  <meta charSet="utf-8" />
140
148
  <meta name="viewport" content="width=device-width,initial-scale=1" />
149
+ <link rel="stylesheet" href={resetStyles}></link>
150
+ <link rel="stylesheet" href={appStyles}></link>
141
151
  <Meta />
142
152
  <Links />
143
153
  </head>
package/dist/assets/hydrogen/starter/app/routes/collections._index.tsx CHANGED
@@ -84,6 +84,7 @@ function CollectionItem({
84
84
  aspectRatio="1/1"
85
85
  data={collection.image}
86
86
  loading={index < 3 ? 'eager' : undefined}
87
+ sizes="(min-width: 45em) 400px, 100vw"
87
88
  />
88
89
  )}
89
90
  <h5>{collection.title}</h5>
package/dist/assets/hydrogen/starter/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "skeleton",
3
3
  "private": true,
4
4
  "sideEffects": false,
5
- "version": "2024.10.4",
5
+ "version": "2025.1.0",
6
6
  "type": "module",
7
7
  "scripts": {
8
8
  "build": "shopify hydrogen build --codegen",
@@ -14,10 +14,10 @@
14
14
  },
15
15
  "prettier": "@shopify/prettier-config",
16
16
  "dependencies": {
17
- "@remix-run/react": "^2.13.1",
18
- "@remix-run/server-runtime": "^2.13.1",
19
- "@shopify/hydrogen": "2024.10.1",
20
- "@shopify/remix-oxygen": "^2.0.9",
17
+ "@remix-run/react": "^2.15.2",
18
+ "@remix-run/server-runtime": "^2.15.2",
19
+ "@shopify/hydrogen": "2025.1.0",
20
+ "@shopify/remix-oxygen": "^2.0.10",
21
21
  "graphql": "^16.6.0",
22
22
  "graphql-tag": "^2.12.6",
23
23
  "isbot": "^3.8.0",
@@ -26,11 +26,11 @@
26
26
  },
27
27
  "devDependencies": {
28
28
  "@graphql-codegen/cli": "5.0.2",
29
- "@remix-run/dev": "^2.13.1",
30
- "@remix-run/eslint-config": "^2.13.1",
31
- "@shopify/cli": "~3.73.0",
29
+ "@remix-run/dev": "^2.15.2",
30
+ "@remix-run/eslint-config": "^2.15.2",
31
+ "@shopify/cli": "~3.74.1",
32
32
  "@shopify/hydrogen-codegen": "^0.3.2",
33
- "@shopify/mini-oxygen": "^3.1.0",
33
+ "@shopify/mini-oxygen": "^3.1.1",
34
34
  "@shopify/oxygen-workers-types": "^4.1.2",
35
35
  "@shopify/prettier-config": "^1.1.2",
36
36
  "@total-typescript/ts-reset": "^0.4.2",
@@ -41,7 +41,7 @@
41
41
  "eslint-plugin-hydrogen": "0.12.2",
42
42
  "prettier": "^2.8.4",
43
43
  "typescript": "^5.2.2",
44
- "vite": "^5.1.0",
44
+ "vite": "^5.1.8",
45
45
  "vite-tsconfig-paths": "^4.3.1"
46
46
  },
47
47
  "engines": {
package/dist/assets/hydrogen/starter/tsconfig.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "forceConsistentCasingInFileNames": true,
15
15
  "skipLibCheck": true,
16
16
  "baseUrl": ".",
17
- "types": ["@shopify/oxygen-workers-types"],
17
+ "types": ["@shopify/oxygen-workers-types", "@remix-run/node", "vite/client"],
18
18
  "paths": {
19
19
  "~/*": ["app/*"]
20
20
  },
package/dist/assets/hydrogen/starter/vite.config.ts CHANGED
@@ -14,6 +14,7 @@ export default defineConfig({
14
14
  v3_fetcherPersist: true,
15
15
  v3_relativeSplatPath: true,
16
16
  v3_throwAbortReason: true,
17
+ v3_lazyRouteDiscovery: true,
17
18
  },
18
19
  }),
19
20
  tsconfigPaths(),
package/dist/assets/hydrogen/tailwind/package.json CHANGED
@@ -3,6 +3,6 @@
3
3
  "defaults"
4
4
  ],
5
5
  "devDependencies": {
6
- "@tailwindcss/vite": "4.0.0-alpha.17"
6
+ "@tailwindcss/vite": "4.0.0-beta.8"
7
7
  }
8
8
  }
package/dist/assets/hydrogen/tailwind/tailwind.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Configure Tailwind v4 in this file using CSS variables and directives:
3
- * https://tailwindcss.com/blog/tailwindcss-v4-alpha#css-first-configuration
3
+ * https://tailwindcss.com/docs/v4-beta#css-first-configuration
4
4
  */
5
5
 
6
6
  @import 'tailwindcss';
package/dist/assets/hydrogen/vite/package.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "isbot": "^3.8.0"
9
9
  },
10
10
  "devDependencies": {
11
- "vite": "^5.1.0",
11
+ "vite": "^5.1.8",
12
12
  "vite-tsconfig-paths": "^4.3.1"
13
13
  }
14
14
  }
package/dist/assets/hydrogen/vite/vite.config.js CHANGED
@@ -14,6 +14,7 @@ export default defineConfig({
14
14
  v3_fetcherPersist: true,
15
15
  v3_relativeSplatPath: true,
16
16
  v3_throwAbortReason: true,
17
+ v3_lazyRouteDiscovery: true,
17
18
  },
18
19
  }),
19
20
  tsconfigPaths(),
package/dist/commands/hydrogen/upgrade.js CHANGED
@@ -473,7 +473,7 @@ ${releaseNotesUrl}`);
473
473
  const selectedPinnedVersion = getAbsoluteVersion(selectedRelease.version);
474
474
  const upgradedDependenciesOnly = currentPinnedVersion === selectedPinnedVersion;
475
475
  const fromToMsg = `${currentPinnedVersion} \u2192 ${selectedPinnedVersion}`;
476
- const headline = upgradedDependenciesOnly ? `You've have upgraded Hydrogen ${selectedPinnedVersion} dependencies` : `You've have upgraded from ${fromToMsg}`;
476
+ const headline = upgradedDependenciesOnly ? `You've upgraded Hydrogen ${selectedPinnedVersion} dependencies` : `You've upgraded from ${fromToMsg}`;
477
477
  const packageManager = await getPackageManager(appPath);
478
478
  return renderSuccess({
479
479
  headline,
package/dist/lib/setups/css/index.js CHANGED
@@ -6,7 +6,7 @@ import { setupVanillaExtract } from './vanilla-extract.js';
6
6
 
7
7
  const STYLING_CHOICES = [...SETUP_CSS_STRATEGIES, "none"];
8
8
  const CSS_STRATEGY_NAME_MAP = {
9
- tailwind: "Tailwind (v4 alpha)",
9
+ tailwind: "Tailwind (v4 beta)",
10
10
  "vanilla-extract": "Vanilla Extract",
11
11
  "css-modules": "CSS Modules",
12
12
  postcss: "PostCSS"
package/dist/lib/setups/css/replacers.js CHANGED
@@ -16,48 +16,30 @@ async function replaceRootLinks(appDirectory, formatConfig, importer) {
16
16
  const root = astGrep.parse(content).root();
17
17
  const importNodes = root.findAll({ rule: { kind: "import_statement" } }).reverse();
18
18
  const lastImportNode = importNodes.find((node) => node.text().includes(".css")) || importNodes.shift();
19
- const linksReturnNode = root.find({
20
- utils: {
21
- "has-links-id": {
19
+ const layoutStyleNode = root.find({
20
+ rule: {
21
+ kind: "jsx_element",
22
+ regex: "resetStyles",
23
+ has: {
24
+ kind: "jsx_opening_element",
22
25
  has: {
23
26
  kind: "identifier",
24
- pattern: "links"
25
- }
26
- }
27
- },
28
- rule: {
29
- kind: "return_statement",
30
- pattern: "return [$$$]",
31
- inside: {
32
- any: [
33
- {
34
- kind: "function_declaration",
35
- matches: "has-links-id"
36
- },
37
- {
38
- kind: "variable_declarator",
39
- matches: "has-links-id"
40
- }
41
- ],
42
- stopBy: "end",
43
- inside: {
44
- stopBy: "end",
45
- kind: "export_statement"
27
+ pattern: "link"
46
28
  }
47
29
  }
48
30
  }
49
31
  });
50
- if (!lastImportNode || !linksReturnNode) {
32
+ if (!lastImportNode || !layoutStyleNode) {
51
33
  throw new AbortError(
52
34
  'Could not find a "links" export in root file. Please add one and try again.'
53
35
  );
54
36
  }
55
37
  const lastImportContent = lastImportNode.text();
56
- const linksExportReturnContent = linksReturnNode.text();
57
- const newLinkReturnItem = importer.isConditional ? `...(${importer.name} ? [{ rel: 'stylesheet', href: ${importer.name} }] : [])` : `{rel: 'stylesheet', href: ${importer.name}}`;
38
+ const layoutStyleNodeContent = layoutStyleNode.text();
39
+ const newLinkNode = importer.isConditional ? `{${importer.name} && <link rel="stylesheet" href={${importer.name}}></link>}` : `<link rel="stylesheet" href={${importer.name}}></link>`;
58
40
  return content.replace(lastImportContent, lastImportContent + "\n" + importStatement).replace(
59
- linksExportReturnContent,
60
- linksExportReturnContent.replace("[", `[${newLinkReturnItem},`)
41
+ layoutStyleNodeContent,
42
+ newLinkNode + "\n" + layoutStyleNodeContent
61
43
  );
62
44
  });
63
45
  }
package/oclif.manifest.json CHANGED
@@ -1748,5 +1748,5 @@
1748
1748
  ]
1749
1749
  }
1750
1750
  },
1751
- "version": "9.0.4"
1751
+ "version": "9.0.5"
1752
1752
  }
package/package.json CHANGED
@@ -4,9 +4,14 @@
4
4
  "access": "public",
5
5
  "@shopify:registry": "https://registry.npmjs.org"
6
6
  },
7
- "version": "9.0.4",
7
+ "version": "9.0.5",
8
8
  "license": "MIT",
9
9
  "type": "module",
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "git+https://github.com/Shopify/hydrogen.git",
13
+ "directory": "packages/cli-hydrogen"
14
+ },
10
15
  "scripts": {
11
16
  "build": "tsup && node scripts/build-check.mjs",
12
17
  "dev": "tsup --watch ./src --watch ../../templates/skeleton",
@@ -16,7 +21,7 @@
16
21
  "test:watch": "cross-env SHOPIFY_UNIT_TEST=1 vitest --test-timeout=60000"
17
22
  },
18
23
  "devDependencies": {
19
- "@remix-run/dev": "^2.13.1",
24
+ "@remix-run/dev": "^2.15.2",
20
25
  "@types/diff": "^5.0.2",
21
26
  "@types/gunzip-maybe": "^1.4.0",
22
27
  "@types/prettier": "^2.7.2",
@@ -28,15 +33,15 @@
28
33
  "flame-chart-js": "2.3.2",
29
34
  "get-port": "^7.0.0",
30
35
  "type-fest": "^4.26.1",
31
- "vite": "^5.1.0",
36
+ "vite": "^5.1.8",
32
37
  "vitest": "^1.0.4"
33
38
  },
34
39
  "dependencies": {
35
40
  "@ast-grep/napi": "0.11.0",
36
41
  "@oclif/core": "3.26.5",
37
- "@shopify/cli-kit": "^3.73.0",
38
- "@shopify/oxygen-cli": "4.6.0",
39
- "@shopify/plugin-cloudflare": "^3.73.0",
42
+ "@shopify/cli-kit": "^3.74.1",
43
+ "@shopify/oxygen-cli": "4.6.6",
44
+ "@shopify/plugin-cloudflare": "^3.74.1",
40
45
  "ansi-escapes": "^6.2.0",
41
46
  "chokidar": "3.5.3",
42
47
  "cli-truncate": "^4.0.0",
@@ -56,7 +61,7 @@
56
61
  "@graphql-codegen/cli": "^5.0.2",
57
62
  "@remix-run/dev": "^2.1.0",
58
63
  "@shopify/hydrogen-codegen": "^0.3.2",
59
- "@shopify/mini-oxygen": "^3.1.0",
64
+ "@shopify/mini-oxygen": "^3.1.1",
60
65
  "graphql-config": "^5.0.3",
61
66
  "vite": "^5.1.0"
62
67
  },