Release Notes

Version 7.1.0-beta1

DATE TBD

NOTE: These are work in progress notes for the next version of bitty. Check the Version 7.0.0 notes below for the current version.

Version: 7.0.0

Dec. 10, 2025

  • Version 7.0.0 release.

  • No changes since 7.0.0-rc2.

Version: 7.0.0-rc2

Dec. 7, 2025

This change primarily moves .target and .sender items from el to ev. And moves the sending element into ev.sender with extra the features added.

  • Renamed ev.val to ev.value

  • Renamed ev.valInt to ev.intValue

  • Renamed ev.valFloat to ev.floatValue

  • Renamed ev.ds to ev.prop

  • Renamed ev.dsInt to ev.propToInt

  • Renamed ev.dsFloat to ev.propToFloat

  • Added ev.sender.value

  • Added ev.sender.valueToInt

  • Added ev.sender.valueToFloat

  • Moved el.targetBittyId to ev.bittyId

  • Renamed el.ds to el.prop

  • Renamed el.dsInt to el.propToInt

  • Renamed el.dsFloat to el.propToFloat

  • Removed el.targetDs() in favor of existing ev.prop()

  • Removed el.targetDsInt() in favor of existing ev.propToInt()

  • Removed el.targetDsFloat() in favor of existing ev.propToFloat()

  • Moved el.senderBittyId to ev.sender.bittyId

  • Removed el.senderDs() in favor of existing ev.sender.prop()

  • Removed el.senderDsInt() in favor of existing ev.sender.propToInt()

  • Removed el.senderDsFloat() in favor of existing ev.sender.propToFloat()

  • Removed el.val in favor of the standard el.value

  • Renamed el.valInt to el.valueToInt

  • Renamed el.valFloat to el.valueToFloat

  • Removed el.targetVal in favor of ev.value

  • Removed el.targetValInt in favor of ev.valueToInt

  • Removed el.targetValFloat in favor of ev.valueToFloat

  • Removed el.senderVal in favor of ev.sender.value

  • Removed el.senderValInt in favor of ev.sender.valueToInt

  • Removed el.senderValueFloat in favor of ev.sender.valueToFloat

  • Renamed el.matchTargetDs to el.propMatchesTarget

  • Renamed el.matchSenderDs to el.propMatchesSender

  • Fixed bug where el.isSender was checking against el.sender instead of ev.sender.

  • Removed deprecated el.sender code.

  • Fixed bug where forwared signals required a receiver. They now fire once if there isn't a receiver the same way data-send works.

  • The bitty element is used as the ev.sender on a this.api.tigger(SIGNAL) call (previously, a null value was sent)

  • Removed el.bittyParentBittyId. Use this.api.bittyId or el.bittyParent.bittyId instead.

  • Refactored to use centralized processEvent method.

Version: 7.0.0-rc1

This update is a largely a set of API refinements to make things more obvious and consistent.

