next: rewrite in typescript 🚀

ankurk91 · Oct 28, 2022 · 65f3526 · 65f3526
1 parent 1141495
commit 65f3526
Show file tree

Hide file tree

Showing 24 changed files with 295 additions and 1,426 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -11,7 +11,7 @@
 * flatPickr version : 4.6.x
 * Vue.js version : 3.2
 * Browser name and version : Chrome|Firefox|Edge x.x.x
-* This package version : 10.x.x
+* This package version : 11.x.x
 
 **Current behavior**
 <!-- Describe how the bug manifests. -->

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -3,11 +3,11 @@ name: build
 on:
   push:
     branches:
-      - master
+      - main
       - dev
   pull_request:
     branches:
-      - master
+      - main
       - dev
   schedule:
     - cron: '0 0 11 * *'

diff --git a/README.md b/README.md
@@ -5,20 +5,20 @@
 [![npm-version](https://badgen.net/npm/v/vue-flatpickr-component)](https://www.npmjs.com/package/vue-flatpickr-component)
 [![github-tag](https://badgen.net/github/tag/ankurk91/vue-flatpickr-component)](https://github.com/ankurk91/vue-flatpickr-component/tags)
 [![build](https://github.com/ankurk91/vue-flatpickr-component/workflows/build/badge.svg)](https://github.com/ankurk91/vue-flatpickr-component/actions)
-[![codecov](https://codecov.io/gh/ankurk91/vue-flatpickr-component/branch/master/graph/badge.svg)](https://codecov.io/gh/ankurk91/vue-flatpickr-component)
-[![license](https://badgen.net/github/license/ankurk91/vue-flatpickr-component)](https://yarnpkg.com/en/package/vue-flatpickr-component)
-![TypeScript](https://badgen.net/badge/icon/Typed?icon=typescript&label&labelColor=blue&color=555555)
+[![codecov](https://codecov.io/gh/ankurk91/vue-flatpickr-component/branch/main/graph/badge.svg)](https://codecov.io/gh/ankurk91/vue-flatpickr-component)
+[![license](https://badgen.net/github/license/ankurk91/vue-flatpickr-component)](LICENSE.txt)
+![ts](https://badgen.net/badge/Built%20With/TypeScript/blue)
 
 Vue.js component for [Flatpickr](https://flatpickr.js.org/) date-time picker.
 
 ## [Demo](https://ankurk91.github.io/vue-flatpickr-component/) or [JSFiddle](https://jsfiddle.net/ankurk91/63kzdwLx/)
 
 ### Version matrix
 
-|Vue.js version|Package version |                                                              Branch |
-|:-------------|:--------------:|--------------------------------------------------------------------:| 
-| 2.x          |      8.x       | [8.x](https://github.com/ankurk91/vue-flatpickr-component/tree/8.x) |
-| 3.x          |      10.x      |                                                            `master` |
+|Vue.js version| Package version |                                                              Branch |
+|:-------------|:---------------:|--------------------------------------------------------------------:| 
+| 2.x          |       8.x       | [8.x](https://github.com/ankurk91/vue-flatpickr-component/tree/8.x) |
+| 3.x          |      11.x       |                                                            `main` |
 
 ## Features
 
@@ -35,7 +35,7 @@ Vue.js component for [Flatpickr](https://flatpickr.js.org/) date-time picker.
 ## Installation
 
 ```bash
-npm install vue-flatpickr-component@^10
+npm install vue-flatpickr-component@^11
 ```
 
 ## Usage
@@ -48,21 +48,12 @@ npm install vue-flatpickr-component@^10
     <flat-pickr v-model="date"/>
 </template>
 
-<script>
+<script setup>
+    import {ref} from 'vue';
     import flatPickr from 'vue-flatpickr-component';
     import 'flatpickr/dist/flatpickr.css';
 
-    export default {
-        name: 'yourComponent'
-        data() {
-            return {
-                date: null,
-            }
-        },
-        components: {
-            flatPickr
-        }
-    }
+    const date = ref(null);
 </script>
 ```
 
@@ -99,7 +90,8 @@ Using Bootstrap [input group](https://getbootstrap.com/docs/4.6/components/input
     </section>
 </template>
 
-<script>
+<script setup>
+    import {ref} from 'vue';
     import 'bootstrap/dist/css/bootstrap.css';
     // import this component
     import flatPickr from 'vue-flatpickr-component';
@@ -110,26 +102,16 @@ Using Bootstrap [input group](https://getbootstrap.com/docs/4.6/components/input
     // localization is optional
     import {Hindi} from 'flatpickr/dist/l10n/hi.js';
 
-    export default {
-        name: 'yourComponent',
-        data() {
-            return {
-                // Initial value can be a date object as well
-                date: '2020-10-16',
-                // Read more at https://flatpickr.js.org/options/
-                config: {
-                    wrap: true, // set wrap to true only when using 'input-group'
-                    altFormat: 'M j, Y',
-                    altInput: true,
-                    dateFormat: 'Y-m-d',
-                    locale: Hindi, // locale for this instance only          
-                },
-            }
-        },
-        components: {
-            flatPickr
-        },
-    }
+    const date = ref('2022-10-28');
+
+    // Read more at https://flatpickr.js.org/options/
+    const config = ref({
+        wrap: true, // set wrap to true only when using 'input-group'
+        altFormat: 'M j, Y',
+        altInput: true,
+        dateFormat: 'Y-m-d',
+        locale: Hindi, // locale for this instance only          
+    });
 </script>
 ```
 
@@ -153,9 +135,9 @@ The component accepts these props:
 |:----------|:-----------------------------------------------:|:----------------------------------------------:|:-----------------------------------------------------------------------|
 | v-model   | String / Date Object / Array / Timestamp / null |                     `null`                     | Set or Get date-picker value (required)                                |
 | config    |                     Object                      |               `{ wrap: false }`                | Flatpickr configuration [options](https://flatpickr.js.org/options/)   |
-| events    |                      Array                      | Array of sensible [events](./src/events.js#L2) | Customise the [events](https://flatpickr.js.org/events/) to be emitted |
+| events    |                      Array                      | Array of sensible [events](./src/events.ts#L2) | Customise the [events](https://flatpickr.js.org/events/) to be emitted |
 
-## Install in non-module environments (without webpack)
+## Use in browser with CDN 
 
 ```html
 <!-- Flatpickr related files -->
@@ -164,7 +146,7 @@ The component accepts these props:
 <!-- Vue.js -->
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <!-- Lastly add this package -->
-<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@10"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@11"></script>
 <script>
     const app = Vue.createApp({})
     app.component('flat-pickr', VueFlatpickr.default);

diff --git a/__test__/emits.spec.js → __test__/emits.spec.ts b/__test__/emits.spec.js → __test__/emits.spec.ts
diff --git a/__test__/events.spec.js → __test__/events.spec.ts b/__test__/events.spec.js → __test__/events.spec.ts
@@ -4,7 +4,7 @@ import Component from '../src/component';
 
 describe('Flatpickr events', () => {
 
-  let wrapper;
+  let wrapper: any;
   let onChangeStub = jest.fn();
 
   const globalOnChange = jest.fn();

diff --git a/__test__/instance.spec.js → __test__/instance.spec.ts b/__test__/instance.spec.js → __test__/instance.spec.ts
@@ -3,7 +3,7 @@ import Component from '../src/component';
 
 describe('Flatpickr component instance', () => {
 
-  let wrapper;
+  let wrapper: any;
 
   beforeEach(() => {
     wrapper = mount(Component, {

diff --git a/__test__/plugin.spec.js → __test__/plugin.spec.ts b/__test__/plugin.spec.js → __test__/plugin.spec.ts
diff --git a/__test__/props.spec.js → __test__/props.spec.ts b/__test__/props.spec.js → __test__/props.spec.ts
@@ -11,7 +11,7 @@ describe('Flatpickr props', () => {
     }
   };
 
-  let wrapper;
+  let wrapper: any;
 
   beforeEach(() => {
     wrapper = mount(Component, {
@@ -31,18 +31,4 @@ describe('Flatpickr props', () => {
   test('accepts value via prop', () => {
     expect(wrapper.props('modelValue')).toBe(props.modelValue);
   });
-
-  test('validates v-model', () => {
-    let vModel = wrapper.vm.$options.props.modelValue;
-
-    expect(vModel.validator(false)).toBe(false);
-    expect(vModel.validator(undefined)).toBe(false);
-
-    expect(vModel.validator(new Date())).toBe(true);
-    expect(vModel.validator(null)).toBe(true);
-    expect(vModel.validator('2017-12-12')).toBe(true);
-    expect(vModel.validator(['2017-12-12'])).toBe(true);
-    expect(vModel.validator(+new Date())).toBe(true);
-  });
-
 });
diff --git a/__test__/watchers.spec.js → __test__/watchers.spec.ts b/__test__/watchers.spec.js → __test__/watchers.spec.ts
@@ -2,11 +2,11 @@ import {mount} from '@vue/test-utils'
 import {Hindi as HindiLocale} from 'flatpickr/dist/l10n/hi';
 import {english as EnglishLocale} from 'flatpickr/dist/l10n/default'
 
-import Component from '../src/component.js';
+import Component from '../src/component';
 
 describe('Flatpickr watchers', () => {
 
-  let wrapper;
+  let wrapper: any;
 
   beforeEach(() => {
     wrapper = mount(Component, {

diff --git a/examples/App.vue b/examples/App.vue
@@ -186,7 +186,7 @@
 <script>
 import flatpickr from "flatpickr";
 // Init component
-import flatPickrComponent from '../src/index.js';
+import flatPickrComponent from '../src/index';
 // Need to add base css for flatpickr
 import 'flatpickr/dist/flatpickr.min.css';
 // l10n is optional

diff --git a/jest.config.js b/jest.config.js
@@ -9,17 +9,15 @@ module.exports = {
     ],
   },
   transform: {
-    '^.+\\.js$': 'babel-jest',
+    "^.+\\.tsx?$": "ts-jest"
   },
   moduleFileExtensions: [
+    'ts',
     'js',
-    'json',
-    'jsx',
-    'node',
-    'vue',
   ],
   watchPathIgnorePatterns: [
     "<rootDir>/examples/",
     "/node_modules/"
-  ]
+  ],
+  testRegex: "^.+\\.spec\\.tsx?$"
 }
diff --git a/package.json b/package.json
@@ -2,8 +2,9 @@
   "name": "vue-flatpickr-component",
   "version": "10.0.0",
   "description": "Vue.js component for Flatpickr date-time picker",
-  "main": "dist/index.js",
-  "types": "types/index.d.ts",
+  "main": "dist/index.umd.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "files": [
     "src",
     "dist",
@@ -27,33 +28,33 @@
   },
   "homepage": "https://github.com/ankurk91/vue-flatpickr-component",
   "scripts": {
-    "test": "jest",
+    "test": "jest --runInBand",
     "test:watch": "npm run test --watch --notify",
     "start": "npm run dev",
-    "dev": "cross-env NODE_ENV=development webpack serve --progress --hot --config=webpack.config.dev.js",
-    "docs": "cross-env NODE_ENV=production webpack --config=webpack.config.dev.js --progress --mode=production",
-    "build": "cross-env NODE_ENV=production webpack --progress --mode=production",
+    "dev": "webpack serve --node-env=development  --progress --hot --config=webpack.config.dev.js",
+    "docs": "webpack --node-env=production  --config=webpack.config.dev.js --progress --mode=production",
+    "build:esm": "tsc -m es6 --outDir ./dist/esm",
+    "build:umd": "webpack --node-env=production  --progress --mode=production",
+    "build": "npm run build:umd && npm run build:esm",
     "prepublishOnly": "npm run test && npm run build"
   },
   "dependencies": {
     "flatpickr": "^4.6.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.19.3",
-    "@vue/compiler-sfc": "^3.2.40",
+    "@types/jest": "^29.1.2",
     "@vue/test-utils": "^2.1.0",
-    "babel-jest": "^29.1.2",
-    "babel-loader": "^8.2.5",
     "bootstrap": "^4.6",
-    "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^29.1.2",
     "jest-environment-jsdom": "^29.1.2",
     "mini-css-extract-plugin": "^2.6.1",
     "style-loader": "^3.3.1",
+    "ts-jest": "^29.0.3",
+    "ts-loader": "^9.4.1",
+    "typescript": "^4.8.4",
     "vue": "^3.2.40",
     "vue-loader": "^17.0.0",
     "webpack": "^5.74.0",