@merkur/plugin-router 0.27.0

package/lib/index.es9.mjs

@@ -0,0 +1,226 @@
+import { bindWidgetToFunctions, setDefaultValueForUndefined, hookMethod, isFunction } from '@merkur/core';
+import UniversalRouter from 'universal-router';
+import generateUrls from 'universal-router/generateUrls';
+var RouterEvents = Object.freeze({
+  REDIRECT: '@merkur/plugin-router.redirect'
+});
+const DEV = 'development';
+const ENV = typeof process !== 'undefined' && process && process.env ? process.env.NODE_ENV : DEV;
+
+function createRouter(widget, routes, options) {
+  widget.$dependencies.router = new UniversalRouter(routes, options);
+  widget.$dependencies.link = generateUrls(widget.$dependencies.router);
+}
+
+function routerPlugin() {
+  return {
+    async setup(widget) {
+      widget = { ...routerAPI(),
+        ...widget
+      };
+      widget.$in.router = {
+        route: null,
+        pathname: null,
+        isMounting: false,
+        isRouteActivated: false,
+        isBootstrapCalled: false
+      };
+      bindWidgetToFunctions(widget, widget.router);
+      return widget;
+    },
+
+    async create(widget) {
+      if (ENV === DEV) {
+        if (!widget.$in.component) {
+          throw new Error('You must install missing plugin: npm i @merkur/plugin-component');
+        }
+
+        if (!widget.$in.eventEmitter) {
+          throw new Error('You must install missing plugin: npm i @merkur/plugin-event-emitter');
+        }
+      }
+
+      widget.$in.component.lifeCycle = setDefaultValueForUndefined(widget.$in.component.lifeCycle, ['load'], () => {});
+      hookMethod(widget, '$in.component.lifeCycle.load', loadHook);
+      hookMethod(widget, 'bootstrap', bootstrapHook);
+      hookMethod(widget, 'mount', mountHook);
+      hookMethod(widget, 'unmount', unmountHook);
+      hookMethod(widget, 'update', updateHook);
+      return widget;
+    }
+
+  };
+}
+
+function routerAPI() {
+  return {
+    router: {
+      redirect(widget, url, data = {}) {
+        widget.emit(RouterEvents.REDIRECT, {
+          url,
+          ...data
+        });
+      },
+
+      link(widget, routeName, data = {}) {
+        return widget.$dependencies.link(routeName, data);
+      },
+
+      getCurrentRoute(widget) {
+        return widget.$in.router.route;
+      }
+
+    }
+  };
+}
+
+async function bootstrapHook(widget, originalBootstrap, ...rest) {
+  if (widget.$in.router.isBootstrapCalled) {
+    return;
+  }
+
+  widget.$in.router.isBootstrapCalled = true;
+  return originalBootstrap(...rest);
+} // hook Component
+
+
+async function loadHook(widget, originalLoad, ...rest) {
+  const plugin = widget.$in.router;
+
+  if (!plugin.isMounting && widget.props.pathname !== plugin.pathname) {
+    await tearDownRouterCycle(widget, ...rest);
+    await setupRouterCycle(widget, ...rest);
+  }
+
+  if (!isFunction(plugin.route.load)) {
+    throw new Error('The load method is mandatory.');
+  }
+
+  const globalStatePromise = isFunction(originalLoad) ? originalLoad(widget, ...rest) : Promise.resolve({});
+  const routeStatePromise = plugin.route.load(widget, {
+    route: plugin.route,
+    args: rest,
+    globalState: globalStatePromise
+  });
+  const [globalState, routeState] = await Promise.all([globalStatePromise, routeStatePromise]);
+  return { ...globalState,
+    ...routeState
+  };
+} // hook Component
+
+
+async function mountHook(widget, originalMount, ...rest) {
+  await widget.bootstrap(...rest);
+  const plugin = widget.$in.router;
+
+  if (!plugin.route) {
+    await resolveRoute(widget);
+    plugin.isMounting = true;
+  }
+
+  const result = await originalMount(...rest);
+
+  if (plugin.isMounting && isFunction(plugin.route.init)) {
+    await plugin.route.init(widget, {
+      route: plugin.route,
+      args: rest
+    });
+  }
+
+  if (isFunction(plugin.route.activate) && isClient() && !plugin.isRouteActivated) {
+    plugin.isRouteActivated = true;
+    plugin.route.activate(widget, {
+      route: plugin.route,
+      args: rest
+    });
+  }
+
+  plugin.isMounting = false;
+  return result;
+} // hook Component
+
+
+async function updateHook(widget, originalUpdate, ...rest) {
+  const result = await originalUpdate(...rest);
+  const plugin = widget.$in.router;
+
+  if (isFunction(plugin.route.activate) && isClient() && !plugin.isRouteActivated) {
+    plugin.isRouteActivated = true;
+    plugin.route.activate(widget, {
+      route: plugin.route,
+      args: rest
+    });
+  }
+
+  return result;
+} // hook Component
+
+
+async function unmountHook(widget, originalUnmount, ...rest) {
+  const result = await originalUnmount(...rest);
+  await tearDownRouterCycle(widget, ...rest);
+  return result;
+}
+
+async function resolveRoute(widget) {
+  if (ENV === DEV) {
+    if (!widget.props.pathname) {
+      throw new Error('The props pathname is not defined.');
+    }
+
+    if (!widget.$dependencies.router) {
+      throw new Error('You must add calling of createRouter(widget, routes, options) to widget.setup method.');
+    }
+  }
+
+  const route = await widget.$dependencies.router.resolve({
+    pathname: widget.props.pathname,
+    widget
+  });
+  widget.$in.router.route = route;
+  widget.$in.router.pathname = widget.props.pathname;
+  return route;
+}
+
+async function setupRouterCycle(widget, ...rest) {
+  const route = await resolveRoute(widget);
+
+  if (isFunction(route.init)) {
+    await route.init(widget, {
+      route,
+      args: rest
+    });
+  }
+}
+
+async function tearDownRouterCycle(widget, ...rest) {
+  const plugin = widget.$in.router;
+  const {
+    route,
+    isRouteActivated
+  } = plugin;
+
+  if (route) {
+    if (isFunction(route.deactivate) && isRouteActivated === true) {
+      await route.deactivate(widget, {
+        route,
+        args: rest
+      });
+    }
+
+    if (isFunction(route.destroy)) {
+      await route.destroy(widget, {
+        route,
+        args: rest
+      });
+    }
+  }
+
+  plugin.isRouteActivated = false;
+}
+
+function isClient() {
+  return typeof window !== 'undefined';
+}
+
+export { createRouter, routerPlugin };