It also adds data-use which allows an element to send a signal that only it uses.

  • Improved error messages with more details when connections can't be made.

  • Renamed the bitty-#.#.#.min.js file to bitty-#.#.#.js to highlight that it's the one that should be used in production.

  • Renamed the bitty-#.#.#.full.js file to bitty-#.#.#.dev.js for clarity that it's the source code and not what should be used in production.

  • TODO: Added this.api.makeSVG which takes a text string and turns it into an SVG.

  • Moved bittyInit back to inline instead of running as an event to allow proper async/await functionality.

  • Moved bittyReady back to inline instead of running as an event to allow proper async/await functionality.

  • Added data-use which sends a signal from an element which is only processed by the element itself (e.g. if there are several elements with the same data-use or data-send values the other aren't processed). This means you don't have to check .isSender or isTarget if you don't need to update other elements from a signal. (You'd still need them for doing different things when every element needs to be updated differently depending on if it's the sender/target or not.)

    The data-use attribute picks up events from child element the same way data-send does.

  • Moved ev.sender to el.sender The sender element is no longer appended to the event. It's added to the element instead so that all general usage can be done through the element (e.g. el) argument.

  • Renamed el.getString(KEY) to el.ds(KEY)

  • Renamed el.getInt(KEY) to el.dsInt(KEY)

  • Renamed el.getFloat(KEY) to el.dsFloat(KEY)

  • Removed ev.target.getString(KEY)

  • Added: el.targetDs(KEY)

  • Removed ev.target.getInt(KEY)

  • Added: el.targetDsInt(KEY)

  • Removed ev.target.getFloat(KEY)

  • Added: el.targetDsFloat(KEY)

  • Removed ev.target.stringValue(KEY)

  • Added: el.targetVal(KEY)

  • Removed ev.target.intValue(KEY)

  • Added: el.targetValInt(KEY)

  • Removed ev.target.floatValue(KEY)

  • Added: el.targetValFloat(KEY)

  • Removed ev.sender.getString(KEY)

  • Added: el.senderDs(KEY)

  • Removed ev.sender.getInt(KEY)

  • Added: el.senderDsInt(KEY)

  • Removed ev.sender.getFloat(KEY)

  • Added: el.senderDsFloat(KEY)

  • Removed ev.sender.stringValue(KEY)

  • Added: el.senderVal(KEY)

  • Removed ev.sender.intValue(KEY)

  • Added: el.senderValInt(KEY)

  • Removed ev.sender.floatValue(KEY)

  • Added: el.senderValFloat(KEY)

  • Added el.val

  • Added el.valInt

  • Added el.valFloat

  • Added el.targetBittyId

  • Added el.senderBittyId

  • Renamed el.bittyParentId to el.bittyParentBittyId to be consistent with other ...BittyId properties.

  • Renamed el.matchTarget(KEY) to el.matchTargetDs(KEY)

  • Renamed el.matchSender(KEY) to el.matchSenderDs(KEY)

  • Added ev.val these are for when a method is run without a receiver and the target is an input.

  • Added ev.valInt these are for when a method is run without a receiver and the target is an input.

  • Added ev.valFloat these are for when a method is run without a receiver and the target is an input.

  • Added ev.ds(KEY) these are for when a method is run without a receiver and the target is an input.

  • Added ev.dsInt(KEY) these are for when a method is run without a receiver and the target is an input.

  • Added ev.dsFloat(KEY) these are for when a method is run without a receiver and the target is an input.

  • Added el.ds(KEY) which is an alias to el.dataset.key which gets returns as a string.

  • Added el.senderDs(KEY) which is an alias to el.sender.dataset.key which gets returns as a string.

  • Added el.targetDs(KEY) which is an alias to ev.sender.dataset.key which gets returns as a string.

  • Improved error message when data-connect doesn't make a connection.

Version: 6.0.0-rc3

DATE TBD

  • Added event.target.stringValue the returns the event.target.value as a string. (this is effectively an alias that's only here to keep the mental model with .intValue and .floatValue consistent)

  • Added event.target.intValue the returns the event.target.value as an integer.

  • Added event.target.floatValue the returns the event.target.value as an float.

  • Added event.sender.stringValue the returns the event.sender.value as a string. (this is effectively an alias that's only here to keep the mental model with .intValue and .floatValue consistent)

  • Added event.sender.intValue the returns the event.sender.value as an integer.

  • Added event.sender.floatValue the returns the event.sender.value as an float.

  • Added event.target.getString(KEY)

  • Added event.target.getInt(KEy)

  • Added event.target.getFloat(KEY)

  • Added event.sender.getString(KEY)

  • Added event.sender.getInt(KEY)

  • Added event.sender.getFloat(KEY)

  • Added el.matchTarget(KEY) Note that there is no string/int/float because the values are always stored as strings so the comparison doesn't have to convert them since it would just be the same thing anyway

  • Added el.matchSender(KEY) Note that there is no string/int/float because the values are always stored as strings so the comparison doesn't have to convert them since it would just be the same thing anyway

  • Remove setting style="display: block;". Leaving this as a decision at implementation time.

Version: 6.0.0-rc2

Nov. 25, 2025

  • Updated the data-connect process so that URLs that start with a / get updated with the origin of the window.location.href to avoid issues when using CDNs for the bitty-#.#.#... file.

    At this time, relative URLs that start with a . are not yet supported.

Version 6.0.0-rc1

Nov. 24, 2025

  • Updated license to CC0 for the public domain.

  • Added this.api.getBittyParent(el) that returns the bitty element that contains the el element. If the el element is a bitty tag it returns itself.

  • Added data-bittyid attrs to everything so they can be used for comparisons.

  • Events are captured from every element (not just those with data-send and data-receive). Events bubble up the document where bitty looks for them on the window object.

  • For the bitty events, the target that the event happened on and then the sender that is the element that had the data-send on it are both included. (e.g. event.target is where the event happened at event.sender i the element with data-send that sent the signal. The event.target and event.sender will be the same element if the event.target is what had the data-send attribute. Otherwise, they are different.

  • Added el.bittyParent that contains a reference to the bitty parent element

  • Added el.bittyParentId that contains a reference to the bitty parent element's data-bittyid

  • Removed this.api.match() in favor of el.isTarget and el.isSender. (this.api.matchTarget() and this.api.matchSender() existed briefly but were also removed as part of the transition to el.isTarget and el.isSender.

  • Added el.isTarget() which is boolean that indicates if the element is the one that generated the event.

  • Added el.isSender() which is boolean that indicates if the element is the one with data-send that sent the event (which may or may not be the same as the target identified by el.isTarget()

  • Events bubble up until they hit an element with a data-send attribute. (e.g. you can click an element that doesn't have a data-send attribute that's inside a div that does and the one from the div will fire)

  • Renamed data-send to data-init on the <bitty-#-#> tags to match data-init behavior on child elements (i.e. only fires once when the element is initialized)

  • data-send attributes on <bitty-#-#> elements now send events (e.g. from clicks) the same way they do for child elements.

  • Converted bitty... pseudo-events to classes extended from Event. All events are set to bubble up the document.

  • Created this.api.localTrigger(SIGNAL_STRING) that only sends the signal to the local element without bubbling and without descending into child bitty elements.

  • Added el.getString(KEY) which goes up the DOM looking for a matching dataset.KEY that's a String.

  • Added el.getInt(KEY) which goes up the DOM looking for a matching dataset.KEY that's an Int.

  • Added el.getFloat(KEY) which goes up the DOM looking for a matching dataset.KEY that's a Float.

  • Removed bittyCatch() functionality. It's not necessary now that all events are examined by this listener without extra filtering.

  • Removed adopted stylesheet to set `` to block. This saves loading duplicate stylesheets for each instance.

    Using thie.style.display to set element to block. That way it can be changed easier by editing the style directly (e.g. by updated the style in the bittyInit function)

  • Cleaned up tests

Version: 5.1.0-rc6

Nov. 22, 2025

  • Fixed bug where Text Nodes didn't work properly with replaceAll in this.api.makeHTML(), etc...

Version 5.1.0-rc5

Nov. 22, 2025

  • Set up this.api.trigger(SIGNAL) to send event that bubbles up to the document root

  • Set up this.api.forward(EVENT, SIGNAL) to send event that bubbles up to the document root

  • Set up so data-bittyid attrs are added on connectedCallback instead of at each event call.

  • Set up so data-bittyid attrs are added on this.api.makeElement()

  • Set up so data-bittyid attrs are added on this.api.getElement()

  • Set up so data-bittyid attrs are added on this.api.makeHTML()

  • Set up so data-bittyid attrs are added on this.api.getHTML()

  • The net result is the data-bittyid updates is that anything added with the this.api.WHATEVER that has a data-send, data-receive, or data-init, will have a data-bittyid added. Anything that's added outside the API won't, event if it has one of the bitty data-* attributes.

    (The prior behavior was to look query for elements with data-* attrs on every event. This was the first approach to deal with mutation observer having a race condition when trying to add them. Doing everything explicitly through the API prevents thrashing for things like moving input range sliders)

Version: 5.1.0-rc4

Nov. 21, 2025

  • Refactor to process elements with data-receive directly instead of adding them to a list that gets processed as a batch.

Version: 5.1.0-rc3

Nov. 20, 2025

  • Added the ability to convert single HTML Elements to text for find and replace in makeTXT()

  • Added the ability to convert arrays of HTML Elements to text for find and replace in makeTXT()

  • Added the ability to convert single Document Fragments to text for find and replace in makeTXT()

  • Added the ability to convert arrays of Document Fragments to text for find and replace in makeTXT()

  • Added the ability to convert arrays of String to text for find and replace in makeTXT()

  • Added the ability to convert single HTML Elements to text for find and replace in makeHTML()

  • Added the ability to convert arrays of HTML Elements to text for find and replace in makeHTML()

  • Added the ability to convert single Document Fragments to text for find and replace in makeHTML()

  • Added the ability to convert arrays of Document Fragments to text for find and replace in makeHTML()

  • Added the ability to convert arrays of String to text for find and replace in makeHTML()

  • Added the ability to convert single HTML Elements to text for find and replace in makeElement()

  • Added the ability to convert arrays of HTML Elements to text for find and replace in makeElement()

  • Added the ability to convert single Document Fragments to text for find and replace in makeElement()

  • Added the ability to convert arrays of Document Fragments to text for find and replace in makeElement()

  • Added the ability to convert arrays of String to text for find and replace in makeElement()

  • Added the ability to convert single HTML Elements to text for getTXT()

  • Added the ability to send HTML elements as substitutions for getElement().

  • Added the ability to send HTML elements as substitutions for getHTML().

  • Added the ability to send Document Fragments as substitutions for getElement().

  • Added the ability to send Document Fragments as substitutions for getHTML().

  • Added the ability to send Arrays of HTML elements as substitutions for getElement().

  • Added the ability to send Arrays of HTML elements as substitutions for getHTML().

  • Added the ability to send Arrays of Document Fragments as substitutions for getElement().

  • Added the ability to send Arrays of Document Fragments as substitutions for getHTML().

  • Added data-init for elements that fires a signal that they receive when bitty first initializes.

  • Only add data-bittyid to elements that have a data-send, data-receive, data-init attributes.

  • Stopped adding bittyid with UUID from events.

  • Removed data-r alias for data-receive. Better to have things be explicit and only have a single way to do it. (data-s was removed in -rc2)

Version: 5.1.0-rc2

Nov. 17, 2025

  • Removed mutation observer and querying data-receive directly to prevent race condition on events.

  • Removed data-s alias for data-send. Better to have things be explicit and only have a single way to do it.

Version: 5.1.0-rc1

Nov. 13, 2025

  • Added bittyReady() call that works like bittyInit() but happens after this.runSendFromComponent();

  • If bittyReady() is defined as async (i.e. async bittyReady()) it's called with await

  • Added this.api.trigger(signal) which works like this.api.forward(null, signal). The event type is bittytrigger

  • With this.api.trigger(signal) using this.api.forward(event, signal) with event set to null is now an error. It's explicitly for forwarding an existing event.

  • Added await:signal to data-send and this.api.forward(event, "await:signal"), and this.api.trigger("await:signal") to await async methods.

  • Added makeTXT() which returns a text value from a template after running substitutions over it.

  • Refactored makeHTML() and makeElement() to use makeTXT()

  • Added data-s alias for data-send and data-r alias for data-receive

Version 5.0.0

Nov. 7, 2025

This is a collection of renames for clarity and to help avoid collisions with other code that might add data- attributes. No actual functionality is changed, but the renames require a version number bump.

  • Renamed getElements to getHTML for clarity. (getElement remains the same and pulls individual HTML elements vs getHTML which pulls document fragments.)

  • Renamed makeElements to makeHTML for clarity. (makeElement remains the same and makes individual HTML elements vs makeHTML which makes document fragments.)

  • Renamed response.ok to response.value for clarity and to avoid confusion with things like response.ok === false. (i.e. response.value === false takes less mental overhead)

  • Renamed data-uuid to data-bittyid to namespace and prevent collisions with anything else the wants to use data-uuid

Version: 4.0.0

Nov. 6, 2025

  • Bumping the version number. No changes since v4.0.0-rc1.

Version: 4.0.0-rc1

Oct. 30, 2025

  • Renamed this.api.getFragment to this.api.getElements (this is a breaking change so it's a major version bump)

  • Renamed this.api.makeFragment to this.api.makeElements (with the this.api.getFragment change)

  • Added bittyCatch(event) that catches any events that don't have a .target.dataset.send value. This provides a way to catch message like from .postMessage() and decided what to do with them.

  • Removed the this.api.fn set up. It's not worth the overhead compared to just using functions directly.

  • Using a space instead of a | to separate signals and class names. This mimics class="some things" from CSS and is easier to type. Each keys must be a set of characters without spaces so there's no need for an explicit |.

  • Changed listeners to be on the window to catch things like .postMessage(). TODO: Make sure that's cool to listen on the window instead of the document.

  • Changed internal use of event.target.dataset.forward key for this.api.forward to event.bitty.forward to avoid collisions on the event.target.dataset

  • Fixed bug in this.api.forward where an event that doesn't have a .target or .target.dataset gets overridden.

  • UUID are added to events that are being forwarded if they don't already exist.

  • Migrated docs site to use variables to make it easier to upgrade versions moving forward.

Version: 3.0.0

Oct. 26, 2025

This isn't a huge jump from Version 2.x, but there are breaking changes so it gets a new number. These are quality of life improvements that make it easier to get external content while providing better errors if something goes wrong.

The details:

  • Did the following renames and additions for consistent API names for getting and adding documet fragments and elements:

    • Renamed this.api.getHTML() to this.api.getFragment() which pulls in an external file and returns it as a document fragment.

    • Added this.api.getElement() which pulls in an external file and retuns it as a single HTML Element (if there's more than one node at the top of the file only the first one gets returned).

    • Renamed this.api.useTemplate() to this.api.makeFragment() which takes a string to use as a template and returns a document fragment.

    • Added this.api.makeElement() which takes a string to use as a template and returns a single HTML Element.

  • TODO: Added getCSS() which pulls an external CSS file and loads it into the document as an adopted stylesheet.

  • Added custom BittyError class for better error handling with this.api.getTHING calls that use .fetch and for JSON parsing errors.

  • When returning values from fetches return an object with either { ok: PAYLOAD }, or { error: { /* details */ } } with extra data coming down in the error object like status codes for HTML errors.

  • Added connectedMoveCallback() to prevent connectedCallback() from firing if a component is moved.

  • Moved everything in the init into the conditional check to see if the component makes a connection to a class. Previous a few things happend prior to the connection attempt. Moving them in prevents UUIDs from being added until a conneciton has been made. Shouldn't make any real difference. It just feels more natural.

  • Added and refined the test suite for increased coverage.

Version: 2.0.0-rc2

Oct. 21, 2025

  • Properly returned undefined if there's a problem pulling an external HTML from getHTML().

  • Properly returned undefined if there's a problem pulling an external JSON from getJSON().

  • Properly returned undefined if there's a problem pulling an external SVG from getSVG().

  • Properly returned undefined if there's a problem pulling an external TXT from getTXT().

Version: 2.0.0-rc1

Oct. 19.2025

  • Renamed this.api.fetchJSON() to this.api.getJSON() to match case used with JSON.stringify(), and switch from fetch to get prelude.

  • Added substitutions param to this.api.getJSON(url, subs=[]) so all .getTHING(url, subs=[]) methods have the same behavior.

  • Added options={} to this.api.getJSON() to pass options to the fetch call. The signature is this.api.getJSON(url, subs=[], options={}).

  • Added this.api.getHTML(url, subs=[], options={}) that loads an HTML file and does find replace with subs on the initial string where subs is an array of arrays with the patterns to match and replace. The patterns can be strings or regex.

  • Added this.api.getSVG(url, subs=[], options={}) that loads an SVG file and does find replace with subs which is an array of arrays with the patterns to match and replace. The patterns can be strings or regex.

  • Added this.api.getTXT(url, subs=[], options={}) that returns the text content of an external file.

  • Switched to array or arrays for find replace strings for this.api.useTemplate(templateString, subs=[]) and defaulting to an empty array so the argument doesn't have be sent which is consistent with the .getTHING(url, subs=[])

  • Added an adoptedStylesheet that sets the <bitty-x-x> tag to display: block.

  • Added this.api.match(event, el, key=""). If a key exists, it's used to check the dataset of the event and the el and returns true if they match. If no key is provided the uuid of the event and el are compared instead.

  • Allowing whitespace around data-send attributes.

  • Allowing whitespace around data-receive attributes.

  • Added .useHTML(content, subs = []) that converts a string from content into an HTML template (doing the substitutions) then returns the first element from it as an HTML element instead of a document fragment.

  • Ingesting window.bittyFunctions from the page and const functions inside the module and providing access the them via this.api.fn.FUNCTION()

  • Ingest local const functions functions from the bitty component file that get added as this.api.fn.FUNCTION()

  • Ingested functions are bound with .bind() so that their this. is the bitty component's element itself.

  • Combined this.config and this.metadata in the constructor().

Version: 1.3.0

Oct. 13, 2025

  • Releasing v1.3.0. No changes from v1.3.0-rc1.

Version: 1.3.0-rc1

Oct. 6, 2025

  • Added fetchJson(url) method which can be called with this.api.fetchJson(url). Returns the data object if everything works. Otherwise, throws an error and returns undefined.

  • Added useTemplate() to assemble a example while doing a find and replace of text

Version: 1.2.0-rc1

Oct. 6, 2025

  • When using data-connect if the value matches a class on the window object it's used. For example: data-connect="ExampleClass" connects to window.ExampleClass.

    Previously, the class had to be in a window.bittyClasses object (e.g. window.bittyClasses = { ExampleClass: class {} };

Version: 1.1.0-rc2

Oct. 6, 2025

  • Updated console error message if no class to connect to can be found.

Version: 1.1.0-rc1

Oct. 4, 2025

  • <bitty-COMPONENT_VERSION> can be called without a data-connect attribute. When it is, it looks for a window.BittyClass on the page and uses it if it's available.

  • Removed .error() method in favor of calling console.error() directly in order to get useful line numbers.

Version: 1.0.0

Oct. 4, 2025

  • Moved v1.0.0-rc5 to v1.0.0

  • Tag name is <bitty-1-0>

Version: 1.0.0-rc5

Oct. 4, 2025

  • Fixed bug with events not being passed to signal processing.

Version: 1.0.0-rc4

Oct. 1, 2025

  • Renamed <bitty-js> component tag to <bitty-MAJOR_VERSION> for semantic versioning.

  • Call bittyInit() with await if it's an async function.

  • Moved bittyInit() before the data-send calls from the component so the module can set things up before the signals start being sent.

  • Allowing this.api.forward() to be called with a null event (e.g. this.api.forward(null, "anotherFunction");). This is done to allow things like forwarding a signal from bittyInit() or any other function where there isn't an event to pass along.

  • Fixed bug where new receivers weren't being added properly when they were child nodes of new nodes being added (and the top layer didn't have a data- attr in it)

  • Added tests for this.api.querySelector() and document.querySelector()

  • Update site to use variables for version numbers to make them easier to maintain instead of having them in multiple places for different displays.

  • Made this.metadata an object and moved version into it (along with copyright and license)

Version: 1.0.0-rc3

Sept. 23, 2025

  • Fixed bug where this.api.send() would update the data-send attribute on the original element so it no longer send the same signal. The method is now called this.api.forward().

  • Removed data-watch. Any element can receive a signal from anywhere else on the page without extra overhead. The biggest negative to this approach is that you have to be a little more careful to avoid naming collisions. But, the ease of use is well worth that minor trade off.

  • Added Test Suite Results Report to site for easier viewing.

  • Applying passed and failed colors to individual tests for quicker scanning.

  • Updated tests to use unique signal names to avoid collisions.

Version: 1.0.0-rc2

Sept. 19, 2025

  • data-watch is applied to bitty-js elements directly instead of individual elements. The signals are send back down the tree when one is received via data-watch

  • Refactored multiple UUID() calls to single function to save a few characters.

Version: 1.0.0-rc1

Sept. 18, 2025

Initial release candidate for version 1.0.0.

No changes since v0.4.0.

Version: 0.4.0

Sept. 17, 2025

  • Flipped module arguments from example(el, event) to example(event, el) since that lines up better with the order of send/receive. (i.e. the event is what gets sent from data-send and the el is the element from data-receive

  • Remove HTML output of error message. They're nice during debug but wouldn't want them showing up in prod. Could use a debug flag but that's more overhead than I want to add. So, message just go to the console.

Version: 0.3.0

Sept. 17, 2025

Big refactor based on experience using 0.2.0.

  • Added more generic error handing where you just send a message and it outputs to the page along with the UUID of the element that had the problem. The elements have bitty-js-error style classes on them so their display can be controlled via CSS.

  • Updated to use the name data-connect instead of data-module

  • The data-connect can point to either a module or to a class in a global bittyClasses window object.

  • Alternate module classes are selected by passing a | followed by the desired class name instead of using data-use. (e.g. data-connect="./module.js|AltClass)

  • If there's an bittyInit() function in a module it's the first thing that gets called once bitty is loaded.

  • Removed data-call. The data-send attribute is used for everything. Nothing would fire from it in prior versions if there wasn't at least one element with a data-receive with the same name. Now it calls the function once with no element if there's no associated data-receive

  • Added test suite.

  • The biggest update is changing data-b, data-c, data-r, and data-s to data-batch, data-call, data-receive, and data-send, respectively. I originally use the shorter names to reduce the text length. The increased clarity of the longer names is worth the few extra characters.

  • Remove expanded error messages. They were nice, but added a bunch of size without a significant improvement.

  • The other big change is removing the leading _ and $ characters from function names. They were originally put in place to create a naming convention that differentiated between functions that were hit with data-call and data-send. In practice, that wasn't necessary.

  • Removed the data-batch attribute. While there are some use cases where it might be nice, the extra complexity, mental overhead, and maintance aren't worth it.

  • Added Mutation Observer so data-* functionality works on elements that are added after initialization.

  • Added Mutation Observer to watch for removed elements to pull them out of the mix when they get gone.

  • Split the web site page up into individual template for sections. Much nicer to work with.

  • Updated example functions to always use (el, _event) instead of (el, _) for clarity.

  • Removed inert/include/ignore from the top level components then remove them. This was originally a way to tell parent components to ignore specific calls and signals from children. After using it a bit, I don't think the complexity is worth it. Better to just name functions an signals so they don't collide.

  • Isolated default signal travel to only go down the DOM. That is, if there are nested bitty-js tags, signals from the child tags don't propagate to the parent by default. (see data-watch for how to send signals up and to siblings)

  • Added data-watch so parents and siblings can receive signals from their children and other siblings. With this, signals can be sent up, down, and to siblings.

  • Ignore events directly from bitty-js elements (i.e. only process events from child elements). This is done to prevent data-send attributes on bitty-js elements from firing repeatedly when things inside the element send events (e.g. clicks).

  • Renamed scripts directory to modules.

  • Moved bitty source script file under bitty-versions/bitty-v0.3.0.js and copying to prod at the root of the site (i.e. /bitty-v0.3.0.js) so examples look cleaner.

  • Renamed data-bridge to data-connect for clarity.

  • Renamed this.widget.bridge to this.module.api in bitty-js

  • Added this.api.send(key, event) to send/forward events from inside modules.

  • Added Progressive Enhancement and JavaScript Data comparison examples.

  • Added/polished a bunch of other examples.

Version: 0.2.3

June 5, 2025

Lots of error handling work in this one.

  • Moved UUID generation for the bitty-js and all data-* reactive elements to the first thing in connectedCallback() to aid in error messaging.
  • Made connectedCallback() and async function to throw loading the widget module into its own funcitoun
  • Created an #errors private var to store error messages and help by ID.
  • Added the first few error messages

  • Added this.error() for outputting errors. It takes two optional arguments: an ID and an Element. The ID maps to the IDs in #errors. They're used to add detail and help message to the error output.

    The ID defaults to 0 which is an unclassified error type. The message for that ID includes a note to the developer to use an ID to classify the error. I consider it a bug if an appropriate ID doesn't exist and request an issue be open to fix it.

    The this.error() method dumps the bitty-js elemnet after the message.

    If an element was passed to this.error() it's dumped out as well.

    The error message end up being pretty long. The end up adding a bunch of lines to the source file. That's an explicit decision aimed at making bitty easier to work with.

  • Added top level debug function that uses a debug search query param from the window.location to see if it should output.

    Only thing I don't like about it is that it shows the function's line number instead of the line number from where it was called. Something to look into.

  • The debug function takes an optional element. It dumps it to the console if one comes in.
  • Renamed data-wires to data-bridge. Fits better and maps nicer to the .bridge coming back in from the support class.
  • Set up to load the default class exported from a widget module if no other class is defined (which happens with 'data-widget')
  • Moved all examples to use a default class export instead of a named class
  • Added a data-widget attribute to the bitty-js elements to allow using multiple classes from inside a single supporting .js module file.
  • bitty-component-error and bitty-element-error classes are added to the class list of elements where errors occur.

Version: 0.2.2

June 4, 2025

Added UUIDs for pending error handling. Shuffeld a bunch of stuff around to make the examples look nicer.

  • Added uuids as data-uuid attrs to all elements with related data-* attributes. Added them to the bitty-js elements too. I was originally thinking I'd add the UUIDs on the elements internally (i.e. el.uuid instead of el.dataset.uuid).

    I decided on the attribute approach because it offers two benefits: 1. You can see the IDs in the Element tree view of developer consoles, and 2. You can address them with CSS to update styles based on the UUID. Both of those thing will go to supporting better error messages and bug hunting.

  • Mostly content updates largely focused on detailing the opening counter example.
  • Added CONTRIBUTING file.
  • Added watcher script to build site when files change.
  • Refined the initial counter example to remove the text and change the private variable to this.num to make the examples look nicer.
  • Moved the Examples section directly below the initial basic functionality overview section.
  • Added reminders all over the place to edit the template and instead of the output for HTML page (which would be overwritten. ask me how I know).
  • Started adding prettier-ignore comments to code snippets to prevent the display output from being mangled.
  • Started stripping prettier-ignore comments from the HTML output so it doesn't show in the example
  • Same goes for // deno-fmt-ignore-file in .js files
  • Added script to maintain the open open/closed states of the section details elements across page loads. (Having them close every time I made a change was maddening)
  • Moved all the example .js files into the site root. Not a fan of that in general, but it makes the examples look better since the path is shorter.

Version: 0.2.1

June 3, 2025

Some more wiring and some support tools for making the demo/docs site.

  • Made a Hello, World example that shows basic features. (Compared to the single button press from the prior first example.)
  • Showing Hello, World code as part of the example.
  • Load templates automatically.
  • Throttling via .requestAnimationFrame().
  • Renamed data-f to data-c (i.e. "call") for clarity.
  • Renamed data-prep attribute on bitty-js tag to data-call (i.e. "call") for clarity.
  • Renamed data-init attribute on bitty-js tag to data-send so it matches data-s more closely.
  • Made basic site builder for landing page.
  • Moved everything into details elements for the landing page.

Version: 0.2.0

June 3, 2025

Setting up a bunch of the basic wiring.

  • Rewrite to provide direct access to receiving elements. They are fully accessible in the send/receive functions. (As compared to the 0.1.0 approach which required explicitly defining what would happen via an update (e.g. update .innerHTML or .value).
  • Renamed data-wrapper and the target Wrapper class to data-wires and Wires. (bitty.js is the wrapper. The Wires class is how things are hooked up.).
  • Added data-call attribute parsing to bitty-js tag. It runs functions like data-c but does so prior to adding the event listeners to the element.
  • Added data-batch attribute processing to bitty-js tags. It operates like data-b but fires before event listeners are added.
  • Added data-ignore attribute to allow components to avoid calls to the named functions. (Send signals bubble up to parents of nested components by default. This provides a way to ignore them).
  • The bitty-js element looks for an .init() method in the Wires class. If it finds one it calls it during the initialization process.
  • Passing both the element and the triggering event to the send/receive functions.
  • Moved to using data-b explicitly to separate block calls from individual function calls.
  • Order of operations is: function calls, batch calls, single send calls.
  • Temporarily removed preflight check until global functionality is defined.
  • Created example of loading a template via the .init() call back to the Wires class.
  • Created example with nested components.
  • Created example with parent of child components pulling data from the children to do a calculation.
  • Created example showing parent ignoring send signals from children.
  • Created example showing on components loading a child component via a template that becomes fully reactive.

Version: 0.1.0

June 2, 2025

Getting the project started.

  • Initial prototype.

  • <bitty-js>; wraps elements to provide them with reactive capabilities.

  • Basic data-c, data-s, and data-r in place to call functions, send, and receive updates, respectively.

  • Functionality is loaded using data-wrapper to point to a module to load. The module must export a Wrapper class that gets loaded and used to provide functions and send/receive callbacks.

  • Uses string prefixes to make determinations about how to handle data through the send/receive channels (e.g. htmlSOMETHING updates .innerHTML of an element while valueSOMETHING updates the .value).

  • Defined convention for functions. data-c maps to functions in the Wrapper class that start with a _ (underscore). The data-s and data-r attributes map to functions in the Wrapper class that start with a $ (dollar sign).

  • Decided against using data-c data-s and data-r on the bitty.js tags. That would involved a lot of extra overhead in parsing to differentiate between the top level element and the content it wraps. Using data-send instead as a replacement for data-c. Others, TBD.

  • Set up data-c="batchSOMETHIGN" functionality to send a single single that gets turned into multiple signals in the Wrapper.

  • Defined convention of using .batches to look for batches. It must be a hash where the keys match the incoming request and the value is an array of functions to run.

  • Defined .bridge to allow Wrapper functions to access the parent bitty-js element.

  • Scoped event listeners to the bitty-js elements.

  • Set up data-listeners attribute on bitty-js tags to override the default listeners (which are input and click).

  • Created example that stores its own state.

  • Created example that updates an element with the same content it sent (i.e. verified feedback can be avoided).

  • Created example using data-send to load initial values.

  • Created example that sends multiple signals.

  • Created example with multiple elements receiving the same signal.

  • Created example showing how to update global CSS variables/properties.

  • Created example showing custom event listeners.

  • Created example showing how to update CSS variables/properties scoped to the content of individual bitty-js tags.

  • Examples use parent page's CSS for styling. It confirms I'm happy with the choice to use the light DOM instead of the shadow DOM.

  • Set up initial preflight check to ensure functions are in place.

welcome to the bitty blog