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:preview:component",
+    "flagAliases": [],
+    "flagChars": ["n"],
+    "flags": ["flags-dir", "json", "name"],
+    "plugin": "@salesforce/plugin-lightning-dev"
+  },
   {
     "alias": [],
     "command": "lightning:dev:site",

messages/lightning.preview.component.md

@@ -0,0 +1,32 @@
+# summary
+
+Preview LWC component in insolation.
+
+# description
+
+Preview components, apps, and sites. If no topic is specified, the default action is to preview the org.
+
+In dev preview mode, you can edit local files and see these changes to your Lightning Web Components (LWC) within your {org name} org:
+
+- Basic HTML and CSS edits
+- Importing new CSS-only LWC
+- JS edits in-service component library
+- JS method changes in the LWC component that don't alter its public API.
+
+Other local changes require deployment to your org. However, changes made directly in your org (like modifying component properties and saving) are immediately live and won't show in your local files until you retrieve them from the org.
+
+This feature enables developers to quickly iterate on their components and pages, seeing the impact of changes in real-time without needing to deploy or refresh manually. Live reload is enabled by default to automatically refresh the preview when source code changes are detected.
+
+Use the appropriate topic to preview specific aspects of the development environment.
+
+# flags.name.summary
+
+Description of a flag.
+
+# flags.name.description
+
+More information about a flag. Don't repeat the summary.
+
+# examples
+
+- <%= config.bin %> <%= command.id %>

schemas/lightning-preview-component.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$ref": "#/definitions/LightningPreviewComponentResult",
+  "definitions": {
+    "LightningPreviewComponentResult": {
+      "type": "object",
+      "properties": {
+        "path": {
+          "type": "string"
+        }
+      },
+      "required": ["path"],
+      "additionalProperties": false
+    }
+  }
+}

src/commands/lightning/dev/component.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2023, 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';
+
+Messages.importMessagesDirectoryFromMetaUrl(import.meta.url);
+const messages = Messages.loadMessages('@salesforce/plugin-lightning-dev', 'lightning.preview.component');
+
+export type LightningPreviewComponentResult = {
+  path: string;
+};
+
+export default class LightningPreviewComponent extends SfCommand<LightningPreviewComponentResult> {
+  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 = {
+    name: Flags.string({
+      summary: messages.getMessage('flags.name.summary'),
+      description: messages.getMessage('flags.name.description'),
+      char: 'n',
+      required: false,
+    }),
+  };
+
+  public async run(): Promise<LightningPreviewComponentResult> {
+    const { flags } = await this.parse(LightningPreviewComponent);
+
+    const name = flags.name ?? 'world';
+    this.log(`hello ${name} from /Users/nkruk/git/plugin-lightning-dev/src/commands/lightning/preview/component.ts`);
+    return {
+      path: '/Users/nkruk/git/plugin-lightning-dev/src/commands/lightning/preview/component.ts',
+    };
+  }
+}

test/commands/lightning/dev/component.nut.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2023, 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
+ */
+// TODO - add proper NUT tests
+/*
+import { execCmd, TestSession } from '@salesforce/cli-plugins-testkit';
+import { expect } from 'chai';
+
+describe('lightning preview component NUTs', () => {
+  let session: TestSession;
+
+  before(async () => {
+    session = await TestSession.create({ devhubAuthStrategy: 'NONE' });
+  });
+
+  after(async () => {
+    await session?.clean();
+  });
+
+  it('should display provided name', () => {
+    const name = 'World';
+    const command = `lightning preview component --name ${name}`;
+    const output = execCmd(command, { ensureExitCode: 0 }).shellOutput.stdout;
+    expect(output).to.contain(name);
+  });
+});
+*/

test/commands/lightning/dev/component.test.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2023, 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 { TestContext } from '@salesforce/core/testSetup';
+// import { expect } from 'chai';
+// import { stubSfCommandUx } from '@salesforce/sf-plugins-core';
+
+describe('lightning single component preview', () => {
+  const $$ = new TestContext();
+  // let sfCommandStubs: ReturnType<typeof stubSfCommandUx>;
+
+  beforeEach(() => {
+    // sfCommandStubs = stubSfCommandUx($$.SANDBOX);
+  });
+
+  afterEach(() => {
+    $$.restore();
+  });
+
+  it('todo add unit tests', async () => {});
+});