piral-blazor 1.0.0-pre.2296 → 1.0.0

package/lib/navigation.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.performInternalNavigation = exports.isInternalNavigation = void 0;
+function findClosestAncestor(element, tagName) {
+    // tslint:disable-next-line:no-null-keyword
+    return !element ? null : element.tagName === tagName ? element : findClosestAncestor(element.parentElement, tagName);
+}
+function getAnchorTarget(event) {
+    return findClosestAncestor(event.target, 'A');
+}
+function isWithinBaseUriSpace(href) {
+    const baseURI = document.baseURI;
+    const baseUriUntilLastSlash = baseURI.substr(0, baseURI.lastIndexOf('/') + 1);
+    return href.startsWith(baseUriUntilLastSlash);
+}
+function eventHasSpecialKey(event) {
+    return event.ctrlKey || event.shiftKey || event.altKey || event.metaKey;
+}
+function isInternalNavigation(event) {
+    const anchorTarget = getAnchorTarget(event);
+    return (event.type === 'click' &&
+        event.button === 0 &&
+        !eventHasSpecialKey(event) &&
+        (anchorTarget === null || anchorTarget === void 0 ? void 0 : anchorTarget.hasAttribute('href')) &&
+        isWithinBaseUriSpace(anchorTarget.href));
+}
+exports.isInternalNavigation = isInternalNavigation;
+function performInternalNavigation(event) {
+    const anchorTarget = getAnchorTarget(event);
+    event.preventDefault();
+    const to = anchorTarget.getAttribute('href');
+    window.Blazor.emitNavigateEvent(anchorTarget, to);
+}
+exports.performInternalNavigation = performInternalNavigation;
+//# sourceMappingURL=navigation.js.map

package/lib/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../src/navigation.ts"],"names":[],"mappings":";;;AAAA,SAAS,mBAAmB,CAAC,OAAuB,EAAE,OAAe;IACnE,2CAA2C;IAC3C,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;AACvH,CAAC;AAED,SAAS,eAAe,CAAC,KAAiB;IACxC,OAAO,mBAAmB,CAAC,KAAK,CAAC,MAAwB,EAAE,GAAG,CAA6B,CAAC;AAC9F,CAAC;AAED,SAAS,oBAAoB,CAAC,IAAY;IACxC,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;IACjC,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;IAC9E,OAAO,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAChD,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAiB;IAC3C,OAAO,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC;AAC1E,CAAC;AAED,SAAgB,oBAAoB,CAAC,KAAiB;IACpD,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,KAAK,CAAC,IAAI,KAAK,OAAO;QACtB,KAAK,CAAC,MAAM,KAAK,CAAC;QAClB,CAAC,kBAAkB,CAAC,KAAK,CAAC;SAC1B,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,YAAY,CAAC,MAAM,CAAC,CAAA;QAClC,oBAAoB,CAAC,YAAY,CAAC,IAAI,CAAC,CACxC,CAAC;AACJ,CAAC;AATD,oDASC;AAED,SAAgB,yBAAyB,CAAC,KAAiB;IACzD,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,MAAM,EAAE,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AACpD,CAAC;AALD,8DAKC"}

package/lib/types.d.ts

