@kispace-io/extension-memory-usage 0.8.0

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@kispace-io/extension-memory-usage",
+  "version": "0.8.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@kispace-io/core": "*"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  }
+}

package/src/i18n.json

@@ -0,0 +1,11 @@
+{
+  "namespace": "extensions",
+  "en": {
+    "EXT_MEMORYUSAGE_NAME": "Memory Usage Monitor",
+    "EXT_MEMORYUSAGE_DESC": "Displays JavaScript heap memory usage in the bottom toolbar"
+  },
+  "de": {
+    "EXT_MEMORYUSAGE_NAME": "Speicherverbrauch-Monitor",
+    "EXT_MEMORYUSAGE_DESC": "Zeigt die JavaScript-Heap-Speichernutzung in der unteren Symbolleiste an"
+  }
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+import { extensionRegistry, i18nLazy, contributionRegistry, SYSTEM_LANGUAGE_BUNDLES } from '@kispace-io/core';
+import bundle from './i18n.json';
+
+contributionRegistry.registerContribution(SYSTEM_LANGUAGE_BUNDLES, bundle as any);
+
+const t = i18nLazy('extensions');
+
+extensionRegistry.registerExtension({
+  id: "system.memoryusage",
+  name: t('EXT_MEMORYUSAGE_NAME'),
+  description: t('EXT_MEMORYUSAGE_DESC'),
+  loader: () => import("./memory-usage-extension"),
+  icon: "microchip",
+  
+  
+});

package/src/k-memory-usage.ts

@@ -0,0 +1,59 @@
+import {customElement} from "lit/decorators.js";
+import {KElement} from "@kispace-io/core";
+import {html} from "lit";
+
+@customElement('k-memory-usage')
+export class KMemoryUsage extends KElement {
+    
+    private updateInterval: number | null = null;
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateInterval = window.setInterval(() => {
+            this.requestUpdate();
+        }, 2000);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.updateInterval !== null) {
+            clearInterval(this.updateInterval);
+            this.updateInterval = null;
+        }
+    }
+
+    protected render() {
+        const memory = (performance as any).memory;
+        if (!memory) {
+            return html``;
+        }
+        
+        const usedMB = (memory.usedJSHeapSize / 1048576).toFixed(1);
+        const limitMB = (memory.jsHeapSizeLimit / 1048576).toFixed(0);
+        const percentageNum = (memory.usedJSHeapSize / memory.jsHeapSizeLimit) * 100;
+        const percentage = percentageNum.toFixed(0);
+        
+        const barColor = percentageNum > 80 ? '#ff4444' : percentageNum > 60 ? '#ffaa00' : '#44aa44';
+        
+        return html`
+            <span style="display: inline-flex; align-items: center; justify-content: center; height: 100%; padding-left: 0.5rem; gap: 0.25rem; font-size: 0.85em; color: var(--wa-color-neutral-text);" title="Main thread memory consumption only (excludes web workers)">
+                <wa-icon name="microchip" label="Memory usage"></wa-icon>
+                <span style="display: flex; align-items: center; gap: 0.25rem;">
+                    <span>${usedMB} / ${limitMB} MB</span>
+                    <span style="position: relative; display: inline-block; width: 60px; height: 14px; vertical-align: middle;">
+                        <span style="display: block; position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.1); border-radius: 4px;"></span>
+                        <span style="display: block; position: absolute; width: ${percentage}%; height: 100%; background: ${barColor}; border-radius: 4px; transition: width 0.3s ease;"></span>
+                        <span style="position: absolute; width: 100%; text-align: center; font-size: 0.7em; line-height: 14px; font-weight: 600; color: white; text-shadow: 0 0 2px rgba(0,0,0,0.8);">${percentage}%</span>
+                    </span>
+                </span>
+            </span>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-memory-usage': KMemoryUsage
+    }
+}
+

package/src/memory-usage-extension.ts

@@ -0,0 +1,10 @@
+import {contributionRegistry, HTMLContribution} from "@kispace-io/core";
+import {TOOLBAR_BOTTOM} from "@kispace-io/core";
+import "./k-memory-usage";
+
+contributionRegistry.registerContribution(TOOLBAR_BOTTOM, {
+    target: TOOLBAR_BOTTOM,
+    label: "Memory",
+    html: `<k-memory-usage></k-memory-usage>`
+} as HTMLContribution)
+

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src/**/*"
+  ]
+}