feat(StateManager): create the first version (DevExpress#30472)

Author: chaosmirage

.gitignore

@@ -1,5 +1,8 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+# tests
+__test-artifacts__
+
 # compiled output
 npm
 dist
@@ -26,7 +29,6 @@ node_modules
 !.vscode/launch.json
 !.vscode/extensions.json
 
-
 # System Files
 .DS_Store
 Thumbs.db

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

@@ -1,5 +1,6 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 import path from 'path';
+
 const getAbsolutePath = (packageName: string): any =>
     path.dirname(require.resolve(path.join(packageName, 'package.json')));
 

apps/react-storybook/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "storybook dev -p 6006",
-    "build": "storybook build"
+    "build": "storybook build",
+    "serve": "http-server storybook-static -p 6006 -c-1"
   },
   "author": "",
   "license": "ISC",
@@ -26,6 +27,7 @@
     "@storybook/react": "7.6.19",
     "@storybook/react-webpack5": "7.6.19",
     "@storybook/test": "7.6.19",
+    "http-server": "14.1.1",
     "prop-types": "15.8.1",
     "react": "18.0.0",
     "react-dom": "18.0.0",

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,
 };

packages/devextreme/build/gulp/js-bundles.js

@@ -15,7 +15,6 @@ const ctx = require('./context.js');
 const headerPipes = require('./header-pipes.js');
 const webpackConfig = require('../../webpack.config.js');
 const env = require('./env-variables.js');
-
 const namedDebug = lazyPipe()
     .pipe(named, (file) => path.basename(file.path, path.extname(file.path)) + '.debug');
 
@@ -30,15 +29,18 @@ const DEBUG_BUNDLES = BUNDLES.concat([ '/bundles/dx.custom.js' ]);
 
 const processBundles = (bundles, pathPrefix) => bundles.map((bundle) => pathPrefix + bundle);
 const muteWebPack = () => undefined;
-const getWebpackConfig = () => env.BUILD_INTERNAL_PACKAGE || env.BUILD_TEST_INTERNAL_PACKAGE ?
-    Object.assign({
-        plugins: [
-            new webpack.NormalModuleReplacementPlugin(/(.*)\/license_validation/, resource => {
-                resource.request = resource.request.replace('license_validation', 'license_validation_internal');
-            })
-        ]
-    }, webpackConfig) :
-    webpackConfig;
+const getWebpackConfig = () => {
+    const plugins = [];
+    const isInternalBuild = env.BUILD_INTERNAL_PACKAGE || env.BUILD_TEST_INTERNAL_PACKAGE;
+
+    if (isInternalBuild) {
+        plugins.push(new webpack.NormalModuleReplacementPlugin(/(.*)\/license_validation/, resource => {
+            resource.request = resource.request.replace('license_validation', 'license_validation_internal');
+        }));
+    }
+
+    return Object.assign(webpackConfig, { plugins });
+};
 
 const bundleProdPipe = lazyPipe()
     .pipe(named)

packages/devextreme/build/gulp/state_manager/__tests__/build_state_manager.test.js

