@lordfokas/yrframe 0.5.0 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/Component.js CHANGED
@@ -1,19 +1,32 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Component = void 0;
4
- const ComponentEvents_js_1 = require("./ComponentEvents.js");
5
- const ComponentFactory_js_1 = require("./ComponentFactory.js");
6
- const utils_js_1 = require("./utils.js");
7
- class Component extends HTMLElement {
8
- [ComponentEvents_js_1.symbol];
9
- initialChildren = [];
10
- wasConnected = false;
1
+ var _a;
2
+ import { ComponentEvents, symbol as evt } from "./ComponentEvents.js";
3
+ import { ComponentFactory } from "./ComponentFactory.js";
4
+ import { specialAttributes } from "./utils.js";
5
+ export class Component extends HTMLElement {
11
6
  events() {
12
- return this[ComponentEvents_js_1.symbol];
7
+ return this[evt];
13
8
  }
14
9
  constructor(props, defaults) {
15
10
  super();
16
- this[ComponentEvents_js_1.symbol] = new ComponentEvents_js_1.ComponentEvents(this);
11
+ Object.defineProperty(this, _a, {
12
+ enumerable: true,
13
+ configurable: true,
14
+ writable: true,
15
+ value: void 0
16
+ });
17
+ Object.defineProperty(this, "initialChildren", {
18
+ enumerable: true,
19
+ configurable: true,
20
+ writable: true,
21
+ value: []
22
+ });
23
+ Object.defineProperty(this, "wasConnected", {
24
+ enumerable: true,
25
+ configurable: true,
26
+ writable: true,
27
+ value: false
28
+ });
29
+ this[evt] = new ComponentEvents(this);
17
30
  const all = {};
18
31
  // Assign all defaults to object and overwrite with existing values in provided props
19
32
  if (defaults)
@@ -22,11 +35,11 @@ class Component extends HTMLElement {
22
35
  Object.assign(all, props);
23
36
  const attrs = {};
24
37
  for (const [k, v] of Object.entries(all)) {
25
- if (!utils_js_1.specialAttributes.test(k)) {
38
+ if (!specialAttributes.test(k)) {
26
39
  attrs[k] = v;
27
40
  }
28
41
  }
29
- ComponentFactory_js_1.ComponentFactory.setAttributesAndEvents(this, attrs);
42
+ ComponentFactory.setAttributesAndEvents(this, attrs);
30
43
  }
31
44
  /** Override HTMLElement */
32
45
  append(...nodes) {
@@ -44,12 +57,12 @@ class Component extends HTMLElement {
44
57
  }
45
58
  /** HTML5 Custom Element lifecycle callback (remove from page) */
46
59
  disconnectedCallback() {
47
- this[ComponentEvents_js_1.symbol].disconnect();
60
+ this[evt].disconnect();
48
61
  }
49
62
  /** HTML5 Custom Element lifecycle callback (add to page) */
50
63
  connectedCallback() {
51
64
  this.wasConnected = true;
52
- this[ComponentEvents_js_1.symbol].connect();
65
+ this[evt].connect();
53
66
  this.redraw();
54
67
  }
55
68
  /** Draw this component's internals. Should return only children nodes. */
@@ -62,10 +75,10 @@ class Component extends HTMLElement {
62
75
  this.clearChildren();
63
76
  if (child) {
64
77
  if (Array.isArray(child)) {
65
- ComponentFactory_js_1.ComponentFactory.appendChildren(this, ...child);
78
+ ComponentFactory.appendChildren(this, ...child);
66
79
  }
67
80
  else {
68
- ComponentFactory_js_1.ComponentFactory.appendChildren(this, child);
81
+ ComponentFactory.appendChildren(this, child);
69
82
  }
70
83
  }
71
84
  this.renderedCallback();
@@ -85,4 +98,4 @@ class Component extends HTMLElement {
85
98
  window.customElements.define(tag, this);
86
99
  }
87
100
  }
88
- exports.Component = Component;
101
+ _a = evt;
@@ -1,13 +1,15 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ComponentEvents = exports.symbol = void 0;
4
- const event_bus_1 = require("@lordfokas/event-bus");
5
- const Component_js_1 = require("./Component.js");
6
- exports.symbol = Symbol('evt');
7
- class PersistentListener extends event_bus_1.EventListener {
8
- type;
1
+ import { EventBus, EventListener } from '@lordfokas/event-bus';
2
+ import { Component } from './Component.js';
3
+ export const symbol = Symbol('evt');
4
+ class PersistentListener extends EventListener {
9
5
  constructor(type, callback, nice) {
10
6
  super(callback, nice);
7
+ Object.defineProperty(this, "type", {
8
+ enumerable: true,
9
+ configurable: true,
10
+ writable: true,
11
+ value: void 0
12
+ });
11
13
  this.type = type;
12
14
  }
13
15
  }
@@ -16,28 +18,58 @@ class PersistentListener extends event_bus_1.EventListener {
16
18
  * A developer isn't meant to directly interface with this class,
17
19
  * except by calling Component.events()
18
20
  */
19
- class ComponentEvents {
20
- listeners = [];
21
- sources = {};
22
- triggers = {};
23
- component;
24
- owner;
25
- /** Used to keep track of internal mechanisms (triggers and sources) */
26
- internals = 0;
21
+ export class ComponentEvents {
27
22
  constructor(component) {
23
+ Object.defineProperty(this, "listeners", {
24
+ enumerable: true,
25
+ configurable: true,
26
+ writable: true,
27
+ value: []
28
+ });
29
+ Object.defineProperty(this, "sources", {
30
+ enumerable: true,
31
+ configurable: true,
32
+ writable: true,
33
+ value: {}
34
+ });
35
+ Object.defineProperty(this, "triggers", {
36
+ enumerable: true,
37
+ configurable: true,
38
+ writable: true,
39
+ value: {}
40
+ });
41
+ Object.defineProperty(this, "component", {
42
+ enumerable: true,
43
+ configurable: true,
44
+ writable: true,
45
+ value: void 0
46
+ });
47
+ Object.defineProperty(this, "owner", {
48
+ enumerable: true,
49
+ configurable: true,
50
+ writable: true,
51
+ value: void 0
52
+ });
53
+ /** Used to keep track of internal mechanisms (triggers and sources) */
54
+ Object.defineProperty(this, "internals", {
55
+ enumerable: true,
56
+ configurable: true,
57
+ writable: true,
58
+ value: 0
59
+ });
28
60
  this.component = component;
29
- this.owner = component instanceof Component_js_1.Component ? component.constructor.name : '<' + component.tagName.toLowerCase() + '>';
61
+ this.owner = component instanceof Component ? component.constructor.name : '<' + component.tagName.toLowerCase() + '>';
30
62
  }
31
63
  isEmpty() {
32
64
  return (this.listeners.length + this.internals) === 0;
33
65
  }
34
66
  /** Called by the component when entering DOM */
35
67
  connect() {
36
- this.listeners.forEach(l => event_bus_1.EventBus.GLOBAL.subscribe(l.type, l));
68
+ this.listeners.forEach(l => EventBus.GLOBAL.subscribe(l.type, l));
37
69
  }
38
70
  /** Called by the component when leaving DOM */
39
71
  disconnect() {
40
- this.listeners.forEach(l => event_bus_1.EventBus.GLOBAL.unsubscribe(l));
72
+ this.listeners.forEach(l => EventBus.GLOBAL.unsubscribe(l));
41
73
  }
42
74
  /** Set up and attach a listener, given a configuration */
43
75
  createListener(target, name, handler) {
@@ -173,4 +205,3 @@ class ComponentEvents {
173
205
  this.triggers[name].call(this.component, data, parent);
174
206
  }
175
207
  }
176
- exports.ComponentEvents = ComponentEvents;
@@ -1,12 +1,9 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.FakeReact = exports.ComponentFactory = void 0;
4
- const Facade_js_1 = require("./Facade.js");
1
+ import { Facade } from "./Facade.js";
5
2
  /**
6
3
  * JSX / TSX component factory.
7
4
  * Should not be invoked manually, is used by TSC when building the project.
8
5
  */
9
- class ComponentFactory {
6
+ export class ComponentFactory {
10
7
  static make(tag, props, ...children) {
11
8
  if (tag === Array)
12
9
  return children; // Allow returning multiple elements from render()
@@ -14,7 +11,7 @@ class ComponentFactory {
14
11
  let element;
15
12
  let facade = undefined;
16
13
  if (typeof tag === 'function') { // Construct class based components
17
- if (tag.prototype instanceof Facade_js_1.Facade) {
14
+ if (tag.prototype instanceof Facade) {
18
15
  facade = new tag(props ?? {});
19
16
  element = facade.content();
20
17
  }
@@ -60,7 +57,6 @@ class ComponentFactory {
60
57
  })));
61
58
  }
62
59
  }
63
- exports.ComponentFactory = ComponentFactory;
64
60
  /**
65
61
  * ## Here be Shenanigans
66
62
  * In the event your TSC refuses to find ComponentFactory.make
@@ -71,7 +67,11 @@ exports.ComponentFactory = ComponentFactory;
71
67
  * At least until you can be arsed to figure it out...
72
68
  * `¯\_(ツ)_/¯`
73
69
  */
74
- class FakeReact {
75
- static createElement = ComponentFactory.make;
70
+ export class FakeReact {
76
71
  }
77
- exports.FakeReact = FakeReact;
72
+ Object.defineProperty(FakeReact, "createElement", {
73
+ enumerable: true,
74
+ configurable: true,
75
+ writable: true,
76
+ value: ComponentFactory.make
77
+ });
@@ -1,2 +1 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
1
+ export {};
package/dist/Facade.js CHANGED
@@ -1,26 +1,43 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Facade = void 0;
4
- const ComponentEvents_js_1 = require("./ComponentEvents.js");
5
- const ComponentFactory_js_1 = require("./ComponentFactory.js");
6
- const utils_js_1 = require("./utils.js");
1
+ import { ComponentEvents, symbol as evt } from "./ComponentEvents.js";
2
+ import { ComponentFactory } from "./ComponentFactory.js";
3
+ import { specialAttributes } from "./utils.js";
7
4
  const fcl = Symbol('fcl');
8
5
  /**
9
6
  * Fake component that constructs and returns another component instead.
10
7
  * Used for aliasing and adapting components from other libraries.
11
8
  */
12
- class Facade {
13
- node;
14
- isCustom;
15
- initialChildren = [];
16
- wasConnected = false;
9
+ export class Facade {
17
10
  events() {
18
- if (!this.node[ComponentEvents_js_1.symbol]) { // Lazily instantiate event manager
19
- this.node[ComponentEvents_js_1.symbol] = new ComponentEvents_js_1.ComponentEvents(this.node);
11
+ if (!this.node[evt]) { // Lazily instantiate event manager
12
+ this.node[evt] = new ComponentEvents(this.node);
20
13
  }
21
- return this.node[ComponentEvents_js_1.symbol];
14
+ return this.node[evt];
22
15
  }
23
16
  constructor(tag, props, defaults) {
17
+ Object.defineProperty(this, "node", {
18
+ enumerable: true,
19
+ configurable: true,
20
+ writable: true,
21
+ value: void 0
22
+ });
23
+ Object.defineProperty(this, "isCustom", {
24
+ enumerable: true,
25
+ configurable: true,
26
+ writable: true,
27
+ value: void 0
28
+ });
29
+ Object.defineProperty(this, "initialChildren", {
30
+ enumerable: true,
31
+ configurable: true,
32
+ writable: true,
33
+ value: []
34
+ });
35
+ Object.defineProperty(this, "wasConnected", {
36
+ enumerable: true,
37
+ configurable: true,
38
+ writable: true,
39
+ value: false
40
+ });
24
41
  const node = this.node = document.createElement(tag);
25
42
  node[fcl] = this;
26
43
  this.isCustom = tag.includes('-');
@@ -32,11 +49,11 @@ class Facade {
32
49
  Object.assign(all, props);
33
50
  const attrs = {};
34
51
  for (const [k, v] of Object.entries(all)) {
35
- if (!utils_js_1.specialAttributes.test(k)) {
52
+ if (!specialAttributes.test(k)) {
36
53
  attrs[k] = v;
37
54
  }
38
55
  }
39
- ComponentFactory_js_1.ComponentFactory.setAttributesAndEvents(node, attrs);
56
+ ComponentFactory.setAttributesAndEvents(node, attrs);
40
57
  }
41
58
  /** Remove all children nodes. */
42
59
  clearChildren() {
@@ -47,12 +64,12 @@ class Facade {
47
64
  }
48
65
  /** HTML5 Custom Element lifecycle callback (remove from page) */
49
66
  disconnectedCallback() {
50
- this.node[ComponentEvents_js_1.symbol]?.disconnect();
67
+ this.node[evt]?.disconnect();
51
68
  }
52
69
  /** HTML5 Custom Element lifecycle callback (add to page) */
53
70
  connectedCallback() {
54
71
  this.wasConnected = true;
55
- this.node[ComponentEvents_js_1.symbol]?.connect();
72
+ this.node[evt]?.connect();
56
73
  this.redraw();
57
74
  }
58
75
  /** Draw this component's internals. Should return only children nodes. */
@@ -65,10 +82,10 @@ class Facade {
65
82
  this.clearChildren();
66
83
  if (child) {
67
84
  if (Array.isArray(child)) {
68
- ComponentFactory_js_1.ComponentFactory.appendChildren(this.node, ...child);
85
+ ComponentFactory.appendChildren(this.node, ...child);
69
86
  }
70
87
  else {
71
- ComponentFactory_js_1.ComponentFactory.appendChildren(this.node, child);
88
+ ComponentFactory.appendChildren(this.node, child);
72
89
  }
73
90
  }
74
91
  this.renderedCallback();
@@ -77,8 +94,8 @@ class Facade {
77
94
  renderedCallback() { }
78
95
  content() {
79
96
  // Dispose of unused event manager
80
- if (this.node[ComponentEvents_js_1.symbol]?.isEmpty()) {
81
- delete this.node[ComponentEvents_js_1.symbol];
97
+ if (this.node[evt]?.isEmpty()) {
98
+ delete this.node[evt];
82
99
  }
83
100
  return this.node;
84
101
  }
@@ -86,7 +103,6 @@ class Facade {
86
103
  this.initialChildren = children;
87
104
  }
88
105
  }
89
- exports.Facade = Facade;
90
106
  function traverseHTML(node, fn) {
91
107
  if (node instanceof HTMLElement) {
92
108
  fn(node);
package/dist/utils.js CHANGED
@@ -1,8 +1,4 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.specialAttributes = exports.has = void 0;
4
- function has($) {
1
+ export function has($) {
5
2
  return $ !== undefined;
6
3
  }
7
- exports.has = has;
8
- exports.specialAttributes = /^[a-z]+\:/;
4
+ export const specialAttributes = /^[a-z]+\:/;
package/dist/yrframe.js CHANGED
@@ -1,12 +1,4 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Facade = exports.FakeReact = exports.ComponentFactory = exports.ComponentEvents = exports.Component = void 0;
4
- var Component_js_1 = require("./Component.js");
5
- Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return Component_js_1.Component; } });
6
- var ComponentEvents_js_1 = require("./ComponentEvents.js");
7
- Object.defineProperty(exports, "ComponentEvents", { enumerable: true, get: function () { return ComponentEvents_js_1.ComponentEvents; } });
8
- var ComponentFactory_js_1 = require("./ComponentFactory.js");
9
- Object.defineProperty(exports, "ComponentFactory", { enumerable: true, get: function () { return ComponentFactory_js_1.ComponentFactory; } });
10
- Object.defineProperty(exports, "FakeReact", { enumerable: true, get: function () { return ComponentFactory_js_1.FakeReact; } });
11
- var Facade_js_1 = require("./Facade.js");
12
- Object.defineProperty(exports, "Facade", { enumerable: true, get: function () { return Facade_js_1.Facade; } });
1
+ export { Component } from './Component.js';
2
+ export { ComponentEvents } from './ComponentEvents.js';
3
+ export { ComponentFactory, FakeReact } from './ComponentFactory.js';
4
+ export { Facade } from './Facade.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lordfokas/yrframe",
3
- "version": "0.5.0",
3
+ "version": "0.5.1",
4
4
  "description": "A Typescript class-based WebComponents framework.",
5
5
  "main": "dist/yrframe.js",
6
6
  "scripts": {