kempo-ui 0.4.25 → 0.4.26

package/dist/components/Context.js

@@ -1 +1 @@
-import{html as t}from"../lit-all.min.js";import e from"./LightComponent.js";export default class s extends e{static properties={data:{type:String,reflect:!0}};constructor(){super(),this.data="{}"}connectedCallback(){super.connectedCallback(),this.style.display="contents"}set(t,e){const s=JSON.parse(this.data||"{}"),a=!(t in s),n=s[t];s[t]=e,this.data=JSON.stringify(s),this.dispatchEvent(new CustomEvent(a?"context:create":"context:set",{detail:a?{key:t,value:e}:{key:t,value:e,oldValue:n},bubbles:!0,composed:!0}))}get(t){return JSON.parse(this.data||"{}")[t]}has(t){return t in JSON.parse(this.data||"{}")}delete(t){const e=JSON.parse(this.data||"{}");if(!(t in e))return;const s=e[t];delete e[t],this.data=JSON.stringify(e),this.dispatchEvent(new CustomEvent("context:delete",{detail:{key:t,value:s},bubbles:!0,composed:!0}))}clear(){for(const t of Object.keys(JSON.parse(this.data||"{}")))this.delete(t)}getData(){return JSON.parse(this.data||"{}")}renderLightDom(){return t``}}customElements.define("k-context",s);
+import{html as t}from"../lit-all.min.js";import e from"./LightComponent.js";const s=Symbol("persist");export default class i extends e{static properties={data:{type:String,reflect:!0},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this[s]=()=>{if(this.persistentId&&window?.localStorage)try{window.localStorage.setItem(`context-persistent-id-${this.persistentId}`,this.data)}catch{}},this.data="{}",this.persistentId=null}connectedCallback(){if(super.connectedCallback(),this.style.display="contents",this.persistentId&&window?.localStorage){const t=window.localStorage.getItem(`context-persistent-id-${this.persistentId}`);t&&(this.data=t)}}set(t,e){const i=JSON.parse(this.data||"{}"),a=!(t in i),n=i[t];i[t]=e,this.data=JSON.stringify(i),this[s](),this.dispatchEvent(new CustomEvent(a?"context:create":"context:set",{detail:a?{key:t,value:e}:{key:t,value:e,oldValue:n},bubbles:!0,composed:!0}))}get(t){return JSON.parse(this.data||"{}")[t]}has(t){return t in JSON.parse(this.data||"{}")}delete(t){const e=JSON.parse(this.data||"{}");if(!(t in e))return;const i=e[t];delete e[t],this.data=JSON.stringify(e),this[s](),this.dispatchEvent(new CustomEvent("context:delete",{detail:{key:t,value:i},bubbles:!0,composed:!0}))}clear(){for(const t of Object.keys(JSON.parse(this.data||"{}")))this.delete(t)}getData(){return JSON.parse(this.data||"{}")}renderLightDom(){return t``}}customElements.define("k-context",i);

package/docs/components/context.html

@@ -505,6 +505,7 @@
           <a href="#basicUsage">Basic Usage</a><br />
           <a href="#events">Listening to Events</a><br />
           <a href="#usingInComponents">Using in Components</a><br />
+          <a href="#persistence">Persistence</a><br />
           <a href="#interactiveDemo">Interactive Demo</a><br />
 
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
@@ -565,6 +566,17 @@
     </div>
     <p>To react to context changes from inside a shadow-DOM component, listen on the context element directly — events bubble and are <code>composed: true</code> so they also cross shadow boundaries.</p>
 
+    <h3 id="persistence"><a href="#persistence" class="no-link">Persistence</a></h3>
+    <p>Set a <code>persistent-id</code> to automatically save the store to <code>localStorage</code> and restore it on the next page load — the same convention used by <code>Split</code>, <code>Accordion</code>, <code>Tabs</code> and <code>Aside</code>. The data is reloaded in <code>connectedCallback</code> (before descendants read it) and re-saved on every <code>set()</code>, <code>delete()</code> and <code>clear()</code>.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-context</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">&quot;app-settings&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-context</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+    </div>
+    <p>Because the entire store is JSON-serialized into a single value, keep persisted contexts to small, serializable state (settings, selections, ids) — not large or non-JSON data. Scope what you persist by giving config its own <code>persistent-id</code> context and leaving transient state in a separate, non-persistent <code>k-context</code>.</p>
+
     <h3 id="interactiveDemo"><a href="#interactiveDemo" class="no-link">Interactive Demo</a></h3>
     <div class="row -mx">
       <div class="col m-span-12 t-span-6 px">
