@W-20806053 Implement Private Methods

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/private-methods/multiple-private-methods/actual.js

@@ -0,0 +1,18 @@
+import { LightningElement } from 'lwc';
+export default class Test extends LightningElement {
+    #validate(input) {
+        return input != null;
+    }
+    #transform(input) {
+        return String(input).trim();
+    }
+    #process(input) {
+        if (this.#validate(input)) {
+            return this.#transform(input);
+        }
+        return null;
+    }
+    connectedCallback() {
+        this.#process('hello');
+    }
+}

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/private-methods/multiple-private-methods/expected.js

@@ -0,0 +1,26 @@
+import _tmpl from "./test.html";
+import { LightningElement, registerComponent as _registerComponent } from 'lwc';
+class Test extends LightningElement {
+  #validate(input) {
+    return input != null;
+  }
+  #transform(input) {
+    return String(input).trim();
+  }
+  #process(input) {
+    if (this.#validate(input)) {
+      return this.#transform(input);
+    }
+    return null;
+  }
+  connectedCallback() {
+    this.#process('hello');
+  }
+  /*LWC compiler vX.X.X*/
+}
+const __lwc_component_class_internal = _registerComponent(Test, {
+  tmpl: _tmpl,
+  sel: "lwc-test",
+  apiVersion: 9999999
+});
+export default __lwc_component_class_internal;

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/private-methods/private-method-with-public-members/actual.js

@@ -0,0 +1,13 @@
+import { LightningElement, api } from 'lwc';
+export default class Test extends LightningElement {
+    @api label = 'default';
+    count = 0;
+
+    #increment() {
+        this.count++;
+    }
+
+    handleClick() {
+        this.#increment();
+    }
+}

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/private-methods/private-method-with-public-members/expected.js

@@ -0,0 +1,31 @@
+import { registerDecorators as _registerDecorators } from "lwc";
+import _tmpl from "./test.html";
+import { LightningElement, registerComponent as _registerComponent } from 'lwc';
+class Test extends LightningElement {
+  constructor(...args) {
+    super(...args);
+    this.label = 'default';
+    this.count = 0;
+  }
+  #increment() {
+    this.count++;
+  }
+  handleClick() {
+    this.#increment();
+  }
+  /*LWC compiler vX.X.X*/
+}
+_registerDecorators(Test, {
+  publicProps: {
+    label: {
+      config: 0
+    }
+  },
+  fields: ["count"]
+});
+const __lwc_component_class_internal = _registerComponent(Test, {
+  tmpl: _tmpl,
+  sel: "lwc-test",
+  apiVersion: 9999999
+});
+export default __lwc_component_class_internal;

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/private-methods/simple-private-method/actual.js

@@ -0,0 +1,10 @@
+import { LightningElement } from 'lwc';
+export default class Test extends LightningElement {
+    #privateHelper() {
+        return 42;
+    }
+    connectedCallback() {
+        const val = this.#privateHelper();
+        console.log(val);
+    }
+}

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/private-methods/simple-private-method/expected.js

@@ -0,0 +1,18 @@
+import _tmpl from "./test.html";
+import { LightningElement, registerComponent as _registerComponent } from 'lwc';
+class Test extends LightningElement {
+  #privateHelper() {
+    return 42;
+  }
+  connectedCallback() {
+    const val = this.#privateHelper();
+    console.log(val);
+  }
+  /*LWC compiler vX.X.X*/
+}
+const __lwc_component_class_internal = _registerComponent(Test, {
+  tmpl: _tmpl,
+  sel: "lwc-test",
+  apiVersion: 9999999
+});
+export default __lwc_component_class_internal;

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/private-methods/static-async-private-method/actual.js

@@ -0,0 +1,11 @@
+import { LightningElement } from 'lwc';
+export default class Test extends LightningElement {
+    static async #fetchData(url) {
+        const response = await fetch(url);
+        return response.json();
+    }
+    async connectedCallback() {
+        const data = await Test.#fetchData('/api/data');
+        console.log(data);
+    }
+}

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/private-methods/static-async-private-method/expected.js

