From e07c99fa21335f94f84b7af5f9a0f9d22a9665d4 Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Mon, 10 Nov 2025 18:16:16 -0500 Subject: [PATCH] working on pro build reloadS --- packages/webawesome/docs/.eleventy.js | 5 +- packages/webawesome/scripts/build.js | 165 ++++++++++-------- .../src/components/button/button.css | 4 + 3 files changed, 99 insertions(+), 75 deletions(-) diff --git a/packages/webawesome/docs/.eleventy.js b/packages/webawesome/docs/.eleventy.js index 873e5ba77..e7165707e 100644 --- a/packages/webawesome/docs/.eleventy.js +++ b/packages/webawesome/docs/.eleventy.js @@ -38,9 +38,8 @@ export default async function (eleventyConfig) { const stylesheets = path.join(distDir, 'styles'); eleventyConfig.addWatchTarget(customElementsManifest); - // Not sure why this is needed :think: - eleventyConfig.addWatchTarget(distDir); - eleventyConfig.setWatchThrottleWaitTime(50); // in milliseconds + // eleventyConfig.addWatchTarget(path.join(distDir, "**")); + eleventyConfig.setWatchThrottleWaitTime(40); // in milliseconds eleventyConfig.on('eleventy.beforeWatch', async function (changedFiles) { let updatePackageData = false; diff --git a/packages/webawesome/scripts/build.js b/packages/webawesome/scripts/build.js index f9c6112ef..4df17224f 100644 --- a/packages/webawesome/scripts/build.js +++ b/packages/webawesome/scripts/build.js @@ -401,62 +401,73 @@ export async function build(options = {}) { watcher.on(evt, handleWatchEvent(evt)); }); function handleWatchEvent(evt) { + let debounceTime = 20 + let timer = null return async filename => { - const changedFile = relative(getRootDir(), filename); - if (evt === 'change') { - spinner.info(`File modified ${chalk.gray(`(${changedFile})`)}`); - } else if (evt === 'unlink') { - spinner.info(`File deleted ${chalk.gray(`(${changedFile})`)}`); - } else if (evt === 'add') { - spinner.info(`File added ${chalk.gray(`(${changedFile})`)}`); - } - - try { - const isTestFile = filename.includes('.test.ts'); - const isCssStylesheet = filename.includes('.css'); - const isComponent = - filename.includes('components/') && filename.includes('.ts') && !isCssStylesheet && !isTestFile; - - // Re-bundle when relevant files change - if (isTestFile) { - return; + return new Promise((resolve) => { + if (timer) { + clearTimeout(timer) } + timer = setTimeout(async () => { + const changedFile = relative(getRootDir(), filename); - if (typeof options.beforeWatchEvent === 'function') { - await options.beforeWatchEvent(evt, filename); - } + if (evt === 'change') { + spinner.info(`File modified ${chalk.gray(`(${changedFile})`)}`); + } else if (evt === 'unlink') { + spinner.info(`File deleted ${chalk.gray(`(${changedFile})`)}`); + } else if (evt === 'add') { + spinner.info(`File added ${chalk.gray(`(${changedFile})`)}`); + } - // Copy stylesheets when CSS files change - if (isCssStylesheet) { - await generateStyles(); - } + try { + const isTestFile = filename.includes('.test.ts'); + const isCssStylesheet = filename.includes('.css'); + const isComponent = + filename.includes('components/') && filename.includes('.ts') && !isCssStylesheet && !isTestFile; - // Regenerate metadata when components change - if (isComponent) { - await generateManifest(); - } + // Re-bundle when relevant files change + if (isTestFile) { + return; + } - // copy everything to unbundled before we generate bundles. - await copy(getCdnDir(), getDistDir(), { overwrite: true }); - await regenerateBundle(); + if (typeof options.beforeWatchEvent === 'function') { + await options.beforeWatchEvent(evt, filename); + } - // This needs to be outside of "isComponent" check because SSR needs to run on CSS files too. - await generateDocs({ spinner }); + // Copy stylesheets when CSS files change + if (isCssStylesheet) { + await generateStyles(); + } - if (typeof options.afterWatchEvent === 'function') { - await options.afterWatchEvent(evt, filename); - } + // Regenerate metadata when components change + if (isComponent) { + await generateManifest(); + } - reload(); - } catch (err) { - console.error(chalk.red(err)); + // copy everything to unbundled before we generate bundles. + await copy(getCdnDir(), getDistDir(), { overwrite: true }); + await regenerateBundle(); - if (!isDeveloping) { - process.exit(1); - } - } - }; + // This needs to be outside of "isComponent" check because SSR needs to run on CSS files too. + await generateDocs({ spinner }); + + if (typeof options.afterWatchEvent === 'function') { + await options.afterWatchEvent(evt, filename); + } + + reload(); + resolve() + } catch (err) { + console.error(chalk.red(err)); + + if (!isDeveloping) { + process.exit(1); + } + } + }, debounceTime) + }) + } } }); @@ -469,36 +480,46 @@ export async function build(options = {}) { }); function handleWatchEvent(evt) { - return async filename => { - const changedFile = relative(getRootDir(), filename); - - let message = ''; - if (evt === 'change') { - message = chalk.blue(`File modified ${chalk.gray(`(${changedFile})`)}`); - } else if (evt === 'unlink') { - message = chalk.red(`File deleted ${chalk.gray(`(${changedFile})`)}`); - } else if (evt === 'add') { - message = chalk.green(`File added ${chalk.gray(`(${changedFile})`)}`); - } - - if (message) { - if (spinner) { - spinner.info(message); - } else { - console.log(message); + let debounceTime = 20 + let timer = null + return filename => { + return new Promise((resolve) => { + if (timer) { + clearTimeout(timer) } - } + timer = setTimeout(async () => { + const changedFile = relative(getRootDir(), filename); - if (typeof options.beforeWatchEvent === 'function') { - await options.beforeWatchEvent(evt, filename); - } - await generateDocs({ spinner }); + let message = ''; + if (evt === 'change') { + message = chalk.blue(`File modified ${chalk.gray(`(${changedFile})`)}`); + } else if (evt === 'unlink') { + message = chalk.red(`File deleted ${chalk.gray(`(${changedFile})`)}`); + } else if (evt === 'add') { + message = chalk.green(`File added ${chalk.gray(`(${changedFile})`)}`); + } - if (typeof options.afterWatchEvent === 'function') { - await options.afterWatchEvent(evt, filename); - } - reload(); - }; + if (message) { + if (spinner) { + spinner.info(message); + } else { + console.log(message); + } + } + + if (typeof options.beforeWatchEvent === 'function') { + await options.beforeWatchEvent(evt, filename); + } + await generateDocs({ spinner }); + + if (typeof options.afterWatchEvent === 'function') { + await options.afterWatchEvent(evt, filename); + } + reload(); + resolve() + }, debounceTime) + }) + } } }); } diff --git a/packages/webawesome/src/components/button/button.css b/packages/webawesome/src/components/button/button.css index 7660f5c0e..e9f24be08 100644 --- a/packages/webawesome/src/components/button/button.css +++ b/packages/webawesome/src/components/button/button.css @@ -17,6 +17,10 @@ } } +:host { + outline: 8px solid tomato !important; +} + .button { display: inline-flex; align-items: center;