wip BasePart

jest.config.ts

@@ -11,6 +11,7 @@ export default {
 		`!src/${AND_BELOW}/${DECLARATION_FILES}`
 	],
 	// coverageProvider: 'v8',
+	silent: true, // All below console.error
 	testEnvironment: 'jsdom',
 	testMatch: [
 		`<rootDir>/test/${AND_BELOW}/${TEST_FILES}`,

package.json

@@ -23,6 +23,7 @@
     "del-cli": "^6.0.0",
     "diffable-html": "^5.0.0",
     "domhandler": "^5.0.3",
+    "esbuild-plugin-globals": "^0.2.0",
     "glob": "^11.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -68,6 +69,8 @@
   "name": "@enonic/react-components",
   "peerDependencies": {
     "@enonic-types/core": "^7",
+    "@enonic-types/lib-portal": "^7",
+    "@enonic-types/lib-schema": "^7",
     "prop-types": "*",
     "react": "*"
   },
@@ -96,6 +99,7 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@enonic/js-utils": "^1.8.0",
     "domelementtype": "^2.3.0",
     "html-react-parser": "^5.1.10",
     "uri-js": "^4.4.1"

src/ComponentRegistry.tsx

@@ -1,48 +1,64 @@
-import type {ComponentRegistry as ComponentRegistryInterface} from './types';
+import type {
+	ComponentDefinition,
+	ComponentDefinitionParams,
+	ComponentDictionary,
+	ComponentRegistry as ComponentRegistryInterface
+} from './types';
 
 // import {XP_COMPONENT_TYPE} from './constants';
 
 export class ComponentRegistry implements ComponentRegistryInterface {
 
-    // private pages: ComponentDictionary = {};
-    // private parts: ComponentDictionary = {};
-    // private layouts: ComponentDictionary = {};
-    private _macros: {[macroName: string]: React.FunctionComponent<any>} = {};
+    private _pages: ComponentDictionary = {};
+    private _parts: ComponentDictionary = {};
+    private _layouts: ComponentDictionary = {};
+    private _macros: ComponentDictionary = {};
 
-    public addMacro<PROPS = {}>(name: string, component: React.FunctionComponent<PROPS>): React.FunctionComponent<PROPS> {
-		this._macros[name] = component;
-		return this._macros[name];
+    public addMacro<PROPS = {}>(name: string, obj: ComponentDefinitionParams<PROPS>): void {
+		this._macros[name] = obj as ComponentDefinition<{}>;
     }
 
-    // public addLayout(name: string, obj: ComponentDefinitionParams): void {
-    //     return ComponentRegistry.addType('layout', name, obj);
-    // }
+    public addLayout<PROPS = {}>(name: string, obj: ComponentDefinitionParams<PROPS>): void {
+        this._layouts[name] = obj as ComponentDefinition<{}>;
+    }
 
-    // public addPage(name: string, obj: ComponentDefinitionParams): void {
-    //     return ComponentRegistry.addType('page', name, obj);
-    // }
+    public addPage<PROPS = {}>(name: string, obj: ComponentDefinitionParams<PROPS>): void {
+        this._pages[name] = obj as ComponentDefinition<{}>;
+    }
 
-    // public addPart(name: string, obj: ComponentDefinitionParams): void {
-    //     return ComponentRegistry.addType('part', name, obj);
-    // }
+    public addPart<PROPS = {}>(name: string, obj: ComponentDefinitionParams<PROPS>): void {
+        this._parts[name] = obj as ComponentDefinition<{}>;
+    }
 
-    public getMacro<PROPS = {}>(name: string): React.FunctionComponent<PROPS> | undefined {
-		return this._macros[name];
+	public getLayout<PROPS = {}>(name: string): ComponentDefinition<PROPS> | undefined {
+		return this._layouts[name] as ComponentDefinition<PROPS>;
     }
 
-    // public getPage(name: string): ComponentDefinition | undefined {
-    //     return ComponentRegistry.getType('page', name);
-    // }
+    public getMacro<PROPS = {}>(name: string): ComponentDefinition<PROPS> | undefined {
+		return this._macros[name] as ComponentDefinition<PROPS>;
+    }
 
-    // public getPart(name: string): ComponentDefinition | undefined {
-    //     return ComponentRegistry.getType('part', name);
-    // }
+    public getPage<PROPS = {}>(name: string): ComponentDefinition<PROPS> | undefined {
+		return this._pages[name] as ComponentDefinition<PROPS>;
+    }
 
-    // public getLayout(name: string): ComponentDefinition | undefined {
-    //     return ComponentRegistry.getType('layout', name);
-    // }
+    public getPart<PROPS = {}>(name: string): ComponentDefinition<PROPS> | undefined {
+        return this._parts[name] as ComponentDefinition<PROPS>;
+    }
 
 	public hasMacro(name: string): boolean {
 		return this._macros[name] !== undefined;
 	}
+
+	public hasLayout(name: string): boolean {
+		return this._layouts[name] !== undefined;
+	}
+
+	public hasPage(name: string): boolean {
+		return this._pages[name] !== undefined;
+	}
+
+	public hasPart(name: string): boolean {
+		return this._parts[name] !== undefined;
+	}
 }

src/ComponentRegistry/BasePart.tsx

@@ -0,0 +1,33 @@
+import type {PartComponent} from '@enonic-types/core';
+
+import type {ComponentRegistry} from '../types';
+
+
+export function BasePart({
+	component,
+	componentRegistry
+}: {
+	component: PartComponent
+	componentRegistry: ComponentRegistry
+}) {
+	// console.debug('BasePart component', component);
+
+	const {
+		config: props,
+		descriptor
+	} = component;
+	// console.debug('BasePart descriptor', descriptor);
+
+	const partDefinition = componentRegistry.getPart(descriptor);
+	if (!partDefinition) {
+		throw new Error(`Part definition not found for descriptor: ${descriptor}`);
+		// TODO return ErrorBoundary instead of throwing.
+	}
+	const {View} = partDefinition;
+	if (!View) {
+		throw new Error(`Part view not found for descriptor: ${descriptor}`);
+		// TODO return ErrorBoundary instead of throwing.
+	}
+	props.componentRegistry = componentRegistry;
+	return (<View {...props}/>);
+}

src/RichText/replaceMacro.tsx

@@ -43,8 +43,9 @@ export function replaceMacro<RestProps = Record<string, unknown>>({
     const config = configs[name];
 
 	if (componentRegistry) {
-		const MacroComponent = componentRegistry.getMacro(name);
-		if (MacroComponent) {
+		const MacroComponentDefinition = componentRegistry.getMacro(name);
+		if (MacroComponentDefinition) {
+			const MacroComponent = MacroComponentDefinition.View;
 			return (
 				<MacroComponent {...config}/>
 			);

src/constants.ts

@@ -5,3 +5,11 @@ export const MACRO_TAG = 'editor-macro';
 export const IMG_ATTR = 'data-image-ref';
 export const LINK_ATTR = 'data-link-ref';
 export const MACRO_ATTR = 'data-macro-ref';
+
+export enum XP_COMPONENT_TYPE {
+	FRAGMENT = 'fragment',
+    LAYOUT = 'layout',
+    PAGE = 'page',
+    PART = 'part',
+    TEXT = 'text',
+}

src/index.ts

@@ -36,6 +36,11 @@ export {
 	Regions,
 };
 export { ComponentRegistry } from './ComponentRegistry';
+
+// Exporting processComponents here is a bad idea, because it's should be used in Enonic XP nashorn.
+// Nashorn throws "Invalid hex digit" because entities contains Uint16Array.
+// export { processComponents } from './processComponents';
+
 export { replaceMacroComments } from './replaceMacroComments';
 export { RichText } from './RichText';
 export { cssToReactStyle } from './RichText/cssToReactStyle';