add <alert-> component

index.html

@@ -58,5 +58,7 @@
       </scope->
     </scope->
     <console- log(="Hi, my name is {name} again" )></console->
+
+    <alert- alert(="Hello World" )></alert->
   </body>
 </html>

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);
+  };
+}

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');
+  });
+});

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,