piral-blazor 1.0.0-pre.2296 → 1.0.1-beta.5640

package/src/dependencies.ts

@@ -1,24 +1,132 @@
-import { addReference } from './interop';
+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));
+}