package/lib/index.js

@@ -0,0 +1,249 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@merkur/core');
+var UniversalRouter = require('universal-router');
+var generateUrls = require('universal-router/generateUrls');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var UniversalRouter__default = /*#__PURE__*/_interopDefaultLegacy(UniversalRouter);
+var generateUrls__default = /*#__PURE__*/_interopDefaultLegacy(generateUrls);
+
+var RouterEvents = Object.freeze({
+  REDIRECT: '@merkur/plugin-router.redirect',
+});
+
+const DEV = 'development';
+const ENV =
+  typeof process !== 'undefined' && process && process.env
+    ? process.env.NODE_ENV
+    : DEV;
+
+function createRouter(widget, routes, options) {
+  widget.$dependencies.router = new UniversalRouter__default['default'](routes, options);
+  widget.$dependencies.link = generateUrls__default['default'](widget.$dependencies.router);
+}
+
+function routerPlugin() {
+  return {
+    async setup(widget) {
+      widget = {
+        ...routerAPI(),
+        ...widget,
+      };
+
+      widget.$in.router = {
+        route: null,
+        pathname: null,
+        isMounting: false,
+        isRouteActivated: false,
+        isBootstrapCalled: false,
+      };
+
+      core.bindWidgetToFunctions(widget, widget.router);
+
+      return widget;
+    },
+    async create(widget) {
+      if (ENV === DEV) {
+        if (!widget.$in.component) {
+          throw new Error(
+            'You must install missing plugin: npm i @merkur/plugin-component'
+          );
+        }
+
+        if (!widget.$in.eventEmitter) {
+          throw new Error(
+            'You must install missing plugin: npm i @merkur/plugin-event-emitter'
+          );
+        }
+      }
+
+      widget.$in.component.lifeCycle = core.setDefaultValueForUndefined(
+        widget.$in.component.lifeCycle,
+        ['load'],
+        () => {}
+      );
+      core.hookMethod(widget, '$in.component.lifeCycle.load', loadHook);
+      core.hookMethod(widget, 'bootstrap', bootstrapHook);
+      core.hookMethod(widget, 'mount', mountHook);
+      core.hookMethod(widget, 'unmount', unmountHook);
+      core.hookMethod(widget, 'update', updateHook);
+
+      return widget;
+    },
+  };
+}
+
+function routerAPI() {
+  return {
+    router: {
+      redirect(widget, url, data = {}) {
+        widget.emit(RouterEvents.REDIRECT, { url, ...data });
+      },
+      link(widget, routeName, data = {}) {
+        return widget.$dependencies.link(routeName, data);
+      },
+      getCurrentRoute(widget) {
+        return widget.$in.router.route;
+      },
+    },
+  };
+}
+
+async function bootstrapHook(widget, originalBootstrap, ...rest) {
+  if (widget.$in.router.isBootstrapCalled) {
+    return;
+  }
+
+  widget.$in.router.isBootstrapCalled = true;
+
+  return originalBootstrap(...rest);
+}
+
+// hook Component
+async function loadHook(widget, originalLoad, ...rest) {
+  const plugin = widget.$in.router;
+
+  if (!plugin.isMounting && widget.props.pathname !== plugin.pathname) {
+    await tearDownRouterCycle(widget, ...rest);
+
+    await setupRouterCycle(widget, ...rest);
+  }
+
+  if (!core.isFunction(plugin.route.load)) {
+    throw new Error('The load method is mandatory.');
+  }
+
+  const globalStatePromise = core.isFunction(originalLoad)
+    ? originalLoad(widget, ...rest)
+    : Promise.resolve({});
+  const routeStatePromise = plugin.route.load(widget, {
+    route: plugin.route,
+    args: rest,
+    globalState: globalStatePromise,
+  });
+
+  const [globalState, routeState] = await Promise.all([
+    globalStatePromise,
+    routeStatePromise,
+  ]);
+
+  return { ...globalState, ...routeState };
+}
+
+// hook Component
+async function mountHook(widget, originalMount, ...rest) {
+  await widget.bootstrap(...rest);
+
+  const plugin = widget.$in.router;
+  if (!plugin.route) {
+    await resolveRoute(widget);
+    plugin.isMounting = true;
+  }
+
+  const result = await originalMount(...rest);
+
+  if (plugin.isMounting && core.isFunction(plugin.route.init)) {
+    await plugin.route.init(widget, { route: plugin.route, args: rest });
+  }
+
+  if (
+    core.isFunction(plugin.route.activate) &&
+    isClient() &&
+    !plugin.isRouteActivated
+  ) {
+    plugin.isRouteActivated = true;
+    plugin.route.activate(widget, { route: plugin.route, args: rest });
+  }
+
+  plugin.isMounting = false;
+
+  return result;
+}
+
+// hook Component
+async function updateHook(widget, originalUpdate, ...rest) {
+  const result = await originalUpdate(...rest);
+
+  const plugin = widget.$in.router;
+
+  if (
+    core.isFunction(plugin.route.activate) &&
+    isClient() &&
+    !plugin.isRouteActivated
+  ) {
+    plugin.isRouteActivated = true;
+    plugin.route.activate(widget, { route: plugin.route, args: rest });
+  }
+
+  return result;
+}
+
+// hook Component
+async function unmountHook(widget, originalUnmount, ...rest) {
+  const result = await originalUnmount(...rest);
+
+  await tearDownRouterCycle(widget, ...rest);
+
+  return result;
+}
+
+async function resolveRoute(widget) {
+  if (ENV === DEV) {
+    if (!widget.props.pathname) {
+      throw new Error('The props pathname is not defined.');
+    }
+
+    if (!widget.$dependencies.router) {
+      throw new Error(
+        'You must add calling of createRouter(widget, routes, options) to widget.setup method.'
+      );
+    }
+  }
+
+  const route = await widget.$dependencies.router.resolve({
+    pathname: widget.props.pathname,
+    widget,
+  });
+
+  widget.$in.router.route = route;
+  widget.$in.router.pathname = widget.props.pathname;
+
+  return route;
+}
+
+async function setupRouterCycle(widget, ...rest) {
+  const route = await resolveRoute(widget);
+
+  if (core.isFunction(route.init)) {
+    await route.init(widget, { route, args: rest });
+  }
+}
+
+async function tearDownRouterCycle(widget, ...rest) {
+  const plugin = widget.$in.router;
+
+  const { route, isRouteActivated } = plugin;
+
+  if (route) {
+    if (core.isFunction(route.deactivate) && isRouteActivated === true) {
+      await route.deactivate(widget, { route, args: rest });
+    }
+
+    if (core.isFunction(route.destroy)) {
+      await route.destroy(widget, { route, args: rest });
+    }
+  }
+
+  plugin.isRouteActivated = false;
+}
+
+function isClient() {
+  return typeof window !== 'undefined';
+}
+
+exports.createRouter = createRouter;
+exports.routerPlugin = routerPlugin;

