[46] parallel filesystem convention example

.github/workflows/checks.yaml

@@ -67,7 +67,7 @@ jobs:
           sparse-checkout: |
             .git/**
           sparse-checkout-cone-mode: false
-          
+
       - name: Workaround actions/checkout#1475
         run: git config core.sparseCheckout false
         shell: bash
@@ -89,7 +89,7 @@ jobs:
         working-directory: ./test/automation
 
       - name: Upload results for shard
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         if: ${{ !cancelled() }}
         with:
           name: blob-report-${{ matrix.type }}-${{ runner.os }}
@@ -117,7 +117,7 @@ jobs:
         uses: ./.github/actions/setup-node
 
       - name: Download blob reports from GitHub Actions Artifacts
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v5
         with:
           path: all-blob-reports
           pattern: blob-report-*
@@ -127,7 +127,7 @@ jobs:
         run: npx playwright merge-reports --reporter=html ./all-blob-reports
 
       - name: Upload HTML report
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: html-report--attempt-${{ github.run_attempt }}
           path: playwright-report

.github/workflows/release.yaml

@@ -77,7 +77,7 @@ jobs:
 
       - name: Upload updated package.json to artifact
         if: steps.pre-release-version.outcome == 'success'
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: ${{ format('{0}-{1}', env.PACKAGE_ARTIFACT, matrix.package.shortName) }}
           path: |
@@ -96,7 +96,7 @@ jobs:
 
       - name: Upload to publish matrix
         if: steps.artifact-json.outcome == 'success'
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: ${{ format('{0}-{1}', env.UPDATED_MATRIX_ARTIFACT, matrix.package.shortName) }}
           path: |
@@ -111,7 +111,7 @@ jobs:
       matrix: ${{ steps.updatedPackages.outputs.packageArray }}
     name: 👨‍🍳 Prepare Publishing Matrix
     steps:
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v5
         with:
           pattern: ${{ env.UPDATED_MATRIX_ARTIFACT }}-*
           merge-multiple: true
@@ -151,7 +151,7 @@ jobs:
             .github/**
           sparse-checkout-cone-mode: false
 
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v5
         with:
           pattern: ${{ env.PACKAGE_ARTIFACT }}-*
           merge-multiple: true
@@ -175,7 +175,7 @@ jobs:
         shell: bash
 
       - name: Upload (potentially reified) package.jsons to artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: ${{ env.PACKAGE_ARTIFACT }}
           path: ${{ steps.createPathArray.outputs.pathArray }}
@@ -204,7 +204,7 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v5
         with:
           name: ${{ env.PACKAGE_ARTIFACT }}
 

docs/CHANGELOG.md

@@ -14,6 +14,13 @@ N.B. See changelogs for individual packages, where most change will occur:
 
 This log covers the [monorepo](https://en.wikipedia.org/wiki/Monorepo).
 
+## [0.13.1] - 2025-11-14
+
+### Changed
+
+- Moved to v5 of [`upload-artifact`](https://github.com/actions/upload-artifact) and [`download-artifact`](https://github.com/actions/download-artifact) actions
+- updated `eslint` to 9.38.0
+
 ## [0.13.0] - 2025-10-21
 
 ### Changed

examples/express/README.md

@@ -9,3 +9,13 @@ Some example applications based on an [express](https://expressjs.com/) router
 2. [config](./src/routes/config/README.md)
 
    This example shows the use of the [`react-pointcuts`](../../packages/react-pointcuts/docs/README.md), [`features`](../../packages/features/docs/README.md), [`ssr`](../../packages/ssr/docs/README.md) and [`webpack`](../../packages/webpack/docs/README.md) packages.
+
+3. [parallel-folder-convention](./src/routes/parallel-folder-convention/README.md)
+
+   This example shows the use of the [`react-pointcuts`](../../packages/react-pointcuts/docs/README.md), [`features`](../../packages/features/docs/README.md), [`ssr`](../../packages/ssr/docs/README.md) and [`webpack`](../../packages/webpack/docs/README.md) packages.
+
+   It has a bespoke filesystem convention, with parallel directory hierarchies containing arbitrary replacements and patches of various types of module, including:
+      - constants
+      - css
+      - react components
+      - [redux slices](https://redux.js.org/tutorials/essentials/part-2-app-structure#redux-slices)

examples/express/docs/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.0] - 2025-10-21
+
+### Changed
+
+- added "parallel folder convention" example
+
+### Fixed
+
+- went ltd cmdr data on the contraction "I'm", converting to "I am" since the "large" example inexplicably no longer text-matched (space before apostrophe)
+
 ## [0.3.1] - 2025-10-21
 
 ### Fixed

examples/express/eslint.config.mjs

@@ -1,15 +1,43 @@
 import examplesConfig from "../eslint.config.mjs";
 import asosConfigReact from "../../peripheral/eslint-config-asosconfig/react.js";
 import asosConfigServer from "../../peripheral/eslint-config-asosconfig/server.js";
+import parser from "@typescript-eslint/parser";
+import globals from "globals";
 
 export default [
   ...[...asosConfigReact, ...asosConfigServer].map((config) => ({
-    files: ["**/*.js"],
+    files: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
     ...config,
     settings: {
+      "import/resolver": {
+        typescript: {
+          alwaysTryTypes: true,
+          project: "./src/routes/parallel-folder-convention/tsconfig.json"
+        }
+      },
       react: {
         version: "detect"
       }
+    },
+    rules: {
+      ...config.rules,
+      "react/prop-types": "off",
+      "prettier/prettier": [
+        "error",
+        {
+          trailingComma: "none",
+          endOfLine: "auto"
+        }
+      ]
+    },
+    languageOptions: {
+      ...config.languageOptions,
+      parser,
+      globals: {
+        CLIENT: "readonly",
+        ...globals.browser,
+        ...globals.node
+      }
     }
   })),
   ...examplesConfig,

