fix: ensure browser compatibility (#150)

* chore: maybe we are now 100% browser compitible? * chore: why is everything broken permalink: http://whatthecommit.com/61392d8529ad51956024f721ebf30995 * chore: epic permalink: http://whatthecommit.com/d9796047a759e445935a287c17d1037c * chore: is there an award for this? permalink: http://whatthecommit.com/cb4f7f1124e8bd95fc10f272830701d3 * ci: push unfinished test * chore: merge pull my finger request permalink: http://whatthecommit.com/569aa58b98f6e4aac466357a4997c2b2 * ci: do in correct way * ci: fix scripts and build once * ci: skip lib check bcz of happy-dom typings * ci: change name * test: fix file path * chore: use jsdom * chore: it worked * ci: change test as vitest is weired * chore: remove script * chore: fix pc load letter error permalink: http://whatthecommit.com/43398194a4cdd602ab7456be8066106f * chore: reinventing the wheel. again. permalink: http://whatthecommit.com/b2b30ca13c6041aee39eecb2b3a47211 * chore: readd `node:` protocol with a patch * chore: it worked yarnpkg/berry#4231 Co-authored-by: Jeroen Claassens <[email protected]>
sapphiredev · Jul 10, 2022 · 92d05d8 · 92d05d8
1 parent 36348dc
commit 92d05d8
Show file tree

Hide file tree

Showing 10 changed files with 7,320 additions and 6,200 deletions.
diff --git a/.github/workflows/continuous-integration.yml b/.github/workflows/continuous-integration.yml
@@ -26,33 +26,6 @@ jobs:
       - name: Run ESLint
         run: yarn lint --fix=false
 
-  Testing:
-    name: Unit Tests
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        node: [14, 16, 18]
-    steps:
-      - name: Checkout Project
-        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # tag=v3
-      - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@eeb10cff27034e7acf239c5d29f62154018672fd # tag=v3
-        with:
-          node-version: ${{ matrix.node }}
-          cache: yarn
-          registry-url: https://registry.npmjs.org/
-      - name: Install Dependencies
-        run: yarn --immutable
-      - name: Run tests
-        run: yarn test --coverage
-      - name: Store code coverage report
-        uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # tag=v3
-        if: matrix.node == 18
-        with:
-          name: coverage
-          path: coverage/
-
   Building:
     name: Compile source code
     runs-on: ubuntu-latest
@@ -71,33 +44,45 @@ jobs:
         run: yarn --immutable
       - name: Typecheck And Build Code
         run: yarn typecheck && yarn build
-      - name: Upload bundle to artifacts
+      - name: Upload dist folder to artifacts
         uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # tag=v3
         with:
-          name: bundle
+          name: dist
           path: dist/
           if-no-files-found: error
 
-  NoModulesTesting:
-    name: No Modules Testing
+  Testing:
+    name: Unit Tests
     runs-on: ubuntu-latest
     needs: Building
+    strategy:
+      fail-fast: false
+      matrix:
+        node: [14, 16, 18]
     steps:
       - name: Checkout Project
         uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b # tag=v3
-      - name: Download generated typings artifact
+      - name: Download dist folder from artifacts
         uses: actions/download-artifact@fb598a63ae348fa914e94cd0ff38f362e927b741 # tag=v3
         with:
-          name: bundle
+          name: dist
           path: dist/
-      - name: Use Node.js v18
+      - name: Use Node.js ${{ matrix.node }}
         uses: actions/setup-node@eeb10cff27034e7acf239c5d29f62154018672fd # tag=v3
         with:
-          node-version: 18
+          node-version: ${{ matrix.node }}
           cache: yarn
           registry-url: https://registry.npmjs.org/
-      - name: Run test script
-        run: node scripts/no-bundle-test.mjs
+      - name: Install Dependencies
+        run: yarn --immutable
+      - name: Run tests
+        run: yarn test
+      - name: Store code coverage report
+        uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # tag=v3
+        if: matrix.node == 18
+        with:
+          name: coverage
+          path: coverage/
 
   Upload_Coverage_Report:
     name: Upload coverage report to codecov

diff --git a/.yarn/patches/@esbuild-plugins-node-modules-polyfill-npm-0.1.4-3fbc582225.patch b/.yarn/patches/@esbuild-plugins-node-modules-polyfill-npm-0.1.4-3fbc582225.patch
diff --git a/package.json b/package.json
@@ -25,35 +25,36 @@
 		"update": "yarn upgrade-interactive",
 		"build": "tsup",
 		"clean": "node scripts/clean.mjs",
-		"typecheck": "tsc -p tsconfig.typecheck.json",
+		"typecheck": "tsc -p tsconfig.eslint.json",
 		"bump": "cliff-jumper",
 		"check-update": "cliff-jumper --dry-run",
 		"postinstall": "husky install .github/husky",
-		"prepack": "rollup-type-bundler -e node:util && pinst --disable",
+		"prepack": "rollup-type-bundler -e util && pinst --disable",
 		"postpack": "pinst --enable"
 	},
 	"devDependencies": {
 		"@commitlint/cli": "^17.0.3",
 		"@commitlint/config-conventional": "^17.0.3",
+		"@esbuild-plugins/node-modules-polyfill": "^0.1.4",
 		"@favware/cliff-jumper": "^1.8.5",
 		"@favware/npm-deprecate": "^1.0.4",
 		"@favware/rollup-type-bundler": "^1.0.9",
 		"@sapphire/eslint-config": "^4.3.7",
 		"@sapphire/prettier-config": "^1.4.3",
 		"@sapphire/ts-config": "^3.3.4",
+		"@types/jsdom": "^16.2.14",
 		"@types/lodash.uniqwith": "^4.5.7",
-		"@types/node": "^18.0.0",
+		"@types/node": "^18.0.3",
 		"@typescript-eslint/eslint-plugin": "^5.30.5",
 		"@typescript-eslint/parser": "^5.30.5",
 		"c8": "^7.11.3",
 		"cz-conventional-changelog": "^3.3.0",
 		"eslint": "^8.19.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-prettier": "^4.2.1",
-		"fast-deep-equal": "^3.1.3",
 		"husky": "^8.0.1",
+		"jsdom": "^20.0.0",
 		"lint-staged": "^13.0.3",
-		"lodash.uniqwith": "^4.5.0",
 		"pinst": "^3.0.0",
 		"prettier": "^2.7.1",
 		"pretty-quick": "^3.1.3",
@@ -115,8 +116,13 @@
 	},
 	"resolutions": {
 		"ansi-regex": "^5.0.1",
-		"minimist": "^1.2.6"
+		"minimist": "^1.2.6",
+		"@esbuild-plugins/node-modules-polyfill@^0.1.4": "patch:@esbuild-plugins/node-modules-polyfill@npm:0.1.4#.yarn/patches/@esbuild-plugins-node-modules-polyfill-npm-0.1.4-3fbc582225.patch"
 	},
 	"prettier": "@sapphire/prettier-config",
