Turn examples into template diffs for better maintenance (#1549)

* Refactor symlink in init.test

* Add diff feature to dev command

* Add example diff

* Fix watcher when deleting files

* Allow importing from current dir and skeleton template at the same time using aliases

* Support --diff in build command

* Add build script to example

* Add turbo dependency

* Merge main

* Remove examples/diff

* Use --diff in examples/third-party-queries-caching

* Update package-lock

* Remove unnecessary files

* Refactor mergePackageJson

* Refactor mergePackageJson, move to another file

* Merge package.json with --diff flag

* Refactor

* Rename file, refactor

* Changesets

* Update example readme

* Convert examples/optimistic-cart-ui to diff

* Update examples/README.md

Co-authored-by: Michelle Chen <michelle.chen@shopify.com>

* Update package-lock

* Fix finding storefront.generated.d.ts

* Fix build dependencies

---------

Co-authored-by: Michelle Chen <michelle.chen@shopify.com>

.changeset/silly-vans-bake.md

@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': minor
+---
+
+Add `--diff` flag to dev and build commands to run examples in monorepo. Examples are now a diff applied on top of the starter template.

.gitignore

@@ -137,3 +137,5 @@ yarn.lock
 
 admin.schema.json
 business-platform.schema.json
+
+examples/**/*.generated.d.ts

examples/README.md

@@ -2,7 +2,7 @@
 
 The example apps in this directory show how to implement popular design patterns in Hydrogen.
 
-Each example is a complete Hydrogen app, based on Hydrogen’s [Skeleton template](/templates/skeleton/), that you can inspect and run locally. See each example's README file for details on the problem it solves, how the solution works, and any other requirements you’ll need.
+Each example only contains the files that are different from Hydrogen’s [Skeleton template](/templates/skeleton/), but it's still possible to inspect and run them locally. See each example's README file for details on the problem it solves, how the solution works, and any other requirements you’ll need.
 
 Examples are kept intentionally minimal, containing only the new and updated code required to illustrate a working use case.
 
@@ -21,3 +21,16 @@ If you don’t see the example you’re looking for, you can [request one throug
 ## Contributing examples
 
 Hydrogen is an open-source project, and we welcome your input! See the Hydrogen [contribution docs](/docs/examples/README.md) for more details on how to add your own examples to this repo.
+
+### Creating new examples as diffs
+
+An example diff is a partial Hydrogen app that only contains the files that change from the skeleton template. The Hydrogen CLI will merge the example diff on top of the skeleton template in a temporary directory before running the `dev` or `build` commands.
+
+Keep the following in mind when creating a new example diff:
+
+- Start a new example diff by copying another minimal example and changing code.
+- Only include and commit files that are different from the skeleton template.
+- `package.json` must always be created with a unique name with example- prefix, and this name must be included in the NPM workspace (root `package.json`).
+- `dependencies`, `devDependencies`, and `peerDependencies` in `package.json` are also merged to those in skeleton. Therefore, only list new or modified dependencies in the example.
+- The scripts in `package.json` must pass the `--diff` flag to the `dev` and `build` commands. Otherwise, it will be treated as a full Hydrogen app instead of a diff.
+- The `tsconfig.json` must have special values. Copy it from another existing diff example.