Use Vite in templates and examples #1912

frandiox · 2024-03-26T19:07:24Z

WHY are these changes introduced?

We want to dogfood Vite before the stable release.

WHAT is this pull request doing?

Use Vite in skeleton template
Use Vite in --diff examples
Remove the previous example/vite project
Add a new example/classic-remix project
Soft merge dev and build commands so that we can run h2 dev instead of h2 dev-vite. This merge will need more work a different PR.
Patch preview and deploy commands to make them work with both Vite and Classic. This will also require another PR for cleanup.
Fix h2 setup and h2 setup markets commands to work with Vite.
Disable setup:css features and prompts since they don't work with Vite yet (setup tailwind, etc).

HOW to test your changes?

Run dev, build, preview, deploy commands in skeleton and examples. It should all work 🤞

github-actions · 2024-03-26T19:07:38Z

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset.
If the changes are user-facing and should cause a version bump, run npm run changeset add to track your changes and include them in the next release CHANGELOG.
If you are making simple updates to examples or documentation, you do not need to add a changeset.

shopify · 2024-03-26T19:08:48Z

Oxygen deployed a preview of your fd-skeleton-vite branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 4, 202411:44 AM
vite	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 4, 202411:45 AM
skeleton	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 4, 202411:37 AM
optimistic-cart-ui	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 4, 202411:54 AM
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 4, 202411:45 AM
subscriptions	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 4, 202411:45 AM

Learn more about Hydrogen's GitHub integration.

blittle

For some reason, not sure why, this double slash seems to be introduced by this PR:

blittle · 2024-03-29T19:13:19Z

It also seems that h2 setup markets doesn't work within the skeleton folder. I get a double path:

blittle · 2024-03-29T19:14:29Z

.github/workflows/deploy-examples.yml

-            {name: 'vite', token: '1000014892'},
-            {name: 'subscriptions', token: '1000014928'},
+            {name: 'classic-remix', token: '1000014892'},
+            {name: 'metaobjects', token: '1000014928'},


Was subscriptions incorrect? Intentionally change the name to metaobjects?

Yes, it's not an example that uses --diff. And the build script in this workflow uses --diff so we should only list here --diff examples, I think?
We were lucky subscriptions worked but it may break 😅

blittle · 2024-03-29T19:15:22Z

examples/classic-remix/README.md

+# Hydrogen template: Classic Remix
+
+Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with [Remix](https://remix.run/), Shopify’s full stack web framework. This template contains a **minimal setup** of components, queries and tooling to get started with Hydrogen and the classic Remix compiler (i.e. before Vite).
+
+[Check out Hydrogen docs](https://shopify.dev/custom-storefronts/hydrogen)
+[Get familiar with Remix](https://remix.run/docs/en/v1)


Should there be more description about what "classic remix" is?

Added a link to Remix docs 👍

blittle · 2024-03-29T19:16:59Z

examples/classic-remix/package.json

+    "typecheck": "tsc --noEmit",
+    "codegen": "shopify hydrogen codegen"
+  },
+  "h2:diff": {


I'm not familiar with this new property, I assume this is configuration when the diff is applied, the the vite files in the skeleton template don't end up in the output of this example. Very cool.

Yeah, just a quick escape hatch for a few examples due to the migration from ESBuild to Vite. We can probably remove it when we move completely to Vite and remove the classic compiler 🤔

blittle · 2024-03-29T19:24:22Z

packages/cli/src/commands/hydrogen/build.ts

-    });
+    };
+
+    if (await hasViteConfig(directory ?? process.cwd())) {


Ah so make h2 build automatically detect if there's a vite config and pick the build path from there.

Yes. This is a "soft-mergeofdevanddev-vite`. I'll make a new PR reorganizing this code better.

blittle · 2024-03-29T19:34:25Z

packages/cli/src/commands/hydrogen/init.test.ts

+          `"name": "example-classic-remix"`,
+        );
+
+        // ---- DEV


Nit picky, but would it be better to separate these out, so it's more obvious when one fails? Not a big deal if you prefer to keep them all together.

I've been thinking about this and would like to split this file in different ones. But I think this could still be here.
The ones I want to extract are the "build" and "dev" tests.
These should be in build.test and dev.test even if they use runInit to generate fixtures 🤔

For a different PR, tho.

blittle · 2024-03-29T19:35:19Z