@@ -1,4 +1,60 @@
-import type { ForeignComponent } from 'piral-core';
+import type { ForeignComponent, PiletApi } from 'piral-core';
+export type BlazorRootConfig = [
+    root: HTMLDivElement,
+    capabilities: Array<string>,
+    applyChanges: (pilet: PiletApi) => void
+];
+export interface BlazorDependencyLoader {
+    (config: BlazorRootConfig): Promise<void>;
+}
+export type WebAssemblyBootResourceType = 'assembly' | 'pdb' | 'dotnetjs' | 'dotnetwasm' | 'globalization' | 'manifest';
+export interface WebAssemblyStartOptions {
+    /**
+     * Overrides the built-in boot resource loading mechanism so that boot resources can be fetched
+     * from a custom source, such as an external CDN.
+     * @param type The type of the resource to be loaded.
+     * @param name The name of the resource to be loaded.
+     * @param defaultUri The URI from which the framework would fetch the resource by default. The URI may be relative or absolute.
+     * @param integrity The integrity string representing the expected content in the response.
+     * @returns A URI string or a Response promise to override the loading process, or null/undefined to allow the default loading behavior.
+     */
+    loadBootResource?(type: WebAssemblyBootResourceType, name: string, defaultUri: string, integrity: string): string | Promise<Response> | null | undefined;
+    /**
+     * Override built-in environment setting on start.
+     */
+    environment?: string;
+    /**
+     * Gets the application culture. This is a name specified in the BCP 47 format. See https://tools.ietf.org/html/bcp47
+     */
+    applicationCulture?: string;
+}
+declare global {
+    interface Window {
+        Blazor: {
+            start(options?: Partial<WebAssemblyStartOptions>): Promise<void>;
+            emitPiralEvent(type: string, args: any): void;
+            emitRenderEvent(source: HTMLElement, name: string, params: any, sourceRef: any, fallbackComponent: string | null): void;
+            emitNavigateEvent(target: Element, path: string, replace?: boolean, state?: any): void;
+            _internal: {
+                navigationManager: any;
+                applyHotReload: any;
+                NavigationLock: any;
+            };
+        };
+        DotNet: any;
+        $blazorLoader: Promise<BlazorRootConfig>;
+        $blazorDependencyPrios: Array<{
+            prio: number;
+            load(): Promise<void>;
+        }>;
+        $blazorDependencies: Array<{
+            name: string;
+            url: string;
+            count: number;
+            promise: Promise<void>;
+        }>;
+    }
+}
 declare module 'piral-core/lib/types/custom' {
     interface PiletCustomApi extends PiletBlazorApi {
     }
@@ -6,6 +62,24 @@ declare module 'piral-core/lib/types/custom' {
         blazor(component: BlazorComponent): ForeignComponent<TProps>;
     }
 }
