refactor: move src -> lib/src and split up dependencies

Author: nerdyman

.github/workflows/ci.yml

@@ -33,13 +33,13 @@ jobs:
         run: pnpm run lint
 
       - name: 🔨 Build
-        run: pnpm run build
+        run: pnpm run --filter react-compare-slider build
 
       - name: 🧑‍🏫 Build Example Project
         run: pnpm run --filter @this/example build
 
       - name: 🕵️ Check Package Configuration
-        run: pnpm run check:package
+        run: pnpm run --filter react-compare-slider check:package
 
       - name: 🧪 Test
         run: |
@@ -52,7 +52,7 @@ jobs:
           token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: true
           verbose: true
-          files: ./coverage/lcov.info,!./coverage/ssr-tests/*,!./coverage/storybook/*
+          directory: ./coverage
 
       - name: Upload Code Climate Test Coverage
         uses: paambaati/[email protected]

docs/CONTRIBUTING.md

@@ -4,23 +4,25 @@ Thanks for contributing!
 
 ## Getting Started
 
-This is a pnpm monorepo, consisting of the main package in the root of the repo and [`storybook`](./storybook/) and [`example`](./example/) packages in the `docs` directory.
-packages in the `docs` folder. Don't worry if you haven't used pnpm or monorepos before, the
+This is a pnpm monorepo, consisting of the main package in [`lib`](../lib/) and [`storybook`](./storybook/) and [`example`](./example/) packages in the `docs` directory. Don't worry if you haven't used pnpm or monorepos before, the
 commands below will set everything up for you.
 
 Ensure you're using the Node version specified in [.nvmrc](../.nvmrc) and run the following to
 bootstrap the project:
 
 ```sh
-npm run dx
+npm run bootstrap
 # Also useful but not required, install shell auto completion for pnpm.
 pnpm install-completion
 ```
 
 To start the library in watch mode, run the following command:
 
 ```sh
-pnpm run start
+pnpm run --filter react-compare-slider dev
+# You can also run the scripts from the directory itself if you prefer.
+cd lib
+pnpm run dev
 ```
 
 ### Storybook
@@ -39,13 +41,13 @@ pnpm run storybook
 If you already have Storybook running, use the following command:
 
 ```sh
-pnpm run test
+pnpm run -w test
 ```
 
 If you _don't_ have Storybook running, use the following command:
 
 ```sh
-pnpm run test:ci
+pnpm run -w test:ci
 ```
 
 ## Standards

docs/example/package.json

@@ -1,8 +1,14 @@
 {
   "name": "react-compare-slider-example",
-  "private": true,
+  "license": "MIT",
   "version": "0.0.0",
+  "private": true,
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nerdyman/react-compare-slider.git",
+    "directory": "docs/example"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -17,8 +23,8 @@
   "devDependencies": {
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.49.0",
     "eslint-plugin-react-hooks": "^4.6.0",

docs/ssr-tests/package.json

@@ -12,7 +12,7 @@
     "test-legacy": "node --test"
   },
   "devDependencies": {
-    "@types/node": "^20.5.7",
+    "@types/node": "^20.6.2",
     "react": "^18.2.0",
     "react-compare-slider": "latest",
     "react-dom": "^18.2.0",

docs/ssr-tests/ssr.test.mjs

@@ -32,12 +32,16 @@ describe('SSR', () => {
       }),
     });
 
-    assert.strictEqual(isValidElement(root), true);
-    assert.strictEqual(renderToStaticMarkup(root).includes('data-rcs="root"'), true);
-    assert.strictEqual(renderToStaticMarkup(root).includes('src="example-1.jpg"'), true);
-    assert.strictEqual(renderToStaticMarkup(root).includes('src="example-2.jpg"'), true);
-    assert.strictEqual(mockConsoleError.mock.calls.length, 0);
-    assert.strictEqual(mockConsoleWarn.mock.calls.length, 0);
+    /**
+     * TypeScript errors if assertion isn't assigned.
+     * @see https://github.com/microsoft/TypeScript/issues/36931
+     */
+    let __ = assert.strictEqual(isValidElement(root), true);
+    __ = assert.strictEqual(renderToStaticMarkup(root).includes('data-rcs="root"'), true);
+    __ = assert.strictEqual(renderToStaticMarkup(root).includes('src="example-1.jpg"'), true);
+    __ = assert.strictEqual(renderToStaticMarkup(root).includes('src="example-2.jpg"'), true);
+    __ = assert.strictEqual(mockConsoleError.mock.calls.length, 0);
+    __ = assert.strictEqual(mockConsoleWarn.mock.calls.length, 0);
 
     mock.reset();
   });

docs/storybook/.storybook/hack-coverage.js