examples/express/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-toggle-point-express-example",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "engines": {
     "node": ">=20.6.0"
@@ -16,32 +16,38 @@
     "prelint": "npm run build-dependencies",
     "lint": "npm run lint:code && npm run lint:docs",
     "lint:fix": "npm run lint:code -- --fix && npm run lint:docs -- --fix",
-    "lint:code": "eslint src --flag unstable_config_lookup_from_file",
-    "lint:docs": "eslint *.md --flag unstable_config_lookup_from_file"
+    "lint:code": "eslint src --flag v10_config_lookup_from_file",
+    "lint:docs": "eslint *.md --flag v10_config_lookup_from_file"
   },
   "dependencies": {
-    "@asos/web-toggle-point-react-pointcuts": "file:../../packages/react-pointcuts",
     "@asos/web-toggle-point-features": "file:../../packages/features",
+    "@asos/web-toggle-point-react-pointcuts": "file:../../packages/react-pointcuts",
     "@asos/web-toggle-point-ssr": "file:../../packages/ssr",
     "@asos/web-toggle-point-webpack": "file:../../packages/webpack",
+    "@reduxjs/toolkit": "^2.8.2",
     "cross-env": "^7.0.3",
     "express": "^4.17.1",
     "http-status-codes": "^2.3.0",
     "react": ">=17",
-    "react-dom": ">=17"
+    "react-dom": ">=17",
+    "react-redux": "^9.2.0",
+    "valtio": "^2.1.5"
   },
   "devDependencies": {
     "babel-loader": "^9.2.1",
     "css-loader": "^7.1.2",
+    "enhanced-tsconfig-paths-webpack-plugin": "^0.2.3",
     "mini-css-extract-plugin": "^2.9.2",
     "path-exists-cli": "^2.0.0",
     "prop-types": "^15.7.2",
+    "source-map-loader": "^5.0.0",
     "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.2",
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.2",
     "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
-    "@playwright/test": "^1.49.0"
+    "@playwright/test": "^1.56.0"
   }
 }

