create-stencil-react-components.ts

import type { ComponentCompilerMeta } from '@stencil/core/internal';
import { Project, VariableDeclarationKind } from 'ts-morph';
import { eventListenerName, kebabToPascalCase, normalizeTypeString } from './utils/string-utils.js';
import type { RenderToStringOptions } from './runtime/ssr.js';

interface ReactEvent {
  originalName: string;
  name: string;
  type: string;
}

export const createStencilReactComponents = ({
  components,
  stencilPackageName,
  customElementsDir,
  hydrateModule,
  clientModule,
  serializeShadowRoot,
  transformTag,
}: {
  components: ComponentCompilerMeta[];
  stencilPackageName: string;
  customElementsDir: string;
  hydrateModule?: string;
  clientModule?: string;
  serializeShadowRoot?: RenderToStringOptions['serializeShadowRoot'];
  transformTag?: boolean;
}) => {
  const project = new Project({ useInMemoryFileSystem: true });

  /**
   * automatically attach the `use client` directive if we are not generating
   * server side rendering components.
   */
  const useClientDirective = `'use client';\n\n`;
  const autogeneratedComment = `/**
 * This file was automatically generated by the Stencil React Output Target.
 * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
 */\n\n`;

  const disableEslint = `/* eslint-disable */\n`;
  const getTagTransformerImport = transformTag ? `import { getTagTransformer } from './tag-transformer.js';\n` : '';
  const createComponentImport = hydrateModule
    ? [
        getTagTransformerImport,
        `import { createComponent, type SerializeShadowRootOptions, type HydrateModule, type ReactWebComponent } from '@stencil/react-output-target/ssr';`,
      ]
        .filter(Boolean)
        .join('\n')
    : `import { createComponent } from '@stencil/react-output-target/runtime';`;
  // transformTag should be imported from tag-transformer for both client and server
  const transformTagImport = transformTag ? `import { transformTag } from './tag-transformer.js';\n` : '';
  const sourceFile = project.createSourceFile(
    'component.ts',
    `${useClientDirective}${autogeneratedComment}${disableEslint}
import React from 'react';
${createComponentImport}
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
${transformTagImport}
import type { Components } from "${stencilPackageName}/${customElementsDir}";
  `
  );

  /**
   * Add the `clientComponents` import if hydrateModule is provided.
   * This import needs a @ts-ignore comment, which will be added after organizeImports().
   */
  if (hydrateModule && clientModule) {
    sourceFile.addImportDeclaration({
      moduleSpecifier: clientModule,
      namespaceImport: 'clientComponents',
    });
  }

  /**
   * Add the `serializeShadowRoot` variable to the file if the hydrateModule is provided.
   */
  if (hydrateModule) {
    sourceFile.addVariableStatement({
      isExported: true,
      declarationKind: VariableDeclarationKind.Const,
      declarations: [
        {
          name: 'serializeShadowRoot',
          type: 'SerializeShadowRootOptions',
          initializer: serializeShadowRoot
            ? JSON.stringify(serializeShadowRoot)
            : '{ default: "declarative-shadow-dom" }',
        },
      ],
    });
  }

  for (const component of components) {
    const tagName = component.tagName;
    const reactTagName = kebabToPascalCase(tagName);
    const componentElement = `${reactTagName}Element`;
    const componentCustomEvent = `${reactTagName}CustomEvent`;

    sourceFile.addImportDeclaration({
      moduleSpecifier: `${stencilPackageName}/${customElementsDir}/${tagName}.js`,
      namedImports: [
        {
          name: reactTagName,
          alias: componentElement,
        },
        {
          name: 'defineCustomElement',
          alias: `define${reactTagName}`,
        },
      ],
    });

    const publicEvents = (component.events || []).filter((e) => e.internal === false);
    const events: ReactEvent[] = [];
    const importedEventDetailTypes = new Set<string>();
    let importedComponentCustomEvent = false;

    for (const event of publicEvents) {
      /**
       * Import the referenced types from the component library.
       * Stencil will automatically re-export type definitions from the components,
       * if they are used in the component's property or event types.
       */
      if (Object.keys(event.complexType.references).length > 0) {
        for (const referenceKey of Object.keys(event.complexType.references)) {
          const reference = event.complexType.references[referenceKey];
          const isGlobalType = reference.location === 'global';

          /**
           * Global type references should not have an explicit import.
           * The type should be available globally.
           */
          if (!isGlobalType && !importedEventDetailTypes.has(referenceKey)) {
            importedEventDetailTypes.add(referenceKey);
            sourceFile.addImportDeclaration({
              moduleSpecifier: stencilPackageName,
              namedImports: [
                {
                  name: referenceKey,
                  isTypeOnly: true,
                },
              ],
            });
          }
        }
      }

      /**
       * Import the CustomEvent type for the web component from the Stencil package.
       *
       * For example:
       * ```
       * import type { ComponentCustomEvent } from 'my-component-library';
       * ```
       */
      if (!importedComponentCustomEvent) {
        importedComponentCustomEvent = true;
        sourceFile.addImportDeclaration({
          moduleSpecifier: stencilPackageName,
          namedImports: [
            {
              name: componentCustomEvent,
              isTypeOnly: true,
            },
          ],
        });
      }

      // Always type events using the Stencil per-component CustomEvent type.
      events.push({
        originalName: event.name,
        name: eventListenerName(event.name),
        type: `EventName<${componentCustomEvent}<${normalizeTypeString(event.complexType.original)}>>`,
      });
    }

    const componentEventNamesType = `${reactTagName}Events`;

    sourceFile.addTypeAlias({
      isExported: true,
      name: componentEventNamesType,
      type: events.length > 0 ? `{ ${events.map((e) => `${e.name}: ${e.type}`).join(',\n')} }` : 'NonNullable<unknown>',
    });

    const transformTagParam = transformTag ? ',\n    transformTag' : '';
    const clientComponentCall = `/*@__PURE__*/ createComponent<${componentElement}, ${componentEventNamesType}, Components.${reactTagName}>({
    tagName: '${tagName}',
    elementClass: ${componentElement},
    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
    react: React,
    events: {${events.map((e) => `${e.name}: '${e.originalName}'`).join(',\n')}} as ${componentEventNamesType},
    defineCustomElement: define${reactTagName}${transformTagParam}
  })`;

    const getTagTransformerParam = transformTag ? ',\n    getTagTransformer' : '';
    const serverComponentCall = `/*@__PURE__*/ createComponent<${componentElement}, ${componentEventNamesType}, Components.${reactTagName}>({
    tagName: '${tagName}',
    properties: {${component.properties
      /**
       * Filter out properties that don't have an attribute.
       * These are properties with complex types and can't be serialized.
       */
      .filter((prop) => Boolean(prop.attribute))
      .map((e) => `${e.name}: '${e.attribute}'`)
      .join(',\n')}},
    hydrateModule: typeof window === 'undefined' ? (import('${hydrateModule}') as Promise<HydrateModule>) : undefined,
    clientModule: clientComponents.${reactTagName} as StencilReactComponent<${componentElement}, ${componentEventNamesType}, Components.${reactTagName}>,
    serializeShadowRoot${getTagTransformerParam}
  })`;

    sourceFile.addVariableStatement({
      isExported: true,
      declarationKind: VariableDeclarationKind.Const,
      declarations: [
        {
          name: reactTagName,
          type: `StencilReactComponent<${componentElement}, ${componentEventNamesType}, Components.${reactTagName}>`,
          initializer: hydrateModule ? serverComponentCall : clientComponentCall,
        },
      ],
    });
  }

  sourceFile.organizeImports();

  /**
   * Add the @ts-ignore comment to the clientComponents import after organizeImports()
   * to ensure the comment stays attached to the correct import.
   */
  if (hydrateModule && clientModule) {
    const clientComponentsImport = sourceFile
      .getImportDeclarations()
      .find((imp) => imp.getNamespaceImport()?.getText() === 'clientComponents');

    if (clientComponentsImport) {
      sourceFile.insertText(
        clientComponentsImport.getStart(),
        '// @ts-ignore - ignore potential type issues as the project is importing itself\n'
      );
    }
  }

  sourceFile.formatText();

  return sourceFile.getFullText();
};