browser-commander 0.2.0

package/examples/react-test-app/src/styles.css

@@ -0,0 +1,323 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    sans-serif;
+  margin: 0;
+  padding: 20px;
+  background: #f5f5f5;
+}
+
+.app {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+h1 {
+  color: #333;
+  border-bottom: 2px solid #667eea;
+  padding-bottom: 10px;
+}
+
+h2 {
+  color: #555;
+  margin-top: 30px;
+}
+
+.section {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 500;
+  color: #333;
+}
+
+input[type='text'],
+input[type='email'],
+input[type='password'],
+textarea,
+select {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+input[type='text']:focus,
+input[type='email']:focus,
+input[type='password']:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+}
+
+textarea {
+  min-height: 100px;
+  resize: vertical;
+}
+
+button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+button.primary {
+  background: #667eea;
+  color: white;
+}
+
+button.primary:hover {
+  background: #5a6fd6;
+}
+
+button.primary:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+button.secondary {
+  background: #f0f0f0;
+  color: #333;
+}
+
+button.secondary:hover {
+  background: #e0e0e0;
+}
+
+button.danger {
+  background: #dc3545;
+  color: white;
+}
+
+button.danger:hover {
+  background: #c82333;
+}
+
+.checkbox-group,
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.checkbox-item,
+.radio-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.checkbox-item input,
+.radio-item input {
+  width: auto;
+}
+
+.button-group {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.result {
+  margin-top: 15px;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border-left: 4px solid #667eea;
+}
+
+.result.success {
+  border-left-color: #28a745;
+  background: #d4edda;
+}
+
+.result.error {
+  border-left-color: #dc3545;
+  background: #f8d7da;
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.toggle {
+  position: relative;
+  width: 50px;
+  height: 26px;
+}
+
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 26px;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: '';
+  height: 20px;
+  width: 20px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+.toggle input:checked + .toggle-slider {
+  background-color: #667eea;
+}
+
+.toggle input:checked + .toggle-slider:before {
+  transform: translateX(24px);
+}
+
+.counter {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.counter-value {
+  font-size: 24px;
+  font-weight: bold;
+  min-width: 50px;
+  text-align: center;
+}
+
+.hidden {
+  display: none;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal {
+  background: white;
+  padding: 30px;
+  border-radius: 8px;
+  max-width: 400px;
+  width: 90%;
+}
+
+.modal h3 {
+  margin-top: 0;
+}
+
+.modal-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  min-width: 150px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+}
+
+.dropdown-menu button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 10px 15px;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.dropdown-menu button:hover {
+  background: #f5f5f5;
+}
+
+.scroll-test {
+  height: 300px;
+  overflow-y: auto;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.scroll-test .scroll-item {
+  padding: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.scroll-test .scroll-item:last-child {
+  border-bottom: none;
+}
+
+.scroll-test .scroll-item.target {
+  background: #e8f4f8;
+  border-left: 4px solid #667eea;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animated {
+  animation: fadeIn 0.3s ease-out;
+}

package/examples/react-test-app/vite.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+  },
+});

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "browser-commander",
+  "version": "0.2.0",
+  "description": "Universal browser automation library that supports both Playwright and Puppeteer with a unified API",
+  "main": "src/index.js",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "scripts": {
+    "test": "node --test --test-reporter spec tests/unit/",
+    "test:unit": "node --test --test-reporter spec tests/unit/",
+    "test:coverage": "node --test --experimental-test-coverage tests/unit/",
+    "test:e2e": "RUN_E2E=true node --test tests/e2e/",
+    "test:e2e:playwright": "RUN_E2E=true node --test tests/e2e/playwright.e2e.test.js",
+    "test:e2e:puppeteer": "RUN_E2E=true node --test tests/e2e/puppeteer.e2e.test.js",
+    "test:all": "npm run test:unit && npm run test:e2e",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "check:duplication": "jscpd .",
+    "check": "npm run lint && npm run format:check && npm run check:duplication",
+    "prepare": "husky || true",
+    "changeset": "changeset",
+    "changeset:version": "node scripts/changeset-version.mjs",
+    "changeset:publish": "changeset publish",
+    "changeset:status": "changeset status --since=origin/main"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/link-foundation/browser-commander.git"
+  },
+  "keywords": [
+    "browser",
+    "automation",
+    "playwright",
+    "puppeteer",
+    "testing",
+    "e2e"
+  ],
+  "author": "",
+  "license": "UNLICENSE",
+  "bugs": {
+    "url": "https://github.com/link-foundation/browser-commander/issues"
+  },
+  "homepage": "https://github.com/link-foundation/browser-commander#readme",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "peerDependencies": {
+    "playwright": ">=1.40.0",
+    "puppeteer": ">=21.0.0"
+  },
+  "peerDependenciesMeta": {
+    "playwright": {
+      "optional": true
+    },
+    "puppeteer": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "log-lazy": "^1.0.4"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.7",
+    "eslint": "^9.39.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "husky": "^9.1.7",
+    "jscpd": "^4.0.5",
+    "lint-staged": "^16.2.6",
+    "playwright": "^1.56.1",
+    "prettier": "^3.6.2",
+    "puppeteer": "^24.27.0"
+  },
+  "lint-staged": {
+    "*.{js,mjs,cjs}": [
+      "eslint --fix",
+      "prettier --write",
+      "prettier --check"
+    ],
+    "*.md": [
+      "prettier --write",
+      "prettier --check"
+    ]
+  }
+}

package/scripts/changeset-version.mjs

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+
+/**
+ * Custom changeset version script that ensures package-lock.json is synchronized
+ * with package.json after version bumps.
+ *
+ * This script:
+ * 1. Runs `changeset version` to update package versions
+ * 2. Runs `npm install` to synchronize package-lock.json with the new versions
+ *
+ * Uses link-foundation libraries:
+ * - use-m: Dynamic package loading without package.json dependencies
+ * - command-stream: Modern shell command execution with streaming support
+ */
+
+// Load use-m dynamically
+const { use } = eval(
+  await (await fetch('https://unpkg.com/use-m/use.js')).text()
+);
+
+// Import command-stream for shell command execution
+const { $ } = await use('command-stream');
+
+try {
+  console.log('Running changeset version...');
+  await $`npx changeset version`;
+
+  console.log('\nSynchronizing package-lock.json...');
+  await $`npm install --package-lock-only`;
+
+  console.log('\n✅ Version bump complete with synchronized package-lock.json');
+} catch (error) {
+  console.error('Error during version bump:', error.message);
+  if (process.env.DEBUG) {
+    console.error('Stack trace:', error.stack);
+  }
+  process.exit(1);
+}

package/scripts/create-github-release.mjs

@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+
+/**
+ * Create GitHub Release from CHANGELOG.md
+ * Usage: node scripts/create-github-release.mjs --release-version <version> --repository <repository>
+ *   release-version: Version number (e.g., 1.0.0)
+ *   repository: GitHub repository (e.g., owner/repo)
+ *
+ * Uses link-foundation libraries:
+ * - use-m: Dynamic package loading without package.json dependencies
+ * - command-stream: Modern shell command execution with streaming support
+ * - lino-arguments: Unified configuration from CLI args, env vars, and .lenv files
+ */
+
+import { readFileSync } from 'fs';
+
+// Load use-m dynamically
+const { use } = eval(
+  await (await fetch('https://unpkg.com/use-m/use.js')).text()
+);
+
+// Import link-foundation libraries
+const { $ } = await use('command-stream');
+const { makeConfig } = await use('lino-arguments');
+
+// Parse CLI arguments using lino-arguments
+// Note: Using --release-version instead of --version to avoid conflict with yargs' built-in --version flag
+const config = makeConfig({
+  yargs: ({ yargs, getenv }) =>
+    yargs
+      .option('release-version', {
+        type: 'string',
+        default: getenv('VERSION', ''),
+        describe: 'Version number (e.g., 1.0.0)',
+      })
+      .option('repository', {
+        type: 'string',
+        default: getenv('REPOSITORY', ''),
+        describe: 'GitHub repository (e.g., owner/repo)',
+      }),
+});
+
+const { releaseVersion: version, repository } = config;
+
+if (!version || !repository) {
+  console.error('Error: Missing required arguments');
+  console.error(
+    'Usage: node scripts/create-github-release.mjs --release-version <version> --repository <repository>'
+  );
+  process.exit(1);
+}
+
+const tag = `v${version}`;
+
+console.log(`Creating GitHub release for ${tag}...`);
+
+try {
+  // Read CHANGELOG.md
+  const changelog = readFileSync('./CHANGELOG.md', 'utf8');
+
+  // Extract changelog entry for this version
+  // Read from CHANGELOG.md between this version header and the next version header
+  const versionHeaderRegex = new RegExp(`## ${version}[\\s\\S]*?(?=## \\d|$)`);
+  const match = changelog.match(versionHeaderRegex);
+
+  let releaseNotes = '';
+  if (match) {
+    // Remove the version header itself and trim
+    releaseNotes = match[0].replace(`## ${version}`, '').trim();
+  }
+
+  if (!releaseNotes) {
+    releaseNotes = `Release ${version}`;
+  }
+
+  // Create release using GitHub API with JSON input
+  // This avoids shell escaping issues that occur when passing text via command-line arguments
+  // (Previously caused apostrophes like "didn't" to appear as "didn'''" in releases)
+  const payload = JSON.stringify({
+    tag_name: tag,
+    name: version,
+    body: releaseNotes,
+  });
+
+  await $`gh api repos/${repository}/releases -X POST --input -`.run({
+    stdin: payload,
+  });
+
+  console.log(`\u2705 Created GitHub release: ${tag}`);
+} catch (error) {
+  console.error('Error creating release:', error.message);
+  process.exit(1);
+}

package/scripts/create-manual-changeset.mjs

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+
+/**
+ * Create a changeset file for manual releases
+ * Usage: node scripts/create-manual-changeset.mjs --bump-type <major|minor|patch> [--description <description>]
+ *
+ * Uses link-foundation libraries:
+ * - use-m: Dynamic package loading without package.json dependencies
+ * - command-stream: Modern shell command execution with streaming support
+ * - lino-arguments: Unified configuration from CLI args, env vars, and .lenv files
+ */
+
+import { writeFileSync } from 'fs';
+import { randomBytes } from 'crypto';
+
+const PACKAGE_NAME = 'browser-commander';
+
+// Load use-m dynamically
+const { use } = eval(
+  await (await fetch('https://unpkg.com/use-m/use.js')).text()
+);
+
+// Import link-foundation libraries
+const { $ } = await use('command-stream');
+const { makeConfig } = await use('lino-arguments');
+
+// Parse CLI arguments using lino-arguments
+const config = makeConfig({
+  yargs: ({ yargs, getenv }) =>
+    yargs
+      .option('bump-type', {
+        type: 'string',
+        default: getenv('BUMP_TYPE', ''),
+        describe: 'Version bump type: major, minor, or patch',
+        choices: ['major', 'minor', 'patch'],
+      })
+      .option('description', {
+        type: 'string',
+        default: getenv('DESCRIPTION', ''),
+        describe: 'Description for the changeset',
+      }),
+});
+
+try {
+  const { bumpType, description: descriptionArg } = config;
+
+  // Use provided description or default based on bump type
+  const description = descriptionArg || `Manual ${bumpType} release`;
+
+  if (!bumpType || !['major', 'minor', 'patch'].includes(bumpType)) {
+    console.error(
+      'Usage: node scripts/create-manual-changeset.mjs --bump-type <major|minor|patch> [--description <description>]'
+    );
+    process.exit(1);
+  }
+
+  // Generate a random changeset ID
+  const changesetId = randomBytes(4).toString('hex');
+  const changesetFile = `.changeset/manual-release-${changesetId}.md`;
+
+  // Create the changeset file with single quotes to match Prettier config
+  const content = `---
+'${PACKAGE_NAME}': ${bumpType}
+---
+
+${description}
+`;
+
+  writeFileSync(changesetFile, content, 'utf-8');
+
+  console.log(`Created changeset: ${changesetFile}`);
+  console.log('Content:');
+  console.log(content);
+
+  // Format with Prettier
+  console.log('\nFormatting with Prettier...');
+  await $`npx prettier --write "${changesetFile}"`;
+
+  console.log('\n✅ Changeset created and formatted successfully');
+} catch (error) {
+  console.error('Error creating changeset:', error.message);
+  if (process.env.DEBUG) {
+    console.error('Stack trace:', error.stack);
+  }
+  process.exit(1);
+}