fix: build with vite (#384)

* fix: build with vite

* fix: add types to build output

* fix: use specific build ts config

* fix: use https for mock host

package.json

@@ -1,47 +1,48 @@
 {
   "name": "@graasp/sdk",
   "version": "3.5.0",
+  "license": "AGPL-3.0-only",
   "repository": "[email protected]:graasp/graasp-sdk.git",
   "author": "Graasp",
   "contributors": [
     "Kim Lan Phan Hoang",
     "Basile Spaenlehauer"
   ],
-  "license": "AGPL-3.0-only",
-  "source": "src/index.ts",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "types": "dist/index.d.ts",
-  "typescript": {
-    "definition": "dist/index.d.ts"
-  },
-  "exports": {
-    ".": "./dist/index.js",
-    "./package.json": "./package.json"
-  },
+  "type": "module",
+  "sideEffects": false,
   "files": [
     "dist"
   ],
-  "dependencies": {
-    "date-fns": "3.3.1",
-    "js-cookie": "3.0.5",
-    "uuid": "9.0.1",
-    "validator": "13.11.0"
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
   },
   "scripts": {
-    "pre-commit": "yarn prettier:check && yarn lint",
-    "hooks:uninstall": "husky uninstall",
-    "hooks:install": "husky install",
-    "build": "tsc -p tsconfig.build.json && tsc-alias",
-    "type-check": "tsc --noEmit",
+    "build": "tsc --noEmit -p tsconfig.build.json && vite build",
     "test": "vitest",
+    "type-check": "tsc --noEmit",
     "lint": "eslint {src,test}",
     "prettier:check": "prettier --check src/**/*.ts",
     "prettier:write": "prettier --write src/**/*.ts",
+    "check": "yarn prettier:check && yarn lint && yarn type-check",
+    "pre-commit": "yarn prettier:check && yarn lint",
     "prepack": "yarn build",
     "prepare": "yarn prepack && yarn hooks:install",
-    "check": "yarn prettier:check && yarn lint && yarn type-check"
+    "hooks:install": "husky install",
+    "hooks:uninstall": "husky uninstall"
+  },
+  "dependencies": {
+    "js-cookie": "3.0.5",
+    "validator": "13.11.0"
+  },
+  "peerDependencies": {
+    "date-fns": "^3",
+    "uuid": "^9"
   },
   "devDependencies": {
     "@commitlint/cli": "18.5.0",
@@ -50,18 +51,21 @@
     "@types/eslint": "8.56.2",
     "@types/js-cookie": "3.0.6",
     "@types/jsdom": "21.1.6",
+    "@types/node": "20.11.6",
     "@types/uuid": "9.0.7",
     "@types/validator": "13.11.8",
     "@typescript-eslint/eslint-plugin": "6.19.1",
     "@typescript-eslint/parser": "6.19.1",
+    "date-fns": "3.3.1",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "husky": "8.0.3",
     "jsdom": "24.0.0",
     "prettier": "3.2.4",
-    "ts-node": "10.9.2",
-    "tsc-alias": "1.8.8",
     "typescript": "5.3.3",
+    "uuid": "9.0.1",
+    "vite": "5.0.12",
+    "vite-plugin-dts": "3.7.2",
     "vitest": "1.2.1"
   },
   "packageManager": "[email protected]"

src/utils/cookie.test.ts

@@ -2,7 +2,6 @@
 import Cookies from 'js-cookie';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { MOCK_DOMAIN, MOCK_LANG, MOCK_URL } from '../../test/fixtures';
 import {
   COOKIE_KEYS,
   buildIframeResizeHeightKey,
@@ -15,6 +14,10 @@ import {
   setLangCookie,
 } from './cookie';
 
+const MOCK_URL = 'https://example.com';
+const MOCK_LANG = 'en';
+const MOCK_DOMAIN = 'domain';
+
 describe('Cookie Util Tests', () => {
   beforeEach(() => {
     vi.resetAllMocks();

src/utils/navigation.test.ts

@@ -1,11 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import {
-  MOCK_HOST,
-  MOCK_HOST_WITH_PROTOCOL,
-  MOCK_ITEM_ID,
-  MOCK_URL,
-} from '../../test/fixtures';
 import { DEFAULT_PROTOCOL } from '../config';
 import * as cookieUtils from './cookie';
 import {
@@ -16,6 +10,11 @@ import {
   redirectToSavedUrl,
 } from './navigation';
 
+export const MOCK_ITEM_ID = '1234';
+const MOCK_URL = 'https://example.com';
+const MOCK_HOST = 'myhost';
+const MOCK_HOST_WITH_PROTOCOL = 'https://myhost.com';
+
 const mockTarget = {
   open: vi.fn(),
   location: {

tsconfig.build.json

@@ -1,10 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "test",
-    "src/**/*.test.ts"
-  ]
+  "exclude": ["src/**/*.test.ts"]
 }

tsconfig.json

@@ -1,26 +1,35 @@
 {
   "compilerOptions": {
-    "target": "es6",
-    "module": "node16",
-    "outDir": "dist",
-    "esModuleInterop": true,
-    "lib": ["esnext"],
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "ES2021.String", "ESNext", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "module": "ESNext",
     "skipLibCheck": true,
-    "declaration": true,
-    "declarationDir": "dist",
-    "moduleResolution": "node16",
-    "strict": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
     "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "types": ["vite/client"],
+    "paths": {
+      "@/*": ["./src/*"],
+    },
+
     "noImplicitThis": true,
     "noImplicitAny": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "strictPropertyInitialization": false,
     "strictNullChecks": true,
-    "baseUrl": "./src",
-    "paths": {
-      "@/*": ["./*"]
-    }
   },
-  "include": ["src/**/*"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }],
 }

tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "include": ["vite.config.ts", "package.json"]
+}

vite.config.ts

@@ -1,15 +1,40 @@
 /// <reference types="vitest" />
+import { resolve } from 'path';
 import { fileURLToPath } from 'url';
-import { defineConfig } from 'vite';
+import { UserConfigExport, defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
 
-export default defineConfig({
-  test: {},
-  resolve: {
-    alias: [
-      {
-        find: '@',
-        replacement: fileURLToPath(new URL('./src', import.meta.url)),
-      },
+export default (): UserConfigExport => {
+  return defineConfig({
+    test: {},
+    plugins: [
+      dts({
+        tsconfigPath: './tsconfig.build.json',
+        insertTypesEntry: true,
+      }),
     ],
-  },
-});
+    build: {
+      lib: {
+        // Could also be a dictionary or array of multiple entry points
+        entry: resolve(__dirname, 'src/index.ts'),
+        name: 'graasp-sdk',
+        formats: ['cjs', 'es'],
+        // the proper extensions will be added
+        fileName: 'index',
+      },
+      rollupOptions: {
+        // make sure to externalize deps that shouldn't be bundled
+        // into your library
+        external: ['date-fns', 'uuid'],
+      },
+    },
+    resolve: {
+      alias: [
+        {
+          find: '@',
+          replacement: fileURLToPath(new URL('./src', import.meta.url)),
+        },
+      ],
+    },
+  });
+};