Merge pull request #559 from jaredpalmer/feature/use-tsup-and-turborepo

Feature Upgrade Dependecies

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.gitignore

@@ -6,4 +6,5 @@ build
 .vscode
 *.map
 cache
-.yalc
+.yalc
+.turbo

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged

package.json

@@ -3,36 +3,31 @@
   "private": true,
   "version": "independent",
   "devDependencies": {
-    "got": "^11.0.2",
-    "husky": "^4.2.3",
-    "lerna": "^3.20.2",
-    "lint-staged": "^10.0.8",
-    "prettier": "^1.19.1",
-    "release": "^6.1.0"
+    "lint-staged": "^13.2.1",
+    "prettier": "^2.8.7",
+    "husky": "^8.0.0"
   },
   "workspaces": [
     "packages/*"
   ],
   "scripts": {
-    "test:ci": "lerna run test:ci --stream",
     "format": "prettier --trailing-comma es5 --single-quote --semi --write \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|mdx)\"",
-    "publish-canary": "lerna version prerelease --preid canary --force-publish && release --pre",
-    "publish-stable": "lerna version --force-publish && release && node ./scripts/release-notes.js"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|mdx)": [
-      "prettier --trailing-comma es5 --single-quote --semi --write",
-      "git add"
-    ]
+    "publish-packages": "turbo run build lint test && changeset version && changeset publish",
+    "prepare": "husky install"
   },
   "prettier": {
     "trailingComma": "es5",
     "singleQuote": true,
     "semi": true
+  },
+  "dependencies": {
+    "@changesets/cli": "^2.26.1",
+    "turbo": "^1.9.3"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "turbo lint",
+      "prettier --write"
+    ]
   }
 }

packages/after.js/.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:testing-library/react",
+    "plugin:jest-dom/recommended"
+  ],
+  "overrides": [],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {}
+}

packages/after.js/package.json

@@ -1,20 +1,27 @@
 {
+  "name": "@jaredpalmer/after",
+  "private": false,
+  "description": "Build isomorphic Javascript applications with ease.",
+  "repository": "jaredpalmer/after.js",
+  "author": "Jared Palmer <[email protected]>",
+  "sideEffects": false,
   "version": "3.2.0",
   "license": "MIT",
   "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
-    "size": "size-limit",
-    "analyze": "size-limit --why"
+    "build": "tsup src/index.tsx --format cjs,esm --dts --legacy-output --clean",
+    "dev": "npm run build -- --watch",
+    "clean": "rm -rf dist",
+    "lint": "yarn typecheck && eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
     "express": ">=4",
@@ -24,64 +31,34 @@
     "react-router-dom": ">=5.0.0",
     "serialize-javascript": ">=3.0.0"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
-  "name": "@jaredpalmer/after",
-  "private": false,
-  "description": "Build isomorphic Javascript applications with ease.",
-  "repository": "jaredpalmer/after.js",
-  "author": "Jared Palmer <[email protected]>",
-  "module": "dist/esm/index.esm.js",
-  "sideEffects": false,
-  "size-limit": [
-    {
-      "path": "dist/after.cjs.production.min.js",
-      "limit": "20 KB"
-    },
-    {
-      "path": "dist/esm/*.esm.js",
-      "limit": "20 KB"
-    }
-  ],
-  "jest": {
-    "globals": {
-      "ts-jest": {
-        "diagnostics": false
-      }
-    }
-  },
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^6.0.4",
-    "@types/express": "^4.17.3",
-    "@types/jest": "^25.2.1",
-    "@types/node": "^13.13.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/express": "^4.17.17",
+    "@types/node": "^18.15.12",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
     "@types/react-helmet": "^5.0.15",
     "@types/react-router-dom": "^5.1.4",
     "@types/serialize-javascript": "^1.5.0",
-    "@typescript-eslint/eslint-plugin": "^2.29.0",
-    "@typescript-eslint/parser": "^2.29.0",
-    "babel-jest": "^24.9.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.19.0",
-    "express": "^4.17.1",
-    "husky": "^7.0.4",
-    "jest": "^25.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-jest-dom": "^4.0.3",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-testing-library": "^5.10.3",
+    "express": "^4.18.2",
+    "happy-dom": "^9.8.4",
     "razzle-dev-utils": "^3.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.0.0",
     "react-router-dom": "^5.1.2",
     "serialize-javascript": "^3.0.0",
-    "size-limit": "^6.0.4",
-    "ts-jest": "^25.4.0",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.3.1",
-    "typescript": "^4.4.4"
+    "tsup": "^6.7.0",
+    "typescript": "^4.4.4",
+    "vitest": "^0.30.1"
   },
   "dependencies": {
     "babel-plugin-after": "^3.2.0"

packages/after.js/src/After.tsx

@@ -159,6 +159,8 @@ class Afterparty extends React.Component<AfterpartyProps, AfterpartyState> {
   render() {
     const { previousLocation, data, isLoading } = this.state;
     const { location: currentLocation, transitionBehavior } = this.props;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     const initialData = this.prefetcherCache[currentLocation.pathname] || data;
 
     const instantMode = isInstantTransition(transitionBehavior);

packages/after.js/src/serializeData.tsx

@@ -27,8 +27,12 @@ export const SerializeData: React.FC<SerializeData> = ({
 };
 
 export const getSerializedData = (name: string, remove = true): any => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   const data = window[`_${name.toUpperCase()}_`];
   if (remove) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     delete window[`_${name.toUpperCase()}_`];
   }
   return data;

packages/after.js/test/errorPage.test.tsx

@@ -1,3 +1,5 @@
+import { vi } from 'vitest';
+
 import { render as renderPage } from '../src';
 import { Helmet } from 'react-helmet';
 
@@ -21,8 +23,8 @@ describe('ErrorPage', () => {
 
   beforeEach(() => {
     res = {
-      status: jest.fn(),
-      redirect: jest.fn(),
+      status: vi.fn(),
+      redirect: vi.fn(),
     };
   });
   it('should set statusCode to 200', async () => {

packages/after.js/test/getAssets.test.tsx

@@ -1,3 +1,5 @@
+import { vi } from 'vitest';
+
 import {
   getAssets as getRouteChunks,
   errorMeesage,
@@ -26,7 +28,7 @@ function getAssets(url, route = getRoute(url)) {
   return getRouteChunks({ route, chunks });
 }
 
-jest.mock('razzle-dev-utils/logger');
+vi.mock('razzle-dev-utils/logger');
 
 describe('getAssets', () => {
   test('for non-dynamic-import route should return empty array', () => {
@@ -45,7 +47,7 @@ describe('getAssets', () => {
   });
 
   test('should log and then throw error when chunkName is undefined and component is async', () => {
-    const errorLoger = jest.fn();
+    const errorLoger = vi.fn();
     logger.error.mockImplementation(errorLoger);
 
     const requestUrl = '/bad-route-config';

packages/after.js/test/setup-test-env.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

packages/after.js/tsconfig.json

@@ -31,7 +31,6 @@
     // error out if import and file system have a casing mismatch. Recommended by TS
     "forceConsistentCasingInFileNames": true,
     // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
-    "noEmit": true,
-    "suppressImplicitAnyIndexErrors": true
+    "noEmit": true
   }
 }

packages/after.js/vitest.config.ts

@@ -0,0 +1,16 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['./test/setup-test-env.ts'],
+    include: ['./test/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    watchExclude: ['.*\\/node_modules\\/.*', '.*\\/dist\\/.*'],
+  },
+});