If you agree with any of the following, you may appreciate Surreal:
Love staying as close to Vanilla JS.
Hate typing document.querySelector over.. and over..
Hate typing addEventListener over.. and over..
Really wish document.querySelectorAll had Array functions..
Really wish this would work in child
">
<labelfor="file-input" ><divclass="uploader">div><script>me().on("dragover",ev=>{halt(ev);me(ev).classAdd('.hover');console.log("Files in drop zone.")})me().on("dragleave",ev=>{halt(ev);me(ev).classAdd('.hover');console.log("Files left drop zone.")})me().on("drop",ev=>{halt(ev);me(ev).classRemove('.hover').classAdd('.loading');me('#file-input').attribute('files',ev.dataTransfer.files);me('#form').trigger('change')})script>label>
Surreal is a dependency-free, browser-oriented javascript library. Download Surreal and drag surreal.js into the appropriate directory of your project. Using it is as simple as adding a ">
<scriptsrc="surreal.js">script>
🤔
Why choose me() and any() over $ and $$
No ambiguity unlike jQuery's approach of $ for both single elements and Arrays. Less need for sanity checks.
Readability. English-like and self documenting.
Same verbbage as Hyperscript making this an excellent transitional library.
It can be far less wordy to work with elements directly instead of an Array.
<div>I change color every second.
<script>// Locality of Behaviorme().on("click",asyncev=>{me(ev).styles({"transition": "background 1s"})awaitsleep(1000)me(ev).styles({"background": "red"})awaitsleep(1000)me(ev).styles({"background": "green"})awaitsleep(1000)me(ev).styles({"background": "blue"})awaitsleep(1000)me(ev).styles({"background": "none"})awaitsleep(1000)me(ev).remove()})script>div>
{ me(ev).fadeOut() })
">
<div>I fade out and remove myself.
<script>// Keepin it simple! Locality of Behavior.me().on("click",ev=>{me(ev).fadeOut()})script>div>
">
<div>I change color every second.
<script>// Run on load.(async(el=me())=>{me(el).styles({"transition": "background 1s"})awaitsleep(1000)me(el).styles({"background": "red"})awaitsleep(1000)me(el).styles({"background": "green"})awaitsleep(1000)me(el).styles({"background": "blue"})awaitsleep(1000)me(el).styles({"background": "none"})awaitsleep(1000)me(el).remove()})()script>div>
">
<script>// Keepin it simple! Globally!(async()=>{any("button").fadeOut()})()script>
Execute after the DOM is ready. Similar to jquery ready()
Queues functions onto window.onload
Why? So you don't overwrite window.onload, also predictable sequential loading!
🔌
Built-in Plugins
Effects
You can build your own effects easily with me().styles({...}) then timelining CSS transitions using await or callbacks, but we ship the most common effects for ergonomics:
🔗
fadeOut
❤️🔥
fade_out
Fade out and remove element.
🔥
me().fadeOut()
🔥
me().fadeOut(ev => { dosomething() }, 3000) Over 3 seconds then call function.
🔮
No Surreal Needed
Some patterns are already as short as you can get in vanilla JS!
Logging
🌐
console.log()console.warn()console.error()
Event logging:
🔥
ev.monitorEvents(me()) See: Chrome Blog
Children
🔥
me().children
🔥
me().children.hidden = true
Append / Prepend elements.
🔥
me().prepend(el_new)
🔥
me().appendChild(el_new)
🔥
me().insertBefore(el_new, el.firstChild)
🔥
me().insertAdjacentHTML("beforebegin", el_new)
Text / HTML Content
me().innerHTML = "
hello world
"
me().innerText = "hello world"
💎
Conventions & Tips
_ = are fine for temporary or unused variables. Keep it short and sweet!
e, el, elt = element
e, ev, evt = event
f, fn = function
Developer ergonomics and simplicity wins.
Find the layer where the change needs to touch the least places.
Animations are done with me().styles(...) with CSS transitions. Use await sleep(...) for timelining.
Modals and dropdowns can be done in pure HTML / CSS now.
🔌
Extending Surreal
First off, you can certainly just add to your Surreal core. Surreal is designed to be small, auditable and understandable. But we also have a plugin system for less core-like features if you prefer:
Add your function to Surreal
var$thing={test(e,name){console.log(`Hello ${name} from ${e}`)returne}}$={...$, ...$thing}
Add your function to Surreal sugar() if it is chainable.
Automatically will be added as a global convenience with globalsAdd() If this should not be allowed, please add it to the restricted list in globalsAdd()
If applicable, make your function compatible with both single elements and arrays. Refer to an existing function to see how.
Make an issue or pull request if you think people would like to use it! If it's useful enough we may want it in the core!
Vertical photo gallery optimized for smartphones (notch area included). SSG will support your brand and marketing. Optimally placed captions, full screen lightbox, no ugly arrows
To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. We will build a simple website that allows for doing that, and we will do it using ES6 and Webpack!
(Art by shahabalizadeh)
12 Dec 23, 2022
15k Dec 31, 2022
61 Dec 28, 2022
4 Dec 2, 2022
3 Aug 22, 2022
485 Dec 12, 2022
7 Feb 3, 2022
9 Dec 3, 2022
14 Jun 23, 2022
7 Mar 5, 2022