├── .gitignore
├── .prettierrc
├── README.md
├── package-lock.json
├── package.json
├── src
└── choozy.js
└── test
└── choozy.test.js
/.gitignore:
--------------------------------------------------------------------------------
1 | /dist
2 | /node_modules
3 | /npm-debug.log
4 | .DS_Store
5 | .idea
6 | .vscode
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "bracketSpacing": true,
4 | "trailingComma": "es5",
5 | "printWidth": 80,
6 | "tabWidth": 2,
7 | "useTabs": false,
8 | "semi": false
9 | }
10 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # choozy
2 |
3 | choozy is a tiny 331 byte DOM utility that simplifies the selection of multiple elements
4 |
5 | ## Installation
6 |
7 | ```
8 | npm i choozy
9 | ```
10 |
11 | ## Usage
12 |
13 | Given the following HTML
14 |
15 | ```html
16 |
17 |
18 |
29 |
30 |
31 |
32 |
33 | ```
34 |
35 | ### Before choozy
36 |
37 | ```js
38 | const dom = {
39 | header: document.querySelector('.js-header'),
40 | logo: document.querySelector('.js-logo'),
41 | nav: document.querySelector('.js-nav'),
42 | button: document.querySelector('.js-button'),
43 | list: document.querySelector('.js-list'),
44 | items: [...document.querySelectorAll('.js-items')],
45 | main: document.querySelector('.js-main'),
46 | footer: document.querySelector('.js-footer'),
47 | }
48 | ```
49 |
50 | ### After choozy
51 |
52 | If multiple elements contain the same suffix, they are collected into an array.
53 |
54 | ```js
55 | import choozy from 'choozy'
56 |
57 | const dom = choozy()
58 | ```
59 |
60 | ## Options
61 |
62 | The first argument is the container that choozy will query. This is the body element by default.
63 |
64 | The second argument is the prefix that will be used to select elements. By default, this is `js-`
65 |
66 | ```js
67 | choozy(container = document.body, prefix = 'js-')
68 | ```
69 |
70 | ## Inspiration
71 |
72 | This package is inspired by [query-dom-components](https://github.com/dcamilleri/query-dom-components)
73 |
74 | ## License
75 |
76 | [MIT License](https://opensource.org/licenses/MIT) © [Mike Wagz](https://wagz.io)
77 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "choozy",
3 | "version": "1.0.0",
4 | "description": "Select a bunch of elements.",
5 | "main": "dist/choozy.js",
6 | "umd:main": "dist/choozy.umd.js",
7 | "module": "dist/choozy.mjs",
8 | "unpkg": "dist/choozy.umd.js",
9 | "source": "src/choozy.js",
10 | "scripts": {
11 | "build": "microbundle build",
12 | "watch": "microbundle watch",
13 | "test": "jest"
14 | },
15 | "repository": "mikehwagz/choozy",
16 | "keywords": [
17 | "query",
18 | "dom",
19 | "select"
20 | ],
21 | "homepage": "https://github.com/mikehwagz/choozy",
22 | "author": "Mike Wagz (http://wagz.io)",
23 | "license": "MIT",
24 | "files": [
25 | "src",
26 | "dist"
27 | ],
28 | "devDependencies": {
29 | "jest": "^23.6.0",
30 | "microbundle": "^0.8.3"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/choozy.js:
--------------------------------------------------------------------------------
1 | export default function (container = document, prefix = 'js-') {
2 | let els = [].slice.call(container.querySelectorAll(`*[class*="${prefix}"]`))
3 | return els.reduce((acc, el) => {
4 | let cx =
5 | typeof el.className === 'string' ? el.className : el.className.baseVal
6 | let key = cx.split(prefix)[1].split(' ')[0].trim()
7 | acc[key] = acc[key]
8 | ? acc[key].constructor === Array
9 | ? acc[key].concat(el)
10 | : [acc[key], el]
11 | : el
12 | return acc
13 | }, {})
14 | }
15 |
--------------------------------------------------------------------------------
/test/choozy.test.js:
--------------------------------------------------------------------------------
1 | const choozy = require('../dist/choozy')
2 |
3 | describe('choozy:', () => {
4 | it('should be a function', () => {
5 | expect(typeof choozy).toBe('function')
6 | })
7 |
8 | document.body.innerHTML = ``
16 |
17 | let instance1 = choozy()
18 |
19 | it('should return an object', () => {
20 | expect(typeof instance1).toBe('object')
21 | })
22 |
23 | it('should contain keys nav, button, list, and items', () => {
24 | let keys = Object.keys(instance1)
25 | expect(keys.length).toBe(4)
26 | expect(keys).toContain('nav')
27 | expect(keys).toContain('button')
28 | expect(keys).toContain('list')
29 | expect(keys).toContain('items')
30 | })
31 |
32 | it('should collect multiple elements with the same suffix into an array', () => {
33 | expect(Array.isArray(instance1.items)).toBeTruthy()
34 | })
35 |
36 | describe('param: container', () => {
37 | let container = document.querySelector('.list')
38 | let instance2 = choozy(container)
39 |
40 | it('should only query inside the provided container', () => {
41 | expect(Object.keys(instance2).length).toBe(1)
42 | expect(instance2['nav']).toBeFalsy()
43 | expect(instance2['button']).toBeFalsy()
44 | expect(instance2['list']).toBeFalsy()
45 | })
46 | })
47 |
48 | describe('param: prefix', () => {
49 | document.body.innerHTML = `
50 |
51 |
52 |
53 | `
54 |
55 | let instance3 = choozy(document.body, 'foo-')
56 |
57 | it('should select elements based on the provided prefix', () => {
58 | let keys = Object.keys(instance3)
59 | expect(keys.length).toBe(3)
60 | expect(keys).toContain('one')
61 | expect(keys).toContain('two')
62 | expect(keys).toContain('three')
63 | })
64 | })
65 | })
66 |
--------------------------------------------------------------------------------