piral-blazor 1.0.0-pre.2296 → 1.0.0

package/src/interop.ts

@@ -1,162 +1,273 @@
-export const eventNames = {
-  render: 'render-blazor-extension',
-  navigate: 'navigate-blazor',
-};
+import { PiletApi } from 'piral-core';
+import { emitRenderEvent, emitNavigateEvent, emitPiralEvent } from './events';
+import type { BlazorLogLevel, BlazorRootConfig, WebAssemblyStartOptions } from './types';
 
+const wasmLib = 'Microsoft.AspNetCore.Components.WebAssembly';
 const coreLib = 'Piral.Blazor.Core';
-const eventParents: Array<HTMLElement> = [];
-const blazorRootId = 'blazor-root';
-
-const globalEventNames = [
-  'abort',
-  'blur',
-  'change',
-  'error',
-  'focus',
-  'load',
-  'loadend',
-  'loadstart',
-  'mouseenter',
-  'mouseleave',
-  'progress',
-  'reset',
-  'scroll',
-  'submit',
-  'unload',
-  'DOMNodeInsertedIntoDocument',
-  'DOMNodeRemovedFromDocument',
-  'click',
-  'dblclick',
-  'mousedown',
-  'mousemove',
-  'mouseup',
-];
-
-function dispatchToRoot(event: Event) {
-  document.getElementById(blazorRootId)?.dispatchEvent(new Event(event.type, event));
-}
-
-function isRooted(target: HTMLElement) {
-  let parent = target.parentElement;
-
-  while (parent) {
-    if (parent.id === blazorRootId) {
-      return true;
+
+function isDotNet6OrBelow() {
+  return typeof window.Blazor._internal.NavigationLock === 'undefined';
+}
+
+function createBase() {
+  // Nothing found, we need to guess
+  const el = document.createElement('base');
+  let baseUrl = el.href;
+
+  // The main app is served by a script - but we don't know which one
+  // hence we just iterate over all the local ones and use the script
+  // that is served from the "shortest" route - should work almost
+  // always and if not - one can always explicitely set a <base> node
+  for (let i = document.scripts.length; i--; ) {
+    const s = document.scripts[i];
+    const src = s.getAttribute('src');
+
+    if (src && src.startsWith('/')) {
+      const segEnd = src.lastIndexOf('/');
+      const newUrl = src.substring(0, segEnd + 1);
+
+      if (baseUrl.split('/').length > newUrl.split('/').length) {
+        baseUrl = newUrl;
+      }
     }
+  }
+
+  el.href = baseUrl;
+  return document.head.appendChild(el);
+}
+
+function prepareForStartup() {
+  const originalApplyHotReload = window.Blazor._internal.applyHotReload;
+  const queue = [];
+
+  const applyChanges = (api: PiletApi) => {
+    const pilet = api.meta;
+
+    if (pilet.config && pilet.config.blazorHotReload) {
+      for (const item of queue.splice(0, queue.length)) {
+        item();
+      }
+
+      window.Blazor._internal.applyHotReload = originalApplyHotReload;
+    }
+  };
+
+  window.Blazor._internal.applyHotReload = function (...args) {
+    queue.push(() => originalApplyHotReload.apply(this, args));
+  };
 
-    parent = parent.parentElement;
+  return getCapabilities().then((capabilities) => ({
+    capabilities,
+    applyChanges,
+  }));
+}
+
+function createBlazorStarter(publicPath: string): (opts: WebAssemblyStartOptions) => Promise<BlazorRootConfig> {
+  const root = document.body.appendChild(document.createElement('div'));
+
+  root.style.display = 'none';
+  root.id = 'blazor-root';
+
+  if (publicPath) {
+    const baseElement = document.head.querySelector('base') || createBase();
+    const originalBase = baseElement.href;
+    baseElement.href = publicPath;
+
+    return (opts) => {
+      const navManager = window.Blazor._internal.navigationManager;
+
+      //Overwrite to get NavigationManager in Blazor working, see https://github.com/smapiot/Piral.Blazor/issues/89
+      navManager.navigateTo = (
+        route: string,
+        opts: { forceLoad: boolean; replaceHistoryEntry: boolean; historyEntryState: any },
+      ) => {
+        if (opts.forceLoad) {
+          location.href = route;
+          return;
+        }
+
+        if (route.startsWith(location.origin) && '') {
+          // normalize "local" absolute URLs
+          route = route.substring(location.origin.length);
+        } else if (/^https?:\/\//.test(route)) {
+          // prevent absolute URLs to be a standard navigation
+          location.href = route;
+          return;
+        }
+
+        window.Blazor.emitNavigateEvent(undefined, route, opts.replaceHistoryEntry, opts.historyEntryState);
+      };
+
+      navManager.getBaseURI = () => originalBase;
+
+      return window.Blazor.start(opts)
+        .then(prepareForStartup)
+        .then(({ capabilities, applyChanges }) => {
+          baseElement.href = originalBase;
+          return [root, capabilities, applyChanges];
+        });
+    };
   }
 
-  return false;
+  return (opts) =>
+    window.Blazor.start(opts)
+      .then(prepareForStartup)
+      .then(({ capabilities, applyChanges }) => [root, capabilities, applyChanges]);
 }
 
-function findTarget(target: HTMLElement = document.body) {
-  if (eventParents.length === 0) {
-    return target;
-  } else if (target === document.body) {
-    return eventParents[0];
-  } else {
-    return target;
+function computePath() {
+  try {
+    throw new Error();
+  } catch (t) {
+    const e = ('' + t.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\/\/[^)\n]+/g);
+    if (e) {
+      return e[0].replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\/\/.+)\/[^\/]+$/, '$1') + '/';
+    }
   }
+
+  return '/';
 }
 
-function emitRenderEvent(source: HTMLElement, name: string) {
-  const target = findTarget(source);
-  const eventInit = {
-    bubbles: true,
-    detail: {
-      target,
-      props: {
-        name,
-      },
-    },
-  };
-  const delayEmit = () =>
-    requestAnimationFrame(() => {
-      if (!isRooted(target)) {
-        target.dispatchEvent(new CustomEvent(eventNames.render, eventInit));
-      } else {
-        delayEmit();
-      }
-    });
-  delayEmit();
+function addScript(url: string) {
+  return new Promise<void>((resolve, reject) => {
+    const script = document.createElement('script');
+    script.src = url;
+    script.onerror = () => reject();
+    script.onload = () => resolve();
+    document.body.appendChild(script);
+  });
 }
 
-function emitNavigateEvent(source: HTMLElement, to: string, replace = false, state?: any) {
-  findTarget(source).dispatchEvent(
-    new CustomEvent(eventNames.navigate, {
-      bubbles: true,
-      detail: {
-        to,
-        replace,
-        state,
-      },
-    }),
-  );
+export function processEvent(type: string, args: any) {
+  return window.DotNet.invokeMethodAsync(coreLib, 'ProcessEvent', type, args);
 }
 
-export function addGlobalEventListeners(el: HTMLElement) {
-  globalEventNames.forEach((eventName) => el.addEventListener(eventName, dispatchToRoot));
+export function setLogLevel(logLevel: BlazorLogLevel) {
+  return window.DotNet.invokeMethodAsync(coreLib, 'SetLogLevel', logLevel);
 }
 
-export function removeGlobalEventListeners(el: HTMLElement) {
-  globalEventNames.forEach((eventName) => el.removeEventListener(eventName, dispatchToRoot));
+export function createElement(moduleName: string, props: any): Promise<string> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'CreateElement', moduleName, props);
 }
 
-export function activate(moduleName: string, props: any) {
-  return window['DotNet'].invokeMethodAsync<string>(coreLib, 'Activate', moduleName, props);
+export function updateElement(referenceId: string, props: any): Promise<string> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'UpdateElement', referenceId, props);
 }
 
-export function deactivate(moduleName: string, referenceId: string) {
-  return window['DotNet'].invokeMethodAsync<string>(coreLib, 'Deactivate', moduleName, referenceId);
+export function destroyElement(referenceId: string): Promise<string> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'DestroyElement', referenceId);
 }
 
-export function addReference(blob: Blob) {
-  return new Promise((resolve) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      const data = reader.result.toString().replace(/^data:.+;base64,/, '');
-      window['DotNet'].invokeMethodAsync(coreLib, 'LoadComponentsFromLibrary', data).then(resolve);
-    };
-    reader.readAsDataURL(blob);
+export function activate(moduleName: string, props: any): Promise<string> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'Activate', moduleName, props);
+}
+
+export function reactivate(moduleName: string, referenceId: string, props: any): Promise<void> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'Reactivate', moduleName, referenceId, props).catch(() => {
+    // Apparently an older version of Piral.Blazor, which does not support this
+    // discard this error silently (in the future we may print warnings here)
   });
 }
 