@@ -0,0 +1,172 @@
+const fs = require('fs');
+const path = require('path');
+const through2 = require('through2');
+const Vinyl = require('vinyl');
+const replaceStateManagerModulesForProduction = require('../replace_state_manager_modules_for_production');
+const { removeDevelopmentStateManagerModules } = require('../remove_development_state_manager_modules');
+
+const createEnvContent = (env) => ({
+    index: [
+        `export { setupStateManager } from './setup_state_manager';`,
+        `export { signal } from './reactive_primitives/index';`
+    ].join('\n'),
+    setupStateManager: `export const setupStateManager = () => {
+        // this setupStateManager function body is for ${env} build
+    }`,
+    reactivePrimitivesIndex: `export const signal = () => {
+        // this signal function body is for ${env} build
+    }`,
+});
+
+const PROD_DIR_CONTENT = createEnvContent('prod');
+const DEV_DIR_CONTENT = createEnvContent('dev');
+
+const INDEX_DEV_CONTENT = `export { setupStateManager, signal } from './dev/index';`;
+const INDEX_PROD_CONTENT = `export * from './prod/index';`;
+
+const FILE_OUTSIDE_OF_ENV_SPECIFIC_FOLDER_CONTENT = 'test content';
+const FILE_OUTSIDE_STATE_MANGER_CONTENT = 'console.log("file outside of state manager");';
+
+describe('Build the state manager', () => {
+    let testsContext;
+    let originalConsoleError;
+    let consoleErrorSpy;
+
+    const createEnvPaths = (baseDir, env) => ({
+        reactivePrimitivesDir: path.join(baseDir, env, 'reactive_primitives'),
+        reactivePrimitivesIndex: path.join(baseDir, env, 'reactive_primitives', 'index.js'),
+        setupStateManager: path.join(baseDir, env, 'setup_state_manager.js'),
+        index: path.join(baseDir, env, 'index.js'),
+    });
+
+    const createEnvFiles = (paths, content) => {
+        Object.entries(paths).forEach(([key, filePath]) => {
+            if (filePath.endsWith('.js') && content[key]) {
+                fs.writeFileSync(filePath, content[key]);
+            }
+        });
+    };
+
+    const createEnvSpecificStreamFileObjects = (paths, content) => {
+        return Object.entries(paths)
+            .filter(([key, filePath]) => filePath.endsWith('.js') && content[key])
+            .map(([key, filePath]) => new Vinyl({
+                path: filePath,
+                contents: Buffer.from(content[key])
+            }));
+    };
+
+    beforeEach(() => {
+        const stream = replaceStateManagerModulesForProduction();
+        const tempDir = path.join(__dirname, '__test-artifacts__');
+
+        if (fs.existsSync(tempDir)) {
+            fs.rmSync(tempDir, { recursive: true, force: true });
+        }
+
+        const devextremeDir = path.join(tempDir, 'devextreme');
+        const stateManagerDir = path.join(devextremeDir, 'esm', '__internal', 'core', 'state_manager');
+        const devDir = path.join(stateManagerDir, 'dev');
+        const prodDir = path.join(stateManagerDir, 'prod');
+
+        const devPaths = createEnvPaths(stateManagerDir, 'dev');
+        const prodPaths = createEnvPaths(stateManagerDir, 'prod');
+
+        const indexFilePath = path.join(stateManagerDir, 'index.js');
+        const fileOutsideOfEnvSpecificFolderFilePath = path.join(stateManagerDir, 'state_manager.test.js');
+        const fileOutsideStateMangerPath = path.join(tempDir, 'other_file.js');
+
+        fs.mkdirSync(stateManagerDir, { recursive: true });
+        fs.mkdirSync(devDir, { recursive: true });
+        fs.mkdirSync(prodDir, { recursive: true });
+        fs.mkdirSync(devPaths.reactivePrimitivesDir, { recursive: true });
+        fs.mkdirSync(prodPaths.reactivePrimitivesDir, { recursive: true });
+
+        fs.writeFileSync(indexFilePath, INDEX_DEV_CONTENT);
+        fs.writeFileSync(fileOutsideOfEnvSpecificFolderFilePath, FILE_OUTSIDE_OF_ENV_SPECIFIC_FOLDER_CONTENT);
+        fs.writeFileSync(fileOutsideStateMangerPath, FILE_OUTSIDE_STATE_MANGER_CONTENT);
+
+        createEnvFiles(devPaths, DEV_DIR_CONTENT);
+        createEnvFiles(prodPaths, PROD_DIR_CONTENT);
+
+        originalConsoleError = console.error;
+        consoleErrorSpy = jest.fn();
+        console.error = consoleErrorSpy;
+
+        const files = [
+            ...createEnvSpecificStreamFileObjects(prodPaths, PROD_DIR_CONTENT),
+            ...createEnvSpecificStreamFileObjects(devPaths, DEV_DIR_CONTENT),
+            new Vinyl({
+                path: fileOutsideStateMangerPath,
+                contents: Buffer.from(FILE_OUTSIDE_STATE_MANGER_CONTENT)
+            }),
+            new Vinyl({
+                path: fileOutsideOfEnvSpecificFolderFilePath,
+                contents: Buffer.from(FILE_OUTSIDE_OF_ENV_SPECIFIC_FOLDER_CONTENT)
+            }),
+            new Vinyl({
+                path: indexFilePath,
+                contents: Buffer.from(INDEX_DEV_CONTENT)
+            }),
+        ];
+
+        stream.on('data', (file) => {
+            fs.writeFileSync(file.path, file.contents.toString());
+        });
+
+        files.forEach(file => stream.write(file));
+        stream.end();
+
+        testsContext = {
+            stream,
+            devextremeDir,
+            devDir,
+            prodPaths,
+            indexFilePath,
+            fileOutsideOfEnvSpecificFolderFilePath,
+            fileOutsideStateMangerPath
+        };
+    });
+
+    afterEach(() => {
+        console.error = originalConsoleError;
+    });
+
+    const runTestWithStream = (testFn) => {
+        return (done) => {
+            testsContext.stream.on('end', () => {
+                try {
+                    testFn();
+                    done();
+                } catch (error) {
+                    done(error);
+                }
+            });
+            testsContext.stream.on('error', done);
+        };
+    };
+
+    it('should remove development modules', runTestWithStream(() => {
+        removeDevelopmentStateManagerModules(testsContext.devextremeDir);
+
+        expect(fs.existsSync(testsContext.devDir)).toBe(false);
+        expect(fs.existsSync(testsContext.fileOutsideOfEnvSpecificFolderFilePath)).toBe(false);
+        expect(consoleErrorSpy).not.toHaveBeenCalled();
+    }));
+
+    it('should not remove modules that are unrelated to the state manager', runTestWithStream(() => {
+        removeDevelopmentStateManagerModules(testsContext.devextremeDir);
+
+        const fileOutsideStateMangerPathContent = fs.readFileSync(testsContext.fileOutsideStateMangerPath, 'utf8');
+        expect(fileOutsideStateMangerPathContent).toBe(FILE_OUTSIDE_STATE_MANGER_CONTENT);
+    }));
+
+    it('should replace `index.js` content by `prod/index.js` content', runTestWithStream(() => {
+        removeDevelopmentStateManagerModules(testsContext.devextremeDir);
+
+        const indexFileContent = fs.readFileSync(testsContext.indexFilePath, 'utf8');
+        expect(indexFileContent).toBe(INDEX_PROD_CONTENT);
+        expect(fs.existsSync(testsContext.prodPaths.index)).toBe(true);
+        expect(consoleErrorSpy).not.toHaveBeenCalled();
+    }));
+});

