Migrate EME to Typescript (#144)

* migrate_to_typescript * refractor_common_js * fix_build_break * migrate_to_ts * fix_babel_spread_error * fix_typo * fix_asar_error * refine_code * refractor_svg_icon_ts * refine_wordcount * fix_build_issue
egoist · Nov 24, 2019 · 3d5837c · 3d5837c
1 parent 1d9c552
commit 3d5837c
Show file tree

Hide file tree

Showing 22 changed files with 5,373 additions and 2,865 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,11 @@
+{
+presets: [
+           ['es2015', {"module": false}],
+           'stage-1'
+],
+
+plugins: [
+  'transform-runtime',
+  'transform-object-rest-spread'
+]
+}
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 node_modules
 *.log
 .DS_Store
-/app/dist
+/app/libvue
 /dist
 stats.html
 stats.json
diff --git a/app/index.html b/app/index.html
@@ -6,7 +6,7 @@
   <link rel="stylesheet" href="./vendor/github-markdown-css/github-markdown.css">
   <link rel="stylesheet" href="./vendor/katex/katex.min.css">
   <link rel="stylesheet" href="./vendor/css/spinners.css">
-  <link rel="stylesheet" href="./dist/app.css">
+  <link rel="stylesheet" href="./libvue/app.css">
 </head>
 <body>
   <div id="eme">
@@ -15,8 +15,8 @@
   <script>start = performance.now();</script>
   <script src="./vendor/mousetrap/mousetrap.js"></script>
   <script src="./vendor/mousetrap/global-bind.js"></script>
-  <script src="./dist/vendor.js"></script>
-  <script src="./dist/app.js"></script>
+  <script src="./libvue/vendor.js"></script>
+  <script src="./libvue/app.js"></script>
   <script>console.log('total init time', performance.now() - start);</script>
 </body>
 </html>
diff --git a/app/package.json b/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "EME",
   "productName": "EME",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Elegant Markdown Editor",
   "author": {
     "name": "EGOIST",

diff --git a/build/icons/512x512.png b/build/icons/512x512.png
diff --git a/package.json b/package.json
@@ -7,24 +7,25 @@
     "lint": "npm run lint:app && npm run lint:src",
     "lint:app": "eslint app/index.js app/eme --ext .js --fix",
     "lint:src": "eslint src/* src/* --ext .js --ext .vue --fix",
-    "postinstall": "install-app-deps",
+    "postinstall": "electron-builder install-app-deps",
     "app": "cross-env NODE_ENV=development electron app/",
     "build": "rm -rf app/dist && webpack --progress --config scripts/webpack.config.prod.js --profile --json > stats.json",
     "watch": "webpack --config scripts/webpack.config.dev.js --watch",
     "dist": "npm run mac && npm run linux && npm run win",
-    "mac": "build --mac",
-    "linux": "build --linux deb tar.xz",
-    "win": "build --win --ia32",
+    "mac": "electron-build --mac",
+    "linux": "electron-builder --linux deb tar.xz",
+    "win": "electron-builder --win --ia32",
     "stats": "webpack-bundle-analyzer stats.json"
   },
   "build": {
     "appId": "com.egoistian.eme",
-    "category": "public.app-category.utilities",
     "asar": true,
+    "copyright": "Copyright @2019 The EME authors",
     "win": {
-      "target": [
-        "squirrel"
-      ]
+      "target": "squirrel"
+    },
+    "linux": {
+      "category": "public.app-category.utilities"
     }
   },
   "repository": {
@@ -36,30 +37,31 @@
     "editor"
   ],
   "devDependencies": {
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
     "autoprefixer": "^6.4.0",
     "babel-core": "^6.18.2",
     "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "^7.1.3",
     "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-stage-1": "^6.5.0",
     "cross-env": "^2.0.0",
     "css-loader": "^0.23.1",
     "devtron": "^1.2.1",
-    "electron-builder": "^11.7.0",
+    "electron": "^2.0.18",
+    "electron-builder": "^20.13.4",
     "electron-builder-squirrel-windows": "^11.6.1",
-    "electron-devtools-installer": "^1.1.5",
-    "electron-packager": "^7.5.1",
-    "electron-prebuilt": "^1.3.2",
+    "electron-devtools-installer": "^2.0.0",
+    "electron-packager": "^11.2.1",
     "eslint": "^3.12.2",
     "eslint-config-xo-space": "^0.15.0",
     "eslint-plugin-babel": "^4.0.0",
     "eslint-plugin-vue": "^2.0.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.9.0",
     "json-loader": "^0.5.4",
     "minimist": "^1.2.0",
-    "postcss-import": "^9.0.0",
+    "postcss-import": "^9.1.0",
     "postcss-loader": "^1.2.1",
     "postcss-mixins": "^5.0.0",
     "postcss-nested": "^1.0.0",
@@ -68,17 +70,21 @@
     "shelljs": "^0.7.4",
     "style-loader": "^0.13.1",
     "svg-inline-loader": "^0.6.1",
+    "ts-loader": "^3.5.0",
+    "typescript": "^3.4.5",
     "url-loader": "^0.5.7",
+    "vue": "^2.6.10",
     "vue-hot-reload-api": "^2.0.6",
     "vue-html-loader": "^1.2.3",
-    "vue-loader": "^10.0.2",
+    "vue-loader": "^12.0.3",
     "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.1.8",
-    "webpack": "^1.14.0",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^2.7.0",
     "webpack-bundle-analyzer": "^2.2.1",
     "webpack-hot-middleware": "^2.12.1"
   },
   "dependencies": {
+    "@wordpress/wordcount": "^2.2.0",
     "babel-runtime": "^6.11.6",
     "codemirror": "^5.17.0",
     "color-preset": "^0.1.1",
@@ -91,10 +97,8 @@
     "object-picker": "^0.2.0",
     "pify": "^2.3.0",
     "sanitize-html": "^1.13.0",
-    "tildify": "^1.2.0",
+    "sumchecker": "^2.0.1",
     "unique-random-array": "^1.0.0",
-    "vue": "^2.1.8",
-    "vuex": "^2.1.1",
-    "wordcount": "^1.1.1"
+    "vuex": "^2.1.1"
   }
 }