@@ -630,6 +642,11 @@
           <td><code>String</code> (JSON)</td>
           <td>A JSON string representing the initial store state. Reflects back to the attribute as state changes via the component's methods. Defaults to <code>'{}'</code>.</td>
         </tr>
+        <tr>
+          <td><code>persistent-id</code></td>
+          <td><code>String</code></td>
+          <td>When set, the store is auto-saved to <code>localStorage</code> (key <code>context-persistent-id-&lt;id&gt;</code>) on every change and restored on connect. Defaults to <code>null</code> (no persistence).</td>
+        </tr>
       </tbody>
     </table>
     </div>

package/docs/src/components/Context.js

@@ -1 +1 @@
-import{html as t}from"../lit-all.min.js";import e from"./LightComponent.js";export default class s extends e{static properties={data:{type:String,reflect:!0}};constructor(){super(),this.data="{}"}connectedCallback(){super.connectedCallback(),this.style.display="contents"}set(t,e){const s=JSON.parse(this.data||"{}"),a=!(t in s),n=s[t];s[t]=e,this.data=JSON.stringify(s),this.dispatchEvent(new CustomEvent(a?"context:create":"context:set",{detail:a?{key:t,value:e}:{key:t,value:e,oldValue:n},bubbles:!0,composed:!0}))}get(t){return JSON.parse(this.data||"{}")[t]}has(t){return t in JSON.parse(this.data||"{}")}delete(t){const e=JSON.parse(this.data||"{}");if(!(t in e))return;const s=e[t];delete e[t],this.data=JSON.stringify(e),this.dispatchEvent(new CustomEvent("context:delete",{detail:{key:t,value:s},bubbles:!0,composed:!0}))}clear(){for(const t of Object.keys(JSON.parse(this.data||"{}")))this.delete(t)}getData(){return JSON.parse(this.data||"{}")}renderLightDom(){return t``}}customElements.define("k-context",s);
+import{html as t}from"../lit-all.min.js";import e from"./LightComponent.js";const s=Symbol("persist");export default class i extends e{static properties={data:{type:String,reflect:!0},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this[s]=()=>{if(this.persistentId&&window?.localStorage)try{window.localStorage.setItem(`context-persistent-id-${this.persistentId}`,this.data)}catch{}},this.data="{}",this.persistentId=null}connectedCallback(){if(super.connectedCallback(),this.style.display="contents",this.persistentId&&window?.localStorage){const t=window.localStorage.getItem(`context-persistent-id-${this.persistentId}`);t&&(this.data=t)}}set(t,e){const i=JSON.parse(this.data||"{}"),a=!(t in i),n=i[t];i[t]=e,this.data=JSON.stringify(i),this[s](),this.dispatchEvent(new CustomEvent(a?"context:create":"context:set",{detail:a?{key:t,value:e}:{key:t,value:e,oldValue:n},bubbles:!0,composed:!0}))}get(t){return JSON.parse(this.data||"{}")[t]}has(t){return t in JSON.parse(this.data||"{}")}delete(t){const e=JSON.parse(this.data||"{}");if(!(t in e))return;const i=e[t];delete e[t],this.data=JSON.stringify(e),this[s](),this.dispatchEvent(new CustomEvent("context:delete",{detail:{key:t,value:i},bubbles:!0,composed:!0}))}clear(){for(const t of Object.keys(JSON.parse(this.data||"{}")))this.delete(t)}getData(){return JSON.parse(this.data||"{}")}renderLightDom(){return t``}}customElements.define("k-context",i);

package/docs-src/components/context.page.html

@@ -9,6 +9,7 @@
           <a href="#basicUsage">Basic Usage</a><br />
           <a href="#events">Listening to Events</a><br />
           <a href="#usingInComponents">Using in Components</a><br />
+          <a href="#persistence">Persistence</a><br />
           <a href="#interactiveDemo">Interactive Demo</a><br />
 
           <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
