copy-overlays.js

const DocsJson = require('@ionic/core/docs.json');
const fs = require('fs');

function generateOverlays() {
  const components = [
    {
      tag: 'ion-action-sheet',
      name: 'IonActionSheet'
    },
    {
      tag: 'ion-alert',
      name: 'IonAlert'
    },
    {
      tag: 'ion-loading',
      name: 'IonLoading'
    },
    {
      tag: 'ion-picker-legacy',
      name: 'IonPickerLegacy'
    },
    {
      tag: 'ion-toast',
      name: 'IonToast'
    },
    {
      tag: 'ion-modal',
      name: 'IonModal',
      hasDelegateHost: true
    },
    {
      tag: 'ion-popover',
      name: 'IonPopover'
    }
  ]

  let componentImports = [];
  let componentDefinitions = [];

  components.forEach(component => {
    const docsBlock = getDocsBlock(component.tag);
    const props = getPropsFromDocsBlock(docsBlock);

    const defineCustomElementFn = `define${component.name}CustomElement`;

    componentImports.push(`import { defineCustomElement as ${defineCustomElementFn} } from '@ionic/core/components/${component.tag}.js'`);

    const delegateHostString = component.hasDelegateHost ? ', true' : '';

    componentDefinitions.push(`
export const ${component.name} = /*@__PURE__*/ defineOverlayContainer<JSX.${component.name}>('${component.tag}', ${defineCustomElementFn}, [${props.join(', ')}]${delegateHostString});
    `);
  });

  const template = `/**
 * This is an autogenerated file created by 'scripts/copy-overlays.js'.
 * Changes made to this file will be overwritten on build.
 */

import {
  JSX,
} from '@ionic/core/components';

${componentImports.join('\n')}

import { defineOverlayContainer } from '../vue-component-lib/overlays';
${componentDefinitions.join('')}
`;

  fs.writeFileSync('./src/components/Overlays.ts', template);
}

function getDocsBlock(tag) {
  return DocsJson.components.find(block => block.tag === tag);
}

function getPropsFromDocsBlock(docsBlock) {
  return docsBlock.props.map(prop => `'${prop.name}'`);
}

function main() {
  generateOverlays();
}

main();