+export declare const enum BlazorLogLevel {
+    trace = 0,
+    debug = 1,
+    info = 2,
+    warn = 3,
+    error = 4,
+    critical = 5,
+    none = 6
+}
+/**
+ * Additional options for the Blazor component
+ */
+export interface BlazorOptions {
+    /**
+     * The root path where resources are located.
+     */
+    resourcePathRoot?: string;
+}
 export interface BlazorComponent {
     /**
      * The name of the Blazor module to render.
@@ -19,26 +93,45 @@ export interface BlazorComponent {
      * An optional dependency that needs to load before
      * the component can be properly displayed.
      */
-    dependency?: () => Promise<void>;
+    dependency?: BlazorDependencyLoader;
     /**
      * The type of the Blazor component.
      */
     type: 'blazor';
+    /**
+     * Additional options for the Blazor component.
+     */
+    options?: BlazorOptions;
 }
 /**
  * Defines the provided set of Blazor Pilet API extensions.
  */
 export interface PiletBlazorApi {
     /**
-     * Defines the additional libraries to Blazor via their URLs.
+     * Defines the additional libraries (and their symbols) to Blazor via
+     * their URLs.
+     *
      * @param referenceUrls The URLs pointing to the different DLLs to include.
+     * @param satellites The URLs of the potential satellite DLLs to include.
+     * @param prio The loading priority of the DLLs. Higher numbers will always be loaded before lower numbers.
      */
-    defineBlazorReferences(referenceUrls: Array<string>): void;
+    defineBlazorReferences(referenceUrls: Array<string>, satellites?: Record<string, Array<string>>, prio?: number): void;
     /**
      * Wraps a Blazor module for use in Piral.
+     *
      * @param moduleName The name of the exposed Blazor component.
      * @param args The optional props to use as arguments for the Blazor component.
      * @returns The Piral Blazor component.
      */
     fromBlazor(moduleName: string, args?: Record<string, any>): BlazorComponent;
+    /**
+     * Defines the additional options to be shared by all Blazor components.
+     *
+     * @param options The options for the Blazor components.
+     */
+    defineBlazorOptions(options: BlazorOptions): void;
+    /**
+     * Releases all defined blazor references from the current pilet.
+     */
+    releaseBlazorReferences(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-blazor",
-  "version": "1.0.0-pre.2296",
+  "version": "1.0.0",
   "description": "Plugin for integrating Blazor components in Piral.",
   "keywords": [
     "piral",
@@ -21,6 +21,26 @@
   "module": "esm/index.js",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./lib/index.js"
+    },
+    "./convert": {
+      "import": "./convert.js"
+    },
+    "./esm/*": {
+      "import": "./esm/*"
+    },
+    "./lib/*": {
+      "require": "./lib/*"
+    },
+    "./_/*": {
+      "import": "./esm/*.js",
+      "require": "./lib/*.js"
+    },
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "files": [
     "infra.codegen",
@@ -28,7 +48,6 @@
     "lib",
     "src",
     "convert.d.ts",
-    "convert.ts",
     "convert.js"
   ],
   "repository": {
@@ -39,19 +58,19 @@
     "url": "https://github.com/smapiot/piral/issues"
   },
   "scripts": {
+    "cleanup": "rimraf esm lib convert.d.ts convert.js",
     "build": "yarn build:commonjs && yarn build:esnext && yarn build:convert",
-    "build:convert": "tsc convert.ts --skipLibCheck --declaration",
+    "build:convert": "tsc convert.ts --skipLibCheck --declaration --module esnext",
     "build:commonjs": "tsc --project tsconfig.json --outDir lib --module commonjs",
     "build:esnext": "tsc --project tsconfig.json --outDir esm --module esnext",
     "typedoc": "typedoc --json ../../../docs/types/piral-blazor.json src --exclude \"src/**/*.test.*\"",
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "devDependencies": {
-    "piral-core": "^1.0.0-pre.2296"
+    "piral-core": "^1.0.0"
   },
   "peerDependencies": {
-    "blazor": "*",
-    "piral-core": "0.13.x"
+    "blazor": "*"
   },
-  "gitHead": "8dc47ff93be1eefcc3e226a1e7dd4d58615b4e0c"
+  "gitHead": "67d9a2920bd5231baf10bc87ae8985666b18fa3a"
 }

package/src/converter.ts

@@ -1,78 +1,248 @@
-import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { BaseComponentProps, Disposable, ForeignComponent } from 'piral-core';
+import { addGlobalEventListeners, attachEvents, removeGlobalEventListeners } from './events';
 import {
-  initialize,
   activate,
   deactivate,
-  attachEvents,
-  addGlobalEventListeners,
-  removeGlobalEventListeners,
+  createBootLoader,
+  reactivate,
+  callNotifyLocationChanged,
+  setLanguage,
+  createElement,
+  destroyElement,
+  updateElement,
+  setLogLevel,
+  processEvent,
 } from './interop';
+import {
+  BlazorDependencyLoader,
+  BlazorLogLevel,
+  BlazorOptions,
+  BlazorRootConfig,
+  WebAssemblyStartOptions,
+} from './types';
+import bootConfig from '../infra.codegen';
 
-export function createConverter(lazy = true) {
-  const bootConfig = require('../infra.codegen');
-  const boot = () => initialize(bootConfig);
-  const root = document.body.appendChild(document.createElement('div'));
-  let loader = !lazy && boot();
+const noop = () => {};
 
-  root.style.display = 'none';
-  root.id = 'blazor-root';
+const mediaRules = [
+  { attribute: 'src', selector: 'img, embed, video > source, video > track, audio > source' },
+  { attribute: 'srcset', selector: 'picture > source' },
+];
 
-  const convert = <TProps extends BaseComponentProps>(
-    moduleName: string,
-    dependency: () => Promise<void>,
-    args: Record<string, any>,
-  ): ForeignComponent<TProps> => {
-    let id: string;
-    let referenceId: string;
-    let node: HTMLElement;
-    let dispose = () => {};
-    let state: 'fresh' | 'mounted' | 'removed';
-
-    return {
-      mount(el, data, ctx) {
-        const props = { ...args, ...data };
-        el.setAttribute('data-blazor-pilet-root', 'true');
-
-        addGlobalEventListeners(el);
-
-        (loader || (loader = boot()))
-          .then(dependency)
-          .then(() => activate(moduleName, props))
-          .then((refId) => {
-            if (state === 'fresh') {
-              id = `${moduleName}-${refId}`;
-              node = el.appendChild(root.querySelector(`#${id} > div`));
-              state = 'mounted';
-              referenceId = refId;
+function prefixMediaSources(component: Element, prefix: string) {
+  const prefixAttributeValue = (el: Element, attr: string) => el.setAttribute(attr, prefix + el.getAttribute(attr));
+
+  for (const { attribute, selector } of mediaRules) {
+    Array.from(component.querySelectorAll(selector))
+      .filter((el) => el.hasAttribute(attribute) && !el.getAttribute(attribute).match(/^https?:/))
+      .forEach((el) => prefixAttributeValue(el, attribute));
+  }
+}
+
+function project(component: Element, destination: Element, options: BlazorOptions) {
+  if (options?.resourcePathRoot && !bootConfig.noMutation) {
+    prefixMediaSources(component, options.resourcePathRoot);
+  }
+
+  destination.appendChild(component);
+}
+
+function makeUrl(href: string) {
+  const origin = document.location.origin;
+
+  if (!href.startsWith(origin)) {
+    return `${origin}${href}`;
+  }
+
+  return href;
+}
+
+interface BlazorLocals {
+  unmount?(): void;
+  update?(props: any): void;
+  dispose(): void;
+  next(config: BlazorRootConfig): void;
+  state: 'fresh' | 'mounted' | 'removed';
+}
+
+export interface LanguageOptions {
+  current: string | undefined;
+  onChange(inform: (language: string) => void): void;
+}
+
+export function createConverter(
+  lazy: boolean,
+  opts?: WebAssemblyStartOptions,
+  language?: LanguageOptions,
+  logLevel?: BlazorLogLevel,
+) {
+  const bootLoader = createBootLoader(bootConfig.url, bootConfig.satellites);
+  const boot = (opts?: WebAssemblyStartOptions) =>
+    bootLoader(opts).then(async (res) => {
+      const [_, capabilities] = res;
+
+      if (capabilities.includes('logging')) {
+        if (typeof logLevel === 'number') {
+          await setLogLevel(logLevel);
+        }
+      }
+
+      if (language && capabilities.includes('language')) {
+        if (typeof language.current === 'string') {
+          await setLanguage(language.current);
+        }
+
+        if (capabilities.includes('events')) {
+          const eventDispatcher = document.body.dispatchEvent;
+
+          // listen to all events for forwarding them
+          document.body.dispatchEvent = function (ev: CustomEvent) {
+            if (ev.type.startsWith('piral-')) {
+              const type = ev.type.replace('piral-', '');
+              const args = ev.detail.arg;
+              processEvent(type, args);
             }
-          })
-          .catch((err) => console.error(err));
-        dispose = attachEvents(
-          el,
-          (ev) => data.piral.renderHtmlExtension(ev.detail.target, ev.detail.props),
-          (ev) =>
-            ev.detail.replace
-              ? ctx.router.history.replace(ev.detail.to, ev.detail.store)
-              : ctx.router.history.push(ev.detail.to, ev.detail.state),
-        );
-        state = 'fresh';
-      },
-      unmount(el) {
-        removeGlobalEventListeners(el);
-        el.removeAttribute('data-blazor-pilet-root');
-        dispose();
-
-        if (state === 'mounted') {
-          root.querySelector(`#${id}`).appendChild(node);
-          deactivate(moduleName, referenceId);
+
+            return eventDispatcher.call(this, ev);
+          };
+        }
+
+        if (typeof language.onChange === 'function') {
+          language.onChange(setLanguage);
         }
+      }
+
+      window.dispatchEvent(new CustomEvent('loaded-blazor-core'));
+      return res;
+    });
+  let loader = !lazy && boot(opts);
+  let listener: Disposable = undefined;
 
-        el.innerHTML = '';
-        state = 'removed';
-      },
-    };
+  const enqueueChange = (locals: BlazorLocals, update: (root: BlazorRootConfig) => void) => {
+    if (typeof update !== 'function') {
+      // nothing to do in this case
+    } else if (locals.state === 'mounted') {
+      loader.then(update);
+    } else {
+      locals.next = update;
+    }
   };
 
+  const convert = <TProps extends BaseComponentProps>(
+    moduleName: string,
+    dependency: BlazorDependencyLoader,
+    args: Record<string, any>,
+    options?: BlazorOptions,
+  ): ForeignComponent<TProps> => ({
+    mount(el, data, ctx, locals: BlazorLocals) {
+      const props = { ...args, ...data };
+      const { piral } = data;
+      const nav = ctx.navigation;
+      el.setAttribute('data-blazor-pilet-root', 'true');
+
+      addGlobalEventListeners(el);
+
+      if (listener === undefined) {
+        listener = nav.listen(({ location, action }) => {
+          // POP is already handled by .NET
+          if (action !== 'POP') {
+            const url = makeUrl(location.href);
+            callNotifyLocationChanged(url, action === 'REPLACE', location.state);
+          }
+        });
+      }
+
+      locals.state = 'fresh';
+      locals.next = noop;
+      locals.dispose = attachEvents(
+        el,
+        (ev) => {
+          ev.stopPropagation();
+          const { target, props } = ev.detail;
+          piral.renderHtmlExtension(target, props);
+        },
+        (ev) => {
+          ev.stopPropagation();
+          const { to, state, replace } = ev.detail;
+          replace ? nav.replace(to, state) : nav.push(to, state);
+        },
+        (ev) => {
+          ev.stopPropagation();
+          const { type, args } = ev.detail;
+          piral.emit(type, args);
+        },
+      );
+
+      function mountClassic(config: BlazorRootConfig) {
+        return activate(moduleName, props).then((refId) => {
+          const [root] = config;
+          const node = root.querySelector(`#${refId} > div`);
+
+          locals.unmount = () => {
+            root.querySelector(`#${refId}`)?.appendChild(node);
+            deactivate(moduleName, refId);
+            el.innerHTML = '';
+          };
+
+          locals.update = (props) => {
+            reactivate(moduleName, refId, props);
+          };
+
+          project(node, el, options);
+        });
+      }
+
+      function mountModern(_: BlazorRootConfig) {
+        return createElement(moduleName, props).then((refId) => {
+          const child = document.createElement('piral-blazor-component');
+          child.setAttribute('rid', refId);
+          el.appendChild(child);
+
+          locals.unmount = () => {
+            destroyElement(refId);
+            child.remove();
+            el.innerHTML = '';
+          };
+
+          locals.update = (props) => {
+            updateElement(refId, props);
+          };
+        });
+      }
+
+      (loader || (convert.loader = loader = boot(opts)))
+        .then((config) =>
+          dependency(config).then(() => {
+            if (locals.state === 'fresh') {
+              const [_, capabilities, applyChanges] = config;
+              const fn = capabilities.includes('custom-element') ? mountModern : mountClassic;
+              applyChanges(piral);
+
+              return fn(config).then(() => {
+                locals.state = 'mounted';
+                locals.next(config);
+                locals.next = noop;
+              });
+            }
+          }),
+        )
+        .catch((err) => console.error(err));
+    },
+    update(el, data, ctx, locals: BlazorLocals) {
+      enqueueChange(locals, () => {
+        locals.update?.({ ...args, ...data });
+      });
+    },
+    unmount(el, locals: BlazorLocals) {
+      removeGlobalEventListeners(el);
+      el.removeAttribute('data-blazor-pilet-root');
+      locals.dispose();
+      enqueueChange(locals, locals.unmount);
+      locals.state = 'removed';
+    },
+  });
+
   convert.loader = loader;
+  convert.lazy = lazy;
   return convert;
 }

package/src/create.ts

@@ -1,7 +1,7 @@
-import type { PiralPlugin } from 'piral-core';
+import type { EventEmitter, PiralPlugin } from 'piral-core';
 import { createConverter } from './converter';
 import { createDependencyLoader } from './dependencies';
-import type { PiletBlazorApi } from './types';
+import type { BlazorLogLevel, BlazorOptions, PiletBlazorApi, WebAssemblyStartOptions } from './types';
 
 /**
  * Available configuration options for the Blazor plugin.
@@ -12,29 +12,73 @@ export interface BlazorConfig {
    * @default true
    */
   lazy?: boolean;
+  /**
+   * Determines the used log level, if any. Otherwise, will use
+   * the default log level (info).
+   */
+  logLevel?: BlazorLogLevel;
+  /**
+   * Determines the initial language to use, if any.
+   * Otherwise, falls back to Blazor's default language.
+   */
+  initialLanguage?: string;
+  /**
+   * Installs a function to handle language change. By default,
+   * this will hook on to the `select-language` event from Piral.
+   * @param inform The callback to use for passing in a new locale.
+   */
+  onLanguageChange?: ((inform: (language: string) => void) => void) | false;
+  /**
+   * Determines the start options to use for booting Blazor.
+   */
+  options?: WebAssemblyStartOptions;
+}
+
+function createDefaultHandler(context: EventEmitter) {
+  return (inform: (language: string) => void) => {
+    context.on('select-language', (ev) => {
+      inform(ev.currentLanguage);
+    });
+  };
 }
 
 /**
  * Creates new Pilet API extensions for integration of Blazor.
  */
 export function createBlazorApi(config: BlazorConfig = {}): PiralPlugin<PiletBlazorApi> {
-  const { lazy } = config;
-
   return (context) => {
-    const convert = createConverter(lazy);
-    context.converters.blazor = ({ moduleName, args, dependency }) => convert(moduleName, dependency, args);
+    const { lazy = true, initialLanguage, onLanguageChange = createDefaultHandler(context), logLevel } = config;
+    const convert = createConverter(
+      lazy,
+      config.options,
+      {
+        current: initialLanguage,
+        onChange: onLanguageChange || (() => {}),
+      },
+      logLevel,
+    );
+    context.converters.blazor = ({ moduleName, args, dependency, options }) =>
+      convert(moduleName, dependency, args, options);
 
-    return () => {
-      const loader = createDependencyLoader(convert, lazy);
+    return (_, meta) => {
+      const loader = createDependencyLoader(convert);
+      let options: BlazorOptions;
 
       return {
-        defineBlazorReferences: loader.defineBlazorReferences,
+        defineBlazorReferences(references, satellites, prio) {
+          return loader.defineBlazorReferences(references, meta, satellites, prio);
+        },
+        defineBlazorOptions(blazorOptions: BlazorOptions) {
+          options = blazorOptions;
+        },
+        releaseBlazorReferences: loader.releaseBlazorReferences,
         fromBlazor(moduleName, args) {
           return {
             type: 'blazor',
             dependency: loader.getDependency(),
             moduleName,
             args,
+            options,
           };
         },
       };