fix(tooling): make web fixture setup and dist copying reliable

CONTRIBUTING.md

@@ -30,21 +30,27 @@ yarn start
 To run the fixture app on Android:
 
 ```sh
-yarn run-android
+yarn ra
 ```
 
 To run the example app on iOS:
 
 ```sh
-yarn run-ios
+yarn ri
 ```
 
 To run the web sample:
 
 ```sh
-yarn run-web
+yarn fixture:web:up
+yarn rw
 ```
 
+For live library updates on the web, keep `yarn build --watch` and
+`yarn watch-web` running in separate terminals. The copy watcher requires
+[`fswatch`](https://github.com/emcrisostomo/fswatch); starting the web sample
+only performs a single copy and does not require it.
+
 To fix possible formatting errors, run the following:
 
 ```sh
@@ -59,12 +65,12 @@ Remember to add tests for your change if possible. Run the unit tests by:
 yarn test
 ```
 
-We also have an e2e screenshot test suite built on top of [Detox](https://github.com/wix/Detox/). You can find the e2e tests [here](https://github.com/Shopify/flash-list/tree/main/fixture/e2e). You can run them with:
+We also have an e2e screenshot test suite built on top of [Detox](https://github.com/wix/Detox/). You can find the e2e tests [here](https://github.com/Shopify/flash-list/tree/main/fixture/react-native/e2e). You can run them with:
 
 ```sh
-run-e2e-ios
+yarn e2e:ios
 # or on android with
-run-e2e-android
+yarn e2e:android
 ```
 
 Usually, the screenshots should not change. However, if you do expect change in the UI, you will need to remove the appropriate image in [this](https://github.com/Shopify/flash-list/tree/main/fixture/e2e/artifacts/ios) folder and re-run the tests again.

fixture/web/App.tsx

@@ -1,4 +1,5 @@
-import React, { View } from "react-native";
+import React from "react";
+import { View } from "react-native";
 
 import RecyclerViewHandlerTest from "./RecyclerViewHandlerTest";
 // import { Chat } from "./Chat";

fixture/web/scripts/copy-dist.sh

@@ -1,14 +1,30 @@
 #!/bin/bash
+set -euo pipefail
 
-# Define source and destination paths
-SRC_DIST="$(pwd)/dist"
-NODE_MODULES_DIST="$(pwd)/fixture/web/node_modules/@shopify/flash-list/dist"
-WEB_FIXTURE_DIST="$(pwd)/fixture/web/dist"
+REPO_ROOT="$(cd -- "$(dirname -- "$0")/../../.." && pwd -P)"
+SRC_DIST="$REPO_ROOT/dist"
+NODE_MODULES_DIST="$REPO_ROOT/fixture/web/node_modules/@shopify/flash-list/dist"
+
+if [[ ! -d "$SRC_DIST" || ! -d "$(dirname "$NODE_MODULES_DIST")" ]]; then
+    echo "Build FlashList and install the web fixture before copying dist." >&2
+    exit 1
+fi
+
+if [[ "${1:-}" != "--once" ]]; then
+    command -v fswatch >/dev/null || {
+        echo "Install fswatch to watch changes, or use --once for a single copy." >&2
+        exit 1
+    }
+fi
 
 # Function to copy dist directory
 copy_dist() {
     echo "Copying dist folder to node_modules..."
     mkdir -p "$NODE_MODULES_DIST"
+    if [[ "$(cd "$SRC_DIST" && pwd -P)" == "$(cd "$NODE_MODULES_DIST" && pwd -P)" ]]; then
+        echo "The web fixture already links to the source dist; refusing to copy onto itself." >&2
+        exit 1
+    fi
     rsync -av --delete "$SRC_DIST/" "$NODE_MODULES_DIST/"
 
     echo "Copy completed at $(date)"
@@ -18,6 +34,10 @@ copy_dist() {
 echo "Initial copy of dist folder"
 copy_dist
 
+if [[ "${1:-}" == "--once" ]]; then
+    exit 0
+fi
+
 # Watch for changes in the source dist directory
 echo "Watching for changes in $SRC_DIST"
 echo "Press Ctrl+C to stop watching"

fixture/web/yarn.lock

@@ -1579,7 +1579,7 @@
 
 "@shopify/flash-list@^2.0.0-alpha.9":
   version "2.0.0-alpha.9"
-  resolved "https://npm.shopify.io/node/@shopify/flash-list/-/flash-list-2.0.0-alpha.9.tgz#37c0805c3b3da92215bb225df11c669a108d2ade"
+  resolved "https://registry.npmjs.org/@shopify/flash-list/-/flash-list-2.0.0-alpha.9.tgz#37c0805c3b3da92215bb225df11c669a108d2ade"
   integrity sha512-lEZ61g2gWUoHatBjKBo1C0iOYiYPfXs/KWcyq2MeQSeXoJXVRPapzLoPsG3GFzbyVC7ZzCtjN6PgCcnt1z+U1A==
   dependencies:
     recyclerlistview "4.2.3"

package.json

@@ -35,21 +35,23 @@
     "lint:fix": "yarn eslint . --ext .ts,.tsx --fix",
     "type-check": "yarn tsc --pretty --noEmit",
     "build": "tsc -b",
-    "watch-web": "sh fixture/web/scripts/copy-dist.sh",
+    "watch-web": "bash fixture/web/scripts/copy-dist.sh",
     "prepublishOnly": "yarn run build",
     "fixture:rn:up": "cd fixture/react-native && yarn && cd ios && bundle exec pod install && cd ../../../",
-    "fixture:expo:up": "cd fixture/expo && yarn && cd ../../",
+    "fixture:web:up": "cd fixture/web && yarn",
+    "fixture:expo:up": "yarn fixture:web:up",
     "fixture:rn:android": "cd fixture/react-native && yarn react-native run-android && yarn build --watch",
     "fixture:rn:ios": "cd fixture/react-native && yarn react-native run-ios && yarn build --watch",
     "ra": "yarn fixture:rn:android",
     "ri": "yarn fixture:rn:ios",
-    "fixture:expo:start": "cd fixture/expo && yarn start",
+    "fixture:web:start": "yarn build && bash fixture/web/scripts/copy-dist.sh --once && cd fixture/web && yarn web",
+    "fixture:expo:start": "yarn fixture:web:start",
     "rw": "yarn fixture:expo:start",
     "e2e:up": "cd fixture/react-native/ios && brew tap wix/brew && brew trust --formula wix/brew/applesimutils && brew install applesimutils && cd ../../../",
     "e2e:ios": "cd fixture/react-native && yarn e2e:build:ios && yarn e2e:test:ios",
     "rei": "yarn run e2e:ios",
     "e2e:android": "cd fixture/react-native && yarn e2e:build:android && yarn e2e:test:android",
-    "rea": "yarn run-e2e-android",
+    "rea": "yarn e2e:android",
     "predeploy:website": "sh ./build_website.sh",
     "deploy:website": "gh-pages -d website/_site"
   },