fix vue package

Author: Hetari

package-lock.json

@@ -1,22 +1,80 @@
 {
   "name": "g-motion",
-  "private": true,
+  "private": false,
   "version": "0.0.0",
   "type": "module",
+  "description": "A Vue and React Gsap Motion Library",
+  "author": {
+    "name": "Ebraheem Alhetari",
+    "email": "hetari4all@gmail.com",
+    "url": "https://github.com/hetari"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "homepage": "",
+  "bugs": {
+    "url": ""},
+  "keywords": [
+    "gsap",
+    "motion",
+    "vue",
+    "react",
+    "gsap-motion",
+    "vue-gsap",
+    "react-gsap"
+  ],
+  "exports": {
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue/index.es.js",
+      "require": "./dist/vue/index.umd.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.es.js",
+      "require": "./dist/react/index.umd.js"
+    }
+  },
+  "main": "./dist/vue/index.umd.js",
+  "module": "./dist/vue/index.es.js",
+  "types": "./dist/vue/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "src/types/*.ts"
+  ],
+  "typesVersions": {
+    "*": {
+      "vue": ["./dist/vue/index.d.ts"],
+      "react": ["./dist/react/index.d.ts"]
+    }
+  },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "build:vue": "vite build --mode vue",
+    "build:react": "vite build --mode react",
+    "build": "npm run build:vue && npm run build:react",
+    "dev:vue": "vite --mode vue",
+    "dev:react": "vite --mode react"
   },
   "devDependencies": {
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitejs/plugin-vue": "^5.1.4",
     "typescript": "~5.6.2",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0"
   },
   "dependencies": {
-    "vite-plugin-dts": "^4.3.0"
+    "react": "^18.3.1",
+    "vue": "^3.5.12"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package.json

@@ -0,0 +1 @@
+export * from './react/index';

src/index.ts

@@ -1,3 +1,17 @@
-export function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
-  return <button {...props} />;
+interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  label: string;
+  children?: React.ReactNode;
 }
+
+function Button(props: Props) {
+  const { className, label, ...restProps } = props;
+  return (
+    <button
+      className={`${className}`}
+      {...restProps}>
+      {label}
+    </button>
+  );
+}
+
+export default Button;

src/react-entry.ts

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

src/react/Button.tsx

@@ -0,0 +1 @@
+export * from './vue/index';

src/react/index.ts

@@ -1,19 +1,7 @@
-<!-- src/vue/Button.vue -->
 <template>
   <button>{{ label }}</button>
 </template>
 
 <script setup lang="ts">
-  import { defineComponent } from 'vue';
-
-  defineComponent({
-    name: 'Button',
-    props: {
-      label: String
-    }
-  });
-
-  defineProps<{
-    label: string;
-  }>();
+  defineProps<{ label: string }>();
 </script>

src/vue-entry.ts

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

src/vue/Button.vue

@@ -1,25 +1,74 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
+    "declaration": true,
+    "declarationDir": "./dist/types",
+    "emitDeclarationOnly": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "moduleResolution": "node",
+    "esModuleInterop": true,
     "skipLibCheck": true,
-    "jsx": "react-jsxdev",
 
-    /* Bundler mode */
-    "moduleResolution": "Bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
+    "baseUrl": ".",
+    "paths": {
+      "@vue/*": ["src/vue/*"],
+      "@react/*": ["src/react/*"]
+    },
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "jsx": "react-jsx",
+    "lib": ["dom", "esnext"],
+    "allowSyntheticDefaultImports": true
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "types/**/*.tsx",
+    "src/**/*.vue",
+    "types/**/*.ts",
+    "types/**/*.vue"
+  ],
+  "exclude": ["node_modules", "dist"]
 }
+
+// {
+//   "compilerOptions": {
+//     "target": "ES2020",
+//     "useDefineForClassFields": true,
+//     "module": "ESNext",
+//     "lib": ["ES2020", "DOM", "DOM.Iterable"],
+//     "skipLibCheck": true,
+//     "jsx": "react-jsxdev",
+//     "types": ["vite/client"],
+//     "allowSyntheticDefaultImports": true,
+//     "outDir": "dist",
+//     "declaration": true,
+//     "declarationDir": "dist/types",
+//     "emitDeclarationOnly": true,
+//     "baseUrl": ".",
+
+//     /* Bundler mode */
+//     "moduleResolution": "Bundler",
+//     "allowImportingTsExtensions": true,
+//     "isolatedModules": true,
+//     "moduleDetection": "force",
+//     "noEmit": true,
+
+//     /* Linting */
+//     "strict": true,
+//     "noUnusedLocals": true,
+//     "noUnusedParameters": true,
+//     "noFallthroughCasesInSwitch": true,
+//     "paths": {
+//       "vue": ["./src/vue"],
+//       "react": ["./src/react"]
+//     }
+//   },
+//   "include": [
+//     "src/index.ts",
+//     "src/**/*.ts",
+//     "src/**/*.d.ts",
+//     "src/**/*.tsx",
+//     "src/**/*.vue",
+//     "vite.config.ts"
+//   ],
+//   "exclude": ["node_modules", "dist"]
+// }

src/vue/index.ts

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

tsconfig.json

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

tsconfig.react.json

@@ -4,39 +4,56 @@ import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts';
 import { resolve } from 'path';
 // import libCss from 'vite-plugin-libcss';
+// import { libInjectCss } from 'vite-plugin-lib-inject-css';
 
-export default defineConfig({
-  plugins: [
-    vue(), // Enables Vue SFC support
-    react(), // Enables React JSX support
-    dts({
-      insertTypesEntry: true,
-      tsconfigPath: './tsconfig.json'
-    })
-  ],
-  build: {
-    copyPublicDir: false,
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      name: 'G-Motion',
-      formats: ['es', 'umd'],
-      fileName: (format) => `g-motion.${format}.js`
-    },
-    rollupOptions: {
-      external: [
-        'vue',
-        'react',
-        'react-dom',
-        'react/jsx-runtime' // <-- Add this line to externalize react/jsx-runtime
-      ],
-      output: {
-        globals: {
-          vue: 'Vue',
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          'react/jsx-runtime': 'jsxRuntime'
+export default defineConfig(({ mode }) => {
+  const isVue = mode === 'vue';
+  const framework = isVue ? 'vue' : 'react';
+
+  return {
+    plugins: [
+      isVue ? vue() : react(),
+      dts({
+        tsconfigPath: `./tsconfig.${framework}.json`,
+        outDir: `dist/${framework}`,
+        include: [`src/${framework}/**/*`, `src/${framework}-entry.ts`],
+        insertTypesEntry: true,
+        cleanVueFileName: true,
+        rollupTypes: true
+      })
+    ].filter(Boolean),
+    build: {
+      target: 'es2015',
+
+      copyPublicDir: false,
+      outDir: `dist/${framework}`,
+
+      lib: {
+        entry: resolve(__dirname, `src/${framework}-entry.ts`),
+        // name: isVue ? 'GMotionVue' : 'GMotionReact',
+        name: 'G-Motion',
+        formats: ['es', 'umd'],
+        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'
         }
       }
+    },
+    resolve: {
+      alias: {
+        '@vue': resolve(__dirname, 'src/vue'),
+        '@react': resolve(__dirname, 'src/react')
+      }
     }
-  }
+  };
 });