-export function removeReference(name: string) {
-  return window['DotNet'].invokeMethodAsync(coreLib, 'UnloadComponentsFromLibrary', name);
+export function deactivate(moduleName: string, referenceId: string): Promise<void> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'Deactivate', moduleName, referenceId);
 }
 
-export function attachEvents(
-  host: HTMLElement,
-  render: (ev: CustomEvent) => void,
-  navigate: (ev: CustomEvent) => void,
-) {
-  eventParents.push(host);
-  host.addEventListener(eventNames.render, render, false);
-  host.addEventListener(eventNames.navigate, navigate, false);
-  return () => {
-    eventParents.splice(eventParents.indexOf(host), 1);
-    host.removeEventListener(eventNames.render, render, false);
-    host.removeEventListener(eventNames.navigate, navigate, false);
-  };
+export function callNotifyLocationChanged(url: string, replace: boolean, state: any): Promise<void> {
+  if (isDotNet6OrBelow()) {
+    return window.DotNet.invokeMethodAsync(wasmLib, 'NotifyLocationChanged', url, replace);
+  } else {
+    if (state !== undefined && typeof state !== 'string') {
+      state = JSON.stringify(state);
+    }
+
+    return window.DotNet.invokeMethodAsync(wasmLib, 'NotifyLocationChanged', url, state, replace);
+  }
+}
+
+export function setLanguage(language: string): Promise<void> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'SetLanguage', language);
+}
+
+export function getCapabilities(): Promise<Array<string>> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'GetCapabilities').catch(() => {
+    // Apparently an older version of Piral.Blazor, which does not support this
+    // discard this error silently (in the future we may print warnings here)
+    return [];
+  });
+}
+
+export function loadResource(url: string): Promise<void> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'LoadComponentsFromLibrary', url);
+}
+
+export function loadResourceWithSymbol(dllUrl: string, pdbUrl: string): Promise<void> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'LoadComponentsWithSymbolsFromLibrary', dllUrl, pdbUrl);
+}
+
+export function unloadResource(url: string): Promise<void> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'UnloadComponentsFromLibrary', url);
+}
+
+export interface PiletData {
+  dllUrl: string;
+  pdbUrl?: string;
+  name: string;
+  version: string;
+  config: string;
+  baseUrl: string;
+  satellites?: Record<string, Array<string>>;
+  dependencies: Array<string>;
+}
+
+export function loadBlazorPilet(id: string, data: PiletData) {
+  return window.DotNet.invokeMethodAsync(coreLib, 'LoadPilet', id, data);
+}
+
+export function unloadBlazorPilet(id: string) {
+  return window.DotNet.invokeMethodAsync(coreLib, 'UnloadPilet', id);
 }
 
