diff --git a/scripts/build.mjs b/scripts/build.mjs index 2927b45e4..c2246e735 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -26,21 +26,35 @@ const RELEASE_FILES = [ ]; async function runTask(tag, cmd) { - report.stdout.info(`[${tag}] Working...`); + const frames = [' ', '. ', '.. ', '...']; + let frame = 0; + + const writeProgress = (dots) => + report.stdout.info(`\r[${tag}] Processing${dots}`); + + writeProgress(frames[0]); + const timer = setInterval(() => { + frame = (frame + 1) % frames.length; + writeProgress(frames[frame]); + }, 300); try { await cmd(); + clearInterval(timer); report.stdout.clearLine(); - report.stdout.success(`[${tag}] Done\n`); + report.success(`[${tag}] Done!`); } catch (e) { - report.error(`[${tag}] Failed with: ${e.message}`); + clearInterval(timer); + report.error(`[${tag}] Failed with: ${e.stderr || e.message}`); + process.exit(1); } } (async () => { await runTask('Clean up', () => exec('npm run clean')); - await runTask('Component styles', () => buildComponents(true)); - await runTask('Themes', () => buildThemes(true)); + await runTask('Styles', () => + Promise.all([buildComponents(true), buildThemes(true)]) + ); // https://github.com/microsoft/TypeScript/issues/14619 await runTask('Components', () => @@ -50,46 +64,48 @@ async function runTask(tag, cmd) { ); await runTask('Copying release files', async () => { - Promise.all([ + await Promise.all([ copyFile('scripts/_package.json', DEST_DIR('package.json')), ...RELEASE_FILES.map((file) => copyFile(file, DEST_DIR(file))), ]); }); - await runTask('VSCode custom data + Web types', () => - Promise.all([ - writeFile( - DEST_DIR('igniteui-webcomponents.css-data.json'), - getVsCodeCssCustomData(customElements, { - hideCssPartsDocs: false, - hideCssPropertiesDocs: false, - hideLogs: true, - }), - 'utf8' - ), - writeFile( - DEST_DIR('igniteui-webcomponents.html-data.json'), - getVsCodeHtmlCustomData(customElements, { - hideMethodDocs: true, - hideLogs: true, - }), - 'utf8' - ), - writeFile( - DEST_DIR('web-types.json'), - getWebTypesData(customElements, { - hideMethodDocs: true, - hideCssPartsDocs: false, - hideLogs: true, - }), - 'utf8' - ), - ]) + await runTask( + 'VSCode custom data + Web types', + async () => + await Promise.all([ + writeFile( + DEST_DIR('igniteui-webcomponents.css-data.json'), + getVsCodeCssCustomData(customElements, { + hideCssPartsDocs: false, + hideCssPropertiesDocs: false, + hideLogs: true, + }), + 'utf8' + ), + writeFile( + DEST_DIR('igniteui-webcomponents.html-data.json'), + getVsCodeHtmlCustomData(customElements, { + hideMethodDocs: true, + hideLogs: true, + }), + 'utf8' + ), + writeFile( + DEST_DIR('web-types.json'), + getWebTypesData(customElements, { + hideMethodDocs: true, + hideCssPartsDocs: false, + hideLogs: true, + }), + 'utf8' + ), + ]) ); - await runTask('Copy skills directory', () => { - cp('skills', DEST_DIR('skills'), { recursive: true }); + await runTask('Copying skills directory', async () => { + await cp('skills', DEST_DIR('skills'), { recursive: true }); }); - report.success('Done! šŸŽ‰'); + report.success('\nšŸŽ‰ Done! šŸŽ‰'); })(); diff --git a/scripts/report.mjs b/scripts/report.mjs index 7bfe110e7..a8c2fd740 100644 --- a/scripts/report.mjs +++ b/scripts/report.mjs @@ -1,19 +1,21 @@ import { stdout } from 'node:process'; -import { format, styleText } from 'node:util'; +import { styleText } from 'node:util'; export default { error: (s) => console.error(styleText('red', s)), - success: (s) => console.info(styleText('green', s)), + success: (s) => console.log(styleText('green', s)), warn: (s) => console.warn(styleText('yellow', s)), - info: (s) => console.info(styleText('cyan', s)), + info: (s) => console.log(styleText('cyan', s)), stdout: { clearLine: () => { - stdout.clearLine(0); - stdout.cursorTo(0); + if (stdout.isTTY) { + stdout.clearLine(0); + stdout.cursorTo(0); + } }, - success: (s) => stdout.write(format(styleText('green', s))), - warn: (s) => stdout.write(format(styleText('yellow', s))), - info: (s) => stdout.write(format(styleText('cyan', s))), + success: (s) => stdout.write(styleText('green', s)), + warn: (s) => stdout.write(styleText('yellow', s)), + info: (s) => stdout.write(styleText('cyan', s)), }, }; diff --git a/scripts/sass.mjs b/scripts/sass.mjs index b0997a55d..b46113344 100644 --- a/scripts/sass.mjs +++ b/scripts/sass.mjs @@ -1,6 +1,5 @@ -import { mkdir, readFile, writeFile, glob } from 'node:fs/promises'; +import { mkdir, writeFile, glob } from 'node:fs/promises'; import path from 'node:path'; -import { resolve } from 'node:path'; import { fileURLToPath } from 'node:url'; import autoprefixer from 'autoprefixer'; import postcss from 'postcss'; @@ -22,14 +21,13 @@ const stripComments = () => { }; stripComments.postcss = true; -const _template = await readFile( - resolve(process.argv[1], '../styles.tmpl'), - 'utf8' -); const _postProcessor = postcss([autoprefixer, stripComments]); export function fromTemplate(content) { - return _template.replace(/<%\s*content\s*%>/, content); + return ` + import { css } from 'lit'; + export const styles = css\`${content}\`; + `; } export async function compileSass(src, compiler) { @@ -61,9 +59,13 @@ export async function buildThemes(isProduction = false) { if (isProduction) { await mkdir(path.dirname(outputFile), { recursive: true }); - writeFile(outputFile, await compileSass(sassFile, compiler), 'utf-8'); + await writeFile( + outputFile, + await compileSass(sassFile, compiler), + 'utf-8' + ); } else { - writeFile( + await writeFile( outputFile, fromTemplate(await compileSass(sassFile, compiler)), 'utf-8' @@ -99,10 +101,10 @@ export async function buildComponents(isProduction = false) { try { await Promise.all( - paths.map(async (path) => + paths.map(async (filePath) => writeFile( - path.replace(/\.scss$/, '.css.ts'), - fromTemplate(await compileSass(path, compiler)), + filePath.replace(/\.scss$/, '.css.ts'), + fromTemplate(await compileSass(filePath, compiler)), 'utf-8' ) ) diff --git a/scripts/styles.tmpl b/scripts/styles.tmpl deleted file mode 100644 index 45c1422ce..000000000 --- a/scripts/styles.tmpl +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from 'lit'; - -export const styles = css`<% content %>`;