Merge pull request #269 from cyntler/vite-migration

build: migrate build process to vite library mode

Author: cyntler

package-lock.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"

package.json

@@ -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/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 { IStyledProps } from "..";

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 { nextDocument, previousDocument } from "../store/actions";

src/components/HeaderBar.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/LoadingTimout.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/ProxyRenderer.tsx

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

src/components/icons/index.tsx

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

src/cssStyles.ts

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