Changing build environment to vite

Author: salgum1114

package.json

@@ -1,25 +1,27 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.62",
+	"version": "0.0.69",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
-	"main": "dist/react-design-editor.min.js",
-	"typings": "lib/index.d.ts",
+	"main": "dist/react-design-editor.cjs.js",
+	"module": "dist/react-design-editor.es.js",
+	"unpkg": "dist/react-design-editor.umd.js",
+	"typings": "dist/types/index.d.ts",
 	"files": [
-		"dist",
-		"lib"
+		"dist"
 	],
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
 		"build": "npm run clean && webpack --node-env production --config webpack.prod.js && typedoc",
-		"build:lib": "npm run tsc && webpack --node-env production --config webpack.lib.js",
+		"build:lib": "npm run clean && vite build && tsc --project tsconfig.build.json",
+		"build:types": "vite build && npm run build:types",
 		"start": "npm install && npm run start:dev",
 		"start:dev": "webpack serve --config webpack.dev.js",
 		"serve": "http-server docs -p 4001",
 		"ghpages": "npm run build && node scripts/ghpages",
 		"deploy": "npm run build:lib && npm publish",
 		"lint": "npm run tsc",
 		"clean": "node scripts/clean",
-		"tsc": "tsc",
+		"tsc": "tsc --project tsconfig.build.json",
 		"typedoc": "typedoc"
 	},
 	"repository": {
@@ -103,6 +105,8 @@
 		"@types/webpack-env": "^1.16.0",
 		"@typescript-eslint/eslint-plugin": "^8.33.0",
 		"@typescript-eslint/parser": "^8.33.0",
+		"@vitejs/plugin-react": "^4.5.0",
+		"ajv": "^8.17.1",
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.1.0",
 		"babel-plugin-dynamic-import-webpack": "^1.1.0",
@@ -133,6 +137,8 @@
 		"typedoc": "^0.17.4",
 		"typescript": "^4.7.4",
 		"url-loader": "^4.1.0",
+		"vite": "^6.3.5",
+		"vite-plugin-dts": "^4.5.4",
 		"webpack": "^5.99.9",
 		"webpack-cli": "^5.1.4",
 		"webpack-dev-server": "^5.2.1",

src/canvas/handlers/LayoutHandler.ts

@@ -13,15 +13,15 @@ export interface LayoutOptions {
 }
 
 export default class LayoutHandler extends AbstractHandler {
-	public runLayout(options: LayoutOptions) {
+	public async runLayout(options: LayoutOptions) {
 		const { type } = options;
 		if (!type) {
 			return;
 		}
 		if (type === 'dagre') {
-			this.dagre(options);
+			await this.dagre(options);
 		} else if (type === 'elk') {
-			this.elk(options);
+			await this.elk(options);
 		}
 	}
 

src/canvas/handlers/PortHandler.ts

@@ -106,7 +106,6 @@ class PortHandler {
 				port.set({ left, top });
 				port.setCoords();
 				if (port.links.length) {
-					console.log(port.links);
 					port.links.forEach(link => {
 						link.update({ left, top }, { left: link.toNode.toPort.left, top: link.toNode.toPort.top });
 					});

src/canvas/handlers/TransactionHandler.ts

@@ -139,7 +139,6 @@ class TransactionHandler {
 	 */
 	public replay = (transaction: TransactionEvent) => {
 		const objects = JSON.parse(transaction.json) as FabricObject[];
-		console.log(objects);
 		this.state = objects;
 		this.active = true;
 		this.handler.canvas.renderOnAddRemove = false;

src/canvas/objects/Link.ts

@@ -38,7 +38,6 @@ const Link = fabric.util.createClass(fabric.Group, {
 		this.fromPort = fromPort;
 		this.toNode = toNode;
 		this.toPort = toPort;
-		console.log(options);
 		const { line, arrow } = this.draw(fromPort, toPort, options);
 		this.line = line;
 		this.arrow = arrow;

src/canvas/utils/ObjectUtil.ts

@@ -405,7 +405,6 @@ export interface FabricEvent<T extends any = Event> extends Omit<fabric.IEvent,
 	isClick?: boolean;
 	pointer?: fabric.Point;
 	absolutePointer?: fabric.Point;
-	transform?: { corner: string; original: FabricObject; originX: string; originY: string; width: number };
 }
 
 export type FabricObjects = {

tsconfig.build.json

@@ -0,0 +1,12 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"declaration": true,
+		"declarationMap": true,
+		"emitDeclarationOnly": true,
+		"outDir": "./dist/types",
+		"allowJs": false
+	},
+	"include": ["src/canvas/index.tsx", "src/canvas/global.d.ts"],
+	"exclude": ["node_modules", "dist"]
+}

vite.config.ts

@@ -0,0 +1,28 @@
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { defineConfig } from 'vite';
+import pkg from './package.json';
+
+export default defineConfig({
+	publicDir: false,
+	plugins: [react()],
+	build: {
+		lib: {
+			entry: path.resolve(__dirname, 'src/canvas/index.tsx'),
+			name: pkg.name,
+			fileName: format => `${pkg.name}.${format}.js`,
+			formats: ['es', 'cjs', 'umd'],
+		},
+		rollupOptions: {
+			external: ['react', 'react-dom'],
+			output: {
+				globals: {
+					react: 'React',
+					'react-dom': 'ReactDOM',
+				},
+			},
+		},
+		sourcemap: true,
+		minify: 'terser', // 기본 빌드에서 압축
+	},
+});