fix: react and vue component library setup

Author: Hetari

package.json

@@ -29,18 +29,13 @@
   "exports": {
     "./vue": {
       "types": "./dist/vue/index.d.ts",
-      "import": "./dist/vue/index.es.js",
-      "require": "./dist/vue/index.umd.js"
+      "import": "./dist/vue/index.js"
     },
     "./react": {
       "types": "./dist/react/index.d.ts",
-      "import": "./dist/react/index.es.js",
-      "require": "./dist/react/index.umd.js"
+      "import": "./dist/react/index.js"
     }
   },
-  "main": "./dist/vue/index.umd.js",
-  "module": "./dist/vue/index.es.js",
-  "types": "./dist/vue/index.d.ts",
   "files": [
     "dist",
     "README.md",

src/react/Button.tsx

@@ -1,9 +1,9 @@
-interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   label: string;
   children?: React.ReactNode;
 }
 
-function Button(props: Props) {
+function Button(props: Props): JSX.Element {
   const { className, label, ...restProps } = props;
   return (
     <button

src/vue-shim.d.ts

@@ -3,5 +3,21 @@
 </template>
 
 <script setup lang="ts">
-  defineProps<{ label: string }>();
+  import { defineComponent } from 'vue';
+
+  defineComponent({
+    name: 'Button',
+    props: {
+      label: String
+    },
+    setup(props) {
+      return {
+        label: props.label
+      };
+    }
+  });
+
+  defineProps<{
+    label: String;
+  }>();
 </script>

src/vue/Button.vue

@@ -1,3 +1,2 @@
 import Button from './Button.vue';
-
 export { Button };

src/vue/index.ts

@@ -1,20 +1,19 @@
 {
   "compilerOptions": {
     "declaration": true,
-    "declarationDir": "./dist/types",
     "emitDeclarationOnly": true,
     "module": "ESNext",
     "moduleResolution": "node",
     "esModuleInterop": true,
     "skipLibCheck": true,
+    "jsx": "react-jsx",
 
-    "baseUrl": ".",
+    "baseUrl": "./",
     "paths": {
-      "@vue/*": ["src/vue/*"],
-      "@react/*": ["src/react/*"]
+      "vue/*": ["src/vue/*"],
+      "react/*": ["src/react/*"]
     },
     "strict": true,
-    "jsx": "react-jsx",
     "lib": ["dom", "esnext"],
     "allowSyntheticDefaultImports": true
   },

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "declarationDir": "./dist/react/types",
     "outDir": "dist/react"
   },
   "include": ["src/react/**/*", "src/react-entry.ts"],

tsconfig.react.json

@@ -1,8 +1,10 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "declarationDir": "./dist/vue/types",
     "outDir": "dist/vue"
   },
+  "jsx": "",
   "include": ["src/vue/**/*", "src/vue-entry.ts"],
   "exclude": ["src/react/**/*"]
 }

tsconfig.vue.json

@@ -9,6 +9,9 @@ import { resolve } from 'path';
 export default defineConfig(({ mode }) => {
   const isVue = mode === 'vue';
   const framework = isVue ? 'vue' : 'react';
+  const global = (
+    isVue ? { vue: 'Vue' } : { react: 'React', 'react/jsx-runtime': 'JSX' }
+  ) as { [key: string]: string };
 
   return {
     plugins: [
@@ -32,20 +35,17 @@ export default defineConfig(({ mode }) => {
         entry: resolve(__dirname, `src/${framework}-entry.ts`),
         // name: isVue ? 'GMotionVue' : 'GMotionReact',
         name: 'G-Motion',
-        formats: ['es', 'umd'],
+        formats: ['es'],
         fileName: 'index'
         // fileName: (format) => `index.${format}.js`
       },
       rollupOptions: {
         external: ['vue', 'react', 'react/jsx-runtime'],
         output: {
-          assetFileNames: 'assets/[name][extname]',
-          entryFileNames: '[name].js',
-          globals: {
-            vue: 'Vue',
-            react: 'React'
-          },
-          exports: 'named'
+          // assetFileNames: 'assets/[name][extname]',
+          // entryFileNames: 'index.js',
+          exports: 'named',
+          globals: global
         }
       }
     },