piral-blazor 1.0.0-pre.2217 → 1.0.0

package/src/dependencies.ts

@@ -1,24 +1,132 @@
-import { addReference } from './internal';
+import type { PiletMetadata } from 'piral-core';
+import { loadBlazorPilet, loadResource, loadResourceWithSymbol, unloadBlazorPilet, unloadResource } from './interop';
 import type { createConverter } from './converter';
+import type { BlazorDependencyLoader, BlazorRootConfig } from './types';
 
-export function createDependencyLoader(convert: ReturnType<typeof createConverter>, lazy = true) {
-  let dependency: () => Promise<any>;
+const loadedDependencies = (window.$blazorDependencies ??= []);
+const depsWithPrios = (window.$blazorDependencyPrios ??= []);
+
+export function createDependencyLoader(convert: ReturnType<typeof createConverter>) {
+  const definedBlazorReferences: Array<string> = [];
+  const loadedBlazorPilets: Array<string> = [];
+  let dependency: BlazorDependencyLoader;
 
   return {
     getDependency() {
       return dependency;
     },
-    defineBlazorReferences(references) {
-      const load = () =>
-        Promise.all(
-          references.map((reference) =>
-            fetch(reference)
-              .then((res) => res.blob())
-              .then(addReference),
-          ),
-        );
-      let result = !lazy && convert.loader.then(load);
-      dependency = () => result || (result = load());
+    defineBlazorReferences(references: Array<string>, meta: Partial<PiletMetadata> = {}, satellites = {}, prio = 0) {
+      prio = Math.max(prio, 0);
+
+      const depWithPrio = {
+        prio,
+        load() {
+          return Promise.resolve();
+        },
+      };
+
+      let result: false | Promise<void> = false;
+      const load = async ([_, capabilities]: BlazorRootConfig) => {
+        // let others finish first
+        await Promise.all(depsWithPrios.filter((m) => m.prio > prio).map((m) => m.load()));
+
+        window.dispatchEvent(new CustomEvent('loading-blazor-pilet', { detail: meta }));
+
+        if (capabilities.includes('load')) {
+          // new loading mechanism
+
+          if (!capabilities.includes('language')) {
+            satellites = undefined;
+          }
+
+          const dependencies = references.filter((m) => m.endsWith('.dll'));
+          const dllUrl = dependencies.pop();
+          const piletName = dllUrl.substring(0, dllUrl.length - 4);
+          const piletPdb = `${piletName}.pdb`;
+          const pdbUrl = references.find((m) => m === piletPdb);
+          const id = Math.random().toString(26).substring(2);
+
+          await loadBlazorPilet(id, {
+            name: meta.name || '(unknown)',
+            version: meta.version || '0.0.0',
+            config: JSON.stringify(meta.config || {}),
+            baseUrl: meta.basePath || dllUrl.substring(0, dllUrl.lastIndexOf('/')).replace('/_framework/', '/'),
+            dependencies,
+            satellites,
+            dllUrl,
+            pdbUrl,
+          });
+
+          loadedBlazorPilets.push(id);
+        } else {
+          // old loading mechanism
+
+          for (const dllUrl of references) {
+            const dllName = dllUrl.substring(dllUrl.lastIndexOf('/') + 1);
+
+            if (dllUrl.endsWith('.dll')) {
+              const entry = loadedDependencies.find((m) => m.name === dllName);
+
+              if (entry) {
+                entry.count++;
+                await entry.promise;
+              } else {
+                const urlWithoutExtension = dllUrl.substring(0, dllUrl.length - 4);
+                const pdbName = `${urlWithoutExtension}.pdb`;
+                const pdbUrl = references.find((m) => m === pdbName);
+                const promise = pdbUrl ? loadResourceWithSymbol(dllUrl, pdbUrl) : loadResource(dllUrl);
+
+                loadedDependencies.push({
+                  name: dllName,
+                  url: dllUrl,
+                  count: 1,
+                  promise,
+                });
+
+                await promise;
+              }
+
+              definedBlazorReferences.push(dllName);
+            }
+          }
+        }
+
+        // inform remaining that this one finished
+        window.dispatchEvent(new CustomEvent('loaded-blazor-pilet', { detail: meta }));
+      };
+
+      depWithPrio.load = () => {
+        if (!result) {
+          result = convert.loader.then(load);
+        }
+
+        return result;
+      };
+      result = !convert.lazy && convert.loader.then(load);
+      dependency = (config) => result || (result = load(config));
+
+      if (prio) {
+        depsWithPrios.push(depWithPrio);
+      }
+    },
+    async releaseBlazorReferences() {
+      const references = definedBlazorReferences.splice(0, definedBlazorReferences.length);
+      const ids = loadedBlazorPilets.splice(0, loadedBlazorPilets.length);
+
+      // old way of loading
+      for (const reference of references) {
+        const entry = loadedDependencies.find((m) => m.name === reference);
+
+        if (--entry.count === 0) {
+          loadedDependencies.splice(loadedDependencies.indexOf(entry), 1);
+          await unloadResource(entry.url);
+        }
+      }
+
+      // new way of loading
+      for (const id of ids) {
+        await unloadBlazorPilet(id);
+      }
     },
   };
 }

package/src/events.ts

@@ -0,0 +1,174 @@
+import type { ExtensionRegistration } from 'piral-core';
+import { isInternalNavigation, performInternalNavigation } from './navigation';
+
+const blazorRootId = 'blazor-root';
+const eventParents: Array<HTMLElement> = [];
+
+const globalEventNames = [
+  'abort',
+  'blur',
+  'change',
+  'error',
+  'focus',
+  'load',
+  'loadend',
+  'loadstart',
+  'mouseenter',
+  'mouseleave',
+  'progress',
+  'reset',
+  'scroll',
+  'submit',
+  'unload',
+  'DOMNodeInsertedIntoDocument',
+  'DOMNodeRemovedFromDocument',
+  'click',
+  'dblclick',
+  'mousedown',
+  'mousemove',
+  'mouseup',
+];
+
+const eventNames = {
+  render: 'render-blazor-extension',
+  navigate: 'navigate-blazor',
+  piral: 'piral-blazor',
+};
+
+function isRooted(target: HTMLElement) {
+  let parent = target.parentElement;
+
+  while (parent) {
+    if (parent.id === blazorRootId) {
+      return true;
+    }
+
+    parent = parent.parentElement;
+  }
+
+  return false;
+}
+
+function findTarget(target: HTMLElement = document.body) {
+  if (eventParents.length === 0) {
+    return target;
+  } else if (target === document.body) {
+    return eventParents[0];
+  } else {
+    return target;
+  }
+}
+
+function dispatchToRoot(event: any) {
+  isInternalNavigation(event) && performInternalNavigation(event);
+
+  // the mutation event cannot be cloned (at least in Webkit-based browsers)
+  if (!(event instanceof MutationEvent) && !event.processed) {
+    const eventClone = new event.constructor(event.type, event);
+    document.getElementById(blazorRootId)?.dispatchEvent(eventClone);
+    // make sure to only process every event once; even though multiple boundaries might be active
+    event.processed = true;
+  }
+}
+
+export function emitRenderEvent(
+  source: HTMLElement,
+  name: string,
+  params: any,
+  sourceRef: any,
+  fallbackComponent: string | null,
+) {
+  const target = findTarget(source);
+  const empty = typeof fallbackComponent === 'string' ? () => {} : undefined;
+  const order =
+    typeof sourceRef !== 'undefined'
+      ? (elements: Array<ExtensionRegistration>) => {
+          const oldItems = elements.map((el, id) => ({
+            id,
+            pilet: el.pilet,
+            defaults: el.defaults ?? {},
+          }));
+          const newItems: Array<{ id: number }> = sourceRef.invokeMethod('Order', oldItems);
+          return newItems.map(({ id }) => elements[id]).filter(Boolean);
+        }
+      : undefined;
+  const eventInit = {
+    bubbles: true,
+    detail: {
+      target,
+      props: {
+        name,
+        params,
+        empty,
+        order,
+      },
+    },
+  };
+  const delayEmit = () =>
+    requestAnimationFrame(() => {
+      if (!isRooted(target)) {
+        target.dispatchEvent(new CustomEvent(eventNames.render, eventInit));
+      } else {
+        delayEmit();
+      }
+    });
+  delayEmit();
+}
+
+export function emitPiralEvent(type: string, args: any) {
+  document.body.dispatchEvent(
+    new CustomEvent(eventNames.piral, {
+      bubbles: false,
+      detail: {
+        type,
+        args,
+      },
+    }),
+  );
+}
+
+export 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 attachEvents(
+  host: HTMLElement,
+  render: (ev: CustomEvent) => void,
+  navigate: (ev: CustomEvent) => void,
+  forward: (ev: CustomEvent) => void,
+) {
+  eventParents.push(host);
+  host.addEventListener(eventNames.render, render, false);
+  host.addEventListener(eventNames.navigate, navigate, false);
+
+  if (eventParents.length === 1) {
+    document.body.addEventListener(eventNames.piral, forward, false);
+  }
+
+  return () => {
+    eventParents.splice(eventParents.indexOf(host), 1);
+    host.removeEventListener(eventNames.render, render, false);
+    host.removeEventListener(eventNames.navigate, navigate, false);
+
+    if (eventParents.length === 0) {
+      document.body.removeEventListener(eventNames.piral, forward, false);
+    }
+  };
+}
+
+export function addGlobalEventListeners(el: HTMLElement) {
+  globalEventNames.forEach((eventName) => el.addEventListener(eventName, dispatchToRoot));
+}
+
+export function removeGlobalEventListeners(el: HTMLElement) {
+  globalEventNames.forEach((eventName) => el.removeEventListener(eventName, dispatchToRoot));
+}

package/src/interop.ts

@@ -0,0 +1,273 @@
+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';
+
+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));
+  };
+
+  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 (opts) =>
+    window.Blazor.start(opts)
+      .then(prepareForStartup)
+      .then(({ capabilities, applyChanges }) => [root, capabilities, applyChanges]);
+}
+
+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 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);
+  });
+}
+
+export function processEvent(type: string, args: any) {
+  return window.DotNet.invokeMethodAsync(coreLib, 'ProcessEvent', type, args);
+}
+
+export function setLogLevel(logLevel: BlazorLogLevel) {
+  return window.DotNet.invokeMethodAsync(coreLib, 'SetLogLevel', logLevel);
+}
+
+export function createElement(moduleName: string, props: any): Promise<string> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'CreateElement', moduleName, props);
+}
+
+export function updateElement(referenceId: string, props: any): Promise<string> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'UpdateElement', referenceId, props);
+}
+
+export function destroyElement(referenceId: string): Promise<string> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'DestroyElement', referenceId);
+}
+
+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 deactivate(moduleName: string, referenceId: string): Promise<void> {
+  return window.DotNet.invokeMethodAsync(coreLib, 'Deactivate', moduleName, referenceId);
+}
+
+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, 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, {
+        emitRenderEvent,
+        emitNavigateEvent,
+        emitPiralEvent,
+      });
+
+      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);
+}