retry component loading

Author: BramKaashoek

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "MIT",
   "repository": {
     "type": "git",

src/abode.ts

@@ -22,8 +22,31 @@ export let componentSelector = 'data-component';
 export let components: RegisteredComponents = {};
 export let unPopulatedElements: Element[] = [];
 
-export const register = (name: string, fn: () => Promise<any>) => {
-  components[name] = fn();
+export const register = async (name: string, fn: () => Promise<any>) => {
+  components[name] = await retry(fn, 10, 20);
+};
+
+export const unRegisterAllComponents = () => {
+  components = {};
+};
+
+export const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
+
+const retry = async (
+  fn: () => any,
+  times: number,
+  delayTime: number
+): Promise<any> => {
+  try {
+    return await fn();
+  } catch (err) {
+    if (times > 1) {
+      await delay(delayTime);
+      return retry(fn, times - 1, delayTime * 2);
+    } else {
+      throw new Error(err);
+    }
+  }
 };
 
 export const setComponentSelector = (selector: string) => {
@@ -86,7 +109,7 @@ export const renderAbode = async (el: Element) => {
     at => at.name === componentSelector
   )?.value;
 
-  if (!componentName) {
+  if (!componentName || componentName === '') {
     throw new Error(
       `not all react-abode elements have a value for  ${componentSelector}`
     );

test/TestComponent.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TestComponent = (): JSX.Element => {
+  return <div>testing 1 2 3 </div>;
+};
+
+export default TestComponent;

test/abode.test.tsx

@@ -5,6 +5,10 @@ import {
   setUnpopulatedElements,
   getElementProps,
   setAttributes,
+  renderAbode,
+  register,
+  unRegisterAllComponents,
+  components,
 } from '../src/abode';
 
 describe('getCleanPropName', () => {});
@@ -54,14 +58,53 @@ describe('helper functions', () => {
     expect(abodeElement.getAttribute('classname')).toBe('test-class-name');
   });
 
-  it.skip('getSriptProps', () => {});
-  it.skip('renderAbode', () => {});
+  it('renderAbode without component name set', async () => {
+    const abodeElement = document.createElement('div');
+    abodeElement.setAttribute('data-component', '');
+
+    let err;
+    try {
+      await renderAbode(abodeElement);
+    } catch (error) {
+      err = error;
+    }
+
+    expect(err.message).toEqual(
+      'not all react-abode elements have a value for  data-component'
+    );
+  });
+
+  it('renderAbode without component registered', async () => {
+    const abodeElement = document.createElement('div');
+    abodeElement.setAttribute('data-component', 'TestComponent');
+
+    let err;
+    try {
+      await renderAbode(abodeElement);
+    } catch (error) {
+      err = error;
+    }
+
+    expect(err.message).toEqual('no component registered for TestComponent');
+  });
 });
 
 describe('exported functions', () => {
-  it.skip('register', () => {});
+  beforeEach(() => {
+    document.getElementsByTagName('html')[0].innerHTML = '';
+    unRegisterAllComponents();
+  });
+
+  it('register', async () => {
+    await register('TestComponent', () => import('./TestComponent'));
+    expect(Object.keys(components)).toEqual(['TestComponent']);
+    expect(Object.values(components).length).toEqual(1);
+    expect(Object.keys(Object.values(components)[0])).toEqual(['default']);
+  });
+
   it.skip('getActiveComponents', () => {});
   it.skip('setComponentSelector', () => {});
   it.skip('register', () => {});
   it.skip('populate', () => {});
+  it.skip('getSriptProps', () => {});
 });