@@ -0,0 +1,19 @@
+import _tmpl from "./test.html";
+import { LightningElement, registerComponent as _registerComponent } from 'lwc';
+class Test extends LightningElement {
+  static async #fetchData(url) {
+    const response = await fetch(url);
+    return response.json();
+  }
+  async connectedCallback() {
+    const data = await Test.#fetchData('/api/data');
+    console.log(data);
+  }
+  /*LWC compiler vX.X.X*/
+}
+const __lwc_component_class_internal = _registerComponent(Test, {
+  tmpl: _tmpl,
+  sel: "lwc-test",
+  apiVersion: 9999999
+});
+export default __lwc_component_class_internal;

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/private-methods/throws-on-private-field/actual.js

@@ -0,0 +1,4 @@
+import { LightningElement } from 'lwc';
+export default class Test extends LightningElement {
+    #count = 0;
+}

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/private-methods/throws-on-private-field/error.json

@@ -0,0 +1,10 @@
+{
+    "message": "LWC1214: Private fields are not currently supported. Only private methods are supported.",
+    "loc": {
+        "line": 3,
+        "column": 4,
+        "start": 97,
+        "length": 11
+    },
+    "filename": "test.js"
+}

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/private-methods/throws-on-private-getter/actual.js

@@ -0,0 +1,6 @@
+import { LightningElement } from 'lwc';
+export default class Test extends LightningElement {
+    get #value() {
+        return this._val;
+    }
+}

packages/@lwc/babel-plugin-component/src/__tests__/fixtures/private-methods/throws-on-private-getter/error.json

@@ -0,0 +1,10 @@
+{
+    "message": "LWC1214: Private accessor methods are not currently supported. Only private methods are supported.",
+    "loc": {
+        "line": 3,
+        "column": 4,
+        "start": 97,
+        "length": 46
+    },
+    "filename": "test.js"
+}

packages/@lwc/babel-plugin-component/src/__tests__/index.spec.ts

@@ -7,9 +7,14 @@
 import path from 'node:path';
 import { describe } from 'vitest';
 import { transformSync } from '@babel/core';
+import babelClassPropertiesPlugin from '@babel/plugin-transform-class-properties';
 import { LWC_VERSION, HIGHEST_API_VERSION } from '@lwc/shared';
 import { testFixtureDir } from '@lwc/test-utils-lwc-internals';
-import plugin, { type LwcBabelPluginOptions } from '../index';
+import plugin, {
+    LwcPrivateMethodTransform,
+    LwcReversePrivateMethodTransform,
+    type LwcBabelPluginOptions,
+} from '../index';
 
 interface TestConfig extends LwcBabelPluginOptions {
     experimentalErrorRecoveryMode?: boolean;
@@ -82,7 +87,7 @@ describe('fixtures', () => {
     testFixtureDir<TestConfig>(
         {
             root: path.resolve(import.meta.dirname, 'fixtures'),
-            pattern: '**/actual.js',
+            pattern: '!(private-methods)/**/actual.js',
             ssrVersion: 2,
         },
         ({ src, config }) => {
@@ -110,3 +115,55 @@ describe('fixtures', () => {
         }
     );
 });
+
+function transformWithPrivateMethodPipeline(source: string, opts = {}) {
+    const testConfig = {
+        ...BASE_CONFIG,
+        parserOpts: (opts as any).parserOpts ?? {},
+        plugins: [
+            LwcPrivateMethodTransform,
+            [plugin, { ...BASE_OPTS, ...opts }],
+            [babelClassPropertiesPlugin, { loose: true }],
+            LwcReversePrivateMethodTransform,
+        ],
+    };
+
+    const result = transformSync(source, testConfig)!;
+
+    let { code } = result;
+
+    code = code!.replace(new RegExp(LWC_VERSION.replace(/\./g, '\\.'), 'g'), 'X.X.X');
+
+    code = code.replace(
+        new RegExp(`apiVersion: ${HIGHEST_API_VERSION}`, 'g'),
+        `apiVersion: 9999999`
+    );
+
+    return { code };
+}
+
+describe('private-methods fixtures', () => {
+    testFixtureDir(
+        {
+            root: path.resolve(import.meta.dirname, 'fixtures', 'private-methods'),
+            pattern: '**/actual.js',
+            ssrVersion: 2,
+        },
+        ({ src, config }) => {
+            let code;
+            let error;
+
+            try {
+                const result = transformWithPrivateMethodPipeline(src, config);
+                code = result.code;
+            } catch (err) {
+                error = JSON.stringify(normalizeError(err), null, 4);
+            }
+
+            return {
+                'expected.js': code,
+                'error.json': error,
+            };
+        }
+    );
+});