simplified interface

This commit is contained in:
Geoff Doty 2021-01-01 23:24:56 -05:00
parent 1dd16d879b
commit df1eb84e86
2 changed files with 23 additions and 22 deletions

View File

@ -9,10 +9,12 @@ Useful for composing single-page-apps or developing a Micro-Frontend architectur
## API
Anchor(register = {}, [mix = []])
Anchor([options = {}])
- `options` {Object} (optional)
- `register` {Object} - initial object registry (optional)
- `mixin` {Array} - extend anchor directly (optional)
- `global` {Object} - global object to anchor to (default {})
- `mixins` {Array} - extend achor directly
## Quick Start
@ -23,7 +25,7 @@ Useful for composing single-page-apps or developing a Micro-Frontend architectur
import anchor from 'anchor.js';
let app = new Anchor();
let app = Anchor();
app.register('version', '1.0.0');
app.register('log', console);
@ -42,23 +44,24 @@ import app from 'app.js';
app.log.info('using app version', app.version); // using app version 1.0.0
```
You can also initialize `Anchor` with an object to front-load the registry instead of using `app.register()`
You can also initialize `Anchor` with an object to front-loaded the registry via `opts.register` instead of using `app.register()`
```js
let app = new Anchor({
register: {
'version': '1.0.0',
'log': console,
...
}
});
```
> TIP: Connect multiple spas together, on each spa use `app.register` to extend that spas functionality on its bootstrap file
The `Anchor mixin` option acts more like a *merge*, rather than a `registry` and is useful to `mixin` objects directly, for example:
The `Anchor` `options.mixins` acts more like a *merge*, rather than a `registry` and is useful to `mixin` to the anchor directly, for example:
```js
// app.js
@ -66,7 +69,7 @@ The `Anchor mixin` option acts more like a *merge*, rather than a `registry` and
import anchor from 'anchor.js';
import mitt from 'mitt.js'; // event library
let app = new Anchor({}, [mitt()]); // adds on, off, emit, all to app
let app = new Anchor({mixins: [mitt()]}); // adds on, off, emit, all to app
```
@ -85,9 +88,7 @@ app.events.emit('my-event', " I'm your huckel berry");
```
> WARNING: `mixin` has no safe guards and will overwrite existing duplicate functionality
> WARNING: `mixins` have no safe guards and WILL overwrite duplicates
## Tests

View File

@ -1,12 +1,12 @@
/**
* Tiny global application registry
*/
function Anchor(fasten = {}, mixins = []) {
function Anchor(opts = {}) {
// create a unique namespace to avoid collisions
const NAMESPACE = `_${Math.random().toString(36).slice(-6)}_`.toUpperCase();
// find environments global object
const GLOBAL = window || global || {};
// global object anchor
const GLOBAL = opts.global || {};
/**
* Register
@ -28,26 +28,26 @@ function Anchor(fasten = {}, mixins = []) {
* Builds the Application Anchor
*
* @param {Object} fasten
* @param {Array} merges
* @param {Array} mixins
* @param {Boolean} debug
*/
function build(fasten, merges, register) {
function build(opts, register) {
if (GLOBAL[NAMESPACE]) {
// already initialized
return false;
}
// add to global instance
GLOBAL[NAMESPACE] = fasten;
GLOBAL[NAMESPACE] = opts.register || {};
GLOBAL[NAMESPACE]['register'] = register;
// merge with global instance
merges.forEach((merge) => Object.assign(GLOBAL[NAMESPACE], merge));
(opts.mixins || []).forEach((mixin) => Object.assign(GLOBAL[NAMESPACE], mixin));
return GLOBAL[NAMESPACE];
};
return build(fasten, mixins, register);
return build(opts || {}, register);
};
export default Anchor;