@@ -69,6 +70,17 @@
     </div>
     <p>To react to context changes from inside a shadow-DOM component, listen on the context element directly — events bubble and are <code>composed: true</code> so they also cross shadow boundaries.</p>
 
+    <h3 id="persistence"><a href="#persistence" class="no-link">Persistence</a></h3>
+    <p>Set a <code>persistent-id</code> to automatically save the store to <code>localStorage</code> and restore it on the next page load — the same convention used by <code>Split</code>, <code>Accordion</code>, <code>Tabs</code> and <code>Aside</code>. The data is reloaded in <code>connectedCallback</code> (before descendants read it) and re-saved on every <code>set()</code>, <code>delete()</code> and <code>clear()</code>.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-context</span> <span class="hljs-attr">persistent-id</span>=<span class="hljs-string">&quot;app-settings&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-context</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+    </div>
+    <p>Because the entire store is JSON-serialized into a single value, keep persisted contexts to small, serializable state (settings, selections, ids) — not large or non-JSON data. Scope what you persist by giving config its own <code>persistent-id</code> context and leaving transient state in a separate, non-persistent <code>k-context</code>.</p>
+
     <h3 id="interactiveDemo"><a href="#interactiveDemo" class="no-link">Interactive Demo</a></h3>
     <div class="row -mx">
       <div class="col m-span-12 t-span-6 px">
@@ -134,6 +146,11 @@
           <td><code>String</code> (JSON)</td>
           <td>A JSON string representing the initial store state. Reflects back to the attribute as state changes via the component's methods. Defaults to <code>'{}'</code>.</td>
         </tr>
+        <tr>
+          <td><code>persistent-id</code></td>
+          <td><code>String</code></td>
+          <td>When set, the store is auto-saved to <code>localStorage</code> (key <code>context-persistent-id-&lt;id&gt;</code>) on every change and restored on connect. Defaults to <code>null</code> (no persistence).</td>
+        </tr>
       </tbody>
     </table>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.4.25",
+  "version": "0.4.26",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/Context.js

@@ -4,18 +4,51 @@
   A non-rendering state container for sharing data between sibling and descendant
   components, similar in purpose to React's useContext. Place it as an ancestor
   of components that need shared state; children locate it via closest('k-context').
+
+  Set a `persistent-id` to auto-save/load the data to localStorage (the same
+  convention used by Split, Accordion, Tabs and Aside).
 */
 import { html } from '../lit-all.min.js';
 import LightComponent from './LightComponent.js';
 
