TypeScript 1차 마이그레이션

.gitignore

@@ -25,4 +25,5 @@ dist-ssr
 *.sw?
 
 # vscode
-.history
+.history
+reference

eslint.config.js

@@ -1,5 +1,6 @@
 import { defineConfig } from 'eslint/config'
 import standardjs from '@seungwoo321/eslint-plugin-standard-js'
+import tseslint from 'typescript-eslint'
 import pluginVue from 'eslint-plugin-vue'
 
 export default defineConfig([
@@ -14,21 +15,29 @@ export default defineConfig([
     ]
   },
   {
-    files: ['**/*.{js,mjs,cjs,vue}', 'eslint.config.js'],
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: require.resolve('vue-eslint-parser'),
+      parserOptions: {
+        parser: require.resolve('@typescript-eslint/parser'),
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        extraFileExtensions: ['.vue']
+      }
+    },
+    plugins: {
+      'vue': pluginVue,
+      '@typescript-eslint': tseslint
+    }
+  },
+  {
+    files: ['**/*.{js,mjs,cjs,vue,ts}', 'eslint.config.js'],
     extends: [
-      ...standardjs.configs.recommended,
+      ...standardjs.configs.base,
+      ...tseslint.configs.recommended,
       ...pluginVue.configs['flat/strongly-recommended']
     ],
     rules: {
-      '@stylistic/space-before-function-paren': [
-        'error',
-        {
-          anonymous: 'always',
-          named: 'never',
-          asyncArrow: 'always'
-        }
-      ],
-      '@stylistic/quote-props': ['error', 'consistent'],
       'vue/html-self-closing': [
         'error',
         {
@@ -49,7 +58,8 @@ export default defineConfig([
           ignores: ['pre', 'textarea', 'div'],
           externalIgnores: []
         }
-      ]
+      ],
+      '@typescript-eslint/no-explicit-any': 'off'
     }
   }
 ])

package.json

@@ -5,6 +5,7 @@
   "description": "",
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/vue-pivottable.es.js",
       "require": "./dist/vue-pivottable.umd.js"
     },
@@ -13,6 +14,8 @@
   },
   "main": "./dist/vue-pivottable.umd.js",
   "module": "./dist/vue-pivottable.es.js",
+  "types": "./dist/types/index.d.ts",
+  "source": "./src/index.ts",
   "files": [
     "dist",
     "LICENSE",
@@ -70,9 +73,12 @@
     "@semantic-release/npm": "^12.0.1",
     "@seungwoo321/eslint-plugin-standard-js": "^1.0.1",
     "@seungwoo321/prettier-config": "^1.0.1",
+    "@types/node": "^22.15.21",
+    "@types/papaparse": "^5.3.16",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue-pivottable/lazy-table-renderer": "workspace:*",
     "@vue-pivottable/plotly-renderer": "workspace:*",
+    "@vue/tsconfig": "^0.7.0",
     "concurrently": "^9.1.2",
     "conventional-changelog": "^6.0.0",
     "conventional-changelog-cli": "^5.0.0",
@@ -82,10 +88,13 @@
     "papaparse": "^5.5.2",
     "rimraf": "^6.0.1",
     "semantic-release": "^24.2.3",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.33.1",
     "vite": "^6.3.4",
     "vite-plugin-dts": "^4.5.3",
     "vite-plugin-static-copy": "^2.3.1",
-    "vue": "^3.2.0"
+    "vue": "^3.2.0",
+    "vue-tsc": "^2.2.10"
   },
   "packageManager": "pnpm@9.12.2"
 }

packages/lazy-table-renderer/package.json

@@ -5,6 +5,7 @@
   "description": "",
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/lazy-table-renderer.es.js",
       "require": "./dist/lazy-table-renderer.umd.js"
     },
@@ -13,6 +14,7 @@
   },
   "main": "./dist/lazy-table-renderer.umd.js",
   "module": "./dist/lazy-table-renderer.es.js",
+  "types": "./dist/types/index.d.ts",
   "files": [
     "dist",
     "LICENSE",
@@ -45,13 +47,15 @@
     "build": "vite build",
     "lint": "eslint ."
   },
