test: add ssr tests

.github/workflows/ci.yml

@@ -46,7 +46,7 @@ jobs:
           token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: true
           verbose: true
-          directory: ./docs/storybook/coverage
+          directory: ./coverage
 
       - uses: preactjs/compressed-size-action@v2
         with:

.nvmrc

@@ -1 +1 @@
-lts/hydrogen
+20.5.0

docs/ssr-tests/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@this/ssr-tests",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "author": "",
+  "main": "ssr.test.js",
+  "type": "module",
+  "license": "MIT",
+  "scripts": {
+    "test": "rm -rf ./coverage && NODE_V8_COVERAGE='../../coverage/ssr-tests' node --experimental-test-coverage --test"
+  },
+  "devDependencies": {
+    "react": "^18.2.0"
+  }
+}

docs/ssr-tests/ssr.test.mjs

@@ -0,0 +1,22 @@
+const assert = await import('node:assert');
+const { describe, it } = await import('node:test');
+const React = await import('react');
+
+const { ReactCompareSlider, ReactCompareSliderImage } = await import('../../dist/index.mjs');
+
+describe('SSR', () => {
+  it('should render without error', () => {
+    const root = React.createElement(ReactCompareSlider, {
+      itemOne: React.createElement(ReactCompareSliderImage, {
+        alt: 'Example 1',
+        src: 'example-1.jpg',
+      }),
+      itemTwo: React.createElement(ReactCompareSliderImage, {
+        alt: 'Example 2',
+        src: 'example-2.jpg',
+      }),
+    });
+
+    assert.strictEqual(React.isValidElement(root), true);
+  });
+});

docs/storybook/package.json

@@ -18,22 +18,22 @@
   "devDependencies": {
     "@storybook/addon-console": "^1.2.3",
     "@storybook/addon-coverage": "^0.0.8",
-    "@storybook/addon-docs": "^7.0.2",
-    "@storybook/addon-essentials": "^7.0.2",
-    "@storybook/addon-interactions": "^7.0.2",
-    "@storybook/addon-links": "^7.0.2",
-    "@storybook/addon-storysource": "^7.0.2",
-    "@storybook/blocks": "^7.0.2",
-    "@storybook/builder-vite": "^7.0.2",
+    "@storybook/addon-docs": "^7.0.7",
+    "@storybook/addon-essentials": "^7.0.7",
+    "@storybook/addon-interactions": "^7.0.7",
+    "@storybook/addon-links": "^7.0.7",
+    "@storybook/addon-storysource": "^7.0.7",
+    "@storybook/blocks": "^7.0.7",
+    "@storybook/builder-vite": "^7.0.7",
     "@storybook/jest": "^0.1.0",
     "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^7.0.2",
-    "@storybook/react-vite": "^7.0.2",
+    "@storybook/react": "^7.0.7",
+    "@storybook/react-vite": "^7.0.7",
     "@storybook/test-runner": "^0.10.0",
     "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.2",
+    "@storybook/theming": "^7.0.7",
     "remark-gfm": "^3.0.1",
-    "storybook": "^7.0.2",
-    "vite": "^4.2.0"
+    "storybook": "^7.0.7",
+    "vite": "^4.3.3"
   }
 }

package.json

@@ -27,24 +27,25 @@
     "portrait",
     "typescript"
   ],
-  "packageManager": "pnpm@8.1.1",
+  "packageManager": "pnpm@8.3.1",
   "sideEffects": false,
   "module": "dist/index.mjs",
-  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
     "bootstrap": "corepack disable && corepack enable && pnpm install --frozen-lockfile",
     "clean": "rm -rvf ./node_modules ./docs/*/node_modules",
     "dev": "tsup --watch",
-    "dx": "npm run bootstrap && pnpm run prepare && pnpm run prepare",
+    "dx": "npm run bootstrap",
     "start": "concurrently -k -s first -n \"tsup,ts\" -c \"blue,cyan\" \"pnpm run dev\" \"pnpm run check:types --watch\"",
     "build": "pnpm run check:types && NODE_ENV=production tsup",
     "release": "pnpm run build && np --no-2fa",
-    "test": "pnpm --filter @this/storybook run test",
-    "test:coverage": "pnpm run test --coverage && pnpm nyc report --reporter=lcov -t ./docs/storybook/coverage/storybook --report-dir ./docs/storybook/coverage/storybook",
+    "test": "pnpm --filter @this/ssr-tests run test && pnpm --filter @this/storybook run test",
+    "test:coverage": "pnpm --filter @this/ssr-tests run test && pnpm run test:storybook",
     "test:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run --filter @this/storybook storybook:build --quiet && pnpm sirv ./docs/storybook/storybook-static --host 127.0.0.1 --port 6006\" \"pnpm wait-port 6006 && pnpm run test:coverage\"",
+    "test:storybook": "pnpm run test --coverage && pnpm nyc report --reporter=lcov -t ./docs/storybook/coverage/storybook --report-dir ./coverage/storybook",
     "check:package": "pkg-ok",
     "check:types": "tsc --noEmit",
     "lint": "concurrently -n \"eslint,prettier\" -c \"green,magenta\" \"pnpm run lint:eslint\" \"pnpm run lint:prettier\"",
@@ -90,31 +91,31 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
-    "@types/node": "^18.15.11",
-    "@types/react": "^18.0.33",
-    "@types/react-dom": "^18.0.11",
+    "@types/node": "^18.16.2",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
     "@types/resize-observer-browser": "^0.1.7",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
     "browserslist": "^4.21.5",
     "concurrently": "^8.0.1",
     "esbuild-plugin-browserslist": "^0.7.0",
-    "eslint": "^8.37.0",
+    "eslint": "^8.39.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.0",
+    "lint-staged": "^13.2.2",
     "np": "^7.7.0",
     "nyc": "^15.1.0",
     "pkg-ok": "^3.0.0",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sirv-cli": "^2.0.2",
     "tslib": "~2.5.0",
     "tsup": "^6.7.0",
-    "typescript": "5.0.3",
+    "typescript": "^5.0.4",
     "wait-port": "^1.0.4"
   }
 }