Use dynamic imports for web components

vaadin · web-padawan · Dec 26, 2023 · Jan 8, 2024 · Jan 8, 2024 · Jan 8, 2024
commit a327c2f192eb02e9657444f1b8a1d5a3e9f6ba3f
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;
@@ -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,29 @@ 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}";
 
-export * from "${MODULE_PATH}";
+const importFunc = () => import("${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 +372,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';

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';

diff --git a/src/ContextMenu.tsx b/src/ContextMenu.tsx
@@ -1,10 +1,9 @@
 import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement } from 'react';
+import type { ContextMenuItem as _ContextMenuItem, ContextMenuRendererContext } from '@vaadin/context-menu';
 import {
   ContextMenu as _ContextMenu,
-  type ContextMenuRendererContext,
   type ContextMenuElement,
   type ContextMenuProps as _ContextMenuProps,
-  type ContextMenuItem as _ContextMenuItem,
 } from './generated/ContextMenu.js';
 import { type ReactContextRendererProps, useContextRenderer } from './renderers/useContextRenderer.js';
 import { getOriginalItem, mapItemsWithComponents } from './utils/mapItemsWithComponents.js';

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';

diff --git a/src/Grid.tsx b/src/Grid.tsx
@@ -1,10 +1,6 @@
 import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
-import {
-  Grid as _Grid,
-  type GridDefaultItem,
-  type GridElement,
-  type GridProps as _GridProps,
-} from './generated/Grid.js';
+import type { GridDefaultItem } from '@vaadin/grid';
+import { Grid as _Grid, type GridElement, type GridProps as _GridProps } from './generated/Grid.js';
 import type { GridRowDetailsReactRendererProps } from './renderers/grid.js';
 import { useModelRenderer } from './renderers/useModelRenderer.js';
 
