fisis

README.md

@@ -84,12 +84,28 @@ To let Cumbia know what to do with the HTML element we can pass an object with s
 
   - By default the event listener attached is based on `click` events.
   - For `input` elements the event listener attached is `change`.
-  - For `form` the name of the data-action MUST BE `submit` and it'll attach the event listener to the HTML form.
+  - For `form` the name of the data-action **MUST BE `submit`** and it'll attach the event listener to the HTML form.
   - `data-action-key` will attach `keyup` event listener to the action elements.
 
 When calling the action defined in your JS component, cumbia will give you the list of all the values parsed, including the elements.
 
 
+### Global Initialisers
 
+In case you need to interact with all data-components after initialising the process you can provide an argument to cumbia. This might be useful to log or check something in every component.
 
+#### Debugger
 
+```javascript
+import cumbia, { debug } from 'cumbia';
+
+// Define your component
+const component = ({ el }) => {
+
+};
+
+// Call the power of the Cumbia
+cumbia([component], {
+  globalInitalisers: [debug]
+});
+```

cumbia.d.ts

@@ -1,15 +1,23 @@
-declare module "_version" {
-    export const version = "0.0.5";
+declare module "example/counter/components/todo/messages" {
+    export enum MESSAGES {
+        ADD_TODO = "ADD_TODO"
+    }
+    export type MESSAGES_TYPE = {
+        [MESSAGES.ADD_TODO]: string;
+    };
+}
+declare module "src/_version" {
+    export const version = "0.0.6";
 }
-declare module "utils/message" {
+declare module "src/utils/message" {
     const _default: {
-        error: (msg: string) => void;
-        warn: (msg: string) => void;
-        info: (msg: string) => void;
+        error: (msg: any) => void;
+        warn: (msg: any) => void;
+        info: (msg: any) => void;
     };
     export default _default;
 }
-declare module "types/cumbiaTypes" {
+declare module "src/types/cumbiaTypes" {
     type Initialisers = (elements: Array<HTMLElement>) => void;
     type GlobalInitialisers = Array<Initialisers>;
     export type CumbiaOptions = {
@@ -40,59 +48,66 @@ declare module "types/cumbiaTypes" {
     };
     export type ComponentFactory = (component: Component) => ComponentInstance;
 }
-declare module "actionParser/utils/parseValues" {
-    import { BindedValues } from "types/cumbiaTypes";
+declare module "src/actionParser/utils/parseValues" {
+    import { BindedValues } from "src/types/cumbiaTypes";
     const parseValues: (element: HTMLElement) => BindedValues;
     export default parseValues;
 }
-declare module "actionParser/utils/caller" {
-    import { ComponentActions } from "types/cumbiaTypes";
+declare module "src/actionParser/utils/caller" {
+    import { ComponentActions } from "src/types/cumbiaTypes";
     export type CallerValues = {
         prevent: boolean;
     };
     const callFnWithValues: (element: HTMLElement, fnActions: ComponentActions, actionName: string, { prevent }: CallerValues) => (e: Event) => void;
     export default callFnWithValues;
 }
-declare module "actionParser/data-action" {
-    import { ComponentActions } from "types/cumbiaTypes";
+declare module "src/actionParser/data-action" {
+    import { ComponentActions } from "src/types/cumbiaTypes";
     const parseActions: (element: HTMLElement, fnActions: ComponentActions) => void;
     export default parseActions;
 }
-declare module "actionParser/data-key" {
-    import { ComponentActions } from "types/cumbiaTypes";
+declare module "src/actionParser/data-key" {
+    import { ComponentActions } from "src/types/cumbiaTypes";
     const parseKey: (element: HTMLElement, fnActions: ComponentActions) => void;
     export default parseKey;
 }
-declare module "actionParser/lifecycle" {
-    import { ComponentInstance } from "types/cumbiaTypes";
+declare module "src/actionParser/lifecycle" {
+    import { ComponentInstance } from "src/types/cumbiaTypes";
     const parseLifecycle: (instance: ComponentInstance, element: HTMLElement) => void;
     export default parseLifecycle;
 }
-declare module "core/pubsub" {
+declare module "src/core/pubsub" {
     export const on: (topic: string, fn: any) => void;
-    export const emit: (topic: string, message: any) => void;
+    type emitterType = <T>(topic: string, message: T) => void;
+    export const emit: emitterType;
     const _default_1: {
         on: (topic: string, fn: any) => void;
-        emit: (topic: string, message: any) => void;
+        emit: emitterType;
     };
     export default _default_1;
 }
-declare module "core/componentExecutor" {
-    import { ComponentFactory } from "types/cumbiaTypes";
+declare module "src/core/componentExecutor" {
+    import { ComponentFactory } from "src/types/cumbiaTypes";
     const componentExecutor: (element: HTMLElement, componentFactory: Map<string, ComponentFactory>, name: string) => void;
     export default componentExecutor;
 }
-declare module "core/createApp" {
-    import { ComponentFactory } from "types/cumbiaTypes";
-    import { CumbiaOptions } from "types/cumbiaTypes";
+declare module "src/core/createApp" {
+    import { ComponentFactory } from "src/types/cumbiaTypes";
+    import { CumbiaOptions } from "src/types/cumbiaTypes";
     export const initialisedComponent: Map<HTMLElement, boolean>;
     export const componentFactory: Map<string, ComponentFactory>;
     const createApp: (options: CumbiaOptions) => void;
     export default createApp;
 }
-declare module "cumbia" {
-    import { ComponentFactory } from "types/cumbiaTypes";
-    import { CumbiaOptions } from "types/cumbiaTypes";
+declare module "src/utils/components/debug" {
+    const debug: (components: Array<HTMLElement>) => void;
+    export default debug;
+}
+declare module "src/cumbia" {
+    import { ComponentFactory } from "src/types/cumbiaTypes";
+    import { CumbiaOptions } from "src/types/cumbiaTypes";
+    import debug from "src/utils/components/debug";
     const addComponents: (components: Array<ComponentFactory>, options: CumbiaOptions) => void;
+    export { debug };
     export default addComponents;
 }

example/counter/components/todo/messages.ts

@@ -0,0 +1,7 @@
+export enum MESSAGES {
+  ADD_TODO = "ADD_TODO",
+}
+
+export type MESSAGES_TYPE = {
+  [MESSAGES.ADD_TODO]: string;
+};

example/counter/components/todo/todo.js

@@ -0,0 +1,11 @@
+import { MESSAGES_TYPE } from "./messages";
+
+export const todo = ({ emit }) => {
+  const actions = {
+    add: ({ name }) => emit<MESSAGES_TYPE>("ADD_TODO", name.value),
+  };
+
+  return {
+    actions,
+  };
+};

example/counter/components/todo/todoList.js

@@ -0,0 +1,13 @@
+export const todoList = ({ on }) => {
+    const init = () => {
+        on()
+    }
+    const actions = {
+      add: ({ name }) => emit("ADD_TODO", name.value),
+    };
+
+    return {
+      actions,
+    };
+  };
+

example/counter/index.html

@@ -41,6 +41,22 @@ <h2>Value: <span data-value="count">5</span></h2>
       </p>
     </form>
 
+    <h2>Todo</h2>
+    <form data-component="todo">
+      <label for="name"></label>
+      <input data-value="name" name="name" placeholder="Insert name" value="Wow"></input>
+      <button data-action="add" type="submit">Submit</button>      
+    </form>
+    <ul data-component="todoList">
+
+    </ul>
+
+    <noscript>
+      <li data-template="todo-item">
+        {{ value }}
+      </li>
+  </noscript>
+
     <script src="index.js"></script>
   </body>
 </html>

example/counter/index.js

@@ -1,4 +1,5 @@
-import cumbia from '../../dist-lib/cumbia.js';
+import cumbia from '../../cumbia.js';
+import debug from '../../src/utils/components/debug';
 
 const counter = ({ el }) => {
   const init = (values) => {
@@ -34,4 +35,4 @@ const form = () => {
   };
 };
 
-cumbia([form, counter]);
+cumbia([form, counter], { globalInitialisers: [debug]});

src/_version.ts

@@ -1 +1 @@
-export const version = '0.0.5';
+export const version = '0.0.6';

src/actionParser/data-action.ts

@@ -10,8 +10,9 @@ const parseActions = (element: HTMLElement, fnActions: ComponentActions) => {
   actions.forEach((actionElement: HTMLElement) => {
     const actionName =
       actionElement.getAttribute(dataActionAttr) || 'default_action_name';
+    const actionType = actionElement.getAttribute('type');
 
-    if (actionName === 'submit') {
+    if (actionName === 'submit' || actionType === 'submit') {
       if (element.tagName !== 'FORM') {
         return message.error('Trying to handle submit handler outside of form');
       }

src/core/pubsub.ts

@@ -1,3 +1,4 @@
+import msg from "../utils/message";
 const subscriptions = new Map<string, Array<(params: any) => void>>();
 
 export const on = (topic: string, fn: any) => {
@@ -6,7 +7,10 @@ export const on = (topic: string, fn: any) => {
   subscriptions.set(topic, currentSubscriptions);
 };
 
-export const emit = (topic: string, message: any) => {
+type emitterType = <T>(topic: string, message: T) => void;
+
+export const emit: emitterType = (topic, message) => {
+  msg.info({ topic, message });
   const fns = subscriptions.get(topic) || [];
 
   fns.forEach((fn) => {

src/cumbia.ts

@@ -4,8 +4,12 @@ import message from "./utils/message";
 import { ComponentFactory } from "types/cumbiaTypes";
 import createApp, { componentFactory } from "./core/createApp";
 import { CumbiaOptions } from "types/cumbiaTypes";
+import debug from "./utils/components/debug";
 
-const addComponents = (components: Array<ComponentFactory>, options: CumbiaOptions) => {
+const addComponents = (
+  components: Array<ComponentFactory>,
+  options: CumbiaOptions
+) => {
   if (!components.length) {
     message.error("No components passed");
   }
@@ -25,9 +29,15 @@ const addComponents = (components: Array<ComponentFactory>, options: CumbiaOptio
     componentFactory.set(component.name, component);
   });
 
-  createApp(options);
+  document.addEventListener("DOMContentLoaded", function() { 
+    createApp(options);
+  });
 };
 
 message.info(`Initializing ${version}`);
 
+export { debug };
+
+
+
 export default addComponents;

src/utils/components/debug.ts

@@ -0,0 +1,46 @@
+const globalCSS = `
+    * {
+        transition: outline 1s;
+    }
+        .debugIcon {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            height: 25px;
+            cursor: pointer;
+            background-image: url("https://github.com/neomaxzero/cumbia/blob/master/assets/logomin.png?raw=true");
+            background-size: contain;
+            background-repeat: no-repeat;
+            padding-left: 25px;
+            padding-top: 2px;
+            color: #888;
+        }
+
+        .signElement {
+            outline: 3px solid deeppink;
+        }
+`;
+
+const debug = (components: Array<HTMLElement>) => {  
+  const css = document.createElement("style");
+  css.innerHTML = globalCSS;
+  document.head.appendChild(css);
+
+  const debugIcon = document.createElement("div");
+  debugIcon.classList.add("debugIcon");
+
+  debugIcon.innerHTML = 'DEBUG';
+  document.body.appendChild(debugIcon);
+
+  debugIcon.addEventListener("click", () => {
+    components.forEach((comp) => {
+        comp.classList.add('signElement');
+
+      setTimeout(() => {
+        comp.classList.remove('signElement');
+      }, 3000);
+    });
+  });
+};
+
+export default debug;

src/utils/message.ts

@@ -1,6 +1,6 @@
 const logPrefix = '🎼 Cumbia:';
-const error = (msg: string) => console.error(`${logPrefix} ${msg}`);
-const warn = (msg: string) => console.warn(`${logPrefix} ${msg}`);
-const info = (msg: string) => console.info(`${logPrefix} ${msg}`);
+const error = (msg: any) => console.error(`${logPrefix}`,msg);
+const warn = (msg: any) => console.warn(`${logPrefix}`, msg);
+const info = (msg: any) => console.info(`${logPrefix}`, msg);
 
 export default { error, warn, info };