docs: v0.3.11

kennyfrc · Feb 27, 2024 · 3de77d6 · 3de77d6
1 parent 175fdca
commit 3de77d6
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 246 deletions.
diff --git a/docs/api/observable_state.md b/docs/api/observable_state.md
@@ -254,7 +254,7 @@ Changes all elements in the observable's value to a static value
 | --- | --- | --- | --- |
 | value | <code>any</code> |  | The value to fill the array with |
 | [start] | <code>number</code> | <code>0</code> | The index to start filling at |
-| [end] | <code>number</code> | <code>this._value.length</code> | The index to stop filling at |
+| [end] | <code>number</code> | <code>this.__value.length</code> | The index to stop filling at |
 
 **Example**  
 ```js
@@ -271,7 +271,7 @@ Shallow copies part of the observable's value to another location in the same ar
 | --- | --- | --- | --- |
 | target | <code>number</code> |  | The index to copy the elements to |
 | start | <code>number</code> |  | The start index to begin copying elements from |
-| [end] | <code>number</code> | <code>this._value.length</code> | The end index to stop copying elements from |
+| [end] | <code>number</code> | <code>this.__value.length</code> | The end index to stop copying elements from |
 
 **Example**  
 ```js
@@ -556,7 +556,7 @@ Changes all elements in the observable's value to a static value
 | --- | --- | --- | --- |
 | value | <code>any</code> |  | The value to fill the array with |
 | [start] | <code>number</code> | <code>0</code> | The index to start filling at |
-| [end] | <code>number</code> | <code>this._value.length</code> | The index to stop filling at |
+| [end] | <code>number</code> | <code>this.__value.length</code> | The index to stop filling at |
 
 **Example**  
 ```js
@@ -574,7 +574,7 @@ Shallow copies part of the observable's value to another location in the same ar
 | --- | --- | --- | --- |
 | target | <code>number</code> |  | The index to copy the elements to |
 | start | <code>number</code> |  | The start index to begin copying elements from |
-| [end] | <code>number</code> | <code>this._value.length</code> | The end index to stop copying elements from |
+| [end] | <code>number</code> | <code>this.__value.length</code> | The end index to stop copying elements from |
 
 **Example**  
 ```js

diff --git a/docs/features/client_state_management.md b/docs/features/client_state_management.md
@@ -128,111 +128,5 @@ Below is the live demo.
   <article>
   <h4>Products</h4>
   <p>This fetches the products from an API, and uses a client-side store to manage the cart. After adding a product to the cart, you can refresh the page and the cart will still be there as we are persisting the cart to localStorage, which is what you want in a cart.</p>
