toolaby 1.4.2 → 1.4.3

package/bin.mjs

@@ -34,7 +34,7 @@ import { createHmac, randomBytes } from 'node:crypto';
 import { wireManifest, WORKER_LINES } from './lib/manifest.js';
 import { detectProject, CODE_FILES, filesToWrite, STALE_FILES, BUILD_COPY_NOTE } from './lib/project.js';
 
-const VERSION = '1.4.2';
+const VERSION = '1.4.3';
 const CLIENT_ID = 'toolaby-cli';
 const argv = process.argv.slice(2);
 // `--version` and `--help` are commands of their own; every other command is the first bare word.
@@ -203,19 +203,22 @@ async function wire() {
   // Nothing recognised: nothing is written and nothing guessed. A manifest below the top is where to point --into; otherwise the Set up page's Do it myself has the files and the three things to paste.
   if (project.kind === 'unknown') fail(`${dir} has no manifest.json at the top and is not a WXT, CRXJS or Plasmo project${project.foundManifest ? ` — there is one at ${project.foundManifest}: run this with --into ${dirname(project.foundManifest) || '.'}` : ''}.\n  Nothing was written. For a layout of your own, the tool's Set up page → Do it myself has the files and the three things to paste.`);
 
-  // The extension's own popup: the manifest's, or — wired before — the one the existing configuration remembers.
+  // The extension's own popup and side panel: the manifest's, or — wired before — what the existing configuration remembers.
   const configPath = join(dir, `${project.codeDir}toolaby.config.js`);
-  const remembered = existsSync(configPath) ? readFileSync(configPath, 'utf8').match(/appPopup:\s*'([^']*)'/)?.[1] || null : null;
-  const wiring = project.manifestFile && manifest ? wireManifest(manifest, { site, has, remembered, manifestKey }) : null;
+  const oldConfig = existsSync(configPath) ? readFileSync(configPath, 'utf8') : '';
+  const remembered = oldConfig.match(/appPopup:\s*'([^']*)'/)?.[1] || null;
+  const rememberedSidePanel = oldConfig.match(/appSidePanel:\s*'([^']*)'/)?.[1] || null;
+  const wiring = project.manifestFile && manifest ? wireManifest(manifest, { site, has, remembered, rememberedSidePanel, manifestKey }) : null;
   const appPopup = wiring ? wiring.appPopup : project.wrapper ? (project.appPopup ?? remembered) : null;
-  const targets = filesToWrite(project, appPopup);
+  const appSidePanel = wiring ? wiring.appSidePanel : project.wrapper ? (project.appSidePanel ?? rememberedSidePanel) : null;
+  const targets = filesToWrite(project, appPopup, appSidePanel);
   const present = targets.filter((f) => existsSync(join(dir, f)));
   if (present.length && !flag('--force')) fail(`${present.join(', ')} already in ${dir}; add --force to replace them.`);
   const write = (rel, content) => { mkdirSync(dirname(join(dir, rel)), { recursive: true }); writeFileSync(join(dir, rel), content); };
   // A command older than the Wall asks for files the Wall no longer hands out: said, with the way to the current one, rather than a crash.
   const missing = targets.map((p) => p.split('/').pop()).filter((name) => typeof plan.files[name] !== 'string');
   if (missing.length) fail(`This command (${VERSION}) is older than the Wall at ${wall}: it expects ${missing.join(', ')}, which the Wall no longer hands out.\n  Update it: npm install -g toolaby@latest — or run the Wall's own copy: npx --yes ${wall}/toolaby.tgz ${command} ${slug}`);
-  for (const path of targets) write(path, plan.files[path.split('/').pop()].replaceAll('__APP_POPUP__', appPopup ?? ''));
+  for (const path of targets) write(path, plan.files[path.split('/').pop()].replaceAll('__APP_POPUP__', appPopup ?? '').replaceAll('__APP_SIDE_PANEL__', appSidePanel ?? ''));
   // What an earlier wiring wrote and this one does not, wherever it put them: taken away, so nothing stale is shipped.
   const removed = [];
   for (const at of new Set([project.codeDir, project.popupDir, 'public/', 'src/public/'])) for (const f of STALE_FILES) { const p = join(dir, `${at}${f}`); if (existsSync(p)) { unlinkSync(p); removed.push(`${at}${f}`); } }