packages/devextreme/build/gulp/state_manager/constants.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+const STATE_MANAGER_FOLDER_PATH = path.join('__internal', 'core', 'state_manager');
+const STATE_MANAGER_INDEX_MODULE_PATH = path.join(STATE_MANAGER_FOLDER_PATH, 'index.js');
+const STATE_MANAGER_PROD_FOLDER_PATH = path.join(STATE_MANAGER_FOLDER_PATH, 'prod');
+
+module.exports = {
+    STATE_MANAGER_FOLDER_PATH,
+    STATE_MANAGER_INDEX_MODULE_PATH,
+    STATE_MANAGER_PROD_FOLDER_PATH
+};

packages/devextreme/build/gulp/state_manager/index.js

@@ -0,0 +1,2 @@
+require('./remove_development_state_manager_modules');
+require('./replace_state_manager_modules_for_production')

packages/devextreme/build/gulp/state_manager/remove_development_state_manager_modules.js

@@ -0,0 +1,44 @@
+'use strict';
+
+const path = require('path');
+const gulp = require('gulp');
+const del = require('del');
+const {
+    STATE_MANAGER_FOLDER_PATH,
+    STATE_MANAGER_INDEX_MODULE_PATH,
+    STATE_MANAGER_PROD_FOLDER_PATH
+} = require('./constants');
+const ctx = require('../context');
+
+const MODULE_TYPES = ['esm', 'cjs'];
+
+const removeDevelopmentStateManagerModules = (targetPath) => {
+    const patterns = [];
+
+    MODULE_TYPES.forEach(type => {
+        patterns.push(`${path.join(targetPath, type, STATE_MANAGER_FOLDER_PATH)}/**`);
+    });
+
+    MODULE_TYPES.forEach(type => {
+        patterns.push(`!${path.join(targetPath, type, STATE_MANAGER_FOLDER_PATH)}`);
+        patterns.push(`!${path.join(targetPath, type, STATE_MANAGER_INDEX_MODULE_PATH)}`);
+        patterns.push(`!${path.join(targetPath, type, STATE_MANAGER_PROD_FOLDER_PATH)}`);
+        patterns.push(`!${path.join(targetPath, type, STATE_MANAGER_PROD_FOLDER_PATH)}/**`);
+    });
+
+    del.sync(patterns);
+}
+
+const createRemoveDevelopmentStateManagerModulesTask = (targetPath) => (done) => {
+    removeDevelopmentStateManagerModules(targetPath);
+    done();
+};
+
+gulp.task('state-manager-remove-development-only-modules-transpiled-prod-esm', createRemoveDevelopmentStateManagerModulesTask(ctx.TRANSPILED_PROD_ESM_PATH));
+
+gulp.task('state-manager-remove-development-only-modules-transpiled-prod-renovation', createRemoveDevelopmentStateManagerModulesTask(ctx.TRANSPILED_PROD_RENOVATION_PATH));
+
+module.exports = {
+    removeDevelopmentStateManagerModules,
+    createRemoveDevelopmentStateManagerModulesTask
+};

