From d782f4629ec5cc7afbd21c2cd75bd72e31d37149 Mon Sep 17 00:00:00 2001
From: afterlifepro <96529802+Afterlifepro@users.noreply.github.com>
Date: Sun, 24 Nov 2024 00:38:40 +0000
Subject: [PATCH] add <alert-> component

litterally identical to <console-> but it uses alert( not log( and calls alert() not console.log()
---
 index.html                          |  2 +
 src/components/alert.ts             | 21 ++++++++++
 src/components/console.test copy.ts | 59 +++++++++++++++++++++++++++++
 src/main.ts                         |  2 +
 4 files changed, 84 insertions(+)
 create mode 100644 src/components/alert.ts
 create mode 100644 src/components/console.test copy.ts

diff --git a/index.html b/index.html
index 25d87c3..ba101a1 100644
--- a/index.html
+++ b/index.html
@@ -58,5 +58,7 @@
       </scope->
     </scope->
     <console- log(="Hi, my name is {name} again" )></console->
+
+    <alert- alert(="Hello World" )></alert->
   </body>
 </html>
diff --git a/src/components/alert.ts b/src/components/alert.ts
new file mode 100644
index 0000000..96aac24
--- /dev/null
+++ b/src/components/alert.ts
@@ -0,0 +1,21 @@
+import { Variable } from '../variable';
+import { BaseHtmlangElement } from './htmlangElement';
+
+export class AlertDash extends BaseHtmlangElement {
+  static getTagName = () => 'alert' as const;
+
+  execute = (): void => {
+    let alertVal = this.getAttribute('alert(');
+    if (!alertVal) {
+      return;
+    }
+
+    Variable.forEach(alertVal, (varName) => {
+      const result = this.parentScope.getVariable(varName);
+      const value = result.found ? result.variable.value : undefined;
+      alertVal = alertVal!.replaceAll(`{${varName}}`, value);
+    });
+
+    alert(alertVal);
+  };
+}
diff --git a/src/components/console.test copy.ts b/src/components/console.test copy.ts
new file mode 100644
index 0000000..66f087b
--- /dev/null
+++ b/src/components/console.test copy.ts	
@@ -0,0 +1,59 @@
+import { ElementGraph } from '../elementGraph';
+
+describe('console', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should call console.log()', async () => {
+    const spy = vi.spyOn(console, 'log');
+
+    const container = document.createElement('div');
+    container.innerHTML = `<console- log(="Hello, world!" )></console->`;
+    document.body.appendChild(container);
+    ElementGraph.build().execute();
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('Hello, world!');
+  });
+
+  it('should not call console.log() if attribute is empty', async () => {
+    const spy = vi.spyOn(console, 'log');
+
+    const container = document.createElement('div');
+    container.innerHTML = `<console- log(="" )></console->`;
+    document.body.appendChild(container);
+    ElementGraph.build().execute();
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('should expand variables before logging', () => {
+    const spy = vi.spyOn(console, 'log');
+
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <const- i="2"></const->
+      <console- log(="{i} should be 2" )></console->
+    `;
+    document.body.appendChild(container);
+    ElementGraph.build().execute();
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('2 should be 2');
+  });
+
+  it('should log undefined variables', () => {
+    const spy = vi.spyOn(console, 'log');
+
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <console- log(="{i} should be undefined" )></console->
+    `;
+    document.body.appendChild(container);
+    ElementGraph.build().execute();
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith('undefined should be undefined');
+  });
+});
diff --git a/src/main.ts b/src/main.ts
index fc037a6..b7b2445 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import './style.css';
 
+import { AlertDash } from './components/alert';
 import { ConsoleDash } from './components/console';
 import { ConstDash } from './components/const';
 import { ElseDash } from './components/else';
@@ -18,6 +19,7 @@ export { globalScope };
 
 export function defineElements(): void {
   const elements: Array<typeof BaseHtmlangElement> = [
+    AlertDash,
     ConsoleDash,
     ConstDash,
     ElseDash,