Implementation

[betula]

const TickerService = unit({
  current: 0,
  get next() {
    return this.current + 1;
  },
  tick() {
    this.current += 1;
  },
  constructor() {},
  destructor() {}
});

const ticker = new TickerService();
ticker.tick();
console.log(ticker.next);

function action(fn) {
  return fn;
}
function computed(fn) {
  return fn;
}
function setting() {}
function getting() {}

function unit(schema) {
  const source = Object.getOwnPropertyDescriptors(schema);
  const DataKey = "data";
  const descriptors = {};

  Object.keys(source).forEach(key => {
    const { value, get, set } = source[key];
    const descriptor = {};
    if (typeof value === "function") {
      descriptor.value = action(value);
    } else if (get) {
      descriptor.get = computed(get);
      if (set) {
        descriptor.set = action(set);
      }
    } else {
      descriptor.set = function(val) {
        (this[DataKey] = this[DataKey] || {})[key] = val;
        setting();
      };
      descriptor.get = function() {
        const val = (this[DataKey] = this[DataKey] || {})[key] || value;
        getting();
        return val;
      };
    }
    descriptors[key] = descriptor;
  });

  let constructor = source.constructor && source.constructor.value;
  if (constructor) {
    constructor = action(constructor);
  }
  const Class = function() {
    if (constructor) {
      constructor.apply(this, arguments);
    }
  };
  Class.prototype = Object.defineProperties({}, descriptors);
  return Class;
}

https://codesandbox.io/s/elastic-fermi-or16g?file=/src/index.js:0-1406

[betula]

Article titles:
React microfrontends
React state management for micro-frontends

[betula]

https://codesandbox.io/s/suspicious-feather-2cwh3?file=/src/lib/view.js

[betula]

https://codesandbox.io/s/mystifying-rosalind-p9x7j

[betula]

https://codesandbox.io/s/sweet-ptolemy-iedls

[betula]

https://codesandbox.io/s/laughing-brown-wvzce?file=/src/App.js

[betula]

https://codesandbox.io/s/vibrant-almeida-7ih5g

[betula]

https://codesandbox.io/s/misty-snow-hz3wq

[betula]

https://codesandbox.io/s/blue-breeze-cuedi?file=/src/lib/box.js

[betula]

https://codesandbox.io/s/vigilant-shape-igg5z?file=/src/lib/view.js

[betula]

https://codesandbox.io/s/condescending-matsumoto-5nuov

[betula]

https://codesandbox.io/s/suspicious-cdn-oidv1

[betula]

https://codesandbox.io/s/focused-maxwell-p5y57

[betula]

https://codesandbox.io/s/kind-rosalind-7iztm

[betula]

https://codesandbox.io/s/upbeat-ptolemy-nq01d

[betula]

https://codesandbox.io/s/vibrant-cache-0bwxc

[betula]

https://codesandbox.io/s/jolly-currying-pqm7p

[betula]

https://codesandbox.io/s/beautiful-firefly-bn0ly

[betula]

https://codesandbox.io/s/flamboyant-hooks-yhsg8

[betula]

https://codesandbox.io/s/solitary-brook-yvbkf

[betula]

https://codesandbox.io/s/weathered-field-nwzli

[betula]

#2

[betula]

https://codesandbox.io/s/nervous-sky-zl5d6