Merge pull request #12 from AegisJSProject/release/0.1.1

Update dependencies

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v0.0.4] - 2024-03-03
+
+### Changed
+- Update dependencies
+
 ## [v0.0.3] - 2024-02-28
 
 ### Changed

hello-world.js

@@ -1,13 +1,10 @@
-import { AegisComponent, SYMBOLS, TRIGGERS } from '@aegisjsproject/component';
-import { html, appendTo } from '@aegisjsproject/core';
+import { AegisComponent } from '@aegisjsproject/component/base.js';
 
 class HTMLHelloWorldElement extends AegisComponent {
-	async [SYMBOLS.render](type, { shadow }) {
-		switch(type) {
-			case TRIGGERS.constructed:
-				appendTo(shadow, html`<h1>Hello, World!</h1>`);
-				break;
-		}
+	constructor() {
+		super({
+			template: '<h1><slot name="content">Hello, World!</slot></h1>',
+		});
 	}
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/tempplate",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Template repository for `@aegisjsproject/component` components",
   "keywords": [
     "aegis",
@@ -92,8 +92,8 @@
     "rollup": "^4.12.0"
   },
   "dependencies": {
-    "@aegisjsproject/component": "^0.1.0",
-    "@aegisjsproject/core": "^0.1.0",
-    "@aegisjsproject/styles": "^0.1.0"
+    "@aegisjsproject/component": "^0.1.1",
+    "@aegisjsproject/core": "^0.1.2",
+    "@aegisjsproject/styles": "^0.1.1"
   }
 }

test/dad-joke-html.js

@@ -0,0 +1,14 @@
+import { html } from '@aegisjsproject/core/parsers/html.js';
+import { EVENTS, AEGIS_EVENT_HANDLER_CLASS } from '@aegisjsproject/core/events.js';
+import { registerCallback } from '@aegisjsproject/core/callbackRegistry.js';
+
+const update = registerCallback('dad-joke:update', event => event.target.getRootNode().host.update());
+
+export const template = html`<div part="container">
+	<div part="joke">
+		<slot name="joke">Loading...</slot>
+	</div>
+	<button type="button" id="update-btn" ${EVENTS.onClick}="${update}" class="btn btn-primary ${AEGIS_EVENT_HANDLER_CLASS}" part="btn" autofocus="">
+		<span>Get new Dad Joke</span>
+	</button>
+</div>`;

test/dad-joke-styles.js

@@ -0,0 +1,32 @@
+import { css } from '@aegisjsproject/core/parsers/css.js';
+import { gray } from '@aegisjsproject/styles/palette/bootstrap.js';
+
+export const styles = css`:host {
+	padding: 1.2rem;
+	width: clamp(400px, 100%, 600px);
+	border-radius: 14px;
+	border: 1px solid ${gray[3]};
+}
+
+[part="joke"] {
+	height: 4rem;
+	overflow-y: auto;
+}
+
+::slotted(p) {
+	margin: 0;
+}
+
+.icon {
+	vertical-align: bottom;
+	height: 1em;
+	height: 1lh;
+	width: auto;
+}
+
+.joke {
+	font-family: system-ui;
+	padding: 1.3rem;
+	border-radius: 8px;
+	border: 1px solid #cacaca;
+}`;

test/dad-joke.js

@@ -1,66 +1,36 @@
-import { html, css, replace, appendTo, addStyles } from '@aegisjsproject/core';
-import { gray } from '@aegisjsproject/styles/palette/bootstrap.js';
-import { AegisComponent, SYMBOLS, TRIGGERS } from '@aegisjsproject/component';
+import { html } from '@aegisjsproject/core/parsers/html.js';
+import { replace } from '@aegisjsproject/core/dom.js';
+import { AegisComponent } from '@aegisjsproject/component/base.js';
+import { TRIGGERS, SYMBOLS } from '@aegisjsproject/component/consts.js';
 import { updateIcon } from './icons.js';
+import { styles } from './dad-joke-styles.js';
+import { template } from './dad-joke-html.js';
 
 class HTMLDataJokeElement extends AegisComponent {
-	async [SYMBOLS.render](type, { shadow }) {
+	constructor() {
+		super({ template, styles, exportParts: { joke: 'dad-joke', btn: 'refresh-joke-btn' }});
+	}
+
+	async [SYMBOLS.render](type, { shadow, signal, ...data }) {
 		switch(type) {
 			case TRIGGERS.constructed:
-				addStyles(shadow, css`:host {
-					padding: 1.2rem;
-					width: clamp(400px, 100%, 600px);
-					border-radius: 14px;
-					border: 1px solid ${gray[3]};
-				}
-
-				[part="joke"] {
-					height: 4rem;
-					overflow-y: auto;
-				}
-
-				::slotted(p) {
-					margin: 0;
-				}
-
-				.icon {
-					vertical-align: bottom;
-					height: 1em;
-					height: 1lh;
-					width: auto;
-				}
-
-				.joke {
-					font-family: system-ui;
-					padding: 1.3rem;
-					border-radius: 8px;
-					border: 1px solid #cacaca;
-				}`);
-
-				appendTo(shadow, html`<div part="container">
-					<div part="joke">
-						<slot name="joke">Loading...</slot>
-					</div>
-					<button type="button" id="update-btn" class="btn btn-primary" part="btn">
-						<span>Get new Dad Joke</span>
-					</button>
-				</div>`);
-
-				// Cannot add listeners or `on*` attributes using `html`
-				shadow.getElementById('update-btn').addEventListener('click', () => this.triggerUpdate('click'));
-
 				// Also, for now, elements of a different namespace, such as `<svg>` are not supported
 				shadow.getElementById('update-btn').append(updateIcon.cloneNode(true));
-
 				break;
 
 			case TRIGGERS.connected:
-			case 'click':
-				replace(this, html`<p slot="joke">${await HTMLDataJokeElement.getJoke()}</p>`);
+				this.update({ signal });
 				break;
+
+			default:
+				console.log({ type, ...data });
 		}
 	}
 
+	async update({ signal } = {}) {
+		replace(this, html`<p slot="joke">${await HTMLDataJokeElement.getJoke({ signal })}</p>`);
+	}
+
 	static async getJoke({ signal } = {}) {
 		const resp = await fetch('https://icanhazdadjoke.com', {
 			headers: { Accept: 'text/plain' },

test/icons.js

@@ -1,4 +1,4 @@
-import { svg } from '@aegisjsproject/core';
+import { svg } from '@aegisjsproject/core/parsers/svg.js';
 
 export const updateIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" fill="currentColor" class="icon">
 	<path fill-rule="evenodd" d="M10.24 7.4a4.15 4.15 0 0 1-1.2 3.6 4.346 4.346 0 0 1-5.41.54L4.8 10.4.5 9.8l.6 4.2 1.31-1.26c2.36 1.74 5.7 1.57 7.84-.54a5.876 5.876 0 0 0 1.74-4.46l-1.75-.34zM2.96 5a4.346 4.346 0 0 1 5.41-.54L7.2 5.6l4.3.6-.6-4.2-1.31 1.26c-2.36-1.74-5.7-1.57-7.85.54C.5 5.03-.06 6.65.01 8.26l1.75.35A4.17 4.17 0 0 1 2.96 5z"/>