@kdex-tech/sample-app-2 0.0.1

package/README.md

@@ -0,0 +1,21 @@
+# Sample App 2
+
+To deploy this app to a cluster
+
+1. Publish it to an NPM registry
+
+```bash
+npm publish --access public
+```
+
+2. Apply the [kdexapp.yaml](kdexapp.yaml) file to your cluster:
+
+```bash
+kubectl apply -f kdexapp.yaml
+```
+
+To undeploy this app, delete the [kdexapp.yaml](kdexapp.yaml) file from your cluster:
+
+```bash
+kubectl delete -f kdexapp.yaml
+```

package/app.js

@@ -0,0 +1,53 @@
+import { AppBridge } from '@kdex-tech/ui';
+
+export class SampleApp2 extends AppBridge(HTMLElement) {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    this.shadowRoot.addEventListener('click', this._handleInternalClick.bind(this));
+  }
+
+  onRouteActivated(path) {
+    const content = this._getContentForPath(path);
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          padding: 1rem;
+          border-radius: 4px;
+        }
+      </style>
+      <div>
+        <h3>A simple KDex app</h3>
+        <pre>
+appId: ${this.getAttribute('data-content-id')}
+appPath: ${this.appPath}
+</pre>
+        ${content}
+        <button data-navigate="/foo">Navigate to /foo</button>
+        <button data-navigate="/bar">Navigate to /bar</button>
+      </div>
+    `;
+  }
+
+  _getContentForPath(path) {
+    switch (path) {
+      case '/foo': return `<h1>I've been routed to as /foo</h1>`;
+      case '/bar': return `<h1>I've been routed to as /bar</h1>`;
+      default: return `<p>This is a test component to verify the module loading works.</p>`;
+    }
+  }
+
+  // Use a data-attribute to identify navigation targets
+  _handleInternalClick(event) {
+    const trigger = event.composedPath().find(el => el.dataset?.navigate);
+    if (trigger) {
+      this.navigate(trigger.dataset.navigate);
+    }
+  }
+}
+
+// Register the component
+customElements.define('sample-app-2', SampleApp2);

package/kdexapp.yaml

@@ -0,0 +1,11 @@
+apiVersion: kdex.dev/v1alpha1
+kind: KDexApp
+metadata:
+  name: sample-app-2
+spec:
+  customElements:
+  - description: A simple KDex app
+    name: sample-app-2
+  packageReference:
+    name: "@kdex-tech/sample-app-2"
+    version: 0.0.1

package/package.json

@@ -0,0 +1,16 @@
+{
+  "author": "KDex Tech Inc.",
+  "description": "This is an example of a simple KDex App",
+  "keywords": [
+    "kdex",
+    "app"
+  ],
+  "license": "Apache-2.0",
+  "module": "./app.js",
+  "name": "@kdex-tech/sample-app-2",
+  "type": "module",
+  "version": "0.0.1",
+  "dependencies": {
+    "@kdex-tech/ui": "^1.2.13"
+  }
+}