packages/devextreme/build/gulp/state_manager/replace_state_manager_modules_for_production.js

@@ -0,0 +1,42 @@
+'use strict';
+
+const gulp = require('gulp');
+const through2 = require('through2');
+const path = require('path');
+const fs = require('fs');
+const babel = require('@babel/core');
+const transpileConfig = require('../transpile-config');
+const {
+    STATE_MANAGER_FOLDER_PATH,
+    STATE_MANAGER_INDEX_MODULE_PATH,
+} = require('./constants');
+const ctx = require('../context');
+
+const ERROR_PREFIX = 'Error during replacing the state manager modules:';
+
+function replaceStateManagerModulesForProduction() {
+    return through2.obj(function(file, enc, callback) {
+        if (file.path.includes(STATE_MANAGER_INDEX_MODULE_PATH)) {
+            try {
+                file.contents = Buffer.from(`export * from './prod/index';`);
+            } catch (error) {
+                console.error(ERROR_PREFIX, error);
+            }
+        }
+
+        callback(null, file);
+    });
+}
+
+const prepareStateManager = (dist) => gulp.series.apply(gulp, [
+    () => gulp
+        .src(`${dist}/**/${STATE_MANAGER_FOLDER_PATH}/**`)
+        .pipe(replaceStateManagerModulesForProduction())
+        .pipe(gulp.dest(dist)),
+]);
+
+gulp.task('state-manager-replace-production-modules-transpiled-prod-esm', prepareStateManager(ctx.TRANSPILED_PROD_ESM_PATH));
+
+gulp.task('state-manager-replace-production-modules-transpiled-prod-renovation', prepareStateManager(ctx.TRANSPILED_PROD_RENOVATION_PATH));
+
+module.exports = replaceStateManagerModulesForProduction;