@sitecore/byoc - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

build/api.js

@@ -1,2 +0,26 @@
-import { transformSchema, transformUiSchema, getSchemaProperties } from './schema.js';
+import { transformSchema, transformUiSchema, getSchemaProperties, parseValue } from './schema.js';
+import { toKebabCase } from './utils.js';
+export function normalizeOptions(options, component, defaults) {
+    /**
+     * Usually property schema *is* the options, and ui schema is in `options.ui` property. This function normalizes schemas,
+     * as stores them as `uiSchema` and `schema` properties respectively. The registerComponent() call can be made with previously
+     * normalized properties (e.g. in parent frame), so it has to supports those as well.
+     */
+    const { thumbnail = 'https://feaasstatic.blob.core.windows.net/assets/thumbnails/byoc.svg', name, id = options.name, group = null, ui, isHidden = false, uiSchema: explicitUISchema, schema: explicitSchema, ...schemaOptions } = options;
+    const schemaBase = explicitSchema || schemaOptions || {};
+    const useSchemaBase = explicitUISchema || ui || {};
+    const schema = transformSchema({ description: 'External component', ...schemaBase, type: 'object' }, defaults);
+    const uiSchema = transformUiSchema(useSchemaBase, schema.properties || {});
+    return {
+        component,
+        name,
+        schema,
+        uiSchema,
+        thumbnail,
+        group,
+        isHidden,
+        id,
+        title: (schema === null || schema === void 0 ? void 0 : schema.title) || (schemaOptions === null || schemaOptions === void 0 ? void 0 : schemaOptions.title) || name
+    };
+}
 var registrationCallback;
@@ -15,2 +39,5 @@ // Store registered components in a global variable BYOCComponents
  *
+ * It is possible to generate same component and schema with different defaults, as separate components by altering the
+ * `id` property. This is used for to expand generic component like Form into different specific Form instances.
+ *
  * @param {React.ComponentType}      component                     React component that will be rendered.
@@ -69,35 +96,82 @@ * @param {string}                   options.title                 Component name as presented to the user.
             JSON.stringify(options));
-    /**
-     * Usually property schema *is* the options, and ui schema is in `options.ui` property. This function normalizes schemas,
-     * as stores them as `uiSchema` and `schema` properties respectively. The registerComponent() call can be made with previously
-     * normalized properties (e.g. in parent frame), so it has to supports those as well.
-     */
-    const { thumbnail = 'https://feaasstatic.blob.core.windows.net/assets/thumbnails/byoc.svg', name, group = null, ui, isHidden = false, uiSchema: explicitUISchema, schema: explicitSchema, ...schemaOptions } = options;
-    const schemaBase = explicitSchema || schemaOptions || {};
-    const useSchemaBase = explicitUISchema || ui || {};
-    const schema = transformSchema({ ...schemaBase, type: 'object' }, defaults);
-    const uiSchema = transformUiSchema(useSchemaBase, schema.properties || {});
-    registered[name] = {
-        component,
-        name,
-        schema,
-        uiSchema,
-        thumbnail,
-        group,
-        isHidden,
-        id: name,
-        title: (schema === null || schema === void 0 ? void 0 : schema.title) || name
-    };
+    const normalizedOptions = normalizeOptions(options, component, defaults);
+    registered[normalizedOptions.id] = normalizedOptions;
+    if (component && component.prototype instanceof WebComponent) {
+        BYOCRegistration.register('byoc-' + toKebabCase(options.name), undefined, component);
+    }
     setRegistrationCallback();
 }
 /** Transform properties to proper types and merge them with default values */
