build: migrate build process to vite library mode

package.json

@@ -18,19 +18,19 @@
   "files": [
     "dist/**"
   ],
-  "types": "./dist/esm/index.d.ts",
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/react-doc-viewer.cjs",
+  "module": "./dist/react-doc-viewer.js",
   "exports": {
-    "require": "./dist/cjs/index.js",
-    "import": "./dist/esm/index.js"
+    ".": {
+      "require": "./dist/react-doc-viewer.cjs",
+      "import": "./dist/react-doc-viewer.js",
+      "types": "./dist/index.d.ts"
+    }
   },
   "scripts": {
     "start": "storybook dev -p 6006",
-    "build": "rm -rf dist && npm run build:esm && npm run build:cjs",
-    "build:esm": "tsc --project tsconfig.build.json",
-    "build:cjs": "tsc --project tsconfig.build.json --module commonjs --moduleResolution node --verbatimModuleSyntax false --outDir ./dist/cjs",
-    "postbuild:cjs": "echo '{\n  \"type\": \"commonjs\"\n}' > dist/cjs/package.json",
+    "build": "rm -rf dist && tsc && vite build",
     "test": "vitest run",
     "lint": "eslint ./src --ext .ts,.tsx",
     "prettier:check": "prettier --check .",
@@ -85,6 +85,8 @@
     "release-it": "^17.3.0",
     "storybook": "^8.1.5",
     "typescript": "^5.4.5",
+    "vite": "^5.2.12",
+    "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.6.0",
     "vitest-fetch-mock": "^0.2.2",
     "webpack": "^5.91.0"

src/components/DocumentNav.tsx

@@ -1,4 +1,6 @@
-import React, { FC, useContext } from "react";
+"use client";
+
+import { FC, useContext } from "react";
 import styled from "styled-components";
 import { DocViewerContext } from "../store/DocViewerProvider";
 import { nextDocument, previousDocument } from "../store/actions";

src/components/FileName.tsx

@@ -1,4 +1,6 @@
-import React, { FC, useContext } from "react";
+"use client";
+
+import { FC, useContext } from "react";
 import styled from "styled-components";
 import { DocViewerContext } from "../store/DocViewerProvider";
 import { IStyledProps } from "..";

src/components/HeaderBar.tsx

@@ -1,4 +1,6 @@
-import React, { FC, useContext } from "react";
+"use client";
+
+import { FC, useContext } from "react";
 import styled from "styled-components";
 import { DocViewerContext } from "../store/DocViewerProvider";
 import { nextDocument, previousDocument } from "../store/actions";

src/components/LoadingTimout.tsx

@@ -1,10 +1,6 @@
-import React, {
-  FC,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+"use client";
+
+import { FC, PropsWithChildren, useContext, useEffect, useState } from "react";
 import { DocViewerContext } from "../store/DocViewerProvider";
 
 export const LoadingTimeout: FC<PropsWithChildren> = ({ children }) => {

src/components/ProxyRenderer.tsx

@@ -1,4 +1,6 @@
-import React, { FC, useCallback } from "react";
+"use client";
+
+import { FC, useCallback } from "react";
 import styled, { keyframes } from "styled-components";
 import { setRendererRect } from "../store/actions";
 import { DocRenderer, IConfig, IDocument, IStyledProps } from "../models";

src/components/icons/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+"use client";
 
 export interface IIconProps {
   color?: string;

src/cssStyles.ts

@@ -0,0 +1,2 @@
+import "react-pdf/dist/esm/Page/AnnotationLayer.css";
+import "react-pdf/dist/esm/Page/TextLayer.css";

src/i18n.ts

@@ -29,4 +29,5 @@ export const locales = {
 };
 
 export type AvailableLanguages = keyof typeof locales;
+
 export const defaultLanguage: AvailableLanguages = "en";

src/index.tsx

@@ -1,8 +1,11 @@
+"use client";
+
+import "./cssStyles";
 import DocViewer from "./DocViewer";
 
 export default DocViewer;
 export { DocViewerRenderers } from "./renderers";
 export * from "./models";
 export * from "./utils/fileLoaders";
-export { AvailableLanguages } from "./i18n";
+export { type AvailableLanguages } from "./i18n";
 export * from "./renderers";

tsconfig.json

@@ -1,19 +1,13 @@
 {
   "compilerOptions": {
-    "outDir": "./dist/esm",
-    "target": "ES6",
-    "module": "es2020",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "declaration": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
     "jsx": "react-jsx",
-    "noEmit": false,
-    "skipLibCheck": false,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
     "types": ["vitest/globals"]
-  }
+  },
+  "exclude": ["node_modules", "use-cases"]
 }

use-cases/nextjs/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import "../../../../dist/index.css";
 
 const inter = Inter({ subsets: ["latin"] });
 

use-cases/nextjs/src/app/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import DocViewer, { IDocument } from "@cyntler/react-doc-viewer";
+import DocViewer, { IDocument } from "../../../../";
 
 import gifFile from "../../../../src/exampleFiles/gif-image.gif";
 import pngFile from "../../../../src/exampleFiles/png-image.png";

vite.config.ts

@@ -1,8 +1,25 @@
 import { defineConfig } from "vitest/config";
 import dsv from "@rollup/plugin-dsv";
+import dts from "vite-plugin-dts";
 
 export default defineConfig({
-  plugins: [dsv()],
+  plugins: [
+    dts({
+      tsconfigPath: "./tsconfig.build.json",
+    }),
+    dsv(),
+  ],
+  build: {
+    lib: {
+      entry: "./src/index.tsx",
+      formats: ["es", "cjs"],
+    },
+    cssCodeSplit: true,
+    sourcemap: false,
+    rollupOptions: {
+      external: ["react"],
+    },
+  },
   test: {
     globals: true,
     environment: "happy-dom",