├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── build └── webpack.release.js ├── example ├── App.vue └── main.js ├── index.html ├── lib ├── index.js ├── twttr.js └── twttr.vue ├── package.json ├── postcss.config.js ├── src ├── index.js ├── twttr.js └── twttr.vue └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime", "syntax-dynamic-import"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["transform-vue-jsx", "istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | /test/unit/coverage/ 6 | /src/ali/* 7 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/strongly-recommended', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | /test/unit/coverage/ 8 | /test/e2e/reports/ 9 | selenium-debug.log 10 | 11 | # Editor directories and files 12 | .idea 13 | .vscode 14 | *.suo 15 | *.ntvs* 16 | *.njsproj 17 | *.sln -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | .idea/ 6 | .vscode/ 7 | build/ 8 | dist/ 9 | .babelrc 10 | .editorconfig 11 | .eslintignore 12 | .eslintrc 13 | webpack.config.js 14 | README.md 15 | *.map 16 | examples 17 | test/ 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Shakeeb Sadikeen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## vue-twitter 2 | 3 | Downloads 4 | Version 5 | License 6 | 7 | ### Install 8 | 9 | ``` 10 | npm install vue-twitter 11 | ``` 12 | 13 | ### Usage 14 | 15 | ```js 16 | import Vue from 'vue' 17 | import twitter from 'vue-twitter' 18 | 19 | Vue.use(twitter) 20 | ``` 21 | 22 | ```vue.js 23 | 28 | ``` 29 | 30 | *notice* 31 | 32 | `loading ..... 42 | Tweets by realDonaldTrump 43 | 44 | 45 | ``` 46 | 47 | ### Others 48 | 49 | #### use as component(use vue-loader) 50 | 51 | ``` 52 | import { twitter } from 'vue-twitter' 53 | export default { 54 | components: { 55 | twitter 56 | } 57 | } 58 | ``` 59 | 60 | #### use as component(need template complier on Vue-cli3) 61 | 62 | ``` 63 | import twitter from 'vue-twitter/lib/twttr.js' 64 | export default { 65 | components: { 66 | twitter 67 | } 68 | } 69 | ``` 70 | -------------------------------------------------------------------------------- /build/webpack.release.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | 4 | const resolve = dir => path.join(__dirname, '..', dir) 5 | 6 | module.exports = { 7 | entry: { 8 | 'index' : './src/index.js', 9 | 'index.min' : './src/index.js' 10 | }, 11 | output: { 12 | path: path.resolve('./lib'), 13 | publicPath: '/', 14 | filename: '[name].js', 15 | libraryTarget: 'umd' 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.(js|vue)$/, 21 | loader: 'eslint-loader', 22 | enforce: 'pre', 23 | include: [resolve('src'), resolve('test')], 24 | options: { 25 | formatter: require('eslint-friendly-formatter'), 26 | emitWarning: true 27 | } 28 | }, 29 | { 30 | test: /\.vue$/, 31 | loader: 'vue-loader', 32 | options: { 33 | loaders: { 34 | 'scss': 'vue-style-loader!css-loader!postcss-loader!sass-loader', 35 | 'sass': 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax' 36 | } 37 | // other vue-loader options go here 38 | } 39 | }, 40 | { 41 | test: /\.js$/, 42 | loader: 'babel-loader', 43 | exclude: /node_modules/ 44 | }, 45 | { 46 | test: /\.(png|jpg|gif|svg)$/, 47 | loader: 'file-loader', 48 | options: { 49 | name: '[name].[ext]?[hash]' 50 | } 51 | } 52 | ] 53 | }, 54 | resolve: { 55 | alias: { 56 | 'vue$': 'vue/dist/vue.esm.js' 57 | } 58 | }, 59 | devServer: { 60 | historyApiFallback: true, 61 | noInfo: true 62 | }, 63 | performance: { 64 | hints: false 65 | }, 66 | devtool: '#source-map' 67 | } 68 | 69 | if (process.env.NODE_ENV === 'production') { 70 | module.exports.devtool = '#source-map' 71 | // http://vue-loader.vuejs.org/en/workflow/production.html 72 | module.exports.plugins = (module.exports.plugins || []).concat([ 73 | new webpack.DefinePlugin({ 74 | 'process.env': { 75 | NODE_ENV: '"production"' 76 | } 77 | }), 78 | new webpack.optimize.UglifyJsPlugin({ 79 | include: /\.min\.js$/, 80 | sourceMap: false, 81 | compress: { warnings: false }, 82 | comments: false, 83 | }), 84 | new webpack.ProvidePlugin({}), 85 | new webpack.LoaderOptionsPlugin({ 86 | minimize: true 87 | }) 88 | ]) 89 | } 90 | -------------------------------------------------------------------------------- /example/App.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 56 | -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'Vue' 2 | import App from './App.vue' 3 | import twitter from '../src' 4 | 5 | Vue.config.productionTip = false 6 | Vue.use(twitter) 7 | 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: '#app', 11 | render: h => h(App), 12 | template: '', 13 | components: {App} 14 | }) 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.twitter = undefined; 7 | 8 | var _twttr = require('./twttr.vue'); 9 | 10 | var _twttr2 = _interopRequireDefault(_twttr); 11 | 12 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 13 | 14 | exports.default = { 15 | install: function install(Vue) { 16 | Vue.component('twitter', _twttr2.default); 17 | } 18 | }; 19 | exports.twitter = _twttr2.default; -------------------------------------------------------------------------------- /lib/twttr.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _vueScript = require('vue-script2'); 8 | 9 | var _vueScript2 = _interopRequireDefault(_vueScript); 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12 | 13 | exports.default = { 14 | template: '
', 15 | data: function data() { 16 | return { 17 | installed: !!window.twttr, 18 | ready: false 19 | }; 20 | }, 21 | mounted: function mounted() { 22 | this.install(); 23 | }, 24 | 25 | methods: { 26 | install: function install() { 27 | var _this = this; 28 | 29 | if (!this.installed) { 30 | // install 31 | _vueScript2.default.load('https://platform.twitter.com/widgets.js').then(function () { 32 | _this.installed = true; 33 | _this.$nextTick(function () { 34 | _this.init(); 35 | _this.$emit('installed'); 36 | }); 37 | }).catch(function (err) { 38 | console.error(err); 39 | _this.$emit('err', err); 40 | }); 41 | } else { 42 | this.init(); 43 | } 44 | }, 45 | init: function init() { 46 | var _this2 = this; 47 | 48 | this.$nextTick(function () { 49 | window.twttr.widgets.load().then(function () { 50 | _this2.ready = true; 51 | _this2.$emit('ready'); 52 | }).catch(function (err) { 53 | console.error(err); 54 | _this2.$emit('err', err); 55 | }); 56 | }); 57 | } 58 | } 59 | }; -------------------------------------------------------------------------------- /lib/twttr.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-twitter", 3 | "description": "twitter widgets for Vue.js", 4 | "version": "0.1.0", 5 | "author": "+v ", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/chiaweilee/vue-twitter.git" 9 | }, 10 | "main": "./lib/index.js", 11 | "module": "src/index.js", 12 | "scripts": { 13 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 14 | "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress --hide-modules", 15 | "build-watch": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress --hide-modules --watch", 16 | "release": "npm run build", 17 | "es5": "babel src --presets babel-preset-es2015 --out-dir lib", 18 | "lint": "eslint --ext .js,.vue src example --fix" 19 | }, 20 | "keywords": [], 21 | "dependencies": { 22 | "vue-script2": "^2.0.3" 23 | }, 24 | "devDependencies": { 25 | "animejs": "^2.0.2", 26 | "autoprefixer": "^7.1.3", 27 | "babel-cli": "^6.23.0", 28 | "babel-core": "^6.0.0", 29 | "babel-eslint": "^8.2.3", 30 | "babel-loader": "^6.0.0", 31 | "babel-preset-es2015": "^6.22.0", 32 | "babel-preset-latest": "^6.0.0", 33 | "babel-preset-stage-0": "^6.24.1", 34 | "babel-preset-stage-1": "^6.24.1", 35 | "babel-preset-stage-2": "^6.24.1", 36 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 37 | "babel-plugin-istanbul": "^4.1.6", 38 | "babel-plugin-syntax-jsx": "^6.18.0", 39 | "babel-plugin-transform-runtime": "^6.23.0", 40 | "babel-plugin-transform-vue-jsx": "^3.7.0", 41 | "babel-preset-env": "^1.7.0", 42 | "babel-register": "^6.26.0", 43 | "cross-env": "^3.0.0", 44 | "css-loader": "^0.25.0", 45 | "es6-object-assign": "^1.1.0", 46 | "eslint": "^4.19.1", 47 | "eslint-config-standard": "^11.0.0", 48 | "eslint-friendly-formatter": "^4.0.1", 49 | "eslint-loader": "^2.0.0", 50 | "eslint-plugin-import": "^2.12.0", 51 | "eslint-plugin-node": "^6.0.1", 52 | "eslint-plugin-promise": "^3.8.0", 53 | "eslint-plugin-standard": "^3.1.0", 54 | "eslint-plugin-vue": "^4.5.0", 55 | "extract-text-webpack-plugin": "^2.1.2", 56 | "file-loader": "^0.9.0", 57 | "friendly-errors-webpack-plugin": "^1.7.0", 58 | "hammerjs": "^2.0.8", 59 | "html-webpack-plugin": "^3.2.0", 60 | "jasmine": "^2.5.3", 61 | "jasmine-core": "^2.5.2", 62 | "karma": "^1.5.0", 63 | "karma-chrome-launcher": "^2.0.0", 64 | "karma-jasmine": "^1.1.0", 65 | "karma-mocha": "^1.3.0", 66 | "karma-requirejs": "^1.1.0", 67 | "mocha": "^3.2.0", 68 | "node-sass": "^4.5.0", 69 | "postcss-loader": "^2.1.5", 70 | "requirejs": "^2.3.3", 71 | "sass-loader": "^6.0.7", 72 | "shortid": "^2.2.8", 73 | "style-loader": "^0.18.2", 74 | "transform-runtime": "^0.0.0", 75 | "vue": "^2.5.16", 76 | "vue-loader": "^11.0.0", 77 | "vue-style-loader": "^3.0.3", 78 | "vue-template-compiler": "^2.2.1", 79 | "webpack": "^2.2.0", 80 | "webpack-bundle-analyzer": "^2.3.1", 81 | "webpack-dev-server": "^2.2.0" 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const autoprefixer = require('autoprefixer') 2 | 3 | module.exports = { 4 | plugins: [ 5 | autoprefixer({browsers: ['last 7 versions']}) 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import twitter from './twttr.vue' 2 | 3 | export default { 4 | install: function (Vue) { 5 | Vue.component('twitter', twitter) 6 | } 7 | } 8 | 9 | export { 10 | twitter 11 | } 12 | -------------------------------------------------------------------------------- /src/twttr.js: -------------------------------------------------------------------------------- 1 | import VueScript2 from 'vue-script2' 2 | export default { 3 | template: '
', 4 | data () { 5 | return { 6 | installed: !!window.twttr, 7 | ready: false 8 | } 9 | }, 10 | mounted () { 11 | this.install() 12 | }, 13 | methods: { 14 | install () { 15 | if (!this.installed) { 16 | // install 17 | VueScript2.load('https://platform.twitter.com/widgets.js') 18 | .then(() => { 19 | this.installed = true 20 | this.$nextTick(() => { 21 | this.init() 22 | this.$emit('installed') 23 | }) 24 | }) 25 | .catch(err => { 26 | console.error(err) 27 | this.$emit('err', err) 28 | }) 29 | } else { 30 | this.init() 31 | } 32 | }, 33 | init () { 34 | this.$nextTick(() => { 35 | window.twttr.widgets.load() 36 | .then(() => { 37 | this.ready = true 38 | this.$emit('ready') 39 | }) 40 | .catch(err => { 41 | console.error(err) 42 | this.$emit('err', err) 43 | }) 44 | }) 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/twttr.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 55 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 5 | 6 | const resolve = dir => path.join(__dirname, '..', dir) 7 | 8 | module.exports = { 9 | entry: { 10 | app : './example/main.js' 11 | }, 12 | output: { 13 | path: path.resolve(__dirname, './lib'), 14 | publicPath: '/', 15 | filename: '[name].js', 16 | libraryTarget: 'umd' 17 | }, 18 | resolve: { 19 | alias: { 20 | 'vue$': 'vue/dist/vue.esm.js' 21 | } 22 | }, 23 | module: { 24 | loaders: [ 25 | { 26 | test: /\.scss/, 27 | loader: 'style-loader!css-loader!sass-loader' 28 | }, 29 | { 30 | test: /\.css$/, 31 | loader: 'style-loader!css-loader!postcss-loader' 32 | } 33 | ], 34 | rules: [ 35 | { 36 | test: /\.(js|vue)$/, 37 | loader: 'eslint-loader', 38 | enforce: 'pre', 39 | include: [resolve('src'), resolve('test')], 40 | options: { 41 | formatter: require('eslint-friendly-formatter'), 42 | emitWarning: true 43 | } 44 | }, 45 | { 46 | test: /\.vue$/, 47 | loader: 'vue-loader', 48 | options: { 49 | loaders: { 50 | 'scss': 'vue-style-loader!css-loader!postcss-loader!sass-loader', 51 | 'sass': 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax' 52 | } 53 | // other vue-loader options go here 54 | } 55 | }, 56 | { 57 | test: /\.js$/, 58 | loader: 'babel-loader', 59 | exclude: /node_modules/ 60 | }, 61 | { 62 | test: /\.(png|jpg|gif|svg)$/, 63 | loader: 'file-loader', 64 | options: { 65 | name: '[name].[ext]?[hash]' 66 | } 67 | } 68 | ] 69 | }, 70 | node: { 71 | // prevent webpack from injecting useless setImmediate polyfill because Vue 72 | // source contains it (although only uses it if it's native). 73 | setImmediate: false, 74 | // prevent webpack from injecting mocks to Node native modules 75 | // that does not make sense for the client 76 | dgram: 'empty', 77 | fs: 'empty', 78 | net: 'empty', 79 | tls: 'empty', 80 | child_process: 'empty' 81 | }, 82 | devServer: { 83 | clientLogLevel: 'warning', 84 | historyApiFallback: { 85 | rewrites: [ 86 | { from: /.*/, to: path.posix.join('/', 'index.html') }, 87 | ], 88 | }, 89 | hot: true, 90 | contentBase: false, // since we use CopyWebpackPlugin. 91 | compress: true, 92 | host: 'localhost', 93 | port: 8088, 94 | open: true, 95 | overlay: { warnings: false, errors: true }, 96 | publicPath: '/', 97 | proxy: {}, 98 | quiet: true, // necessary for FriendlyErrorsPlugin 99 | watchOptions: { 100 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 101 | } 102 | }, 103 | performance: { 104 | hints: false 105 | }, 106 | devtool: '#source-map', 107 | plugins: [ 108 | new webpack.DefinePlugin({ 109 | 'process.env': { 110 | NODE_ENV: '"development"' 111 | } 112 | }), 113 | new webpack.HotModuleReplacementPlugin(), 114 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 115 | new webpack.NoEmitOnErrorsPlugin(), 116 | // https://github.com/ampedandwired/html-webpack-plugin 117 | new HtmlWebpackPlugin({ 118 | filename: 'index.html', 119 | template: 'index.html', 120 | inject: true 121 | }), 122 | new FriendlyErrorsPlugin() 123 | ] 124 | } 125 | --------------------------------------------------------------------------------