Merge pull request #13 from Flutterwave/vue2-ts

Extend package to support Typescript on Vue 2.

Author: corneliusyaovi

.gitignore

@@ -1,16 +1,15 @@
 .DS_Store
-node_modules
+node_modules/
+/dist/
 
 # local env files
 .env.local
 .env.*.local
-todo.md
 
 # Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
 
 # Editor directories and files
 .idea
@@ -19,4 +18,4 @@ pnpm-debug.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw*

README.md

@@ -2,7 +2,7 @@
     <img title="Flutterwave" height="200" src="https://flutterwave.com/images/logo/full.svg" width="50%"/>
 </p>
 
-# Flutterwave Vue.JS v3 Library
+# Flutterwave Vue.JS (Vue2) Library
 ![Publish Vue.js Package](https://github.com/Flutterwave/Flutterwave-Vue-v3/workflows/Publish%20Vue.js%20Package/badge.svg)
 ![npm](https://img.shields.io/npm/v/flutterwave-vue-v3)
 ![npm](https://img.shields.io/npm/dt/flutterwave-vue-v3)
@@ -21,7 +21,7 @@
 <a id="about"></a>
 ## About
 
-Flutterwave official Vue library to accept payment via Card, USSD, QrCode etc.
+Flutterwave official Vue(v2) library to accept payment via Card, USSD, QrCode etc with support for Typescript.
 
 <a id="getting-started"></a>
 
@@ -34,7 +34,7 @@ See [references](#references) for links to dashboard and API documentation.
 ### Prerequisites
 
 ```
-Vue version >= 2
+Vue version = 2.x.x
 Flutterwave version 3 API Public keys
 ```
 
@@ -54,6 +54,8 @@ $ yarn  add  flutterwave-vue-v3
 
 ## Usage
 
+* For Typescript project sample, please see the project in the example directory of the project repository.
+
 * Import the Flutterwave Library in the  'main.js' file.  
 
 * Add the Flutterwave plugin to your app passing in your Flutterwave Public Key (optional)

babel.config.js

@@ -1,5 +1,17 @@
 const devPresets = ['@vue/babel-preset-app'];
-const buildPresets = ['@babel/preset-env'];
+const buildPresets = [
+  [
+    '@babel/preset-env',
+    // Config for @babel/preset-env
+    {
+      // Example: Always transpile optional chaining/nullish coalescing
+      // include: [
+      //   /(optional-chaining|nullish-coalescing)/
+      // ],
+    },
+  ],
+  '@babel/preset-typescript',
+];
 module.exports = {
   presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
 };

build/rollup.config.js

@@ -4,9 +4,12 @@ import path from 'path';
 import vue from 'rollup-plugin-vue';
 import alias from '@rollup/plugin-alias';
 import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
-import babel from 'rollup-plugin-babel';
+import babel from '@rollup/plugin-babel';
 import { terser } from 'rollup-plugin-terser';
+import ttypescript from 'ttypescript';
+import typescript from 'rollup-plugin-typescript2';
 import minimist from 'minimist';
 
 // Get browserslist config and remove ie from es build targets
@@ -15,34 +18,46 @@ const esbrowserslist = fs.readFileSync('./.browserslistrc')
   .split('\n')
   .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
 
+// Extract babel preset-env config, to combine with esbrowserslist
+const babelPresetEnvConfig = require('../babel.config')
+  .presets.filter((entry) => entry[0] === '@babel/preset-env')[0][1];
+
 const argv = minimist(process.argv.slice(2));
 
 const projectRoot = path.resolve(__dirname, '..');
 
 const baseConfig = {
-  input: 'src/entry.js',
+  input: 'src/entry.ts',
   plugins: {
     preVue: [
       alias({
-        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
-        entries: {
-          '@': path.resolve(projectRoot, 'src'),
-        },
+        entries: [
+          {
+            find: '@',
+            replacement: `${path.resolve(projectRoot, 'src')}`,
+          },
+        ],
       }),
     ],
     replace: {
       'process.env.NODE_ENV': JSON.stringify('production'),
-      'process.env.ES_BUILD': JSON.stringify('false'),
     },
     vue: {
       css: true,
       template: {
         isProduction: true,
       },
     },
+    postVue: [
+      resolve({
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      }),
+      commonjs(),
+    ],
     babel: {
       exclude: 'node_modules/**',
       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      babelHelpers: 'bundled',
     },
   },
 };
@@ -68,31 +83,37 @@ const buildFormats = [];
 if (!argv.format || argv.format === 'es') {
   const esConfig = {
     ...baseConfig,
+    input: 'src/entry.esm.ts',
     external,
     output: {
-      file: 'dist/flutterwave-vue-v3.esm.js',
+      file: 'dist/flw-ts.esm.js',
       format: 'esm',
       exports: 'named',
     },
     plugins: [
-      replace({
-        ...baseConfig.plugins.replace,
-        'process.env.ES_BUILD': JSON.stringify('true'),
-      }),
+      replace(baseConfig.plugins.replace),
       ...baseConfig.plugins.preVue,
       vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      // Only use typescript for declarations - babel will
+      // do actual js transformations
+      typescript({
+        typescript: ttypescript,
+        useTsconfigDeclarationDir: true,
+        emitDeclarationOnly: true,
+      }),
       babel({
         ...baseConfig.plugins.babel,
         presets: [
           [
             '@babel/preset-env',
             {
+              ...babelPresetEnvConfig,
               targets: esbrowserslist,
             },
           ],
         ],
       }),
-      commonjs(),
     ],
   };
   buildFormats.push(esConfig);
@@ -104,10 +125,10 @@ if (!argv.format || argv.format === 'cjs') {
     external,
     output: {
       compact: true,
-      file: 'dist/flutterwave-vue-v3.ssr.js',
+      file: 'dist/flw-ts.ssr.js',
       format: 'cjs',
-      name: 'FlutterwaveVueV3',
-      exports: 'named',
+      name: 'FlwTs',
+      exports: 'auto',
       globals,
     },
     plugins: [
@@ -120,8 +141,8 @@ if (!argv.format || argv.format === 'cjs') {
           optimizeSSR: true,
         },
       }),
+      ...baseConfig.plugins.postVue,
       babel(baseConfig.plugins.babel),
-      commonjs(),
     ],
   };
   buildFormats.push(umdConfig);
@@ -133,18 +154,18 @@ if (!argv.format || argv.format === 'iife') {
     external,
     output: {
       compact: true,
-      file: 'dist/flutterwave-vue-v3.min.js',
+      file: 'dist/flw-ts.min.js',
       format: 'iife',
-      name: 'FlutterwaveVueV3',
-      exports: 'named',
+      name: 'FlwTs',
+      exports: 'auto',
       globals,
     },
     plugins: [
       replace(baseConfig.plugins.replace),
       ...baseConfig.plugins.preVue,
       vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
       babel(baseConfig.plugins.babel),
-      commonjs(),
       terser({
         output: {
           ecma: 5,

dev/serve.js

@@ -0,0 +1,14 @@
+import Vue, { VNode } from "vue";
+import Dev from "./serve.vue";
+// To register individual components where they are used (serve.vue) instead of using the
+// library as a whole, comment/remove this import and it's corresponding "Vue.use" call
+import Flutterwave from "@/entry.esm";
+Vue.use(Flutterwave, {
+  publicKey: "FLWPUBK_TEST-4550165677fdcf951548729e3ff6b950-X",
+});
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: (h): VNode => h(Dev),
+}).$mount("#app");

dev/serve.ts

@@ -1,70 +1,67 @@
 <script>
-import Vue from 'vue';
-import { FlutterwavePayButton } from '@/entry';
+import Vue from "vue";
+import { FlutterwavePayButton } from "@/entry";
 
 export default Vue.extend({
-  name: 'ServeDev',
+  name: "ServeDev",
   components: {
     FlutterwavePayButton,
   },
-  data(){
+  data() {
     return {
       paymentData: {
         tx_ref: this.generateReference(),
         amount: 10,
-        redirect_url: '',
+        redirect_url: "",
         meta: {
-          'counsumer_id': '7898',
-          'consumer_mac': 'kjs9s8ss7dd'
+          counsumer_id: "7898",
+          consumer_mac: "kjs9s8ss7dd",
         },
         customer: {
-          name: 'Demo Customer  Name',
-          email: 'customer@mail.com',
-          phone_number: '0818450***44'
-        } ,
+          name: "Demo Customer  Name",
+          email: "customer@mail.com",
+          phone_number: "0818450***44",
+        },
         customizations: {
-          title: 'Customization Title',
-          description: 'Customization Description',
-          logo: 'https://flutterwave.com/images/logo-colored.svg'
+          title: "Customization Title",
+          description: "Customization Description",
+          logo: "https://flutterwave.com/images/logo-colored.svg",
         },
         callback: this.makePaymentCallback,
-        onclose: this.closeModalCallback
-      }
-    }
-  } ,
+        onclose: this.closeModalCallback,
+      },
+    };
+  },
   methods: {
     makePaymentCallback(response) {
-      console.log("Pay", response)
-      this.closePaymentModal(5)
+      console.log("Pay", response);
+      this.closePaymentModal(5);
     },
     asyncPay() {
-      this.asyncPayWithFlutterwave(this.paymentData).then(
-          (response) => {
-            console.log(response)
-            this.closePaymentModal(5)
-          }
-      )
+      this.asyncPayWithFlutterwave(this.paymentData).then((response) => {
+        console.log(response);
+        this.closePaymentModal(5);
+      });
     },
     closeModalCallback() {
-      console.log('payment is closed');
+      console.log("payment is closed");
     },
     generateReference() {
-      let date = new Date()
+      let date = new Date();
       return date.getTime().toString();
-    }
-  }
+    },
+  },
 });
 </script>
 
 
 <template>
   <div>
-    <flutterwave-pay-button v-bind="paymentData"> Pay With Flw Pay button</flutterwave-pay-button>
-
+    <flutterwave-pay-button v-bind="paymentData">
+      Pay With Flw Pay button</flutterwave-pay-button
+    >
 
     <button @click="asyncPay(paymentData)">Pay With Promise</button>
-
-
   </div>
 </template>