├── .gitignore ├── CHANGELOG.md ├── doc-partials └── body.hbs ├── rollup.config.js ├── dist └── dork.min.js ├── example.html ├── LICENSE ├── README.hbs ├── package.json ├── src └── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # 0.1.0 2 | - Converted proof of concept at https://gist.github.com/adamghill/6cbd7f82fffcc72f4774d68c055f2feb to something a little more usable. 3 | - Make bundled version use `dork` namespace so functions don't conflict with anything else. 4 | -------------------------------------------------------------------------------- /doc-partials/body.hbs: -------------------------------------------------------------------------------- 1 | {{>deprecated~}} 2 | {{>description~}} 3 | {{>summary~}} 4 | {{>augments~}} 5 | {{>implements~}} 6 | {{>mixes~}} 7 | {{>default~}} 8 | {{>chainable~}} 9 | {{>overrides~}} 10 | {{>returns~}} 11 | {{>category~}} 12 | {{>throws~}} 13 | {{>fires~}} 14 | {{>this~}} 15 | {{>access~}} 16 | {{>readOnly~}} 17 | {{>requires~}} 18 | {{>customTags~}} 19 | {{>see~}} 20 | {{>since~}} 21 | {{>version~}} 22 | {{>authors~}} 23 | {{>license~}} 24 | {{>copyright~}} 25 | {{>todo~}} 26 | {{>params~}} 27 | {{>properties~}} 28 | {{>examples~}} -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Rollup config 3 | * 4 | * This script config allows us to create a bundle of the library 5 | * the library is meant to be used at ES module, or 30 | 31 | 32 | 33 | 34 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2024 Adam Hill 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.hbs: -------------------------------------------------------------------------------- 1 | # dork 2 | 3 | Remember jQuery? It's like that, but no one else uses it. 4 | 5 | - https://github.com/adamghill/dorkjs 6 | - https://www.npmjs.com/package/dorkjs 7 | 8 | ## Installation 9 | 10 | No build step needed. 🎉 11 | 12 | Two options: 13 | 14 | 1. Reference the script in unpkg in your HTML. 15 | 16 | ``` 17 | 18 | ``` 19 | 20 | OR 21 | 22 | 1. Download `dork.min.js` from the `dist` folder 23 | 1. Reference the downloaded script in your HTML. 24 | 25 | ```html 26 | 27 | ``` 28 | 29 | ## Simple example of how `dork` looks 30 | 31 | ``` 32 | 33 | 34 | 42 | ``` 43 | 44 | ## Size 45 | 46 | - 934 B 47 | - 463 B (minified) 48 | - 370 B (brotli) 49 | 50 | {{>main}} 51 | 52 | ## Developing 53 | 54 | ### See examples 55 | 56 | 1. `python3 -m http.server 8000` 57 | 2. Go to http://localhost:8000/example.html in a browser 58 | 59 | ### Run tests 60 | 61 | TBD 62 | 63 | ### Build 64 | 65 | `npm run b` 66 | 67 | ## Colophon 68 | 69 | - [Rollup](https://rollupjs.org) 70 | - [jsdoc2md](https://github.com/jsdoc2md/jsdoc-to-markdown) 71 | 72 | ## Inspiration 73 | 74 | Every JavaScript ever. 75 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dorkjs", 3 | "pkgName": "dorkjs", 4 | "version": "0.1.0", 5 | "author": "adamghill", 6 | "license": "MIT", 7 | "description": "The most important JavaScript framework ever created.", 8 | "main": "dist/dork.min.js", 9 | "module": "dist/dork.min.js", 10 | "type": "module", 11 | "files": [ 12 | "dist", 13 | "src", 14 | "docs/source" 15 | ], 16 | "keywords": [ 17 | "reactive", 18 | "html", 19 | "dom" 20 | ], 21 | "scripts": { 22 | "size": "gzip-size ./dist/dork.min.js --include-original && echo `brotli dist/dork.min.js -c | wc -c | numfmt --to=iec --suffix=B --format='%.2f'` '(brotli)'", 23 | "check-size": "gzip-size ./dist/dork.min.js --raw", 24 | "b": "npm run build && stat -f%z dist/dork.min.js | numfmt --to=iec --suffix=B --format='%.2f' && npm run size && npx jsdoc2md --template README.hbs --files src/* --partial doc-partials/body.hbs > README.md", 25 | "build": "rollup -c", 26 | "r": "DEV_SERVER_PORT=4000 DEV_SERVER_ROOT=. dev-server" 27 | }, 28 | "repository": { 29 | "type": "git", 30 | "url": "git+https://github.com/adamghill/dorkjs.git" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/adamghill/dorkjs/discussions" 34 | }, 35 | "homepage": "https://github.com/adamghill/dorkjs", 36 | "devDependencies": { 37 | "@babel/core": "7.4.3", 38 | "@babel/preset-env": "7.4.3", 39 | "@rollup/plugin-terser": "0.4.0", 40 | "gzip-size-cli": "5.1.0", 41 | "jsdoc-to-markdown": "^8.0.1", 42 | "rollup": "3.13.0", 43 | "rollup-plugin-banner2": "1.2.2" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | function _get_el(el) { 2 | if (typeof el == "string") { 3 | el = $(el); 4 | } 5 | 6 | return el; 7 | } 8 | 9 | function _set_val_if_not_undefined(obj, attr, val) { 10 | if (typeof val !== "undefined") { 11 | obj[attr] = val; 12 | } 13 | } 14 | 15 | /** 16 | * Query for a particular element in a document. Classic. 17 | * @param {String} query - CSS-like query for an `Element`. 18 | * @returns {Element} The first `Element` found for the query. 19 | */ 20 | export function $(query) { 21 | return document.querySelector(query); 22 | } 23 | 24 | /** 25 | * Query for all elements in a document. 26 | * @param {String} query - CSS-like query for `Element`s. 27 | * @returns {Element[]} All `Element`s found for the query. 28 | */ 29 | export function $$(query) { 30 | return document.querySelectorAll(query); 31 | } 32 | 33 | /** 34 | * Adds an event listener to a particular `Element`. 35 | * @param {String|Element} el - `Element` to listen to. 36 | * @param {String} eventName - Event to listen to, e.g. "click", "mouseover", etc. 37 | * @param {Function} fn - Function to run when a particular event is fired. 38 | * @param {Boolean} preventDefault - Whether or not `preventDefault()` should be called on the event. Useful for the click event. 39 | */ 40 | export function listen(el, eventName, fn, preventDefault) { 41 | el = _get_el(el); 42 | 43 | el.addEventListener(eventName, (event) => { 44 | if (preventDefault === true) { 45 | event.preventDefault(); 46 | } 47 | 48 | // return `dork` here is valid once this gets bundled because it will be the wrapping module 49 | return fn(event, el, dork); 50 | }); 51 | } 52 | 53 | /** 54 | * Runs a function after the DOM content has been loaded. 55 | * @param {Function} fn - The function to run after the DOM content has been loaded. 56 | */ 57 | export function onload(fn) { 58 | return listen(document, "DOMContentLoaded", fn); 59 | } 60 | 61 | /** 62 | * Get (or set) the data value of an `Element`. 63 | * @param {String|Element} el - `Element` to get the value for. 64 | * @param {String} data - Attribute to get the data from. 65 | * @param {*} val - Value to set on the data. 66 | */ 67 | export function data(el, data, val) { 68 | el = _get_el(el); 69 | 70 | if (typeof val !== "undefined") { 71 | el.dataset[data] = val; 72 | } 73 | 74 | return el.dataset[data]; 75 | } 76 | 77 | /** 78 | * Get (or set) the value of an `Element`. 79 | * @param {String|Element} el - `Element` to get the value for. 80 | * @param {*} val - Value to set on the value. 81 | */ 82 | export function value(el, val) { 83 | el = _get_el(el); 84 | _set_val_if_not_undefined(el, "value", val); 85 | 86 | return el.value; 87 | } 88 | 89 | /** 90 | * Get the inner HTML of an `Element`. 91 | * @param {String|Element} el - `Element` to get the inner HTML for. 92 | * @param {*} val - Value to set on the inner HTML. 93 | */ 94 | export function inner(el, val) { 95 | el = _get_el(el); 96 | _set_val_if_not_undefined(el, "innerHTML", val); 97 | 98 | return el.innerHTML; 99 | } 100 | 101 | /** 102 | * Get (or set) the outer HTML of an `Element`. 103 | * @param {String|Element} el - `Element` to get the outer HTML for. 104 | * @param {*} val - Value to set on the outer HTML. 105 | */ 106 | export function outer(el, val) { 107 | el = _get_el(el); 108 | _set_val_if_not_undefined(el, "outerHTML", val); 109 | 110 | return el.outerHTML; 111 | } 112 | 113 | /** 114 | * Hide an `Element`. 115 | * @param {String|Element} el - The `Element` to hide. 116 | */ 117 | export function hide(el) { 118 | el = _get_el(el); 119 | 120 | if (el) { 121 | el.style = "display: none"; 122 | } 123 | } 124 | 125 | /** 126 | * Show an `Element`. 127 | * @param {String|Element} el - The `Element` to show. 128 | */ 129 | export function show(el) { 130 | el = _get_el(el); 131 | 132 | if (el) { 133 | el.style = "display: inline"; 134 | } 135 | } 136 | 137 | /** 138 | * Writes to the console. 139 | * @param {String[]} messages - The messages to write to the console. 140 | */ 141 | export function print(...messages) { 142 | console.log(...Array.prototype.slice.call(messages, 0, messages.length)); 143 | } 144 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # dork 2 | 3 | Remember jQuery? It's like that, but no one else uses it. 4 | 5 | - https://github.com/adamghill/dorkjs 6 | - https://www.npmjs.com/package/dorkjs 7 | 8 | ## Installation 9 | 10 | No build step needed. 🎉 11 | 12 | Two options: 13 | 14 | 1. Reference the script in unpkg in your HTML. 15 | 16 | ``` 17 | 18 | ``` 19 | 20 | OR 21 | 22 | 1. Download `dork.min.js` from the `dist` folder 23 | 1. Reference the downloaded script in your HTML. 24 | 25 | ```html 26 | 27 | ``` 28 | 29 | ## Simple example of how `dork` looks 30 | 31 | ``` 32 | 33 | 34 | 42 | ``` 43 | 44 | ## Size 45 | 46 | - 934 B 47 | - 463 B (minified) 48 | - 370 B (brotli) 49 | 50 | ## Functions 51 | 52 |
53 |
$(query) ⇒ Element
54 |

