Typescript-Vue

examples/typescript-vue/README.md

@@ -0,0 +1,57 @@
+# Vue.js + Typescript + Vuex • [TodoMVC](http://todomvc.com)
+
+> The Progressive JavaScript Framework
+
+> Javascript that scales
+
+
+## Resources
+
+To work with Typescript those npm package were really usefull:
+
+- [Vue-class-component](https://github.com/vuejs/vue-class-component)
+- [Vue-property-decorator](https://github.com/kaorun343/vue-property-decorator)
+- [Vuex-class](https://github.com/ktsn/vuex-class)
+
+
+*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*
+
+
+## Implementation
+
+TodoMVC written in Vue 2.5, Webpack 3, Typescript 2.6 and Vuex.
+
+The app was written from the TodoMVC Vue.js app by Evan You.
+I splited the app between components and put all the logic inside the Vuex store management!
+
+## To discover more
+
+* [Components](https://github.com/victorgarciaesgi/Vue-Typescript-TodoMvc/tree/master/src/components)
+* [Webpack config](https://github.com/victorgarciaesgi/Vue-Typescript-TodoMvc/tree/master/config)
+* [Vuex module](https://github.com/victorgarciaesgi/Vue-Typescript-TodoMvc/blob/master/src/store/TodoStore.ts)
+
+## Credit
+
+Created by [Victor Garcia](http://garciavictor.fr)
+
+# Installation
+
+```bash
+$ npm install
+```
+
+```
+$ yarn
+```
+
+## Development
+
+```bash
+npm run dev
+```
+
+## Production build
+
+```bash
+npm run prod
+```

examples/typescript-vue/Server.js

@@ -0,0 +1,33 @@
+const express = require('express');
+const morgan = require('morgan');
+const path = require('path');
+const fs = require('fs')
+
+const app = express();
+const PORT = process.env.PORT || 7000;
+
+
+app.use(morgan('tiny'));
+app.get('*.js', function (req, res, next) {
+  if (process.env.NODE_ENV === 'production'){
+
+    var url = req.url + '.gz';
+    if (fs.existsSync(`./dist${url}`)){
+      req.url = url;
+      res.set('Content-Encoding', 'gzip');
+    }
+
+    //Renvoie le fichier js zippé en production
+  }
+  next();
+});
+
+app.use(express.static(path.resolve(__dirname ,'dist')));
+
+app.get('/*', (req, res) => {
+  res.sendFile(path.resolve(__dirname, './dist/index.html'));
+});
+
+app.listen(PORT, () => {
+  console.log(`App listening on port ${PORT}`);
+});

examples/typescript-vue/config/helpers.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+const ROOT = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [ROOT].concat(args));
+}
+
+exports.root = root;

examples/typescript-vue/config/webpack.config.base.js

@@ -0,0 +1,86 @@
+const path = require('path');
+const helpers = require('./helpers');
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const baseConfig = {
+  entry: {
+    'bundle': helpers.root('/src/main.ts')
+  },
+  output: {
+    filename: '[name].js',
+    publicPath: '/',
+    path: helpers.root('dist')
+  },
+  resolve: {
+    extensions: [
+      '.ts', '.js', '.vue',
+    ],
+    alias: {
+      '@components': helpers.root('src/components/index.ts'),
+      '@src': helpers.root('src'),
+      '@icons': helpers.root('src/assets/icons'),
+      '@images': helpers.root('src/assets/images'),
+      '@fonts': helpers.root('src/assets/fonts'),
+      '@views': helpers.root('src/components/views/index.ts'),
+      '@validators': helpers.root('src/utils/validators.ts'),
+      '@methods': helpers.root('src/utils/methods.ts'),
+      '@filters': helpers.root('src/utils/filters.ts'),
+      '@types': helpers.root('src/typings/index.ts'),
+      '@store': helpers.root('src/store/index.ts'),
+    }
+  },
+  module: {
+    rules: [{
+      test: /\.vue$/,
+      use: {
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            scss: ['vue-style-loader', 'css-loader', 'postcss-loader', 'sass-loader', {
+              loader: 'sass-resources-loader',
+              options: {
+                resources: helpers.root('src/styles/variables.scss'),
+                esModule: true
+              }
+            }],
+            ts: 'ts-loader',
+          }
+        }
+      }
+    }, {
+      test: /\.ts$/,
+      exclude: /node_modules/,
+      loader: 'ts-loader',
+      options: {
+        appendTsSuffixTo: [/\.vue$/],
+      }
+    }]
+  },
+  plugins: [
+    new FaviconsWebpackPlugin({
+      logo: helpers.root('src/assets/images/logo.png'),
+      prefix: 'icons-[hash]/',
+      persistentCache: true,
+      inject: true,
+      background: '#fff',
+      icons: {
+        android: false,
+        appleIcon: false,
+        appleStartup: false,
+        coast: false,
+        favicons: true,
+        firefox: false,
+        opengraph: false,
+        twitter: false,
+        yandex: false,
+        windows: false
+      }
+    }),
+    new CopyWebpackPlugin([{
+      from: helpers.root('src/assets')
+    }])
+  ],
+};
+
+module.exports = baseConfig;

examples/typescript-vue/config/webpack.config.dev.js

@@ -0,0 +1,73 @@
+const webpackBaseConfig = require('./webpack.config.base');
+const env = require('../environment/dev.env');
+const webpack = require('webpack')
+const path = require('path');
+const helpers = require('./helpers');
+const merge = require('webpack-merge')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
+const autoprefixer = require('autoprefixer');
+
+const webpackDevConfig = {
+  module: {
+    rules: [{
+      test: /\.s?css$/,
+      use: [{
+        loader: 'style-loader'
+      }, {
+        loader: 'css-loader',
+        options: {
+          minimize: false,
+          sourceMap: true,
+          importLoaders: 2
+        }
+      }, {
+        loader: 'postcss-loader',
+        options: {
+          plugins: () => [autoprefixer],
+          sourceMap: true
+        }
+      }, {
+        loader: 'sass-loader',
+        options: {
+          outputStyle: 'expanded',
+          sourceMap: true,
+          sourceMapContents: true
+        }
+      }
+      ],
+    }, {
+      test: /\.(jpe?g|png|ttf|eot|svg|ico|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+      use: 'base64-inline-loader?limit=1000&name=[name].[ext]'
+    }]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: helpers.root('/src/index.html'),
+      filename: 'index.html'
+    }),
+    new DefinePlugin({
+      'process.env': env
+    }),
+    new FriendlyErrorsPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(),
+    new webpack.NoEmitOnErrorsPlugin()
+  ],
+  devServer: {
+    contentBase: path.join(__dirname, "dist"),
+    port: 7000,
+    historyApiFallback: true,
+    hot: true,
+    quiet: true,
+    open: true,
+    inline: true
+  },
+  devtool: 'cheap-module-eval-source-map'
+}
+
+const devExport = merge(webpackBaseConfig, webpackDevConfig);
+
+module.exports = devExport;

examples/typescript-vue/config/webpack.config.prod.js

@@ -0,0 +1,126 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const autoprefixer = require('autoprefixer');
+const webpackConfig = require('./webpack.config.base');
+const helpers = require('./helpers');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
+const env = require('../environment/prod.env');
+
+const extractSass = new ExtractTextPlugin({
+  filename: 'css/[name].[contenthash].css',
+  disable: process.env.NODE_ENV === 'development'
+});
+
+
+
+const configProd = {
+  output: {
+    filename: "[name].[hash].js",
+    chunkFilename: "[id].[hash].js"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.s?css$/,
+        use: extractSass.extract({
+          use: [{
+            loader: 'css-loader',
+            options: {
+              minimize: true,
+              importLoaders: 2
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [autoprefixer]
+            }
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              outputStyle: 'compressed',
+              sourceMap: false,
+              sourceMapContents: false
+            }
+          }
+          ],
+          fallback: 'style-loader'
+        })
+      }, {
+        test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+        use: 'base64-inline-loader?limit=1000&name=[name].[ext]'
+      }
+    ]
+  },
+  plugins: [
+    new DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      include: /\.js$/,
+      mangle: { keep_fnames: false, screw_ie8: true },
+      compress: { keep_fnames: false, screw_ie8: true, warnings: false },
+      sourceMap: false,
+      removeComments: true,
+      beautify: false
+    }),
+    extractSass,
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: helpers.root('/src/index.html'),
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeRedundantAttributes: true,
+        useShortDoctype: true,
+        removeEmptyAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        keepClosingSlash: true,
+        minifyJS: true,
+        minifyCSS: true,
+        minifyURLs: true
+      },
+      chunksSortMode: 'dependency',
+    }),
+
+    new webpack.HashedModuleIdsPlugin(),
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+    new CompressionPlugin({
+      asset: "[path].gz[query]",
+      algorithm: "gzip",
+      test: /\.js$/,
+      threshold: 10240,
+      minRatio: 0.8
+    }),
+  ]
+}
+
+  module.exports = merge(webpackConfig, configProd);