Skip to content

Commit 725b964

Browse files
committed
1 parent e1349f9 commit 725b964

File tree

25 files changed

+180
-91
lines changed

25 files changed

+180
-91
lines changed

.eslintrc.js

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ module.exports = {
1414
'.deployment.config.json',
1515
'packages/atomic-angular/scripts/build-lit.mjs',
1616
'packages/atomic-react/scripts/build-lit.mjs',
17+
'packages/atomic/src/components/*/lazy-index.ts',
18+
'packages/atomic/src/components/*/index.ts',
1719
],
1820
env: {
1921
jest: true,

package-lock.json

-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import {APP_INITIALIZER, ModuleWithProviders, NgModule, Provider} from '@angular
66

77
import {
88
AtomicCommerceInterface,
9-
AtomicComponentError,
109
AtomicIcon,
10+
AtomicComponentError,
1111
AtomicAriaLive,
1212
AtomicAutomaticFacet,
1313
AtomicAutomaticFacetGenerator,
@@ -148,8 +148,8 @@ AtomicTimeframeFacet
148148

149149
const DECLARATIONS = [
150150
AtomicCommerceInterface,
151-
AtomicComponentError,
152151
AtomicIcon,
152+
AtomicComponentError,
153153
AtomicAriaLive,
154154
AtomicAutomaticFacet,
155155
AtomicAutomaticFacetGenerator,

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

+14-14
Original file line numberDiff line numberDiff line change
@@ -3031,52 +3031,52 @@ export declare interface AtomicCommerceInterface extends LitAtomicCommerceInterf
30313031
}
30323032

30333033
@ProxyCmp({
3034-
inputs: ['element', 'error'],
3035-
methods: [],
3036-
defineCustomElementFn: () => {customElements.get('atomic-component-error') || customElements.define('atomic-component-error', LitAtomicComponentError);}
3034+
inputs: ['icon'],
3035+
methods: ['updateIcon', 'initialize', 'initBindings'],
3036+
defineCustomElementFn: () => {customElements.get('atomic-icon') || customElements.define('atomic-icon', LitAtomicIcon);}
30373037
})
30383038
@Component({
3039-
selector: 'atomic-component-error',
3039+
selector: 'atomic-icon',
30403040
standalone: false,
30413041
changeDetection: ChangeDetectionStrategy.OnPush,
30423042
template: '<ng-content></ng-content>',
30433043
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
3044-
inputs: ['element', 'error']
3044+
inputs: ['icon']
30453045
})
3046-
export class AtomicComponentError {
3046+
export class AtomicIcon {
30473047
protected readonly el: HTMLElement;
30483048
constructor(c: ChangeDetectorRef, el: ElementRef, protected z: NgZone) {
30493049
c.detach();
30503050
this.el = el.nativeElement;
30513051
}
30523052
}
30533053

3054-
export declare interface AtomicComponentError extends LitAtomicComponentError {
3054+
export declare interface AtomicIcon extends LitAtomicIcon {
30553055

30563056
}
30573057

30583058
@ProxyCmp({
3059-
inputs: ['icon'],
3060-
methods: ['updateIcon', 'initialize', 'initBindings'],
3061-
defineCustomElementFn: () => {customElements.get('atomic-icon') || customElements.define('atomic-icon', LitAtomicIcon);}
3059+
inputs: ['element', 'error'],
3060+
methods: [],
3061+
defineCustomElementFn: () => {customElements.get('atomic-component-error') || customElements.define('atomic-component-error', LitAtomicComponentError);}
30623062
})
30633063
@Component({
3064-
selector: 'atomic-icon',
3064+
selector: 'atomic-component-error',
30653065
standalone: false,
30663066
changeDetection: ChangeDetectionStrategy.OnPush,
30673067
template: '<ng-content></ng-content>',
30683068
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
3069-
inputs: ['icon']
3069+
inputs: ['element', 'error']
30703070
})
3071-
export class AtomicIcon {
3071+
export class AtomicComponentError {
30723072
protected readonly el: HTMLElement;
30733073
constructor(c: ChangeDetectorRef, el: ElementRef, protected z: NgZone) {
30743074
c.detach();
30753075
this.el = el.nativeElement;
30763076
}
30773077
}
30783078

3079-
export declare interface AtomicIcon extends LitAtomicIcon {
3079+
export declare interface AtomicComponentError extends LitAtomicComponentError {
30803080

30813081
}
30823082

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {
22
AtomicCommerceInterface as LitAtomicCommerceInterface,
3-
AtomicComponentError as LitAtomicComponentError,
43
AtomicIcon as LitAtomicIcon,
4+
AtomicComponentError as LitAtomicComponentError,
55
} from '@coveo/atomic/components';
66
import {createComponent} from '@lit/react';
77
import React from 'react';
@@ -12,14 +12,14 @@ export const AtomicCommerceInterface = createComponent({
1212
elementClass: LitAtomicCommerceInterface,
1313
});
1414

15-
export const AtomicComponentError = createComponent({
16-
tagName: 'atomic-component-error',
17-
react: React,
18-
elementClass: LitAtomicComponentError,
19-
});
20-
2115
export const AtomicIcon = createComponent({
2216
tagName: 'atomic-icon',
2317
react: React,
2418
elementClass: LitAtomicIcon,
2519
});
20+
21+
export const AtomicComponentError = createComponent({
22+
tagName: 'atomic-component-error',
23+
react: React,
24+
elementClass: LitAtomicComponentError,
25+
});
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import {
2-
AtomicComponentError as LitAtomicComponentError,
32
AtomicIcon as LitAtomicIcon,
3+
AtomicComponentError as LitAtomicComponentError,
44
} from '@coveo/atomic/components';
55
import {createComponent} from '@lit/react';
66
import React from 'react';
77

8-
export const AtomicComponentError = createComponent({
9-
tagName: 'atomic-component-error',
10-
react: React,
11-
elementClass: LitAtomicComponentError,
12-
});
13-
148
export const AtomicIcon = createComponent({
159
tagName: 'atomic-icon',
1610
react: React,
1711
elementClass: LitAtomicIcon,
1812
});
13+
14+
export const AtomicComponentError = createComponent({
15+
tagName: 'atomic-component-error',
16+
react: React,
17+
elementClass: LitAtomicComponentError,
18+
});

packages/atomic/scripts/build.mjs

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
DiagnosticCategory,
1313
} from 'typescript';
1414
import resourceUrlTransformer from './asset-path-transformer.mjs';
15+
import {generateLitExports} from './generate-lit-exports.mjs';
1516
import pathTransformer from './path-transform.mjs';
1617
import svgTransformer from './svg-transform.mjs';
1718
import versionTransformer from './version-transform.mjs';
@@ -73,6 +74,8 @@ function emit(program) {
7374
* Info: https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#a-minimal-compiler
7475
*/
7576
function compileWithTransformer() {
77+
generateLitExports();
78+
7679
console.log(
7780
chalk.blue('Using tsconfig:'),
7881
chalk.green(basename(tsConfigPath))
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import chalk from 'chalk';
2+
import fs from 'fs';
3+
import path from 'path';
4+
5+
const baseComponentsDir = path.resolve(
6+
path.dirname(new URL(import.meta.url).pathname),
7+
'../src/components'
8+
);
9+
10+
function isLitComponent(filePath) {
11+
if (!fs.existsSync(filePath)) {
12+
return false;
13+
}
14+
const content = fs.readFileSync(filePath, 'utf-8');
15+
return content.includes('LitElement');
16+
}
17+
18+
function toPascalCase(name) {
19+
return name
20+
.split('-')
21+
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
22+
.join('');
23+
}
24+
25+
function generateLitExportsForDir(dir) {
26+
const componentsDir = path.join(baseComponentsDir, dir);
27+
const outputIndexFile = path.join(componentsDir, 'index.ts');
28+
const outputLazyIndexFile = path.join(componentsDir, 'lazy-index.ts');
29+
30+
const files = fs.readdirSync(componentsDir, {withFileTypes: true});
31+
const litComponents = files
32+
.filter((file) => {
33+
const componentPath = path.join(
34+
componentsDir,
35+
file.name,
36+
`${file.name}.ts`
37+
);
38+
return (
39+
file.isDirectory() &&
40+
fs.existsSync(componentPath) &&
41+
isLitComponent(componentPath)
42+
);
43+
})
44+
.map((file) => file.name)
45+
.sort();
46+
47+
if (litComponents.length === 0) {
48+
fs.writeFileSync(outputIndexFile, `// Auto-generated file\nexport {};\n`);
49+
fs.writeFileSync(
50+
outputLazyIndexFile,
51+
`// Auto-generated file\nexport default {} as Record<string, () => Promise<unknown>>;\n\nexport type * from './index.js';\n`
52+
);
53+
return;
54+
}
55+
56+
const indexExports = litComponents
57+
.map(
58+
(component) =>
59+
`export {${toPascalCase(component)}} from './${component}/${component}.js';`
60+
)
61+
.join('\n');
62+
63+
const lazyIndexExports = litComponents
64+
.map(
65+
(component) =>
66+
`'${component}': async () => await import('./${component}/${component}.js'),`
67+
)
68+
.join('\n ');
69+
70+
fs.writeFileSync(
71+
outputIndexFile,
72+
`// Auto-generated file\n${indexExports}\n`
73+
);
74+
75+
fs.writeFileSync(
76+
outputLazyIndexFile,
77+
`// Auto-generated file\nexport default {\n ${lazyIndexExports}\n} as Record<string, () => Promise<unknown>>;\n\nexport type * from './index.js';\n`
78+
);
79+
}
80+
81+
export function generateLitExports() {
82+
const directories = [
83+
'commerce',
84+
'common',
85+
'search',
86+
'insight',
87+
'ipx',
88+
'recommendations',
89+
];
90+
directories.forEach((dir) => {
91+
console.log(chalk.blue('Directory:'), chalk.green(dir));
92+
generateLitExportsForDir(dir);
93+
});
94+
}

packages/atomic/scripts/process-css.mjs

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import chalk from 'chalk';
12
import {readdir, mkdir, readFile, writeFile} from 'fs';
23
import * as lightningcss from 'lightningcss';
34
import {join, dirname, relative} from 'path';
@@ -11,6 +12,7 @@ import {fileURLToPath} from 'url';
1112
const args = argv.slice(2);
1213
const configArg = args.find((arg) => arg.startsWith('--config='));
1314
if (configArg === undefined) {
15+
console.error(chalk.red('Error: Missing --config=[PATH] argument'));
1416
throw new Error('Missing --config=[PATH] argument');
1517
}
1618
const tsConfigPath = configArg.split('=')[1];
@@ -76,12 +78,16 @@ const pushImports = (currentFile, importPaths, files) => {
7678
function convertCssToJs(srcPath, distPath, file) {
7779
readFile(srcPath, 'utf8', async (err, data) => {
7880
if (err) {
81+
console.error(chalk.red(`Error reading file: ${srcPath}`));
7982
throw err;
8083
}
8184

8285
const files = [file];
8386

84-
console.log(`Processing ${srcPath} -> ${distPath}`);
87+
console.log(
88+
chalk.blue('Processing:'),
89+
chalk.green(`${srcPath} -> ${distPath}`)
90+
);
8591
const imports = Array.from(data.matchAll(importMatcher)).flatMap(
8692
(match) => match
8793
);
@@ -112,31 +118,35 @@ function convertCssToJs(srcPath, distPath, file) {
112118

113119
writeFile(jsPath, fileContent, (err) => {
114120
if (err) {
121+
console.error(chalk.red(`Error writing file: ${jsPath}`));
115122
throw err;
116123
}
124+
console.log(chalk.blue('Successfully processed:'), chalk.green(jsPath));
117125
});
118126
});
119127
}
120-
121128
function processCssFiles(srcDir, distDir) {
122129
readdir(srcDir, {withFileTypes: true}, (err, files) => {
123130
if (err) {
131+
console.error(chalk.red(`Error reading directory: ${srcDir}`));
124132
throw err;
125133
}
126134

127135
files.forEach((file) => {
128136
const srcPath = join(srcDir, file.name);
129137

130138
if (file.isDirectory()) {
139+
console.log(chalk.blue('Entering directory:'), chalk.green(srcPath));
131140
processCssFiles(srcPath, join(distDir, file.name));
132141
} else if (file.isFile() && file.name.endsWith('.css')) {
133142
const relPath = relative(srcDir, srcPath);
134143
const distPath = join(distDir, relPath);
135144
const targetDir = dirname(distPath);
136-
console.log(`Processing CSS for ${srcPath}`);
145+
console.log(chalk.blue('Processing CSS for:'), chalk.green(srcPath));
137146

138147
mkdir(targetDir, {recursive: true}, (err) => {
139148
if (err) {
149+
console.error(chalk.red(`Error creating directory: ${targetDir}`));
140150
throw err;
141151
}
142152
convertCssToJs(srcPath, distPath, file);
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
1-
// Export the class of the components migrated to Lit here, like this:
2-
export {AtomicComponentError} from '../common/atomic-component-error/atomic-component-error';
3-
export {AtomicIcon} from '../common/atomic-icon/atomic-icon';
4-
export {AtomicCommerceInterface} from './atomic-commerce-interface/atomic-commerce-interface';
1+
// Auto-generated file
2+
export {AtomicCommerceInterface} from './atomic-commerce-interface/atomic-commerce-interface.js';
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1+
// Auto-generated file
12
export default {
2-
// Add entries as such when new components are added/moved to Lit.
3-
'atomic-icon': async () => await import('../common/atomic-icon/atomic-icon'),
4-
'atomic-component-error': async () =>
5-
await import('../common/atomic-component-error/atomic-component-error'),
63
'atomic-commerce-interface': async () =>
7-
await import('./atomic-commerce-interface/atomic-commerce-interface'),
4+
await import('./atomic-commerce-interface/atomic-commerce-interface.js'),
85
} as Record<string, () => Promise<unknown>>;
96

107
export type * from './index.js';
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Auto-generated file
2+
export {AtomicComponentError} from './atomic-component-error/atomic-component-error.js';
3+
export {AtomicIcon} from './atomic-icon/atomic-icon.js';
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Auto-generated file
2+
export default {
3+
'atomic-component-error': async () =>
4+
await import('./atomic-component-error/atomic-component-error.js'),
5+
'atomic-icon': async () => await import('./atomic-icon/atomic-icon.js'),
6+
} as Record<string, () => Promise<unknown>>;
7+
8+
export type * from './index.js';
+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export * from './search/index.js';
22
export * from './insight/index.js';
33
export * from './commerce/index.js';
4+
export * from './common/index.js';
45
export * from './ipx/index.js';
56
export * from './recommendations/index.js';
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
// Export the class of the components migrated to Lit here, like this:
2-
export {AtomicComponentError} from '../common/atomic-component-error/atomic-component-error';
3-
export {AtomicIcon} from '../common/atomic-icon/atomic-icon';
1+
// Auto-generated file
2+
export {};
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
export default {
2-
// Add entries as such when new components are added/moved to Lit.
3-
'atomic-icon': async () => await import('../common/atomic-icon/atomic-icon'),
4-
'atomic-component-error': async () =>
5-
await import('../common/atomic-component-error/atomic-component-error'),
6-
} as Record<string, () => Promise<unknown>>;
1+
// Auto-generated file
2+
export default {} as Record<string, () => Promise<unknown>>;
73

84
export type * from './index.js';

0 commit comments

Comments
 (0)