als-component/index.js

lightweight JavaScript library for creating reactive, server-rendered, and browser-based components.

class Component {
   static isBrowser = false
   static components = new WeakMap()
   static get isAsync() { return this.prototype.render.constructor.name === 'AsyncFunction' };
   constructor(props = {}, inner) {
      this.counter = 0;
      this.isAsync = this.constructor.isAsync
      this.props = props;
      this.inner = inner;
      this.name = this.constructor.name + (this.props.key ? this.props.key : '');
      Component.components[this.name] = this
      this.Component = Component
   }

   on(event, fn) { }
   async callAsync() { return (await this.render(this.props, this.inner)).replace(/^\<\w\w*/, m => `${m} component="${this.name}"`) }
   callSync() { return this.render(this.props, this.inner).replace(/^\<\w\w*/, m => `${m} component="${this.name}"`) }
   call() { return this.isAsync ? this.callAsync() : this.callSync() }
   action(event, fn) { return this.name + this.counter++; }
   async buildAsync() { return await this.call() }
   buildSync() { return this.call() }
   build() { return this.isAsync ? this.buildAsync() : this.buildSync() }
   update(props = this.props, inner = this.inner) { this.props = props; this.inner = inner; return this.build() }
}

module.exports = Component