From 45ba400880000788ae7ee52cf6bd165468c6889f Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 29 Nov 2023 12:12:15 +0200 Subject: [PATCH 1/5] feat(tools): parameterize react wrapper generator --- .changeset/pf-tools-react-prefixs.md | 4 ++ package-lock.json | 84 +++++++++++++++++++--- package.json | 2 +- tools/pfe-tools/react/generate-wrappers.ts | 33 ++++++--- 4 files changed, 102 insertions(+), 21 deletions(-) create mode 100644 .changeset/pf-tools-react-prefixs.md diff --git a/.changeset/pf-tools-react-prefixs.md b/.changeset/pf-tools-react-prefixs.md new file mode 100644 index 0000000000..1cf2a20f14 --- /dev/null +++ b/.changeset/pf-tools-react-prefixs.md @@ -0,0 +1,4 @@ +--- +"@patternfly/pfe-tools": minor +--- +React wrapper generator: add parameters to support different packages diff --git a/package-lock.json b/package-lock.json index 48f090cae0..93a4569a25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "./tools/*" ], "dependencies": { - "@lit-labs/react": "^1.2.0" + "@lit/react": "^1.0.0" }, "devDependencies": { "@actions/core": "^1.10.0", @@ -2940,16 +2940,19 @@ "npm": ">=7.0.0" } }, - "node_modules/@lit-labs/react": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.0.tgz", - "integrity": "sha512-AIfHLsy4Uk0MSxZTVLrtmdkGnAgCOoAvBCAvTdOXsqp60Vb4zZTUpc0C3CJQ6e8FjM6JL0avOFFBo3XcfARq2Q==" - }, "node_modules/@lit-labs/ssr-dom-shim": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.0.tgz", "integrity": "sha512-92uQ5ARf7UXYrzaFcAX3T2rTvaS9Z1//ukV+DqjACM4c8s0ZBQd7ayJU5Dh2AFLD/Ayuyz4uMmxQec8q3U4Ong==" }, + "node_modules/@lit/react": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.2.tgz", + "integrity": "sha512-UJ5TQ46DPcJDIzyjbwbj6Iye0XcpCxL2yb03zcWq1BpWchpXS3Z0BPVhg7zDfZLF6JemPml8u/gt/+KwJ/23sg==", + "peerDependencies": { + "@types/react": "17 || 18" + } + }, "node_modules/@lit/reactive-element": { "version": "1.6.1", "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.1.tgz", @@ -4131,6 +4134,12 @@ "node": ">=6" } }, + "node_modules/@types/prop-types": { + "version": "15.7.11", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", + "peer": true + }, "node_modules/@types/qs": { "version": "6.9.7", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", @@ -4141,6 +4150,17 @@ "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==" }, + "node_modules/@types/react": { + "version": "18.2.39", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz", + "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==", + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/relateurl": { "version": "0.2.29", "resolved": "https://registry.npmjs.org/@types/relateurl/-/relateurl-0.2.29.tgz", @@ -4154,6 +4174,12 @@ "@types/node": "*" } }, + "node_modules/@types/scheduler": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", + "peer": true + }, "node_modules/@types/semver": { "version": "6.2.3", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-6.2.3.tgz", @@ -6857,6 +6883,12 @@ "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==" }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "peer": true + }, "node_modules/csv": { "version": "5.5.3", "resolved": "https://registry.npmjs.org/csv/-/csv-5.5.3.tgz", @@ -20187,16 +20219,17 @@ } } }, - "@lit-labs/react": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.0.tgz", - "integrity": "sha512-AIfHLsy4Uk0MSxZTVLrtmdkGnAgCOoAvBCAvTdOXsqp60Vb4zZTUpc0C3CJQ6e8FjM6JL0avOFFBo3XcfARq2Q==" - }, "@lit-labs/ssr-dom-shim": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.0.tgz", "integrity": "sha512-92uQ5ARf7UXYrzaFcAX3T2rTvaS9Z1//ukV+DqjACM4c8s0ZBQd7ayJU5Dh2AFLD/Ayuyz4uMmxQec8q3U4Ong==" }, + "@lit/react": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.2.tgz", + "integrity": "sha512-UJ5TQ46DPcJDIzyjbwbj6Iye0XcpCxL2yb03zcWq1BpWchpXS3Z0BPVhg7zDfZLF6JemPml8u/gt/+KwJ/23sg==", + "requires": {} + }, "@lit/reactive-element": { "version": "1.6.1", "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.1.tgz", @@ -21371,6 +21404,12 @@ } } }, + "@types/prop-types": { + "version": "15.7.11", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", + "peer": true + }, "@types/qs": { "version": "6.9.7", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", @@ -21381,6 +21420,17 @@ "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==" }, + "@types/react": { + "version": "18.2.39", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz", + "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==", + "peer": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, "@types/relateurl": { "version": "0.2.29", "resolved": "https://registry.npmjs.org/@types/relateurl/-/relateurl-0.2.29.tgz", @@ -21394,6 +21444,12 @@ "@types/node": "*" } }, + "@types/scheduler": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", + "peer": true + }, "@types/semver": { "version": "6.2.3", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-6.2.3.tgz", @@ -23370,6 +23426,12 @@ "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==" }, + "csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", + "peer": true + }, "csv": { "version": "5.5.3", "resolved": "https://registry.npmjs.org/csv/-/csv-5.5.3.tgz", diff --git a/package.json b/package.json index fcc645db32..b7894e326d 100644 --- a/package.json +++ b/package.json @@ -326,6 +326,6 @@ "./tools/*" ], "dependencies": { - "@lit-labs/react": "^1.2.0" + "@lit/react": "^1.0.0" } } diff --git a/tools/pfe-tools/react/generate-wrappers.ts b/tools/pfe-tools/react/generate-wrappers.ts index 10885a9b4b..12dc1a86ee 100644 --- a/tools/pfe-tools/react/generate-wrappers.ts +++ b/tools/pfe-tools/react/generate-wrappers.ts @@ -8,11 +8,13 @@ function isCustomElementDeclaration(declaration: CEM.Declaration): declaration i return !!(declaration as CEM.CustomElementDeclaration).customElement; } -function getDeprefixedClassName(className: string) { - const upper = className.replace('Pf', ''); - return `${upper.charAt(0).toUpperCase()}${upper.slice(1)}`; +/** Remove a prefix from a class name */ +function getDeprefixedClassName(className: string, prefix: string) { + const [fst, ...tail] = className.replace(prefix, ''); + return `${fst.toUpperCase()}${tail.join('')}`; } +/** simple function to convert string from dash to camel case */ function camel(str: string): string { return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase()); } @@ -27,6 +29,9 @@ async function writeReactWrapper( module: CEM.Module, decl: CEM.CustomElementDeclaration, outDirPathOrURL: string | URL, + packageName: string, + elementPrefix: string, + classPrefix: string, ) { const { path, exports } = module; if (!exports) { @@ -49,15 +54,15 @@ async function writeReactWrapper( : fileURLToPath(outDirPathOrURL); const outPath = join(outDirPath, path); await mkdir(dirname(outPath), { recursive: true }); - const reactComponentName = getDeprefixedClassName(Class); + const reactComponentName = getDeprefixedClassName(Class, classPrefix); const eventsMap = `{${events.map(event => ` ${getEventReactPropName(event)}: '${event.name}'`).join(',')}${events.length ? `, ` : ''}}`; const eventsInterface = eventsMap.replace(/\s+/g, ' ').replaceAll(',', ';').replace('; }', ' }'); await writeFile(outPath, javascript`// ${path} - import { createComponent } from '@lit-labs/react'; + import { createComponent } from '@lit/react'; import react from 'react'; - import { ${Class} as elementClass } from '@patternfly/elements/${module.path}'; + import { ${Class} as elementClass } from '${packageName}/${module.path}'; export const ${reactComponentName} = createComponent({ tagName: '${decl.tagName}', elementClass, @@ -68,8 +73,8 @@ async function writeReactWrapper( `, 'utf8'); await writeFile(outPath.replace('.js', '.d.ts'), typescript` // ${path} - import type { ReactWebComponent } from '@lit-labs/react'; - import type { ${Class} } from '@patternfly/elements/${module.path}'; + import type { ReactWebComponent } from '@lit/react'; + import type { ${Class} } from '${packageName}/${module.path}'; export const ${reactComponentName}: ReactWebComponent<${Class}, ${eventsInterface}>; `, 'utf8'); @@ -100,6 +105,9 @@ async function parseManifest(maybeManifest: unknown): Promise { export async function generateReactWrappers( customElementsManifestOrPathOrURL: CEM.Package | string | URL, outDirPathOrURL: string | URL, + packageName = '@patternfly/elements', + elementPrefix = 'pf', + classPrefix = `${elementPrefix.charAt(0).toUpperCase()}${elementPrefix.slice(1)}`, ) { const manifest = await parseManifest(customElementsManifestOrPathOrURL); const written = []; @@ -107,7 +115,14 @@ export async function generateReactWrappers( for (const module of manifest.modules) { for (const decl of module.declarations ?? []) { if (isCustomElementDeclaration(decl)) { - written.push(await writeReactWrapper(module, decl, outDirPathOrURL)); + written.push(await writeReactWrapper( + module, + decl, + outDirPathOrURL, + packageName, + elementPrefix, + classPrefix, + )); } } } From ab78f8327625aee34ee6581b8727d95984db4192 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 6 Dec 2023 08:50:28 +0200 Subject: [PATCH 2/5] fix(tools): react wrapper generator --- tools/pfe-tools/react/generate-wrappers.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/tools/pfe-tools/react/generate-wrappers.ts b/tools/pfe-tools/react/generate-wrappers.ts index 12dc1a86ee..74e2bb7db9 100644 --- a/tools/pfe-tools/react/generate-wrappers.ts +++ b/tools/pfe-tools/react/generate-wrappers.ts @@ -37,17 +37,18 @@ async function writeReactWrapper( if (!exports) { throw new Error(`module has no exports: ${path}`); } - const ceExport = exports.find(ex => ex.declaration.name === decl.name); + const ceExport = exports.find(ex => + ex.kind === 'custom-element-definition' && + ex.declaration.name === decl.name); if (!ceExport) { throw new Error(`module does not export custom element class: ${decl.name}`); } - const { tagName } = decl; + const { tagName, name: Class } = decl; if (!tagName) { throw new NonCriticalError(`declaration does not have a tag name: ${decl.name}`); } else { const javascript = dedent; const typescript = dedent; - const { name: Class } = ceExport; const events = decl.events ?? []; const outDirPath = typeof outDirPathOrURL === 'string' ? outDirPathOrURL From 2c26dc93f35f07d01bd0dc36c815e0f739f5903a Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 6 Dec 2023 09:18:01 +0200 Subject: [PATCH 3/5] fix(tools): react wrappers for multi-element modules --- tools/pfe-tools/react/generate-wrappers.ts | 160 ++++++++++++--------- 1 file changed, 91 insertions(+), 69 deletions(-) diff --git a/tools/pfe-tools/react/generate-wrappers.ts b/tools/pfe-tools/react/generate-wrappers.ts index 74e2bb7db9..25637147dc 100644 --- a/tools/pfe-tools/react/generate-wrappers.ts +++ b/tools/pfe-tools/react/generate-wrappers.ts @@ -1,9 +1,19 @@ import type * as CEM from 'custom-elements-manifest'; -import dedent from 'dedent'; import { dirname, join, relative } from 'node:path'; import { fileURLToPath } from 'node:url'; import { readFile, writeFile, mkdir } from 'node:fs/promises'; +interface ReactWrapperData { + Class: string; + reactComponentName: string; + eventsMap: string; + eventsInterface: string; + tagName: string; +} + +const javascript = String.raw; +const typescript = String.raw; + function isCustomElementDeclaration(declaration: CEM.Declaration): declaration is CEM.CustomElementDeclaration { return !!(declaration as CEM.CustomElementDeclaration).customElement; } @@ -25,67 +35,83 @@ function getEventReactPropName(event: CEM.Event) { class NonCriticalError extends Error { } -async function writeReactWrapper( - module: CEM.Module, - decl: CEM.CustomElementDeclaration, - outDirPathOrURL: string | URL, - packageName: string, - elementPrefix: string, - classPrefix: string, -) { - const { path, exports } = module; - if (!exports) { - throw new Error(`module has no exports: ${path}`); - } - const ceExport = exports.find(ex => - ex.kind === 'custom-element-definition' && - ex.declaration.name === decl.name); - if (!ceExport) { - throw new Error(`module does not export custom element class: ${decl.name}`); - } - const { tagName, name: Class } = decl; - if (!tagName) { - throw new NonCriticalError(`declaration does not have a tag name: ${decl.name}`); - } else { - const javascript = dedent; - const typescript = dedent; +function isPackage(manifest: unknown): manifest is CEM.Package { + const maybeManifest = (manifest as CEM.Package); + return Array.isArray(maybeManifest?.modules) && !!maybeManifest.schemaVersion; +} + +const getReactWrapperData = (module: CEM.Module, classPrefix: string, elPrefix: string) => + (decl: CEM.CustomElementDeclaration) => { + const ceExport = module.exports?.find(ex => ex.declaration.name === decl.name); + if (!ceExport) { + throw new Error(`module ${module.path} does not export custom element class: ${decl.name}`); + } + if (!decl.tagName) { + throw new NonCriticalError(`declaration does not have a tag name: ${decl.name}`); + } + const { tagName, name: Class } = decl; const events = decl.events ?? []; - const outDirPath = - typeof outDirPathOrURL === 'string' ? outDirPathOrURL - : fileURLToPath(outDirPathOrURL); - const outPath = join(outDirPath, path); - await mkdir(dirname(outPath), { recursive: true }); const reactComponentName = getDeprefixedClassName(Class, classPrefix); const eventsMap = `{${events.map(event => ` - ${getEventReactPropName(event)}: '${event.name}'`).join(',')}${events.length ? `, - ` : ''}}`; + ${getEventReactPropName(event)}: '${event.name}'`).join(',')}${events.length ? `, + ` : ''}}`; const eventsInterface = eventsMap.replace(/\s+/g, ' ').replaceAll(',', ';').replace('; }', ' }'); - await writeFile(outPath, javascript`// ${path} - import { createComponent } from '@lit/react'; - import react from 'react'; - import { ${Class} as elementClass } from '${packageName}/${module.path}'; - export const ${reactComponentName} = createComponent({ - tagName: '${decl.tagName}', - elementClass, - react, - events: ${eventsMap}, - }); + return { + Class: decl.name, + reactComponentName, + eventsMap, + eventsInterface, + tagName, + }; + }; - `, 'utf8'); - await writeFile(outPath.replace('.js', '.d.ts'), typescript` - // ${path} - import type { ReactWebComponent } from '@lit/react'; - import type { ${Class} } from '${packageName}/${module.path}'; - export const ${reactComponentName}: ReactWebComponent<${Class}, ${eventsInterface}>; +function genJavascriptModule(module: CEM.Module, pkgName: string, data: ReactWrapperData[]) { + return javascript`// ${module.path} +import { createComponent } from '@lit/react'; +import react from 'react';${data.map(x => javascript` +import { ${x.Class} as elementClass } from '${pkgName}/${module.path}';`)}${data.map(x => javascript` +export const ${x.reactComponentName} = createComponent({ + tagName: '${x.tagName}', + elementClass, + react, + events: ${x.eventsMap}, +});`).join('\n')} +`; +} - `, 'utf8'); - return { tagName, outPath }; - } +function genTypescriptModule(module: CEM.Module, pkgName: string, data: ReactWrapperData[]) { + return typescript`// ${module.path} +import type { ReactWebComponent } from '@lit/react';${data.map(x => typescript` +import type { ${x.Class} } from '${pkgName}/${module.path}';`)}${data.map(x => typescript` +export const ${x.reactComponentName}: ReactWebComponent<${x.Class}, ${x.eventsInterface}>;`)} + `; } -function isPackage(manifest: unknown): manifest is CEM.Package { - const maybeManifest = (manifest as CEM.Package); - return Array.isArray(maybeManifest?.modules) && !!maybeManifest.schemaVersion; +function genWrapperModules(module: CEM.Module, pkgName: string, elPrefix: string, classPrefix: string) { + const data: ReactWrapperData[] = (module.declarations ?? []) + .filter(isCustomElementDeclaration) + .map(getReactWrapperData(module, classPrefix, elPrefix)); + const js = genJavascriptModule(module, pkgName, data); + const ts = genTypescriptModule(module, pkgName, data); + const tagNames = data.map(x => x.tagName); + return { js, ts, tagNames }; +} + +async function writeReactWrappers( + js: string, + ts: string, + tagNames: string[], + path: string, + outDirPathOrURL: string | URL, +) { + const outDirPath = + typeof outDirPathOrURL === 'string' ? outDirPathOrURL + : fileURLToPath(outDirPathOrURL); + const outPath = join(outDirPath, path); + await mkdir(dirname(outPath), { recursive: true }); + await writeFile(outPath, js, 'utf8'); + await writeFile(outPath.replace('.js', '.d.ts'), ts, 'utf8'); + return { tagNames, outPath }; } async function parseManifest(maybeManifest: unknown): Promise { @@ -107,25 +133,19 @@ export async function generateReactWrappers( customElementsManifestOrPathOrURL: CEM.Package | string | URL, outDirPathOrURL: string | URL, packageName = '@patternfly/elements', - elementPrefix = 'pf', - classPrefix = `${elementPrefix.charAt(0).toUpperCase()}${elementPrefix.slice(1)}`, + elPrefix = 'pf', + classPrefix = `${elPrefix.charAt(0).toUpperCase()}${elPrefix.slice(1)}`, ) { const manifest = await parseManifest(customElementsManifestOrPathOrURL); const written = []; + console.group('Writing React Wrappers'); try { for (const module of manifest.modules) { - for (const decl of module.declarations ?? []) { - if (isCustomElementDeclaration(decl)) { - written.push(await writeReactWrapper( - module, - decl, - outDirPathOrURL, - packageName, - elementPrefix, - classPrefix, - )); - } + if (!module.exports) { + throw new Error(`module has no exports: ${module.path}`); } + const { js, ts, tagNames } = genWrapperModules(module, packageName, elPrefix, classPrefix); + written.push(await writeReactWrappers(js, ts, tagNames, module.path, outDirPathOrURL)); } } catch (error) { if (error instanceof NonCriticalError) { @@ -134,10 +154,12 @@ export async function generateReactWrappers( } else { throw error; } + } finally { + console.groupEnd(); } console.group('Wrote React Wrappers'); - for (const { tagName, outPath } of written) { - console.log(`${tagName}: ${relative(process.cwd(), outPath)}`); + for (const { tagNames, outPath } of written) { + console.log(`${tagNames.join()}: ${relative(process.cwd(), outPath)}`); } console.groupEnd(); } From 12a9f573b8941f14d5f576a01d622a9956db5e80 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 6 Dec 2023 10:45:00 +0200 Subject: [PATCH 4/5] fix(tools): coloured output for react wrapper gen --- package-lock.json | 20 ++++++++++++++++++++ tools/pfe-tools/package.json | 1 + tools/pfe-tools/react/generate-wrappers.ts | 12 ++++++++---- 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 93a4569a25..4e09ba5dfe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18087,6 +18087,7 @@ "@web/test-runner-playwright": "^0.9.0", "cem-plugin-module-file-extensions": "^0.0.5", "cem-plugin-readonly": "^0.0.5", + "chalk": "^5.3.0", "clean-css": "^5.3.2", "colorjs.io": "^0.4.3", "compression": "^1.7.4", @@ -18126,6 +18127,17 @@ "engines": { "node": ">=14" } + }, + "tools/pfe-tools/node_modules/chalk": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } } }, "dependencies": { @@ -20738,6 +20750,7 @@ "@web/test-runner-playwright": "^0.9.0", "cem-plugin-module-file-extensions": "^0.0.5", "cem-plugin-readonly": "^0.0.5", + "chalk": "^5.3.0", "clean-css": "^5.3.2", "colorjs.io": "^0.4.3", "compression": "^1.7.4", @@ -20770,6 +20783,13 @@ "typescript": "5.0.4", "urlpattern-polyfill": "^7.0.0", "web-dev-server-plugin-lit-css": "^2.0.5" + }, + "dependencies": { + "chalk": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==" + } } }, "@pkgr/utils": { diff --git a/tools/pfe-tools/package.json b/tools/pfe-tools/package.json index 8ff7b10658..e64088fe6e 100644 --- a/tools/pfe-tools/package.json +++ b/tools/pfe-tools/package.json @@ -89,6 +89,7 @@ "@web/test-runner-playwright": "^0.9.0", "cem-plugin-module-file-extensions": "^0.0.5", "cem-plugin-readonly": "^0.0.5", + "chalk": "^5.3.0", "clean-css": "^5.3.2", "colorjs.io": "^0.4.3", "compression": "^1.7.4", diff --git a/tools/pfe-tools/react/generate-wrappers.ts b/tools/pfe-tools/react/generate-wrappers.ts index 25637147dc..9c4c441bde 100644 --- a/tools/pfe-tools/react/generate-wrappers.ts +++ b/tools/pfe-tools/react/generate-wrappers.ts @@ -3,6 +3,8 @@ import { dirname, join, relative } from 'node:path'; import { fileURLToPath } from 'node:url'; import { readFile, writeFile, mkdir } from 'node:fs/promises'; +import Chalk from 'chalk'; + interface ReactWrapperData { Class: string; reactComponentName: string; @@ -138,7 +140,7 @@ export async function generateReactWrappers( ) { const manifest = await parseManifest(customElementsManifestOrPathOrURL); const written = []; - console.group('Writing React Wrappers'); + console.group(Chalk.green`Writing React Wrappers`); try { for (const module of manifest.modules) { if (!module.exports) { @@ -150,16 +152,18 @@ export async function generateReactWrappers( } catch (error) { if (error instanceof NonCriticalError) { // eslint-disable-next-line no-console - console.info(error.message); + console.info(`⚠️ ${error.message}`); } else { throw error; } } finally { console.groupEnd(); } - console.group('Wrote React Wrappers'); + console.group(Chalk.greenBright`Wrote React Wrappers`); for (const { tagNames, outPath } of written) { - console.log(`${tagNames.join()}: ${relative(process.cwd(), outPath)}`); + const names = tagNames.map(x => Chalk.blue`${x}`).join().replace(', ', ''); + const path = relative(process.cwd(), outPath); + console.log(`${names}: ${path}`); } console.groupEnd(); } From c859153d0324ca17cc79eecc7e217ed69fe6c3d3 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 6 Dec 2023 13:51:26 +0200 Subject: [PATCH 5/5] chore: lift devdeps --- package-lock.json | 49 ++++++++++++++++++++++++----------------------- package.json | 1 + 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4e09ba5dfe..d126ffe30c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "@types/numeral": "^2.0.2", "@types/prismjs": "^1.26.0", "@types/prompts": "^2.4.4", + "chalk": "^5.3.0", "commitlint": "^17.6.1", "execa": "^7.1.1", "fuse.js": "^6.6.2", @@ -5906,9 +5907,9 @@ } }, "node_modules/chalk": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz", - "integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", "engines": { "node": "^12.17.0 || ^14.13 || >=16.0.0" }, @@ -17943,6 +17944,17 @@ "create-app": "bin/main.js" } }, + "tools/create-element/node_modules/chalk": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz", + "integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==", + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "tools/eslint-config": { "name": "@patternfly/eslint-config-elements", "version": "2.0.1", @@ -18127,17 +18139,6 @@ "engines": { "node": ">=14" } - }, - "tools/pfe-tools/node_modules/chalk": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", - "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", - "engines": { - "node": "^12.17.0 || ^14.13 || >=16.0.0" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } } }, "dependencies": { @@ -20622,6 +20623,13 @@ "prompts": "2.4.2", "tslib": "2.5.0", "yargs": "17.7.1" + }, + "dependencies": { + "chalk": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz", + "integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==" + } } }, "@patternfly/elements": { @@ -20783,13 +20791,6 @@ "typescript": "5.0.4", "urlpattern-polyfill": "^7.0.0", "web-dev-server-plugin-lit-css": "^2.0.5" - }, - "dependencies": { - "chalk": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", - "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==" - } } }, "@pkgr/utils": { @@ -22709,9 +22710,9 @@ } }, "chalk": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.0.1.tgz", - "integrity": "sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==" + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==" }, "chalk-template": { "version": "0.4.0", diff --git a/package.json b/package.json index b7894e326d..d34160619e 100644 --- a/package.json +++ b/package.json @@ -311,6 +311,7 @@ "@types/numeral": "^2.0.2", "@types/prismjs": "^1.26.0", "@types/prompts": "^2.4.4", + "chalk": "^5.3.0", "commitlint": "^17.6.1", "execa": "^7.1.1", "fuse.js": "^6.6.2",