diff --git a/scripts/webpack.config.js b/scripts/webpack.config.js
@@ -16,17 +16,17 @@ const postcss = [
 
 module.exports = {
   entry: {
-    app: ['./src/index.js'],
+    app: './src/index.ts',
     vendor: ['vue', 'vuex']
   },
   output: {
-    path: process.cwd() + '/app/dist',
+    path: process.cwd() + '/app/libvue',
     filename: '[name].js'
   },
   resolve: {
-    extensions: ['', '.js', '.vue', '.css', '.json'],
+    extensions: ['.js', '.vue', '.css', '.json', '.ts'],
     alias: {
-      'vue$': 'vue/dist/vue.common.js',
+      'vue$': 'vue/dist/vue.esm.js',
       src: path.join(__dirname, '../src'),
       utils: path.join(__dirname, '../src/utils'),
       components: path.join(__dirname, '../src/components'),
@@ -36,48 +36,52 @@ module.exports = {
     }
   },
   module: {
-    loaders: [
+    rules: [
       {
-        test: /\.js$/,
-        loaders: ['babel'],
-        exclude: [/node_modules/]
+        test: /\.tsx?$/,
+        loaders: 'ts-loader',
+        exclude: /node_modules/,
+        options: {
+          appendTsSuffixTo: [/\.vue$/],
+        }
       },
       {
         test: /\.vue$/,
-        loaders: ['vue']
+        loader: 'vue-loader',
+        options: {
+          autoprefixer: false,
+          postcss,
+          loaders: {
+            css: ExtractTextPlugin.extract({
+              fallback: 'vue-style-loader',
+              loader: 'css-loader?sourceMap'
+            }
+            )
+          }
+        }
       },
       {
-        test: /\.css$/,
-        loader: ExtractTextPlugin.extract(
-          'style-loader',
-          'css-loader!postcss-loader'
-        )
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
       },
       {
-        test: /\.json$/,
-        loaders: ['json']
+        test: /\.svg$/,
+        exclude: /node_modules/,
+        loader: 'svg-inline-loader'
       },
       {
-        test: /\.svg$/,
-        loaders: ['svg-inline']
-      }
-    ]
-  },
-  babel: {
-    presets: ['es2015', 'stage-1'],
-    plugins: ['transform-runtime']
-  },
-  vue: {
-    autoprefixer: false,
-    postcss,
-    loaders: {
-      css: ExtractTextPlugin.extract(
-        'vue-style-loader',
-        'css-loader?sourceMap'
-      )
-    }
+        test: /\.css$/,
+        exclude: /node_modules/,
+        loader: ExtractTextPlugin.extract(
+          {
+            fallback: 'style-loader',
+            loader: 'css-loader!postcss-loader'
+          }
+        )
+      },
+    ],
   },
-  postcss,
   target: 'electron-renderer',
   plugins: [
     new webpack.ExternalsPlugin('commonjs2', [
@@ -89,5 +93,7 @@ module.exports = {
       name: 'vendor',
       filename: 'vendor.js'
     })
-  ]
+  ],
+
+  devtool: '#eval-source-map'
 }
diff --git a/scripts/webpack.config.prod.js b/scripts/webpack.config.prod.js
@@ -3,8 +3,8 @@ const webpack = require('webpack')
 const config = require('./webpack.config')
 
 config.plugins = config.plugins.concat([
-  new webpack.optimize.OccurenceOrderPlugin(),
   new webpack.optimize.UglifyJsPlugin({
+    sourceMap: true,
     compressor: {
       warnings: false
     },

diff --git a/src/components/footer.vue b/src/components/footer.vue
@@ -114,22 +114,24 @@
   </footer>
 </template>
 
-<script>
-  import tildify from 'tildify'
-  import {shell} from 'electron'
-  import wordCount from 'wordcount'
+<script lang='ts'>
+  import Vue from "vue";
 
-  import WritingModes from 'components/writing-modes'
+  import {shell} from 'electron';
 
-  export default {
+  import countTabContent from 'utils/wordcount';
+  import tildify from 'utils/tildify';
+  import WritingModes from 'components/writing-modes';
+
+  export default Vue.extend ({
     computed: {
       currentTabIndex() {
-        return this.$store.state.editor.currentTabIndex
+        return this.$store.state.editor.currentTabIndex;
       },
       status() {
-        const tab = this.$store.state.editor.tabs[this.$store.state.editor.currentTabIndex] || {}
+        const tab = this.$store.state.editor.tabs[this.$store.state.editor.currentTabIndex] || {};
         return {
-          wordCount: tab.content ? wordCount(tab.content) : 0,
+          wordCount: tab.content ? countTabContent(tab.content) : 0,
           charCount: tab.content ? tab.content.length : 0,
           lineCount: (tab.content && tab.editor) ? tab.editor.lineCount() : 0,
           filePath: tab.filePath ?
@@ -139,19 +141,19 @@
           pdf: tab.pdf,
           gist: tab.gist,
           exporting: tab.exporting
-        }
+        };
       }
     },
     methods: {
-      openPDF(pdf) {
-        shell.showItemInFolder(pdf)
+      openPDF(pdf: string) {
+        shell.showItemInFolder(pdf);
       },
-      openURL(id) {
-        shell.openExternal(`https://gist.github.com/${id}`)
+      openURL(id: string) {
+        shell.openExternal(`https://gist.github.com/${id}`);
       }
     },
     components: {
       WritingModes
     }
-  }
+  });
 </script>