├── .gitignore ├── .npmignore ├── tsimmes.min.js ├── tools ├── umdTemplate.js ├── umdTemplate-es5.js └── generateUmd.js ├── es5 ├── tsimmes.min.js ├── tsimmes.umd.min.js ├── src.js └── tsimmes.umd.js ├── tsimmes.umd.min.js ├── index.d.ts ├── src.js ├── LICENSE ├── tsimmes.umd.js ├── package.json ├── test.html └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | tools 2 | test.html 3 | -------------------------------------------------------------------------------- /tsimmes.min.js: -------------------------------------------------------------------------------- 1 | $=((a,b,c)=>(c=(d,e,f=[])=>(d&&f.push(...(d.dispatchEvent?[d]:""+d===d?/c(a,b)[0],c))(document,"querySelectorAll"); 2 | -------------------------------------------------------------------------------- /tools/umdTemplate.js: -------------------------------------------------------------------------------- 1 | { 2 | let tsimmes_PLACEHODER 3 | 4 | if (typeof define == 'function' && define.amd) { 5 | define([], () => $); 6 | } else if (typeof module == 'object' && module.exports) { 7 | module.exports = $; 8 | } else { 9 | this.$ = $; 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /es5/tsimmes.min.js: -------------------------------------------------------------------------------- 1 | $=function(r,u,l){function c(e,n,t){return t=[],e&&t.push.apply(t,e[u]?[e]:""+e===e?/(c=(d,e,f=[])=>(d&&f.push(...(d.dispatchEvent?[d]:''+d===d?/c(a,b)[0],c))(document,'querySelectorAll');'function'==typeof define&&define.amd?define([],()=>a):'object'==typeof module&&module.exports?module.exports=a:this.$=a} 2 | -------------------------------------------------------------------------------- /es5/tsimmes.umd.min.js: -------------------------------------------------------------------------------- 1 | !function(e,n){o=document,r="addEventListener",u="querySelectorAll",i.one=function(e,n){return i(e,n)[0]||null};var o,r,u,n=i;function i(e,n,t){return t=[],e&&t.push.apply(t,e[r]?[e]:""+e===e?/ HTMLElement | undefined; 9 | } 10 | 11 | const $: Tsimmes; 12 | 13 | export default $; 14 | } 15 | -------------------------------------------------------------------------------- /tools/generateUmd.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | const umdTemplate = fs.readFileSync(path.join(__dirname, './umdTemplate.js'), { encoding: 'utf-8' }); 5 | const umdTemplateEs5 = fs.readFileSync(path.join(__dirname, './umdTemplate-es5.js'), { encoding: 'utf-8' }); 6 | 7 | const tsimmes = fs.readFileSync(path.join(__dirname, '../src.js'), { encoding: 'utf-8' }); 8 | const tsimmesEs5 = fs.readFileSync(path.join(__dirname, '../es5/src.js'), { encoding: 'utf-8' }); 9 | 10 | const tsimmesUmd = umdTemplate.replace('tsimmes_PLACEHODER', tsimmes); 11 | const tsimmesUmdEs5 = umdTemplateEs5.replace('tsimmes_PLACEHODER', tsimmesEs5); 12 | 13 | fs.writeFileSync(path.join(__dirname, '../tsimmes.umd.js'), tsimmesUmd); 14 | fs.writeFileSync(path.join(__dirname, '../es5/tsimmes.umd.js'), tsimmesUmdEs5); 15 | -------------------------------------------------------------------------------- /src.js: -------------------------------------------------------------------------------- 1 | $ = ((document, s_querySelectorAll, $) => ( 2 | ($ = (s, context, tsimmes=[]) => ( 3 | s && tsimmes.push( // if s is truly then push the following 4 | ...(s.dispatchEvent // if arg is node or window, 5 | ? [s] // then pass [s] 6 | : "" + s === s // else if arg is a string 7 | ? / $(s, context)[0]), 22 | 23 | $ 24 | ))(document, 'querySelectorAll'); 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Andrey Gubanov 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 | 23 | -------------------------------------------------------------------------------- /es5/src.js: -------------------------------------------------------------------------------- 1 | $ = (function(document, s_addEventListener, s_querySelectorAll) { 2 | function $(s, context, tsimmes) { 3 | tsimmes = [] 4 | 5 | s && tsimmes.push.apply(tsimmes, // if s is truly then push the following 6 | s[s_addEventListener] // if arg is node or window, 7 | ? [s] // then pass [s] 8 | : "" + s === s // else if arg is a string 9 | ? / ( 3 | ($ = (s, context, tsimmes=[]) => ( 4 | s && tsimmes.push( // if s is truly then push the following 5 | ...(s.dispatchEvent // if arg is node or window, 6 | ? [s] // then pass [s] 7 | : "" + s === s // else if arg is a string 8 | ? / $(s, context)[0]), 23 | 24 | $ 25 | ))(document, 'querySelectorAll'); 26 | 27 | 28 | if (typeof define == 'function' && define.amd) { 29 | define([], () => $); 30 | } else if (typeof module == 'object' && module.exports) { 31 | module.exports = $; 32 | } else { 33 | this.$ = $; 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tsimmes", 3 | "version": "2.0.5", 4 | "description": "A function for elements selection", 5 | "main": "./es5/tsimmes.umd.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "minify": "rimraf tsimmes.min.js tsimmes.umd.min.js && babili src.js --out-file tsimmes.min.js && babili tsimmes.umd.js --out-file tsimmes.umd.min.js", 9 | "minify-es5": "uglifyjs --compress --mangle -- es5/src.js > es5/tsimmes.min.js && uglifyjs --compress --mangle -- es5/tsimmes.umd.js > es5/tsimmes.umd.min.js", 10 | "build": "npm run generate-umd && npm run minify && npm run minify-es5 && ls -l tsimmes.min.js", 11 | "upgrade": "ncu -u && npm install", 12 | "patch": "npm version patch && npm run build && git commit -am 'script: Build' && npm publish && git push && git push --tags", 13 | "generate-umd": "node tools/generateUmd" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/finom/tsimmes.git" 18 | }, 19 | "keywords": [ 20 | "jquery", 21 | "dom", 22 | "library", 23 | "tsimmes" 24 | ], 25 | "author": "Andrey Gubanov", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/finom/tsimmes/issues" 29 | }, 30 | "homepage": "https://github.com/finom/tsimmes#readme", 31 | "devDependencies": { 32 | "babili": "^0.1.4", 33 | "npm-check-updates": "^16.0.1", 34 | "rimraf": "^3.0.2", 35 | "uglify-js": "^3.16.3" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /es5/tsimmes.umd.js: -------------------------------------------------------------------------------- 1 | (function(root, $) { 2 | var $ = (function(document, s_addEventListener, s_querySelectorAll) { 3 | function $(s, context, tsimmes) { 4 | tsimmes = [] 5 | 6 | s && tsimmes.push.apply(tsimmes, // if s is truly then push the following 7 | s[s_addEventListener] // if arg is node or window, 8 | ? [s] // then pass [s] 9 | : "" + s === s // else if arg is a string 10 | ? / 2 | 3 | 4 | 5 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |
34 |
35 | 36 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | tsimmes [![npm version](https://badge.fury.io/js/tsimmes.svg)](https://badge.fury.io/js/tsimmes) 2 | ============ 3 | 4 | 7 | 8 | ### A function for elements selection in 226 ASCII chars (less than ¼ KB)! 9 | 10 | **tsimmes** is a function that allows you to select elements on a web page. Think of it as of `document.querySelectorAll` on steroids. 11 | 12 | ```js 13 | const buttons = $('.button'); 14 | ``` 15 | 16 | You can use it as a global variable 17 | 18 | ```html 19 | 22 | ``` 23 | 24 | 25 | *If you don't want to use ``$`` variable just rename it.* 26 | ```js 27 | foo=... 28 | // instead of 29 | $=... 30 | ``` 31 | 32 | And you can use it as a local variable in a script you make 33 | 34 | ```js 35 | ((win, $) => { 36 | // your code starts here 37 | const divs = $('div'); 38 | console.log(divs); 39 | // your code ends here 40 | })(window, ((a,b,c)=>(c=(d,e,f=[])=>(d&&f.push(...(d.dispatchEvent?[d]:""+d===d?/c(a,b)[0],c))(document,"querySelectorAll")); 41 | ``` 42 | 43 | The function is also published on NPM 44 | 45 | ``` 46 | npm install tsimmes 47 | ``` 48 | 49 | 50 | **tsimmes** is inherited from ``Array.prototype`` which means it has the same set of methods as the native array has. 51 | 52 | 81 | 82 | ## More features? 83 | 84 | ### Various types support 85 | 86 | **tsimmes** accepts many kinds of first argument and converts everything into array 87 | 88 | ```js 89 | $('.one, #two') 90 | $(document.querySelectorAll('.selector')); 91 | $(document.body); 92 | $(element.children); 93 | $(jQuery('.selector')); 94 | $([document.querySelector('.one'), document.querySelector('.two')]) 95 | ``` 96 | 97 | That means when you make your own library (VanillaJS "plugin") you can use **tsimmes** in case if you don't know which arg type will be passed by a programmer. 98 | 99 | ```js 100 | const myCoolLibrary = (el) => { 101 | el = $(el); 102 | // ... 103 | }; 104 | ``` 105 | 106 | ### $.one 107 | 108 | Getting zero-indexed element in DOM libraries is annoying. **tsimmes** has one little static method called ``$.one`` which selects only one element. 109 | 110 | ```js 111 | $.one('.button'); 112 | //vs 113 | $('.button')[0]; 114 | ``` 115 | 116 | This function is also created to get rid of extra variables (usually DOM libraries make two vars: ``$$`` and ``$``). It means you can import **tsimmes** nicely via module system. 117 | 118 | **AMD** 119 | ```js 120 | require(['path/to/tsimmes/umd/tsimmes.umd.js'], ($) => { 121 | // ... 122 | }); 123 | ``` 124 | 125 | **CommonJS** 126 | ```js 127 | const $ = require('path/to/tsimmes/tsimmes.umd.js'); 128 | ``` 129 | 130 | **CommonJS + NPM** 131 | ```js 132 | const $ = require('tsimmes'); 133 | ``` 134 | 135 | **ECMAScript 2015** 136 | ```js 137 | import $ from 'tsimmes'; 138 | ``` 139 | 140 | ### Find elements inside another element 141 | ```js 142 | const elements = $('.my-selector', someParent); 143 | // or 144 | const element = $.one('.my-selector', someParent); 145 | ``` 146 | 147 | 148 | ### Parse HTML 149 | Simple parsing. 150 | ```js 151 | const div = $('
'); 152 | ``` 153 | 154 | ### Contextual HTML parsing 155 | In case if you need to parse HTML which contains contextual elements (``td``, ``tr``, ``option``) you can pass a context tag name as a second argument. 156 | ```js 157 | const cells = $('foobar', 'tr') 158 | ``` 159 | 160 | ## I need more examples! 161 | 162 | ### Add style 163 | ```js 164 | for(let element of $('.my-selector')) { 165 | element.style.color = 'red'; 166 | } 167 | ``` 168 | 169 | In case if you need to set style only for one element you can use ``$.one``. 170 | 171 | ```js 172 | $.one('.my-selector').style.color = 'red'; 173 | ``` 174 | 175 | ### Events delegation 176 | ```js 177 | for(let element of $('.my-selector')) { 178 | element.addEventListener('click', function ({ target }) { 179 | if (this.contains(target.closest('.delegated-selector'))) { 180 | alert('yep!'); 181 | } 182 | }); 183 | } 184 | ``` 185 | Or 186 | ```js 187 | $.one('.my-selector').addEventListener('click', function ({ target }) { 188 | if (this.contains(target.closest('.delegated-selector'))) { 189 | alert('yep!'); 190 | } 191 | }); 192 | ``` 193 | 194 | ### Elements removal 195 | ```js 196 | for(let element of $('.my-selector')) { 197 | element.remove(); 198 | } 199 | ``` 200 | Or 201 | ```js 202 | $.one('.my-selector').remove(); 203 | ``` 204 | 205 | ### Animations 206 | Use [element.animate](https://developers.google.com/web/updates/2014/05/Web-Animations-element.animate-is-now-in-Chrome-36) for smooth GPU-accelerated animations. You may need [polyfill for Web Animations API](https://github.com/web-animations/web-animations-js). 207 | ```js 208 | $.one('.my-selector').animate({ 209 | opacity: [0.5, 1], 210 | transform: ['scale(0.5)', 'scale(1)'], 211 | }, { 212 | direction: 'alternate', 213 | duration: 500, 214 | iterations: Infinity, 215 | }); 216 | ``` 217 | 218 | Do you still need jQuery? 219 | --------------------------------------------------------------------------------