-  <h5>Product List</h5>
-  <product-list-cami-example></product-list-cami-example>
-</article>
-<article>
-  <h4>Cart</h4>
-  <cart-cami-example></cart-cami-example>
-</article>
-<script type="module">
-  const { html, ReactiveElement } = cami;
-
-  const CartStore = cami.store({
-    cartItems: [],
-    add: (store, product) => {
-      const cartItem = { ...product, cartItemId: Date.now() };
-      store.cartItems.push(cartItem);
-    },
-    remove: (store, product) => {
-      store.cartItems = store.cartItems.filter(item => item.cartItemId !== product.cartItemId);
-    }
-  }, {name: 'CartStore', expiry: 1000 * 60 * 60 * 24 * 3}); // 3 days
-  // CartStore.reset() // if for some reason, you want to reset the store
-
-  // Define a middleware function
-  const loggerMiddleware = (context) => {
-    console.log(`Action ${context.action} was dispatched with payload:`, context.payload);
-  };
-
-  // Use the middleware function with the initialState
-  CartStore.use(loggerMiddleware);
-
-  class ProductListElement extends ReactiveElement {
-    cartItems = this.connect(CartStore, 'cartItems');
-    products = this.query({
-      queryKey: ['products'],
-      queryFn: () => {
-        return fetch("https://api.camijs.com/products?_limit=3").then(res => res.json())
-      },
-      staleTime: 1000 * 60 * 5 // 5 minutes
-    });
-
-    addToCart(product) {
-      CartStore.add(product);
-    }
-
-    isProductInCart(product) {
-      return this.cartItems ? this.cartItems.some(item => item.id === product.id) : false;
-    }
-
-    isOutOfStock(product) {
-      return product.stock === 0;
-    }
 
-    template() {
-      if (this.products.status === "pending") {
-        return html`<div>Loading...</div>`;
-      }
-
-      if (this.products.status === "error") {
-        return html`<div>Error: ${this.products.error.message}</div>`;
-      }
-
-      if (this.products.data) {
-        return html`
-          <ul>
-            ${this.products.data.map(product => html`
-              <li>
-                ${product.name} - $${(product.price / 100).toFixed(2)}
-                <button class="md-button md-small" @click=${() => this.addToCart(product)} ?disabled=${this.isOutOfStock(product)}>
-                  Add to cart
-                </button>
-              </li>
-            `)}
-          </ul>
-        `;
-      }
-    }
-  }
-
-  customElements.define('product-list-cami-example', ProductListElement);
-
-  class CartElement extends ReactiveElement {
-    cartItems = this.connect(CartStore, 'cartItems');
-
-    get cartValue() {
-      return this.cartItems.reduce((acc, item) => acc + item.price, 0);
-    }
-
-    removeFromCart(product) {
-      CartStore.remove(product);
-    }
-
-    template() {
-      return html`
-        <p>Note: Refresh the page to see that the cart is persisted to localStorage. You can also look at <code>Chrome DevTools > Application > Local Storage</code> to see the cart items.</p>
-        <p>Cart value: $${(this.cartValue / 100).toFixed(2)}</p>
-        <ul>
-          ${this.cartItems.map(item => html`
-            <li>${item.name} - $${(item.price / 100).toFixed(2)} <button class="md-button md-small" @click=${() => this.removeFromCart(item)}>Remove</button></li>
-          `)}
-        </ul>
-      `;
-    }
-  }
-
-  customElements.define('cart-cami-example', CartElement);
-</script>
-
-<hr>
+<iframe width="100%" height="1000" src="//jsfiddle.net/kennyfrc12/qjs8c2gb/15/embedded/result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
diff --git a/docs/javascripts/cami.cdn.js b/docs/javascripts/cami.cdn.js
diff --git a/docs/javascripts/cami.cdn.js.map b/docs/javascripts/cami.cdn.js.map
diff --git a/site/api/observable_state/index.html b/site/api/observable_state/index.html
@@ -2525,7 +2525,7 @@ <h3 id="observablestatefillvalue-start-end">observableState.fill(value, [start],
 <tr>
 <td>[end]</td>
 <td><code>number</code></td>
-<td><code>this._value.length</code></td>
+<td><code>this.__value.length</code></td>
 <td>The index to stop filling at</td>
 </tr>
 </tbody>
@@ -2562,7 +2562,7 @@ <h3 id="observablestatecopywithintarget-start-end">observableState.copyWithin(ta
 <tr>
 <td>[end]</td>
 <td><code>number</code></td>
-<td><code>this._value.length</code></td>
+<td><code>this.__value.length</code></td>
 <td>The end index to stop copying elements from</td>
 </tr>
 </tbody>
@@ -2929,7 +2929,7 @@ <h3 id="computedstatefillvalue-start-end">computedState.fill(value, [start], [en
 <tr>
 <td>[end]</td>
 <td><code>number</code></td>
-<td><code>this._value.length</code></td>
+<td><code>this.__value.length</code></td>
 <td>The index to stop filling at</td>
 </tr>
 </tbody>
@@ -2967,7 +2967,7 @@ <h3 id="computedstatecopywithintarget-start-end">computedState.copyWithin(target
 <tr>
 <td>[end]</td>
 <td><code>number</code></td>
-<td><code>this._value.length</code></td>
+<td><code>this.__value.length</code></td>
 <td>The end index to stop copying elements from</td>
 </tr>
 </tbody>

diff --git a/site/api/reactive_element/index.html b/site/api/reactive_element/index.html
@@ -2092,7 +2092,7 @@ <h3 id="reactiveelementmutationoptions-observableproxy">reactiveElement.mutation
 </span></code></pre></div>
 <a name="ReactiveElement+invalidateQueries"></a></p>
 <h3 id="reactiveelementinvalidatequeriesquerykey-void">reactiveElement.invalidateQueries(queryKey) ⇒ <code>void</code></h3>
-<p>Invalidates the queries with the given key, causing them to refetch if needed. This method is particularly useful when used in conjunction with mutations, such as in the <code>onSettled</code> callback, to ensure that the UI reflects the latest state.</p>
+<p>Invalidates the queries with the given key by clearing the cache. To reflect the latest state in the UI, one will still need to manually refetch the data after invalidation. This method is particularly useful when used in conjunction with mutations, such as in the <code>onSettled</code> callback, to ensure that the UI reflects the latest state.</p>
 <p><strong>Kind</strong>: instance method of <a href="#ReactiveElement"><code>ReactiveElement</code></a>  </p>
 <table>
 <thead>
@@ -2115,10 +2115,12 @@ <h3 id="reactiveelementinvalidatequeriesquerykey-void">reactiveElement.invalidat
 </span><span id="__span-8-2"><a id="__codelineno-8-2" name="__codelineno-8-2" href="#__codelineno-8-2"></a><span class="k">this</span><span class="p">.</span><span class="nx">addPost</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">this</span><span class="p">.</span><span class="nx">mutation</span><span class="p">({</span>
 </span><span id="__span-8-3"><a id="__codelineno-8-3" name="__codelineno-8-3" href="#__codelineno-8-3"></a><span class="w">  </span><span class="c1">// ...mutation config...</span>
 </span><span id="__span-8-4"><a id="__codelineno-8-4" name="__codelineno-8-4" href="#__codelineno-8-4"></a><span class="w">  </span><span class="nx">onSettled</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
-</span><span id="__span-8-5"><a id="__codelineno-8-5" name="__codelineno-8-5" href="#__codelineno-8-5"></a><span class="w">    </span><span class="c1">// Invalidate the posts query to refetch the true state</span>
+</span><span id="__span-8-5"><a id="__codelineno-8-5" name="__codelineno-8-5" href="#__codelineno-8-5"></a><span class="w">    </span><span class="c1">// Invalidate the posts query to clear the cache</span>
 </span><span id="__span-8-6"><a id="__codelineno-8-6" name="__codelineno-8-6" href="#__codelineno-8-6"></a><span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">invalidateQueries</span><span class="p">([</span><span class="s1">&#39;posts&#39;</span><span class="p">]);</span>
-</span><span id="__span-8-7"><a id="__codelineno-8-7" name="__codelineno-8-7" href="#__codelineno-8-7"></a><span class="w">  </span><span class="p">}</span>
-</span><span id="__span-8-8"><a id="__codelineno-8-8" name="__codelineno-8-8" href="#__codelineno-8-8"></a><span class="p">});</span>
+</span><span id="__span-8-7"><a id="__codelineno-8-7" name="__codelineno-8-7" href="#__codelineno-8-7"></a><span class="w">    </span><span class="c1">// Manually refetch the posts to update the UI with the true state</span>
+</span><span id="__span-8-8"><a id="__codelineno-8-8" name="__codelineno-8-8" href="#__codelineno-8-8"></a><span class="w">    </span><span class="k">this</span><span class="p">.</span><span class="nx">fetchPosts</span><span class="p">();</span><span class="w"> </span><span class="c1">// this assumes something like this.posts = this.query({ ... })</span>
+</span><span id="__span-8-9"><a id="__codelineno-8-9" name="__codelineno-8-9" href="#__codelineno-8-9"></a><span class="w">  </span><span class="p">}</span>
+</span><span id="__span-8-10"><a id="__codelineno-8-10" name="__codelineno-8-10" href="#__codelineno-8-10"></a><span class="p">});</span>
 </span></code></pre></div>
 <a name="ReactiveElement+onCreate"></a></p>
 <h3 id="reactiveelementoncreate-void">reactiveElement.onCreate() ⇒ <code>void</code></h3>