examples/express/src/index.js

@@ -1,12 +1,14 @@
 import express from "express";
 import animalsRouter from "./routes/animals/router.js";
 import configRouter from "./routes/config/router.js";
+import parallelFolderConventionRouter from "./routes/parallel-folder-convention/router.tsx";
 
 const app = express();
 const PORT = process.env.PORT;
 
 app.use("/animals", animalsRouter);
 app.use("/config", configRouter);
+app.use("/parallel-folder-convention", parallelFolderConventionRouter);
 app.get("/", (_, response) => {
   response.send(`<!DOCTYPE html>
 <html lang="en">
@@ -39,6 +41,7 @@ app.get("/", (_, response) => {
     <ul>
       <li><a href="/animals">Version header with nodeRequestScoped store</a></li>
       <li><a href="/config">.env config with ssrBackedReactContext store for initial value in browser</a></li>
+      <li><a href="/parallel-folder-convention">parallel folder convention, with varied constants, css, react & redux</a></li>
     </ul>
   </body>
 </html>`);

examples/express/src/routes/config/Component.jsx

@@ -2,7 +2,7 @@ const Component = () => (
   <div
     style={{ fontSize: "18pt", width: "50vw", minWidth: "6em", height: "50vh" }}
   >
-    I'm Medium
+    I am Medium
   </div>
 );
 

examples/express/src/routes/config/__variants__/div-style/Large/Component.jsx

@@ -8,7 +8,7 @@ const Component = ({ backgroundColor }) => (
       backgroundColor
     }}
   >
-    I'm Large
+    I am Large
   </div>
 );
 

examples/express/src/routes/config/__variants__/div-style/Small/Component.jsx

@@ -8,7 +8,7 @@ const Component = ({ backgroundColor }) => (
       backgroundColor
     }}
   >
-    I'm Small
+    I am Small
   </div>
 );
 

examples/express/src/routes/config/playwright.spec.js

@@ -14,7 +14,7 @@ test.describe("config endpoint", () => {
       });
 
       test("it shows a varied experience", async ({ page }) => {
-        await expect(page.getByText(`I'm ${size}`)).toBeInViewport();
+        await expect(page.getByText(`I am ${size}`)).toBeVisible();
       });
 
       scenarios
@@ -25,7 +25,7 @@ test.describe("config endpoint", () => {
               page
             }) => {
               await page.getByRole("button", { name: otherSize }).click();
-              await expect(page.getByText(`I'm ${otherSize}`)).toBeInViewport();
+              await expect(page.getByText(`I am ${otherSize}`)).toBeVisible();
             });
           });
         });

examples/express/src/routes/config/router.js

@@ -13,7 +13,7 @@ router.get("/*", (req, res) => {
         <link
           rel="preconnect"
           href="https://fonts.gstatic.com"
-          crossOrigin={"true"}
+          crossOrigin="anonymous"
         />
         <link
           href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap"

examples/express/src/routes/parallel-folder-convention/App.tsx

@@ -0,0 +1,25 @@
+import TopBox from "./components/TopBox";
+import BottomBox from "./components/BottomBox";
+import StateProvider from "./StateProvider";
+import { getFeatures, setValue } from "./toggle-plumbing/featuresStore";
+import "./styles.css";
+
+export default function App() {
+  return (
+    <StateProvider>
+      <select
+        onChange={({ target: { value: selection } }) => setValue({ selection })}
+        defaultValue={getFeatures().selection}
+      >
+        <option>baseline 🐶</option>
+        <option value="feature1">feature 1 🐱</option>
+        <option value="feature2">feature 2 🐹</option>
+        <option value="feature3">feature 3 🐰</option>
+        <option value="feature4">feature 4 🦀</option>
+        <option value="feature5">feature 5 🪐</option>
+      </select>
+      <TopBox />
+      <BottomBox />
+    </StateProvider>
+  );
+}