package/lib/index.mjs

@@ -0,0 +1,239 @@
+import { bindWidgetToFunctions, setDefaultValueForUndefined, hookMethod, isFunction } from '@merkur/core';
+import UniversalRouter from 'universal-router';
+import generateUrls from 'universal-router/generateUrls';
+
+var RouterEvents = Object.freeze({
+  REDIRECT: '@merkur/plugin-router.redirect',
+});
+
+const DEV = 'development';
+const ENV =
+  typeof process !== 'undefined' && process && process.env
+    ? process.env.NODE_ENV
+    : DEV;
+
+function createRouter(widget, routes, options) {
+  widget.$dependencies.router = new UniversalRouter(routes, options);
+  widget.$dependencies.link = generateUrls(widget.$dependencies.router);
+}
+
+function routerPlugin() {
+  return {
+    async setup(widget) {
+      widget = {
+        ...routerAPI(),
+        ...widget,
+      };
+
+      widget.$in.router = {
+        route: null,
+        pathname: null,
+        isMounting: false,
+        isRouteActivated: false,
+        isBootstrapCalled: false,
+      };
+
+      bindWidgetToFunctions(widget, widget.router);
+
+      return widget;
+    },
+    async create(widget) {
+      if (ENV === DEV) {
+        if (!widget.$in.component) {
+          throw new Error(
+            'You must install missing plugin: npm i @merkur/plugin-component'
+          );
+        }
+
+        if (!widget.$in.eventEmitter) {
+          throw new Error(
+            'You must install missing plugin: npm i @merkur/plugin-event-emitter'
+          );
+        }
+      }
+
+      widget.$in.component.lifeCycle = setDefaultValueForUndefined(
+        widget.$in.component.lifeCycle,
+        ['load'],
+        () => {}
+      );
+      hookMethod(widget, '$in.component.lifeCycle.load', loadHook);
+      hookMethod(widget, 'bootstrap', bootstrapHook);
+      hookMethod(widget, 'mount', mountHook);
+      hookMethod(widget, 'unmount', unmountHook);
+      hookMethod(widget, 'update', updateHook);
+
+      return widget;
+    },
+  };
+}
+
+function routerAPI() {
+  return {
+    router: {
+      redirect(widget, url, data = {}) {
+        widget.emit(RouterEvents.REDIRECT, { url, ...data });
+      },
+      link(widget, routeName, data = {}) {
+        return widget.$dependencies.link(routeName, data);
+      },
+      getCurrentRoute(widget) {
+        return widget.$in.router.route;
+      },
+    },
+  };
+}
+
+async function bootstrapHook(widget, originalBootstrap, ...rest) {
+  if (widget.$in.router.isBootstrapCalled) {
+    return;
+  }
+
+  widget.$in.router.isBootstrapCalled = true;
+
+  return originalBootstrap(...rest);
+}
+
+// hook Component
+async function loadHook(widget, originalLoad, ...rest) {
+  const plugin = widget.$in.router;
+
+  if (!plugin.isMounting && widget.props.pathname !== plugin.pathname) {
+    await tearDownRouterCycle(widget, ...rest);
+
+    await setupRouterCycle(widget, ...rest);
+  }
+
+  if (!isFunction(plugin.route.load)) {
+    throw new Error('The load method is mandatory.');
+  }
+
+  const globalStatePromise = isFunction(originalLoad)
+    ? originalLoad(widget, ...rest)
+    : Promise.resolve({});
+  const routeStatePromise = plugin.route.load(widget, {
+    route: plugin.route,
+    args: rest,
+    globalState: globalStatePromise,
+  });
+
+  const [globalState, routeState] = await Promise.all([
+    globalStatePromise,
+    routeStatePromise,
+  ]);
+
+  return { ...globalState, ...routeState };
+}
+
+// hook Component
+async function mountHook(widget, originalMount, ...rest) {
+  await widget.bootstrap(...rest);
+
+  const plugin = widget.$in.router;
+  if (!plugin.route) {
+    await resolveRoute(widget);
+    plugin.isMounting = true;
+  }
+
+  const result = await originalMount(...rest);
+
+  if (plugin.isMounting && isFunction(plugin.route.init)) {
+    await plugin.route.init(widget, { route: plugin.route, args: rest });
+  }
+
+  if (
+    isFunction(plugin.route.activate) &&
+    isClient() &&
+    !plugin.isRouteActivated
+  ) {
+    plugin.isRouteActivated = true;
+    plugin.route.activate(widget, { route: plugin.route, args: rest });
+  }
+
+  plugin.isMounting = false;
+
+  return result;
+}
+
+// hook Component
+async function updateHook(widget, originalUpdate, ...rest) {
+  const result = await originalUpdate(...rest);
+
+  const plugin = widget.$in.router;
+
+  if (
+    isFunction(plugin.route.activate) &&
+    isClient() &&
+    !plugin.isRouteActivated
+  ) {
+    plugin.isRouteActivated = true;
+    plugin.route.activate(widget, { route: plugin.route, args: rest });
+  }
+
+  return result;
+}
+
+// hook Component
+async function unmountHook(widget, originalUnmount, ...rest) {
+  const result = await originalUnmount(...rest);
+
+  await tearDownRouterCycle(widget, ...rest);
+
+  return result;
+}
+
+async function resolveRoute(widget) {
+  if (ENV === DEV) {
+    if (!widget.props.pathname) {
+      throw new Error('The props pathname is not defined.');
+    }
+
+    if (!widget.$dependencies.router) {
+      throw new Error(
+        'You must add calling of createRouter(widget, routes, options) to widget.setup method.'
+      );
+    }
+  }
+
+  const route = await widget.$dependencies.router.resolve({
+    pathname: widget.props.pathname,
+    widget,
+  });
+
+  widget.$in.router.route = route;
+  widget.$in.router.pathname = widget.props.pathname;
+
+  return route;
+}
+
+async function setupRouterCycle(widget, ...rest) {
+  const route = await resolveRoute(widget);
+
+  if (isFunction(route.init)) {
+    await route.init(widget, { route, args: rest });
+  }
+}
+
+async function tearDownRouterCycle(widget, ...rest) {
+  const plugin = widget.$in.router;
+
+  const { route, isRouteActivated } = plugin;
+
+  if (route) {
+    if (isFunction(route.deactivate) && isRouteActivated === true) {
+      await route.deactivate(widget, { route, args: rest });
+    }
+
+    if (isFunction(route.destroy)) {
+      await route.destroy(widget, { route, args: rest });
+    }
+  }
+
+  plugin.isRouteActivated = false;
+}
+
+function isClient() {
+  return typeof window !== 'undefined';
+}
+
+export { createRouter, routerPlugin };