special-pages: integrated watch mode (#1317)

* special-pages: integrated watch mode

* special-pages dev workflow

* fixed docs

* fixing

* fixed locale path

Author: shakyShane

package-lock.json

@@ -1,2 +1,4 @@
 test-results
 playwright-report
+pages/**/public/dist
+/timestamp.json

special-pages/.gitignore

@@ -8,6 +8,7 @@ import { existsSync, cpSync, rmSync, readFileSync, writeFileSync } from 'node:fs
 import { buildSync } from 'esbuild';
 import { cwd, parseArgs } from '../scripts/script-utils.js';
 import inliner from 'web-resource-inliner';
+import { baseEsbuildOptions } from './opts.mjs';
 
 const CWD = cwd(import.meta.url);
 const ROOT = join(CWD, '../');
@@ -58,19 +59,19 @@ export const support = {
     },
 };
 
-/** @type {{src: string, dest: string, injectName: string}[]} */
+/** @type {{src: string, dest: string, dist: string, injectName: string}[]} */
 const copyJobs = [];
-/** @type {{entryPoints: string[], outputDir: string, injectName: string, pageName: string}[]} */
+/** @type {{outputDir: string, injectName: ImportMeta['injectName'], pageName: string}[]} */
 const buildJobs = [];
 /** @type {{src: string}[]} */
 const inlineJobs = [];
 const errors = [];
 const DRY_RUN = false;
 
 for (const [pageName, injectNames] of Object.entries(support)) {
-    const pageSrc = join(CWD, 'pages', pageName, 'src');
-    if (!existsSync(pageSrc)) {
-        errors.push(`${pageSrc} does not exist. Each page must have a 'src' directory`);
+    const publicDir = join(CWD, 'pages', pageName, 'public');
+    if (!existsSync(publicDir)) {
+        errors.push(`${publicDir} does not exist. Each page must have a 'src' directory`);
         continue;
     }
     for (const [injectName, jobs] of Object.entries(injectNames)) {
@@ -82,20 +83,17 @@ for (const [pageName, injectNames] of Object.entries(support)) {
         for (const job of jobs) {
             if (job === 'copy') {
                 copyJobs.push({
-                    src: pageSrc,
+                    src: publicDir,
+                    dist: join(publicDir, 'dist'),
                     dest: pageOutputDirectory,
                     injectName,
                 });
             }
             if (job === 'build-js') {
-                const entryPoints = [join(pageSrc, 'js', 'index.js'), join(pageSrc, 'js', 'inline.js')].filter((pathname) =>
-                    existsSync(pathname),
-                );
-                const outputDir = join(pageOutputDirectory, 'js');
+                const outputDir = join(pageOutputDirectory, 'dist');
                 buildJobs.push({
-                    entryPoints,
                     outputDir,
-                    injectName,
+                    injectName: /** @type {ImportMeta['injectName']} */ (injectName),
                     pageName,
                 });
             }
@@ -118,6 +116,10 @@ if (errors.length > 0) {
 for (const copyJob of copyJobs) {
     if (DEBUG) console.log('COPY:', relative(ROOT, copyJob.src), relative(ROOT, copyJob.dest));
     if (!DRY_RUN) {
+        rmSync(copyJob.dist, {
+            force: true,
+            recursive: true,
+        });
         rmSync(copyJob.dest, {
             force: true,
             recursive: true,
@@ -129,40 +131,12 @@ for (const copyJob of copyJobs) {
     }
 }
 for (const buildJob of buildJobs) {
-    if (DEBUG) console.log('BUILD:', buildJob.entryPoints, relative(ROOT, buildJob.outputDir));
+    if (DEBUG) console.log('BUILD:', buildJob);
     if (DEBUG) console.log('\t- import.meta.env: ', NODE_ENV);
     if (DEBUG) console.log('\t- import.meta.injectName: ', buildJob.injectName);
     if (!DRY_RUN) {
-        const output = buildSync({
-            entryPoints: buildJob.entryPoints,
-            outdir: buildJob.outputDir,
-            bundle: true,
-            // metafile: true,
-            // minify: true,
-            // splitting: true,
-            // external: ['../assets/img/*'],
-            format: 'iife',
-            sourcemap: NODE_ENV === 'development',
-            loader: {
-                '.js': 'jsx',
-                '.module.css': 'local-css',
-                '.svg': 'file',
-                '.data.svg': 'dataurl',
-                '.jpg': 'file',
-                '.png': 'file',
-                '.riv': 'file',
-            },
-            define: {
-                'import.meta.env': JSON.stringify(NODE_ENV),
-                'import.meta.injectName': JSON.stringify(buildJob.injectName),
-                'import.meta.pageName': JSON.stringify(buildJob.pageName),
-            },
-            dropLabels: buildJob.injectName === 'integration' ? [] : ['$INTEGRATION'],
-        });
-        if (output.metafile) {
-            const meta = JSON.stringify(output.metafile, null, 2);
-            writeFileSync(join(buildJob.outputDir, 'metafile.json'), meta);
-        }
+        const opts = baseEsbuildOptions(buildJob.pageName, buildJob.injectName, NODE_ENV, buildJob.outputDir);
+        buildSync(opts);
     }
 }
 for (const inlineJob of inlineJobs) {

special-pages/index.mjs

@@ -0,0 +1,44 @@
+import { join } from 'node:path';
+import { cwd } from '../scripts/script-utils.js';
+const CWD = cwd(import.meta.url);
+
+/**
+ * @param {string} page
+ * @param {ImportMeta['injectName']} injectName
+ * @param {'development' | 'production'} nodeEnv
+ * @param {string} [output] - optionally change the output folder
+ * @return {import('esbuild').BuildOptions}
+ */
+export function baseEsbuildOptions(page, injectName, nodeEnv, output) {
+    const pageDir = join(CWD, 'pages', page);
+    const publicDir = join(pageDir, 'public');
+    const srcDir = join(pageDir, 'src');
+    const distDir = output || join(publicDir, 'dist');
+    const entry = [join(srcDir, 'index.js'), join(srcDir, 'inline.js')];
+    return {
+        entryPoints: entry,
+        outdir: distDir,
+        bundle: true,
+        format: 'iife',
+        sourcemap: nodeEnv === 'development',
+        loader: {
+            '.js': 'jsx',
+            '.module.css': 'local-css',
+            '.svg': 'file',
+            '.data.svg': 'dataurl',
+            '.jpg': 'file',
+            '.png': 'file',
+            '.riv': 'file',
+            '.txt': 'file',
+        },
+        define: {
+            'import.meta.env': JSON.stringify(nodeEnv),
+            'import.meta.injectName': JSON.stringify(injectName),
+            'import.meta.pageName': JSON.stringify(page),
+        },
+        // prettier-ignore
+        dropLabels: injectName === 'integration'
+            ? ['$WATCH']
+            : ['$WATCH', '$INTEGRATION'],
+    };
+}

special-pages/opts.mjs

@@ -20,15 +20,16 @@
     "test.headed": "npm run test-int -- --headed",
     "test.ui": "npm run test-int -- --ui",
     "serve": "http-server -c-1 --port 3210 ../build/integration/pages",
-    "watch": "chokidar pages shared --initial -c 'npm run build.dev' --ignore 'pages/**/locales' --ignore 'pages/**/types'"
+    "watch": "node watch.mjs"
   },
   "license": "ISC",
   "devDependencies": {
     "@duckduckgo/messaging": "*",
     "esbuild": "^0.24.0",
     "http-server": "^14.1.1",
     "web-resource-inliner": "^6.0.1",
-    "fast-check": "^3.23.1"
+    "fast-check": "^3.23.1",
+    "chokidar": "^4.0.1"
   },
   "dependencies": {
     "preact": "^10.24.3",

special-pages/package.json

@@ -2,7 +2,7 @@
  * @typedef {import("./iframe").IframeFeature} IframeFeature
  */
 
-import { createYoutubeURLForError } from '../../src/js/utils.js';
+import { createYoutubeURLForError } from '../../src/utils.js';
 
 /**
  * @implements IframeFeature

special-pages/pages/duckplayer/app/features/click-capture.js

@@ -1,7 +1,7 @@
 /**
  * @typedef {import("./iframe").IframeFeature} IframeFeature
  */
-import { getValidVideoTitle } from '../../src/js/utils.js';
+import { getValidVideoTitle } from '../../src/utils.js';
 
 /**
  * @implements IframeFeature

special-pages/pages/duckplayer/app/features/title-capture.js

@@ -5,7 +5,7 @@ import { EnvironmentProvider, UpdateEnvironment, WillThrow } from '../../../shar
 import { TranslationProvider } from '../../../shared/components/TranslationsProvider.js';
 import { ErrorBoundary } from '../../../shared/components/ErrorBoundary.js';
 import { EmbedSettings } from './embed-settings.js';
-import enStrings from '../src/locales/en/duckplayer.json';
+import enStrings from '../public/locales/en/duckplayer.json';
 import { Settings } from './settings.js';
 import { SettingsProvider } from './providers/SettingsProvider.jsx';
 import { MessagingContext, TelemetryContext } from './types.js';
@@ -16,8 +16,8 @@ import { MobileApp } from './components/MobileApp.jsx';
 import { DesktopApp } from './components/DesktopApp.jsx';
 
 /**
- * @param {import("../src/js/index.js").DuckplayerPage} messaging
- * @param {import("../src/js/index.js").Telemetry} telemetry
+ * @param {import("../src/index.js").DuckplayerPage} messaging
+ * @param {import("../src/index.js").Telemetry} telemetry
  * @param {import("../../../shared/environment").Environment} baseEnvironment
  * @return {Promise<void>}
  */

special-pages/pages/duckplayer/app/index.js

@@ -1,7 +1,7 @@
 import { useContext } from 'preact/hooks';
 import { TranslationContext } from '../../../shared/components/TranslationsProvider.js';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import json from '../src/locales/en/duckplayer.json';
+import json from '../public/locales/en/duckplayer.json';
 import { createContext } from 'preact';
 
 /**
@@ -14,7 +14,7 @@ export function useTypedTranslation() {
     };
 }
 
-export const MessagingContext = createContext(/** @type {import("../src/js/index.js").DuckplayerPage} */ ({}));
+export const MessagingContext = createContext(/** @type {import("../src/index.js").DuckplayerPage} */ ({}));
 export const useMessaging = () => useContext(MessagingContext);
-export const TelemetryContext = createContext(/** @type {import("../src/js/index.js").Telemetry} */ ({}));
+export const TelemetryContext = createContext(/** @type {import("../src/index.js").Telemetry} */ ({}));
 export const useTelemetry = () => useContext(TelemetryContext);

special-pages/pages/duckplayer/app/types.js

@@ -4,11 +4,11 @@
     <title>Duck Player</title>
     <meta name="robots" content="noindex,nofollow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="js/inline.js"></script>
-    <link rel="stylesheet" href="./js/index.css" />
+    <script src="./dist/inline.js"></script>
+    <link rel="stylesheet" href="./dist/index.css" />
 </head>
 <body>
 <div id="app"></div>
-<script type="module" src="js/index.js"></script>
+<script type="module" src="./dist/index.js"></script>
 </body>
 </html>