@@ -242,8 +245,8 @@ async function wire() {
   if (project.built) out(`  ${BUILD_COPY_NOTE}\n`);
   out(`  Next: ${project.kind === 'plain' && !project.built ? '' : 'build or start the dev server, then '}chrome://extensions → reload it. The tool's Set up page says "checked in" the moment it starts.`);
   if (project.note) out(`  ${project.note}\n`);
-  else if (appPopup) out(`  Your popup opens as before; what the Free plan holds (Pricing, in the dashboard) decides when the Wall's panel takes its place.\n`);
-  else out(`  No popup to stand in front of: count a use where your feature runs — the Set up page shows the line.\n`);
+  else if (appPopup || appSidePanel) out(`  Your ${appPopup && appSidePanel ? 'popup and side panel open' : appSidePanel ? 'side panel opens' : 'popup opens'} as before; what the Free plan holds (Pricing, in the dashboard) decides when the Wall's panel takes its place.\n`);
+  else out(`  No popup or side panel to stand in front of: count a use where your feature runs — the Set up page shows the line.\n`);
 }
 
 async function create() {
@@ -253,7 +256,7 @@ async function create() {
   if (existsSync(dir)) fail(`${dir} already exists`);
   const plan = await filesFor(slug, true);
   const write = (rel, content) => { mkdirSync(dirname(join(dir, rel)), { recursive: true }); writeFileSync(join(dir, rel), content); };
-  for (const f of ['manifest.json', ...CODE_FILES, 'background.js', 'popup.html', 'popup.css', 'popup.js', 'README.md']) write(f, plan.files[f].replaceAll('__APP_POPUP__', ''));
+  for (const f of ['manifest.json', ...CODE_FILES, 'background.js', 'popup.html', 'popup.css', 'popup.js', 'README.md']) write(f, plan.files[f].replaceAll('__APP_POPUP__', '').replaceAll('__APP_SIDE_PANEL__', ''));
   for (const s of [16, 48, 128]) {
     const res = await fetch(`${wall}/boilerplate/icons/icon${s}.png`);
     write(join('icons', `icon${s}.png`), Buffer.from(await res.arrayBuffer()));

package/lib/manifest.js

@@ -6,7 +6,8 @@
  * the storage permission; the platform's address as a host permission and
  * for externally_connectable (the site's sign-in and purchase handoffs); a
  * module service worker when the manifest names none, or names one that is
- * not there; the Wall's popup in front of the extension's own, which the
+ * not there; the Wall's popup in front of the extension's own — and its
+ * side panel in front of the extension's side panel — which the
  * configuration then remembers; and the extension's identity — the `key`
  * that fixes its id, which the tool key is bound to (identity.ts) — unless
  * the manifest has one of its own, which is then the identity the platform
@@ -14,6 +15,7 @@
  * write.
  */
 export const WALL_POPUP = 'toolaby-popup.html';
+export const WALL_SIDE_PANEL = 'toolaby-sidepanel.html';
 export const WORKER_LINES = "import { toolaby } from './toolaby.js';\n\ntoolaby.startBackground();\n";
 export function wireManifest(input, o) {
     const manifest = JSON.parse(JSON.stringify(input));
@@ -47,6 +49,15 @@ export function wireManifest(input, o) {
         manifest.action = { ...manifest.action, default_popup: WALL_POPUP };
         did.push(`the Wall's popup in front of ${appPopup}: it opens on to yours while the device may, and shows the panel when it may not`);
     }
+    // The extension's own side panel, the same way: the Wall's in front, with the permission a side panel needs.
+    const declaredPanel = typeof manifest.side_panel?.default_path === 'string' ? manifest.side_panel.default_path : null;
+    const appSidePanel = declaredPanel && declaredPanel !== WALL_SIDE_PANEL ? declaredPanel : declaredPanel === WALL_SIDE_PANEL ? (o.rememberedSidePanel || null) : null;
+    if (appSidePanel && declaredPanel !== WALL_SIDE_PANEL) {
+        manifest.side_panel = { ...manifest.side_panel, default_path: WALL_SIDE_PANEL };
+        if (!(Array.isArray(manifest.permissions) && manifest.permissions.includes('sidePanel')))
+            manifest.permissions = add(manifest.permissions, 'sidePanel');
+        did.push(`the Wall's side panel in front of ${appSidePanel}: the same as the popup, at the panel's width`);
+    }
     const named = typeof manifest.background?.service_worker === 'string' && manifest.background.service_worker.trim() ? manifest.background.service_worker.trim() : null;
     let writeWorker = null;
     let ownWorker = null;
@@ -58,5 +69,5 @@ export function wireManifest(input, o) {
     else {
         ownWorker = { file: named, classic: manifest.background?.type !== 'module' };
     }
-    return { manifest, did, writeWorker, ownWorker, appPopup, manifestKey };
+    return { manifest, did, writeWorker, ownWorker, appPopup, appSidePanel, manifestKey };
 }

package/lib/project.js

@@ -1,19 +1,22 @@
 // Generated from wall/src/packages/wiring/project.ts by wall/scripts/pack-create.mjs — edit there.
 /** What to tell a developer whose build ships the extension — the Wire button, the command and the Set up page all say it in these words. */
-export const BUILD_COPY_NOTE = 'A build ships this extension: make sure it copies the platform\'s files to its output — toolaby.js, toolaby.config.js and toolaby-popup.html — the way it copies your popup.html.';
+export const BUILD_COPY_NOTE = 'A build ships this extension: make sure it copies the platform\'s files to its output — toolaby.js, toolaby.config.js and toolaby-popup.html (toolaby-sidepanel.html too, with a side panel) — the way it copies your popup.html.';
 /** Always written, where the build imports from: the platform as one file (the client and the popup UI), its config, its types. */
 export const CODE_FILES = ['toolaby.config.js', 'toolaby.js', 'toolaby.d.ts'];
 /** Beside the client when the build generates the manifest: the fragment it spreads in, derived from the key (boilerplate/toolaby.manifest.js). */
 export const MANIFEST_HELPER = ['toolaby.manifest.js', 'toolaby.manifest.d.ts'];
 /** The Wall's popup: a shell, and the line that mounts it from toolaby.js beside it (an extension page may not run a script inline). */
 export const POPUP_FILES = ['toolaby-popup.html', 'toolaby-popup.js'];
+/** The Wall's side panel: the same page at the panel's width, the same two files. */
+export const SIDE_PANEL_FILES = ['toolaby-sidepanel.html', 'toolaby-sidepanel.js'];
 /** What earlier wirings wrote and this one does not: an upgrade takes them away, wherever a wiring put them. */
 export const STALE_FILES = ['toolaby-client.module.js', 'paywall.js', 'paywall.css', 'toolaby-popup.css', 'toolaby-account.js'];
-/** Every file a wiring writes, with its path: the code files, and — with a popup to stand in front of — the Wall's popup and, beside it, the panel. */
-export const filesToWrite = (p, appPopup) => [
+/** Every file a wiring writes, with its path: the code files, and — with a popup or a side panel to stand in front of — the Wall's shell for it. */
+export const filesToWrite = (p, appPopup, appSidePanel = null) => [
     ...CODE_FILES.map((f) => `${p.codeDir}${f}`),
     ...(p.manifestFile ? [] : MANIFEST_HELPER.map((f) => `${p.codeDir}${f}`)),
     ...(appPopup ? POPUP_FILES.map((f) => `${p.popupDir}${f}`) : []),
+    ...(appSidePanel ? SIDE_PANEL_FILES.map((f) => `${p.popupDir}${f}`) : []),
     ...(p.extraFiles ?? []).map((f) => f.to),
 ];
 /** The import of toolaby.js from a file at `from`, both relative to the root. */
@@ -37,12 +40,14 @@ export function detectProject(o) {
         const worker = first(has, [`${src}entrypoints/background.ts`, `${src}entrypoints/background.js`, `${src}entrypoints/background/index.ts`, `${src}entrypoints/background/index.js`]);
         const popup = first(has, [`${src}entrypoints/popup.html`, `${src}entrypoints/popup/index.html`]);
         const appPopup = popup ? 'popup.html' : null;
+        const sidePanel = first(has, [`${src}entrypoints/sidepanel.html`, `${src}entrypoints/sidepanel/index.html`]);
+        const appSidePanel = sidePanel ? 'sidepanel.html' : null;
         const workerFile = worker ?? `${src}entrypoints/background.ts`;
         const workerLines = `import { toolaby } from '${importPath(workerFile)}';\n\nexport default defineBackground(() => {\n  toolaby.startBackground();\n});\n`;
         // WXT's extension point: a module in modules/, loaded by WXT itself. It merges the manifest, puts the Wall's popup in
         // front, and starts the platform in the background — yours, or its own when there is none. Nothing to paste.
         return {
-            kind: 'wxt', label: 'WXT', codeDir: '', popupDir: '', manifestFile: null, wrapper: true, appPopup, worker, built: false, foundManifest: null,
+            kind: 'wxt', label: 'WXT', codeDir: '', popupDir: '', manifestFile: null, wrapper: true, appPopup, appSidePanel, worker, built: false, foundManifest: null,
             createWorker: null,
             workerLines, snippets: [],
             extraFiles: [{ from: 'toolaby.wxt.ts', to: 'modules/toolaby.wxt.ts' }, { from: 'toolaby.background.js', to: 'toolaby.background.js' }],
@@ -58,7 +63,7 @@ export function detectProject(o) {
         const workerLines = `import { toolaby } from '${importPath(workerFile)}';\n\ntoolaby.startBackground();\n`;
         const code = JSON.stringify({ manifest: { ...(o.manifestKey ? { key: o.manifestKey } : {}), permissions: ['storage'], host_permissions: [`${site}/*`], externally_connectable: { matches: [`${site}/*`] } } }, null, 2).replace(/^\{\n|\n\}$/g, '');
         return {
-            kind: 'plasmo', label: 'Plasmo', codeDir: '', popupDir: '', manifestFile: null, wrapper: false, appPopup: null, worker, built: false, foundManifest: null,
+            kind: 'plasmo', label: 'Plasmo', codeDir: '', popupDir: '', manifestFile: null, wrapper: false, appPopup: null, appSidePanel: null, worker, built: false, foundManifest: null,
             createWorker: worker ? null : { file: workerFile, content: workerLines },
             workerLines, snippets: [{ file: 'package.json', language: 'json', code }],
             note: 'Plasmo builds only the pages its manifest names, so the Wall\'s popup cannot stand in front of yours: ask the gate in your popup — the lines are in the docs, under Plasmo.',
@@ -69,6 +74,8 @@ export function detectProject(o) {
         const source = o.manifestSource ?? '';
         const declared = source.match(/default_popup:\s*['"]([^'"]+)['"]/)?.[1] ?? null;
         const appPopup = declared && declared !== 'toolaby-popup.html' ? declared : null;
+        const declaredPanel = source.match(/default_path:\s*['"]([^'"]+)['"]/)?.[1] ?? null;
+        const appSidePanel = declaredPanel && declaredPanel !== 'toolaby-sidepanel.html' ? declaredPanel : null;
         const worker = source.match(/service_worker:\s*['"]([^'"]+)['"]/)?.[1] ?? first(has, ['src/background.ts', 'src/background.js', 'background.ts', 'background.js']);
         const workerFile = worker ?? 'src/background.ts';
         const workerLines = `import { toolaby } from '${importPath(workerFile)}';\n\ntoolaby.startBackground();\n`;
@@ -78,21 +85,23 @@ export function detectProject(o) {
             ``,
             `...toolaby, // the extension's id, the storage permission, the Wall's address`,
             ...(appPopup ? [`action: { default_popup: 'toolaby-popup.html' },`] : []),
+            ...(appSidePanel ? [`side_panel: { default_path: 'toolaby-sidepanel.html' }, // and 'sidePanel' among the permissions`] : []),
             ...(worker ? [] : [`background: { service_worker: '${workerFile}', type: 'module' },`]),
         ].join('\n');
-        // CRXJS builds only the pages the manifest names; once ours is the popup, theirs stays built as a Vite input.
+        // CRXJS builds only the pages the manifest names; once ours are in front, theirs stay built as Vite inputs.
         const viteFile = first(has, ['vite.config.ts', 'vite.config.js', 'vite.config.mts', 'vite.config.mjs']) ?? 'vite.config.ts';
+        const inputs = [appPopup ? `popup: '${appPopup}'` : null, appSidePanel ? `sidepanel: '${appSidePanel}'` : null].filter(Boolean).join(', ');
         const vite = [
-            `// ${viteFile} — CRXJS builds only the pages the manifest names: this keeps your popup built, for the Wall's to hand over to`,
+            `// ${viteFile} — CRXJS builds only the pages the manifest names: this keeps ${appPopup && appSidePanel ? 'your popup and side panel' : appSidePanel ? 'your side panel' : 'your popup'} built, for the Wall's to hand over to`,
             `export default defineConfig({`,
             `  plugins: [crx({ manifest })],`,
-            `  build: { rollupOptions: { input: { popup: '${appPopup}' } } },`,
+            `  build: { rollupOptions: { input: { ${inputs} } } },`,
             `});`,
         ].join('\n');
         return {
-            kind: 'crxjs', label: 'CRXJS', codeDir: '', popupDir: '', manifestFile: null, wrapper: true, appPopup, worker: worker && has(worker) ? worker : null, built: false, foundManifest: null,
+            kind: 'crxjs', label: 'CRXJS', codeDir: '', popupDir: '', manifestFile: null, wrapper: true, appPopup, appSidePanel, worker: worker && has(worker) ? worker : null, built: false, foundManifest: null,
             createWorker: worker && has(worker) ? null : { file: workerFile, content: workerLines },
-            workerLines, snippets: [{ file: configFile ?? 'manifest.config.ts', language: 'ts', code }, ...(appPopup ? [{ file: viteFile, language: 'ts', code: vite }] : [])],
+            workerLines, snippets: [{ file: configFile ?? 'manifest.config.ts', language: 'ts', code }, ...(appPopup || appSidePanel ? [{ file: viteFile, language: 'ts', code: vite }] : [])],
         };
     }
     if (has('manifest.json')) {
@@ -100,16 +109,17 @@ export function detectProject(o) {
         // A plain extension with a build (webpack, Rollup, Parcel, esbuild…) is wired the same way — the manifest is a file and
         // the files go beside it — but only what the build copies reaches the output, so that is said.
         const declared = typeof manifest?.action?.default_popup === 'string' ? manifest.action.default_popup : null;
+        const declaredPanel = typeof manifest?.side_panel?.default_path === 'string' ? manifest.side_panel.default_path : null;
         const named = typeof manifest?.background?.service_worker === 'string' ? manifest.background.service_worker : null;
         const workerFile = named && has(named) ? named : 'background.js';
         return {
             kind: crxjs ? 'crxjs' : 'plain', label: crxjs ? 'CRXJS' : 'a plain extension', codeDir: '', popupDir: '', manifestFile: 'manifest.json', wrapper: true, built: crxjs ? false : built, foundManifest: null,
-            appPopup: declared && declared !== 'toolaby-popup.html' ? declared : null, worker: named && has(named) ? named : null, createWorker: null,
+            appPopup: declared && declared !== 'toolaby-popup.html' ? declared : null, appSidePanel: declaredPanel && declaredPanel !== 'toolaby-sidepanel.html' ? declaredPanel : null, worker: named && has(named) ? named : null, createWorker: null,
             workerLines: `import { toolaby } from '${importPath(workerFile)}';\n\ntoolaby.startBackground();\n`, snippets: [],
         };
     }
     // Nothing recognised. A manifest below the root — src/, public/, a package of a monorepo — is where the wiring should have
     // been pointed, and is said; the shallowest one, since a fixture or a dependency may carry another.
     const foundManifest = [...(o.tree ?? [])].filter((p) => p.endsWith('/manifest.json') && !p.includes('node_modules/')).sort((a, b) => a.split('/').length - b.split('/').length || a.localeCompare(b))[0] ?? null;
-    return { kind: 'unknown', label: 'unknown', codeDir: '', popupDir: '', manifestFile: null, wrapper: false, appPopup: null, worker: null, createWorker: null, workerLines: '', snippets: [], built, foundManifest };
+    return { kind: 'unknown', label: 'unknown', codeDir: '', popupDir: '', manifestFile: null, wrapper: false, appPopup: null, appSidePanel: null, worker: null, createWorker: null, workerLines: '', snippets: [], built, foundManifest };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toolaby",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "The Toolaby command line: sign in once, then wire any Chrome extension to your tool on the Wall — sign-in, the Free plan, licences and subscriptions — or start a new one.",
   "type": "module",
   "bin": {