feat: move to TypeScript

closes #13 #11

Author: LeBenLeBen

bili.config.js

@@ -1,6 +1,7 @@
 /** @type {import('bili').Config} */
 module.exports = {
   externals: ['vue'],
+  input: 'src/index.ts',
   output: {
     format: ['cjs', 'es', 'umd', 'umd-min'],
     fileName: 'vue-content-loader.[format][min][ext]',

package.json

@@ -14,6 +14,7 @@
   "files": [
     "dist"
   ],
+  "types": "dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
     "prepublishOnly": "npm run build",
@@ -39,6 +40,8 @@
     "bili": "^5.0.5",
     "jest": "^26.6.3",
     "poi": "12.10.3",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "typescript": "^4.1.3",
     "vue": "^3.0.5",
     "vue-loader": "^16.1.2",
     "vue-router": "^4.0.3"

src/BulletListLoader.js renamed to src/BulletListLoader.tsx

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue'
 import ContentLoader from './ContentLoader'
 
-const BulletListLoader = (props, { attrs }) => {
-  return (
+const BulletListLoader = defineComponent((props, { attrs }) => {
+  return () => (
     <ContentLoader {...attrs}>
       <circle cx="10" cy="20" r="8" />
       <rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
@@ -13,6 +14,6 @@ const BulletListLoader = (props, { attrs }) => {
       <rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
     </ContentLoader>
   )
-}
+})
 
 export default BulletListLoader

src/CodeLoader.js renamed to src/CodeLoader.tsx

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue'
 import ContentLoader from './ContentLoader'
 
-const CodeLoader = (props, { attrs }) => {
-  return (
+const CodeLoader = defineComponent((props, { attrs }) => {
+  return () => (
     <ContentLoader {...attrs}>
       <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
       <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
@@ -17,6 +18,6 @@ const CodeLoader = (props, { attrs }) => {
       <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
     </ContentLoader>
   )
-}
+})
 
 export default CodeLoader

src/ContentLoader.js renamed to src/ContentLoader.tsx

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue'
 import ContentLoader from './ContentLoader'
 
-const FacebookLoader = (props, { attrs }) => {
-  return (
+const FacebookLoader = defineComponent((props, { attrs }) => {
+  return () => (
     <ContentLoader {...attrs}>
       <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
       <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
@@ -11,6 +12,6 @@ const FacebookLoader = (props, { attrs }) => {
       <circle cx="30" cy="30" r="30" />
     </ContentLoader>
   )
-}
+})
 
 export default FacebookLoader

src/FacebookLoader.js renamed to src/FacebookLoader.tsx

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue'
 import ContentLoader from './ContentLoader'
 
-const InstagramLoader = (props, { attrs }) => {
-  return (
+const InstagramLoader = defineComponent((props, { attrs }) => {
+  return () => (
     <ContentLoader {...attrs} viewBox="0 0 400 480">
       <circle cx="30" cy="30" r="30" />
 
@@ -10,6 +11,6 @@ const InstagramLoader = (props, { attrs }) => {
       <rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
     </ContentLoader>
   )
-}
+})
 
 export default InstagramLoader

src/InstagramLoader.js renamed to src/InstagramLoader.tsx

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue'
 import ContentLoader from './ContentLoader'
 
-const ListLoader = (props, { attrs }) => {
-  return (
+const ListLoader = defineComponent((props, { attrs }) => {
+  return () => (
     <ContentLoader {...attrs}>
       <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
       <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
@@ -11,6 +12,6 @@ const ListLoader = (props, { attrs }) => {
       <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
     </ContentLoader>
   )
-}
+})
 
 export default ListLoader