refactor: move main code to lib, only build esm and replace np with…

… release it, closes #25 #26

.eslintrc

@@ -46,5 +46,17 @@
       }
     ],
     "@typescript-eslint/no-use-before-define": "warn"
-  }
+  },
+  "ignorePatterns": [
+    "*.log",
+    "*.md",
+    "*.mdx",
+    "node_modules/",
+    "dist/",
+    "coverage/",
+    ".nyc_output/",
+    ".pnpm-store/",
+    "pnpm-lock.yaml",
+    "storybook-static/"
+  ]
 }

.gitignore

@@ -12,3 +12,5 @@ storybook-static
 .nyc_output
 test-results/
 playwright-report/
+lib/README.md
+lib/LICENSE

example/src/App.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { ReactImageTurntable, useReactImageTurntable } from 'react-image-turntable';
 
 export const images = [

lib/.release-it.json

@@ -0,0 +1,10 @@
+{
+  "git": {
+    "commitMessage": "chore: release v${version}"
+  },
+  "github": {
+    "autoGenerate": true,
+    "release": true,
+    "web": true
+  }
+}

lib/package.json

@@ -0,0 +1,88 @@
+{
+  "version": "3.1.0",
+  "name": "react-image-turntable",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nerdyman/react-image-turntable.git",
+    "directory": "lib"
+  },
+  "homepage": "https://react-image-turntable.vercel.app",
+  "author": {
+    "email": "[email protected]",
+    "name": "nerdyman",
+    "url": "https://github.com/nerdyman"
+  },
+  "description": "Display a set of images as a draggable 360 degree turntable.",
+  "keywords": [
+    "react",
+    "image",
+    "360",
+    "turntable",
+    "rotator",
+    "slider"
+  ],
+  "engines": {
+    "node": ">=16.9.0"
+  },
+  "sideEffects": false,
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "start": "concurrently -k -s first -n \"tsup,ts\" -c \"blue,cyan\" \"tsup --watch\" \"pnpm run check:types --watch --preserveWatchOutput\"",
+    "build": "pnpm run check:types && NODE_ENV=production tsup",
+    "release": "pnpm run release:preflight && pnpm run release:publish",
+    "release:preflight": "cp ../README.md ../LICENSE . && pnpm run -w lint && pnpm run -w test && pnpm run build && pnpm run check",
+    "release:publish": "release-it",
+    "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 && publint",
+    "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"
+    ]
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20.8.9",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "browserslist": "^4.22.1",
+    "concurrently": "^8.2.2",
+    "esbuild-plugin-browserslist": "^0.10.0",
+    "publint": "^0.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "release-it": "^17.0.0",
+    "tslib": "~2.6.2",
+    "tsup": "^8.0.1",
+    "typescript": "^5.2.2"
+  }
+}

lib/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "lib": ["dom", "ESNext"],
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true
+  }
+}

lib/tsup.config.ts

@@ -0,0 +1,26 @@
+/* eslint no-console: 0, @typescript-eslint/explicit-function-return-type: 0 */
+import browserslist from 'browserslist';
+import { resolveToEsbuildTarget } from 'esbuild-plugin-browserslist';
+import type { Options } from 'tsup';
+import { defineConfig } from 'tsup';
+
+const target = resolveToEsbuildTarget(browserslist()) as Options['target'];
+
+export default defineConfig((options) => ({
+  clean: !options.watch,
+  dts: true,
+  entry: ['src/index.ts'],
+  format: ['esm'],
+  minify: !options.watch,
+  target,
+  sourcemap: true,
+  splitting: true,
+  // 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"',
+    };
+  },
+}));

package.json

@@ -1,28 +1,13 @@
 {
-  "version": "3.1.0",
-  "name": "react-image-turntable",
-  "description": "Display a set of images as a draggable 360 degree turntable.",
-  "keywords": [
-    "react",
-    "image",
-    "360",
-    "turntable",
-    "rotator",
-    "slider"
-  ],
+  "version": "0.0.1",
+  "name": "@this/root",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nerdyman/react-image-turntable.git"
   },
-  "author": "nerdyman",
   "license": "MIT",
   "sideEffects": false,
   "packageManager": "[email protected]",
-  "engines": {
-    "node": ">=16.9.0"
-  },
-  "module": "dist/index.mjs",
-  "typings": "dist/index.d.ts",
   "files": [
     "dist",
     "src"
@@ -31,14 +16,9 @@
     "bootstrap": "npm run bootstrap:project && npm run bootstrap:playwright",
     "bootstrap:project": "corepack enable && pnpm i --frozen-lockfile",
     "bootstrap:playwright": "pnpm exec playwright install chromium",
-    "build": "tsup",
-    "dev": "pnpm -r --stream run start",
-    "dx": "npm run bootstrap && pnpm exec husky install && pnpm run prepare",
-    "clean": "rm -rf ./node_modules ./coverage ./dist ./.nyc_output ./.*.log ./example/node_modules",
+    "clean": "rm -rf ./coverage ./dist ./.nyc_output ././{.,lib,example}.*.log ./{.,lib,example}/node_modules",
     "lint": "eslint . && prettier --check .",
-    "prepare": "husky install",
     "release": "pnpm run build && np --no-tests --no-cleanup",
-    "size": "size-limit",
     "start": "tsup --watch",
     "test": "rm -rf {.nyc_output,coverage} && playwright test && pnpm nyc report --reporter=lcov",
     "test:no-coverage": "playwright test",
@@ -50,21 +30,12 @@
       "eslint --fix"
     ]
   },
-  "np": {
-    "pnpm": true
-  },
   "prettier": {
     "printWidth": 100,
     "semi": true,
     "singleQuote": true,
     "trailingComma": "all"
   },
-  "size-limit": [
-    {
-      "path": "dist/index.mjs",
-      "limit": "1.2 KB"
-    }
-  ],
   "peerDependencies": {
     "react": ">=16.8"
   },
@@ -75,8 +46,6 @@
     "@size-limit/preset-small-lib": "^11.0.0",
     "@types/jest-axe": "^3.5.8",
     "@types/node": "^20.9.0",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
     "axe-core": "^4.8.2",
@@ -88,15 +57,9 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.1.0",
-    "np": "^8.0.4",
     "nyc": "^15.1.0",
     "playwright-core": "^1.39.0",
     "prettier": "^3.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "size-limit": "^11.0.0",
-    "tslib": "^2.6.2",
-    "tsup": "^7.2.0",
-    "typescript": "^5.2.2"
+    "size-limit": "^11.0.0"
   }
 }