@@ -13,7 +13,7 @@ const coveragePath = path.join(__dirname, '..', 'coverage', 'storybook', 'covera
 
 const coverage = fs
   .readFileSync(coveragePath, 'utf8')
-  .replaceAll('react-compare-slider/docs/storybook/src', 'react-compare-slider/src');
+  .replaceAll('react-compare-slider/docs/storybook/src', 'react-compare-slider/lib/src');
 
 fs.writeFileSync(coveragePath, coverage);
 

docs/storybook/.storybook/main.ts

@@ -2,7 +2,6 @@
 
 import { resolve } from 'node:path';
 
-import type { AddonOptionsVite } from '@storybook/addon-coverage';
 import type { StorybookConfig } from '@storybook/react-vite';
 import remarkGfm from 'remark-gfm';
 import { mergeConfig } from 'vite';
@@ -15,12 +14,7 @@ const config: StorybookConfig = {
   framework: '@storybook/react-vite',
 
   addons: [
-    {
-      name: '@storybook/addon-essentials',
-      options: {
-        docs: false,
-      },
-    },
+    '@storybook/addon-essentials',
     {
       name: '@storybook/addon-docs',
       options: {

docs/storybook/package.json

@@ -34,7 +34,7 @@
     "@storybook/react": "^7.4.0",
     "@storybook/react-vite": "^7.4.0",
     "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/testing-library": "^0.2.1",
     "@storybook/theming": "^7.4.0",
     "remark-gfm": "^3.0.1",
     "storybook": "^7.4.0",

docs/storybook/tsconfig.json

@@ -1,6 +1,6 @@
 {
-  "extends": "../../tsconfig.json",
-  "include": ["src", "content"],
+  "extends": "../../lib/tsconfig.json",
+  "include": ["src", "dist", "content"],
   "compilerOptions": {
     "module": "ESNext",
     "moduleResolution": "Bundler",

lib/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "react-compare-slider",
+  "version": "2.2.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nerdyman/react-compare-slider.git",
+    "directory": "lib"
+  },
+  "homepage": "https://react-compare-slider.vercel.app",
+  "author": {
+    "email": "[email protected]",
+    "name": "nerdyman",
+    "url": "https://github.com/nerdyman"
+  },
+  "description": "A slider component to compare any two React components in landscape or portrait orientation. It supports custom images, videos... and everything else.",
+  "keywords": [
+    "react",
+    "slider",
+    "comparison",
+    "compare",
+    "image",
+    "video",
+    "canvas",
+    "component",
+    "image comparison",
+    "twentytwenty",
+    "portrait",
+    "typescript"
+  ],
+  "engines": {
+    "node": ">=16.9.0"
+  },
+  "sideEffects": false,
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "concurrently -k -s first -n \"tsup,ts\" -c \"blue,cyan\" \"tsup --watch\" \"pnpm run check:types --watch --preserveWatchOutput\"",
+    "start": "pnpm run dev",
+    "build": "pnpm run check:types && NODE_ENV=production tsup",
+    "release": "pnpm run -w lint && pnpm run -w test && pnpm run build && pnpm run check && np --no-tests --no-cleanup",
+    "check": "concurrently -n \"package,types\" -c \"blue,magenta\" \"pnpm run check:package\" \"pnpm run check:types\"",
+    "check:package": "attw -P . --ignore-rules cjs-resolves-to-esm",
+    "check:types": "tsc --noEmit"
+  },
+  "browserslist": {
+    "production": [
+      "last 2 chrome versions",
+      "last 2 edge versions",
+      "last 2 firefox versions",
+      "safari >= 15.6",
+      "ios >= 15.6",
+      "not dead",
+      "not ie > 0",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "np": {
+    "pnpm": true
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.10.2",
+    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
+    "@types/node": "^20.6.2",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "browserslist": "^4.21.10",
+    "concurrently": "^8.2.1",
+    "esbuild-plugin-browserslist": "^0.9.0",
+    "np": "^8.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tslib": "~2.6.2",
+    "tsup": "^7.2.0",
+    "typescript": "^5.2.2"
+  }
+}

src/Container.tsx renamed to lib/src/Container.tsx

@@ -194,8 +194,8 @@ export const ReactCompareSlider: ForwardRefExoticComponent<
     );
 
     /**
-     * Yo dawg, we heard you like handles, so we handled in your handle so you can handle
-     * while you handle.
+     * Yo dawg, we heard you like handles, so we handled in your handle so you can handle while you
+     * handle.
      */
     const handleHandleClick = useCallback((ev: PointerEvent) => {
       ev.preventDefault();
@@ -210,7 +210,6 @@ export const ReactCompareSlider: ForwardRefExoticComponent<
         }
 
         ev.preventDefault();
-
         setCanTransition(true);
 
         const { top, left } = (

src/ReactCompareSlider.tsx renamed to lib/src/ReactCompareSlider.tsx

@@ -15,9 +15,9 @@ export default defineConfig((options) => ({
   target,
   sourcemap: true,
   splitting: true,
-  // Storybook docgen won't work with files sourced from outside of its root directory, so we need
-  // to copy the src into the docs folder.
-  onSuccess: 'cp -r src ./docs/storybook',
+  // Storybook test coverage won't work with files sourced from outside of its root directory, so
+  // we need to copy the lib into the docs folder.
+  onSuccess: 'cp -r src ../docs/storybook',
   esbuildOptions(esbuild) {
     esbuild.banner = {
       js: '"use client"',