Breaking: Monorepo. Svelte 5 migration. Visual testing (#124)

* test: initialize test-app

* test: add basic, real app test

* chore: run sv migrate svelte-5

* wip

* chore: migrate to monorepo structure

* fix: TestApp spm setup

* wip

* breaking: add createOpenModal.
createOpenModal must be called to correctly associate component's lifecycle which is impossible with only

* test: migrate tests-ct to test-app e2e tests

* test: migrate focus-trap tests

* chore: remove old tests-ct and unused scripts

* chore: add dev.Dockerfile for running visual tests

* chore: run format

* test: add more visual snapshot checks

* feat(breaking): don't export useModalContext, openModal

* chore: fix lints

* chore: fix ci commands

* fix: missing env

* chore: remove -t from docker for CI support

* chore: specify .env.test

* chore: add .env.test for test-app

* cleanup .env situation

* remove playwright from root

* Revert "remove playwright from root"

This reverts commit 4bdc21f.

Author: BobrImperator

.github/workflows/ci.yml

@@ -15,55 +15,31 @@ jobs:
       - uses: wyvox/action-setup-pnpm@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-      - name: Install Dependencies
-        run: pnpm install
-      - name: Run lint
-        run: pnpm lint
+      - run: pnpm install
+      - run: pnpm lint
 
   tests_e2e:
     name: Run end-to-end tests
     runs-on: ubuntu-latest
     needs: [lint]
-    strategy:
-      fail-fast: false
-      matrix:
-        # TODO: Fix tests for Svelte 5
-        # svelte-version: ['4.2.12', '5.0.0']
-        svelte-version: ['4.2.12']
 
     steps:
       - uses: actions/checkout@v4
       - uses: wyvox/action-setup-pnpm@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-      - name: Install Dependencies
-        run: pnpm install
-      - name: Install Svelte version ${{ matrix.svelte-version }}
-        run: pnpm add -D svelte@${{ matrix.svelte-version }}
-      - name: Install playwright browsers
-        run: pnpm exec playwright install
-      - name: Run tests
-        run: pnpm test:ct
+      - run: pnpm install
+      - run: cp svelte-promise-modals/.env.example svelte-promise-modals/.env && pnpm test:visual
 
   tests_unit:
     name: Run unit tests
     runs-on: ubuntu-latest
     needs: [lint]
-    strategy:
-      fail-fast: false
-      matrix:
-        # TODO: Fix tests for Svelte 5
-        # svelte-version: ['4.2.12', '5.0.0']
-        svelte-version: ['4.2.12']
 
     steps:
       - uses: actions/checkout@v4
       - uses: wyvox/action-setup-pnpm@v3
         with:
           node-version: ${{ env.NODE_VERSION }}
-      - name: Install Dependencies
-        run: pnpm install
-      - name: Install Svelte version ${{ matrix.svelte-version }}
-        run: pnpm add -D svelte@${{ matrix.svelte-version }}
-      - name: Run unit tests
-        run: pnpm test:unit
+      - run: pnpm install
+      - run: pnpm -F svelte-promise-modals test:unit

.gitignore

@@ -7,6 +7,7 @@ node_modules
 .env
 .env.*
 !.env.example
+!.env.test
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 /test-results/

README.md

@@ -34,14 +34,20 @@ To use SPM in your project, add the target for the modals to your root template:
 <ModalContainer />
 ```
 
-Then you can import the `openModal` function wherever you need it and call with a component reference to
-render it as a modal.
+Then you can import the `createOpenModal` function that you need to call at the _root_ level of a component.
+It produces a function that you can finally use to open modals.
+```ts
+	import { createOpenModal } from 'svelte-promise-modals';
+  let openModal = createOpenModal();
+```
 
 ```svelte
 <script>
-  import { openModal } from 'svelte-promise-modals';
+	import { createOpenModal } from 'svelte-promise-modals';
   import SomeComponent from './SomeComponent.svelte';
 
+	let openModal = createOpenModal();
+
   async function handleOpenModal() {
     let modal = openModal(SomeComponent);
 
@@ -115,8 +121,10 @@ Then when you open the modal, it'll correctly infer the type of the result:
 
 ```svelte
 <script lang="ts">
-  import { openModal } from 'svelte-promise-modals';
+  import { createOpenModal } from 'svelte-promise-modals';
   import MyModal from './MyModal.svelte';
+	
+  let openModal = createOpenModal();
 
   async function handleOpenModal() {
     // You can specify `string` here, but it's also automatically inferred
@@ -154,9 +162,9 @@ unrendered.
 
 ```svelte
 <script>
-  import { useModalContext } from 'svelte-promise-modals';
+  import { createOpenModal } from 'svelte-promise-modals';
 
-  let { openModal } = useModalContext();
+  let openModal = createOpenModal();
 
   async function handleOpenModal() {
     let result = await openModal(FooModal);
@@ -337,13 +345,21 @@ In order to speed up modal in/out animations during testing, either:
 
 Once you've cloned the project and installed dependencies with `pnpm install`, start a development server:
 
+- `pnpm -F svelte-promise-modals dev` Running https://svelte-promise-modals.com/ website
+- `pnpm -F test-app dev` Running the `test-app` which contains modal testing scenarios. Also used for automated testing using Playwright, including Visual testing.
+- `pnpm test` Run Unit and E2E tests.
+- `pnpm -F test-app test:e2e` Run only E2E tests
+- `pnpm test:visual` Run only E2E tests inside docker *preferred* method to make sure screenshots are consistent across platforms.
+
 ```bash
-npm run dev
+pnpm -F svelte-promise-modals dev
 
 # or start the server and open the app in a new browser tab
-npm run dev -- --open
+pnpm -F svelte-promise-modals dev -- --open
 ```
 
+
+
 ## License
 
 svelte-promise-modals is developed by and © Mainmatter GmbH and contributors. It is released under

dev.Dockerfile

@@ -0,0 +1,19 @@
+FROM mcr.microsoft.com/playwright:v1.53.1-noble AS base
+ARG DOCKER_USER
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
+COPY --chown=$DOCKER_USER . /app
+WORKDIR /app
+ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0
+RUN corepack enable
+
+FROM base AS build
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+
+FROM build
+COPY --from=build /app/node_modules /app/node_modules
+
+RUN corepack install
+RUN pnpm install
+RUN pnpm playwright install

package.json

@@ -1,96 +1,24 @@
 {
-  "name": "svelte-promise-modals",
+  "name": "root",
+  "private": true,
   "version": "0.1.5",
   "repository": "https://github.com/mainmatter/svelte-promise-modals",
   "scripts": {
-    "prepare": "svelte-kit sync",
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
     "release": "release-it",
     "prepublishOnly": "npm run package",
-    "test:ct:debug": "PWDEBUG=1 playwright test -c playwright-ct.config.ts",
-    "test:ct": "playwright test -c playwright-ct.config.ts",
     "changelog": "lerna-changelog",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test:unit": "vitest",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write . &&  eslint . --fix",
-    "test:svelte4": "pnpm add -D [email protected] && pnpm test:unit && pnpm test:ct",
-    "test:svelte5": "pnpm add -D svelte@next && pnpm test:unit && pnpm test:ct",
-    "test:all-versions": "pnpm test:svelte4 && pnpm test:svelte5"
+    "test": "pnpm -F svelte-promise-modals test:unit --run && pnpm -F test-app test:e2e",
+    "lint": "pnpm -r /lint/",
+    "format": "pnpm -r /format/",
+    "test:visual": "pnpm docker:build && pnpm docker:e2e",
+    "docker:build": "docker buildx build . --build-arg \"DOCKER_USER=$(id -u):$(id -g)\" -f dev.Dockerfile --tag spm-visual --load",
+    "docker:e2e": "docker run -v \"$(pwd)/:/app\" -u $(id -u):$(id -g) -i --rm spm-visual pnpm -F test-app test:e2e"
   },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    },
-    "./*.css": {
-      "import": "./dist/*.css",
-      "require": "./dist/*.css"
-    }
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/_*.*"
-  ],
   "engines": {
     "node": ">=16"
   },
-  "pnpm": {
-    "packageManager": "pnpm@^9.7.0"
-  },
-  "dependencies": {
-    "deepmerge": "^4.3.0",
-    "focus-trap": "^7.3.1"
-  },
-  "peerDependencies": {
-    "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0"
-  },
   "devDependencies": {
-    "@playwright/experimental-ct-svelte": "1.40.1",
-    "@playwright/test": "1.40.1",
-    "@release-it-plugins/lerna-changelog": "^6.1.0",
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/adapter-static": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@testing-library/dom": "^9.0.0",
-    "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/svelte": "^5.2.6",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/prismjs": "^1.26.3",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitest/coverage-c8": "^0.33.0",
-    "dedent": "^1.5.1",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
-    "eslint-plugin-svelte": "^2.32.4",
-    "jest": "^29.4.3",
-    "jsdom": "^24.0.0",
-    "prettier": "^3.0.0",
-    "prettier-plugin-svelte": "^3.0.0",
-    "prism-svelte": "^0.5.0",
-    "prismjs": "^1.29.0",
-    "publint": "^0.2.0",
-    "release-it": "^17.0.1",
-    "sinon": "^17.0.0",
-    "svelte": "^4.0.5",
-    "svelte-check": "^3.4.3",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.0",
-    "vitest": "^1.0.0"
+     "playwright": "^1.53.0"
   },
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module"
+  "packageManager": "[email protected]"
 }