-export function initialize(scriptUrl: string) {
-  return new Promise((resolve, reject) => {
+export function initialize(scriptUrl: string, publicPath: string, opts: WebAssemblyStartOptions = {}) {
+  if (typeof opts.loadBootResource !== 'function') {
+    opts.loadBootResource = (type, name, url) =>
+      type === 'dotnetjs' ? url : fetch(url, { method: 'GET', cache: 'no-cache' });
+  }
+
+  return new Promise<BlazorRootConfig>((resolve, reject) => {
+    const startBlazor = createBlazorStarter(publicPath);
     const script = document.createElement('script');
     script.src = scriptUrl;
     script.setAttribute('autostart', 'false');
 
     script.onerror = () => reject();
     script.onload = () => {
-      Object.assign(window['Blazor'], {
+      Object.assign(window.Blazor, {
         emitRenderEvent,
         emitNavigateEvent,
+        emitPiralEvent,
       });
 
-      window['Blazor'].start().then(resolve);
+      startBlazor(opts).then(resolve);
     };
 
     document.body.appendChild(script);
   });
 }
+
+export function createBootLoader(scriptUrl: string, extraScriptUrls: Array<string>) {
+  const publicPath = computePath();
+
+  return (opts?: WebAssemblyStartOptions) => {
+    if (typeof window.$blazorLoader === 'undefined') {
+      window.dispatchEvent(new CustomEvent('loading-blazor-core'));
+
+      // we load all satellite scripts before we initialize blazor
+      window.$blazorLoader = Promise.all(extraScriptUrls.map(addScript)).then(() =>
+        initialize(scriptUrl, publicPath, opts),
+      );
+    }
+
+    return window.$blazorLoader;
+  };
+}

package/src/navigation.ts

@@ -0,0 +1,36 @@
+function findClosestAncestor(element: Element | null, tagName: string) {
+  // tslint:disable-next-line:no-null-keyword
+  return !element ? null : element.tagName === tagName ? element : findClosestAncestor(element.parentElement, tagName);
+}
+
+function getAnchorTarget(event: MouseEvent) {
+  return findClosestAncestor(event.target as Element | null, 'A') as HTMLAnchorElement | null;
+}
+
+function isWithinBaseUriSpace(href: string) {
+  const baseURI = document.baseURI;
+  const baseUriUntilLastSlash = baseURI.substr(0, baseURI.lastIndexOf('/') + 1);
+  return href.startsWith(baseUriUntilLastSlash);
+}
+
+function eventHasSpecialKey(event: MouseEvent) {
+  return event.ctrlKey || event.shiftKey || event.altKey || event.metaKey;
+}
+
+export function isInternalNavigation(event: MouseEvent) {
+  const anchorTarget = getAnchorTarget(event);
+  return (
+    event.type === 'click' &&
+    event.button === 0 &&
+    !eventHasSpecialKey(event) &&
+    anchorTarget?.hasAttribute('href') &&
+    isWithinBaseUriSpace(anchorTarget.href)
+  );
+}
+
+export function performInternalNavigation(event: MouseEvent) {
+  const anchorTarget = getAnchorTarget(event);
+  event.preventDefault();
+  const to = anchorTarget.getAttribute('href');
+  window.Blazor.emitNavigateEvent(anchorTarget, to);
+}

package/src/types.ts

@@ -1,4 +1,76 @@
-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 {}
@@ -8,6 +80,26 @@ declare module 'piral-core/lib/types/custom' {
   }
 }
 
+export 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.
@@ -21,11 +113,15 @@ 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;
 }
 
 /**
@@ -33,15 +129,30 @@ export interface BlazorComponent {
  */
 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/convert.ts

@@ -1,17 +0,0 @@
-import type { HtmlComponent } from 'piral-core';
-import { createConverter } from './lib/converter';
-import { createDependencyLoader } from './lib/dependencies';
-
-const convert = createConverter();
-const loader = createDependencyLoader(convert);
-
-export interface BlazorConverter {
-  (...params: Parameters<typeof convert>): HtmlComponent<any>;
-}
-
-export const fromBlazor: BlazorConverter = (moduleName, dependency, args) => ({
-  type: 'html',
-  component: convert(moduleName, dependency, args),
-});
-
-export const defineBlazorReferences = loader.defineBlazorReferences;