V0.4.0

.gitignore

@@ -181,6 +181,9 @@ out
 /examples/build
 
 package-lib.json
-src/scratch.js
+src/scratch*.js
 src/spike.js
-src/test.js
+src/test*.js
+src/assert.js
+src/runner.js
+.aider*

README.md

@@ -2,9 +2,9 @@
 
 ⚠️ Expect API changes until v1.0.0 ⚠️
 
-Current version: 0.3.23.
+Current version: 0.4.0
 
-Bundle Size: 14kb minified & gzipped.
+Bundle Size: 15kb minified & gzipped.
 
 A simple yet powerful toolkit for interactive islands in web applications. No build step required.
 
@@ -20,7 +20,7 @@ Note that Cami specializes in bringing rich interactivity to your web applicatio
   const { html, ReactiveElement } = cami;
 
   class CounterElement extends ReactiveElement {
-    count = 0
+    count = 0;
 
     template() {
       return html`
@@ -31,21 +31,21 @@ Note that Cami specializes in bringing rich interactivity to your web applicatio
     }
   }
 
-  customElements.define('cami-counter', CounterElement);
+  customElements.define("cami-counter", CounterElement);
 </script>
 ```
 
 [Documentation](https://camijs.com/) | [API Reference](https://camijs.com/api/) | [CDN Link](https://unpkg.com/cami@latest/build/cami.cdn.js) | [Introduction](https://camijs.com/)
 
 ## Learn By Example
 
-* [Counter](https://camijs.com/learn_by_example/counter/)
-* [Interactive Registration Form](https://camijs.com/learn_by_example/form_validation/)
-* [Todo List with Server State Management](https://camijs.com/learn_by_example/todo_list_server/)
-* [Cart with Client & Server State Management](https://camijs.com/learn_by_example/cart/)
-* [Blog with Optimistic UI](https://camijs.com/learn_by_example/blog/)
-* [Nested Key Updates](https://camijs.com/learn_by_example/nested_updates/)
-* [WAI-ARIA Compliant Modal](https://camijs.com/learn_by_example/modal/)
+- [Counter](https://camijs.com/learn_by_example/counter/)
+- [Interactive Registration Form](https://camijs.com/learn_by_example/form_validation/)
+- [Todo List with Server State Management](https://camijs.com/learn_by_example/todo_list_server/)
+- [Cart with Client & Server State Management](https://camijs.com/learn_by_example/cart/)
+- [Blog with Optimistic UI](https://camijs.com/learn_by_example/blog/)
+- [Nested Key Updates](https://camijs.com/learn_by_example/nested_updates/)
+- [WAI-ARIA Compliant Modal](https://camijs.com/learn_by_example/modal/)
 
 ## Key Concepts:
 
@@ -65,34 +65,34 @@ To use it, you'll need to create a custom element and register it with `customEl
 <script src="https://unpkg.com/cami@latest/build/cami.cdn.js"></script>
 <article>
   <h1>Counter</h1>
-  <counter-component
-  ></counter-component>
+  <counter-component></counter-component>
 </article>
 <script type="module">
   const { html, ReactiveElement } = cami;
 
-  class CounterElement extends ReactiveElement {
-    count = 0
-
-    template() {
-      return html`
-        <button @click=${() => this.count--}>-</button>
-        <button @click=${() => this.count++}>+</button>
-        <div>Count: ${this.count}</div>
-      `;
+  customElements.define(
+    "counter-component",
+    class extends ReactiveElement {
+      count = 0;
+
+      template() {
+        return html`
+          <button @click=${() => this.count--}>-</button>
+          <button @click=${() => this.count++}>+</button>
+          <div>Count: ${this.count}</div>
+        `;
+      }
     }
-  }
-
-  customElements.define('counter-component', CounterElement);
+  );
 </script>
 ```
 
 ## Features include:
 
-* **Reactive Web Components**: Simplifies front-end web development with `ReactiveElement`. This is done through [Observable Properties](https://camijs.com/features/observable_property). They are properties of a `ReactiveElement` instance that are automatically observed for changes. When a change occurs, the `ReactiveElement` instance is notified and can react accordingly by re-rendering the component. Observable properties support deep updates, array changes, and reactive attributes, making it easier to manage dynamic content. Lastly, this removes the boilerplate of `signal()`, `setState()`, or `reactive()` that you might find in other libraries.
-* **Async State Management**: Easily manage server data. Our library provides a simple API for fetching and updating data with [`query` and `mutation`](https://camijs.com/features/async_state_management). Use the `query` method to fetch and cache data, with options to control how often it refreshes. The `mutation` method lets you update data and immediately reflect those changes in the UI, providing a smooth experience without waiting for server responses.
-* **Cross-component State Management with  Stores**: Share state across different components with ease using a single store using [`cami.store`](https://camijs.com/features/client_state_management). By default, this uses `localStorage` to persist state across page refreshes. This is useful for storing user preferences, authentication tokens, and other data that needs to be shared across components. This is also useful for storing data that needs to be shared across tabs.
-* **Streams & Functional Reactive Programming (FRP)**: Handle asynchronous events gracefully with [Observable Streams](https://camijs.com/features/streams/). They offer powerful functions like `map`, `filter`, `flatMap`, and `debounce` to process events in a sophisticated yet manageable way, for clean & declarative code.
+- **Reactive Web Components**: Simplifies front-end web development with `ReactiveElement`. This is done through [Observable Properties](https://camijs.com/features/observable_property). They are properties of a `ReactiveElement` instance that are automatically observed for changes. When a change occurs, the `ReactiveElement` instance is notified and can react accordingly by re-rendering the component. Observable properties support deep updates, array changes, and reactive attributes, making it easier to manage dynamic content. Lastly, this removes the boilerplate of `signal()`, `setState()`, or `reactive()` that you might find in other libraries.
+- **Async State Management**: Easily manage server data. Our library provides a simple API for fetching and updating data with [`query` and `mutation`](https://camijs.com/features/async_state_management). Use the `query` method to fetch and cache data, with options to control how often it refreshes. The `mutation` method lets you update data and immediately reflect those changes in the UI, providing a smooth experience without waiting for server responses.
+- **Cross-component State Management with Stores**: Share state across different components with ease using a single store using [`cami.store`](https://camijs.com/features/client_state_management). By default, this uses `localStorage` to persist state across page refreshes. This is useful for storing user preferences, authentication tokens, and other data that needs to be shared across components. This is also useful for storing data that needs to be shared across tabs.
+- **Streams & Functional Reactive Programming (FRP)**: Handle asynchronous events gracefully with [Observable Streams](https://camijs.com/features/streams/). They offer powerful functions like `map`, `filter`, `flatMap`, and `debounce` to process events in a sophisticated yet manageable way, for clean & declarative code.
 
 Please visit our [Documentation](https://camijs.com/), [API Reference](https://camijs.com/api/), [Examples](https://camijs.com/learn_by_example/counter/), or [Core Concepts](https://camijs.com/features/observable_property/) to learn more.
 
@@ -109,7 +109,6 @@ That said, I like the idea of declarative templates, uni-directional data flow,
 - **Lean Teams or Solo Devs**: If you're building a small to medium-sized application, I built Cami with that in mind. You can start with `ReactiveElement`, and once you need to share state between components, you can add our store. It's a great choice for rich data tables, dashboards, calculators, and other interactive islands. If you're working with large applications with large teams, you may want to consider other frameworks.
 - **Developers of Multi-Page Applications**: For folks who have an existing server-rendered application, you can use Cami to add interactivity to your application.
 
-
 ## Examples
 
 To learn Cami by example, see our [examples](https://camijs.com/learn_by_example/counter/).
@@ -135,7 +134,6 @@ JSDoc is used to build the API reference. We use Material for MkDocs for the doc
 
 To make JSDoc be compatible with MkDocs, we use jsdoc2md to generate markdown files from JSDoc comments. We use then use MkDocs to build the documentation site.
 
-
 ### Testing
 
 We use Jasmine for testing. To run the tests, run:

build_examples.sh

@@ -1,38 +1,18 @@
 #!/bin/bash
-# A ridiculous script to build the example pages
+# A script to build the example pages
 
 set -e
 set -u
 
-# Directory containing the partials
 partials_dir="examples/partials"
-
-# Directory containing the layout
 layout_dir="examples/layouts"
 
-# Placeholder for newline characters
-newline_placeholder="NEWLINE_PLACEHOLDER"
-
 # Remove all old example files
 rm -f examples/*.html
 
 count=0
-# Iterate over each file in the partials directory
 for file in "$partials_dir"/_*.html; do
-  # Check if file exists and is readable
   if [[ -r "$file" ]]; then
-    # Read the content of the file, replacing newline characters with the placeholder
-    content=$(cat "$file" | tr '\n' '\r' | sed "s/\r/$newline_placeholder/g")
-
-    # Escape special characters in the content
-    content=$(echo "$content" | sed -e 's/[\/&]/\\&/g')
-
-    # Check if content was read successfully
-    if [[ $? -ne 0 ]]; then
-      echo "Error reading file $file"
-      continue
-    fi
-
     # Get the base name of the file, without the directory or extension
     base_name=$(basename "$file" .html)
 
@@ -42,27 +22,12 @@ for file in "$partials_dir"/_*.html; do
     # Copy the layout file to a new file with the new name
     cp "$layout_dir/layout.html" "examples/$new_name.html"
 
-    # Check if copy was successful
-    if [[ $? -ne 0 ]]; then
-      echo "Error copying layout to examples/$new_name.html"
-      continue
-    fi
-
-    # Replace the placeholder with the content, then replace the newline placeholder with actual newline characters
-    escaped_content=$(printf '%q' "$content")
-    sed -i '' "s#<!-- YIELD -->#$content#g" "examples/$new_name.html"
-    sed -i '' "s/$newline_placeholder/\\
-/g" "examples/$new_name.html"
-
-    # Check if sed command was successful
-    if [[ $? -ne 0 ]]; then
-      echo "Error replacing placeholder in $new_name.html"
-      continue
-    fi
+    # Use sed to replace the placeholder with the content
+    sed -i '' -e '/<!-- YIELD -->/r '"$file" -e '/<!-- YIELD -->/d' "examples/$new_name.html"
 
     # If it's the first iteration, show "Building Documentation..."
     if [[ $count -eq 0 ]]; then
-      echo "\n📚 Built Examples:"
+      echo -e "\n📚 Built Examples:"
     fi
     echo " ./examples/$new_name.html"
 

docs/api/console_functions.md

@@ -13,7 +13,7 @@ The following functions can be invoked in the developer tools console. When you
 <dd><p>This function disables logging. This is the default setting.</p></dd>
 
 <dt><a href="#events.enable">cami.events.enable()</a> ⇒ <code>void</code></dt>
-<dd><p>This function enables event emissions. This emits the `cami:state:change` event. One can then attach an eventListener to the window to capture this event. This is the default setting.</p></dd>
+<dd><p>This function enables event emissions. This emits the `cami:elem:state:change` event. One can then attach an eventListener to the window to capture this event. This is the default setting.</p></dd>
 
 <dt><a href="#events.disable">cami.events.disable()</a> ⇒ <code>void</code></dt>
 <dd><p>This function disables event emissions.</p></dd>
@@ -42,12 +42,12 @@ cami.debug.disable();
 <a name="events.enable"></a>
 
 ### cami.events.enable()
-This function enables event emissions. This emits the `cami:state:change` event. One can then attach an eventListener to the window to capture this event. This is the default setting.
+This function enables event emissions. This emits the `cami:elem:state:change` event. One can then attach an eventListener to the window to capture this event. This is the default setting.
 
 **Example**
 ```javascript
 cami.events.enable();
-window.addEventListener('cami:state:change', function(e) {
+window.addEventListener('cami:elem:state:change', function(e) {
   console.log('State changed:', e.detail);
 });
 ```