@@ -14,7 +10,7 @@ import { useModelRenderer } from './renderers/useModelRenderer.js';
 // 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 { GridElement, GridEventMap } from './generated/Grid.js';
 
 export type GridProps<TItem> = Partial<Omit<_GridProps<TItem>, 'rowDetailsRenderer'>> &
   Readonly<{

diff --git a/src/GridColumn.tsx b/src/GridColumn.tsx
@@ -6,7 +6,7 @@ import {
   type ReactNode,
   type RefAttributes,
 } from 'react';
-import type { GridDefaultItem } from './generated/Grid.js';
+import type { GridDefaultItem } from '@vaadin/grid';
 import {
   GridColumn as _GridColumn,
   type GridColumnElement,

diff --git a/src/GridFilterColumn.tsx b/src/GridFilterColumn.tsx
@@ -6,7 +6,7 @@ import {
   type ReactNode,
   type RefAttributes,
 } from 'react';
-import type { GridDefaultItem } from './generated/Grid.js';
+import type { GridDefaultItem } from '@vaadin/grid';
 import {
   GridFilterColumn as _GridFilterColumn,
   type GridFilterColumnElement,

diff --git a/src/GridPro.tsx b/src/GridPro.tsx
@@ -1,5 +1,5 @@
 import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
-import type { GridDefaultItem } from './generated/Grid.js';
+import type { GridDefaultItem } from '@vaadin/grid';
 import { GridPro as _GridPro, type GridProElement, type GridProProps as _GridProProps } from './generated/GridPro.js';
 import type { GridRowDetailsReactRendererProps } from './renderers/grid.js';
 import { useModelRenderer } from './renderers/useModelRenderer.js';

diff --git a/src/GridSelectionColumn.tsx b/src/GridSelectionColumn.tsx
@@ -6,7 +6,7 @@ import {
   type ReactNode,
   type RefAttributes,
 } from 'react';
-import type { GridDefaultItem } from './generated/Grid.js';
+import type { GridDefaultItem } from '@vaadin/grid';
 import {
   GridSelectionColumn as _GridSelectionColumn,
   type GridSelectionColumnElement,

diff --git a/src/GridSortColumn.tsx b/src/GridSortColumn.tsx
@@ -6,7 +6,7 @@ import {
   type ReactNode,
   type RefAttributes,
 } from 'react';
-import type { GridDefaultItem } from './generated/Grid.js';
+import type { GridDefaultItem } from '@vaadin/grid';
 import {
   GridSortColumn as _GridSortColumn,
   type GridSortColumnElement,

diff --git a/src/GridTreeColumn.tsx b/src/GridTreeColumn.tsx
@@ -6,9 +6,9 @@ import {
   type ReactNode,
   type RefAttributes,
 } from 'react';
-import type { GridDefaultItem } from './generated/Grid.js';
+import type { GridDefaultItem } from '@vaadin/grid';
 import {
-  GridTreeColumnElement,
+  type GridTreeColumnElement,
   GridTreeColumn as _GridTreeColumn,
   type GridTreeColumnProps as _GridTreeColumnProps,
 } from './generated/GridTreeColumn.js';

diff --git a/src/LoginOverlay.ts b/src/LoginOverlay.ts
@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactElement, RefAttributes } from 'react';
 import {
-  LoginOverlayElement,
+  type LoginOverlayElement,
   LoginOverlay as _LoginOverlay,
   type LoginOverlayProps as _LoginOverlayProps,
 } from './generated/LoginOverlay.js';

diff --git a/src/MenuBar.tsx b/src/MenuBar.tsx
@@ -1,12 +1,7 @@
 import { type ForwardedRef, forwardRef, type ReactElement } from 'react';
-import {
-  MenuBar as _MenuBar,
-  type MenuBarElement,
-  type MenuBarProps as _MenuBarProps,
-  type MenuBarItem as _MenuBarItem,
-  type SubMenuItem as _SubMenuItem,
-} from './generated/MenuBar.js';
+import { MenuBar as _MenuBar, type MenuBarElement, type MenuBarProps as _MenuBarProps } from './generated/MenuBar.js';
 import { getOriginalItem, mapItemsWithComponents } from './utils/mapItemsWithComponents.js';
+import type { MenuBarItem as _MenuBarItem, SubMenuItem as _SubMenuItem } from '@vaadin/menu-bar';
 
 export * from './generated/MenuBar.js';
 

diff --git a/src/Notification.tsx b/src/Notification.tsx
@@ -10,12 +10,12 @@ import {
 } from 'react';
 import {
   Notification as _Notification,
-  NotificationElement,
+  type NotificationElement,
   type NotificationProps as _NotificationProps,
-  type ShowOptions,
 } from './generated/Notification.js';
 import { useSimpleOrChildrenRenderer } from './renderers/useSimpleOrChildrenRenderer.js';
 import type { ReactSimpleRendererProps } from './renderers/useSimpleRenderer.js';
+import type { ShowOptions } from '@vaadin/notification';
 
 export * from './generated/Notification.js';
 
@@ -47,11 +47,22 @@ function Notification(
   );
 }
 
-export type NotificationFunction = ForwardRefExoticComponent<NotificationProps & RefAttributes<NotificationElement>> & {
-  show(contents: string, options?: ShowOptions): NotificationElement;
+type NotificationShow = {
+  show(contents: string, options?: ShowOptions): Promise<NotificationElement>;
 };
 
+export type NotificationFunction = ForwardRefExoticComponent<NotificationProps & RefAttributes<NotificationElement>> &
+  NotificationShow;
+
 const ForwardedNotification = forwardRef(Notification) as NotificationFunction;
-ForwardedNotification.show = NotificationElement.show;
+
+ForwardedNotification.show = function (contents: string, options?: ShowOptions) {
+  return new Promise((resolve) => {
+    customElements.whenDefined('vaadin-notification').then(() => {
+      const Notification = customElements.get('vaadin-notification') as unknown as NotificationShow;
+      resolve(Notification.show(contents, options));
+    });
+  });
+};
 
 export { ForwardedNotification as Notification };
diff --git a/src/VirtualList.tsx b/src/VirtualList.tsx
@@ -1,12 +1,11 @@
 import { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';
 import {
   VirtualList as _VirtualList,
-  type VirtualListDefaultItem,
   type VirtualListElement,
-  type VirtualListItemModel,
   type VirtualListProps as _VirtualListProps,
 } from './generated/VirtualList.js';
 import { type ReactModelRendererProps, useModelRenderer } from './renderers/useModelRenderer.js';
+import type { VirtualListDefaultItem, VirtualListItemModel } from '@vaadin/virtual-list';
 
 export * from './generated/VirtualList.js';
 

diff --git a/src/utils/createComponent.ts b/src/utils/createComponent.ts
@@ -1,6 +1,6 @@
 import { createComponent as _createComponent, type EventName } from '@lit/react';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import type React from 'react';
+import React from 'react';
 import type { RefAttributes } from 'react';
 
 declare const __VERSION__: string;
@@ -31,13 +31,14 @@ window.Vaadin.registrations.push({
 // TODO: Remove when types from @lit-labs/react are exported
 export type EventNames = Record<string, EventName | string>;
 type Constructor<T> = { new (): T; name: string };
-type PolymerConstructor<T> = Constructor<T> & { _properties: Record<string, unknown> };
+export type PolymerConstructor<T> = Constructor<T> & { _properties: Record<string, unknown> };
 type Options<I extends HTMLElement, E extends EventNames = {}> = Readonly<{
   displayName?: string;
   elementClass: Constructor<I> | PolymerConstructor<I>;
   events?: E;
   react: typeof window.React;
   tagName: string;
+  importFunc?: Function;
 }>;
 
 // A map of expected event listener types based on EventNames.
@@ -86,9 +87,9 @@ export function createComponent<I extends HTMLElement, E extends EventNames = {}
 ): (props: WebComponentProps<I, E> & RefAttributes<I>) => React.ReactElement | null;
 
 export function createComponent<I extends HTMLElement, E extends EventNames = {}>(options: Options<I, E>): any {
-  const { elementClass } = options;
+  const { elementClass, importFunc } = options;
 
-  return _createComponent(
+  const Component = _createComponent(
     '_properties' in elementClass
       ? {
           ...options,
@@ -105,4 +106,20 @@ export function createComponent<I extends HTMLElement, E extends EventNames = {}
         }
       : options,
   );
+
+  const originalRenderFunc = (Component as any).render;
+
+  (Component as any).render = (props: any, ...rest: any) => {
+    React.useEffect(() => {
+      // Run dynamic import for the component
+      if (importFunc && !('__called' in importFunc)) {
+        (importFunc as any).__called = true;
+        importFunc();
+      }
+    }, []);
+
+    return originalRenderFunc(props, ...rest);
+  };
+
+  return Component;
 }
diff --git a/test/Grid.spec.tsx b/test/Grid.spec.tsx
@@ -2,7 +2,7 @@ import { expect, use as useChaiPlugin } from '@esm-bundle/chai';
 import chaiDom from 'chai-dom';
 import { cleanup, render } from '@testing-library/react/pure.js';
 import { Grid, type GridDataProvider } from '../src/Grid.js';
-import { GridColumn, GridColumnElement } from '../src/GridColumn.js';
+import { GridColumn, type GridColumnElement } from '../src/GridColumn.js';
 import { GridFilterColumn } from '../src/GridFilterColumn.js';
 import { GridProEditColumn } from '../src/GridProEditColumn.js';
 import { GridSelectionColumn } from '../src/GridSelectionColumn.js';

diff --git a/test/Notification.spec.tsx b/test/Notification.spec.tsx
@@ -48,8 +48,8 @@ describe('Notification', () => {
   });
 
   describe('show()', () => {
-    it('should render correctly', () => {
-      ref.current = Notification.show('FooBar');
+    it('should render correctly', async () => {
+      ref.current = await Notification.show('FooBar');
       assert();
     });
   });

diff --git a/test/Select.spec.tsx b/test/Select.spec.tsx
@@ -6,7 +6,7 @@ import chaiDom from 'chai-dom';
 import type { ReactElement } from 'react';
 import { ListBox } from '../src/ListBox.js';
 import { Item } from '../src/Item.js';
-import { Select, SelectElement } from '../src/Select.js';
+import { Select, type SelectElement } from '../src/Select.js';
 import { findByQuerySelector } from './utils/findByQuerySelector.js';
 
 useChaiPlugin(chaiDom);

diff --git a/test/SideNav.spec.tsx b/test/SideNav.spec.tsx
@@ -1,7 +1,7 @@
 import { expect, use as useChaiPlugin } from '@esm-bundle/chai';
 import { render } from '@testing-library/react';
 import chaiDom from 'chai-dom';
-import { SideNav, SideNavElement } from '../src/SideNav.js';
+import { SideNav, type SideNavElement } from '../src/SideNav.js';
 import { findByQuerySelector } from './utils/findByQuerySelector.js';
 
 useChaiPlugin(chaiDom);