fix: make sure tags with same URI are the same

packages/semcom-sdk/lib/component/services/register-component.service.spec.ts

@@ -5,12 +5,29 @@ describe('RegisterComponentService', () => {
 
   let service: RegisterComponentService;
 
+  const addedUris = new Set();
+
   beforeEach(() => {
 
     service = new RegisterComponentService();
 
   });
 
+  afterEach(() => {
+
+    jest.resetAllMocks();
+    addedUris.clear();
+
+  });
+
+  const mockEvalAndDefine = () => {
+
+    global.eval = jest.fn(async (url) => ({ 'default': {} }));
+    customElements.define = jest.fn((tag, html) => { addedUris.add(tag); });
+    customElements.get = jest.fn((tag) => addedUris.has(tag) ? {} as CustomElementConstructor : undefined);
+
+  };
+
   it('should be correctly instantiated', () => {
 
     expect(service).toBeTruthy();
@@ -96,4 +113,116 @@ describe('RegisterComponentService', () => {
 
   });
 
+  it('should generate a correct tag', async () => {
+
+    mockEvalAndDefine();
+
+    const mockComponent = {
+      uri: 'https://www.google.com/test.js',
+      tag: 'component',
+    } as ComponentMetadata;
+
+    const tag = await service.register(mockComponent);
+    expect(tag.startsWith('semcom-component-')).toBe(true);
+
+  });
+
+  it('should eval and define a component', async () => {
+
+    mockEvalAndDefine();
+
+    const mockComponent = {
+      uri: 'https://www.google.com/test.js',
+      tag: 'component',
+    } as ComponentMetadata;
+
+    await service.register(mockComponent);
+    expect(global.eval).toBeCalledTimes(1);
+    expect(service.isRegistered(mockComponent)).toBeTruthy();
+
+  });
+
+  it('should not reimport an existing component if it was already defined', async () => {
+
+    mockEvalAndDefine();
+
+    const mockComponent = {
+      uri: 'https://www.google.com/test.js',
+      tag: 'component',
+    } as ComponentMetadata;
+
+    await service.register(mockComponent);
+    await service.register(mockComponent);
+
+    expect(global.eval).toBeCalledTimes(1);
+    expect(customElements.define).toBeCalledTimes(1);
+
+  });
+
+  it('should only define a tag once, if two are imported at the same time', async () => {
+
+    mockEvalAndDefine();
+
+    const mockComponent = {
+      uri: 'https://www.google.com/test.js',
+      tag: 'component',
+    } as ComponentMetadata;
+
+    await Promise.all([ service.register(mockComponent), service.register(mockComponent) ]);
+    expect(customElements.define).toBeCalledTimes(1);
+
+  });
+
+  it('should return different html tags for components with different tags', async () => {
+
+    mockEvalAndDefine();
+
+    const mockComponent = {
+      uri: 'https://www.google.com/test.js',
+      tag: 'component',
+    } as ComponentMetadata;
+
+    const mockComponent2 = {
+      uri: 'https://www.google.com/test2.js',
+      tag: 'component2',
+    } as ComponentMetadata;
+
+    const tag = await service.register(mockComponent);
+    await expect(service.register(mockComponent2)).resolves.not.toBe(tag);
+
+  });
+
+  it('should return a different html Tag for components with the same tag but a different URI', async () => {
+
+    mockEvalAndDefine();
+
+    const mockComponent = {
+      uri: 'https://www.google.com/test.js',
+      tag: 'component',
+    } as ComponentMetadata;
+
+    const mockComponent2 = {
+      uri: 'https://www.google.com/test2.js',
+      tag: 'component',
+    } as ComponentMetadata;
+
+    const tag = await service.register(mockComponent);
+    await expect(service.register(mockComponent2)).resolves.not.toBe(tag);
+
+  });
+
+  it('should return the same tag if a component is imported twice', async () => {
+
+    mockEvalAndDefine();
+
+    const mockComponent = {
+      uri: 'https://www.google.com/test.js',
+      tag: 'component',
+    } as ComponentMetadata;
+
+    const tag = await service.register(mockComponent);
+    await expect(service.register(mockComponent)).resolves.toBe(tag);
+
+  });
+
 });

packages/semcom-sdk/lib/component/services/register-component.service.ts

@@ -1,4 +1,5 @@
 /* eslint-disable no-eval -- webpack can't handle dynamic imports */
+import jsSHA from 'jssha';
 import { AbstractRegisterComponentService, ComponentMetadata } from '@digita-ai/semcom-core';
 
 export class RegisterComponentService extends AbstractRegisterComponentService {
@@ -23,31 +24,29 @@ export class RegisterComponentService extends AbstractRegisterComponentService {
 
     }
 
-    const tag = `semcom-${ componentMetadata.tag }-${ btoa(Date.now().toString()).replace('==', '').toLowerCase() }`;
+    const shaObj = new jsSHA('SHAKE256', 'TEXT');
+    shaObj.update(componentMetadata.uri);
+    const hash = shaObj.getHash('B64', { outputLen: 64 }).replace(/[+=/]/g, '').toLowerCase();
 
-    let elementComponent;
+    const tag = `semcom-${ componentMetadata.tag }-${ hash }`;
 
     try {
 
-      elementComponent = await eval(`import("${componentMetadata.uri}")`);
-
-    } catch (error) {
+      if (!customElements.get(tag)) {
 
-      throw new Error('Something went wrong during import');
+        const elementComponent = await eval(`import("${encodeURI(componentMetadata.uri)}")`);
 
-    }
+        if (!customElements.get(tag)) {
 
-    try {
-
-      if (!customElements.get(tag)) {
+          customElements.define(tag, elementComponent.default);
 
-        customElements.define(tag, elementComponent.default);
+        }
 
       }
 
     } catch (error) {
 
-      throw Error(`Failed to register componentMetadata: ${error}`);
+      throw Error(`Failed to import or register componentMetadata: ${error}`);
 
     }
 

packages/semcom-sdk/package.json

@@ -74,6 +74,7 @@
   "dependencies": {
     "@digita-ai/semcom-core": "0.4.1",
     "buffer": "6.0.3",
+    "jssha": "^3.2.0",
     "n3": "1.10.0"
   },
   "eslintIgnore": [
@@ -95,10 +96,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 78.57,
+        "branches": 86.67,
         "functions": 50,
-        "lines": 70.69,
-        "statements": 67.74
+        "lines": 80.33,
+        "statements": 76.92
       }
     }
   }