-export function getComponentProperties(name, props = {}) {
+export function getComponentProperties(id, props = {}) {
     var _a;
-    const schema = (_a = getComponent(name)) === null || _a === void 0 ? void 0 : _a.schema;
+    const schema = (_a = getComponent(id)) === null || _a === void 0 ? void 0 : _a.schema;
     return schema ? getSchemaProperties(schema, props) : props;
 }
-/** Get a component by its name */
-export function getComponent(name) {
-    return registered[name];
+export function getComponentConfigurablePropertyNames(id) {
+    const definition = getComponent(id);
+    return Object.keys((definition === null || definition === void 0 ? void 0 : definition.schema.properties) || {}).filter((prop) => {
+        var _a, _b;
+        return ((_b = (_a = definition === null || definition === void 0 ? void 0 : definition.uiSchema) === null || _a === void 0 ? void 0 : _a[prop]) === null || _b === void 0 ? void 0 : _b['ui:widget']) != 'hidden';
+    });
 }
+/**
+ * Resolve a component by its id in one of two formats:
+ * - Simple id like `ComponentName` returns the registered component
+ * - Complex id like `ComponentName?prop=value` returns a combination of:
+ *   - `ComponentName` component if registered
+ *   - `ComponentName?prop=value` component if registered
+ *   - Default values provided in query string
+ *
+ * The latter approach allows registering a generic component under simple name, and its overloads
+ * which will be presented as individual components to the user.
+ */
+export function getComponent(id) {
+    if (typeof id != 'string') {
+        if (id && 'schema' in id)
+            return id;
+        throw new Error(`Component name should be a string, got ${typeof id}`);
+    }
+    const [name, query] = id.split('?');
+    var base = registered[name];
+    // Deal with query string
+    if (query) {
+        // if component is registered with query string, merge two component definitions
+        const overload = registered[id];
+        if (!overload && !base)
+            return null;
+        if (overload)
+            base = { ...base, ...overload, component: overload.component || (base === null || base === void 0 ? void 0 : base.component) };
+        // merge query string as default values
+        query.split(/\&/g).forEach((pair) => {
+            var _a, _b, _c;
+            const [k, v] = pair.split('=');
+            const propertyDefinition = ((_a = base.schema.properties) === null || _a === void 0 ? void 0 : _a[k]) || {
+                type: 'string'
+            };
+            // merge in k/v pair as default value
+            base = {
+                ...base,
+                schema: {
+                    ...base.schema,
+                    properties: {
+                        ...base.schema.properties,
+                        [k]: {
+                            ...propertyDefinition,
+                            default: parseValue(decodeURIComponent(v), propertyDefinition.type)
+                        }
+                    }
+                },
+                uiSchema: {
+                    ...base.uiSchema,
+                    // hide preconfigured properties
+                    [k]: {
+                        ...base.uiSchema[k],
+                        'ui:widget': (_c = (_b = base.uiSchema[k]) === null || _b === void 0 ? void 0 : _b['ui:widget']) !== null && _c !== void 0 ? _c : 'hidden'
+                    }
+                }
+            };
+        });
+    }
+    return base;
+}
 export function setRegistrationCallback() {
@@ -126,3 +200,3 @@ clearTimeout(registrationCallback);
 // Shim in case it's required in node.js environment
-var WebComponent = typeof HTMLElement == 'undefined'
+export const WebComponent = typeof HTMLElement == 'undefined'
     ? // @ts-ignore
@@ -136,3 +210,3 @@ typeof windowJSDOM != 'undefined'
 // Register schemas passed as <byoc-registration components=... />
-class BYOCRegistration extends WebComponent {
+export class BYOCRegistration extends WebComponent {
     connectedCallback() {
@@ -147,7 +221,7 @@ try {
     }
-    static register(tagName, win) {
+    static register(tagName, win, component = this) {
         if (win == null)
             win = typeof window != 'undefined' ? window : undefined;
         if (win && !win.customElements.get(tagName)) {
-            win.customElements.define(tagName, this);
+            win.customElements.define(tagName, component);
         }
@@ -154,0 +228,0 @@ }

build/index.js

 export * from './api.js';
 export * from './schema.js';
 export * from './utils.js';
-export * from './render.js';
+export * from './react.js';
 //# sourceMappingURL=index.js.map

dist/node/index.esm.js

@@ -1,2 +0,2 @@
-export*from"./api.js";export*from"./schema.js";export*from"./utils.js";export*from"./render.js";
+var y=(e={})=>Object.keys(e).reduce((t,n)=>Object.assign(t,{[p(n)]:e[n]}),{}),L=(e={})=>Object.keys(e).reduce((t,n)=>Object.assign(t,{[g(n)]:e[n]}),{});function p(e){let t=/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g;return g(e).replace(t,function(n){return"-"+n.toLowerCase()})}function g(e){return e=e.replace(/[-_ ]+/g," "),e=e.charAt(0).toLowerCase()+e.slice(1),e.split(/\s+/).map((t,n)=>n===0?t:t.charAt(0).toUpperCase()+t.slice(1)).join("")}function S(e,t={}){let n=e.properties||{};return{type:"object",...e,properties:Object.keys(n).reduce((o,r)=>Object.assign(o,{[r]:{...n[r],default:t.hasOwnProperty(r)?t[r]:n[r].default,title:n[r].title||p(r).split("-").map(i=>i.charAt(0).toUpperCase()+i.slice(1).toLowerCase()).join(" ")}}),{})}}var j=(e,t)=>{let n={...e};return Object.keys(t).filter(r=>/(integer|number)/.test(t[r].type)).forEach(r=>{var i;!((i=n[r])===null||i===void 0)&&i["ui:widget"]||(n[r]={...n[r],"ui:widget":"updown"})}),n};function x(e,t){switch(t){case"string":return e;case"object":try{return typeof e=="object"&&e!=null?e:JSON.parse(e)}catch(n){return null}case"array":try{return Array.isArray(e)?e:JSON.parse(e)}catch(n){return null}case"number":return parseFloat(e);case"integer":return parseInt(e);case"boolean":return e=="true"||e=="1";default:return e}}function H(e,t){return Object.keys(t).reduce((n,o)=>{let r=t[o],i=g(o),s=e==null?void 0:e.properties[i],c=s==null?void 0:s.type,l=x(r,c);return l!=null&&!o.startsWith("data-attribute")&&!["class","id","contenteditable"].includes(o)?{...n,[i]:l}:n},{})}function _(e,t){return{...J(e),...H(e,t)}}function J(e){return Object.keys(e.properties).reduce((t,n)=>{var o,r;return((o=e.properties[n])===null||o===void 0?void 0:o.default)!=null?{...t,[n]:(r=e.properties[n])===null||r===void 0?void 0:r.default}:t},{})}function W(e,t,n){let{thumbnail:o="https://feaasstatic.blob.core.windows.net/assets/thumbnails/byoc.svg",name:r,id:i=e.name,group:s=null,ui:c,isHidden:l=!1,uiSchema:u,schema:v,...d}=e,D=v||d||{},A=u||c||{},f=S({description:"External component",...D,type:"object"},n),B=j(A,f.properties||{});return{component:t,name:r,schema:f,uiSchema:B,thumbnail:o,group:s,isHidden:l,id:i,title:(f==null?void 0:f.title)||(d==null?void 0:d.title)||r}}var N,m=typeof window!="undefined"&&window.BYOCComponents||{};function k(e,t,n={}){if(!(t!=null&&t.name))throw new Error("Could not register external component. Please make sure you provide a name in the options"+JSON.stringify(t));let o=W(t,e,n);m[o.id]=o,e&&e.prototype instanceof C&&h.register("byoc-"+p(t.name),void 0,e),K()}function P(e,t={}){var n;let o=(n=b(e))===null||n===void 0?void 0:n.schema;return o?_(o,t):t}function z(e){let t=b(e);return Object.keys((t==null?void 0:t.schema.properties)||{}).filter(n=>{var o,r;return((r=(o=t==null?void 0:t.uiSchema)===null||o===void 0?void 0:o[n])===null||r===void 0?void 0:r["ui:widget"])!="hidden"})}function b(e){if(typeof e!="string"){if(e&&"schema"in e)return e;throw new Error(`Component name should be a string, got ${typeof e}`)}let[t,n]=e.split("?");var o=m[t];if(n){let r=m[e];if(!r&&!o)return null;r&&(o={...o,...r,component:r.component||(o==null?void 0:o.component)}),n.split(/\&/g).forEach(i=>{var s,c,l;let[u,v]=i.split("="),d=((s=o.schema.properties)===null||s===void 0?void 0:s[u])||{type:"string"};o={...o,schema:{...o.schema,properties:{...o.schema.properties,[u]:{...d,default:x(decodeURIComponent(v),d.type)}}},uiSchema:{...o.uiSchema,[u]:{...o.uiSchema[u],"ui:widget":(l=(c=o.uiSchema[u])===null||c===void 0?void 0:c["ui:widget"])!==null&&l!==void 0?l:"hidden"}}}})}return o}function K(){clearTimeout(N),N=setTimeout(()=>{var e;typeof window!="undefined"&&((e=window.parent)===null||e===void 0||e.postMessage(JSON.stringify({action:"register-components",data:Object.values(m)}),"*"))},30)}K();typeof window!="undefined"&&window&&(window.BYOCComponents?location.hostname.startsWith("xmc-")||console.error("BYOC code is loaded twice into the bundle. This can lead to unexpected problems and needs to be resolved"):window.BYOCComponents=m);var C=typeof HTMLElement=="undefined"?typeof windowJSDOM!="undefined"?windowJSDOM.HTMLElement:class{}:HTMLElement,h=class extends C{connectedCallback(){try{JSON.parse(String(this.getAttribute("components"))).forEach(t=>{k(null,t)})}catch(t){}}static register(t,n,o=this){n==null&&(n=typeof window!="undefined"?window:void 0),n&&!n.customElements.get(t)&&n.customElements.define(t,o)}};h.register("byoc-registration");import a from"react";var w=new Map,O=null,E=null;function M(e){var t;let{componentName:n,...o}=e,r=(t=b(n))===null||t===void 0?void 0:t.component;if(!w.get(n)){let s=E(()=>Promise.resolve(O),{ssr:!1,loading:()=>a.createElement(T,{...o,componentName:n})});w.set(n,s)}let i=w.get(n);return a.createElement(i,{...e,fallback:r?a.createElement(r,{...e}):null})}function $(e,t){return E=e,O=t,t}function Q(e){if(Object.keys(e).length!=0)return E?M(e):T(e)}function ee(){return a.createElement(a.Fragment,null,a.createElement("byoc-registration",{components:JSON.stringify(Object.values(m)),suppressHydrationWarning:!0}),a.createElement(O,null))}function T(e){let{componentName:t,fallback:n,...o}=e,r=b(t),i=r==null?void 0:r.component;if(!i&&n||!t)return a.createElement("feaas-external",{"data-external-id":t,suppressHydrationWarning:!0,hydrate:"false"},n);var s=null;r&&i&&i.prototype instanceof C&&(s="byoc-"+p(r.id));let c=P(t,o);return delete c.suppressHydrationWarning,a.createElement(a.Fragment,null,a.createElement("feaas-external",{...y(c),"data-external-id":t,suppressHydrationWarning:!0,hydrate:"false"},i==null?null:s?a.createElement(s,y(c)):a.createElement(i,{...c})))}export{h as BYOCRegistration,ee as Bundle,Q as Component,M as NextComponent,T as RegularComponent,C as WebComponent,$ as enableNextClientsideComponents,b as getComponent,z as getComponentConfigurablePropertyNames,P as getComponentProperties,J as getSchemaDefaults,_ as getSchemaProperties,W as normalizeOptions,L as objectKeysToCamelCase,y as objectKeysToKebabCase,H as parseSchemaProperties,x as parseValue,k as registerComponent,m as registered,K as setRegistrationCallback,g as toCamelCase,p as toKebabCase,S as transformSchema,j as transformUiSchema};
 //# sourceMappingURL=index.esm.js.map

package.json

@@ -5,3 +5,3 @@ {
   "description": "Bring-Your-Own-Components runtime to register and retrieve react components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "scripts": {
@@ -34,4 +34,4 @@ "test": "npx vitest",
     "json-schema": "^0.4.0",
-    "react": "^18.2.0"
+    "react": "*"
   }
 }

scripts/build.js

@@ -19,4 +19,5 @@ import path from 'path'
     outfile: path.resolve(__dirname, '../' + output),
-    bundle: false,
+    bundle: true,
     write: false,
+    packages: 'external',
     //external: ['node:crypto', 'node-fetch',  'react', 'react-dom', 'vm'],
@@ -61,3 +62,3 @@ ...step,
           input: path,
-          output: path.replace('build', 'dist/browser').replace('.js', '.cjs'),
+          output: path.replace('build', 'dist/browser').replace('.js', '.esm.js'),
           platform: 'browser',
@@ -64,0 +65,0 @@ format: 'esm'

src/api.ts

@@ -7,4 +7,6 @@ import {
   UISchema,
-  getSchemaProperties
+  getSchemaProperties,
+  parseValue
 } from './schema.js'
+import { toKebabCase } from './utils.js'
 
@@ -68,3 +70,3 @@ /** Normalized BYOC component */
 
-export type ExternalComponentOptions = Omit<Partial<JSONSchema>, 'properties'> & {
+export type ExternalComponentOptions<T> = Omit<Partial<JSONSchema>, 'properties'> & {
   /**  Optional unique identifier of a component (falls back to name if not provided) */
@@ -74,2 +76,4 @@ id?: string
   name: string
+  /** Description of a component */
+  description?: string
   /** Title of a component as it will be presented to the user */
@@ -80,3 +84,3 @@ title?: string
     /** Single property */
-    [propertyName: string]: JSONSchema & {
+    [propertyName in keyof T]?: JSONSchema & {
       /** Type of the property (string, array, object, number, integer, null) */
@@ -86,2 +90,6 @@ type: JSONSchema['type']
       title?: JSONSchema['title']
+      /** Hide property configuration from UI  */
+      isHidden?: boolean
+      /** Default value for a property, should be valid and of correct type */
+      default?: any
     }
@@ -93,2 +101,4 @@ }
   group?: string
+  /** Hide component from the UI */
+  isHidden?: boolean
   /**
@@ -102,6 +112,10 @@ * UI Schema providing customization of form UI.
 
-export type ExternalComponentHandler = React.ComponentType | ((...args: any[]) => Promise<React.ReactElement>) | null
-export function normalizeOptions(
-  options: ExternalComponentOptions,
-  component?: ExternalComponentHandler,
+export type ExternalComponentHandler<P = any> =
+  | React.ComponentType<P>
+  | ((props: P) => Promise<React.ReactElement>)
+  | WebComponent
+  | null
+export function normalizeOptions<P>(
+  options: ExternalComponentOptions<P>,
+  component?: ExternalComponentHandler<P>,
   defaults?: any
@@ -127,3 +141,6 @@ ): ExternalComponent {
   const useSchemaBase = explicitUISchema || ui || {}
-  const schema = transformSchema({ ...schemaBase, type: 'object' }, defaults) as ObjectSchema
+  const schema = transformSchema(
+    { description: 'External component', ...schemaBase, type: 'object' },
+    defaults
+  ) as ObjectSchema
   const uiSchema = transformUiSchema(useSchemaBase, schema.properties || {})
@@ -139,3 +156,3 @@ return {
     id,
-    title: schema?.title || name
+    title: schema?.title || schemaOptions?.title || name
   }
@@ -211,5 +228,5 @@ }
  */
-export function registerComponent(
-  component: ExternalComponentHandler,
-  options: ExternalComponentOptions,
+export function registerComponent<T>(
+  component: ExternalComponentHandler<T>,
+  options: ExternalComponentOptions<T>,
   defaults: any = {}
@@ -224,2 +241,5 @@ ) {
   registered[normalizedOptions.id] = normalizedOptions
+  if (component && component.prototype instanceof WebComponent) {
+    BYOCRegistration.register('byoc-' + toKebabCase(options.name), undefined, component as WebComponent)
+  }
   setRegistrationCallback()
@@ -233,12 +253,72 @@ }
 /** Transform properties to proper types and merge them with default values */
-export function getComponentProperties(name: string, props: Record<string, any> = {}): any {
-  const schema = getComponent(name)?.schema
+export function getComponentProperties(id: string | ExternalComponent, props: Record<string, any> = {}): any {
+  const schema = getComponent(id)?.schema
   return schema ? getSchemaProperties(schema, props) : props
 }
 
-/** Get a component by its name */
-export function getComponent(name: string) {
-  return registered[name]
+export function getComponentConfigurablePropertyNames(id: string | ExternalComponent): string[] {
+  const definition = getComponent(id)
+  return Object.keys(definition?.schema.properties || {}).filter((prop) => {
+    return definition?.uiSchema?.[prop]?.['ui:widget'] != 'hidden'
+  })
 }
 
+/**
+ * Resolve a component by its id in one of two formats:
+ * - Simple id like `ComponentName` returns the registered component
+ * - Complex id like `ComponentName?prop=value` returns a combination of:
+ *   - `ComponentName` component if registered
+ *   - `ComponentName?prop=value` component if registered
+ *   - Default values provided in query string
+ *
+ * The latter approach allows registering a generic component under simple name, and its overloads
+ * which will be presented as individual components to the user.
+ */
+export function getComponent(id: string | ExternalComponent) {
+  if (typeof id != 'string') {
+    if (id && 'schema' in id) return id
+    throw new Error(`Component name should be a string, got ${typeof id}`)
+  }
+  const [name, query] = id.split('?')
+  var base = registered[name]
+  // Deal with query string
+  if (query) {
+    // if component is registered with query string, merge two component definitions
+    const overload = registered[id]
+    if (!overload && !base) return null
+    if (overload) base = { ...base, ...overload, component: overload.component || base?.component }
+
+    // merge query string as default values
+    query.split(/\&/g).forEach((pair) => {
+      const [k, v] = pair.split('=')
+      const propertyDefinition = base.schema.properties?.[k] || {
+        type: 'string'
+      }
+      // merge in k/v pair as default value
+      base = {
+        ...base,
+        schema: {
+          ...base.schema,
+          properties: {
+            ...base.schema.properties,
+            [k]: {
+              ...propertyDefinition,
+              default: parseValue(decodeURIComponent(v), propertyDefinition.type)
+            }
+          }
+        },
+        uiSchema: {
+          ...base.uiSchema,
+          // hide preconfigured properties
+          [k]: {
+            ...base.uiSchema[k],
+            'ui:widget': base.uiSchema[k]?.['ui:widget'] ?? 'hidden'
+          }
+        }
+      }
+    })
+  }
+  return base
+}
+
 export function setRegistrationCallback() {
@@ -272,3 +352,3 @@ clearTimeout(registrationCallback)
 // Shim in case it's required in node.js environment
-var WebComponent =
+export const WebComponent =
   typeof HTMLElement == 'undefined'
@@ -282,4 +362,6 @@ ? // @ts-ignore
 
+export type WebComponent = typeof WebComponent
+
 // Register schemas passed as <byoc-registration components=... />
-class BYOCRegistration extends WebComponent {
+export class BYOCRegistration extends WebComponent {
   connectedCallback() {
@@ -292,6 +374,6 @@ try {
   }
-  static register(tagName: string, win?: Window) {
+  static register(tagName: string, win?: Window, component: WebComponent = this) {
     if (win == null) win = typeof window != 'undefined' ? window : undefined
     if (win && !win.customElements.get(tagName)) {
-      win.customElements.define(tagName, this)
+      win.customElements.define(tagName, component)
     }
@@ -298,0 +380,0 @@ }

types/api.d.ts

@@ -58,11 +58,14 @@ /// <reference types="react" />
  */
-export type ExternalComponentOptions = Omit<Partial<JSONSchema>, 'properties'> & {
-    /**  Name of a component as it will be presented to the user */
+export type ExternalComponentOptions<T> = Omit<Partial<JSONSchema>, 'properties'> & {
+    /**  Optional unique identifier of a component (falls back to name if not provided) */
+    id?: string;
+    /**  Internal name of a component */
     name: string;
-    /** Title of a component as it will be presented in the inputs form */
+    /** Description of a component */
+    description?: string;
+    /** Title of a component as it will be presented to the user */
     title?: string;
     /** Object containing JSONSchema definitions of properties for instances of the component. */
     properties?: {
-        /** Single property */
-        [propertyName: string]: JSONSchema & {
+        [propertyName in keyof T]?: JSONSchema & {
             /** Type of the property (string, array, object, number, integer, null) */
@@ -72,2 +75,6 @@ type: JSONSchema['type'];
             title?: JSONSchema['title'];
+            /** Hide property configuration from UI  */
+            isHidden?: boolean;
+            /** Default value for a property, should be valid and of correct type */
+            default?: any;
         };
@@ -79,2 +86,4 @@ };
     group?: string;
+    /** Hide component from the UI */
+    isHidden?: boolean;
     /**
@@ -87,2 +96,4 @@ * UI Schema providing customization of form UI.
 };
+export type ExternalComponentHandler<P = any> = React.ComponentType<P> | ((props: P) => Promise<React.ReactElement>) | WebComponent | null;
+export declare function normalizeOptions<P>(options: ExternalComponentOptions<P>, component?: ExternalComponentHandler<P>, defaults?: any): ExternalComponent;
 export declare const registered: Record<string, ExternalComponent>;
@@ -99,2 +110,5 @@ /**
  *
+ * It is possible to generate same component and schema with different defaults, as separate components by altering the
+ * `id` property. This is used for to expand generic component like Form into different specific Form instances.
+ *
  * @param {React.ComponentType}      component                     React component that will be rendered.
@@ -149,3 +163,3 @@ * @param {string}                   options.title                 Component name as presented to the user.
  */
-export declare function registerComponent(component: React.ComponentType | ((...args: any[]) => Promise<React.ReactElement>) | null, options: ExternalComponentOptions, defaults?: any): void;
+export declare function registerComponent<T>(component: ExternalComponentHandler<T>, options: ExternalComponentOptions<T>, defaults?: any): void;
 export type RegisteredComponents = {
@@ -155,6 +169,26 @@ [id: string]: ExternalComponent;
 /** Transform properties to proper types and merge them with default values */
-export declare function getComponentProperties(name: string, props?: Record<string, any>): any;
-/** Get a component by its name */
-export declare function getComponent(name: string): ExternalComponent;
+export declare function getComponentProperties(id: string | ExternalComponent, props?: Record<string, any>): any;
+export declare function getComponentConfigurablePropertyNames(id: string | ExternalComponent): string[];
+/**
+ * Resolve a component by its id in one of two formats:
+ * - Simple id like `ComponentName` returns the registered component
+ * - Complex id like `ComponentName?prop=value` returns a combination of:
+ *   - `ComponentName` component if registered
+ *   - `ComponentName?prop=value` component if registered
+ *   - Default values provided in query string
+ *
+ * The latter approach allows registering a generic component under simple name, and its overloads
+ * which will be presented as individual components to the user.
+ */
+export declare function getComponent(id: string | ExternalComponent): ExternalComponent | null;
 export declare function setRegistrationCallback(): void;
+export declare const WebComponent: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+export type WebComponent = typeof WebComponent;
+export declare class BYOCRegistration extends WebComponent {
+    connectedCallback(): void;
+    static register(tagName: string, win?: Window, component?: WebComponent): void;
+}
 declare global {
@@ -161,0 +195,0 @@ namespace JSX {

types/index.d.ts

 export * from './api.js';
 export * from './schema.js';
 export * from './utils.js';
-export * from './render.js';
+export * from './react.js';
 //# sourceMappingURL=index.d.ts.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

569263

increased by54.11%

Number of package files

43

increased by16.22%

Lines of code

2005

increased by28.36%

Worsened metrics

Number of low quality alerts

4

increased by33.33%

Number of medium quality alerts

1

increased byInfinity%

Dependency changes

• Updatedreact@*