Adroit flight js version with templates and dependencies

generators/package.json

@@ -13,6 +13,10 @@
     "list-files": "^1.1.3",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
-    "recursive-readdir": "^2.2.1"
+    "recursive-readdir": "^2.2.1",
+    "flight-with-child-components": "4.1.0",
+    "flight-with-resources": "3.0.0",
+    "flight-with-state": "8.1.0",
+    "flightjs": "1.5.2"
   }
 }

generators/templates/template.js

@@ -1,154 +1,52 @@
 /**
- * @module {component-name}
- * @version {version}
- * @since {date}
+ * @module bootstrap-sample
+ * @version 1.0.0
+ * @since Thu Mar 08 2018
  */
 
 // dependencies
-import './{component-name}.hbs';
-import './{component-name}.scss';
-
-const compRegisterRef = require('lib/component-register');
-
-const { registerComponent } = compRegisterRef;
-
-/**
- * The definition of the component. Each DOM element will
- * define the elements class with this string.
- * @type {string}
- */
-export const componentReference = 'app-js__{component-name}';
-
-/**
- * The style definition of the component.
- * @type {string}
- */
-export const styleDefinition = '{component-name}';
-
-/**
- * Factory method to create an instance. Linked to an html element.
- *
- * @return {object} Component instance.
- */
+const flight = require('flightjs');
+// other dependencies
+/*
+	if needed we can add flight-with-state,
+	flight-with-resources, flight-with-child-components etc
+*/
+
+/* Component definition */
 function create{separate-component-name}Instance() {
-	/**
-	 * Component instance.
-	 * @type {Object}
-	 */
-	const instance = {};
-
-	/**
-	 * By setting `instance.domRefs` the baseComponent will replace the value
-	 * of each keys in `instance.domRefs.first` with single elements found
-	 * in `instance.element`. Same for `instance.domRefs.all`, but each key
-	 * will have an array of elements.
-	 *
-	 * `first` example: The value of `childEl` will be a `HTMLElement`
-	 * `all` example: The value of `rows` will be an `Array` of `HTMLElement`
-	 * @type {Object}
-	 */
-	// instance.domRefs = {
-	//   definition: styleDefinition,
-	//   first: {
-	//     childEl: '__child'
-	//   },
-	//   all: {
-	//     rows: '__row'
-	//   }
-	// };
-
-	/** @type {Object} */
-	// const singleRefs = instance.domRefs.first;
-
-	/** @type {Object} */
-	// const listRefs = instance.domRefs.all;
-
-	/**
-	 * `created` is called before `attached`. Can be used to pass data to
-	 * childrens `params` property.
-	 */
-	// instance.created = () => {
-	//   forEach(instance.children, updateChildParams);
-	// };
-
-	/**
-	 * Update the `instance.params` for `childInstance`.
-	 *
-	 * @param {object} childInstance
-	 */
-	// function updateChildParams(childInstance) {
-	//   childInstance.receiveNewParams({
-	//     id: instance.attribute.id,
-	//     updateId: onIdChanged
-	//   });
-	// }
-
-	/**
-	 * The `instance.params` object was changed from parent calling `instance.receiveNewParams`.
-	 * Properties and callback functions can be dealt with or passed down to
-	 * child components.
-	 */
-	// instance.onNewParamsReceived = () => {
-	//   forEach(instance.children, child => {
-	//     child.receiveNewParams({
-	//       updateId: instance.params.updateId
-	//     });
-	//   });
-	// };
-
-	/**
-	 * Initialize any DOM elements which can be found within the hbs file for
-	 * this component.
-	 */
-	function initDOMReferences() {
-		// myEl = domUtil.findFirst('.'
-		//  .concat(exports.styleDefinition)
-		//  .concat('__my-el'),
-		//  instance.element
-		//  );
-	}
-
-	/**
-	 * Logic to run when component is ready
-	 */
-	function init() {}
-
-	/**
-	 * Append listeners to the element.
-	 */
-	function addListeners() {
-		// TODO remove inline comments, just example code.
-		// To attach an event, use one of the following methods.
-		// No need remove the listener in `instance.detached`
-		// instance.addEventListener('click', onClick); //attached to `instance.element`
-		// instance.addEventListener('click', onClick, myEl); //attached to `myEl`
-	}
-
-	/**
-	 * Dealloc variables and removes any added listeners.
-	 */
-	function dispose() {}
-
-	/**
-	 * The DOM Element was added to the DOM.
-	 */
-	instance.attached = () => {
-		initDOMReferences();
-		init();
-		addListeners();
-	};
-
-	/**
-	 * The DOM Element was removed from the DOM.
-	 * Dealloc variables and removes any added listeners that was NOT added
-	 * through `instance.addEventListener`.
-	 */
-	instance.detached = () => {
-		// console.log('detached!', instance.element);
-		dispose();
+	// add attributes here
+	this.attributes({
+		// selectors
+		// helloText: '.{component-name}__js-elem',
+		// variables
+		// someVariable: 1
+	});
+
+	/* initialize the states you want to add
+	   Include flight-with-state on top
+	*/
+	/* this.initialState({
+		sampleState: true
+	}); */
+
+	// custom methods
+	/*  this.customMethod = function () {
+		    alert(this.select('helloText').html());
+	};  */
+
+	// add event listeners to the component
+	this.addListeners = function () {
+		/* this.on('click', {
+			helloText: this.customMethod
+		}); */
 	};
 
-	return instance;
+	// after initializing the component
+	this.after('initialize', function () {
+		this.addListeners();
+	});
 }
 
-registerComponent(componentReference, create{separate-component-name}Instance);
+/* Creat & Attach the component to a DOM node */
+const componentInstance = flight.component(create{separate-component-name}Instance);
+componentInstance.attachTo('.app-js__{component-name}');