rewrite using typescript

Author: andrewvasilchuk

build/base/plugins/index.js

@@ -0,0 +1,8 @@
+import common from 'rollup-plugin-commonjs'
+import resolve from 'rollup-plugin-node-resolve'
+import vue from 'rollup-plugin-vue'
+
+/** @type {import('rollup').RollupOptions['plugins']} */
+const plugins = [common(), resolve(), vue({ needMap: false })]
+
+export default plugins

build/base/plugins/typescript.js

@@ -0,0 +1 @@
+export default { objectHashIgnoreUnknownHack: true }

build/rollup.config.dev.js

@@ -1,35 +1,36 @@
 import path from 'path'
-import common from 'rollup-plugin-commonjs'
+import typescript from 'rollup-plugin-typescript2'
 import serve from 'rollup-plugin-serve'
 import livereload from 'rollup-plugin-livereload'
-import vue from 'rollup-plugin-vue'
-import resolve from 'rollup-plugin-node-resolve'
 import replace from 'rollup-plugin-replace'
 
+import typescriptPluginOptions from './base/plugins/typescript'
+import plugins from './base/plugins/index'
+
+const DEMO_DIR = path.join(__dirname, '../demo')
+
+/** @type {import('rollup').RollupOptions} */
 export default {
-  input: path.join(__dirname, '..', 'demo', 'index.js'),
+  input: path.join(DEMO_DIR, 'index.ts'),
   output: {
-    file: path.join(__dirname, '..', 'demo', 'demo.js'),
+    file: path.join(DEMO_DIR, 'demo.js'),
     format: 'iife',
     name: 'demo',
     sourcemap: true,
   },
   plugins: [
-    common(),
-    // demo crashes on changes https://github.com/vuejs/rollup-plugin-vue/issues/238
-    vue({ needMap: false }),
+    typescript(typescriptPluginOptions),
     replace({
       'process.env.NODE_ENV': JSON.stringify('development'),
     }),
-    resolve(),
     serve({
       open: true,
-      contentBase: path.join(__dirname, '..', 'demo'),
+      contentBase: DEMO_DIR,
       port: 8080,
     }),
     livereload({
       verbose: true,
-      watch: path.join(__dirname, '..', 'demo'),
+      watch: DEMO_DIR,
     }),
-  ],
+  ].concat(plugins),
 }

build/rollup.config.prod.js

@@ -1,48 +1,57 @@
 import path from 'path'
-import vue from 'rollup-plugin-vue'
-import { terser } from 'rollup-plugin-terser'
+import typescript from 'rollup-plugin-typescript2'
 import replace from 'rollup-plugin-replace'
-import resolve from 'rollup-plugin-node-resolve'
-import common from 'rollup-plugin-commonjs'
+import { terser } from 'rollup-plugin-terser'
 
+import typescriptPluginOptions from './base/plugins/typescript'
+import basePlugins from './base/plugins/index'
+
+const SOURCE = path.join(__dirname, '../src/index.ts')
+const DIST_DIR = 'dist'
+const FILE_NAME = 'vue-accessible-modal'
 const name = 'VueAccessibleModal'
+const external = ['vue']
 const plugins = [
   replace({
     'process.env.NODE_ENV': JSON.stringify('production'),
   }),
-  resolve(),
-  common(),
-  vue(),
-  terser(),
-]
+].concat(basePlugins)
 
+/** @type {import('rollup').RollupOptions} */
 export default [
   {
-    input: path.join(__dirname, '..', 'src', 'index.js'),
+    input: SOURCE,
+    external,
     output: [
       {
-        file: 'dist/vue-accessible-modal.js',
+        file: `${DIST_DIR}/${FILE_NAME}.js`,
         format: 'umd',
         name,
       },
       {
-        file: 'dist/vue-accessible-modal.common.js',
+        file: `${DIST_DIR}/${FILE_NAME}.common.js`,
         format: 'cjs',
       },
       {
-        file: 'dist/vue-accessible-modal.esm.js',
+        file: `${DIST_DIR}/${FILE_NAME}.esm.js`,
         format: 'esm',
       },
     ],
-    plugins,
+    plugins: [
+      typescript(Object.assign({}, typescriptPluginOptions, { tsconfig: './tsconfig.prod.json'})),
+    ].concat(plugins),
   },
   {
-    input: path.join(__dirname, '..', 'src', 'index.js'),
+    input: SOURCE,
+    external,
     output: {
-      file: 'dist/vue-accessible-modal.min.js',
+      file: `${DIST_DIR}/${FILE_NAME}.min.js`,
       format: 'umd',
       name,
     },
-    plugins,
+    plugins: [
+      typescript(Object.assign({}, typescriptPluginOptions, { tsconfig: './tsconfig.prod.umd.json'})),
+      terser()
+    ].concat(plugins),
   },
 ]

demo/App.vue

@@ -9,34 +9,32 @@
   </section>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import ExampleComponent from './components/ExampleComponent.vue'
 import ConfirmComponent from './components/ConfirmComponent.vue'
 
-export default {
+export default Vue.extend({
   name: 'App',
-  data() {
-    return {}
-  },
   methods: {
     openModal() {
       this.$modal.show(ExampleComponent, {
         props: {
           foo: 'foo',
           bar: 'bar',
         },
-        listeners: { submit: data => console.log(data) },
+        listeners: { submit: (data: object) => console.log(data) },
         label: 'Modal',
         classes: 'foo bar',
         attributes: {
           id: 'bar',
         },
-        // transition: 'fade',
+        transition: 'rotate-in',
       })
     },
     openConfirmModal() {
       this.$modal
-        .confirm('Do you like JavaScript?', { component: ConfirmComponent })
+        .confirm<string>(ConfirmComponent, 'Do you like JavaScript?')
         .then(val => {
           console.log(val)
         })
@@ -54,7 +52,7 @@ export default {
       console.log('close')
     },
   },
-}
+})
 </script>
 
 <style lang="scss">

demo/components/ConfirmComponent.vue

@@ -6,8 +6,10 @@
   </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
   name: 'ConfirmComponent',
   props: {
     message: {
@@ -31,5 +33,5 @@ export default {
       this.reject('bar')
     },
   },
-}
-</script>
+})
+</script>

demo/components/ExampleComponent.vue

@@ -8,16 +8,18 @@
     <button type="button" @click="closeModal">Close modal</button>
     <textarea></textarea>
     <textarea disabled></textarea>
-    <input type="text">
-    <input type="text" disabled>
+    <input type="text" />
+    <input type="text" disabled />
     <div tabindex="0">Focus</div>
     <button type="button" style="display:none;">Button</button>
     <button type="button" style="display:none;">Button</button>
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
   name: 'ExampleComponent',
   props: {
     foo: {
@@ -41,14 +43,14 @@ export default {
     classes: ['baz', 'poo', { javascript: true, jQuery: false }],
     label: 'Foo bar',
     attributes: {
-      'data-test': 'foo'
-    }
+      'data-test': 'foo',
+    },
   },
-}
+})
 </script>
 
 <style>
 .box {
   padding: 16px;
 }
-</style>
+</style>

demo/index.js renamed to demo/index.ts

@@ -4,9 +4,7 @@ import VueAccessibleModal from '../src'
 
 Vue.config.productionTip = false
 
-Vue.use(VueAccessibleModal, {
-  transition: 'fade',
-})
+Vue.use(VueAccessibleModal, { transition: 'fade' })
 
 new Vue({
   el: '#app',