introduce before watch and after watch events (#1199)

* add before / after watch events so pro can properly incrementally build

* add events for pro / app

* add extra hooks for non-wa dev

* add old new line

* use package-lock.json from next

* npm install

* prettier

package-lock.json

@@ -13988,7 +13988,6 @@
         "qr-creator": "^1.0.0",
         "style-observer": "^0.0.7"
       },
-      "devDependencies": {},
       "engines": {
         "node": ">=14.17.0"
       }
@@ -14004,14 +14003,32 @@
         "@shoelace-style/localize": "^3.2.1",
         "composed-offset-position": "^0.0.6",
         "lit": "^3.2.1",
+        "nanoid": "^5.1.5",
         "qr-creator": "^1.0.0",
         "style-observer": "^0.0.7"
       },
-      "devDependencies": {},
       "engines": {
         "node": ">=14.17.0"
       }
     },
+    "packages/webawesome-pro/node_modules/nanoid": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
+      "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
     "packages/webawesome/node_modules/nanoid": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",

packages/webawesome/docs/.eleventy.js

@@ -261,13 +261,10 @@ export default async function (eleventyConfig) {
   //   });
   // }
 
-  if (!isDev) {
+  // For a server build, we expect a server to run the second transform.
+  // For dev builds, we run the second transform in a middleware.
+  if (!isDev && !serverBuild) {
     eleventyConfig.addTransform('simulate-webawesome-app', function (content) {
-      // For a server build, we expect a server to run the second transform.
-      if (serverBuild) {
-        return content;
-      }
-
       // Only run the transform on files nunjucks would transform.
       if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
         return content;

packages/webawesome/scripts/build.js

@@ -34,7 +34,8 @@ const isDeveloping = process.argv.includes('--develop');
  * @typedef {Object} BuildOptions
  * @property {Array<string>} [watchedSrcDirectories]
  * @property {Array<string>} [watchedDocsDirectories]
- * @property {(eventName: "change" | "add" | "unlink", filePath: string) => unknown} [onWatchEvent]
+ * @property {(eventName: "change" | "add" | "unlink", filePath: string) => unknown} [beforeWatchEvent]
+ * @property {(eventName: "change" | "add" | "unlink", filePath: string) => unknown} [afterWatchEvent]
  */
 
 /**
@@ -49,8 +50,6 @@ export async function build(options = {}) {
     options.watchedDocsDirectories = [getDocsDir()];
   }
 
-  function measureStep() {}
-
   /**
    * Runs the full build.
    */
@@ -122,6 +121,11 @@ export async function build(options = {}) {
    * Generates React wrappers for all components.
    */
   function generateReactWrappers() {
+    // Used by webawesome-app to make re-rendering not miserable with extra React file generation.
+    if (process.env.SKIP_SLOW_STEPS === 'true') {
+      return Promise.resolve();
+    }
+
     spinner.start('Generating React wrappers');
 
     try {
@@ -156,6 +160,11 @@ export async function build(options = {}) {
    * Runs TypeScript to generate types.
    */
   async function generateTypes() {
+    // Used by webawesome-app to make re-rendering not miserable with extra TS compilations.
+    if (process.env.SKIP_SLOW_STEPS === 'true') {
+      return Promise.resolve();
+    }
+
     spinner.start('Running the TypeScript compiler');
 
     const cwd = process.cwd();
@@ -377,12 +386,7 @@ export async function build(options = {}) {
       },
     );
 
-    // TODO: Should probably listen for all of these instead of just "change"
-    const watchEvents = [
-      'change',
-      // "unlink",
-      // "add"
-    ];
+    const watchEvents = ['change', 'unlink', 'add'];
     // Rebuild and reload when source files change
     options.watchedSrcDirectories.forEach(dir => {
       const watcher = bs.watch(join(dir, '**', '!(*.test).*'));
@@ -392,7 +396,15 @@ export async function build(options = {}) {
       });
       function handleWatchEvent(evt) {
         return async filename => {
-          spinner.info(`File modified ${chalk.gray(`(${relative(getRootDir(), filename)})`)}`);
+          const changedFile = relative(getRootDir(), filename);
+
+          if (evt === 'changed') {
+            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');
@@ -405,8 +417,8 @@ export async function build(options = {}) {
               return;
             }
 
-            if (typeof options.onWatchEvent === 'function') {
-              await options.onWatchEvent(evt, filename);
+            if (typeof options.beforeWatchEvent === 'function') {
+              await options.beforeWatchEvent(evt, filename);
             }
 
             // Copy stylesheets when CSS files change
@@ -426,6 +438,10 @@ export async function build(options = {}) {
             // 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();
           } catch (err) {
             console.error(chalk.red(err));
@@ -449,10 +465,14 @@ export async function build(options = {}) {
       function handleWatchEvent(evt) {
         return async filename => {
           spinner.info(`File modified ${chalk.gray(`(${relative(getRootDir(), filename)})`)}`);
-          if (typeof options.onWatchEvent === 'function') {
-            await options.onWatchEvent(evt, filename);
+          if (typeof options.beforeWatchEvent === 'function') {
+            await options.beforeWatchEvent(evt, filename);
           }
           await generateDocs({ spinner });
+
+          if (typeof options.beforeWatchEvent === 'function') {
+            await options.afterWatchEvent(evt, filename);
+          }
           reload();
         };
       }

packages/webawesome/scripts/docs.js

@@ -72,7 +72,6 @@ export async function generateDocs(options = {}) {
   isDeveloping ??= process.argv.includes('--develop');
   isIncremental ??= isDeveloping && !process.argv.includes('--no-incremental');
 
-  let eleventy = globalThis.eleventy;
   /**
    * Used by the webawesome-app to skip doc generation since it will do its own.
    */
@@ -80,6 +79,8 @@ export async function generateDocs(options = {}) {
     return;
   }
 
+  let eleventy = globalThis.eleventy;
+
   spinner?.start?.('Writing the docs');
 
   const outputs = {
@@ -118,7 +119,7 @@ export async function generateDocs(options = {}) {
           return !line.includes('Watching');
         });
         const lastLine = info[info.length - 1];
-        output = chalk.gray(`(${lastLine})`);
+        output = chalk.gray(`(${info.join('')})`);
         eleventy.logger.logger.reset();
       }
     } else {
@@ -137,13 +138,21 @@ export async function generateDocs(options = {}) {
     if (!isDeveloping) {
       await copy(getCdnDir(), join(getSiteDir(), 'dist'));
     }
-    spinner?.succeed?.(`Writing the docs ${output}`);
+
+    if (spinner) {
+      spinner.succeed(`Writing the docs ${output}`);
+    } else {
+      console.log(`Writing the docs ${output}`);
+    }
   } catch (error) {
     console.warn = originalWarn;
 
-    console.error('\n\n' + chalk.red(error) + '\n');
+    if (spinner) {
+      spinner.fail(chalk.red(`Error while writing the docs.`));
+    } else {
+      console.error(chalk.red(`Error while writing the docs.`));
+    }
 
-    spinner?.fail?.(chalk.red(`Error while writing the docs.`));
     if (!isDeveloping) {
       process.exit(1);
     }