feat(slot mixin): adds helpers for working with slots

Also organized the files to clearly identify what is private to the component and public to the world.

Author: jyounce

README.md

@@ -8,34 +8,37 @@ Our consumable web components are prefixed with "**rb-**"
 example [rb-button](https://rapid-build-ui.io/components/rb-button).
 
 
+
 ## Installation
 ```bash
-$ npm install @rapid-build-ui/rb-base
+$ yarn add @rapid-build-ui/rb-base
 ```
 
 
+
 ## What's Included
 * Web component library [SkateJS](http://skatejs.netlify.com/).
-* The view rendering engine [lit-html](https://polymer.github.io/lit-html/).
-* Imports:
-	* guid-service.js
-	* type-service.js
-	* view-directives.js
+* The view rendering engine [lit-html](https://lit-html.polymer-project.org/).
+* API (creates this.rb object that contains a set of common helper objects):
+	* [this.rb.elms](#thisrbelms)
+	* [this.rb.events](#thisrbevents)
+	* [this.rb.view](#thisrbevents)
 * Callbacks:
-	* viewReady()
-* Creates this.rb object that contains a set of common helper objects:
-	* this.rb.elms
-	* this.rb.events
-	* this.rb.view
+	* [viewReady()](#viewready)
+* Imports:
+	* [guid service](#guid-service)
+	* [type service](#type-service)
+	* [view directives](#view-directives)
+
 
 
 ## How To Use
 ```js
 /* Example
  **********/
-import { props, html, RbBase } from '../../rb-base/scripts/rb-base.js';
-import view from '../../rb-base/scripts/view-directives.js';
-import template from '../views/rb-popover.html';
+import { RbBase, props, html } from '../../rb-base/scripts/rb-base.js';
+import view                    from '../../rb-base/scripts/public/view/directives.js';
+import template                from '../views/rb-popover.html';
 
 export class RbPopover extends RbBase() {
 	// Lifecycle
@@ -49,36 +52,71 @@ export class RbPopover extends RbBase() {
 		this.showPopover = !this.showPopover;
 	}
 	// Template
-	render({ props }) { // :string
+	render({ props, state }) { // :string
 		return html template;
 	}
 }
 ```
 
 
+
+## API
+
+### this.rb.elms
+* An object/hashmap to store component elements.
+* *See [how to use...](#how-to-use)*
+
+
+### this.rb.events
+* Properties
+	* events :object (readonly, hashmap of active events)
+* Methods
+	* add(elm(s), 'space separated events', callback[, opts]) :void
+		* events are automatically removed in disconnectedCallback()
+			* meaning, you don't have to call remove() or removeAll()
+		* opts :{}
+			* [default options](https://goo.gl/f3kP5A)
+			* opts.bind (custom):
+				* undefined (binds to component, default)
+				* false | null (binds to target elm)
+				* elm (binds to supplied elm)
+	* emit(elm, 'event' [, { detail: any } ]) :boolean
+	* remove(elm(s), 'space separated events', callback) :void
+	* removeAll([opts]) :void
+		* opts :{}
+			* opts.force (internal option) :boolean
+				* forces events to be set to empty {}
+
+
+### this.rb.view
+* Properties
+	* isReady :boolean (readonly, will be true when view is ready)
+
+
+
 ## Callbacks (optional)
 
 ### viewReady()
-*See "How To Use"*  
+*See [how to use...](#how-to-use)*  
 Executed once when view is ready and all its rb sub components views are ready.  
 Use when you need to make sure elements are accessible in the shadow dom.
 
 
 
 ## Imports (optional)
 
-### guid-service.js
+### guid service
 * Methods
 	* create(maxLength = 12) :string (sometimes returns maxLength - 1 chars)
 
 ```js
 // Example
-import Guid from '../../rb-base/scripts/guid-service.js';
+import Guid from '../../rb-base/scripts/public/services/guid.js';
 const guid = Guid.create();
 ```
 
 
-### type-service.js
+### type service
 * Methods (**is.methods() :boolean**)
 	* get(val) :string (returns val type)
 	* is.array(val)
@@ -95,17 +133,22 @@ const guid = Guid.create();
 
 ```js
 // Example
-import Type from '../../rb-base/scripts/type-service.js';
+import Type from '../../rb-base/scripts/public/services/type.js';
 const isString = Type.is.string('rapid');
 ```
 
 
-### view-directives.js
-Returns object of
-[lit-html](https://polymer.github.io/lit-html/guide/writing-templates.html#directives)
-[directives](https://github.com/rapid-build-ui/rb-base/blob/master/src/client/scripts/view-directives.js)
+### view directives
+Returns an object of
+[lit-html](https://lit-html.polymer-project.org/guide/template-reference#built-in-directives)
+[directives](https://github.com/rapid-build-ui/rb-base/blob/master/src/client/scripts/public/view/directives.js)
 to be used in view.
 
+```js
+// Example
+import view from '../../rb-base/scripts/public/view/directives.js';
+```
+
 ```html
 <!-- Example (import view object in js, see "How To Use"): -->
 <ul>
@@ -114,26 +157,4 @@ to be used in view.
 		(hero, i) => html`<li>${i} ${hero}</li>`
 	)}
 </ul>
-```
-
-
-## API
-
-### this.rb.elms
-*See "How To Use"*  
-This is object/hashmap to store component elements.
-
-
-### this.rb.events
-* Properties
-	* events :object (readonly, hashmap of active events)
-* Methods
-	* add(elm, 'space separated events', callback[, opts]) :void
-	* remove(elm, 'space separated events', callback) :void
-	* removeAll([opts]) :void
-	* emit(elm, 'event' [, { detail: any } ]) :boolean
-
-
-### this.rb.view
-* Properties
-	* isReady :boolean (readonly, will be true when view is ready)
+```

rapid-build.cson

@@ -14,7 +14,7 @@ common:
 		from:
 			minFile:
 				scripts: [
-					'scripts/!(rb-*.js)'
+					'scripts/**/*.js'
 				]
 
 	extra:

src/client/scripts/private/mixins/base.js

@@ -0,0 +1,38 @@
+/*************************************
+ * BASE MIXIN (for all rb-components)
+ *************************************/
+import { props, withComponent } from '../../../../../skatejs/dist/esnext/index.js';
+import { html, render }         from '../../../../../lit-html/lit-html.js';
+import EventService             from '../../private/services/event.js';
+import ViewService              from '../../private/services/view.js';
+
+const Base = (BaseElm = HTMLElement) => class extends withComponent(BaseElm) {
+	/* Lifecycle
+	 ************/
+	constructor() { // :void
+		super();
+		this.rb = {
+			elms:   {},
+			events: EventService.call(this),
+			view:   ViewService.call(this)
+		}
+	}
+	disconnectedCallback() { // :void
+		super.disconnectedCallback && super.disconnectedCallback();
+		this.rb.events.removeAll({ force: true });
+		// console.log(`${this.localName} disconnected:`, this.rb.events.events);
+	}
+
+	/* @skatejs/renderer-lit-html
+	 *****************************/
+	async renderer(root, call) { // :void
+		render(call(), root);
+		if (this.rb.view.isReady) return;
+		// console.log(`${this.localName} view ready:`, this.rb.view.isReady);
+		await this.rb.view.readyCallback(); // called once when rb view is ready
+	}
+}
+
+/* Export it!
+ *************/
+export { Base, html, props };

src/client/scripts/private/mixins/slot.js

@@ -0,0 +1,61 @@
+/***************************************
+ * SLOT MIXIN
+ * ------------------------------------
+ * Adds helpers for working with slots.
+ ***************************************/
+const Slot = BaseElm => class extends BaseElm {
+	/* Lifecycle
+	 ************/
+	constructor() {
+		super();
+		this.state = {
+			...super.state,
+			slots: {} // :{ [slotName]: boolean }
+		};
+	}
+
+	/* Getters
+	 **********/
+	get _hasLightDom() { // :boolean
+		this._cleanLightDomWhitespace();
+		return !!this.childNodes.length;
+	}
+
+	get _lightDomSlotNames() { // :{ [slotName]: boolean }
+		const names = {};
+		for (const child of this.childNodes) {
+			if (![1,3].includes(child.nodeType)) continue; // only text or elm
+			// text
+			if (child.nodeType === 3) { names['default'] = true; continue; }
+			// elms (child.slot :string)
+			const name = child.slot.trim().toLowerCase() || 'default';
+			names[name] = true;
+		}
+		return names;
+	}
+
+	/* Methods
+	 **********/
+	_cleanLightDomWhitespace() { // :void (mutator: this.childNodes)
+		for (const child of this.childNodes) {
+			if (child.nodeType !== 3) continue;
+			if (child.textContent.trim().length) continue;
+			child.remove(); // remove empty text nodes
+		}
+	}
+
+	_setSlotStates(slotNames={}) { // :void (mutator: this.state.slots)
+		if (!Object.keys(slotNames).length) return;
+		Object.assign(this.state.slots, slotNames);
+		this.triggerUpdate();
+	}
+
+	_initSlotStates() { // :void (run in viewReady())
+		if (!this._hasLightDom) return;
+		this._setSlotStates(this._lightDomSlotNames);
+	}
+}
+
+/* Export it!
+ *************/
+export default Slot;

src/client/scripts/event-service.js src/client/scripts/private/services/event.js

@@ -1,8 +1,8 @@
 /********************************************************************************
  * EVENT SERVICE
- ********************************************************************************
+ * -----------------------------------------------------------------------------
  * HOW TO USE
- - import EventService from './event-service.js';
+ - import EventService from './event.js';
  - this.rb.events = EventService.call(this); :object (set in constructor)
  * API
  - this.rb.events.events; :object (readonly: hashmap of events)
@@ -11,8 +11,8 @@
  - this.rb.events.removeAll([options]); :void
  - this.rb.events.emit(elm, 'event' [, { detail: any } ]); :boolean
  ********************************************************************************/
-import { emit } from '../../../skatejs/dist/esnext/emit.js';
-import Guid from './guid-service.js';
+import { emit } from '../../../../../skatejs/dist/esnext/emit.js';
+import Guid     from '../../public/services/guid.js';
 
 /* Event Helpers
  ****************/

src/client/scripts/view-service.js src/client/scripts/private/services/view.js

@@ -1,8 +1,8 @@
 /********************************************************************
  * VIEW SERVICE
- ********************************************************************
+ * -----------------------------------------------------------------
  * HOW TO USE
- - import View from './view-service.js';
+ - import ViewService from './view.js';
  - this.rb.view = View.call(this); :object (set in constructor)
  * API
  - this.rb.view.isReady; :boolean (readonly: set in readyCallback())

src/client/scripts/guid-service.js src/client/scripts/public/services/guid.js

@@ -1,11 +1,11 @@
-/****************************************
+/***************************************
  * GUID SERVICE
- ****************************************
+ * ------------------------------------
  * HOW TO USE
- - import Guid from './guid-service.js';
+ - import Guid from './guid.js';
  * API
  - Guid.create(maxLength = 12); :string
- ****************************************/
+ ***************************************/
 const GuidService = {
 	create(maxLength = 12) { // :string (sometimes returns maxLength - 1 chars)
 		return Math.round((Math.random() * 36 ** maxLength)).toString(36);

src/client/scripts/type-service.js src/client/scripts/public/services/type.js

@@ -1,10 +1,10 @@
-/****************************************
+/********************************
  * TYPE SERVICE
- ****************************************
+ * -----------------------------
  * HOW TO USE
- - import Type from './type-service.js';
+ - import Type from './type.js';
  - Type = TypeService; :object
- ****************************************/
+ ********************************/
 const TypeService = {
 	/* Return Type as String
 	 ************************/

src/client/scripts/public/view/directives.js

@@ -0,0 +1,35 @@
+/*********************************************
+ * VIEW DIRECTIVES (from lit-html >= v0.14.0)
+ *********************************************/
+import { directive }    from '../../../../../lit-html/lit-html.js';
+import { asyncAppend }  from '../../../../../lit-html/directives/async-append.js';
+import { asyncReplace } from '../../../../../lit-html/directives/async-replace.js';
+import { cache }        from '../../../../../lit-html/directives/cache.js';
+import { classMap }     from '../../../../../lit-html/directives/class-map.js';
+import { guard }        from '../../../../../lit-html/directives/guard.js';
+import { ifDefined }    from '../../../../../lit-html/directives/if-defined.js';
+import { repeat }       from '../../../../../lit-html/directives/repeat.js';
+import { styleMap }     from '../../../../../lit-html/directives/style-map.js';
+import { unsafeHTML }   from '../../../../../lit-html/directives/unsafe-html.js';
+import { until }        from '../../../../../lit-html/directives/until.js';
+
+/* View Directives
+ ******************/
+const ViewDirectives = {
+	asyncAppend,
+	asyncReplace,
+	cache,
+	classMap,
+	directive,
+	guard,
+	ifDefined,
+	repeat,
+	styleMap,
+	unsafeHTML,
+	until
+}
+
+/* Export it!
+ *************/
+export default ViewDirectives;
+