kempo-ui 0.0.2 → 0.0.4

package/tests/LightComponent.browser-test.js

@@ -1,169 +1,169 @@
-import LightComponent from '/src/components/LightComponent.js';
-import { html } from '/src/lit-all.min.js';
-
-class TestLightComponent extends LightComponent {
-	renderLightDom() {
-		return html`<p>Test light content</p>`;
-	}
-}
-
-customElements.define('test-light-component', TestLightComponent);
-
-export default {
-	'should not create shadow root': async ({pass, fail, log}) => {
-		const component = new TestLightComponent();
-		document.body.appendChild(component);
-		
-		await new Promise(resolve => setTimeout(resolve, 0));
-		
-		if(component.shadowRoot) {
-			document.body.removeChild(component);
-			fail('LightComponent should not have shadow root');
-			return;
-		}
-		
-		log('✓ No shadow root created as expected');
-		document.body.removeChild(component);
-		pass('LightComponent does not create shadow root');
-	},
-
-	'should have itself as render root': async ({pass, fail, log}) => {
-		const component = new TestLightComponent();
-		document.body.appendChild(component);
-		
-		await new Promise(resolve => setTimeout(resolve, 0));
-		
-		if(component.renderRoot !== component) {
-			document.body.removeChild(component);
-			fail('Render root should be the component itself');
-			return;
-		}
-		
-		log('✓ Component is its own render root');
-		document.body.removeChild(component);
-		pass('LightComponent uses itself as render root');
-	},
-
-	'should create light root container': async ({pass, fail, log}) => {
-		const component = new TestLightComponent();
-		document.body.appendChild(component);
-		
-		await new Promise(resolve => setTimeout(resolve, 0));
-		
-		if(!component.lightRoot) {
-			document.body.removeChild(component);
-			fail('Component should have lightRoot property');
-			return;
-		}
-		
-		if(component.lightRoot.tagName !== 'DIV') {
-			document.body.removeChild(component);
-			fail('lightRoot should be a div element');
-			return;
-		}
-		
-		if(component.lightRoot.style.display !== 'contents') {
-			document.body.removeChild(component);
-			fail('lightRoot should have display: contents');
-			return;
-		}
-		
-		if(component.lightRoot.parentNode !== component) {
-			document.body.removeChild(component);
-			fail('lightRoot should be child of component');
-			return;
-		}
-		
-		log('✓ Light root container properly configured');
-		document.body.removeChild(component);
-		pass('LightComponent creates proper light root container');
-	},
-
-	'should render content in light root': async ({pass, fail, log}) => {
-		const component = new TestLightComponent();
-		document.body.appendChild(component);
-		
-		await new Promise(resolve => setTimeout(resolve, 10));
-		
-		const paragraph = component.lightRoot.querySelector('p');
-		if(!paragraph) {
-			document.body.removeChild(component);
-			fail('Component should render paragraph in light root');
-			return;
-		}
-		
-		if(paragraph.textContent !== 'Test light content') {
-			document.body.removeChild(component);
-			fail(`Expected "Test light content", got "${paragraph.textContent}"`);
-			return;
-		}
-		
-		log('✓ Content rendered properly in light root');
-		document.body.removeChild(component);
-		pass('LightComponent renders content in light DOM');
-	},
-
-	'should preserve natural children': async ({pass, fail, log}) => {
-		const component = new TestLightComponent();
-		const naturalChild = document.createElement('span');
-		naturalChild.textContent = 'Natural child';
-		component.appendChild(naturalChild);
-		document.body.appendChild(component);
-		
-		await new Promise(resolve => setTimeout(resolve, 10));
-		
-		const foundNaturalChild = component.querySelector('span');
-		if(!foundNaturalChild) {
-			document.body.removeChild(component);
-			fail('Natural child should be preserved');
-			return;
-		}
-		
-		if(foundNaturalChild.textContent !== 'Natural child') {
-			document.body.removeChild(component);
-			fail('Natural child content should be preserved');
-			return;
-		}
-		
-		const renderedContent = component.lightRoot.querySelector('p');
-		if(!renderedContent) {
-			document.body.removeChild(component);
-			fail('Rendered content should also be present');
-			return;
-		}
-		
-		log('✓ Natural children preserved alongside rendered content');
-		document.body.removeChild(component);
-		pass('LightComponent preserves natural children');
-	},
-
-	'should call super.updated() requirement': async ({pass, fail, log}) => {
-		class BadLightComponent extends LightComponent {
-			updated() {
-				// Intentionally not calling super.updated()
-			}
-			
-			renderLightDom() {
-				return html`<p>Should not render</p>`;
-			}
-		}
-		
-		customElements.define('bad-light-component', BadLightComponent);
-		
-		const component = new BadLightComponent();
-		document.body.appendChild(component);
-		
-		await new Promise(resolve => setTimeout(resolve, 10));
-		
-		const paragraph = component.lightRoot?.querySelector('p');
-		if(paragraph) {
-			document.body.removeChild(component);
-			fail('Content should not render without super.updated() call');
-			return;
-		}
-		
-		log('✓ Content does not render without super.updated()');
-		document.body.removeChild(component);
-		pass('LightComponent requires super.updated() to function');
-	}
-};
+import LightComponent from '/src/components/LightComponent.js';
+import { html } from '/src/lit-all.min.js';
+
+class TestLightComponent extends LightComponent {
+	renderLightDom() {
+		return html`<p>Test light content</p>`;
+	}
+}
+
+customElements.define('test-light-component', TestLightComponent);
+
+export default {
+	'should not create shadow root': async ({pass, fail, log}) => {
+		const component = new TestLightComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		if(component.shadowRoot) {
+			document.body.removeChild(component);
+			fail('LightComponent should not have shadow root');
+			return;
+		}
+		
+		log('✓ No shadow root created as expected');
+		document.body.removeChild(component);
+		pass('LightComponent does not create shadow root');
+	},
+
+	'should have itself as render root': async ({pass, fail, log}) => {
+		const component = new TestLightComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		if(component.renderRoot !== component) {
+			document.body.removeChild(component);
+			fail('Render root should be the component itself');
+			return;
+		}
+		
+		log('✓ Component is its own render root');
+		document.body.removeChild(component);
+		pass('LightComponent uses itself as render root');
+	},
+
+	'should create light root container': async ({pass, fail, log}) => {
+		const component = new TestLightComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		if(!component.lightRoot) {
+			document.body.removeChild(component);
+			fail('Component should have lightRoot property');
+			return;
+		}
+		
+		if(component.lightRoot.tagName !== 'DIV') {
+			document.body.removeChild(component);
+			fail('lightRoot should be a div element');
+			return;
+		}
+		
+		if(component.lightRoot.style.display !== 'contents') {
+			document.body.removeChild(component);
+			fail('lightRoot should have display: contents');
+			return;
+		}
+		
+		if(component.lightRoot.parentNode !== component) {
+			document.body.removeChild(component);
+			fail('lightRoot should be child of component');
+			return;
+		}
+		
+		log('✓ Light root container properly configured');
+		document.body.removeChild(component);
+		pass('LightComponent creates proper light root container');
+	},
+
+	'should render content in light root': async ({pass, fail, log}) => {
+		const component = new TestLightComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		
+		const paragraph = component.lightRoot.querySelector('p');
+		if(!paragraph) {
+			document.body.removeChild(component);
+			fail('Component should render paragraph in light root');
+			return;
+		}
+		
+		if(paragraph.textContent !== 'Test light content') {
+			document.body.removeChild(component);
+			fail(`Expected "Test light content", got "${paragraph.textContent}"`);
+			return;
+		}
+		
+		log('✓ Content rendered properly in light root');
+		document.body.removeChild(component);
+		pass('LightComponent renders content in light DOM');
+	},
+
+	'should preserve natural children': async ({pass, fail, log}) => {
+		const component = new TestLightComponent();
+		const naturalChild = document.createElement('span');
+		naturalChild.textContent = 'Natural child';
+		component.appendChild(naturalChild);
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		
+		const foundNaturalChild = component.querySelector('span');
+		if(!foundNaturalChild) {
+			document.body.removeChild(component);
+			fail('Natural child should be preserved');
+			return;
+		}
+		
+		if(foundNaturalChild.textContent !== 'Natural child') {
+			document.body.removeChild(component);
+			fail('Natural child content should be preserved');
+			return;
+		}
+		
+		const renderedContent = component.lightRoot.querySelector('p');
+		if(!renderedContent) {
+			document.body.removeChild(component);
+			fail('Rendered content should also be present');
+			return;
+		}
+		
+		log('✓ Natural children preserved alongside rendered content');
+		document.body.removeChild(component);
+		pass('LightComponent preserves natural children');
+	},
+
+	'should call super.updated() requirement': async ({pass, fail, log}) => {
+		class BadLightComponent extends LightComponent {
+			updated() {
+				// Intentionally not calling super.updated()
+			}
+			
+			renderLightDom() {
+				return html`<p>Should not render</p>`;
+			}
+		}
+		
+		customElements.define('bad-light-component', BadLightComponent);
+		
+		const component = new BadLightComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		
+		const paragraph = component.lightRoot?.querySelector('p');
+		if(paragraph) {
+			document.body.removeChild(component);
+			fail('Content should not render without super.updated() call');
+			return;
+		}
+		
+		log('✓ Content does not render without super.updated()');
+		document.body.removeChild(component);
+		pass('LightComponent requires super.updated() to function');
+	}
+};