Query for a particular element in a document. Classic.

55 |
56 |
$$(query) ⇒ Array.<Element>
57 |

Query for all elements in a document.

58 |
59 |
listen(el, eventName, fn, preventDefault)
60 |

Adds an event listener to a particular Element.

61 |
62 |
onload(fn)
63 |

Runs a function after the DOM content has been loaded.

64 |
65 |
data(el, data, val)
66 |

Get (or set) the data value of an Element.

67 |
68 |
value(el, val)
69 |

Get (or set) the value of an Element.

70 |
71 |
inner(el, val)
72 |

Get the inner HTML of an Element.

73 |
74 |
outer(el, val)
75 |

Get (or set) the outer HTML of an Element.

76 |
77 |
hide(el)
78 |

Hide an Element.

79 |
80 |
show(el)
81 |

Show an Element.

82 |
83 |
print(messages)
84 |

Writes to the console.

85 |
86 |
87 | 88 | 89 | 90 | ## $(query) ⇒ Element 91 | Query for a particular element in a document. Classic. 92 | 93 | **Returns**: Element - The first `Element` found for the query. 94 | 95 | | Param | Type | Description | 96 | | --- | --- | --- | 97 | | query | String | CSS-like query for an `Element`. | 98 | 99 | 100 | 101 | ## $$(query) ⇒ Array.<Element> 102 | Query for all elements in a document. 103 | 104 | **Returns**: Array.<Element> - All `Element`s found for the query. 105 | 106 | | Param | Type | Description | 107 | | --- | --- | --- | 108 | | query | String | CSS-like query for `Element`s. | 109 | 110 | 111 | 112 | ## listen(el, eventName, fn, preventDefault) 113 | Adds an event listener to a particular `Element`. 114 | 115 | 116 | | Param | Type | Description | 117 | | --- | --- | --- | 118 | | el | String \| Element | `Element` to listen to. | 119 | | eventName | String | Event to listen to, e.g. "click", "mouseover", etc. | 120 | | fn | function | Function to run when a particular event is fired. | 121 | | preventDefault | Boolean | Whether or not `preventDefault()` should be called on the event. Useful for the click event. | 122 | 123 | 124 | 125 | ## onload(fn) 126 | Runs a function after the DOM content has been loaded. 127 | 128 | 129 | | Param | Type | Description | 130 | | --- | --- | --- | 131 | | fn | function | The function to run after the DOM content has been loaded. | 132 | 133 | 134 | 135 | ## data(el, data, val) 136 | Get (or set) the data value of an `Element`. 137 | 138 | 139 | | Param | Type | Description | 140 | | --- | --- | --- | 141 | | el | String \| Element | `Element` to get the value for. | 142 | | data | String | Attribute to get the data from. | 143 | | val | \* | Value to set on the data. | 144 | 145 | 146 | 147 | ## value(el, val) 148 | Get (or set) the value of an `Element`. 149 | 150 | 151 | | Param | Type | Description | 152 | | --- | --- | --- | 153 | | el | String \| Element | `Element` to get the value for. | 154 | | val | \* | Value to set on the value. | 155 | 156 | 157 | 158 | ## inner(el, val) 159 | Get the inner HTML of an `Element`. 160 | 161 | 162 | | Param | Type | Description | 163 | | --- | --- | --- | 164 | | el | String \| Element | `Element` to get the inner HTML for. | 165 | | val | \* | Value to set on the inner HTML. | 166 | 167 | 168 | 169 | ## outer(el, val) 170 | Get (or set) the outer HTML of an `Element`. 171 | 172 | 173 | | Param | Type | Description | 174 | | --- | --- | --- | 175 | | el | String \| Element | `Element` to get the outer HTML for. | 176 | | val | \* | Value to set on the outer HTML. | 177 | 178 | 179 | 180 | ## hide(el) 181 | Hide an `Element`. 182 | 183 | 184 | | Param | Type | Description | 185 | | --- | --- | --- | 186 | | el | String \| Element | The `Element` to hide. | 187 | 188 | 189 | 190 | ## show(el) 191 | Show an `Element`. 192 | 193 | 194 | | Param | Type | Description | 195 | | --- | --- | --- | 196 | | el | String \| Element | The `Element` to show. | 197 | 198 | 199 | 200 | ## print(messages) 201 | Writes to the console. 202 | 203 | 204 | | Param | Type | Description | 205 | | --- | --- | --- | 206 | | messages | Array.<String> | The messages to write to the console. | 207 | 208 | 209 | ## Developing 210 | 211 | ### See examples 212 | 213 | 1. `python3 -m http.server 8000` 214 | 2. Go to http://localhost:8000/example.html in a browser 215 | 216 | ### Run tests 217 | 218 | TBD 219 | 220 | ### Build 221 | 222 | `npm run b` 223 | 224 | ## Colophon 225 | 226 | - [Rollup](https://rollupjs.org) 227 | - [jsdoc2md](https://github.com/jsdoc2md/jsdoc-to-markdown) 228 | 229 | ## Inspiration 230 | 231 | Every JavaScript ever. 232 | --------------------------------------------------------------------------------