+/*
+  Symbols
+*/
+const persist = Symbol('persist');
+
 export default class Context extends LightComponent {
+  /*
+    Reactive Properties / Attributes
+  */
   static properties = {
-    data: { type: String, reflect: true }
+    data: { type: String, reflect: true },
+    persistentId: { type: String, reflect: true, attribute: 'persistent-id' }
   };
 
+  /*
+    Constructor
+  */
   constructor() {
     super();
+
+    /*
+      Private Methods
+    */
+    // Mirror the data blob into localStorage whenever a persistent-id is set, so the
+    // next page load can restore it. Guarded so a full/blocked store (private mode,
+    // quota) never throws out of a set/delete.
+    this[persist] = () => {
+      if(!this.persistentId || !window?.localStorage) return;
+      try {
+        window.localStorage.setItem(`context-persistent-id-${this.persistentId}`, this.data);
+      } catch { /* storage unavailable — keep working in-memory */ }
+    };
+
+    /*
+      Init Props
+    */
     this.data = '{}';
+    this.persistentId = null;
   }
 
   /*
@@ -24,6 +57,14 @@ export default class Context extends LightComponent {
   connectedCallback() {
     super.connectedCallback();
     this.style.display = 'contents';
+    // Restore persisted state up front, before descendants read it on their own
+    // connect. Setting data directly (rather than per-key set) intentionally skips
+    // events: the context is an ancestor, so children read the loaded values via
+    // closest('k-context').get() when they first render.
+    if(this.persistentId && window?.localStorage){
+      const stored = window.localStorage.getItem(`context-persistent-id-${this.persistentId}`);
+      if(stored) this.data = stored;
+    }
   }
 
   /*
@@ -35,6 +76,7 @@ export default class Context extends LightComponent {
     const oldValue = obj[key];
     obj[key] = value;
     this.data = JSON.stringify(obj);
+    this[persist]();
     this.dispatchEvent(new CustomEvent(isNew ? 'context:create' : 'context:set', {
       detail: isNew ? { key, value } : { key, value, oldValue },
       bubbles: true,
@@ -56,6 +98,7 @@ export default class Context extends LightComponent {
     const value = obj[key];
     delete obj[key];
     this.data = JSON.stringify(obj);
+    this[persist]();
     this.dispatchEvent(new CustomEvent('context:delete', {
       detail: { key, value },
       bubbles: true,

package/tests/components/Context.browser-test.js

@@ -10,6 +10,17 @@ const createContext = async () => {
   return { container, el };
 };
 
+const createPersistentContext = async (persistentId) => {
+  const container = document.createElement('div');
+  container.innerHTML = `<k-context persistent-id="${persistentId}"></k-context>`;
+  document.body.appendChild(container);
+  const el = container.querySelector('k-context');
+  await el.updateComplete;
+  return { container, el };
+};
+
+const storageKey = (id) => `context-persistent-id-${id}`;
+
 const cleanup = (container) => {
   if(container && container.parentNode){
     container.parentNode.removeChild(container);
@@ -234,5 +245,68 @@ export default {
     }
     cleanup(container);
     pass('getData() returns a shallow copy of all data');
+  },
+
+  /*
+    persistent-id (localStorage auto save/load)
+  */
+  'set() writes data to localStorage when persistent-id is set': async ({pass, fail}) => {
+    const id = 'persist-set-' + Date.now();
+    window.localStorage.removeItem(storageKey(id));
+    const { container, el } = await createPersistentContext(id);
+    el.set('theme', 'dark');
+    let stored;
+    try { stored = JSON.parse(window.localStorage.getItem(storageKey(id))); } catch(e) {
+      cleanup(container); window.localStorage.removeItem(storageKey(id));
+      return fail('localStorage value is not valid JSON');
+    }
+    cleanup(container); window.localStorage.removeItem(storageKey(id));
+    if(!stored || stored.theme !== 'dark'){
+      return fail(`Expected stored {theme:'dark'}, got ${JSON.stringify(stored)}`);
+    }
+    pass('set() persisted to localStorage');
+  },
+
+  'restores data from localStorage on connect': async ({pass, fail}) => {
+    const id = 'persist-load-' + Date.now();
+    window.localStorage.setItem(storageKey(id), JSON.stringify({ count: 7 }));
+    const { container, el } = await createPersistentContext(id);
+    const value = el.get('count');
+    cleanup(container); window.localStorage.removeItem(storageKey(id));
+    if(value !== 7){
+      return fail(`Expected restored count to be 7, got ${value}`);
+    }
+    pass('data restored from localStorage on connect');
+  },
+
+  'delete() updates localStorage': async ({pass, fail}) => {
+    const id = 'persist-delete-' + Date.now();
+    window.localStorage.removeItem(storageKey(id));
+    const { container, el } = await createPersistentContext(id);
+    el.set('a', 1);
+    el.set('b', 2);
+    el.delete('a');
+    let stored;
+    try { stored = JSON.parse(window.localStorage.getItem(storageKey(id))); } catch(e) {
+      cleanup(container); window.localStorage.removeItem(storageKey(id));
+      return fail('localStorage value is not valid JSON');
+    }
+    cleanup(container); window.localStorage.removeItem(storageKey(id));
+    if(!stored || 'a' in stored || stored.b !== 2){
+      return fail(`Expected stored to drop 'a' and keep b:2, got ${JSON.stringify(stored)}`);
+    }
+    pass('delete() updated localStorage');
+  },
+
+  'does not write to localStorage without a persistent-id': async ({pass, fail}) => {
+    const before = window.localStorage.length;
+    const { container, el } = await createContext();
+    el.set('x', 1);
+    const after = window.localStorage.length;
+    cleanup(container);
+    if(after !== before){
+      return fail('A context without persistent-id should not touch localStorage');
+    }
+    pass('no persistent-id means no localStorage writes');
   }
 };