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",