upgrade and reorg types

src/index.ts

@@ -1,16 +1,12 @@
 import phantom from "./phantom";
 import createPhantomStore from "./createPhantomStore";
 // types
-export {
-  PhantomElement,
-  PhantomDOMFunction,
-  PhantomDOM,
-} from "./types/phantomDOM"; // phantomDOM
+export { PhantomElement, PhantomComponent, PhantomDOM } from "./types/phantom";
 export {
   PhantomAction,
   PhantomReducer,
   Subscription,
-} from "./types/phantomStore"; // phantomStore
+} from "./types/phantomStore";
 
 export { createPhantomStore };
 export default phantom;

src/phantom.ts

@@ -1,14 +1,17 @@
 import { PhantomStore } from "./types/phantomStore";
-import { Phantom } from "./types/phantom";
-
 import {
-  PhantomDOMFunction,
+  Phantom,
+  PhantomComponent,
   PhantomDOM,
   PhantomElement,
-} from "./types/phantomDOM";
+} from "./types/phantom";
+
 import phantomExorciser from "./phantomExorciser";
 
-function PHANTOM(phantomStore: PhantomStore, PhantomDOM: PhantomDOMFunction) {
+function PHANTOM(
+  phantomStore: PhantomStore,
+  phantomComponent: PhantomComponent
+) {
   let phantomDOM: PhantomDOM = {
     test: {
       tagName: "div",
@@ -40,7 +43,7 @@ function PHANTOM(phantomStore: PhantomStore, PhantomDOM: PhantomDOMFunction) {
   function coalescePhantomDOM() {
     return `
     <div id="PHANTOM">
-      ${PhantomDOM()}
+      ${phantomComponent()}
     </div> 
     `;
   }

src/types/phantom.ts

@@ -3,10 +3,25 @@ import {
   PhantomStore,
   FireFunction,
 } from "./phantomStore";
-import { PhantomDOMFunction } from "./phantomDOM";
+
+export type PhantomElement = {
+  tagName: string;
+  attributes: { id?: string | number; class?: string | DOMTokenList };
+  children: PhantomElement[] | [];
+  innerHTML: string;
+  dataset?: DOMTokenList | {};
+};
+
+export type PhantomComponent = {
+  (): string;
+};
+
+export type PhantomDOM = {
+  [key: string]: PhantomElement;
+};
 
 export type Phantom = {
-  (phantomStore: PhantomStore, phantomElement: PhantomDOMFunction): {
+  (phantomStore: PhantomStore, phantomElement: PhantomComponent): {
     fire: FireFunction;
     data: () => any;
     appear: () => HTMLElement;