package/tests/ShadowComponent.browser-test.js

@@ -1,130 +1,130 @@
-import ShadowComponent from '/src/components/ShadowComponent.js';
-import { html } from '/src/lit-all.min.js';
-
-class TestShadowComponent extends ShadowComponent {
-	render() {
-		return html`<p>Test shadow content</p>`;
-	}
-}
-
-customElements.define('test-shadow-component', TestShadowComponent);
-
-export default {
-	'should create shadow root with stylesheet': async ({pass, fail, log}) => {
-		const component = new TestShadowComponent();
-		document.body.appendChild(component);
-		
-		await new Promise(resolve => setTimeout(resolve, 0));
-		
-		if(!component.shadowRoot) {
-			document.body.removeChild(component);
-			fail('Component should have shadow root');
-			return;
-		}
-		
-		const stylesheetLink = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
-		if(!stylesheetLink) {
-			document.body.removeChild(component);
-			fail('Shadow root should contain kempo.min.css link');
-			return;
-		}
-		
-		if(stylesheetLink.rel !== 'stylesheet') {
-			document.body.removeChild(component);
-			fail('Link should have rel="stylesheet"');
-			return;
-		}
-		
-		log('✓ Shadow root created with proper stylesheet');
-		document.body.removeChild(component);
-		pass('ShadowComponent creates shadow root with stylesheet injection');
-	},
-
-	'should have render container as render root': async ({pass, fail, log}) => {
-		const component = new TestShadowComponent();
-		document.body.appendChild(component);
-		
-		await new Promise(resolve => setTimeout(resolve, 0));
-		
-		const renderRoot = component.renderRoot;
-		if(!renderRoot) {
-			document.body.removeChild(component);
-			fail('Component should have render root');
-			return;
-		}
-		
-		if(renderRoot.tagName !== 'DIV') {
-			document.body.removeChild(component);
-			fail('Render root should be a div element');
-			return;
-		}
-		
-		if(renderRoot.parentNode !== component.shadowRoot) {
-			document.body.removeChild(component);
-			fail('Render root should be child of shadow root');
-			return;
-		}
-		
-		log('✓ Render root is properly configured div element');
-		document.body.removeChild(component);
-		pass('ShadowComponent has proper render container setup');
-	},
-
-	'should render content inside render container': async ({pass, fail, log}) => {
-		const component = new TestShadowComponent();
-		document.body.appendChild(component);
-		
-		await new Promise(resolve => setTimeout(resolve, 10));
-		
-		const paragraph = component.renderRoot.querySelector('p');
-		if(!paragraph) {
-			document.body.removeChild(component);
-			fail('Component should render paragraph element');
-			return;
-		}
-		
-		if(paragraph.textContent !== 'Test shadow content') {
-			document.body.removeChild(component);
-			fail(`Expected "Test shadow content", got "${paragraph.textContent}"`);
-			return;
-		}
-		
-		log('✓ Content rendered properly inside render container');
-		document.body.removeChild(component);
-		pass('ShadowComponent renders content correctly');
-	},
-
-	'should maintain stylesheet after re-rendering': async ({pass, fail, log}) => {
-		const component = new TestShadowComponent();
-		document.body.appendChild(component);
-		
-		await new Promise(resolve => setTimeout(resolve, 0));
-		
-		const stylesheetBefore = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
-		if(!stylesheetBefore) {
-			document.body.removeChild(component);
-			fail('Stylesheet should exist before re-render');
-			return;
-		}
-		
-		component.requestUpdate();
-		await component.updateComplete;
-		
-		const stylesheetAfter = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
-		if(!stylesheetAfter) {
-			document.body.removeChild(component);
-			fail('Stylesheet should persist after re-render');
-			return;
-		}
-		
-		if(stylesheetBefore !== stylesheetAfter) {
-			document.body.removeChild(component);
-			fail('Stylesheet should be the same element after re-render');
-			return;
-		}
-		
-		log('✓ Stylesheet persists through re-renders');
-		document.body.removeChild(component);
-		pass('ShadowComponent maintains stylesheet across updates');
-	}
-};
+import ShadowComponent from '/src/components/ShadowComponent.js';
+import { html } from '/src/lit-all.min.js';
+
+class TestShadowComponent extends ShadowComponent {
+	render() {
+		return html`<p>Test shadow content</p>`;
+	}
+}
+
+customElements.define('test-shadow-component', TestShadowComponent);
+
+export default {
+	'should create shadow root with stylesheet': async ({pass, fail, log}) => {
+		const component = new TestShadowComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		if(!component.shadowRoot) {
+			document.body.removeChild(component);
+			fail('Component should have shadow root');
+			return;
+		}
+		
+		const stylesheetLink = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
+		if(!stylesheetLink) {
+			document.body.removeChild(component);
+			fail('Shadow root should contain kempo.min.css link');
+			return;
+		}
+		
+		if(stylesheetLink.rel !== 'stylesheet') {
+			document.body.removeChild(component);
+			fail('Link should have rel="stylesheet"');
+			return;
+		}
+		
+		log('✓ Shadow root created with proper stylesheet');
+		document.body.removeChild(component);
+		pass('ShadowComponent creates shadow root with stylesheet injection');
+	},
+
+	'should have render container as render root': async ({pass, fail, log}) => {
+		const component = new TestShadowComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		const renderRoot = component.renderRoot;
+		if(!renderRoot) {
+			document.body.removeChild(component);
+			fail('Component should have render root');
+			return;
+		}
+		
+		if(renderRoot.tagName !== 'DIV') {
+			document.body.removeChild(component);
+			fail('Render root should be a div element');
+			return;
+		}
+		
+		if(renderRoot.parentNode !== component.shadowRoot) {
+			document.body.removeChild(component);
+			fail('Render root should be child of shadow root');
+			return;
+		}
+		
+		log('✓ Render root is properly configured div element');
+		document.body.removeChild(component);
+		pass('ShadowComponent has proper render container setup');
+	},
+
+	'should render content inside render container': async ({pass, fail, log}) => {
+		const component = new TestShadowComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		
+		const paragraph = component.renderRoot.querySelector('p');
+		if(!paragraph) {
+			document.body.removeChild(component);
+			fail('Component should render paragraph element');
+			return;
+		}
+		
+		if(paragraph.textContent !== 'Test shadow content') {
+			document.body.removeChild(component);
+			fail(`Expected "Test shadow content", got "${paragraph.textContent}"`);
+			return;
+		}
+		
+		log('✓ Content rendered properly inside render container');
+		document.body.removeChild(component);
+		pass('ShadowComponent renders content correctly');
+	},
+
+	'should maintain stylesheet after re-rendering': async ({pass, fail, log}) => {
+		const component = new TestShadowComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		const stylesheetBefore = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
+		if(!stylesheetBefore) {
+			document.body.removeChild(component);
+			fail('Stylesheet should exist before re-render');
+			return;
+		}
+		
+		component.requestUpdate();
+		await component.updateComplete;
+		
+		const stylesheetAfter = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
+		if(!stylesheetAfter) {
+			document.body.removeChild(component);
+			fail('Stylesheet should persist after re-render');
+			return;
+		}
+		
+		if(stylesheetBefore !== stylesheetAfter) {
+			document.body.removeChild(component);
+			fail('Stylesheet should be the same element after re-render');
+			return;
+		}
+		
+		log('✓ Stylesheet persists through re-renders');
+		document.body.removeChild(component);
+		pass('ShadowComponent maintains stylesheet across updates');
+	}
+};

