vaadin · web-padawan · Dec 26, 2023 · Jan 8, 2024 · Jan 8, 2024 · Jan 8, 2024
diff --git a/dev/kitchen-sink/Row3.tsx b/dev/kitchen-sink/Row3.tsx
@@ -4,6 +4,7 @@ import { ComboBox } from '../../src/ComboBox.js';
 import { ContextMenu } from '../../src/ContextMenu.js';
 import { CookieConsent } from '../../src/CookieConsent.js';
 import { Crud, crudPath } from '../../src/Crud.js';
+import { CrudEditColumn } from '../../src/CrudEditColumn.js';
 import { FormLayout } from '../../src/FormLayout.js';
 import { Item } from '../../src/Item.js';
 import { ListBox } from '../../src/ListBox.js';
@@ -22,6 +23,7 @@ export default function Row3() {
       </ContextMenu>
       <CookieConsent position="bottom-right"></CookieConsent>
       <Crud items={crudData}>
+        <CrudEditColumn></CrudEditColumn>
         <FormLayout slot="form">
           <TextField label="Name" {...crudPath('name')} />
           <ComboBox label="Role" items={Object.values(CrudRole)} {...crudPath('role')} />

diff --git a/dev/pages/Grid.tsx b/dev/pages/Grid.tsx
@@ -1,7 +1,7 @@
 import { Grid, type GridDataProvider } from '../../src/Grid.js';
 import { GridSelectionColumn } from '../../src/GridSelectionColumn.js';
 import { GridTreeColumn } from '../../src/GridTreeColumn.js';
-import { GridColumn, GridColumnElement } from '../../src/GridColumn.js';
+import { GridColumn, type GridColumnElement } from '../../src/GridColumn.js';
 import { Tooltip } from '../../src/Tooltip.js';
 
 type Item = {

diff --git a/scripts/generator.ts b/scripts/generator.ts
@@ -35,6 +35,7 @@ const CREATE_COMPONENT_PATH = '$CREATE_COMPONENT_PATH$';
 const EVENT_MAP = '$EVENT_MAP$';
 const EVENT_MAP_REF_IN_EVENTS = '$EVENT_MAP_REF_IN_EVENTS$';
 const EVENTS_DECLARATION = '$EVENTS_DECLARATION$';
+const PROPERTIES_DECLARATION = '$PROPERTIES_DECLARATION$';
 const LIT_REACT_PATH = '@lit/react';
 const MODULE_PATH = '$MODULE_PATH$';
 
@@ -89,6 +90,10 @@ function isEventListDeclaration(node: Node): node is Identifier {
   return ts.isIdentifier(node) && node.text === EVENTS_DECLARATION;
 }
 
+function isPropertiesListDeclaration(node: Node): node is Identifier {
+  return ts.isIdentifier(node) && node.text === PROPERTIES_DECLARATION;
+}
+
 function isEventMapReferenceInEventsDeclaration(node: Node): node is Identifier {
   return ts.isIdentifier(node) && node.text === EVENT_MAP_REF_IN_EVENTS;
 }
@@ -161,6 +166,29 @@ function createEventList(elementName: string, events: readonly NamedGenericJsCon
   );
 }
 
+function createPropertiesList(
+  elementName: string,
+  properties: readonly NamedGenericJsContribution[] | undefined,
+): Node {
+  return ts.factory.createObjectLiteralExpression([
+    ts.factory.createPropertyAssignment(
+      ts.factory.createIdentifier('name'),
+      ts.factory.createStringLiteral(elementName),
+    ),
+    ts.factory.createPropertyAssignment(
+      ts.factory.createIdentifier('_properties'),
+      ts.factory.createObjectLiteralExpression(
+        properties?.map((property) => {
+          return ts.factory.createPropertyAssignment(
+            ts.factory.createIdentifier(property.name),
+            ts.factory.createStringLiteral(''),
+          );
+        }),
+      ),
+    ),
+  ]);
+}
+
 function removeAllEventRelated(node: Node, hasEvents: boolean, hasKnownEvents: boolean): Node | undefined {
   if (hasEvents && hasKnownEvents) {
     return node;
@@ -260,9 +288,9 @@ function addGenerics(node: Node, elementName: string) {
 
     const asExpression = template(
       `
-${CALL_EXPRESSION} as (
+${CALL_EXPRESSION} as ((
   props: ${COMPONENT_NAME}Props & React.RefAttributes<${COMPONENT_NAME}Element>,
-) => React.ReactElement | null
+) => React.ReactElement | null) & { define: () => Promise<void> }
   `,
       (statements) => (statements[0] as ExpressionStatement).expression,
       [
@@ -302,6 +330,7 @@ function generateReactComponent({ name, js }: SchemaHTMLElement, { packageName,
 
   const hasEvents = !!js?.events && js.events.length > 0;
   const events = js?.events;
+  const properties = js?.properties as readonly NamedGenericJsContribution[] | undefined;
   const eventNameMissingLogger = () => console.error(`[${packageName}]: event name is missing`);
   const namedEvents = pickNamedEvents(events, eventNameMissingLogger);
   const { remove: eventsToRemove, makeUnknown: eventsToBeUnknown } = eventSettings.get(elementName) ?? {};
@@ -311,27 +340,31 @@ function generateReactComponent({ name, js }: SchemaHTMLElement, { packageName,
   const ast = template(
     `
 import type { EventName } from "${LIT_REACT_PATH}";
-import {
+import type {
   ${COMPONENT_NAME} as ${COMPONENT_NAME}Element
-  type ${COMPONENT_NAME}EventMap as _${COMPONENT_NAME}EventMap,
+  ${COMPONENT_NAME}EventMap as _${COMPONENT_NAME}EventMap,
 } from "${MODULE_PATH}";
 import * as React from "react";
-import { createComponent, type WebComponentProps } from "${CREATE_COMPONENT_PATH}";
+import { createComponent, type PolymerConstructor, type WebComponentProps } from "${CREATE_COMPONENT_PATH}";
+
+const importFunc = () => import("${MODULE_PATH}");
 
-export * from "${MODULE_PATH}";
+export type * from "${MODULE_PATH}";
 
-export {
+export type {
   ${COMPONENT_NAME}Element,
 };
 
 export type ${EVENT_MAP};
+const elementClass = ${PROPERTIES_DECLARATION} as unknown as PolymerConstructor<${COMPONENT_NAME}Element>;
 const events = ${EVENTS_DECLARATION} as ${EVENT_MAP_REF_IN_EVENTS};
 export type ${COMPONENT_NAME}Props = WebComponentProps<${COMPONENT_NAME}Element, ${EVENT_MAP}>;
 export const ${COMPONENT_NAME} = createComponent({
-  elementClass: ${COMPONENT_NAME}Element,
+  elementClass,
   events,
   react: React,
-  tagName: ${COMPONENT_TAG}
+  tagName: ${COMPONENT_TAG},
+  importFunc
 });
 `,
     (statements) => statements,
@@ -341,6 +374,7 @@ export const ${COMPONENT_NAME} = createComponent({
         isEventMapDeclaration(node) ? createEventMapDeclaration(node, elementName, namedEvents) : node,
       ),
       transform((node) => (isEventListDeclaration(node) ? createEventList(elementName, namedEvents) : node)),
+      transform((node) => (isPropertiesListDeclaration(node) ? createPropertiesList(elementName, properties) : node)),
       transform((node) => addGenerics(node, elementName)),
       transform((node) => {
         if (!ts.isStringLiteral(node)) {

diff --git a/src/ChartSeries.ts b/src/ChartSeries.ts
@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactElement, RefAttributes } from 'react';
 import {
-  ChartSeriesElement,
+  type ChartSeriesElement,
   ChartSeries as _ChartSeries,
   type ChartSeriesProps as _ChartSeriesProps,
 } from './generated/ChartSeries.js';
@@ -14,6 +14,6 @@ type OmittedChartSeriesHTMLAttributes = Omit<
 
 export type ChartSeriesProps = Partial<Omit<_ChartSeriesProps, keyof OmittedChartSeriesHTMLAttributes>>;
 
-export const ChartSeries = _ChartSeries as (
+export const ChartSeries = _ChartSeries as ((
   props: ChartSeriesProps & RefAttributes<ChartSeriesElement>,
-) => ReactElement | null;
+) => ReactElement | null) & { define: () => Promise<void> };
diff --git a/src/ComboBox.tsx b/src/ComboBox.tsx
@@ -29,8 +29,15 @@ function ComboBox<TItem = ComboBoxDefaultItem>(
   );
 }
 
+function withDefine<T extends typeof ComboBox>(component: T): T & { define: () => Promise<void> } {
+  Object.assign(component, { define: _ComboBox.define });
+  return component as T & { define: () => Promise<void> };
+}
+
 const ForwardedComboBox = forwardRef(ComboBox) as <TItem = ComboBoxDefaultItem>(
   props: ComboBoxProps<TItem> & RefAttributes<ComboBoxElement<TItem>>,
 ) => ReactElement | null;
 
-export { ForwardedComboBox as ComboBox };
+const ComboBoxWithDefine = withDefine(ForwardedComboBox);
+
+export { ComboBoxWithDefine as ComboBox };
diff --git a/src/ComboBoxLight.tsx b/src/ComboBoxLight.tsx
@@ -29,8 +29,15 @@ function ComboBoxLight<TItem = ComboBoxDefaultItem>(
   );
 }
 
+function withDefine<T extends typeof ComboBoxLight>(component: T): T & { define: () => Promise<void> } {
+  Object.assign(component, { define: _ComboBoxLight.define });
+  return component as T & { define: () => Promise<void> };
+}
+
 const ForwardedComboBoxLight = forwardRef(ComboBoxLight) as <TItem = ComboBoxDefaultItem>(
   props: ComboBoxLightProps<TItem> & RefAttributes<ComboBoxLightElement<TItem>>,
 ) => ReactElement | null;
 
-export { ForwardedComboBoxLight as ComboBoxLight };
+const ComboBoxLightWithDefine = withDefine(ForwardedComboBoxLight);
+
+export { ComboBoxLightWithDefine as ComboBoxLight };
diff --git a/src/ConfirmDialog.ts b/src/ConfirmDialog.ts
@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactElement, RefAttributes } from 'react';
 import {
-  ConfirmDialogElement,
+  type ConfirmDialogElement,
   ConfirmDialog as _ConfirmDialog,
   type ConfirmDialogProps as _ConfirmDialogProps,
 } from './generated/ConfirmDialog.js';
@@ -14,6 +14,6 @@ type OmittedConfirmDialogHTMLAttributes = Omit<
 
 export type ConfirmDialogProps = Partial<Omit<_ConfirmDialogProps, keyof OmittedConfirmDialogHTMLAttributes>>;
 
-export const ConfirmDialog = _ConfirmDialog as (
+export const ConfirmDialog = _ConfirmDialog as ((
   props: ConfirmDialogProps & RefAttributes<ConfirmDialogElement>,
-) => ReactElement | null;
+) => ReactElement | null) & { define: () => Promise<void> };
diff --git a/src/ContextMenu.tsx b/src/ContextMenu.tsx
@@ -1,4 +1,11 @@
-import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement } from 'react';
+import {
+  type ComponentType,
+  type ForwardedRef,
+  type ForwardRefExoticComponent,
+  forwardRef,
+  type ReactElement,
+  type RefAttributes,
+} from 'react';
 import {
   ContextMenu as _ContextMenu,
   type ContextMenuRendererContext,
@@ -63,6 +70,12 @@ function ContextMenu(props: ContextMenuProps, ref: ForwardedRef<ContextMenuEleme
   );
 }
 
-const ForwardedContextMenu = forwardRef(ContextMenu);
+const ForwardedContextMenu = forwardRef(ContextMenu) as ForwardRefExoticComponent<
+  ContextMenuProps & RefAttributes<ContextMenuElement>
+> & {
+  define(): Promise<void>;
+};
+
+Object.assign(ForwardedContextMenu, { define: _ContextMenu.define });
 
 export { ForwardedContextMenu as ContextMenu };
diff --git a/src/CookieConsent.ts b/src/CookieConsent.ts
@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactElement, RefAttributes } from 'react';
 import {
-  CookieConsentElement,
+  type CookieConsentElement,
   CookieConsent as _CookieConsent,
   type CookieConsentProps as _CookieConsentProps,
 } from './generated/CookieConsent.js';
@@ -14,6 +14,6 @@ type OmittedCookieConsentHTMLAttributes = Omit<
 
 export type CookieConsentProps = Partial<Omit<_CookieConsentProps, keyof OmittedCookieConsentHTMLAttributes>>;
 
-export const CookieConsent = _CookieConsent as (
+export const CookieConsent = _CookieConsent as ((
   props: CookieConsentProps & RefAttributes<CookieConsentElement>,
-) => ReactElement | null;
+) => ReactElement | null) & { define: () => Promise<void> };
diff --git a/src/DateTimePicker.tsx b/src/DateTimePicker.tsx
@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from 'react';
 import {
   DateTimePicker as _DateTimePicker,
   type DateTimePickerElement,
@@ -8,6 +8,12 @@ import createComponentWithOrderedProps from './utils/createComponentWithOrderedP
 
 export * from './generated/DateTimePicker.js';
 
-export const DateTimePicker = forwardRef(
+const ForwardedDateTimePicker = forwardRef(
   createComponentWithOrderedProps<DateTimePickerProps, DateTimePickerElement>(_DateTimePicker, 'value'),
-);
+) as ForwardRefExoticComponent<DateTimePickerProps & RefAttributes<DateTimePickerElement>> & {
+  define(): Promise<void>;
+};
+
+Object.assign(ForwardedDateTimePicker, { define: _DateTimePicker.define });
+
+export { ForwardedDateTimePicker as DateTimePicker };
diff --git a/src/Dialog.tsx b/src/Dialog.tsx
@@ -1,10 +1,12 @@
 import {
   type ComponentType,
   type ForwardedRef,
+  type ForwardRefExoticComponent,
   type HTMLAttributes,
   forwardRef,
   type ReactElement,
   type ReactNode,
+  type RefAttributes,
 } from 'react';
 import { Dialog as _Dialog, type DialogElement, type DialogProps as _DialogProps } from './generated/Dialog.js';
 import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
@@ -48,6 +50,10 @@ function Dialog(
   );
 }
 
-const ForwardedDialog = forwardRef(Dialog);
+const ForwardedDialog = forwardRef(Dialog) as ForwardRefExoticComponent<DialogProps & RefAttributes<DialogElement>> & {
+  define(): Promise<void>;
+};
+
+Object.assign(ForwardedDialog, { define: _Dialog.define });
 
 export { ForwardedDialog as Dialog };
diff --git a/src/Grid.tsx b/src/Grid.tsx
@@ -13,8 +13,8 @@ import { useModelRenderer } from './renderers/useModelRenderer.js';
 // suggested in React context, see https://github.com/vaadin/react-components/issues/68
 // Fix: use re-exports from raw "src/vaadin-grid.js" as a workaround, until
 // the re-export is removed.
-export * from '@vaadin/grid/src/vaadin-grid.js';
-export { GridElement, type GridEventMap } from './generated/Grid.js';
+export type * from '@vaadin/grid/src/vaadin-grid.js';
+export type { GridElement, GridEventMap } from './generated/Grid.js';
 
 export type GridProps<TItem> = Partial<Omit<_GridProps<TItem>, 'rowDetailsRenderer'>> &
   Readonly<{
@@ -35,8 +35,15 @@ function Grid<TItem = GridDefaultItem>(
   );
 }
 
+function withDefine<T extends typeof Grid>(component: T): T & { define: () => Promise<void> } {
+  Object.assign(component, { define: _Grid.define });
+  return component as T & { define: () => Promise<void> };
+}
+
 const ForwardedGrid = forwardRef(Grid) as <TItem = GridDefaultItem>(
   props: GridProps<TItem> & RefAttributes<GridElement<TItem>>,
 ) => ReactElement | null;
 
-export { ForwardedGrid as Grid };
+const GridWithDefine = withDefine(ForwardedGrid);
+
+export { GridWithDefine as Grid };
diff --git a/src/GridColumn.tsx b/src/GridColumn.tsx
@@ -73,8 +73,15 @@ function GridColumn<TItem = GridDefaultItem>(
   );
 }
 
+function withDefine<T extends typeof GridColumn>(component: T): T & { define: () => Promise<void> } {
+  Object.assign(component, { define: _GridColumn.define });
+  return component as T & { define: () => Promise<void> };
+}
+
 const ForwardedGridColumn = forwardRef(GridColumn) as <TItem = GridDefaultItem>(
   props: GridColumnProps<TItem> & RefAttributes<GridColumnElement<TItem>>,
 ) => ReactElement | null;
 
-export { ForwardedGridColumn as GridColumn };
+const GridColumnWithDefine = withDefine(ForwardedGridColumn);
+
+export { GridColumnWithDefine as GridColumn };
diff --git a/src/GridColumnGroup.tsx b/src/GridColumnGroup.tsx
@@ -50,8 +50,15 @@ function GridColumnGroup(
   );
 }
 
+function withDefine<T extends typeof GridColumnGroup>(component: T): T & { define: () => Promise<void> } {
+  Object.assign(component, { define: _GridColumnGroup.define });
+  return component as T & { define: () => Promise<void> };
+}
+
 const ForwardedGridColumnGroup = forwardRef(GridColumnGroup) as (
   props: GridColumnGroupProps & RefAttributes<GridColumnGroupElement>,
 ) => ReactElement | null;
 
-export { ForwardedGridColumnGroup as GridColumnGroup };
+const GridColumnGroupWithDefine = withDefine(ForwardedGridColumnGroup);
+
+export { GridColumnGroupWithDefine as GridColumnGroup };
diff --git a/src/GridFilterColumn.tsx b/src/GridFilterColumn.tsx
@@ -55,8 +55,15 @@ function GridFilterColumn<TItem = GridDefaultItem>(
   );
 }
 
+function withDefine<T extends typeof GridFilterColumn>(component: T): T & { define: () => Promise<void> } {
+  Object.assign(component, { define: _GridFilterColumn.define });
+  return component as T & { define: () => Promise<void> };
+}
+
 const ForwardedGridFilterColumn = forwardRef(GridFilterColumn) as <TItem = GridDefaultItem>(
   props: GridFilterColumnProps<TItem> & RefAttributes<GridFilterColumnElement<TItem>>,
 ) => ReactElement | null;
 
-export { ForwardedGridFilterColumn as GridFilterColumn };
+const GridFilterColumnWithDefine = withDefine(ForwardedGridFilterColumn);
+
+export { GridFilterColumnWithDefine as GridFilterColumn };
diff --git a/src/GridPro.tsx b/src/GridPro.tsx
@@ -25,8 +25,15 @@ function GridPro<TItem = GridDefaultItem>(
   );
 }
 
+function withDefine<T extends typeof GridPro>(component: T): T & { define: () => Promise<void> } {
+  Object.assign(component, { define: _GridPro.define });
+  return component as T & { define: () => Promise<void> };
+}
+
 const ForwardedGridPro = forwardRef(GridPro) as <TItem = GridDefaultItem>(
   props: GridProProps<TItem> & RefAttributes<GridProElement<TItem>>,
 ) => ReactElement | null;
 
-export { ForwardedGridPro as GridPro };
+const GridProWithDefine = withDefine(ForwardedGridPro);
+
+export { GridProWithDefine as GridPro };