piral-core 0.14.8-beta.3500 → 0.14.8-beta.3511

package/src/types/instance.ts

@@ -1,11 +1,12 @@
 import type { PiletApi, PiletApiCreator, LoadPiletsOptions, EventEmitter } from 'piral-base';
 import type { GlobalStateContext } from './state';
 import type { LayoutBreakpoints } from './layout';
+import { PiralConfiguration } from './config';
 
 /**
  * The props of the Piral component.
  */
-export interface PortalProps {
+export interface PiralProps {
   /**
    * The specific Piral instance to be used.
    */
@@ -17,10 +18,25 @@ export interface PortalProps {
 }
 
 /**
- * The PiralInstance component, which is an event emitter containing the React
- * functional component as well as some other utilities and helpers.
+ * The options for creating a new PiralInstance object.
+ */
+export interface PiralInstanceOptions extends PiralConfiguration {
+  /**
+   * Defines the id of this instance. Used in case of multiple instances.
+   */
+  id?: string;
+}
+
+/**
+ * The PiralInstance object, which is an event emitter with some other
+ * utilities and helper. This object is the source for the React
+ * functional component (`Piral`).
  */
 export interface PiralInstance extends EventEmitter {
+  /**
+   * The id of the Piral instance.
+   */
+  id: string;
   /**
    * The global state context instance.
    */

package/src/utils/extension.tsx

@@ -1,6 +1,47 @@
 import * as React from 'react';
 import { ExtensionComponentProps, WrappedComponent } from '../types';
 
+function removeAll(nodes: Array<ChildNode>) {
+  nodes.forEach((node) => node.remove());
+}
+
+interface SlotCarrierProps {
+  nodes: Array<ChildNode>;
+}
+
+const SlotCarrier: React.FC<SlotCarrierProps> = ({ nodes }) => {
+  const host = React.useRef<HTMLSlotElement>();
+
+  React.useEffect(() => {
+    host.current?.append(...nodes);
+    return () => removeAll(nodes);
+  }, [nodes]);
+
+  if (nodes.length) {
+    return <slot ref={host} />;
+  }
+
+  return null;
+};
+
+/**
+ * Transforms the given component to an extension component.
+ * @param Component The component to transform.
+ * @returns The extension component (receiving its props via params).
+ */
 export function toExtension<T>(Component: React.ComponentType<T>): WrappedComponent<ExtensionComponentProps<T>> {
   return (props) => <Component {...props.params} />;
 }
+
+/**
+ * Reactifies the list of child nodes to a React Node by removing the
+ * nodes from the DOM and carrying it in a React Node, where it would be
+ * attached at a slot.
+ * @param childNodes The child nodes to reactify.
+ * @returns The React Node.
+ */
+export function reactifyContent(childNodes: NodeListOf<ChildNode>): React.ReactNode {
+  const nodes: Array<ChildNode> = Array.prototype.filter.call(childNodes, Boolean);
+  removeAll(nodes);
+  return <SlotCarrier nodes={nodes} />;
+}