packages/cli/src/commands/hydrogen/init.test.ts

+        expect(mb).toBeGreaterThan(0);
+        expect(mb).toBeLessThan(1);


This is great! We'll find a failure if we go over 1mb in the skeleton template output.

frandiox · 2024-04-01T11:43:30Z

This was fixed it in #1891 👍

It also seems that h2 setup markets doesn't work within the skeleton folder. I get a double path:

Nice catch, fixed by replacing joinPath with relativePath:

blittle

@frandiox while the error has gone when running h2 setup markets inside the skeleton template, when selecting subfolders, it only updates server.ts, the route folder structure itself doesn't change. Is that intentional? If so, then 🟢 from me.

frandiox · 2024-04-04T10:57:04Z

when selecting subfolders, it only updates server.ts, the route folder structure itself doesn't change. Is that intentional?

Yes, I think we never implemented this because you also need to modify other things in the files to handle the new param.

frandiox added 9 commits March 26, 2024 13:33

Update Vite template

2dcdd10

Support skipDevDependencies in diff options

c4e1065

Add classic-remix example

6be5ede

Setup Vite in skeleton

3af3078

Soft-merge dev and build commands

a760a72

Remove Vite example

671d4c2

Update diff examples to Vite

183f2c1

Fix preview and deploy commands

889ae02

Deploy classic-remix example

e910faa

frandiox requested a review from a team March 26, 2024 19:07

frandiox added 10 commits March 26, 2024 20:17

Fix examples in deploy script

4e5e12e

Fix i18n replacers

b286fa3

Fix route dependencies algo to support Vite querystirngs

3929c72

Temporary disable styling support

ad4a2b7

Fix logs in dev-vite

b94ae2b

Adapt init tests to Vite

4fc648d

Add tests for classic compiler

9bf6a58

Support Vite in setup command to fix tests

fcaf824

Fix other tests and commands

611ac69

Update Oclif manifest

48ae7dd

blittle requested changes Mar 29, 2024

View reviewed changes

blittle reviewed Mar 29, 2024

View reviewed changes

frandiox added 3 commits April 1, 2024 13:25

Merge branch 'main' into fd-skeleton-vite

0e39a5b

Add link to Remix docs

3eb7b3c

Fix file paths

0e2a82b

frandiox requested a review from blittle April 1, 2024 11:44

blittle approved these changes Apr 3, 2024

View reviewed changes

frandiox added 3 commits April 4, 2024 12:32

Merge branch 'main' into fd-skeleton-vite

b8e84fd

Throw error in setup:css command for Vite projects

4686f33

Filter more logs

212b9ac

Improve logs spacing and filtering

925f260

frandiox merged commit c3d8dbe into main Apr 4, 2024
13 checks passed

frandiox deleted the fd-skeleton-vite branch April 4, 2024 12:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use Vite in templates and examples #1912

Use Vite in templates and examples #1912

frandiox commented Mar 26, 2024 •

edited

Loading

github-actions bot commented Mar 26, 2024

shopify bot commented Mar 26, 2024 •

edited

Loading

blittle left a comment

blittle commented Mar 29, 2024

blittle Mar 29, 2024

frandiox Apr 1, 2024

blittle Mar 29, 2024

frandiox Apr 1, 2024

blittle Mar 29, 2024

frandiox Apr 1, 2024

blittle Mar 29, 2024

frandiox Apr 1, 2024

blittle Mar 29, 2024

frandiox Apr 1, 2024 •

edited

Loading

blittle Mar 29, 2024

frandiox commented Apr 1, 2024

blittle left a comment

frandiox commented Apr 4, 2024

Use Vite in templates and examples #1912

Use Vite in templates and examples #1912

Conversation

frandiox commented Mar 26, 2024 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

HOW to test your changes?

github-actions bot commented Mar 26, 2024

shopify bot commented Mar 26, 2024 • edited Loading

blittle left a comment

Choose a reason for hiding this comment

blittle commented Mar 29, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frandiox Apr 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frandiox commented Apr 1, 2024

blittle left a comment

Choose a reason for hiding this comment

frandiox commented Apr 4, 2024

frandiox commented Mar 26, 2024 •

edited

Loading

shopify bot commented Mar 26, 2024 •

edited

Loading

frandiox Apr 1, 2024 •

edited

Loading