feat: single component preview

Author: nrkruk

command-snapshot.json

@@ -7,6 +7,14 @@
     "flags": ["device-id", "device-type", "flags-dir", "name", "target-org"],
     "plugin": "@salesforce/plugin-lightning-dev"
   },
+  {
+    "alias": [],
+    "command": "lightning:dev:component",
+    "flagAliases": [],
+    "flagChars": ["a", "n", "o", "s"],
+    "flags": ["attributes", "flags-dir", "json", "name", "namespace", "target-org"],
+    "plugin": "@salesforce/plugin-lightning-dev"
+  },
   {
     "alias": [],
     "command": "lightning:dev:site",

messages/lightning.dev.component.md

@@ -0,0 +1,30 @@
+# summary
+
+Preview a Lightning Web Component in isolation.
+
+# description
+
+Preview and develop a single Lightning Web Component in isolation using Local Dev.
+
+# flags.name.summary
+
+Name of the component to preview.
+
+# flags.namespace.summary
+
+Namespace of the component (defaults to 'c').
+
+# flags.attributes.summary
+
+JSON string of attributes to pass to the component.
+
+# error.invalid.attributes
+
+Invalid JSON format for attributes parameter.
+
+# examples
+
+- Preview a component named 'myComponent':
+  <%= config.bin %> <%= command.id %> --name myComponent --target-org myOrg
+- Preview a component with attributes:
+  <%= config.bin %> <%= command.id %> --name myComponent --target-org myOrg --attributes '{"label":"Hello","variant":"brand"}'

src/commands/lightning/dev/component.ts

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2025, salesforce.com, inc.
+ * All rights reserved.
+ * Licensed under the BSD 3-Clause license.
+ * For full license text, see LICENSE.txt file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import { SfCommand, Flags } from '@salesforce/sf-plugins-core';
+import { Messages } from '@salesforce/core';
+import { cmpDev } from '@lwrjs/api';
+
+Messages.importMessagesDirectoryFromMetaUrl(import.meta.url);
+const messages = Messages.loadMessages('@salesforce/plugin-lightning-dev', 'lightning.dev.component');
+
+export default class LightningDevComponent extends SfCommand<void> {
+  public static readonly summary = messages.getMessage('summary');
+  public static readonly description = messages.getMessage('description');
+  public static readonly examples = messages.getMessages('examples');
+
+  public static readonly flags = {
+    'target-org': Flags.optionalOrg(), // Don't necessarily require org unless we need to proxy
+    name: Flags.string({
+      char: 'n',
+      summary: messages.getMessage('flags.name.summary'),
+      required: true,
+    }),
+    namespace: Flags.string({
+      char: 's',
+      summary: messages.getMessage('flags.namespace.summary'),
+      default: 'c',
+    }),
+    attributes: Flags.string({
+      char: 'a',
+      summary: messages.getMessage('flags.attributes.summary'),
+    }),
+  };
+
+  public async run(): Promise<void> {
+    const { flags } = await this.parse(LightningDevComponent);
+
+    const connection = flags['target-org']?.getConnection();
+
+    let attributes = {};
+    if (flags.attributes) {
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        attributes = JSON.parse(flags.attributes);
+      } catch (e) {
+        throw new Error(messages.getMessage('error.invalid.attributes'));
+      }
+    }
+
+    await cmpDev({
+      componentName: flags.name,
+      namespace: flags.namespace,
+      attributes,
+      mode: 'dev',
+      siteDir: '', // TODO fix
+      port: 3000,
+      open: true,
+      logLevel: 'info',
+      authToken: connection?.accessToken ?? '',
+    });
+  }
+}