chore: tidy

Author: johnjenkins

README.md

@@ -479,7 +479,7 @@ All examples so far have mentioned setting up tests against **pre-built dist out
 1. `vi.mock()` cannot intercept imports made by your components, because the dependency is already bundled away before Vitest gets involved.
 2. Coverage reports will not work out-of-the-box without additional configuration (`sourceMap: true` / [3rd party tools](https://github.com/cenfun/vitest-monocart-coverage)) and even then, may not be accurate.
 
-The experimental `stencilVitestPlugin` solves this by hooking into Vite's transform pipeline: Stencil files are compiled on-the-fly before Vitest imports them; each component file becomes its own entry in Vitest's module graph — and its imports are independently resolvable and mockable.
+The experimental `stencilVitestPlugin` solves this by hooking into Vite's transform pipeline: Stencil files are compiled on-the-fly before Vitest imports them; each component file becomes its own entry in Vitest's module graph - and its imports are independently resolvable and mockable.
 
 ### Setup
 
@@ -497,7 +497,7 @@ export default defineVitestConfig({
         test: {
           name: 'plugin',
           include: ['src/**/*.plugin.spec.{ts,tsx}'],
-          // No dist setup file needed — each component source file registers
+          // No dist setup file needed - each component source file registers
 
           environment: 'stencil',
           // ^^ you can use the plugin with any setup - even browser tests!
@@ -535,7 +535,7 @@ It can then be imported and tested with mocked dependencies:
 import { describe, it, expect, vi } from 'vitest';
 import { render, h } from '@stencil/vitest';
 
-// vi.mock() is hoisted — the mock is in place before any imports resolve
+// vi.mock() is hoisted - the mock is in place before any imports resolve
 vi.mock('../utils/index.js', () => ({
   capitalize: vi.fn((s: string) => `[mocked:${s}]`),
 }));
@@ -561,7 +561,7 @@ it('renders using the mocked utility', async () => {
 In Stencil v4 `transpile()` (used within the plugin) is a single-file compiler. When a component class `extends` a base class that lives in a separate file, `transpile()` cannot follow the import to merge the parent's metadata and will throw an error.
 
 ```tsx
-// ❌ Will fail — base class is in a separate file
+// ❌ Will fail - base class is in a separate file
 import { FormBase } from './form-base.js';
 
 @Component({ tag: 'my-input', shadow: true })

src/plugin.ts

@@ -9,7 +9,7 @@ import type { Plugin } from 'vitest/config';
  *
  * The compiled output uses `componentExport: 'customelement'`, which appends a
  * `customElements.define()` call at the end of the transformed file. The component
- * registers itself the moment the module is imported — no dist loader or setup file
+ * registers itself the moment the module is imported - no dist loader or setup file
  * required. Works with `@stencil/core` v4 and v5.
  *
  * @example
@@ -27,7 +27,7 @@ import type { Plugin } from 'vitest/config';
  *           name: 'stencil',
  *           environment: 'stencil',
  *           include: ['**\/*.spec.tsx'],
- *           // No dist loader needed — import components from source directly
+ *           // No dist loader needed - import components from source directly
  *         },
  *       },
  *     ],
@@ -104,7 +104,7 @@ export function stencilVitestPlugin(opts: { css?: boolean } = {}): Plugin {
         const result = await transpile(code, {
           file: id,
           // 'customelement' appends a customElements.define() call so the component
-          // self-registers the moment this module is imported — no loader needed.
+          // self-registers the moment this module is imported - no loader needed.
           componentExport: 'customelement',
           componentMetadata: 'runtimestatic',
           currentDirectory: process.cwd(),
@@ -114,7 +114,7 @@ export function stencilVitestPlugin(opts: { css?: boolean } = {}): Plugin {
           style: opts.css ? 'static' : null,
           styleImportData: opts.css ? 'queryparams' : null,
           target: 'es2017',
-          // Don't rewrite import paths — let Vite handle resolution via aliases
+          // Don't rewrite import paths - let Vite handle resolution via aliases
           transformAliasedImportPaths: false,
         });
 

test/project/src/components.d.ts

@@ -22,7 +22,7 @@ export namespace Components {
    */
   interface MyBadge {
     /**
-     * The badge label — passed through this.format() before rendering
+     * The badge label - passed through this.format() before rendering
      * @default ''
      */
     label: string;
@@ -72,7 +72,7 @@ export namespace Components {
    */
   interface MyLabel {
     /**
-     * Raw text to display — run through `capitalize()` before rendering
+     * Raw text to display - run through `capitalize()` before rendering
      * @default ''
      */
     value: string;
@@ -214,7 +214,7 @@ declare namespace LocalJSX {
    */
   interface MyBadge {
     /**
-     * The badge label — passed through this.format() before rendering
+     * The badge label - passed through this.format() before rendering
      * @default ''
      */
     label?: string;
@@ -268,7 +268,7 @@ declare namespace LocalJSX {
    */
   interface MyLabel {
     /**
-     * Raw text to display — run through `capitalize()` before rendering
+     * Raw text to display - run through `capitalize()` before rendering
      * @default ''
      */
     value?: string;

test/project/src/components/my-badge/my-badge.tsx

@@ -8,7 +8,7 @@ import { capitalize } from '../../utils/index.js';
  * and cannot follow imports to resolve external base class metadata.
  */
 class FormattedBase {
-  /** Applies capitalize() from utils — mockable in tests */
+  /** Applies capitalize() from utils - mockable in tests */
   protected format(value: string): string {
     return capitalize(value);
   }
@@ -23,7 +23,7 @@ class FormattedBase {
   shadow: true,
 })
 export class MyBadge extends FormattedBase {
-  /** The badge label — passed through this.format() before rendering */
+  /** The badge label - passed through this.format() before rendering */
   @Prop() label: string = '';
 
   render() {

test/project/src/components/my-button/matchers-new.spec.tsx

@@ -232,7 +232,7 @@ describe('my-button - matchers', () => {
 
     describe('shadow DOM text traversal (shadow: true)', () => {
       it('should find text that lives inside the shadow root', async () => {
-        // cardTitle renders as <h3> inside the shadow root — not in light DOM
+        // cardTitle renders as <h3> inside the shadow root - not in light DOM
         const { root } = await render(<my-card cardTitle="Shadow Title">Slotted Content</my-card>);
 
         expect(root).toHaveTextContent('Shadow Title');
@@ -263,7 +263,7 @@ describe('my-button - matchers', () => {
     });
 
     it('should NOT find text that is only in the shadow root', async () => {
-      // cardTitle is rendered inside the shadow DOM — light DOM traversal should not see it
+      // cardTitle is rendered inside the shadow DOM - light DOM traversal should not see it
       const { root } = await render(<my-card cardTitle="Shadow Title">Slotted Content</my-card>);
 
       expect(root).not.toHaveLightTextContent('Shadow Title');
@@ -300,7 +300,7 @@ describe('my-button - matchers', () => {
     });
 
     it('should match text that lives inside the shadow root', async () => {
-      // cardTitle renders as <h3> inside the shadow root — toEqualText should see it
+      // cardTitle renders as <h3> inside the shadow root - toEqualText should see it
       const { root } = await render(<my-card cardTitle="Only Title" />);
 
       expect(root).toEqualText('Only Title');
@@ -315,7 +315,7 @@ describe('my-button - matchers', () => {
     });
 
     it('should NOT match text that is only in the shadow root', async () => {
-      // cardTitle renders inside the shadow DOM — light text will be empty
+      // cardTitle renders inside the shadow DOM - light text will be empty
       const { root } = await render(<my-card cardTitle="Shadow Title" />);
 
       expect(root).not.toEqualLightText('Shadow Title');

test/project/src/components/my-button/matchers.spec.tsx

@@ -208,7 +208,7 @@ describe('my-button - custom matchers', () => {
     // Regression: a previous attempt at attribute sorting (sortAttributesInHtml)
     // used a regex that truncated values containing double-quotes (e.g. JSON objects)
     // and stripped values from single-quoted attributes entirely.
-    // The fix is to not sort — users write attributes in the order the serializer
+    // The fix is to not sort - users write attributes in the order the serializer
     // produces them (alphabetical), same as every other testing library.
 
     it('toEqualLightHtml: attribute with JSON value (single-quoted in expected string)', async () => {

test/project/src/components/my-label/my-label.plugin.spec.tsx

@@ -4,7 +4,7 @@
  * The plugin transforms my-label.tsx on-the-fly via the Stencil compiler
  * (componentExport: 'customelement'), so it enters Vitest's module graph as
  * a discrete ES module. That means vi.mock() can intercept any import the
- * component makes — here we mock the capitalize() utility it calls in render().
+ * component makes - here we mock the capitalize() utility it calls in render().
  *
  * This is impossible with the pre-built dist approach because the component
  * and its dependencies are already bundled together before Vitest sees them.
@@ -19,13 +19,13 @@ vi.mock('../../utils/index.js', () => ({
   capitalize: vi.fn((s: string) => `[mocked:${s}]`),
 }));
 
-// Import the component source — the plugin transforms it on-the-fly
+// Import the component source - the plugin transforms it on-the-fly
 // and the resulting customElements.define() call registers <my-label>
 // the moment this import resolves.
 import './my-label.tsx';
 import { capitalize } from '../../utils/index.js';
 
-describe('my-label — module mocking via stencilVitestPlugin', () => {
+describe('my-label - module mocking via stencilVitestPlugin', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });

test/project/src/components/my-label/my-label.tsx

@@ -11,7 +11,7 @@ import { capitalize } from '../../utils/index.js';
   styleUrl: 'my-label.css',
 })
 export class MyLabel {
-  /** Raw text to display — run through `capitalize()` before rendering */
+  /** Raw text to display - run through `capitalize()` before rendering */
   @Prop() value: string = '';
 
   @State() state = {

test/project/vitest.config.ts

@@ -33,7 +33,7 @@ export default defineVitestConfig({
           name: 'plugin',
           environment: 'stencil',
           include: ['**/*.plugin.spec.{ts,tsx}'],
-          // No dist setup file — the plugin's customElements.define() output
+          // No dist setup file - the plugin's customElements.define() output
           // registers each component the moment its source file is imported.
         },
       },