├── .babelrc ├── .circleci └── config.yml ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .versionrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── build └── rollup.config.js ├── circle.yml ├── commitlint.config.js ├── husky.config.js ├── jest.config.js ├── package.json ├── src ├── VEmbed.vue └── entry.js ├── test ├── VEmbed.spec.js └── __snapshots__ │ └── VEmbed.spec.js.snap └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "test": { 4 | "presets": [ 5 | [ 6 | "@babel/preset-env", 7 | { 8 | "targets": { 9 | "node": "current" 10 | } 11 | } 12 | ] 13 | ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2.1 2 | jobs: 3 | build: 4 | docker: 5 | - image: circleci/node:latest 6 | steps: 7 | - checkout 8 | - run: yarn 9 | - run: yarn build 10 | test: 11 | docker: 12 | - image: circleci/node:latest 13 | steps: 14 | - checkout 15 | - run: yarn 16 | - run: yarn build 17 | - run: yarn test 18 | 19 | workflows: 20 | version: 2 21 | test_and_build: 22 | jobs: 23 | - test 24 | - build 25 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | extends: 'standard', 5 | parser: 'babel-eslint', 6 | }, 7 | env: { 8 | browser: true, 9 | jest: true, 10 | node: true, 11 | }, 12 | extends: [ 13 | 'airbnb-base', 14 | 'plugin:vue/strongly-recommended', 15 | 'prettier', 16 | 'prettier/vue', 17 | ], 18 | plugins: ['prettier', 'vue'], 19 | // add your custom rules here 20 | rules: { 21 | 'prettier/prettier': [ 22 | 'error', 23 | { singleQuote: true, trailingComma: 'es5', printWidth: 80 }, 24 | ], 25 | 'global-require': 0, 26 | 'import/no-dynamic-require': 0, 27 | 'import/extensions': [ 28 | 'error', 29 | 'always', 30 | { 31 | js: 'never', 32 | ts: 'never', 33 | vue: 'never', 34 | }, 35 | ], 36 | }, 37 | settings: { 38 | 'import/core-modules': ['vue', '@vue/test-utils'], 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | # Dist 40 | dist 41 | -------------------------------------------------------------------------------- /.versionrc: -------------------------------------------------------------------------------- 1 | { 2 | "types": [ 3 | { "type": "feat", "section": "Features" }, 4 | { "type": "fix", "section": "Bug Fixes" }, 5 | { "type": "chore", "section": "Chore" }, 6 | { "type": "docs", "section": "Documentation" }, 7 | { "type": "style", "section": "Styling" }, 8 | { "type": "refactor", "section": "Internal" }, 9 | { "type": "perf", "section": "Internal" }, 10 | { "type": "test", "section": "Internal"} 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [2.1.1](https://github.com/Gomah/vue-embed/compare/v2.1.0...v2.1.1) (2020-01-10) 6 | 7 | 8 | ### Chore 9 | 10 | * **deps:** upgrade dependencies ([3251586](https://github.com/Gomah/vue-embed/commit/325158601cf1d06873007bb3c8d71df17972d8c6)) 11 | * **deps-dev:** bump @babel/core from 7.6.4 to 7.7.4 ([65b2c3d](https://github.com/Gomah/vue-embed/commit/65b2c3d70136a946519139344c7e926a64a0e756)) 12 | * **deps-dev:** bump @babel/core from 7.7.4 to 7.7.7 ([d78847e](https://github.com/Gomah/vue-embed/commit/d78847ee75c26f28e3dd3e20ce7d23998dc8057d)) 13 | * **deps-dev:** bump @babel/preset-env from 7.6.3 to 7.7.4 ([0d4f177](https://github.com/Gomah/vue-embed/commit/0d4f177cb8994e5259a345afbae3b6f61f65b77b)) 14 | * **deps-dev:** bump @babel/preset-env from 7.7.4 to 7.7.7 ([fcaa93c](https://github.com/Gomah/vue-embed/commit/fcaa93c922fee0d2e38f6be1f1f1c82825f2b716)) 15 | * **deps-dev:** bump @vue/test-utils ([61e25bb](https://github.com/Gomah/vue-embed/commit/61e25bb99d95cb47a98317c3a112710a2a18c825)) 16 | * **deps-dev:** bump eslint from 6.6.0 to 6.7.2 ([5479cb1](https://github.com/Gomah/vue-embed/commit/5479cb17849029c41f075ba933d501376a3b6bcc)) 17 | * **deps-dev:** bump eslint from 6.7.2 to 6.8.0 ([7f13352](https://github.com/Gomah/vue-embed/commit/7f1335283d44145547a9577eb99b6a51ab1dca63)) 18 | * **deps-dev:** bump eslint-config-prettier from 6.5.0 to 6.7.0 ([2630224](https://github.com/Gomah/vue-embed/commit/2630224f60dedcf417dd44ba31412a7f7fefb110)) 19 | * **deps-dev:** bump eslint-config-prettier from 6.7.0 to 6.9.0 ([48c3e39](https://github.com/Gomah/vue-embed/commit/48c3e39c6d0bdb7bd9a9aeaa53696269db7d1d7c)) 20 | * **deps-dev:** bump eslint-import-resolver-webpack ([f50c8f6](https://github.com/Gomah/vue-embed/commit/f50c8f6604350534a3945fe2b8a50eceeb034ec9)) 21 | * **deps-dev:** bump eslint-loader from 3.0.2 to 3.0.3 ([a438a5f](https://github.com/Gomah/vue-embed/commit/a438a5f47f5f56dd7dbacaf42ceb7ff20ac792fb)) 22 | * **deps-dev:** bump eslint-plugin-import from 2.18.2 to 2.19.1 ([fb597c0](https://github.com/Gomah/vue-embed/commit/fb597c01afb0a6628e4ea5f51ec0fa0426be1fd7)) 23 | * **deps-dev:** bump eslint-plugin-prettier from 3.1.1 to 3.1.2 ([215e708](https://github.com/Gomah/vue-embed/commit/215e708aba04f6cf7775b6148e1e708bf879f45b)) 24 | * **deps-dev:** bump eslint-plugin-vue from 5.2.3 to 6.0.1 ([e46b33e](https://github.com/Gomah/vue-embed/commit/e46b33e40b6962cc62af2708f823d2e4c7ca6cd7)) 25 | * **deps-dev:** bump eslint-plugin-vue from 6.0.1 to 6.1.2 ([c0f8338](https://github.com/Gomah/vue-embed/commit/c0f83381649db2f066d576223957f3cfd7b97626)) 26 | * **deps-dev:** bump husky from 3.0.9 to 3.1.0 ([dd48dc8](https://github.com/Gomah/vue-embed/commit/dd48dc8e21382dad8aa6384d7f9066d42d669c05)) 27 | * **deps-dev:** bump prettier from 1.18.2 to 1.19.1 ([0129464](https://github.com/Gomah/vue-embed/commit/01294646247dde41191b8f8ab8a2bebf2e34e126)) 28 | * **deps-dev:** bump rollup from 1.23.1 to 1.25.2 ([9fc062c](https://github.com/Gomah/vue-embed/commit/9fc062c6eb976c82ac25e382415d78d7b50a2abb)) 29 | * **deps-dev:** bump rollup from 1.26.2 to 1.27.14 ([4ad4cdc](https://github.com/Gomah/vue-embed/commit/4ad4cdca5e5a8bbfe84f3dd46e03fc5ddd47a51a)) 30 | * **deps-dev:** bump rollup-plugin-terser from 5.1.2 to 5.1.3 ([a94b63d](https://github.com/Gomah/vue-embed/commit/a94b63d1c5f82c531743479956610a80a20f0fb6)) 31 | * **deps-dev:** bump rollup-plugin-vue from 5.1.2 to 5.1.4 ([6a37b7a](https://github.com/Gomah/vue-embed/commit/6a37b7ab0dfe123654ca465f49c4a7ec62e4b2d5)) 32 | * **deps-dev:** bump standard-version from 7.0.0 to 7.0.1 ([36258de](https://github.com/Gomah/vue-embed/commit/36258de2ef22919cea86b9d40f159f7eb1d18fa7)) 33 | * **deps-dev:** bump typescript from 3.6.4 to 3.7.2 ([0308c14](https://github.com/Gomah/vue-embed/commit/0308c14d8ef7a61b5b44128b145475c84b177eec)) 34 | * **deps-dev:** bump typescript from 3.7.2 to 3.7.4 ([4ad4072](https://github.com/Gomah/vue-embed/commit/4ad407222beda94b919cec213d750235a246212e)) 35 | * **deps-dev:** bump vue from 2.6.10 to 2.6.11 ([bf73593](https://github.com/Gomah/vue-embed/commit/bf73593930214df358acaef6c3d70d0a52f7da36)) 36 | * **deps-dev:** upgrade dependencies ([45d846b](https://github.com/Gomah/vue-embed/commit/45d846be63a082cf05f89e248d1513d9fd737003)) 37 | * **dist:** commit published dist ([36070bc](https://github.com/Gomah/vue-embed/commit/36070bc625c57425de841732021a5de6039433da)) 38 | 39 | ## [2.1.0](https://github.com/Gomah/vue-embed/compare/v1.0.0...v2.1.0) (2019-10-13) 40 | 41 | 42 | ### Features 43 | 44 | * **v2:** prepare v2, using embed-js v5 ([08300bb](https://github.com/Gomah/vue-embed/commit/08300bb833c02bc07e7e0b78baf5be0d9020622a)) 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Thomas Marrec 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-embed 2 | 3 | Embed component is based on [embed.js](https://github.com/ritz078/embed.js) for Vue 2.x. 4 | 5 | > Embed.js is a lightweight JavaScript plugin to embed emojis, media, maps, tweets, code and services. 6 | 7 | [![circle-ci][circle-src]][circle-href] 8 | [![npm version][npm-version-src]][npm-version-href] 9 | [![Dependencies][david-dm-src]][david-dm-href] 10 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 11 | [![code style: prettier](https://img.shields.io/badge/code_style-airbnb/prettier-FF5A5F.svg?style=flat-square)](https://github.com/airbnb/javascript) 12 | [![License: MIT](https://img.shields.io/badge/License-MIT-black.svg?style=flat-square)](https://opensource.org/licenses/MIT) 13 | 14 | --- 15 | 16 | ## Installation 17 | 18 | ```bash 19 | # yarn 20 | $ yarn add vue-embed 21 | 22 | # npm 23 | $ npm install vue-embed --save 24 | ``` 25 | 26 | ## Example 27 | 28 | ```vue 29 | 38 | 39 | 56 | ``` 57 | 58 | ## Options 59 | 60 | | option | default | Description | 61 | | --------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | 62 | | **plugins** | [] | Accepts an array of plugins. See below | 63 | | **preset** | null | Accepts a preset. Currently accpets only one preset. It can be combined with plugins. | 64 | | **inlineEmbed** | true | If case you want to to embed contents at the end of texts, turn this to false. | 65 | | **replaceUrl** | false | Useful when **inlineEmbed** is set to true. Replace text with the embed. | 66 | | **fetch** | `window.fetch` or `window.unfetch` | If you are willing to use the library on both server and client side you need to pass an isomorphic fetch library like [isomorphic-unfetch](https://github.com/developit/unfetch/tree/master/packages/isomorphic-unfetch) or [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch). This is only needed if you are using a plugin that has to make a HTTP request. | 67 | 68 | ### Plugins 69 | 70 | #### [url](https://github.com/ritz078/embed-js/tree/v5/packages/embed-plugin-url) 71 | 72 | > A plugin that can be used to parse urls into anchor tags. 73 | 74 | ```vue 75 | 99 | ``` 100 | 101 | Note : Avoid using `escape: true` when using with the _highlight_ plugin. 102 | 103 | #### [emoji](https://github.com/ritz078/embed-js/tree/v5/packages/embed-plugin-emoji) 104 | 105 | > A plugin that can be used to convert :emoji_name: to actual emojis. 106 | 107 | It supports all the emojis supported by [emoji.css](https://github.com/IonicaBizau/emoji.css). If you are using this plugin, you need to load 108 | 109 | ```vue 110 | 136 | ``` 137 | 138 | Known issue : It doesn't check if a particular name is a valid emoji name. So if you use a test like :not_valid_emoji_name:, it will still convert it to a span element with that class name. 139 | 140 | You also need to import the embed css file : 141 | 142 | ```html 143 | 148 | ``` 149 | 150 | #### [Media](https://github.com/ritz078/embed-js/tree/v5/packages/embed-plugin-media) 151 | 152 | > A plugin that can be used to embed video, audio or image those are supported by the browser. 153 | 154 | ```vue 155 | 182 | ``` 183 | 184 | #### [Highlight](https://github.com/ritz078/embed-js/tree/v5/packages/embed-plugin-highlight) 185 | 186 | > A plugin that can be used to syntax highlight code. 187 | 188 | You need [Prism.js ](http://prismjs.com/) to use this plugins. So import the necessary libraries to support it. 189 | 190 | ```html 191 | 192 | 193 | 194 | 195 | 229 | ``` 230 | 231 | #### [Github](https://github.com/ritz078/embed-js/tree/v5/packages/embed-plugin-github) 232 | 233 | > A plugin that can be used to embed GitHub repo description. 234 | 235 | ```vue 236 | 262 | ``` 263 | 264 | When you click on the link URL, it redirects you to the repo URL. 265 | 266 | #### [Youtube](https://github.com/ritz078/embed-js/tree/v5/packages/embed-plugin-youtube) 267 | 268 | > A plugin that can be used to embed Youtube videos. 269 | 270 | This embeds youtube videos in the page. This plugin supports two mode controlled by the option `details`. 271 | 272 | - [Example with Details](https://codepen.io/ritz078/pen/JyyPjq) 273 | - [Example without Details](https://codepen.io/ritz078/pen/qXXWde) 274 | 275 | ```vue 276 | 319 | ``` 320 | 321 | #### [Facebook](https://github.com/ritz078/embed-js/tree/v5/packages/embed-plugin-facebook) 322 | 323 | > A plugin that can be used to embed facebook posts/videos. 324 | 325 | ```vue 326 | 352 | ``` 353 | 354 | When you click on the link URL, it redirects you to the post URL. 355 | 356 | #### [Map](https://github.com/ritz078/embed-js/tree/v5/packages/embed-plugin-map) 357 | 358 | > A plugin that can be used to embed Google map for a location. 359 | 360 | ```vue 361 | 390 | ``` 391 | 392 | Default pattern to embed a location is `@(locationName)`. You can change this by passing a custom regex. 393 | 394 | #### [NoEmbed](https://github.com/ritz078/embed-js/tree/v5/packages/embed-plugin-noembed) 395 | 396 | > A plugin that can be used to embed selected services supported by NoEmbed. 397 | 398 | ### Supported Services 399 | 400 | - AmCharts 401 | - CollegeHumor 402 | - DailyMotion 403 | - DeviantArt 404 | - DotSub 405 | - Dropbox 406 | - Flickr 407 | - Gfycat 408 | - Giphy 409 | - Hulu 410 | - Imgur 411 | - Kickstarter 412 | - Mixcloud 413 | - NyTimes 414 | - Reddit 415 | - Screen9 416 | - Scribd 417 | - SlideShare 418 | - Smugmug 419 | - SoundCloud 420 | - SpeakerDeck 421 | - Ted 422 | - Twitch 423 | - Twitter 424 | - Ustream 425 | - VeerVR 426 | - Vevo 427 | - Vimeo 428 | - Vine 429 | - Wikimedia 430 | - YouTube 431 | 432 | ```vue 433 | 464 | ``` 465 | 466 | #### [Twitter](https://github.com/ritz078/embed-js/tree/v5/packages/embed-plugin-twitter) 467 | 468 | > A plugin that can be used to embed tweets. 469 | 470 | Embeds Tweets in the website. You need to load https://platform.twitter.com/widgets.js in advance to get this working. 471 | 472 | ```vue 473 | 554 | ``` 555 | 556 | **Note** : The twitter embed functionality provided by **embed-plugin-noembed** doesn't provide this much customization. So if you willing to use this plugin for tweet embedding along with noembed plugin, make sure you disable twitter embedding in the latter by passing `exclude: ['twitter']` in it. 557 | 558 | #### [Instagram](https://github.com/ritz078/embed-js/tree/v5/packages/embed-plugin-instagram) 559 | 560 | > A plugin that can be used to embed instagram posts. 561 | 562 | Embeds Tweets in the website. You need to load https://platform.twitter.com/widgets.js in advance to get this working. 563 | 564 | ```vue 565 | 591 | ``` 592 | 593 | When you click on the link URL, it redirects you to the post URL. 594 | 595 | --- 596 | 597 | ## 📑 License 598 | 599 | [MIT License](./LICENSE) 600 | 601 | --- 602 | 603 | [Embed.js Documentation](https://embedjs.readme.io/) 604 | 605 | 606 | 607 | [npm-version-src]: https://img.shields.io/npm/dt/vue-embed.svg?style=flat-square 608 | [npm-version-href]: https://npmjs.com/package/vue-embed 609 | [circle-src]: https://circleci.com/gh/Gomah/vue-embed.svg?style=shield 610 | [circle-href]: https://circleci.com/gh/Gomah/vue-embed 611 | [npm-downloads-src]: https://img.shields.io/npm/v/vue-embed/latest.svg?style=flat-square 612 | [npm-downloads-href]: https://npmjs.com/package/vue-embed 613 | [david-dm-src]: https://david-dm.org/gomah/vue-embed/status.svg?style=flat-square 614 | [david-dm-href]: https://david-dm.org/gomah/vue-embed 615 | -------------------------------------------------------------------------------- /build/rollup.config.js: -------------------------------------------------------------------------------- 1 | // rollup.config.js 2 | import vue from 'rollup-plugin-vue'; 3 | import buble from 'rollup-plugin-buble'; 4 | import commonjs from 'rollup-plugin-commonjs'; 5 | import replace from 'rollup-plugin-replace'; 6 | import { terser } from 'rollup-plugin-terser'; 7 | import minimist from 'minimist'; 8 | 9 | const argv = minimist(process.argv.slice(2)); 10 | 11 | const baseConfig = { 12 | input: 'src/entry.js', 13 | plugins: { 14 | preVue: [ 15 | replace({ 16 | 'process.env.NODE_ENV': JSON.stringify('production'), 17 | }), 18 | commonjs(), 19 | ], 20 | vue: { 21 | css: true, 22 | template: { 23 | isProduction: true, 24 | }, 25 | }, 26 | postVue: [ 27 | buble({ 28 | transforms: { asyncAwait: false }, 29 | objectAssign: 'Object.assign', 30 | }), 31 | ], 32 | }, 33 | }; 34 | 35 | // UMD/IIFE shared settings: externals and output.globals 36 | // Refer to https://rollupjs.org/guide/en#output-globals for details 37 | const external = [ 38 | 'embed-js', 39 | // list external dependencies, exactly the way it is written in the import statement. 40 | // eg. 'jquery' 41 | ]; 42 | const globals = { 43 | // Provide global variable names to replace your external imports 44 | // eg. jquery: '$' 45 | }; 46 | 47 | // Customize configs for individual targets 48 | const buildFormats = []; 49 | if (!argv.format || argv.format === 'es') { 50 | const esConfig = { 51 | ...baseConfig, 52 | output: { 53 | file: 'dist/v-embed.esm.js', 54 | format: 'esm', 55 | exports: 'named', 56 | }, 57 | plugins: [ 58 | ...baseConfig.plugins.preVue, 59 | vue(baseConfig.plugins.vue), 60 | ...baseConfig.plugins.postVue, 61 | terser({ 62 | output: { 63 | ecma: 6, 64 | }, 65 | }), 66 | ], 67 | }; 68 | buildFormats.push(esConfig); 69 | } 70 | 71 | if (!argv.format || argv.format === 'cjs') { 72 | const umdConfig = { 73 | ...baseConfig, 74 | external, 75 | output: { 76 | compact: true, 77 | file: 'dist/v-embed.ssr.js', 78 | format: 'cjs', 79 | name: 'VEmbed', 80 | exports: 'named', 81 | globals, 82 | }, 83 | plugins: [ 84 | ...baseConfig.plugins.preVue, 85 | vue({ 86 | ...baseConfig.plugins.vue, 87 | template: { 88 | ...baseConfig.plugins.vue.template, 89 | optimizeSSR: true, 90 | }, 91 | }), 92 | ...baseConfig.plugins.postVue, 93 | ], 94 | }; 95 | buildFormats.push(umdConfig); 96 | } 97 | 98 | if (!argv.format || argv.format === 'iife') { 99 | const unpkgConfig = { 100 | ...baseConfig, 101 | external, 102 | output: { 103 | compact: true, 104 | file: 'dist/v-embed.min.js', 105 | format: 'iife', 106 | name: 'VEmbed', 107 | exports: 'named', 108 | globals, 109 | }, 110 | plugins: [ 111 | ...baseConfig.plugins.preVue, 112 | vue(baseConfig.plugins.vue), 113 | ...baseConfig.plugins.postVue, 114 | terser({ 115 | output: { 116 | ecma: 5, 117 | }, 118 | }), 119 | ], 120 | }; 121 | buildFormats.push(unpkgConfig); 122 | } 123 | 124 | // Export config 125 | export default buildFormats; 126 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | general: 2 | branches: 3 | ignore: 4 | - /greenkeeper.*/ 5 | machine: 6 | environment: 7 | PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin" 8 | node: 9 | version: stable 10 | dependencies: 11 | override: 12 | - yarn 13 | cache_directories: 14 | - ~/.cache/yarn 15 | test: 16 | override: 17 | - yarn lint 18 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'], 3 | }; 4 | -------------------------------------------------------------------------------- /husky.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | hooks: { 3 | 'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS', 4 | 'pre-commit': 'yarn test', 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ['js', 'json', 'vue'], 3 | collectCoverage: true, 4 | collectCoverageFrom: ['/src/**/*.vue'], 5 | transform: { 6 | '^.+\\.js$': '/node_modules/babel-jest', 7 | '.*\\.(vue)$': '/node_modules/vue-jest', 8 | }, 9 | snapshotSerializers: ['./node_modules/jest-serializer-vue'], 10 | }; 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-embed", 3 | "version": "2.1.1", 4 | "description": "Embed component is based on [embed.js](https://github.com/ritz078/embed.js) for Vue 2.x.", 5 | "main": "dist/v-embed.ssr.js", 6 | "module": "dist/v-embed.esm.js", 7 | "unpkg": "dist/v-embed.min.js", 8 | "repository": "git@github.com:Gomah/vue-embed.git", 9 | "author": { 10 | "name": "Gomah " 11 | }, 12 | "license": "MIT", 13 | "files": [ 14 | "dist/*", 15 | "src/**/*.vue" 16 | ], 17 | "scripts": { 18 | "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js", 19 | "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs", 20 | "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es", 21 | "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife", 22 | "prepublishOnly": "yarn build", 23 | "release": "yarn test && standard-version && git push --follow-tags && npm publish", 24 | "test": "yarn test:lint && yarn test:unit", 25 | "test:lint": "eslint --ext .ts,.js,.vue src/", 26 | "test:unit": "cross-env BABEL_ENV=test jest --coverage" 27 | }, 28 | "keywords": [ 29 | "vue", 30 | "vue-embed", 31 | "plugins", 32 | "emoji", 33 | "emoticon", 34 | "embed.js", 35 | "embed", 36 | "javascript", 37 | "html" 38 | ], 39 | "devDependencies": { 40 | "@babel/core": "^7.6.4", 41 | "@babel/preset-env": "^7.6.3", 42 | "@commitlint/cli": "^13.1.0", 43 | "@commitlint/config-conventional": "^13.1.0", 44 | "@vue/test-utils": "^1.0.0-beta.29", 45 | "babel-eslint": "^10.0.3", 46 | "babel-jest": "^26.0.1", 47 | "cross-env": "^7.0.0", 48 | "eslint": "^7.14.0", 49 | "eslint-config-airbnb-base": "^14.0.0", 50 | "eslint-config-prettier": "^7.1.0", 51 | "eslint-import-resolver-webpack": "^0.13.0", 52 | "eslint-loader": "^4.0.2", 53 | "eslint-plugin-import": "^2.18.2", 54 | "eslint-plugin-prettier": "^3.1.1", 55 | "eslint-plugin-vue": "^7.0.0", 56 | "husky": "^7.0.0", 57 | "jest": "^24.9.0", 58 | "jest-serializer-vue": "^2.0.2", 59 | "minimist": "^1.2.0", 60 | "prettier": "^1.18.2", 61 | "rollup": "^2.3.2", 62 | "rollup-plugin-buble": "^0.19.8", 63 | "rollup-plugin-commonjs": "^10.1.0", 64 | "rollup-plugin-replace": "^2.2.0", 65 | "rollup-plugin-terser": "^7.0.1", 66 | "rollup-plugin-typescript": "^1.0.1", 67 | "rollup-plugin-vue": "^5.1.5", 68 | "standard-version": "^9.0.0", 69 | "typescript": "^4.0.2", 70 | "vue": "^2.6.10", 71 | "vue-jest": "^4.0.0-beta.2", 72 | "vue-template-compiler": "^2.6.10" 73 | }, 74 | "dependencies": { 75 | "embed-js": "^5.0.4", 76 | "embed-plugin-emoji": "^5.0.4", 77 | "embed-plugin-facebook": "^5.0.4", 78 | "embed-plugin-github": "^5.0.4", 79 | "embed-plugin-highlight": "^5.0.4", 80 | "embed-plugin-instagram": "^5.0.4", 81 | "embed-plugin-map": "^5.0.4", 82 | "embed-plugin-media": "^5.0.4", 83 | "embed-plugin-noembed": "^5.0.4", 84 | "embed-plugin-twitter": "^5.0.4", 85 | "embed-plugin-url": "^5.0.4", 86 | "embed-plugin-youtube": "^5.0.4" 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/VEmbed.vue: -------------------------------------------------------------------------------- 1 | 6 | 79 | -------------------------------------------------------------------------------- /src/entry.js: -------------------------------------------------------------------------------- 1 | // Import vue component 2 | import component from './VEmbed.vue'; 3 | 4 | // install function executed by Vue.use() 5 | function install(Vue) { 6 | if (install.installed) return; 7 | install.installed = true; 8 | Vue.component('VEmbed', component); 9 | } 10 | 11 | // Create module definition for Vue.use() 12 | const plugin = { 13 | install, 14 | }; 15 | 16 | // To auto-install when vue is found 17 | let GlobalVue = null; 18 | if (typeof window !== 'undefined') { 19 | GlobalVue = window.Vue; 20 | } else if (typeof global !== 'undefined') { 21 | GlobalVue = global.Vue; 22 | } 23 | if (GlobalVue) { 24 | GlobalVue.use(plugin); 25 | } 26 | 27 | // Inject install function into component - allows component 28 | // to be registered via Vue.use() as well as Vue.component() 29 | component.install = install; 30 | 31 | // Export component by default 32 | export default component; 33 | -------------------------------------------------------------------------------- /test/VEmbed.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | import VEmbed from '../src/VEmbed.vue'; 3 | 4 | describe('VEmbed', () => { 5 | test('mounts properly', () => { 6 | const wrapper = shallowMount(VEmbed); 7 | expect(wrapper.isVueInstance()).toBeTruthy(); 8 | }); 9 | 10 | test('renders properly', () => { 11 | const wrapper = shallowMount(VEmbed); 12 | expect(wrapper.html()).toMatchSnapshot(); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /test/__snapshots__/VEmbed.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`VEmbed renders properly 1`] = `
`; 4 | --------------------------------------------------------------------------------