-  "dependencies": {},
   "peerDependencies": {
     "vue": "^3.2.0",
     "vue-pivottable": "latest"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
-    "vite": "^6.3.4"
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.4",
+    "vue-tsc": "^2.2.10"
   }
 }

packages/lazy-table-renderer/src/index.js → packages/lazy-table-renderer/src/index.ts

@@ -6,7 +6,7 @@ export default markRaw({
   'Lazy Table': defineComponent({
     name: 'VueLazyTable',
     props: { ...PivotUtilities.defaultProps },
-    setup(props) {
+    setup (props) {
       return () =>
         h(LazyPivottableRenderer, {
           ...props,

packages/lazy-table-renderer/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "vue-pivottable": ["../../src"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules"]
+}

packages/lazy-table-renderer/vite.config.js → packages/lazy-table-renderer/vite.config.ts

@@ -3,13 +3,13 @@ import { resolve } from 'path'
 import dts from 'vite-plugin-dts'
 import vue from '@vitejs/plugin-vue'
 
-export default defineConfig(({ command, mode, ssrBuild }) => {
+export default defineConfig(() => {
   return {
     plugins: [
       vue(),
       dts({
-        include: ['src/**/*.{js,ts,vue,d.ts}'],
-        outDir: 'dist',
+        include: ['src'],
+        outDir: 'dist/types',
         staticImport: false,
         insertTypesEntry: true,
         rollupTypes: true
@@ -18,9 +18,10 @@ export default defineConfig(({ command, mode, ssrBuild }) => {
     publicDir: false,
     build: {
       lib: {
-        entry: resolve(__dirname, 'src/index.js'),
+        entry: resolve(__dirname, 'src/index.ts'),
         name: 'LazyTableRenderer',
-        fileName: (format) => `lazy-table-renderer.${format}.js`
+        fileName: (format) => `lazy-table-renderer.${format}.js`,
+        formats: ['es', 'umd']
       },
       rollupOptions: {
         external: ['vue'],

packages/plotly-renderer/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/plotly-renderer.es.js",
       "require": "./dist/plotly-renderer.umd.js"
     },
@@ -12,6 +13,7 @@
   },
   "main": "./dist/plotly-renderer.umd.js",
   "module": "./dist/plotly-renderer.es.js",
+  "types": "./dist/types/index.d.ts",
   "files": [
     "dist",
     "LICENSE",
@@ -47,6 +49,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
-    "vite": "^6.3.4"
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.4",
+    "vue-tsc": "^2.2.10"
   }
 }

packages/plotly-renderer/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "vue-pivottable": ["../../src"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules"]
+}

packages/plotly-renderer/vite.config.js → packages/plotly-renderer/vite.config.ts

@@ -1,15 +1,15 @@
 import { defineConfig } from 'vite'
-import path, { resolve } from 'path'
+import { resolve } from 'path'
 import dts from 'vite-plugin-dts'
 import vue from '@vitejs/plugin-vue'
 
-export default defineConfig(({ command, mode, ssrBuild }) => {
+export default defineConfig(() => {
   return {
     plugins: [
       vue(),
       dts({
-        include: ['src/**/*.{js,ts,vue,d.ts}'],
-        outDir: 'dist',
+        include: ['src'],
+        outDir: 'dist/types',
         staticImport: false,
         insertTypesEntry: true,
         rollupTypes: true
@@ -18,9 +18,10 @@ export default defineConfig(({ command, mode, ssrBuild }) => {
     publicDir: false,
     build: {
       lib: {
-        entry: resolve(__dirname, 'src/index.js'),
+        entry: resolve(__dirname, 'src/index.ts'),
         name: 'PlotlyRenderer',
-        fileName: (format) => `plotly-renderer.${format}.js`
+        fileName: (format) => `plotly-renderer.${format}.js`,
+        formats: ['es', 'umd']
       },
       rollupOptions: {
         external: ['vue'],
@@ -37,7 +38,8 @@ export default defineConfig(({ command, mode, ssrBuild }) => {
     },
     resolve: {
       alias: {
-        'vue-plotly': path.resolve(__dirname, 'node_modules/vue-plotly')
+        'vue-pivottable': resolve(__dirname, '../../src'),
+        'vue-plotly': resolve(__dirname, 'node_modules/vue-plotly')
       }
     }
   }