Experiment with tree traversal and new style 'me' #6
Conversation
| $._evtEl = e | ||
| try { fn(evt) } | ||
| finally { delete $._evtEl } | ||
| } |
There was a problem hiding this comment.
No idea if this is the best way to store the current element for an event handler, but it's the only way I could figure out to get me working without needing the event as a parameter. I don't like that it doesn't work for vanilla JS registered handlers, but el(event) still works in that case.
| if ($.isNodeList(start)) { | ||
| for (const node of start) { | ||
| const res = $.el(selector, node, warning) | ||
| if (res) return res |
There was a problem hiding this comment.
Not sure if this is the best way to chain el on top of any. Right now it just returns the first match, to keep things in line such that even when chained, el only returns one item.
| restricted = ['sugar'] | ||
| for (const key of Object.keys(this)) { | ||
| const descriptor = Object.getOwnPropertyDescriptor(this, key) | ||
| if (!restricted.includes(key) && !key.startsWith('$')) window[key] != 'undefined' ? Object.defineProperty(window, key, descriptor) : console.warn(`Surreal: "${key}()" already exists on window. Skipping to prevent overwrite.`) |
There was a problem hiding this comment.
I switched this to startsWith('$') because $effects was giving me a problem when switching to the descriptor mode. Could just be that I need to switch to configurable: true on the descriptors so they can be overwritten.
| // Add all plugin sugar. | ||
| $._e = e // Plugin access to "e" for chaining. | ||
| for (const [key, value] of Object.entries(sugars)) { | ||
| for (const [key, value] of Object.entries($.sugars)) { |
There was a problem hiding this comment.
I can't figure out what changed, but at some point this was giving me an error that sugars was undefined until I added the $..
I kept thinking about tree traversal, and how
medidn't seem like quite the right name when used with selectors. This branch has multiple experiments for discussion. Here are the different ideas within:medidn't make sense to me for meaning any single element (like when used with an argument.) I renamed itel(short for element, and I have no idea if I really like that name) and made the selector required. It still works for events and sugaring a passed in element. Other name ideasone(as a counterpart toany'),qs` (short for querySelector)mebut now it's a property instead of a function (more similar tothis), as it can never take any arguments. It only works inside a <script> element, or inside an event handler that was added with surreal'sonmethod. e.g.me.on('click', () => me.classToggle('active'))any(event)andel(event)to be the currentTarget instead of the target, so that it's always the element that had the handler added, and not some child that's bubbling up the event. me(event) behavior with children #3anyandelcan now be used as chainable methods to traverse to children. This makes the 'start' parameter the element they are chained from. Added the ability for that start parameter to be an array of elements so it's still chainable fromanyparentproperty, which is just a sugaredparentElement. It's defined with an accessor such that the whole DOM doesn't get sugared at once.me.parent.any('div').classToggle('red')I'm not 100% sold on any of this, just ideas for discussion. I also haven't used JS much before, so I'm sure there are issues with coding conventions and possible errors. Happy to iterate on any/all of these ideas here or in separate PRs if you are interested. (Or if you just want to take some ideas and run with them yourself that's great 😄)
I don't think the current API is bad, or any of this stuff is necessary, just started having ideas while using it and wanted to flesh them out a bit.