Merge pull request #1 from TriPSs/master

Added possibility to also register react components directly

Author: BramKaashoek

README.md

@@ -49,7 +49,13 @@ const Cart = (): JSX.Element => {
 // src/App.tsx
 import { populate, register } from 'react-abode';
 
-register('Cart', () => import('./modules/Cart/Cart')); // Each module must have the component you want to render as a default export
+// Import can be used to reguster component
+register('Cart', () => import('./modules/Cart/Cart'));
+
+// Component can also be used directly
+import Cart from './modules/Cart/Cart'
+
+register('Cart', () => Cart);
 
 populate({ attributes: { classname: 'some-class-name' } });
 ```
@@ -79,6 +85,10 @@ If you do not want to use `data-component` you can change the component selector
 
 You can use `getActiveComponents` to get a list of all Abode elements currently in your DOM.
 
+#### getRegisteredComponents
+
+You can use `getRegisteredComponents` to get all registered components.
+
 ### Populate parameters
 
 The `populate` function can be passed an object with options.

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.7",
+  "version": "0.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,6 +35,10 @@
   "name": "react-abode",
   "author": "Bram Kaashoek",
   "module": "dist/react-abode.esm.js",
+  "dependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
   "devDependencies": {
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
@@ -44,10 +48,6 @@
     "tslib": "^2.0.0",
     "typescript": "^3.9.7"
   },
-  "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
-  },
   "resolutions": {
     "serialize-javascript": "^3.1.0"
   }

src/abode.ts

@@ -1,5 +1,5 @@
 import { render } from 'react-dom';
-import { createElement } from 'react';
+import { createElement, FC } from 'react';
 
 interface RegisteredComponents {
   [key: string]: Promise<any>;
@@ -18,11 +18,15 @@ interface PopulateOptions {
   callback?: Function;
 }
 
+export type RegisterPromise = () => Promise<any>;
+export type RegisterComponent = () => FC<any>;
+export type RegisterFN = RegisterPromise | RegisterComponent;
+
 export let componentSelector = 'data-component';
 export let components: RegisteredComponents = {};
 export let unPopulatedElements: Element[] = [];
 
-export const register = (name: string, fn: () => Promise<any>) => {
+export const register = (name: string, fn: RegisterFN) => {
   components[name] = retry(fn, 10, 20);
 };
 
@@ -53,6 +57,10 @@ export const setComponentSelector = (selector: string) => {
   componentSelector = selector;
 };
 
+export const getRegisteredComponents = () => {
+  return components;
+};
+
 export const getActiveComponents = () => {
   return Array.from(
     new Set(getAbodeElements().map(el => el.getAttribute(componentSelector)))
@@ -120,8 +128,9 @@ export const renderAbode = async (el: Element) => {
     throw new Error(`no component registered for ${componentName}`);
   }
 
-  // @ts-ignore
-  render(createElement(module.default, props), el);
+  const element = module.default || module;
+
+  render(createElement(element, props), el);
 };
 
 export const trackPropChanges = (el: Element) => {

src/index.ts

@@ -3,5 +3,6 @@ export {
   setComponentSelector,
   register,
   getScriptProps,
+  getRegisteredComponents,
   getActiveComponents,
 } from './abode';

test/abode.test.tsx

@@ -1,6 +1,7 @@
 import {
   getCleanPropName,
   getAbodeElements,
+  getRegisteredComponents,
   unPopulatedElements,
   setUnpopulatedElements,
   getElementProps,
@@ -12,6 +13,8 @@ import {
   populate,
   delay,
 } from '../src/abode';
+// @ts-ignore
+import TestComponent from './TestComponent';
 
 import 'mutationobserver-shim';
 global.MutationObserver = window.MutationObserver;
@@ -102,30 +105,56 @@ describe('exported functions', () => {
     register('TestComponent', () => import('./TestComponent'));
     expect(Object.keys(components)).toEqual(['TestComponent']);
     expect(Object.values(components).length).toEqual(1);
-    const promise = Object.values(components)[0];
+    let promise = Object.values(components)[0];
     expect(typeof promise.then).toEqual('function');
-    const module = await promise;
+    let module = await promise;
+    expect(typeof module).toEqual('object');
     expect(Object.keys(module)).toEqual(['default']);
+
+    register('TestComponent2', () => TestComponent);
+    expect(Object.keys(components)).toEqual([
+      'TestComponent',
+      'TestComponent2',
+    ]);
+    expect(Object.values(components).length).toEqual(2);
+    promise = Object.values(components)[1];
+    expect(typeof promise.then).toEqual('function');
+    module = await promise;
+    expect(typeof module).toEqual('function');
   });
 
   it('populate', async () => {
     const abodeElement = document.createElement('div');
     abodeElement.setAttribute('data-component', 'TestComponent');
+    const abodeSecondElement = document.createElement('div');
+    abodeSecondElement.setAttribute('data-component', 'TestComponent2');
     document.body.appendChild(abodeElement);
+    document.body.appendChild(abodeSecondElement);
     expect(document.body.innerHTML).toEqual(
-      `<div data-component="TestComponent"></div>`
+      `<div data-component="TestComponent"></div><div data-component="TestComponent2"></div>`
     );
 
     register('TestComponent', () => import('./TestComponent'));
-    populate();
+    register('TestComponent2', () => TestComponent);
+    await populate();
 
     await delay(20);
 
     expect(document.body.innerHTML).toEqual(
-      `<div data-component="TestComponent" react-abode-populated="true"><div>testing 1 2 3 </div></div>`
+      `<div data-component="TestComponent" react-abode-populated="true"><div>testing 1 2 3 </div></div>` +
+        `<div data-component="TestComponent2" react-abode-populated="true"><div>testing 1 2 3 </div></div>`
     );
   });
 
+  it('getRegisteredComponents', () => {
+    register('TestComponent', () => import('./TestComponent'));
+    register('TestComponent2', () => TestComponent);
+
+    const registeredComponents = getRegisteredComponents();
+
+    expect(Object.keys(registeredComponents).length).toEqual(2);
+  });
+
   it.skip('getActiveComponents', () => {});
   it.skip('setComponentSelector', () => {});
   it.skip('register', () => {});

yarn.lock

@@ -4679,7 +4679,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -4718,29 +4718,27 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-react-dom@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
-  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
+react-dom@>=16:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
+  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.20.1"
 
 react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
-  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+react@>=16:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-pkg-up@^2.0.0:
   version "2.0.0"
@@ -5132,10 +5130,10 @@ sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
+  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"