diff --git a/site/features/client_state_management/index.html b/site/features/client_state_management/index.html
@@ -1418,114 +1418,8 @@ <h3 id="live-demo-cross-component-state-management">Live Demo - Cross-Component
 <article>
   <h4>Products</h4>
   <p>This fetches the products from an API, and uses a client-side store to manage the cart. After adding a product to the cart, you can refresh the page and the cart will still be there as we are persisting the cart to localStorage, which is what you want in a cart.</p>
-  <h5>Product List</h5>
-  <product-list-cami-example></product-list-cami-example>
-</article>
-<article>
-  <h4>Cart</h4>
-  <cart-cami-example></cart-cami-example>
-</article>
-<script type="module">
-  const { html, ReactiveElement } = cami;
-
-  const CartStore = cami.store({
-    cartItems: [],
-    add: (store, product) => {
-      const cartItem = { ...product, cartItemId: Date.now() };
-      store.cartItems.push(cartItem);
-    },
-    remove: (store, product) => {
-      store.cartItems = store.cartItems.filter(item => item.cartItemId !== product.cartItemId);
-    }
-  }, {name: 'CartStore', expiry: 1000 * 60 * 60 * 24 * 3}); // 3 days
-  // CartStore.reset() // if for some reason, you want to reset the store
-
-  // Define a middleware function
-  const loggerMiddleware = (context) => {
-    console.log(`Action ${context.action} was dispatched with payload:`, context.payload);
-  };
-
-  // Use the middleware function with the initialState
-  CartStore.use(loggerMiddleware);
-
-  class ProductListElement extends ReactiveElement {
-    cartItems = this.connect(CartStore, 'cartItems');
-    products = this.query({
-      queryKey: ['products'],
-      queryFn: () => {
-        return fetch("https://api.camijs.com/products?_limit=3").then(res => res.json())
-      },
-      staleTime: 1000 * 60 * 5 // 5 minutes
-    });
-
-    addToCart(product) {
-      CartStore.add(product);
-    }
-
-    isProductInCart(product) {
-      return this.cartItems ? this.cartItems.some(item => item.id === product.id) : false;
-    }
-
-    isOutOfStock(product) {
-      return product.stock === 0;
-    }
-
-    template() {
-      if (this.products.status === "pending") {
-        return html`<div>Loading...</div>`;
-      }
-
-      if (this.products.status === "error") {
-        return html`<div>Error: ${this.products.error.message}</div>`;
-      }
-
-      if (this.products.data) {
-        return html`
-          <ul>
-            ${this.products.data.map(product => html`
-              <li>
-                ${product.name} - $${(product.price / 100).toFixed(2)}
-                <button class="md-button md-small" @click=${() => this.addToCart(product)} ?disabled=${this.isOutOfStock(product)}>
-                  Add to cart
-                </button>
-              </li>
-            `)}
-          </ul>
-        `;
-      }
-    }
-  }
-
-  customElements.define('product-list-cami-example', ProductListElement);
-
-  class CartElement extends ReactiveElement {
-    cartItems = this.connect(CartStore, 'cartItems');
-
-    get cartValue() {
-      return this.cartItems.reduce((acc, item) => acc + item.price, 0);
-    }
-
-    removeFromCart(product) {
-      CartStore.remove(product);
-    }
-
-    template() {
-      return html`
-        <p>Note: Refresh the page to see that the cart is persisted to localStorage. You can also look at <code>Chrome DevTools > Application > Local Storage</code> to see the cart items.</p>
-        <p>Cart value: $${(this.cartValue / 100).toFixed(2)}</p>
-        <ul>
-          ${this.cartItems.map(item => html`
-            <li>${item.name} - $${(item.price / 100).toFixed(2)} <button class="md-button md-small" @click=${() => this.removeFromCart(item)}>Remove</button></li>
-          `)}
-        </ul>
-      `;
-    }
-  }
-
-  customElements.define('cart-cami-example', CartElement);
-</script>
 
-<hr>
+<iframe width="100%" height="1000" src="//jsfiddle.net/kennyfrc12/qjs8c2gb/15/embedded/result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 
 
 

diff --git a/site/javascripts/cami.cdn.js b/site/javascripts/cami.cdn.js
diff --git a/site/javascripts/cami.cdn.js.map b/site/javascripts/cami.cdn.js.map
diff --git a/site/search/search_index.json b/site/search/search_index.json
diff --git a/site/sitemap.xml.gz b/site/sitemap.xml.gz