@pixelbyte-software/pixcode 1.40.4 → 1.40.5

package/scripts/smoke/live-view-integration.mjs

@@ -1,4 +1,4 @@
-import { mkdtemp, writeFile } from 'node:fs/promises';
+import { chmod, mkdtemp, writeFile } from 'node:fs/promises';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -87,6 +87,10 @@ assert.ok(
   liveViewPanel.includes('managedRuntime') && liveViewPanel.includes('liveView.managedRuntimePreparing'),
   'Live View panel should explain that Pixcode can prepare managed runtimes automatically.',
 );
+assert.ok(
+  liveViewPanel.includes('isPreparingManagedRuntime') && liveViewPanel.includes('liveView.preparingRuntime'),
+  'Live View panel should show a visible in-progress state while Pixcode downloads and installs a managed runtime.',
+);
 assert.ok(
   liveViewPanel.includes("runAction('restart')"),
   'Live View panel should expose a restart action for failed process runners.',
@@ -101,6 +105,14 @@ assert.ok(
   managedRuntimes.includes('extractZip') && managedRuntimes.includes('extractTarGz'),
   'Managed runtime installation should handle common Windows zip and macOS/Linux tarball assets.',
 );
+assert.ok(
+  managedRuntimes.includes('preferManaged'),
+  'Managed PHP Live View should be able to skip external runtimes and prefer Pixcode-owned binaries.',
+);
+assert.ok(
+  managedRuntimes.includes("id === 'npm'") && managedRuntimes.includes('installNpmRuntime'),
+  'Managed runtimes should include a Pixcode-owned npm runner for JavaScript projects when npm is not on PATH.',
+);
 
 const serverIndex = await read('server/index.js');
 assert.ok(
@@ -152,6 +164,18 @@ const viteTarget = await detectLiveViewTarget(viteProject);
 assert.equal(viteTarget.available, true, 'Vite projects should be detected.');
 assert.equal(viteTarget.command?.id, 'npm-dev-vite', 'Vite projects should get a Vite-aware command.');
 
+const viteMissingNpmTarget = await detectLiveViewTarget(viteProject, {
+  env: {
+    ...process.env,
+    PATH: '',
+    Path: '',
+  },
+});
+assert.equal(viteMissingNpmTarget.available, true, 'Vite projects should remain runnable through a Pixcode-managed package runner when npm is missing from PATH.');
+assert.equal(viteMissingNpmTarget.command?.id, 'npm-dev-vite', 'Vite projects should keep the original Vite command identity.');
+assert.equal(viteMissingNpmTarget.managedRuntime?.id, 'npm', 'Missing npm should select the Pixcode-managed npm runner.');
+assert.equal(viteMissingNpmTarget.managedRuntime?.status, 'missing', 'Missing npm should report that the managed package runner still needs preparation.');
+
 const djangoTarget = await detectLiveViewTarget(djangoProject);
 assert.equal(djangoTarget.available, true, 'Django projects should be detected from manage.py.');
 assert.equal(djangoTarget.command?.id, 'python-django', 'Django projects should get a runserver command.');
@@ -172,6 +196,27 @@ assert.ok(
   'Missing PHP should use product language instead of exposing PATH setup as the primary message.',
 );
 
+const fakeBin = path.join(workspace, 'fake-bin');
+await mkdir(fakeBin, { recursive: true });
+const fakePhp = path.join(fakeBin, process.platform === 'win32' ? 'php.cmd' : 'php');
+await writeFile(fakePhp, process.platform === 'win32' ? '@echo off\r\nexit /b 0\r\n' : '#!/bin/sh\nexit 0\n');
+if (process.platform !== 'win32') {
+  await chmod(fakePhp, 0o755);
+}
+const fakePath = process.platform === 'win32'
+  ? `${fakeBin};${process.env.PATH || ''}`
+  : `${fakeBin}:${process.env.PATH || ''}`;
+const phpSystemRuntimeTarget = await detectLiveViewTarget(phpProject, {
+  env: {
+    ...process.env,
+    PATH: fakePath,
+    Path: fakePath,
+  },
+});
+assert.equal(phpSystemRuntimeTarget.available, true, 'PHP projects should stay runnable when php exists on PATH.');
+assert.equal(phpSystemRuntimeTarget.command?.id, 'frankenphp-php-server', 'PHP projects should still use the Pixcode-managed runtime even when external php exists.');
+assert.equal(phpSystemRuntimeTarget.managedRuntime?.id, 'frankenphp', 'PHP projects should prefer the Pixcode-owned FrankenPHP runtime instead of external php.');
+
 const staticSession = await startLiveView('static-smoke', staticProject);
 assert.equal(staticSession.status, 'running', 'Static Live View should start without a child process.');
 assert.match(staticSession.sharePath, /^\/live\/[a-f0-9]{24}\/$/, 'Live View should expose a random public share path.');

package/server/services/install-jobs.js

@@ -459,7 +459,7 @@ export function findExecutableOnPath(name, env = process.env) {
  * more reliable than trusting PATH — when Pixcode runs as a daemon, PATH
  * is often minimal and doesn't include the user's node install.
  */
-function resolveNpmCommand(env = process.env) {
+export function resolveNpmCommand(env = process.env) {
     const nodeDir = path.dirname(process.execPath);
     const isWindows = process.platform === 'win32';
     const candidates = isWindows

package/server/services/live-view.js

@@ -4,6 +4,7 @@ import { promises as fs } from 'node:fs';
 import net from 'node:net';
 import path from 'node:path';
 
+import { buildCliSpawnEnv } from './install-jobs.js';
 import { ensureManagedRuntime, getManagedRuntimeStatus } from './managed-runtimes.js';
 
 const sessionsByProject = new Map();
@@ -99,7 +100,7 @@ function runtimeMissingReason(command, framework) {
     return 'Pixcode can prepare a local PHP runtime automatically before starting this project.';
   }
   if (command === 'npm' || command === 'pnpm' || command === 'yarn' || command === 'bun') {
-    return `${base} Pixcode will use its bundled Node runtime when possible; otherwise install the package manager or use a custom command.`;
+    return `${base} Pixcode can prepare a local Node package runner automatically before starting this project.`;
   }
   if (command === 'python' || command === 'python3') {
     return `${base} Pixcode does not have a managed Python runtime for this stack yet.`;
@@ -169,12 +170,44 @@ function buildPackageCommand(packageManager, scriptName, id, label, framework, e
     id,
     label,
     framework,
+    packageManager,
+    scriptName,
+    extraArgs,
     command: packageManager,
     args,
     displayCommand: buildDisplayCommand(packageManager, args),
   };
 }
 
+function isPackageManagerCommand(command) {
+  return command === 'npm' || command === 'pnpm' || command === 'yarn' || command === 'bun';
+}
+
+function buildManagedPackageCommand(command, runtimeStatus) {
+  const npmArgs = command.scriptName
+    ? packageRunArgs('npm', command.scriptName, command.extraArgs || [])
+    : command.args;
+  const runtimeExecutable = runtimeStatus?.executablePath || null;
+  const commandExecutable = runtimeExecutable
+    ? (runtimeStatus?.runner === 'node' || runtimeExecutable.endsWith('.js') ? process.execPath : runtimeExecutable)
+    : command.command;
+  const args = runtimeExecutable && (runtimeStatus?.runner === 'node' || runtimeExecutable.endsWith('.js'))
+    ? [runtimeExecutable, ...npmArgs]
+    : npmArgs;
+
+  return {
+    ...command,
+    packageManager: 'npm',
+    command: commandExecutable,
+    args,
+    displayCommand: buildDisplayCommand('npm', npmArgs),
+    managedRuntime: {
+      id: 'npm',
+      status: runtimeStatus?.status || 'missing',
+    },
+  };
+}
+
 function buildManagedPhpCommand(runtimeStatus) {
   const executable = runtimeStatus?.executablePath || 'frankenphp';
   return {
@@ -414,24 +447,46 @@ export async function detectLiveViewTarget(projectPath, options = {}) {
 
   const processCommand = await detectProcessCommand(projectPath);
   if (processCommand) {
+    if (isPackageManagerCommand(processCommand.command)) {
+      const managedRuntime = await getManagedRuntimeStatus('npm', {
+        env: options.env || process.env,
+        preferManaged: true,
+      });
+      const command = buildManagedPackageCommand(processCommand, managedRuntime);
+      return {
+        available: true,
+        kind: 'process',
+        label: processCommand.label,
+        framework: processCommand.framework,
+        command,
+        managedRuntime,
+        reason: managedRuntime.status === 'missing'
+          ? 'Pixcode will prepare a local Node package runner automatically before starting this project.'
+          : 'Pixcode will run this project with its managed Node package runner.',
+      };
+    }
+
+    if (processCommand.framework === 'PHP' || processCommand.command === 'php') {
+      const managedRuntime = await getManagedRuntimeStatus('frankenphp', {
+        env: options.env || process.env,
+        preferManaged: true,
+      });
+      const command = buildManagedPhpCommand(managedRuntime);
+      return {
+        available: true,
+        kind: 'process',
+        label: command.label,
+        framework: command.framework,
+        command,
+        managedRuntime,
+        reason: managedRuntime.status === 'missing'
+          ? 'Pixcode will prepare a local PHP runtime automatically before starting this project.'
+          : 'Pixcode will run this project with its managed PHP runtime.',
+      };
+    }
+
     const runtimeAvailable = await checkCommandAvailability(processCommand.command, options.env || process.env);
     if (!runtimeAvailable) {
-      if (processCommand.framework === 'PHP' || processCommand.command === 'php') {
-        const managedRuntime = await getManagedRuntimeStatus('frankenphp', { env: options.env || process.env });
-        const command = buildManagedPhpCommand(managedRuntime);
-        return {
-          available: true,
-          kind: 'process',
-          label: command.label,
-          framework: command.framework,
-          command,
-          managedRuntime,
-          reason: managedRuntime.status === 'missing'
-            ? 'Pixcode will prepare a local PHP runtime automatically before starting this project.'
-            : 'Pixcode will run this project with its managed PHP runtime.',
-        };
-      }
-
       return {
         available: false,
         kind: 'process',
@@ -618,9 +673,13 @@ export async function startLiveView(projectName, projectPath, options = {}) {
   let runtimeStatus = target.managedRuntime || target.command?.managedRuntime || null;
   let targetCommand = target.command;
   if (runtimeStatus?.id && runtimeStatus.status !== 'system' && runtimeStatus.status !== 'installed') {
-    runtimeStatus = await ensureManagedRuntime(runtimeStatus.id);
+    runtimeStatus = await ensureManagedRuntime(runtimeStatus.id, {
+      preferManaged: runtimeStatus.id === 'frankenphp' || runtimeStatus.id === 'npm',
+    });
     if (runtimeStatus.id === 'frankenphp') {
       targetCommand = buildManagedPhpCommand(runtimeStatus);
+    } else if (runtimeStatus.id === 'npm') {
+      targetCommand = buildManagedPackageCommand(targetCommand, runtimeStatus);
     }
   }
 
@@ -649,8 +708,9 @@ export async function startLiveView(projectName, projectPath, options = {}) {
   };
 
   const env = {
-    ...process.env,
+    ...buildCliSpawnEnv(process.env),
     ...(command.env || {}),
+    ...(process.versions.electron ? { ELECTRON_RUN_AS_NODE: '1' } : {}),
     PORT: String(port),
     HOST: '127.0.0.1',
     VITE_HOST: '127.0.0.1',

package/server/services/managed-runtimes.js

@@ -3,7 +3,9 @@ import { promises as fs } from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
 
-import { buildCliSpawnEnv, findExecutableOnPath } from './install-jobs.js';
+import * as tar from 'tar';
+
+import { buildCliSpawnEnv, findExecutableOnPath, resolveNpmCommand } from './install-jobs.js';
 
 const DEFAULT_RUNTIMES_HOME = path.join(os.homedir(), '.pixcode', 'runtimes');
 const MANIFEST_FILE = 'pixcode-runtime.json';
@@ -161,7 +163,11 @@ async function extractZip(archivePath, targetDir, env = process.env) {
 }
 
 async function extractTarGz(archivePath, targetDir, env = process.env) {
-  await runProcess('tar', ['-xzf', archivePath, '-C', targetDir], { env });
+  void env;
+  await tar.x({
+    file: archivePath,
+    cwd: targetDir,
+  });
 }
 
 async function findRuntimeExecutable(searchRoot, binaryName) {
@@ -255,9 +261,53 @@ async function installFrankenPhp(env = process.env) {
   return manifest;
 }
 
+async function installNpmRuntime(env = process.env) {
+  const registryUrl = env.PIXCODE_NPM_RUNTIME_REGISTRY
+    || 'https://registry.npmjs.org/npm/latest';
+  const metadata = await fetchJson(registryUrl, env);
+  const tarballUrl = metadata?.dist?.tarball;
+  if (!tarballUrl) {
+    throw new Error('No npm runtime tarball is available from the npm registry.');
+  }
+
+  const baseDir = runtimeDir('npm', env);
+  const stagingDir = path.join(baseDir, `.staging-${Date.now()}`);
+  const currentDir = path.join(baseDir, 'current');
+  await fs.mkdir(stagingDir, { recursive: true });
+
+  const archivePath = path.join(stagingDir, 'npm-runtime.tgz');
+  await downloadFile(tarballUrl, archivePath, env);
+  await extractTarGz(archivePath, stagingDir, env);
+
+  const packageDir = path.join(stagingDir, 'package');
+  const executablePath = path.join(packageDir, 'bin', 'npm-cli.js');
+  if (!(await fileExists(executablePath))) {
+    throw new Error('Downloaded npm runtime did not contain bin/npm-cli.js.');
+  }
+
+  await fs.rm(currentDir, { recursive: true, force: true });
+  await fs.cp(packageDir, currentDir, { recursive: true, force: true });
+
+  const finalExecutable = path.join(currentDir, 'bin', 'npm-cli.js');
+  const manifest = {
+    id: 'npm',
+    label: 'Pixcode Node package runner',
+    provider: 'npm',
+    version: metadata?.version || 'latest',
+    executablePath: finalExecutable,
+    runner: 'node',
+    sourceUrl: tarballUrl,
+    installedAt: new Date().toISOString(),
+  };
+  await fs.writeFile(manifestPath('npm', env), JSON.stringify(manifest, null, 2));
+  await fs.rm(stagingDir, { recursive: true, force: true }).catch(() => undefined);
+  return manifest;
+}
+
 export async function getManagedRuntimeStatus(id, options = {}) {
   const env = options.env || process.env;
-  if (id !== 'frankenphp') {
+  const preferManaged = Boolean(options.preferManaged);
+  if (id !== 'frankenphp' && id !== 'npm') {
     return {
       id,
       status: 'unsupported',
@@ -266,18 +316,59 @@ export async function getManagedRuntimeStatus(id, options = {}) {
     };
   }
 
-  const spawnEnv = buildCliSpawnEnv(env);
-  const systemExecutable = findExecutableOnPath('frankenphp', spawnEnv);
-  if (systemExecutable) {
+  if (id === 'npm') {
+    if (!preferManaged) {
+      const spawnEnv = buildCliSpawnEnv(env);
+      const npmExecutable = resolveNpmCommand(spawnEnv);
+      if (npmExecutable) {
+        return {
+          id,
+          label: 'npm',
+          status: 'system',
+          installable: true,
+          executablePath: npmExecutable,
+          runner: npmExecutable.endsWith('.js') ? 'node' : undefined,
+        };
+      }
+    }
+
+    const manifest = await readManifest(id, env);
+    if (manifest) {
+      return {
+        id,
+        label: manifest.label || 'Pixcode Node package runner',
+        status: 'installed',
+        installable: true,
+        executablePath: manifest.executablePath,
+        runner: manifest.runner || 'node',
+        version: manifest.version,
+      };
+    }
+
     return {
       id,
-      label: 'FrankenPHP',
-      status: 'system',
+      label: 'Pixcode Node package runner',
+      provider: 'npm',
+      status: 'missing',
       installable: true,
-      executablePath: systemExecutable,
+      reason: 'Pixcode will prepare a local Node package runner automatically before starting this project.',
     };
   }
 
+  if (!preferManaged) {
+    const spawnEnv = buildCliSpawnEnv(env);
+    const systemExecutable = findExecutableOnPath('frankenphp', spawnEnv);
+    if (systemExecutable) {
+      return {
+        id,
+        label: 'FrankenPHP',
+        status: 'system',
+        installable: true,
+        executablePath: systemExecutable,
+      };
+    }
+  }
+
   const manifest = await readManifest(id, env);
   if (manifest) {
     return {
@@ -302,7 +393,10 @@ export async function getManagedRuntimeStatus(id, options = {}) {
 
 export async function ensureManagedRuntime(id, options = {}) {
   const env = options.env || process.env;
-  const status = await getManagedRuntimeStatus(id, { env });
+  const status = await getManagedRuntimeStatus(id, {
+    env,
+    preferManaged: options.preferManaged,
+  });
   if (status.executablePath) return status;
   if (!status.installable) {
     throw new Error(status.reason || 'This runtime cannot be prepared automatically.');
@@ -323,6 +417,18 @@ export async function ensureManagedRuntime(id, options = {}) {
         version: manifest.version,
       };
     }
+    if (id === 'npm') {
+      const manifest = await installNpmRuntime(env);
+      return {
+        id,
+        label: manifest.label,
+        status: 'installed',
+        installable: true,
+        executablePath: manifest.executablePath,
+        runner: manifest.runner || 'node',
+        version: manifest.version,
+      };
+    }
     throw new Error(`Unsupported managed runtime: ${id}`);
   })().finally(() => {
     installLocks.delete(lockKey);