package/config/development.json

@@ -1,14 +0,0 @@
-{
-  "customRoutes": {
-    "/": "./docs/index.html",
-    "/kempo.min.css": "./node_modules/kempo-css/dist/kempo.min.css",
-    "/kempo-vars.css": "./src/kempo-vars.css",
-    "/src/*": "./src/*"
-  },
-  "middleware": {
-    "logging": {
-      "enabled": true,
-      "includeResponseTime": true
-    }
-  }
-}

package/docs/components/ShadowComponent.js

@@ -1 +0,0 @@
-import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href="/kempo.min.css",e.appendChild(t);const n=document.createElement("div");return e.appendChild(n),n}}

package/src/utils/cli.js

@@ -1,43 +0,0 @@
-import { spawn } from 'child_process';
-
-export const getArgs = mapping => {
-  const args = {};
-  const argv = process.argv.slice(2);
-  
-  for(let i = 0; i < argv.length; i++) {
-    const arg = argv[i];
-    if(arg.startsWith('-')) {
-      const key = arg.replace(/^-+/, '');
-      const mappedKey = mapping[key] || key;
-      const nextArg = argv[i + 1];
-      
-      if(nextArg && !nextArg.startsWith('-')) {
-        args[mappedKey] = nextArg;
-        i++;
-      } else {
-        args[mappedKey] = true;
-      }
-    }
-  }
-  
-  return args;
-};
-
-export const runChildNodeProcess = scriptPath => {
-  const child = spawn('node', [scriptPath], {
-    stdio: 'inherit',
-    shell: true
-  });
-  
-  return new Promise((resolve, reject) => {
-    child.on('close', code => {
-      if(code === 0) {
-        resolve();
-      } else {
-        reject(new Error(`Process exited with code ${code}`));
-      }
-    });
-    
-    child.on('error', reject);
-  });
-};