feat(Vite): Adjust project to build with vite

Author: Chrystiam Nascimento Junior

.github/workflows/ci.yml

@@ -54,7 +54,7 @@ jobs:
           GH_TOKEN: ${{ env.GH_TOKEN }}
 
       - name: Build package
-        run: yarn prepack
+        run: yarn build
 
       - name: Create release
         run: npx semantic-release

.gitignore

@@ -69,12 +69,16 @@ android/keystores/debug.keystore
 # generated by bob
 lib/
 
+# Nuxt.js build / generate output
+.nuxt
+dist
+
 .env
 web-build
 
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

index.d.ts

@@ -1,11 +1,12 @@
 {
   "name": "@lawnstarter/react-native-ui-datepicker",
   "version": "2.0.11",
+  "type": "module",
   "description": "Customizable date picker for React Native",
-  "main": "lib/commonjs/index",
-  "module": "lib/module/index",
-  "types": "lib/typescript/index.d.ts",
-  "react-native": "src/index",
+  "types": "dist/index.d.ts",
+  "main": "./dist/react-native-ui-datepicker.cjs",
+  "module": "./dist/react-native-ui-datepicker.js",
+  "react-native": "./dist/react-native-ui-datepicker.js",
   "source": "src/index",
   "files": [
     "src",
@@ -31,7 +32,7 @@
     "test": "jest",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
-    "prepack": "bob build"
+    "build": "vite build"
   },
   "keywords": [
     "react-native",
@@ -65,6 +66,45 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/react-native-ui-datepicker.js",
+      "require": "./dist/react-native-ui-datepicker.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./types": {
+      "types": "./dist/react-native-ui-datepicker/src/types.d.ts",
+      "require": "./dist/react-native-ui-datepicker/types.cjs",
+      "import": "./dist/react-native-ui-datepicker/types.js",
+      "react-native": "./dist/react-native-ui-datepicker/types.js"
+    },
+    "./enums": {
+      "types": "./dist/react-native-ui-datepicker/src/enums.d.ts",
+      "require": "./dist/react-native-ui-datepicker/enums.cjs",
+      "import": "./dist/react-native-ui-datepicker/enums.js",
+      "react-native": "./dist/react-native-ui-datepicker/enums.js"
+    },
+    "./utils": {
+      "types": "./dist/react-native-ui-datepicker/src/utils.d.ts",
+      "require": "./dist/react-native-ui-datepicker/utils.cjs",
+      "import": "./dist/react-native-ui-datepicker/utils.js",
+      "react-native": "./dist/react-native-ui-datepicker/utils.js"
+    },
+    "./assets/*": "./dist/assets/*"
+  },
+  "typesVersions": {
+    "*": {
+      "types": [
+        "./dist/react-native-ui-datepicker/src/types.d.ts"
+      ],
+      "enums": [
+        "./dist/react-native-ui-datepicker/src/enums.d.ts"
+      ],
+      "utils": [
+        "./dist/react-native-ui-datepicker/src/utils.d.ts"
+      ]
+    }
+  },
   "devDependencies": {
     "@evilmartians/lefthook": "^1.2.2",
     "@react-native-community/eslint-config": "^3.0.2",
@@ -80,6 +120,7 @@
     "@types/react": "18.2.0",
     "@types/react-native": "0.72.0",
     "@types/react-test-renderer": "^18.0.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "commitizen": "^4.3.0",
     "commitlint": "^17.0.2",
     "cz-ls-commits": "^1.1.0",
@@ -96,7 +137,9 @@
     "react-test-renderer": "18.2.0",
     "semantic-release": "^22.0.12",
     "ts-node": "^10.9.1",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "vite": "^4.5.9",
+    "vite-plugin-copy": "^0.1.6"
   },
   "resolutions": {
     "@types/react": "18.2.0",

package.json

@@ -0,0 +1,24 @@
+import { readFileSync } from 'fs';
+import * as esbuild from 'esbuild';
+
+export const extensions = [
+  '.mjs',
+  '.tsx',
+  '.ts',
+  '.jsx',
+  '.js',
+  '.css',
+  '.json',
+];
+
+export const rollupPlugin = (matchers: RegExp[]) => ({
+  name: 'js-in-jsx',
+  load(id: string) {
+    if (matchers.some((matcher) => matcher.test(id)) && id.endsWith('.js')) {
+      const file = readFileSync(id, { encoding: 'utf-8' });
+      return esbuild.transformSync(file, { loader: 'jsx', jsx: 'automatic' });
+    }
+
+    return null;
+  },
+});

vite.build.helpers.ts

@@ -0,0 +1,44 @@
+import react from '@vitejs/plugin-react-swc';
+import { defineConfig } from 'vite';
+// @ts-ignore
+import { copy } from 'vite-plugin-copy';
+
+import { extensions } from './vite.build.helpers';
+
+export default defineConfig({
+  plugins: [react(), copy([{ src: './src/assets', dest: 'dist' }])],
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+    emptyOutDir: true,
+    lib: {
+      name: '@lawnstarter/react-native-ui-datepicker',
+      entry: {
+        index: 'src/index.ts',
+        enums: 'src/enums.ts',
+        types: 'src/types.ts',
+        utils: 'src/utils.ts',
+      },
+      fileName: (moduleFormat, entryName) => {
+        const extension = moduleFormat === 'es' ? 'js' : moduleFormat;
+        return `${entryName}.${extension}`;
+      },
+    },
+    rollupOptions: {
+      external: ['react', 'dayjs', 'react-native'],
+    },
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      resolveExtensions: extensions,
+      loader: { '.js': 'jsx' },
+      jsx: 'automatic',
+    },
+  },
+  resolve: {
+    extensions: extensions,
+  },
+  esbuild: {
+    loader: 'tsx',
+  },
+});