feat(StateManager): create the first version #30472

chaosmirage · 2025-07-23T12:37:02Z

No description provided.

…r different artifact types and environments

…emory leaks

Fixed "heap out of memory" errors in the Redux Devtools during the diff calculation process due to the `changes` property of `CardViewOptionsController` and `ColumnsController` controllers contains a reference to the component instance.

…ager

…nals-core` wrapper

Prevent direct imports from `@preact/signals-core` package to ensure consistent state management across the codebase.

…ry` for consistency

wdevfx · 2025-07-29T07:32:46Z

packages/devextreme/js/__internal/core/state_manager/index.prod.ts

@@ -0,0 +1,14 @@
+export const setupStateManager = (): void => {};


Now state_manager/index.prod.ts and state_manager/index.ts different only by setupStateManager function

Also, the reactive_primitives has the index.ts and index.prod.ts too
So, it's a little bit unobvious where is code that goes to prod version and where is the dev code

Let's make it more obvious and scalable,
I suggest to modify the state_manager file structure the following way:

state_manager - dev - index.ts // <-- export of public API here - event_emitter.ts - logger.ts - other files / directories related to state manager - prod - index.ts // <-- just re-export `@preact/signals-core` and all public API stubs for `prod` version - index.ts // <-- root export file

wdevfx · 2025-07-29T07:36:30Z

packages/devextreme/js/__internal/core/state_manager/index.prod.ts

@@ -0,0 +1,14 @@
+export const setupStateManager = (): void => {};
+


About two index files (index.ts & index.prod.ts)

We can keep both of them and replace imports during build,
but it's additional logic in our complex build (build/state_manager directory)

So, let's try to implement this feature a little bit different:
We support the ts path alias feature with our build and already has a few defined paths:
Link to the code

So, we can create two tsconfigs and resolve paths differently for dev and prod builds
It looks more right way, because it's one of main reasons why the import paths was introduced
(different imports in different environments)

