From 7e5e3850cd80ab833c1a51ffddebf77833fed45c Mon Sep 17 00:00:00 2001 From: rax-it Date: Wed, 30 Jul 2025 16:32:35 -0700 Subject: [PATCH 1/2] chore: initial commit --- .../compiler/src/transformers/javascript.ts | 4 +-- packages/@lwc/compiler/src/typings/babel.d.ts | 5 ++++ .../@lwc/engine-core/src/framework/invoker.ts | 25 +++++++++++++++++++ yarn.lock | 6 +++-- 4 files changed, 36 insertions(+), 4 deletions(-) diff --git a/packages/@lwc/compiler/src/transformers/javascript.ts b/packages/@lwc/compiler/src/transformers/javascript.ts index 724c503145..e19578d3ce 100755 --- a/packages/@lwc/compiler/src/transformers/javascript.ts +++ b/packages/@lwc/compiler/src/transformers/javascript.ts @@ -7,7 +7,7 @@ import * as babel from '@babel/core'; import babelAsyncGeneratorFunctionsPlugin from '@babel/plugin-transform-async-generator-functions'; import babelAsyncToGenPlugin from '@babel/plugin-transform-async-to-generator'; -import babelClassPropertiesPlugin from '@babel/plugin-transform-class-properties'; +// import babelClassPropertiesPlugin from '@babel/plugin-transform-class-properties'; import babelObjectRestSpreadPlugin from '@babel/plugin-transform-object-rest-spread'; import lockerBabelPluginTransformUnforgeables from '@locker/babel-plugin-transform-unforgeables'; import lwcClassTransformPlugin, { type LwcBabelPluginOptions } from '@lwc/babel-plugin-component'; @@ -54,7 +54,7 @@ export default function scriptTransform( const plugins: babel.PluginItem[] = [ [lwcClassTransformPlugin, lwcBabelPluginOptions], - [babelClassPropertiesPlugin, { loose: true }], + // [babelClassPropertiesPlugin, { loose: true }], ]; if (!isAPIFeatureEnabled(APIFeature.DISABLE_OBJECT_REST_SPREAD_TRANSFORMATION, apiVersion)) { diff --git a/packages/@lwc/compiler/src/typings/babel.d.ts b/packages/@lwc/compiler/src/typings/babel.d.ts index 1bf3d10549..0b76df2039 100644 --- a/packages/@lwc/compiler/src/typings/babel.d.ts +++ b/packages/@lwc/compiler/src/typings/babel.d.ts @@ -20,3 +20,8 @@ declare module '@babel/plugin-transform-async-to-generator' { const props: any; export = props; } + +declare module '@babel/plugin-transform-private-methods' { + const props: any; + export = props; +} diff --git a/packages/@lwc/engine-core/src/framework/invoker.ts b/packages/@lwc/engine-core/src/framework/invoker.ts index 822ed36966..643a00407b 100644 --- a/packages/@lwc/engine-core/src/framework/invoker.ts +++ b/packages/@lwc/engine-core/src/framework/invoker.ts @@ -12,6 +12,7 @@ import { evaluateTemplate, setVMBeingRendered, getVMBeingRendered } from './temp import { runWithBoundaryProtection } from './vm'; import { logOperationStart, logOperationEnd, OperationId } from './profiler'; import { LightningElement } from './base-lightning-element'; +import { getDecoratorsMeta } from './decorators/register'; import type { Template } from './template'; import type { VM } from './vm'; import type { LightningElementConstructor } from './base-lightning-element'; @@ -72,6 +73,9 @@ export function invokeComponentConstructor(vm: VM, Ctor: LightningElementConstru 'Invalid component constructor, the class should extend LightningElement.' ); } + + // NEW: Migrate class fields to reactive system + migrateClassFieldsToReactiveSystem(vm, result); } catch (e) { error = Object(e); } finally { @@ -86,6 +90,27 @@ export function invokeComponentConstructor(vm: VM, Ctor: LightningElementConstru } } +function migrateClassFieldsToReactiveSystem(vm: VM, component: LightningElement) { + const def = vm.def; + const decoratorsMeta = getDecoratorsMeta(def.ctor); + const observedFields = decoratorsMeta.observedFields || {}; + + // Get the field names that should be observed + const fieldNames = Object.keys(observedFields); + + fieldNames.forEach((fieldName) => { + // Check if the field exists on the component but not in the reactive system + if (fieldName in component && !(fieldName in vm.cmpFields)) { + // Migrate the value to the reactive system + const value = (component as any)[fieldName]; + vm.cmpFields[fieldName] = value; + + // Remove the direct property to ensure future access goes through reactive system + delete (component as any)[fieldName]; + } + }); +} + export function invokeComponentRenderMethod(vm: VM): VNodes { const { def: { render }, diff --git a/yarn.lock b/yarn.lock index e72d1ddeae..07b03cfbac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2244,9 +2244,11 @@ "@lwc/eslint-plugin-lwc-internal@link:./scripts/eslint-plugin": version "0.0.0" + uid "" "@lwc/test-utils-lwc-internals@link:./scripts/test-utils": version "0.0.0" + uid "" "@napi-rs/wasm-runtime@0.2.4": version "0.2.4" @@ -8617,7 +8619,7 @@ http-assert@^1.3.0: http-cache-semantics@3.8.1, http-cache-semantics@4.1.1, http-cache-semantics@^4.0.0, http-cache-semantics@^4.1.0, http-cache-semantics@^4.1.1: version "4.1.1" - resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a" + resolved "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a" integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ== http-errors@2.0.0, http-errors@^2.0.0: @@ -12714,7 +12716,7 @@ semver-truncate@^1.1.2: semver@7.6.0, semver@^5.3.0, semver@^5.5.0, semver@^5.6.0, semver@^6.3.0, semver@^6.3.1, semver@^7.1.1, semver@^7.3.2, semver@^7.3.5, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0, semver@^7.6.3, semver@^7.7.2: version "7.6.0" - resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d" + resolved "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d" integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg== dependencies: lru-cache "^6.0.0" From cc17345e87da9dedc0caa40c470653b98db19a85 Mon Sep 17 00:00:00 2001 From: rax-it Date: Wed, 30 Jul 2025 16:35:31 -0700 Subject: [PATCH 2/2] chore: cleanup --- packages/@lwc/compiler/src/typings/babel.d.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/@lwc/compiler/src/typings/babel.d.ts b/packages/@lwc/compiler/src/typings/babel.d.ts index 0b76df2039..1bf3d10549 100644 --- a/packages/@lwc/compiler/src/typings/babel.d.ts +++ b/packages/@lwc/compiler/src/typings/babel.d.ts @@ -20,8 +20,3 @@ declare module '@babel/plugin-transform-async-to-generator' { const props: any; export = props; } - -declare module '@babel/plugin-transform-private-methods' { - const props: any; - export = props; -}