piral-core 0.15.0-beta.4633 → 0.15.0-beta.4672

package/src/modules/element.ts

@@ -1,12 +1,31 @@
 import { ExtensionSlot } from '../components';
-import { tryParseJson, noop, reactifyContent, renderInDom, changeDomPortal } from '../utils';
 import { Disposable, GlobalStateContext } from '../types';
+import {
+  tryParseJson,
+  noop,
+  reactifyContent,
+  renderInDom,
+  changeDomPortal,
+  portalName,
+  extensionName,
+  slotName,
+} from '../utils';
 
 export interface Updatable {
   (newProps: any): void;
 }
 
 if (typeof window !== 'undefined' && 'customElements' in window) {
+  /**
+   * This is a nice abstraction allowing anyone to actually use the extension system
+   * brought by Piral. Not all props of the extension system are actually exposed.
+   *
+   * Usage:
+   *
+   * ```
+   * <piral-extension name="my-ext-name"></piral-extension>
+   * ```
+   */
   class PiralExtension extends HTMLElement {
     dispose: Disposable = noop;
     update: Updatable = noop;
@@ -45,6 +64,8 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
     }
 
     connectedCallback() {
+      this.style.display = 'contents';
+
       if (this.isConnected) {
         this.dispatchEvent(
           new CustomEvent('render-html', {
@@ -80,7 +101,44 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
     }
   }
 
-  customElements.define('piral-extension', PiralExtension);
+  customElements.define(extensionName, PiralExtension);
+
+  /**
+   * This is a boundary to host elements from other frameworks - effectively vanishing
+   * at runtime.
+   *
+   * Usage:
+   *
+   * ```
+   * <piral-portal pid="host-1234"></piral-portal>
+   * ```
+   */
+  class PiralPortal extends HTMLElement {
+    connectedCallback() {
+      this.style.display = 'contents';
+    }
+  }
+
+  customElements.define(portalName, PiralPortal);
+
+  /**
+   * This is a virtual element to aggregate rendering from other frameworks, mostly
+   * used like piral-portal, but without context-hosting capabilities. This would
+   * be used exclusively within a foreign framework, not from Piral to initiate.
+   *
+   * Usage:
+   *
+   * ```
+   * <piral-slot></piral-slot>
+   * ```
+   */
+  class PiralSlot extends HTMLElement {
+    connectedCallback() {
+      this.style.display = 'contents';
+    }
+  }
+
+  customElements.define(slotName, PiralSlot);
 }
 
 export function renderElement(

package/src/types/api.ts

@@ -10,6 +10,7 @@ import type {
   PiletLoader,
   PiletLoadingStrategy,
 } from 'piral-base';
+import type {} from 'piral-debug-utils';
 import type { PiletCustomApi, PiralCustomPageMeta } from './custom';
 import type { AnyComponent } from './components';
 import type { ExtensionParams, ExtensionSlotProps, PiralExtensionSlotMap } from './extension';

package/src/types/navigation.ts

@@ -36,7 +36,7 @@ export interface NavigationLocation {
    * On the initial location, this will be the string default. On all subsequent
    * locations, this string will be a unique identifier.
    */
-  key: string;
+  key?: string;
 }
 
 export interface NavigationListener {
@@ -53,7 +53,7 @@ export interface NavigationUpdate {
 }
 
 export interface NavigationTransition extends NavigationUpdate {
-  retry(): void;
+  retry?(): void;
 }
 
 export interface NavigationApi {
@@ -85,6 +85,10 @@ export interface NavigationApi {
    * @returns The disposable for stopping the block.
    */
   listen(listener: NavigationListener): Disposable;
+  /**
+   * Gets the current path.
+   */
+  path: string;
   /**
    * The original router behind the navigation.
    */

package/src/utils/extension.test.tsx

@@ -16,6 +16,6 @@ describe('Util Extension.', () => {
     container.innerHTML = `<div>FOO<</div>`;
     const result = reactifyContent(container.childNodes) as React.ReactElement;
     const node = render(result);
-    expect(node.container.querySelectorAll('slot').length).toBe(1);
+    expect(node.container.querySelectorAll('piral-slot').length).toBe(1);
   });
 });

package/src/utils/extension.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ExtensionComponentProps, WrappedComponent } from '../types';
+import type {} from 'piral-debug-utils';
+import type { ExtensionComponentProps, WrappedComponent } from '../types';
 
 function removeAll(nodes: Array<ChildNode>) {
   nodes.forEach((node) => node.remove());
@@ -18,7 +19,7 @@ const SlotCarrier: React.FC<SlotCarrierProps> = ({ nodes }) => {
   }, [nodes]);
 
   if (nodes.length) {
-    return <slot ref={host} />;
+    return <piral-slot ref={host} />;
   }
 
   return null;

package/src/utils/foreign.test.ts

@@ -14,8 +14,8 @@ describe('Util Foreign.', () => {
     const context = {
       updatePortal: jest.fn(),
     } as any;
-    const portalId = 'data-portal-id';
-    const element = document.createElement('div') as HTMLDivElement;
+    const portalId = 'pid';
+    const element = document.createElement('piral-portal') as HTMLElement;
     element.setAttribute(portalId, '100');
 
     const result = changeDomPortal(portalId, current, context, element, DefaultLoadingIndicator, {});
@@ -43,8 +43,8 @@ describe('Util Foreign.', () => {
     const context = {
       showPortal: jest.fn(),
     } as any;
-    const portalId = 'data-portal-id';
-    const element = document.createElement('div') as HTMLDivElement;
+    const portalId = 'pid';
+    const element = document.createElement('piral-portal') as HTMLElement;
     element.setAttribute(portalId, '100');
     var [result] = renderInDom(context, element, DefaultLoadingIndicator, {});
     expect(result).toBe('100');
@@ -54,7 +54,7 @@ describe('Util Foreign.', () => {
     const context = {
       showPortal: jest.fn(),
     } as any;
-    const element = document.createElement('div') as HTMLDivElement;
+    const element = document.createElement('piral-portal') as HTMLElement;
     var [result] = renderInDom(context, element, DefaultLoadingIndicator, {});
     expect(result).toBe('root');
   });

package/src/utils/foreign.ts

@@ -2,6 +2,10 @@ import { createElement, ComponentType, ReactPortal } from 'react';
 import { createPortal } from 'react-dom';
 import { GlobalStateContext, ForeignComponent } from '../types';
 
+export const extensionName = 'piral-extension';
+export const portalName = 'piral-portal';
+export const slotName = 'piral-slot';
+
 export function attachDomPortal<TProps>(
   id: string,
   context: GlobalStateContext,
@@ -44,11 +48,11 @@ export function renderInDom<TProps>(
   component: ComponentType<TProps>,
   props: TProps,
 ) {
-  const portalId = 'data-portal-id';
+  const portalId = 'pid';
   let parent: Node = element;
 
   while (parent) {
-    if (parent instanceof Element && parent.hasAttribute(portalId)) {
+    if (parent instanceof Element && parent.localName === portalName && parent.hasAttribute(portalId)) {
       const id = parent.getAttribute(portalId);
       return attachDomPortal(id, context, element, component, props);
     }