-	"packageManager": "[email protected]"
+	"packageManager": "[email protected]",
+	"dependencies": {
+		"fast-deep-equal": "^3.1.3",
+		"lodash.uniqwith": "^4.5.0"
+	}
 }
diff --git a/scripts/no-bundle-test.mjs b/scripts/no-bundle-test.mjs
diff --git a/tests/browser/browser.test.ts b/tests/browser/browser.test.ts
@@ -0,0 +1,42 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { type DOMWindow, JSDOM } from 'jsdom';
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+describe('browser-bundle-test', () => {
+	let window: DOMWindow;
+
+	beforeAll(async () => {
+		window = new JSDOM(
+			`
+				<!DOCTYPE html>
+				<html lang="en">
+				<head>
+					<meta charset="UTF-8">
+					<meta http-equiv="X-UA-Compatible" content="IE=edge">
+					<meta name="viewport" content="width=device-width, initial-scale=1.0">
+					<title>BrowserBundleTest</title>
+					<script>${await readFile(join(__dirname, '../../dist/index.global.js'), 'utf8')}</script>
+				</head>
+				<body></body>
+				</html>
+		`,
+			{
+				runScripts: 'dangerously'
+			}
+		).window;
+	});
+
+	test('GIVEN an unique array THEN return the given value', () => {
+		expect(window.SapphireShapeshift.s.string.parse('Hello')).toBe('Hello');
+	});
+});
+
+declare global {
+	interface Window {
+		SapphireShapeshift: typeof import('../../src');
+	}
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -3,6 +3,7 @@
 	"compilerOptions": {
 		"target": "ES2020",
 		"useDefineForClassFields": false,
-		"emitDecoratorMetadata": false
+		"emitDecoratorMetadata": false,
+		"skipLibCheck": true
 	}
 }
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
@@ -1,4 +1,10 @@
 {
 	"extends": "./tsconfig.base.json",
+	"compilerOptions": {
+		"noEmit": true,
+		"incremental": false,
+		"types": ["vitest/globals"],
+		"lib": ["dom", "esnext"]
+	},
 	"include": ["src", "tests", "scripts", "vitest.config.ts", "tsup.config.ts"]
 }
diff --git a/tsconfig.typecheck.json b/tsconfig.typecheck.json
diff --git a/tsup.config.ts b/tsup.config.ts
@@ -1,18 +1,20 @@
 import { defineConfig } from 'tsup';
+import NodeModulesPolyfills from '@esbuild-plugins/node-modules-polyfill';
 
 export default defineConfig({
 	clean: true,
 	dts: true,
 	entry: ['src/index.ts'],
 	format: ['esm', 'cjs', 'iife'],
 	minify: false,
-	skipNodeModulesBundle: false,
-	bundle: true,
+	skipNodeModulesBundle: true,
 	sourcemap: true,
 	target: 'es2020',
 	tsconfig: 'src/tsconfig.json',
 	keepNames: true,
 	globalName: 'SapphireShapeshift',
+	// @ts-expect-error it's exported as default
+	esbuildPlugins: [NodeModulesPolyfills.default()],
 	esbuildOptions: (options, context) => {
 		if (context.format === 'cjs') {
 			options.banner = {