Convert to pnpm monorepo, fix Vercel builds, improve test caching, li…

…nt (pacocoursey#202)

* cleanup package.json files

* prettier

* move tests to test/

* empty commit for vercel build

* empty commit for vercel build

* rename root package.json

* upgrade next.js and react in examples

* switch to pnpm monorepo, upgrade deps

* update github actions to use pnpm, add to packageManager

* use workspace dep

* update workflows to install pnpm

* back to npx

* many changes…

* empty commit for vercel build

* empty commit for vercel build

* empty commit for vercel build

* idk

* revert link changes, ready to merge

.github/workflows/e2e.yml

@@ -8,12 +8,37 @@ jobs:
     timeout-minutes: 5
     runs-on: ubuntu-latest
     steps:
-      - name: Prepare Playwright
-        uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
       - uses: actions/setup-node@v2
         with:
-          node-version: "18"
-      - run: yarn
-      - run: npx playwright install --with-deps
+          node-version: 18.x
+          cache: 'pnpm'
+
+      - run: pnpm install
+        env:
+          CI: true
+
+      - name: Store Playwright's Version
+        run: |
+          PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test | grep @playwright | sed 's/.*@//')
+          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+
+      - name: Cache Playwright Browsers for Playwright's Version
+        id: cache-playwright-browsers
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Setup Playwright
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps
+
       - name: Run tests
-        run: yarn test:e2e
+        run: pnpm test:e2e

.github/workflows/test.yml

@@ -4,29 +4,23 @@ on: push
 
 jobs:
   test:
+    name: Run Unit Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - name: Get yarn cache
-        id: yarn-cache
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v1
+      - uses: pnpm/action-setup@v2
         with:
-          path: ${{ steps.yarn-cache.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          version: 8
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: 18.x
+          cache: 'pnpm'
 
-      - name: yarn install
-        run: yarn
+      - run: pnpm install
         env:
           CI: true
 
-      - name: Run test
-        run: yarn test
+      - name: Run tests
+        run: pnpm test

.prettierignore

@@ -0,0 +1,3 @@
+.next
+dist
+build

.prettierrc

@@ -1,7 +1,7 @@
 {
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "arrowParens": "avoid",
-    "printWidth": 100
-}
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "printWidth": 100
+}

examples/example/package.json

@@ -1,17 +1,15 @@
 {
   "name": "example",
   "version": "1.0.0",
-  "main": "index.js",
-  "license": "MIT",
   "scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "next": "^12.1.6",
-    "next-themes": "*",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "next": "12.2.2",
+    "next-themes": "workspace:*",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   }
-}
+}

examples/example/pages/index.js

@@ -10,7 +10,7 @@ const Index = () => {
   return (
     <div>
       <h1>next-themes Example</h1>
-      <select value={theme} onChange={e => setTheme(e.target.value)} data-test-id='theme-selector'>
+      <select value={theme} onChange={e => setTheme(e.target.value)} data-test-id="theme-selector">
         <option value="system">System</option>
         {mounted && (
           <>

examples/example/styles.css

@@ -20,8 +20,8 @@ body {
 
 body {
   min-height: 100vh;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
+    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   background: var(--bg);
   color: var(--fg);
   display: flex;

examples/tailwind/package.json

@@ -1,21 +1,20 @@
 {
-  "name": "with-tailwindcss",
+  "name": "tailwind",
   "version": "1.0.0",
   "scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "next": "^12.1.6",
-    "next-themes": "*",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "next": "12.2.2",
+    "next-themes": "workspace:*",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "autoprefixer": "^10.0.2",
-    "postcss": "^8.1.7",
-    "tailwindcss": "^2.0.1"
-  },
-  "license": "MIT"
-}
+    "autoprefixer": "10.4.15",
+    "postcss": "8.4.28",
+    "tailwindcss": "3.3.3"
+  }
+}

examples/tailwind/pages/_app.js

@@ -3,7 +3,7 @@ import '../styles.css'
 
 function MyApp({ Component, pageProps }) {
   return (
-    <ThemeProvider forcedTheme={Component.theme || undefined} attribute='class'>
+    <ThemeProvider forcedTheme={Component.theme || undefined} attribute="class">
       <Component {...pageProps} />
     </ThemeProvider>
   )

examples/tailwind/tailwind.config.js

@@ -3,6 +3,6 @@ module.exports = {
     removeDeprecatedGapUtilities: true,
     purgeLayersByDefault: true
   },
-  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
+  content: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'class'
 }

license.md

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package.json

@@ -1,27 +1,26 @@
 {
-  "name": "next-themes",
   "private": true,
-  "version": "0.2.0",
-  "workspaces": [
-    "packages/*",
-    "examples/*"
-  ],
   "scripts": {
-    "prepublish": "yarn build --filter=next-themes",
+    "prepublish": "pnpm build --filter=next-themes",
     "build": "turbo build",
     "start": "turbo start",
     "dev": "turbo dev",
     "test": "turbo test",
-    "test:e2e": "yarn playwright test"
+    "test:e2e": "pnpm playwright test",
+    "lint": "prettier . --write"
   },
-  "dependencies": {},
   "devDependencies": {
-    "@playwright/test": "^1.21.1",
+    "@playwright/test": "^1.37.1",
     "prettier": "^2.2.1",
-    "turbo": "^1.10.9"
+    "turbo": "^1.10.12"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/pacocoursey/next-themes.git"
-  }
-}
+  },
+  "engines": {
+    "node": ">=18",
+    "pnpm": ">=8"
+  },
+  "packageManager": "pnpm@8.6.3"
+}

packages/next-themes/jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
-}
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$'
+}