2022-01-26 13:46:20 +00:00
|
|
|
import commandLineArgs from 'command-line-args';
|
2021-11-04 11:27:18 +00:00
|
|
|
import fs from 'fs';
|
|
|
|
import path from 'path';
|
2022-07-27 20:17:23 +00:00
|
|
|
import { deleteSync } from 'del';
|
2021-11-04 11:27:18 +00:00
|
|
|
import prettier from 'prettier';
|
2023-10-12 17:56:11 +00:00
|
|
|
import { default as prettierConfig } from '../prettier.config.js';
|
2021-11-04 11:27:18 +00:00
|
|
|
import { getAllComponents } from './shared.js';
|
|
|
|
|
2022-01-26 13:46:20 +00:00
|
|
|
const { outdir } = commandLineArgs({ name: 'outdir', type: String });
|
|
|
|
|
|
|
|
const reactDir = path.join('./src/react');
|
2021-11-04 11:27:18 +00:00
|
|
|
|
|
|
|
// Clear build directory
|
2022-07-27 20:17:23 +00:00
|
|
|
deleteSync(reactDir);
|
2022-01-26 13:46:20 +00:00
|
|
|
fs.mkdirSync(reactDir, { recursive: true });
|
2021-11-04 11:27:18 +00:00
|
|
|
|
|
|
|
// Fetch component metadata
|
2022-01-26 13:46:20 +00:00
|
|
|
const metadata = JSON.parse(fs.readFileSync(path.join(outdir, 'custom-elements.json'), 'utf8'));
|
2021-11-04 11:27:18 +00:00
|
|
|
const components = getAllComponents(metadata);
|
|
|
|
const index = [];
|
|
|
|
|
2023-10-19 14:30:16 +00:00
|
|
|
for await (const component of components) {
|
2021-11-04 11:27:18 +00:00
|
|
|
const tagWithoutPrefix = component.tagName.replace(/^sl-/, '');
|
2022-01-26 13:46:20 +00:00
|
|
|
const componentDir = path.join(reactDir, tagWithoutPrefix);
|
2021-11-04 11:27:18 +00:00
|
|
|
const componentFile = path.join(componentDir, 'index.ts');
|
2023-08-07 17:20:34 +00:00
|
|
|
const importPath = component.path.replace(/\.js$/, '.component.js');
|
2023-07-12 15:31:27 +00:00
|
|
|
const eventImports = (component.events || [])
|
2023-08-07 17:20:34 +00:00
|
|
|
.map(event => `import type { ${event.eventName} } from '../../../src/events/events';`)
|
|
|
|
.join('\n');
|
|
|
|
const eventExports = (component.events || [])
|
|
|
|
.map(event => `export type { ${event.eventName} } from '../../../src/events/events';`)
|
2023-07-12 15:31:27 +00:00
|
|
|
.join('\n');
|
2023-10-13 17:53:12 +00:00
|
|
|
const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit/react';` : ``;
|
2023-07-12 15:31:27 +00:00
|
|
|
const events = (component.events || [])
|
|
|
|
.map(event => `${event.reactName}: '${event.name}' as EventName<${event.eventName}>`)
|
|
|
|
.join(',\n');
|
2021-11-04 11:27:18 +00:00
|
|
|
|
2022-01-06 13:44:13 +00:00
|
|
|
fs.mkdirSync(componentDir, { recursive: true });
|
2021-11-04 11:27:18 +00:00
|
|
|
|
2023-07-24 17:00:07 +00:00
|
|
|
const jsDoc = component.jsDoc || '';
|
|
|
|
|
2023-10-12 17:56:11 +00:00
|
|
|
const source = await prettier.format(
|
2021-11-04 11:27:18 +00:00
|
|
|
`
|
|
|
|
import * as React from 'react';
|
2023-10-13 06:15:45 +00:00
|
|
|
import { createComponent } from '@lit/react';
|
2021-11-04 11:27:18 +00:00
|
|
|
import Component from '../../${importPath}';
|
|
|
|
|
2023-07-12 15:31:27 +00:00
|
|
|
${eventNameImport}
|
|
|
|
${eventImports}
|
2023-08-07 17:20:34 +00:00
|
|
|
${eventExports}
|
2023-07-12 15:31:27 +00:00
|
|
|
|
2023-07-24 17:00:07 +00:00
|
|
|
const tagName = '${component.tagName}'
|
2023-08-22 15:26:54 +00:00
|
|
|
Component.define('${component.tagName}')
|
2023-07-24 17:00:07 +00:00
|
|
|
|
2023-08-22 15:26:54 +00:00
|
|
|
${jsDoc}
|
|
|
|
const reactWrapper = createComponent({
|
2023-07-24 17:00:07 +00:00
|
|
|
tagName,
|
2023-01-03 13:57:27 +00:00
|
|
|
elementClass: Component,
|
|
|
|
react: React,
|
|
|
|
events: {
|
2021-11-04 11:27:18 +00:00
|
|
|
${events}
|
2023-07-24 17:00:07 +00:00
|
|
|
},
|
|
|
|
displayName: "${component.name}"
|
|
|
|
})
|
|
|
|
|
2023-08-22 15:26:54 +00:00
|
|
|
export default reactWrapper
|
2021-11-04 11:27:18 +00:00
|
|
|
`,
|
|
|
|
Object.assign(prettierConfig, {
|
|
|
|
parser: 'babel-ts'
|
|
|
|
})
|
|
|
|
);
|
|
|
|
|
2023-06-22 14:56:24 +00:00
|
|
|
index.push(`export { default as ${component.name} } from './${tagWithoutPrefix}/index.js';`);
|
2021-11-04 11:27:18 +00:00
|
|
|
|
|
|
|
fs.writeFileSync(componentFile, source, 'utf8');
|
2023-10-19 14:30:16 +00:00
|
|
|
}
|
2021-11-04 11:27:18 +00:00
|
|
|
|
|
|
|
// Generate the index file
|
2022-01-26 13:46:20 +00:00
|
|
|
fs.writeFileSync(path.join(reactDir, 'index.ts'), index.join('\n'), 'utf8');
|