build: refine source code structure to reach full typescript

Author: ulivz

.gitignore

@@ -2,6 +2,7 @@
 lib
 .temp
 types
+src/**/*.js
 
 ### Code ###
 # Visual Studio Code - https://code.visualstudio.com/

examples/blog/.vuepress/config.js

@@ -1,7 +1,7 @@
 module.exports = {
   title: `ULIVZ`,
   plugins: [
-    [require('../../../lib'), {
+    [require('../../../lib/node'), {
       directories: [
         {
           // Unique ID of current classification

examples/blog/.vuepress/theme/layouts/Layout.vue

@@ -9,19 +9,19 @@
       <router-link v-if="$pagination.hasPrev" :to="$pagination.prevLink">Prev</router-link>
       <router-link v-if="$pagination.hasNext" :to="$pagination.nextLink">Next</router-link>
     </div>
-  
-    <Pagination />
+    
+    <Pagination/>
   </div>
 </template>
 
 <script>
-  import Pagination from '../../../../../src/components/Pagination'
+  import { Pagination } from '../../../../../lib/client/components.js'
   
   export default {
     components: { Pagination },
     created() {
       console.log(this.$route.meta.pid)
       console.log(this.$currentTag)
-    }
+    },
   }
 </script>

examples/directory-classifier/.vuepress/config.js

@@ -1,7 +1,7 @@
 module.exports = {
   title: `ULIVZ`,
   plugins: [
-    [require('../../../lib'), {
+    [require('../../../lib/node'), {
       directories: [
         {
           // Unique ID of current classification

examples/frontmatter-classifier/.vuepress/config.js

@@ -1,7 +1,7 @@
 module.exports = {
   title: `ULIVZ`,
   plugins: [
-    [require('../../../lib'), {
+    [require('../../../lib/node'), {
       frontmatters: [
         {
           // Unique ID of current classification

package.json

@@ -4,16 +4,20 @@
   "description": "Offical blog plugin for VuePress",
   "scripts": {
     "lint": "xo",
-    "dev": "npm run cpc && tsc -skipLibCheck --watch",
-    "cpc": "cp -r src/client lib",
-    "build": "tsc -skipLibCheck && npm run cpc",
+    "dev": "concurrently \"yarn dev:client\" \"yarn dev:node\" \"yarn build:components\"",
+    "build": "concurrently \"yarn build:client\" \"yarn build:node\" \"yarn build:components\"",
+    "dev:client": "tsc -p tsconfig.client.json --watch",
+    "dev:node": "tsc -p tsconfig.node.json --watch",
+    "build:client": "tsc -p tsconfig.client.json",
+    "build:node": "tsc -p tsconfig.node.json",
+    "build:components": "mkdir -p lib/client/components && cp -r src/client/components lib/client",
     "dev:docs": "vuepress dev docs --temp docs/.temp",
     "build:docs": "vuepress build docs --temp docs/.temp",
     "example": "node examples/launch.js",
     "prepare": "npm run build",
     "prepublishOnly": "npm run build && conventional-changelog -p angular -r 2 -i CHANGELOG.md -s"
   },
-  "main": "lib/index.js",
+  "main": "lib/node/index.js",
   "files": [
     "lib",
     "docs",
@@ -25,24 +29,17 @@
   },
   "author": "ULIVZ <[email protected]>",
   "license": "MIT",
+  "dependencies": {
+    "vuejs-paginate": "^2.1.0"
+  },
   "devDependencies": {
+    "concurrently": "^4.1.0",
     "conventional-changelog-cli": "^2.0.1",
-    "eslint-config-prettier": "^3.3.0",
-    "eslint-config-rem": "^4.0.0",
-    "eslint-config-xo-typescript": "^0.3.0",
-    "eslint-plugin-prettier": "^3.0.0",
-    "eslint-plugin-typescript": "^0.14.0",
-    "husky": "^1.2.0",
     "inquirer": "^6.3.1",
-    "lint-staged": "^8.1.0",
     "nodemon": "^1.18.7",
-    "prettier": "^1.15.2",
     "ts-node": "^7.0.1",
-    "typescript": "^3.1.4",
-    "typescript-eslint-parser": "^21.0.2",
-    "vuejs-paginate": "^2.1.0",
-    "vuepress": "^1.0.0",
-    "xo": "^0.23.0"
+    "typescript": "3.1.4",
+    "vuepress": "^1.0.0"
   },
   "xo": {
     "extends": [
@@ -63,24 +60,9 @@
       "typescript/no-var-requires": "off",
       "no-implicit-globals": "off",
       "import/no-unresolved": "off",
-      "import/no-extraneous-dependencies": "off"
-    }
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "linters": {
-      "*.{ts,js}": [
-        "xo --fix",
-        "git add"
-      ],
-      "*.{json,md}": [
-        "prettier --write",
-        "git add"
-      ]
+      "import/no-extraneous-dependencies": "off",
+      "typescript/no-use-before-define": "off",
+      "typescript/no-type-alias": "off"
     }
   },
   "publishConfig": {

src/client/classification.js renamed to src/client/classification.ts

@@ -1,7 +1,12 @@
+// @ts-ignore
 import { findPageByKey } from '@app/util'
-import frontmatterClassifiedPageMap from '@dynamic/vuepress_blog/frontmatterClassified'
+// @ts-ignore
+import frontmatterClassifiedMap from '@dynamic/vuepress_blog/frontmatterClassified'
+import { VuePressPage } from '../types/VuePress'
 
 class Classifiable {
+  private _metaMap: any
+
   constructor(metaMap, pages) {
     this._metaMap = Object.assign({}, metaMap)
     Object.keys(this._metaMap).forEach(name => {
@@ -27,7 +32,12 @@ class Classifiable {
   }
 
   toArray() {
-    const tags = []
+    const tags: Array<{
+      name: string
+      pages: VuePressPage[]
+      path: string
+    }> = []
+
     Object.keys(this._metaMap).forEach(name => {
       const { pages, path } = this._metaMap[name]
       tags.push({ name, pages, path })
@@ -41,18 +51,22 @@ class Classifiable {
 }
 
 export default ({ Vue }) => {
-  const computed = Object.keys(frontmatterClassifiedPageMap)
+  const computed = Object.keys(frontmatterClassifiedMap)
     .map(classifiedType => {
-      const map = frontmatterClassifiedPageMap[classifiedType]
+      const map = frontmatterClassifiedMap[classifiedType]
       const helperName = `$${classifiedType}`
       return {
         [helperName]() {
+          // @ts-ignore
           const { pages } = this.$site
           const classified = new Classifiable(map, pages)
           return classified
         },
-        [`$current${classifiedType.charAt(0).toUpperCase() + classifiedType.slice(1)}`]() {
+        [`$current${classifiedType.charAt(0).toUpperCase() +
+          classifiedType.slice(1)}`]() {
+          // @ts-ignore
           const tagName = this.$route.meta.id
+          // @ts-ignore
           return this[helperName].getItemByName(tagName)
         },
       }

src/client/components.ts

@@ -0,0 +1,6 @@
+// @ts-ignore
+import Pagination from './components/Pagination.vue'
+// @ts-ignore
+import SimplePagination from './components/SimplePagination.vue'
+
+export { Pagination, SimplePagination }

src/components/Pagination.vue renamed to src/client/components/Pagination.vue

@@ -12,18 +12,20 @@
 
 <script>
   import Paginate from 'vuejs-paginate'
-  
+
   export default {
     data() {
       return {
         page: 0,
       }
     },
     components: { Paginate },
+    created() {
+      this.page = this.$pagination.paginationIndex + 1
+    },
     methods: {
       clickCallback(pageNum) {
         const link = this.$pagination.getSpecificPageLink(pageNum - 1)
-        console.log(link)
         this.$router.push(link)
       },
     },

src/components/SimplePagination.vue renamed to src/client/components/SimplePagination.vue

@@ -1,10 +1,21 @@
 import Vue from 'vue'
+// @ts-ignore
 import paginations from '@dynamic/vuepress_blog/paginations'
 import _debug from 'debug'
 
 const debug = _debug('plugin-blog:pagination')
 
 class Pagination {
+  public paginationIndex: number
+
+  public _paginationPages: any
+
+  public _currentPage: any
+
+  public _matchedPages: any
+
+  public _indexPage: string
+
   constructor(pagination, pages, route) {
     debug(pagination)
     const { pages: paginationPages } = pagination
@@ -71,11 +82,14 @@ class Pagination {
 }
 
 class PaginationGateway {
+  private paginations: any
+
   constructor(paginations) {
     this.paginations = paginations
   }
 
   get pages() {
+    // @ts-ignore
     return Vue.$vuepress.$get('siteData').pages
   }
 
@@ -96,15 +110,18 @@ export default ({ Vue }) => {
     methods: {
       $getPagination(pid, id) {
         id = id || pid
+        // @ts-ignore
         return gateway.getPagination(pid, id, this.$route)
       },
     },
     computed: {
       $pagination() {
+        // @ts-ignore
         if (!this.$route.meta.pid || !this.$route.meta.id) {
           return {}
         }
 
+        // @ts-ignore
         return this.$getPagination(this.$route.meta.pid, this.$route.meta.id)
       },
     },

src/client/init.js

@@ -1,7 +1,7 @@
 import { BlogPluginOptions } from './interface/Options'
 import { ExtraPage } from './interface/ExtraPages'
 import { PageEnhancer } from './interface/PageEnhancer'
-import { AppContext } from './interface/VuePress'
+import { VuePressContext } from './interface/VuePress'
 import { InternalPagination, PaginationConfig } from './interface/Pagination'
 import { FrontmatterClassificationPage } from './interface/Frontmatter'
 import {
@@ -19,7 +19,10 @@ import { ClassifierTypeEnum } from './interface/Classifier'
  * @returns {*}
  */
 
-export function handleOptions(options: BlogPluginOptions, ctx: AppContext) {
+export function handleOptions(
+  options: BlogPluginOptions,
+  ctx: VuePressContext,
+) {
   const { directories = [], frontmatters = [] } = options
 
   const pageEnhancers: PageEnhancer[] = []

src/client/pagination.js renamed to src/client/pagination.ts

@@ -1,12 +1,12 @@
 import * as path from 'path'
 import { handleOptions } from './handleOptions'
-import { registerPagination } from './pagination'
+import { registerPaginations } from './pagination'
 import { BlogPluginOptions } from './interface/Options'
-import { AppContext, Page } from './interface/VuePress'
 import { logPages, resolvePaginationConfig } from './util'
 import { ClassifierTypeEnum, DefaultLayoutEnum } from './interface/Classifier'
+import { VuePressContext, VuePressPage } from './interface/VuePress'
 
-function injectExtraAPI(ctx: AppContext) {
+function injectExtraAPI(ctx: VuePressContext) {
   const { layoutComponentMap } = ctx.themeAPI
 
   /**
@@ -22,7 +22,7 @@ function injectExtraAPI(ctx: AppContext) {
   }
 }
 
-module.exports = (options: BlogPluginOptions, ctx: AppContext) => {
+module.exports = (options: BlogPluginOptions, ctx: VuePressContext) => {
   injectExtraAPI(ctx)
 
   const {
@@ -38,7 +38,7 @@ module.exports = (options: BlogPluginOptions, ctx: AppContext) => {
     /**
      * 1. Execute `pageEnhancers` generated in handleOptions
      */
-    extendPageData(pageCtx: Page) {
+    extendPageData(pageCtx: VuePressPage) {
       const { frontmatter: rawFrontmatter } = pageCtx
 
       pageEnhancers.forEach(({ when, data = {}, frontmatter = {} }) => {
@@ -143,14 +143,14 @@ module.exports = (options: BlogPluginOptions, ctx: AppContext) => {
       logPages(`Automatically Added Index Pages`, allExtraPages)
 
       await Promise.all(allExtraPages.map(async page => ctx.addPage(page)))
-      await registerPagination(paginations, ctx)
+      await registerPaginations(paginations, ctx)
     },
 
     /**
      * Generate tag and category metadata.
      */
     async clientDynamicModules() {
-      const frontmatterClassifiedPageMap = ctx.frontmatterClassificationPages.reduce(
+      const frontmatterClassifiedMap = ctx.frontmatterClassificationPages.reduce(
         (map, page) => {
           map[page.id] = page.map
           return map
@@ -164,7 +164,7 @@ module.exports = (options: BlogPluginOptions, ctx: AppContext) => {
         {
           name: `${PREFIX}/frontmatterClassified.js`,
           content: `export default ${JSON.stringify(
-            frontmatterClassifiedPageMap,
+            frontmatterClassifiedMap,
             null,
             2,
           )}`,
@@ -193,8 +193,8 @@ export default ${serializePaginations(ctx.serializedPaginations, [
     },
 
     enhanceAppFiles: [
-      path.resolve(__dirname, 'client/classification.js'),
-      path.resolve(__dirname, 'client/pagination.js'),
+      path.resolve(__dirname, '../client/classification.js'),
+      path.resolve(__dirname, '../client/pagination.js'),
     ],
   }
 }