├── .editorconfig ├── .gitattributes ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── package.json ├── src ├── index.d.ts ├── index.js ├── index.spec.js └── test │ └── setup-browser-env.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # Settings for editors and IDEs. 2 | # References at https://editorconfig.org/. 3 | 4 | root = true 5 | 6 | # Settings for any file. 7 | [*] 8 | charset = utf-8 9 | end_of_line = lf 10 | indent_size = 2 11 | indent_style = space 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Treat as text when is possible. 2 | * text=auto 3 | 4 | # Ensure Unix line-endings. 5 | * eol=lf 6 | 7 | # Ignore differences on Yarn's lockfile. 8 | # Since version 1.0, Yarn automatically handle merge conflicts. 9 | yarn.lock -diff 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node.js modules. 2 | node_modules 3 | 4 | # NPM's lockfile. 5 | # We're using Yarn and it provides it's own lockfile. 6 | npm-lockfile.json 7 | 8 | # Log files. 9 | *.log 10 | *.log.* 11 | 12 | # Distribution sources. 13 | dist/ 14 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8" 4 | - "10" 5 | - "12" 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright © 2018 Vitor Luiz Cavalcanti 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-component-id 2 | 3 | [![Build Status](https://travis-ci.org/VitorLuizC/vue-component-id.svg?branch=master)](https://travis-ci.org/VitorLuizC/vue-component-id) 4 | 5 | Generates an unique ID for every Vue component. 6 | 7 | ## Install 8 | 9 | This module is published under NPM registry, so you can install using any Node.js package manager. 10 | 11 | ```sh 12 | npm install vue-component-id --save 13 | 14 | # For Yarn use the command below. 15 | yarn add vue-component-id 16 | ``` 17 | 18 | Vue's `use` method will append generated ID on your components. 19 | 20 | ```js 21 | import Vue from 'vue'; 22 | import ComponentID from 'vue-component-id'; 23 | 24 | Vue.use(ComponentID); 25 | ``` 26 | 27 | ## Usage 28 | 29 | After installation an `componentID` property is available on scope. So, you can use it on templates and module scope. 30 | 31 | ```vue 32 | 38 | 39 | 47 | ``` 48 | 49 | ## How to use custom generator? 50 | 51 | You can change library's generator on options argument. 52 | 53 | ```js 54 | import Vue from 'vue'; 55 | import uuid from 'uuid/v4'; 56 | import ComponentID from 'vue-component-id'; 57 | 58 | Vue.use(ComponentID, { generator: uuid }); 59 | ``` 60 | 61 | ## How to generate another ID? 62 | 63 | `vue-component-id` export a function to create generators. To generate another IDs you can create your own generator and using it. 64 | 65 | ```js 66 | import { createGenerator } from 'vue-component-id'; 67 | 68 | // Optionally defines an ID prefix. 69 | const generate = createGenerator('ID-'); 70 | 71 | const items = [ generate(), generate() ]; 72 | //=> [ 'ID-0', 'ID-1' ] 73 | ``` 74 | 75 | ## License 76 | 77 | Released under [MIT License](./LICENSE). 78 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-component-id", 3 | "version": "0.2.1", 4 | "description": "Generates an unique ID for every component.", 5 | "keywords": [ 6 | "vue-plugin", 7 | "vue", 8 | "id", 9 | "id-generator" 10 | ], 11 | "cdn": "dist/index.umd.min.js", 12 | "main": "dist/index.js", 13 | "types": "src/index.d.ts", 14 | "unpkg": "dist/index.umd.min.js", 15 | "module": "dist/index.esm.js", 16 | "jsdelivr": "dist/index.umd.min.js", 17 | "umd:main": "dist/index.umd.js", 18 | "scripts": { 19 | "test": "ava src/index.spec.js", 20 | "build": "bili src/index.js --format es,cjs,umd,umd-min --module-name VueComponentId --minimal --banner", 21 | "pretest": "yarn build" 22 | }, 23 | "files": [ 24 | "dist/", 25 | "src/index.d.ts" 26 | ], 27 | "author": { 28 | "url": "https://vitorluizc.github.io/", 29 | "name": "Vitor Luiz Cavalcanti", 30 | "email": "vitorluizc@outlook.com" 31 | }, 32 | "license": "MIT", 33 | "repository": { 34 | "type": "git", 35 | "url": "git+https://github.com/VitorLuizC/vue-component-id.git" 36 | }, 37 | "bugs": { 38 | "url": "https://github.com/VitorLuizC/vue-component-id/issues" 39 | }, 40 | "ava": { 41 | "require": [ 42 | "./src/test/setup-browser-env.js" 43 | ] 44 | }, 45 | "homepage": "https://github.com/VitorLuizC/vue-component-id#readme", 46 | "devDependencies": { 47 | "@vue/test-utils": "^1.0.0-beta.29", 48 | "ava": "^2.2.0", 49 | "bili": "^4.8.1", 50 | "browser-env": "^3.2.6", 51 | "vue": "^2.6.10", 52 | "vue-template-compiler": "^2.6.10" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/index.d.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | declare module 'vue/types/vue' { 4 | interface VueConstructor { 5 | componentID: string; 6 | } 7 | } 8 | 9 | /** 10 | * A function which generates an unique ID. 11 | */ 12 | type IDGenerator = () => string; 13 | 14 | /** 15 | * Creates an ID generator function. Every execution returns a prefix text 16 | * concatenated with an incremented number. 17 | * @param prefix - A text to be concatenated with an incremented number. 18 | */ 19 | export const createGenerator: (prefix?: string) => IDGenerator; 20 | 21 | /** 22 | * Install on Vue instance to generates an unique ID for every component. You 23 | * can also provide your own generator. 24 | * @param Vue - Vue constructor, used to implements ID on every component. 25 | * @param options - Plugin options. Used to change ID generator function. 26 | */ 27 | const install: (Vue: Vue, options: { generator: IDGenerator } = {}) => void; 28 | 29 | export default install; 30 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A function which generates an unique ID. 3 | * @typedef {function():string} IDGenerator 4 | */ 5 | 6 | /** 7 | * Creates an ID generator function. Every execution returns a prefix text 8 | * concatenated with an incremented number. 9 | * @param {string} [prefix] A text to be concatenated with an incremented number. 10 | * @return {IDGenerator} 11 | */ 12 | export const createGenerator = (prefix = '') => { 13 | let count = 0; 14 | return () => prefix + (count++).toString(10); 15 | }; 16 | 17 | /** 18 | * Default generator function. 19 | */ 20 | const DEFAULT_GENERATOR = createGenerator(); 21 | 22 | /** 23 | * Install on Vue instance to generates an unique ID for every component. You 24 | * can also provide your own generator. 25 | * @param {Vue} Vue Vue constructor, used to implements ID on every component. 26 | * @param {{ generator: IDGenerator }} [options] Plugin options. Used to change ID generator function. 27 | */ 28 | const install = (Vue, options = {}) => { 29 | const { generator = DEFAULT_GENERATOR } = options; 30 | 31 | Vue.mixin({ 32 | data () { 33 | return { 34 | componentID: generator() 35 | }; 36 | } 37 | }); 38 | }; 39 | 40 | export default install; 41 | -------------------------------------------------------------------------------- /src/index.spec.js: -------------------------------------------------------------------------------- 1 | import test from 'ava'; 2 | import ComponentID, { createGenerator } from '../'; 3 | import { createLocalVue, shallowMount, mount } from '@vue/test-utils'; 4 | 5 | test('ComponentID setups `componentID` property on every component', (context) => { 6 | const Vue = createLocalVue(); 7 | 8 | Vue.use(ComponentID); 9 | 10 | const VEmpty = { 11 | template: ' ', 12 | }; 13 | 14 | const A = shallowMount(VEmpty, { localVue: Vue }); 15 | const B = shallowMount(VEmpty, { localVue: Vue }); 16 | 17 | context.not(A.vm.componentID, B.vm.componentID, 'Component ID\'s should be unique.'); 18 | }); 19 | 20 | test('ComponentID let developer customize generator', (context) => { 21 | const Vue = createLocalVue(); 22 | 23 | Vue.use(ComponentID, { 24 | generator: () => 'Single-ID' 25 | }); 26 | 27 | const VEmpty = { 28 | template: ' ', 29 | }; 30 | 31 | const A = shallowMount(VEmpty, { localVue: Vue }); 32 | 33 | context.is(A.vm.componentID, 'Single-ID'); 34 | }); 35 | 36 | test('createGenerator creates an ID generator function', (context) => { 37 | const generate = createGenerator(); 38 | const generatePrefixed = createGenerator('ID-'); 39 | 40 | context.is(generate(), '0'); 41 | context.is(generate(), '1'); 42 | context.is(generatePrefixed(), 'ID-0'); 43 | context.is(generatePrefixed(), 'ID-1'); 44 | }); 45 | 46 | -------------------------------------------------------------------------------- /src/test/setup-browser-env.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const browser = require('browser-env'); 4 | 5 | /** 6 | * "browser-env" initializes browser environment. 7 | * This environment is required for "@vue/test-utils". 8 | */ 9 | browser(); 10 | --------------------------------------------------------------------------------