@hybridly/vue 0.0.1-dev.2

package/dist/index.mjs

@@ -0,0 +1,782 @@
+import { ref, shallowRef, unref, triggerRef, defineComponent, h, isRef, reactive, readonly, computed, toRaw, watch } from 'vue';
+import { registerHook, registerHookOnce, createRouter, makeUrl, router } from '@hybridly/core';
+export { router } from '@hybridly/core';
+import { debug, showPageComponentErrorModal, merge } from '@hybridly/utils';
+import { progress } from '@hybridly/progress-plugin';
+import { setupDevtoolsPlugin } from '@vue/devtools-api';
+import qs, { parse, stringify } from 'qs';
+import isEqual from 'lodash.isequal';
+import clone from 'lodash.clonedeep';
+
+const state = {
+  context: ref(),
+  view: shallowRef(),
+  viewLayout: shallowRef(),
+  viewKey: ref(),
+  dialog: shallowRef(),
+  dialogKey: ref(),
+  routes: ref(),
+  setRoutes(routes) {
+    debug.adapter("vue:state:routes", "Setting routes:", routes);
+    if (routes) {
+      state.routes.value = unref(routes);
+    }
+  },
+  setView(view) {
+    debug.adapter("vue:state:view", "Setting view:", view);
+    state.view.value = view;
+  },
+  setViewLayout(layout) {
+    debug.adapter("vue:state:view", "Setting layout:", layout);
+    state.viewLayout.value = layout;
+  },
+  setDialog(dialog) {
+    debug.adapter("vue:state:dialog", "Setting dialog:", dialog);
+    state.dialog.value = dialog;
+  },
+  setContext(context) {
+    debug.adapter("vue:state:context", "Setting context:", context);
+    state.context.value = unref(context);
+    triggerRef(state.context);
+  },
+  setViewKey(key) {
+    debug.adapter("vue:state:key", "Setting view key:", key);
+    state.viewKey.value = unref(key);
+  },
+  setDialogKey(key) {
+    debug.adapter("vue:state:key", "Setting dialog key:", key);
+    state.dialogKey.value = unref(key);
+  }
+};
+
+const wrapper = defineComponent({
+  name: "Hybridly",
+  setup(props) {
+    if (typeof window !== "undefined") {
+      state.setContext(props.context);
+      if (!props.context) {
+        throw new Error("Hybridly was not properly initialized. The context is missing.");
+      }
+    }
+    function renderLayout(child) {
+      debug.adapter("vue:render:layout", "Rendering layout.");
+      if (typeof state.view.value?.layout === "function") {
+        return state.view.value.layout(h, child);
+      }
+      if (Array.isArray(state.view.value?.layout)) {
+        return state.view.value.layout.concat(child).reverse().reduce((child2, layout) => {
+          layout.inheritAttrs = !!layout.inheritAttrs;
+          return h(layout, { ...state.context.value.view.properties }, () => child2);
+        });
+      }
+      return [
+        h(state.view.value?.layout, { ...state.context.value.view.properties }, () => child),
+        renderDialog()
+      ];
+    }
+    function renderView() {
+      debug.adapter("vue:render:view", "Rendering view.");
+      state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
+      return h(state.view.value, {
+        ...state.context.value.view.properties,
+        key: state.viewKey.value
+      });
+    }
+    function renderDialog() {
+      debug.adapter("vue:render:dialog", "Rendering dialog.");
+      if (state.dialog.value) {
+        return h(state.dialog.value, {
+          ...state.dialog.value.properties,
+          key: state.dialogKey.value
+        });
+      }
+    }
+    return () => {
+      if (state.view.value) {
+        const view = renderView();
+        if (state.viewLayout.value) {
+          state.view.value.layout = state.viewLayout.value;
+          state.viewLayout.value = void 0;
+        }
+        if (state.view.value.layout) {
+          return renderLayout(view);
+        }
+        return [view, renderDialog()];
+      }
+    };
+  },
+  props: {
+    context: {
+      type: Object,
+      required: true
+    }
+  }
+});
+
+const hybridlyStateType = "hybridly";
+const hybridlyEventsTimelineLayerId = "Hybridly";
+function setupDevtools(app) {
+  setupDevtoolsPlugin({
+    id: "hybridly",
+    label: "Hybridly",
+    packageName: "@hybridly/vue",
+    homepage: "https://github.com/hybridly",
+    app,
+    enableEarlyProxy: true,
+    componentStateTypes: [
+      hybridlyStateType
+    ]
+  }, (api) => {
+    api.on.inspectComponent((payload) => {
+      payload.instanceData.state.push({
+        type: hybridlyStateType,
+        key: "properties",
+        value: state.context.value?.view.properties,
+        editable: true
+      });
+      payload.instanceData.state.push({
+        type: hybridlyStateType,
+        key: "component",
+        value: state.context.value?.view.name
+      });
+      payload.instanceData.state.push({
+        type: hybridlyStateType,
+        key: "version",
+        value: state.context.value?.version
+      });
+      payload.instanceData.state.push({
+        type: hybridlyStateType,
+        key: "url",
+        value: state.context.value?.url
+      });
+      payload.instanceData.state.push({
+        type: hybridlyStateType,
+        key: "router",
+        value: state.routes.value
+      });
+    });
+    api.on.editComponentState((payload) => {
+      if (payload.type === hybridlyStateType) {
+        payload.set(state.context.value?.view);
+      }
+    });
+    api.addTimelineLayer({
+      id: hybridlyEventsTimelineLayerId,
+      color: 16501221,
+      label: "Hybridly"
+    });
+    const listen = [
+      "start",
+      "data",
+      "navigate",
+      "progress",
+      "error",
+      "abort",
+      "success",
+      "invalid",
+      "exception",
+      "fail",
+      "after"
+    ];
+    registerHook("before", (options) => {
+      const groupId = (Math.random() + 1).toString(36).substring(7);
+      api.addTimelineEvent({
+        layerId: hybridlyEventsTimelineLayerId,
+        event: {
+          groupId,
+          title: "before",
+          time: api.now(),
+          data: options
+        }
+      });
+      listen.forEach((event) => registerHookOnce(event, (data) => {
+        api.addTimelineEvent({
+          layerId: hybridlyEventsTimelineLayerId,
+          event: {
+            groupId,
+            title: event,
+            time: api.now(),
+            data
+          }
+        });
+        if (event === "after") {
+          setTimeout(() => {
+            triggerRef(state.context);
+            api.notifyComponentUpdate();
+          }, 100);
+        }
+      }));
+    });
+  });
+}
+const plugin = {
+  install(app) {
+    if (process.env.NODE_ENV === "development" || __VUE_PROD_DEVTOOLS__) {
+      setupDevtools(app);
+    }
+  }
+};
+
+async function initializeHybridly(options) {
+  const { element, payload, resolve } = prepare(options);
+  if (!element) {
+    throw new Error("Could not find an HTML element to initialize Vue on.");
+  }
+  if (!payload) {
+    throw new Error("No payload. Are you using `@hybridly` or the `payload` option?");
+  }
+  state.setContext(await createRouter({
+    plugins: options.plugins,
+    serializer: options.serializer,
+    adapter: {
+      resolveComponent: resolve,
+      swapDialog: async () => {
+      },
+      swapView: async (options2) => {
+        state.setView(options2.component);
+        if (!options2.preserveState) {
+          state.setViewKey(Date.now());
+        }
+      },
+      update: (context) => {
+        state.setContext(context);
+      }
+    },
+    payload
+  }));
+  await options.setup({
+    element,
+    wrapper,
+    hybridly: plugin,
+    props: { context: state.context.value },
+    render: () => h(wrapper, { context: state.context.value })
+  });
+}
+function prepare(options) {
+  debug.adapter("vue", "Preparing Hybridly with options:", options);
+  const isServer = typeof window === "undefined";
+  const id = options.id ?? "root";
+  const element = document?.getElementById(id) ?? void 0;
+  debug.adapter("vue", `Element "${id}" is:`, element);
+  const payload = options.payload ?? element?.dataset.payload ? JSON.parse(element.dataset.payload) : void 0;
+  if (options.cleanup !== false) {
+    delete element.dataset.payload;
+  }
+  debug.adapter("vue", "Resolved:", { isServer, element, payload });
+  const resolve = async (name) => {
+    debug.adapter("vue", "Resolving component", name);
+    if (options.resolve) {
+      const component = await options.resolve?.(name);
+      return component.default ?? component;
+    }
+    if (options.pages) {
+      return await resolvePageComponent(name, options.pages, options.layout);
+    }
+    throw new Error("Either `initializeHybridly#resolve` or `initializeHybridly#pages` should be defined.");
+  };
+  if (typeof window !== "undefined") {
+    const routes = window.hybridly?.routes;
+    if (routes) {
+      state.setRoutes(window.hybridly?.routes);
+      window.addEventListener("hybridly:routes", (event) => {
+        state.setRoutes(event.detail);
+      });
+    }
+  }
+  if (options.progress !== false) {
+    options.plugins = [
+      progress(typeof options.progress === "object" ? options.progress : {}),
+      ...options.plugins ?? []
+    ];
+  }
+  return {
+    isServer,
+    element,
+    payload,
+    resolve
+  };
+}
+async function resolvePageComponent(name, pages, defaultLayout) {
+  const path = Object.keys(pages).sort((a, b) => a.length - b.length).find((path2) => path2.endsWith(`${name.replaceAll(".", "/")}.vue`));
+  if (!path) {
+    showPageComponentErrorModal(name);
+    console.warn(`Page component "${name}" could not be found. Available pages:`, Object.keys(pages));
+    return;
+  }
+  let component = typeof pages[path] === "function" ? await pages[path]() : pages[path];
+  component = component.default ?? component;
+  component.layout ?? (component.layout = defaultLayout);
+  return component;
+}
+
+const RouterLink = defineComponent({
+  name: "RouterLink",
+  setup(_, { slots, attrs }) {
+    return (props) => {
+      let data = props.data ?? {};
+      const url = makeUrl(props.href ?? "");
+      const method = props.method ?? "GET";
+      const as = typeof props.as === "object" ? props.as : props.as?.toLowerCase() ?? "a";
+      if (method === "GET") {
+        debug.adapter("vue", "Moving data object to URL parameters.");
+        url.search = qs.stringify(merge(data, qs.parse(url.search, { ignoreQueryPrefix: true })), {
+          encodeValuesOnly: true,
+          arrayFormat: "indices"
+        });
+        data = {};
+      }
+      if (as === "a" && method !== "GET") {
+        debug.adapter("vue", `Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.
+
+Please specify a more appropriate element using the "as" attribute. For example:
+
+<Link href="${url}" method="${method}" as="button">...</Link>`);
+      }
+      return h(props.as, {
+        ...attrs,
+        ...as === "a" ? { href: url } : {},
+        ...props.disabled ? { disabled: props.disabled } : {},
+        onClick: (event) => {
+          if (props.external) {
+            return;
+          }
+          if (!shouldIntercept(event)) {
+            return;
+          }
+          event.preventDefault();
+          if (props.disabled) {
+            return;
+          }
+          router.visit({
+            url,
+            data,
+            method,
+            preserveState: method !== "GET",
+            ...props.options
+          });
+        }
+      }, slots);
+    };
+  },
+  props: {
+    href: {
+      type: String,
+      required: true
+    },
+    as: {
+      type: [String, Object],
+      default: "a"
+    },
+    method: {
+      type: String,
+      default: "GET"
+    },
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    external: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+});
+function shouldIntercept(event) {
+  const isLink = event.currentTarget.tagName.toLowerCase() === "a";
+  return !(event.target && (event?.target).isContentEditable || event.defaultPrevented || isLink && event.which > 1 || isLink && event.altKey || isLink && event.ctrlKey || isLink && event.metaKey || isLink && event.shiftKey);
+}
+
+const HybridlyImports = {
+  "hybridly/vue": [
+    "useProperty",
+    "useProperties",
+    "useRouter",
+    "useBackForward",
+    "useContext",
+    "useForm",
+    "useHistoryState",
+    "usePaginator",
+    "useLayout",
+    "route"
+  ],
+  "hybridly": [
+    "registerHook",
+    "registerHookOnce",
+    "router",
+    "can"
+  ]
+};
+
+function HybridlyResolver(options = {}) {
+  options = {
+    linkName: "RouterLink",
+    ...options
+  };
+  return {
+    type: "component",
+    resolve: (name) => {
+      if (name === options.linkName) {
+        return {
+          name: "RouterLink",
+          as: options.linkName,
+          from: "hybridly/vue"
+        };
+      }
+    }
+  };
+}
+
+function toReactive(objectRef) {
+  if (!isRef(objectRef)) {
+    return reactive(objectRef);
+  }
+  const proxy = new Proxy({}, {
+    get(_, p, receiver) {
+      return unref(Reflect.get(objectRef.value, p, receiver));
+    },
+    set(_, p, value) {
+      if (isRef(objectRef.value[p]) && !isRef(value)) {
+        objectRef.value[p].value = value;
+      } else {
+        objectRef.value[p] = value;
+      }
+      return true;
+    },
+    deleteProperty(_, p) {
+      return Reflect.deleteProperty(objectRef.value, p);
+    },
+    has(_, p) {
+      return Reflect.has(objectRef.value, p);
+    },
+    ownKeys() {
+      return Object.keys(objectRef.value);
+    },
+    getOwnPropertyDescriptor() {
+      return {
+        enumerable: true,
+        configurable: true
+      };
+    }
+  });
+  return reactive(proxy);
+}
+
+function useProperties() {
+  return readonly(toReactive(computed(() => state.context.value?.view.properties)));
+}
+function useProperty(path, fallback) {
+  return computed(() => path.split(".").reduce((o, i) => o[i], state.context.value?.view.properties) ?? fallback);
+}
+
+function useContext() {
+  return computed(() => state.context.value);
+}
+
+function useRouter() {
+  return router;
+}
+
+function safeClone(obj) {
+  return clone(toRaw(obj));
+}
+function useForm(options) {
+  const shouldRemember = options?.key !== false;
+  const historyKey = options?.key ?? "form:default";
+  const historyData = shouldRemember ? router.history.get(historyKey) : void 0;
+  const timeoutIds = {
+    recentlyFailed: void 0,
+    recentlySuccessful: void 0
+  };
+  const initial = readonly(safeClone(options.fields));
+  const loaded = readonly(safeClone(historyData?.fields ?? options.fields));
+  const fields = reactive(safeClone(historyData?.fields ?? options.fields));
+  const errors = ref(historyData?.errors ?? {});
+  const isDirty = ref(false);
+  const recentlySuccessful = ref(false);
+  const successful = ref(false);
+  const recentlyFailed = ref(false);
+  const failed = ref(false);
+  const processing = ref(false);
+  function reset(...keys) {
+    if (keys.length === 0) {
+      keys = Object.keys(fields);
+    }
+    keys.forEach((key) => Reflect.set(fields, key, safeClone(Reflect.get(initial, key))));
+    clearErrors();
+  }
+  function submit(optionsOverrides) {
+    const url = typeof options.url === "function" ? options.url() : options.url;
+    const data = typeof options.transform === "function" ? options.transform?.(fields) : fields;
+    return router.visit({
+      url: url ?? state.context.value?.url,
+      method: options.method ?? "POST",
+      ...optionsOverrides,
+      data: safeClone(data),
+      preserveState: optionsOverrides?.preserveState === void 0 && options.method !== "GET" ? true : optionsOverrides?.preserveState,
+      hooks: {
+        before: (visit) => {
+          failed.value = false;
+          successful.value = false;
+          recentlySuccessful.value = false;
+          clearTimeout(timeoutIds.recentlySuccessful);
+          clearTimeout(timeoutIds.recentlyFailed);
+          clearErrors();
+          return options.hooks?.before?.(visit);
+        },
+        start: (context) => {
+          processing.value = true;
+          return options.hooks?.start?.(context);
+        },
+        error: (incoming) => {
+          setErrors(incoming);
+          failed.value = true;
+          recentlyFailed.value = true;
+          timeoutIds.recentlyFailed = setTimeout(() => recentlyFailed.value = false, options?.timeout ?? 5e3);
+          return options.hooks?.error?.(incoming);
+        },
+        success: (payload) => {
+          if (options?.reset !== false) {
+            reset();
+          }
+          successful.value = true;
+          recentlySuccessful.value = true;
+          timeoutIds.recentlySuccessful = setTimeout(() => recentlySuccessful.value = false, options?.timeout ?? 5e3);
+          return options.hooks?.success?.(payload);
+        },
+        after: (context) => {
+          processing.value = false;
+          return options.hooks?.after?.(context);
+        }
+      }
+    });
+  }
+  function clearErrors() {
+    errors.value = {};
+  }
+  function setErrors(incoming) {
+    errors.value = incoming;
+  }
+  function abort() {
+    router.abort();
+  }
+  watch([fields, processing, errors], () => {
+    isDirty.value = !isEqual(toRaw(loaded), toRaw(fields));
+    if (shouldRemember) {
+      router.history.remember(historyKey, {
+        fields: toRaw(fields),
+        errors: toRaw(errors.value)
+      });
+    }
+  }, { deep: true, immediate: true });
+  return reactive({
+    reset,
+    initial,
+    fields,
+    loaded,
+    submit,
+    abort,
+    setErrors,
+    clearErrors,
+    hasErrors: computed(() => Object.values(errors.value).length > 0),
+    isDirty: readonly(isDirty),
+    errors: readonly(errors),
+    processing: readonly(processing),
+    successful: readonly(successful),
+    failed: readonly(failed),
+    recentlySuccessful: readonly(recentlySuccessful),
+    recentlyFailed: readonly(recentlyFailed)
+  });
+}
+
+function useHistoryState(key, initial) {
+  const value = ref(router.history.get(key) ?? initial);
+  watch(value, (value2) => {
+    router.history.remember(key, toRaw(value2));
+  }, { immediate: true, deep: true });
+  return value;
+}
+
+function useBackForward() {
+  const callbacks = [];
+  registerHook("navigate", (options) => {
+    if (options.isBackForward) {
+      callbacks.forEach((fn) => fn(state.context.value));
+      callbacks.splice(0, callbacks.length);
+    }
+  });
+  function onBackForward(fn) {
+    callbacks.push(fn);
+  }
+  function reloadOnBackForward(options) {
+    onBackForward(() => router.reload(options));
+  }
+  return {
+    onBackForward,
+    reloadOnBackForward
+  };
+}
+
+function usePaginator(paginator) {
+  const meta = paginator.meta ?? paginator;
+  const links = meta.links ?? paginator.links;
+  const items = links.map((link, index) => {
+    return {
+      url: link.url,
+      label: link.label,
+      isPage: !isNaN(+link.label),
+      isPrevious: index === 0,
+      isNext: index === links.length - 1,
+      isCurrent: link.active,
+      isSeparator: link.label === "...",
+      isActive: !!link.url && !link.active
+    };
+  });
+  const pages = items.filter((item) => item.isPage || item.isSeparator);
+  const current = items.find((item) => item.isCurrent);
+  const previous = items.find((item) => item.isPrevious);
+  const next = items.find((item) => item.isNext);
+  const first = { ...items[1], isActive: items[1].url !== current?.url, label: "&laquo;" };
+  const last = { ...items[items.length - 1], isActive: items[items.length - 1].url !== current?.url, label: "&raquo;" };
+  const from = meta.from;
+  const to = meta.to;
+  const total = meta.total;
+  return { pages, items, previous, next, first, last, total, from, to };
+}
+
+function useLayout(layout) {
+  state.setViewLayout(layout);
+}
+
+class Route {
+  constructor(name, absolute) {
+    this.name = name;
+    this.absolute = absolute;
+    this.definition = Route.getDefinition(name);
+  }
+  static getDefinition(name) {
+    if (!state.routes.value) {
+      throw new Error("Routing is not initialized. Have you enabled the Vite plugin?");
+    }
+    const routes = state.routes.value;
+    const route = routes?.routes?.[name];
+    if (!route) {
+      throw new Error(`Route ${name.toString()} does not exist.`);
+    }
+    return route;
+  }
+  get template() {
+    const origin = !this.absolute ? "" : this.definition.domain ? `${state.routes.value?.url.match(/^\w+:\/\//)?.[0]}${this.definition.domain}${state.routes.value?.port ? `:${state.routes.value?.port}` : ""}` : state.routes.value?.url;
+    return `${origin}/${this.definition.uri}`.replace(/\/+$/, "");
+  }
+  get parameterSegments() {
+    return this.template.match(/{[^}?]+\??}/g)?.map((segment) => ({
+      name: segment.replace(/{|\??}/g, ""),
+      required: !/\?}$/.test(segment)
+    })) ?? [];
+  }
+  matchesUrl(url) {
+    if (!this.definition.methods.includes("GET")) {
+      return false;
+    }
+    const pattern = this.template.replace(/(\/?){([^}?]*)(\??)}/g, (_, slash, segment, optional) => {
+      const regex = `(?<${segment}>${this.definition.wheres?.[segment]?.replace(/(^\^)|(\$$)/g, "") || "[^/?]+"})`;
+      return optional ? `(${slash}${regex})?` : `${slash}${regex}`;
+    }).replace(/^\w+:\/\//, "");
+    const [location, query] = url.replace(/^\w+:\/\//, "").split("?");
+    const matches = new RegExp(`^${pattern}/?$`).exec(location);
+    return matches ? { params: matches.groups, query: parse(query) } : false;
+  }
+  compile(params) {
+    const segments = this.parameterSegments;
+    if (!segments.length) {
+      return this.template;
+    }
+    return this.template.replace(/{([^}?]+)(\??)}/g, (_, segment, optional) => {
+      if (!optional && [null, void 0].includes(params?.[segment])) {
+        throw new Error(`Router error: [${segment}] parameter is required for route [${this.name}].`);
+      }
+      if (segments[segments.length - 1].name === segment && this.definition?.wheres?.[segment] === ".*") {
+        return encodeURIComponent(params[segment] ?? "").replace(/%2F/g, "/");
+      }
+      if (this.definition?.wheres?.[segment] && !new RegExp(`^${optional ? `(${this.definition?.wheres?.[segment]})?` : this.definition?.wheres?.[segment]}$`).test(params[segment] ?? "")) {
+        throw new Error(`Router error: [${segment}] parameter does not match required format [${this.definition?.wheres?.[segment]}] for route [${this.name}].`);
+      }
+      return encodeURIComponent(params[segment] ?? "");
+    }).replace(/\/+$/, "");
+  }
+}
+
+class Router extends String {
+  constructor(name, parameters, absolute = true) {
+    super();
+    this.route = new Route(name, absolute);
+    this.setParameters(parameters);
+  }
+  toString() {
+    const unhandled = Object.keys(this.parameters).filter((key) => !this.route.parameterSegments.some(({ name }) => name === key)).filter((key) => key !== "_query").reduce((result, current) => ({ ...result, [current]: this.parameters[current] }), {});
+    return this.route.compile(this.parameters) + stringify({ ...unhandled, ...this.parameters._query }, {
+      addQueryPrefix: true,
+      arrayFormat: "indices",
+      encodeValuesOnly: true,
+      skipNulls: true,
+      encoder: (value, encoder) => typeof value === "boolean" ? Number(value).toString() : encoder(value)
+    });
+  }
+  static has(name) {
+    try {
+      Route.getDefinition(name);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  setParameters(parameters) {
+    this.parameters = parameters ?? {};
+    this.parameters = ["string", "number"].includes(typeof this.parameters) ? [this.parameters] : this.parameters;
+    const segments = this.route.parameterSegments.filter(({ name }) => !state.routes.value?.defaults[name]);
+    if (Array.isArray(this.parameters)) {
+      this.parameters = this.parameters.reduce((result, current, i) => segments[i] ? { ...result, [segments[i].name]: current } : typeof current === "object" ? { ...result, ...current } : { ...result, [current]: "" }, {});
+    } else if (segments.length === 1 && !this.parameters[segments[0].name] && (Reflect.has(this.parameters, Object.values(this.route.definition.bindings)[0]) || Reflect.has(this.parameters, "id"))) {
+      this.parameters = { [segments[0].name]: this.parameters };
+    }
+    this.parameters = {
+      ...this.getDefaults(),
+      ...this.substituteBindings()
+    };
+  }
+  getDefaults() {
+    return this.route.parameterSegments.filter(({ name }) => state.routes.value?.defaults[name]).reduce((result, { name }) => ({ ...result, [name]: state.routes.value?.defaults[name] }), {});
+  }
+  substituteBindings() {
+    return Object.entries(this.parameters).reduce((result, [key, value]) => {
+      if (!value || typeof value !== "object" || Array.isArray(value) || !this.route.parameterSegments.some(({ name }) => name === key)) {
+        return { ...result, [key]: value };
+      }
+      if (!Reflect.has(value, this.route.definition.bindings[key])) {
+        if (Reflect.has(value, "id")) {
+          this.route.definition.bindings[key] = "id";
+        } else {
+          throw new Error(`Router error: object passed as [${key}] parameter is missing route model binding key [${this.route.definition.bindings?.[key]}].`);
+        }
+      }
+      return { ...result, [key]: value[this.route.definition.bindings[key]] };
+    }, {});
+  }
+  valueOf() {
+    return this.toString();
+  }
+}
+
+function route(name, parameters, absolute) {
+  return new Router(name, parameters, absolute).toString();
+}
+
+export { HybridlyImports, HybridlyResolver, RouterLink, initializeHybridly, route, useBackForward, useContext, useForm, useHistoryState, useLayout, usePaginator, useProperties, useProperty, useRouter };