Only problem that gulp takes all files by glob (it doesn't matter these files used or not)
So we still required to change the glob pattern depends on env values or delete unused files by hands with separate gulp task

wdevfx · 2025-07-29T10:08:55Z

.gitignore

+# tests
+temp
+


Let's specify this gitignore part more directly
Now it's not clear to which part of project this temp related

I suggest to rename the temp directory to __test-artifacts__ or sth like that to make it more obvious

wdevfx · 2025-07-29T10:14:24Z

apps/react-storybook/.storybook/main.ts

@@ -25,5 +27,28 @@ const config: StorybookConfig = {
    autodocs: "tag",
  },
  staticDirs: ['../stories/assets', '../node_modules/devextreme/dist'],
+  webpackFinal: async (config, { configType }) => {


As far as I understand, the storybook build takes already builded devextreme
To be more clear, the build chain looks the following way:
devextreme -> devextreme-react -> storybook

So, the storybook's webpack processed already builded libraries from deps
And it looks incorrect to "cut offthe state manager part here If we already builtdevextreme` in prod mode -> it should be already cut

wdevfx · 2025-07-29T10:22:29Z

packages/devextreme/build/gulp/context.js

@@ -19,5 +19,6 @@ module.exports = {
    TRANSPILED_RENOVATION_PATH: 'artifacts/transpiled-renovation',
    TRANSPILED_PROD_ESM_PATH: 'artifacts/transpiled-esm-npm',
    SCSS_PACKAGE_PATH: '../devextreme-scss',
-    EULA_URL: 'https://js.devexpress.com/Licensing/'
+    EULA_URL: 'https://js.devexpress.com/Licensing/',
+    REMOVE_NON_PRODUCTION_MODULE: argv.uglify,


I'm not sure that it's ok to use uglify as flag for dev / prod modes
It may lead to misunderstand in the future

As example -> I'd like to play with minified React to reproduce the issue, and would like to use StateManager that helps me to debug

Also, I'm not sure that in current build we have good flag to use
So, may be as a temporary solution -> let's add a separate flag
Sth like ENABLE_STATE_MANAGER and add it to npm scripts manually

@alexslavr cc

wdevfx · 2025-07-29T22:51:51Z

packages/devextreme/js/__internal/core/state_manager/preact_signal_value_container_manager.ts

+// eslint-disable-next-line @stylistic/max-len
+export class PreactSignalValueContainerManager implements StateManagementTypes.ValueContainerManager {


Let's just move implements on the next line instead of disabling the ESLint check

Suggested change

// eslint-disable-next-line @stylistic/max-len

export class PreactSignalValueContainerManager implements StateManagementTypes.ValueContainerManager {

export class PreactSignalValueContainerManager

implements StateManagementTypes.ValueContainerManager {

wdevfx · 2025-07-29T22:53:14Z

packages/devextreme/js/__internal/core/state_manager/reactive_primitives/types.ts

+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+export type EffectFn = () => void | EffectCleanup;


Let's fix linter error instead of disabling it

Suggested change

// eslint-disable-next-line @typescript-eslint/no-invalid-void-type

export type EffectFn = () => void | EffectCleanup;

export type EffectFn = (() => void) | EffectCleanup;

wdevfx · 2025-07-29T22:54:38Z

packages/devextreme/js/__internal/core/state_manager/state_manager.ts

+    return this.valueContainerManagers
+      // eslint-disable-next-line @stylistic/max-len
+      .some((currentStateContainerManager) => currentStateContainerManager.canHandle(valueContainer));


Let's fix linter error instead of disabling it

Suggested change

return this.valueContainerManagers

// eslint-disable-next-line @stylistic/max-len

.some((currentStateContainerManager) => currentStateContainerManager.canHandle(valueContainer));

.some((

currentStateContainerManager,

) => currentStateContainerManager.canHandle(valueContainer))

wdevfx · 2025-07-29T22:55:09Z

packages/devextreme/js/__internal/core/state_manager/state_manager.ts

+      // eslint-disable-next-line @stylistic/max-len
+      .find((currentStateContainerManager) => currentStateContainerManager.canHandle(valueContainer));


Let's fix linter error instead of disabling it

Suggested change

// eslint-disable-next-line @stylistic/max-len

.find((currentStateContainerManager) => currentStateContainerManager.canHandle(valueContainer));

.find((

currentStateContainerManager,

) => currentStateContainerManager.canHandle(valueContainer));

wdevfx · 2025-07-29T22:58:09Z

packages/devextreme/js/__internal/core/state_manager/types.ts

+  onExternalAction: (callback: DevToolsExternalActionCallback) => void;
+}
+
+// eslint-disable-next-line spellcheck/spell-checker


Let's disable spell-checker linter errors on top of the file

/* eslint-disable spellcheck/spell-checker */

Unfortunately, we don't update this rule and don't add new values (for a long time)
So, for now it's ok to disable it for files where a lot of spell-checker errors occures

@IlyaKhD, @pomahtri maybe we should disable spell-checker rule from our default config?
Or let's create a tech task to actualize it and all valid exceptions :)

chaosmirage added 10 commits July 23, 2025 13:01

feat(StateManager): implement the first version of the state manager

509d62d

feat(StateManager): implement enabling/disabling the state manager fo…

ca8a6bd

…r different artifact types and environments

fix(StateManager): replace only setup_state_manager.js

ffb8fc8

chore: added fixes after a review

7d5bca8

chore: change tests, simplify implementation

eb9c5c4

chore: refactor state manager build process

06d066c

chore: remove areEqual

a23a382

chore: enforce decorator registration before instance creation

7de0787

chore: added fixes after a review

8dc6188

chore: use WeakRef for object references in StateManager to prevent m…

b58387b

…emory leaks

chaosmirage force-pushed the state-manager branch 2 times, most recently from 7d1be18 to cb87d90 Compare July 23, 2025 13:58

chaosmirage changed the title ~~State manager~~ feat(StateManager): create the first version of the state manager Jul 23, 2025

chaosmirage force-pushed the state-manager branch from cb87d90 to afdb0f6 Compare July 24, 2025 11:32

chaosmirage changed the title ~~feat(StateManager): create the first version of the state manager~~ feat(StateManager): create the first version Jul 24, 2025

chaosmirage marked this pull request as ready for review July 24, 2025 16:47

chaosmirage requested a review from a team as a code owner July 24, 2025 16:47

chaosmirage added the 25_2 label Jul 24, 2025

chaosmirage requested review from pomahtri, wdevfx and dxvladislavvolkov July 24, 2025 16:47

chaosmirage self-assigned this Jul 24, 2025

chaosmirage requested a review from IlyaKhD July 24, 2025 17:06

chaosmirage added 6 commits July 24, 2025 20:12

feat(StateManager): implement wrapper for @preact/signals-core

643cd3b

feat(StateManager): merge @preact/signals-core wrapper with state man…

517a4bc

…ager

chore: replace reactive primitives imports to the state manager

52d7bd3

chore: adapt build process for state manager merged with `@preact/sig…

9fff3c5

…nals-core` wrapper

chore: enforce state manager usage for reactive primitives

e2fec93

Prevent direct imports from `@preact/signals-core` package to ensure consistent state management across the codebase.

chore(StateManager): replace makeStateManager by `StateManagerFacto…

2eef322

…ry` for consistency

chaosmirage force-pushed the state-manager branch from afdb0f6 to 2eef322 Compare July 24, 2025 17:12

wdevfx reviewed Jul 30, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(StateManager): create the first version #30472

feat(StateManager): create the first version #30472

chaosmirage commented Jul 23, 2025

Uh oh!

wdevfx Jul 29, 2025

Uh oh!

wdevfx Jul 29, 2025

Uh oh!

wdevfx Jul 29, 2025

Uh oh!

wdevfx Jul 29, 2025

Uh oh!

wdevfx Jul 29, 2025

Uh oh!

wdevfx Jul 29, 2025

Uh oh!

wdevfx Jul 29, 2025

Uh oh!

wdevfx Jul 29, 2025

Uh oh!

wdevfx Jul 29, 2025

Uh oh!

wdevfx Jul 29, 2025

Uh oh!

Uh oh!

		@@ -0,0 +1,14 @@
		export const setupStateManager = (): void => {};

		// eslint-disable-next-line @stylistic/max-len
		export class PreactSignalValueContainerManager implements StateManagementTypes.ValueContainerManager {

		// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
		export type EffectFn = () => void \| EffectCleanup;

	// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
	export type EffectFn = () => void \| EffectCleanup;
	export type EffectFn = (() => void) \| EffectCleanup;

		// eslint-disable-next-line @stylistic/max-len
		.find((currentStateContainerManager) => currentStateContainerManager.canHandle(valueContainer));

		# tests
		temp

feat(StateManager): create the first version #30472

Are you sure you want to change the base?

feat(StateManager): create the first version #30472

Conversation

chaosmirage commented Jul 23, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!