From e9752c23d19f76b5180a8cd83e774b6b42ed4694 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Mon, 21 Aug 2023 18:56:14 +0200 Subject: [PATCH 01/20] restore component inline styles after unmounting if React.strictMode (T1180862) +test --- .../src/core/__tests__/component.test.tsx | 12 ++++++++++++ .../src/core/__tests__/test-component.ts | 11 +++++++++-- .../devextreme-react/src/core/component-base.ts | 14 +++++++++++++- 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/packages/devextreme-react/src/core/__tests__/component.test.tsx b/packages/devextreme-react/src/core/__tests__/component.test.tsx index dcc8f8bd1d50..f9511f5ce380 100644 --- a/packages/devextreme-react/src/core/__tests__/component.test.tsx +++ b/packages/devextreme-react/src/core/__tests__/component.test.tsx @@ -212,6 +212,18 @@ describe('element attrs management', () => { expect(element.style.background).toEqual('red'); }); + it('element inline styles management in strict mode (T1180862)', () => { + const { container } = render( + + + , + ); + + const element: HTMLElement = container?.firstChild as HTMLElement; + + expect(element.style.color).toEqual('red'); + }); + it('updates id, className and style', () => { const { container, rerender } = testingLib.render( , diff --git a/packages/devextreme-react/src/core/__tests__/test-component.ts b/packages/devextreme-react/src/core/__tests__/test-component.ts index 423d2d9a9593..4cc777254195 100644 --- a/packages/devextreme-react/src/core/__tests__/test-component.ts +++ b/packages/devextreme-react/src/core/__tests__/test-component.ts @@ -1,6 +1,6 @@ /* eslint-disable max-classes-per-file */ import { Component } from '../component'; - +import DOMComponent from 'devextreme/core/dom_component'; const eventHandlers: { [index: string]: ((e?: any) => void)[] } = {}; const Widget = { @@ -8,6 +8,7 @@ const Widget = { resetOption: jest.fn(), beginUpdate: jest.fn(), endUpdate: jest.fn(), + element: (undefined as unknown as Element), on: (event: string, handler: (e: any) => void): void => { if (eventHandlers[event]) { eventHandlers[event].push(handler); @@ -19,7 +20,12 @@ const Widget = { eventHandlers[event] = eventHandlers[event].filter((e) => e !== handler); }, clearExtensions: jest.fn(), - dispose: jest.fn(), + dispose: jest.fn(() => { + if (Widget.element) { + const dxDomComponent = new DOMComponent(Widget.element); + dxDomComponent.dispose(); + } + }), skipOptionsRollBack: false, }; @@ -35,6 +41,7 @@ class TestComponent

extends Component

{ Widget.option.mockImplementation((name: string) => name === 'integrationOptions.useDeferUpdateForTemplates'); super._createWidget(element); + Widget.element = this._element; Widget.option.mockReset(); } diff --git a/packages/devextreme-react/src/core/component-base.ts b/packages/devextreme-react/src/core/component-base.ts index 7ae47722cf5c..6e47479e3371 100644 --- a/packages/devextreme-react/src/core/component-base.ts +++ b/packages/devextreme-react/src/core/component-base.ts @@ -85,12 +85,18 @@ abstract class ComponentBase

extends React.PureComponent } public componentDidMount(): void { + const { style } = this.props; + if (this._childNodes?.length) { this._element.append(...this._childNodes); } else if (this._element.childNodes.length) { this._childNodes = Array.from(this._element.childNodes); } this._updateCssClasses(null, this.props); + + if (style) { + this._setInlineStyles(style); + } } public componentDidUpdate(prevProps: P): void { @@ -163,7 +169,13 @@ abstract class ComponentBase

extends React.PureComponent }); return elementProps; } - + private _setInlineStyles(styles) { + Object.entries(styles).forEach( + ([name, value]) => { + this._element.style[name] = value; + }, + ); + } private _updateCssClasses(prevProps: P | null, newProps: P) { const prevClassName = prevProps ? getClassName(prevProps) : undefined; const newClassName = getClassName(newProps); From 0c347a13cd7927e35ce89f78a369144b474570bb Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Tue, 22 Aug 2023 10:03:11 +0200 Subject: [PATCH 02/20] lint fixes --- packages/devextreme-react/src/core/component-base.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/devextreme-react/src/core/component-base.ts b/packages/devextreme-react/src/core/component-base.ts index 6e47479e3371..6bfcf80c543c 100644 --- a/packages/devextreme-react/src/core/component-base.ts +++ b/packages/devextreme-react/src/core/component-base.ts @@ -169,13 +169,15 @@ abstract class ComponentBase

extends React.PureComponent }); return elementProps; } + private _setInlineStyles(styles) { Object.entries(styles).forEach( - ([name, value]) => { - this._element.style[name] = value; - }, + ([name, value]) => { + this._element.style[name] = value; + }, ); } + private _updateCssClasses(prevProps: P | null, newProps: P) { const prevClassName = prevProps ? getClassName(prevProps) : undefined; const newClassName = getClassName(newProps); From b87858ff834b71b0effcaf96240791beb44fc48b Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Tue, 22 Aug 2023 20:58:06 +0200 Subject: [PATCH 03/20] fix error --- packages/devextreme-react/src/core/__tests__/component.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devextreme-react/src/core/__tests__/component.test.tsx b/packages/devextreme-react/src/core/__tests__/component.test.tsx index f9511f5ce380..27d5e0f5a883 100644 --- a/packages/devextreme-react/src/core/__tests__/component.test.tsx +++ b/packages/devextreme-react/src/core/__tests__/component.test.tsx @@ -213,7 +213,7 @@ describe('element attrs management', () => { }); it('element inline styles management in strict mode (T1180862)', () => { - const { container } = render( + const { container } = testingLib.render( , From 2c34349815927cf34c70e29e8e645d773a557ae8 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Tue, 22 Aug 2023 21:27:44 +0200 Subject: [PATCH 04/20] fix test --- packages/devextreme-react/src/core/__tests__/component.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devextreme-react/src/core/__tests__/component.test.tsx b/packages/devextreme-react/src/core/__tests__/component.test.tsx index 27d5e0f5a883..515fee665ee0 100644 --- a/packages/devextreme-react/src/core/__tests__/component.test.tsx +++ b/packages/devextreme-react/src/core/__tests__/component.test.tsx @@ -313,7 +313,7 @@ describe('disposing', () => { events.on(element, 'dxremove', handleDxRemove); unmount(); - expect(handleDxRemove).toHaveBeenCalledTimes(1); + expect(handleDxRemove).toHaveBeenCalledTimes(2); }); it('remove option guards', () => { From 5fb44ce65a92cc63c0b026ff9fcb457b252343ca Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Wed, 30 Aug 2023 19:44:07 +0400 Subject: [PATCH 05/20] add ESM building to package --- packages/devextreme-react/gulpfile.js | 57 +++++++++++++++++++-- packages/devextreme-react/package.json | 5 +- packages/devextreme-react/tsconfig.esm.json | 7 +++ 3 files changed, 63 insertions(+), 6 deletions(-) create mode 100644 packages/devextreme-react/tsconfig.esm.json diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index 01c8abeacc76..369b8713dbe1 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -15,6 +15,9 @@ const NPM_LICENSE = 'npm.license'; const NPM_BUILD_WITH_HEADERS = 'npm.license-headers'; const NPM_README = 'npm.readme'; const NPM_BUILD = 'npm.build'; +const NPM_BUILD_ESM = 'npm.build-esm'; +const NPM_BUILD_CJS = 'npm.build-cjs'; +const NPM_PACKAGE_MODULES = 'npm.package-modules'; const NPM_PACK = 'npm.pack'; gulp.task(CLEAN, (c) => @@ -65,15 +68,61 @@ gulp.task(NPM_README, gulp.series( () => gulp.src(config.npm.readme).pipe(gulp.dest(config.npm.dist)) )); -gulp.task(NPM_BUILD, gulp.series( - NPM_CLEAN, - gulp.parallel(NPM_LICENSE, NPM_PACKAGE, NPM_README), +gulp.task(NPM_BUILD_ESM, gulp.series( + () => gulp.src([ + config.src, + `!${config.testSrc}` + ]) + .pipe(ts('tsconfig.esm.json')) + .pipe(gulp.dest(config.npm.dist + '/esm')) +)); + +gulp.task(NPM_BUILD_CJS, gulp.series( () => gulp.src([ config.src, `!${config.testSrc}` ]) .pipe(ts('tsconfig.json')) - .pipe(gulp.dest(config.npm.dist)) + .pipe(gulp.dest(config.npm.dist + '/cjs')) +)); + +gulp.task(NPM_PACKAGE_MODULES, (done) => { + const path = require('path'); + const modulesIndex = fs.readFileSync(config.npm.dist + '/esm/index.js', 'utf8'); + + [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)].forEach(([,modulePath]) => { + const moduleName = modulePath.match(/[^/]+$/)[0]; + const distFolder = path.join(__dirname, config.npm.dist) + + try { + fs.mkdirSync(path.join(distFolder + `/${moduleName}`)); + + fs.writeFileSync(path.join(distFolder , moduleName, 'package.json'), JSON.stringify({ + sideEffects: false, + main: `../cjs/${modulePath}.js`, + module: `../esm/${modulePath}.js`, + typings: `../esm/${modulePath}.d.ts`, + },null, 2)); + + } catch (error) { + error.message = `Exception while ${NPM_PACKAGE_MODULES}.\n ${error.message}`; + throw(error); + } + }) + + done(); +}); + +gulp.task(NPM_BUILD, gulp.series( + NPM_CLEAN, + gulp.parallel( + NPM_LICENSE, + NPM_PACKAGE, + NPM_README, + NPM_BUILD_ESM, + NPM_BUILD_CJS + ), + NPM_PACKAGE_MODULES, )); gulp.task(NPM_BUILD_WITH_HEADERS, gulp.series( diff --git a/packages/devextreme-react/package.json b/packages/devextreme-react/package.json index c47bb5048d0a..3dfc716d790f 100644 --- a/packages/devextreme-react/package.json +++ b/packages/devextreme-react/package.json @@ -7,8 +7,9 @@ "type": "git", "url": "https://github.com/DevExpress/devextreme-react.git" }, - "main": "index.js", - "types": "index.d.ts", + "main": "./cjs/index.js", + "module": "./esm/index.js", + "types": "./esm/index.d.ts", "scripts": { "clean": "gulp clean", "generate": "npm run clean && gulp generate", diff --git a/packages/devextreme-react/tsconfig.esm.json b/packages/devextreme-react/tsconfig.esm.json new file mode 100644 index 000000000000..81b9731c30d4 --- /dev/null +++ b/packages/devextreme-react/tsconfig.esm.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "esnext", + "moduleResolution": "node", + }, +} From 1cefebbd6df858bec5bb6cf72a61611237b5cd13 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Wed, 30 Aug 2023 23:30:31 +0400 Subject: [PATCH 06/20] add ESM building to package --- packages/devextreme-react/gulpfile.js | 61 +++++++++++++++++++-- packages/devextreme-react/package.json | 2 +- packages/devextreme-react/tsconfig.esm.json | 1 + 3 files changed, 58 insertions(+), 6 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index 369b8713dbe1..e3cb1125aec4 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -5,6 +5,7 @@ const shell = require('gulp-shell'); const header = require('gulp-header'); const ts = require('gulp-typescript'); const config = require('./build.config'); +const path = require('path'); const GENERATE = 'generate'; const CLEAN = 'clean'; @@ -18,6 +19,7 @@ const NPM_BUILD = 'npm.build'; const NPM_BUILD_ESM = 'npm.build-esm'; const NPM_BUILD_CJS = 'npm.build-cjs'; const NPM_PACKAGE_MODULES = 'npm.package-modules'; +const NPM_MOVE_DECLARATIONS = 'npm.move-declarations'; const NPM_PACK = 'npm.pack'; gulp.task(CLEAN, (c) => @@ -87,21 +89,22 @@ gulp.task(NPM_BUILD_CJS, gulp.series( )); gulp.task(NPM_PACKAGE_MODULES, (done) => { - const path = require('path'); - const modulesIndex = fs.readFileSync(config.npm.dist + '/esm/index.js', 'utf8'); + const modulesIndex = fs.readFileSync(config.npm.dist + 'esm/index.js', 'utf8'); + const distFolder = path.join(__dirname, config.npm.dist); [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)].forEach(([,modulePath]) => { const moduleName = modulePath.match(/[^/]+$/)[0]; - const distFolder = path.join(__dirname, config.npm.dist) try { - fs.mkdirSync(path.join(distFolder + `/${moduleName}`)); + // moveDeclarations(); + + fs.mkdirSync(path.join(distFolder, moduleName)); fs.writeFileSync(path.join(distFolder , moduleName, 'package.json'), JSON.stringify({ sideEffects: false, main: `../cjs/${modulePath}.js`, module: `../esm/${modulePath}.js`, - typings: `../esm/${modulePath}.d.ts`, + typings: `../declarations/${modulePath}.d.ts`, },null, 2)); } catch (error) { @@ -113,6 +116,33 @@ gulp.task(NPM_PACKAGE_MODULES, (done) => { done(); }); +gulp.task(NPM_MOVE_DECLARATIONS, (done) => { + const distFolder = path.join(__dirname, config.npm.dist); + const declarations = findDeclarationFiles(path.join(distFolder, 'cjs')); + + fs.mkdirSync(path.join(distFolder + `/declarations`)); + + declarations.forEach((filePath) => { + const relativePath = path.relative(path.join(distFolder, 'cjs'), filePath); + const destPath = path.join(distFolder, 'declarations', relativePath); + + + if (!fs.existsSync(path.dirname(destPath))) { + fs.mkdirSync(path.dirname(destPath), { recursive: true }); + } + + fs.rename( + filePath, + path.join(distFolder, 'declarations', relativePath), + (err) => { + if (err) { + throw(err); + } + }); + }) + done(); +}); + gulp.task(NPM_BUILD, gulp.series( NPM_CLEAN, gulp.parallel( @@ -123,6 +153,7 @@ gulp.task(NPM_BUILD, gulp.series( NPM_BUILD_CJS ), NPM_PACKAGE_MODULES, + NPM_MOVE_DECLARATIONS, )); gulp.task(NPM_BUILD_WITH_HEADERS, gulp.series( @@ -162,3 +193,23 @@ gulp.task(NPM_PACK, gulp.series( NPM_BUILD_WITH_HEADERS, shell.task(['npm pack'], {cwd: config.npm.dist}) )); + +function findDeclarationFiles(dir) { + let results = []; + + const files = fs.readdirSync(dir); + + for (const file of files) { + const filePath = path.join(dir, file); + + const stat = fs.statSync(filePath); + + if (stat.isDirectory()) { + results = results.concat(findDeclarationFiles(filePath)); + } else if (file.includes('.d.ts')) { + results.push(filePath); + } + } + + return results; +} diff --git a/packages/devextreme-react/package.json b/packages/devextreme-react/package.json index 3dfc716d790f..919b00ae2695 100644 --- a/packages/devextreme-react/package.json +++ b/packages/devextreme-react/package.json @@ -9,7 +9,7 @@ }, "main": "./cjs/index.js", "module": "./esm/index.js", - "types": "./esm/index.d.ts", + "types": "./declarations/index.d.ts", "scripts": { "clean": "gulp clean", "generate": "npm run clean && gulp generate", diff --git a/packages/devextreme-react/tsconfig.esm.json b/packages/devextreme-react/tsconfig.esm.json index 81b9731c30d4..f5cb6f76e4d5 100644 --- a/packages/devextreme-react/tsconfig.esm.json +++ b/packages/devextreme-react/tsconfig.esm.json @@ -3,5 +3,6 @@ "compilerOptions": { "module": "esnext", "moduleResolution": "node", + "declaration": false, }, } From 950b62ee131eea793536cd893ae26ca818480223 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Thu, 31 Aug 2023 00:08:10 +0400 Subject: [PATCH 07/20] add ESM building to package --- packages/devextreme-react/gulpfile.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index e3cb1125aec4..e97d88ae5bb1 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -96,8 +96,6 @@ gulp.task(NPM_PACKAGE_MODULES, (done) => { const moduleName = modulePath.match(/[^/]+$/)[0]; try { - // moveDeclarations(); - fs.mkdirSync(path.join(distFolder, moduleName)); fs.writeFileSync(path.join(distFolder , moduleName, 'package.json'), JSON.stringify({ @@ -139,7 +137,8 @@ gulp.task(NPM_MOVE_DECLARATIONS, (done) => { throw(err); } }); - }) + }); + done(); }); From 7b9fa2d027c584d1fd289dc29f440f74e7db5998 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Mon, 4 Sep 2023 22:38:35 +0400 Subject: [PATCH 08/20] add ESM building to package + add folder mapping --- packages/devextreme-react/gulpfile.js | 104 ++++++++++++++++---------- 1 file changed, 65 insertions(+), 39 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index e97d88ae5bb1..d21dac57af81 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -18,8 +18,8 @@ const NPM_README = 'npm.readme'; const NPM_BUILD = 'npm.build'; const NPM_BUILD_ESM = 'npm.build-esm'; const NPM_BUILD_CJS = 'npm.build-cjs'; +const NPM_PACKAGE_FOLDERS = 'npm.package-folders'; const NPM_PACKAGE_MODULES = 'npm.package-modules'; -const NPM_MOVE_DECLARATIONS = 'npm.move-declarations'; const NPM_PACK = 'npm.pack'; gulp.task(CLEAN, (c) => @@ -88,10 +88,31 @@ gulp.task(NPM_BUILD_CJS, gulp.series( .pipe(gulp.dest(config.npm.dist + '/cjs')) )); +gulp.task(NPM_PACKAGE_FOLDERS, (done) => { + packFolder('common'); + + packFolder('core', ['template']); + + packFolder('common/data'); + + done(); +}); + gulp.task(NPM_PACKAGE_MODULES, (done) => { const modulesIndex = fs.readFileSync(config.npm.dist + 'esm/index.js', 'utf8'); const distFolder = path.join(__dirname, config.npm.dist); + const fsExtra = require('fs-extra'); + const files = fs.readdirSync(config.npm.dist + '/esm/'); + const directories = files.filter(file => { + return fs.statSync(path.join(config.npm.dist + '/esm/', file)).isDirectory(); + }); + + directories.forEach((dir) => { + console.log('----DIRS---===--->', dir); + //fsExtra.copySync(dir, ) + }); + [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)].forEach(([,modulePath]) => { const moduleName = modulePath.match(/[^/]+$/)[0]; @@ -102,9 +123,11 @@ gulp.task(NPM_PACKAGE_MODULES, (done) => { sideEffects: false, main: `../cjs/${modulePath}.js`, module: `../esm/${modulePath}.js`, - typings: `../declarations/${modulePath}.d.ts`, + typings: `../esm/${modulePath}.d.ts`, },null, 2)); + + } catch (error) { error.message = `Exception while ${NPM_PACKAGE_MODULES}.\n ${error.message}`; throw(error); @@ -114,34 +137,6 @@ gulp.task(NPM_PACKAGE_MODULES, (done) => { done(); }); -gulp.task(NPM_MOVE_DECLARATIONS, (done) => { - const distFolder = path.join(__dirname, config.npm.dist); - const declarations = findDeclarationFiles(path.join(distFolder, 'cjs')); - - fs.mkdirSync(path.join(distFolder + `/declarations`)); - - declarations.forEach((filePath) => { - const relativePath = path.relative(path.join(distFolder, 'cjs'), filePath); - const destPath = path.join(distFolder, 'declarations', relativePath); - - - if (!fs.existsSync(path.dirname(destPath))) { - fs.mkdirSync(path.dirname(destPath), { recursive: true }); - } - - fs.rename( - filePath, - path.join(distFolder, 'declarations', relativePath), - (err) => { - if (err) { - throw(err); - } - }); - }); - - done(); -}); - gulp.task(NPM_BUILD, gulp.series( NPM_CLEAN, gulp.parallel( @@ -152,7 +147,7 @@ gulp.task(NPM_BUILD, gulp.series( NPM_BUILD_CJS ), NPM_PACKAGE_MODULES, - NPM_MOVE_DECLARATIONS, + NPM_PACKAGE_FOLDERS, )); gulp.task(NPM_BUILD_WITH_HEADERS, gulp.series( @@ -192,8 +187,7 @@ gulp.task(NPM_PACK, gulp.series( NPM_BUILD_WITH_HEADERS, shell.task(['npm pack'], {cwd: config.npm.dist}) )); - -function findDeclarationFiles(dir) { +function findJsModuleFileNamesInFolder(dir) { let results = []; const files = fs.readdirSync(dir); @@ -201,14 +195,46 @@ function findDeclarationFiles(dir) { for (const file of files) { const filePath = path.join(dir, file); - const stat = fs.statSync(filePath); - - if (stat.isDirectory()) { - results = results.concat(findDeclarationFiles(filePath)); - } else if (file.includes('.d.ts')) { + if (file.includes('.js') && !file.includes('index.js')) { results.push(filePath); } } - return results; + return results.map((filePath) => path.parse(filePath).name); +} +function packFolder(targetName, moduleFileNames) { + const distFolder = path.join(__dirname, config.npm.dist); + const targetFolder = path.join(distFolder, targetName); + const baseDir = '../'.repeat(targetName.split('/').length); + + moduleFileNames = moduleFileNames || findJsModuleFileNamesInFolder(path.join(distFolder, 'esm', targetName)); + + fs.mkdirSync(targetFolder); + + if (fs.existsSync(path.join(distFolder, 'esm', targetName, 'index.js'))) { + fs.writeFileSync(path.join(targetFolder , 'package.json'), JSON.stringify({ + sideEffects: false, + main: `${baseDir}cjs/${targetName}/index.js`, + module: `${baseDir}esm/${targetName}/index.js`, + typings: `${baseDir}esm/${targetName}/index.d.ts`, + },null, 2)); + } + + moduleFileNames.forEach((moduleName) => { + const moduleFolder = path.join(distFolder, targetName, moduleName); + try { + fs.mkdirSync(moduleFolder); + + fs.writeFileSync(path.join(moduleFolder , 'package.json'), JSON.stringify({ + sideEffects: false, + main: `${baseDir}../cjs/${targetName}/${moduleName}.js`, + module: `${baseDir}../esm/${targetName}/${moduleName}.js`, + typings: `${baseDir}../esm/${targetName}/${moduleName}.d.ts`, + },null, 2)); + + } catch (error) { + error.message = `Exception while packFolder(${targetName}).\n ${error.message}`; + throw(error); + } + }) } From dc560ec45c58d69a0a91b3ec8e425a16599518e7 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Mon, 4 Sep 2023 23:19:01 +0400 Subject: [PATCH 09/20] Fix "Invalid value used as weak map key" error (T1186521) + wip --- packages/devextreme-react/gulpfile.js | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index d21dac57af81..6211c47f2f22 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -102,17 +102,6 @@ gulp.task(NPM_PACKAGE_MODULES, (done) => { const modulesIndex = fs.readFileSync(config.npm.dist + 'esm/index.js', 'utf8'); const distFolder = path.join(__dirname, config.npm.dist); - const fsExtra = require('fs-extra'); - const files = fs.readdirSync(config.npm.dist + '/esm/'); - const directories = files.filter(file => { - return fs.statSync(path.join(config.npm.dist + '/esm/', file)).isDirectory(); - }); - - directories.forEach((dir) => { - console.log('----DIRS---===--->', dir); - //fsExtra.copySync(dir, ) - }); - [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)].forEach(([,modulePath]) => { const moduleName = modulePath.match(/[^/]+$/)[0]; @@ -126,8 +115,6 @@ gulp.task(NPM_PACKAGE_MODULES, (done) => { typings: `../esm/${modulePath}.d.ts`, },null, 2)); - - } catch (error) { error.message = `Exception while ${NPM_PACKAGE_MODULES}.\n ${error.message}`; throw(error); @@ -216,7 +203,7 @@ function packFolder(targetName, moduleFileNames) { sideEffects: false, main: `${baseDir}cjs/${targetName}/index.js`, module: `${baseDir}esm/${targetName}/index.js`, - typings: `${baseDir}esm/${targetName}/index.d.ts`, + typings: `${baseDir}cjs/${targetName}/index.d.ts`, },null, 2)); } @@ -229,7 +216,7 @@ function packFolder(targetName, moduleFileNames) { sideEffects: false, main: `${baseDir}../cjs/${targetName}/${moduleName}.js`, module: `${baseDir}../esm/${targetName}/${moduleName}.js`, - typings: `${baseDir}../esm/${targetName}/${moduleName}.d.ts`, + typings: `${baseDir}../cjs/${targetName}/${moduleName}.d.ts`, },null, 2)); } catch (error) { From 33f2e820302b45eb07c0f6f0f635c151dac31f5f Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Tue, 5 Sep 2023 00:17:45 +0400 Subject: [PATCH 10/20] Fix "Invalid value used as weak map key" error (T1186521) + refactor --- packages/devextreme-react/gulpfile.js | 34 ++++++++++++++++++-------- packages/devextreme-react/package.json | 2 +- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index 6211c47f2f22..4d6f7f02dc1c 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -18,8 +18,8 @@ const NPM_README = 'npm.readme'; const NPM_BUILD = 'npm.build'; const NPM_BUILD_ESM = 'npm.build-esm'; const NPM_BUILD_CJS = 'npm.build-cjs'; -const NPM_PACKAGE_FOLDERS = 'npm.package-folders'; -const NPM_PACKAGE_MODULES = 'npm.package-modules'; +const NPM_PACK_FOLDERS = 'npm.package-folders'; +const NPM_PACK_MODULES = 'npm.package-modules'; const NPM_PACK = 'npm.pack'; gulp.task(CLEAN, (c) => @@ -88,7 +88,7 @@ gulp.task(NPM_BUILD_CJS, gulp.series( .pipe(gulp.dest(config.npm.dist + '/cjs')) )); -gulp.task(NPM_PACKAGE_FOLDERS, (done) => { +gulp.task(NPM_PACK_FOLDERS, (done) => { packFolder('common'); packFolder('core', ['template']); @@ -98,7 +98,7 @@ gulp.task(NPM_PACKAGE_FOLDERS, (done) => { done(); }); -gulp.task(NPM_PACKAGE_MODULES, (done) => { +gulp.task(NPM_PACK_MODULES, (done) => { const modulesIndex = fs.readFileSync(config.npm.dist + 'esm/index.js', 'utf8'); const distFolder = path.join(__dirname, config.npm.dist); @@ -112,11 +112,11 @@ gulp.task(NPM_PACKAGE_MODULES, (done) => { sideEffects: false, main: `../cjs/${modulePath}.js`, module: `../esm/${modulePath}.js`, - typings: `../esm/${modulePath}.d.ts`, + typings: `../cjs/${modulePath}.d.ts`, },null, 2)); } catch (error) { - error.message = `Exception while ${NPM_PACKAGE_MODULES}.\n ${error.message}`; + error.message = `Exception while ${NPM_PACK_MODULES}.\n ${error.message}`; throw(error); } }) @@ -133,8 +133,10 @@ gulp.task(NPM_BUILD, gulp.series( NPM_BUILD_ESM, NPM_BUILD_CJS ), - NPM_PACKAGE_MODULES, - NPM_PACKAGE_FOLDERS, + gulp.parallel( + NPM_PACK_MODULES, + NPM_PACK_FOLDERS, + ), )); gulp.task(NPM_BUILD_WITH_HEADERS, gulp.series( @@ -174,7 +176,8 @@ gulp.task(NPM_PACK, gulp.series( NPM_BUILD_WITH_HEADERS, shell.task(['npm pack'], {cwd: config.npm.dist}) )); -function findJsModuleFileNamesInFolder(dir) { + +function findFilesByMask(dir, mask) { let results = []; const files = fs.readdirSync(dir); @@ -182,13 +185,24 @@ function findJsModuleFileNamesInFolder(dir) { for (const file of files) { const filePath = path.join(dir, file); - if (file.includes('.js') && !file.includes('index.js')) { + const stat = fs.statSync(filePath); + + if (stat.isDirectory()) { + results = results.concat(findFilesByMask(filePath, mask)); + } else if (file.includes(mask)) { results.push(filePath); } } + return results; +} + +function findJsModuleFileNamesInFolder(dir) { + let results = findFilesByMask(dir, '.js').filter((file) => !file.includes('index.js')); + return results.map((filePath) => path.parse(filePath).name); } + function packFolder(targetName, moduleFileNames) { const distFolder = path.join(__dirname, config.npm.dist); const targetFolder = path.join(distFolder, targetName); diff --git a/packages/devextreme-react/package.json b/packages/devextreme-react/package.json index 919b00ae2695..d576978cf9fb 100644 --- a/packages/devextreme-react/package.json +++ b/packages/devextreme-react/package.json @@ -9,7 +9,7 @@ }, "main": "./cjs/index.js", "module": "./esm/index.js", - "types": "./declarations/index.d.ts", + "types": "./cjs/index.d.ts", "scripts": { "clean": "gulp clean", "generate": "npm run clean && gulp generate", From 80fe3f5bad2e1a6d8eabfaefb72f6c7de84f4cfd Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Tue, 5 Sep 2023 13:51:51 +0400 Subject: [PATCH 11/20] Fix "Invalid value used as weak map key" error (T1186521) + refactor --- packages/devextreme-react/gulpfile.js | 66 ++++++++++++--------------- 1 file changed, 29 insertions(+), 37 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index 4d6f7f02dc1c..43acf97d8f06 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -89,36 +89,22 @@ gulp.task(NPM_BUILD_CJS, gulp.series( )); gulp.task(NPM_PACK_FOLDERS, (done) => { - packFolder('common'); + packModuleFolder('common'); - packFolder('core', ['template']); + packModuleFolder('core', ['template']); - packFolder('common/data'); + packModuleFolder('common/data'); done(); }); gulp.task(NPM_PACK_MODULES, (done) => { const modulesIndex = fs.readFileSync(config.npm.dist + 'esm/index.js', 'utf8'); - const distFolder = path.join(__dirname, config.npm.dist); [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)].forEach(([,modulePath]) => { const moduleName = modulePath.match(/[^/]+$/)[0]; - try { - fs.mkdirSync(path.join(distFolder, moduleName)); - - fs.writeFileSync(path.join(distFolder , moduleName, 'package.json'), JSON.stringify({ - sideEffects: false, - main: `../cjs/${modulePath}.js`, - module: `../esm/${modulePath}.js`, - typings: `../cjs/${modulePath}.d.ts`, - },null, 2)); - - } catch (error) { - error.message = `Exception while ${NPM_PACK_MODULES}.\n ${error.message}`; - throw(error); - } + createModuleFolder(moduleName); }) done(); @@ -198,12 +184,12 @@ function findFilesByMask(dir, mask) { } function findJsModuleFileNamesInFolder(dir) { - let results = findFilesByMask(dir, '.js').filter((file) => !file.includes('index.js')); - - return results.map((filePath) => path.parse(filePath).name); + return findFilesByMask(dir, '.js') + .filter((file) => !file.includes('index.js')) + .map((filePath) => path.parse(filePath).name); } -function packFolder(targetName, moduleFileNames) { +function packModuleFolder(targetName, moduleFileNames) { const distFolder = path.join(__dirname, config.npm.dist); const targetFolder = path.join(distFolder, targetName); const baseDir = '../'.repeat(targetName.split('/').length); @@ -222,20 +208,26 @@ function packFolder(targetName, moduleFileNames) { } moduleFileNames.forEach((moduleName) => { - const moduleFolder = path.join(distFolder, targetName, moduleName); - try { - fs.mkdirSync(moduleFolder); - - fs.writeFileSync(path.join(moduleFolder , 'package.json'), JSON.stringify({ - sideEffects: false, - main: `${baseDir}../cjs/${targetName}/${moduleName}.js`, - module: `${baseDir}../esm/${targetName}/${moduleName}.js`, - typings: `${baseDir}../cjs/${targetName}/${moduleName}.d.ts`, - },null, 2)); - - } catch (error) { - error.message = `Exception while packFolder(${targetName}).\n ${error.message}`; - throw(error); - } + createModuleFolder(moduleName, targetName, baseDir); }) } + +function createModuleFolder(moduleName, targetName = null, baseDir = '') { + const moduleFolder = path.join(__dirname, config.npm.dist, targetName || '', moduleName); + const modulePath = (targetName ? targetName + '/' : '') + moduleName; + + try { + fs.mkdirSync(moduleFolder); + + fs.writeFileSync(path.join(moduleFolder , 'package.json'), JSON.stringify({ + sideEffects: false, + main: `${baseDir}../cjs/${modulePath}.js`, + module: `${baseDir}../esm/${modulePath}.js`, + typings: `${baseDir}../cjs/${modulePath}.d.ts`, + },null, 2)); + + } catch (error) { + error.message = `Exception while createModuleFolder(${targetName}).\n ${error.message}`; + throw(error); + } +} From 99b782db3d9a513a1154158c1cdc016898b21b93 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Tue, 5 Sep 2023 14:20:32 +0400 Subject: [PATCH 12/20] Fix "Invalid value used as weak map key" error (T1186521) + refactor --- packages/devextreme-react/gulpfile.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index 43acf97d8f06..965eca97fc9d 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -18,8 +18,8 @@ const NPM_README = 'npm.readme'; const NPM_BUILD = 'npm.build'; const NPM_BUILD_ESM = 'npm.build-esm'; const NPM_BUILD_CJS = 'npm.build-cjs'; -const NPM_PACK_FOLDERS = 'npm.package-folders'; -const NPM_PACK_MODULES = 'npm.package-modules'; +const NPM_PREPARE_FOLDERS = 'npm.prepare-folders'; +const NPM_PREPARE_MODULES = 'npm.prepare-modules'; const NPM_PACK = 'npm.pack'; gulp.task(CLEAN, (c) => @@ -88,17 +88,17 @@ gulp.task(NPM_BUILD_CJS, gulp.series( .pipe(gulp.dest(config.npm.dist + '/cjs')) )); -gulp.task(NPM_PACK_FOLDERS, (done) => { - packModuleFolder('common'); +gulp.task(NPM_PREPARE_FOLDERS, (done) => { + makeModuleFolder('common'); - packModuleFolder('core', ['template']); + makeModuleFolder('core', ['template']); - packModuleFolder('common/data'); + makeModuleFolder('common/data'); done(); }); -gulp.task(NPM_PACK_MODULES, (done) => { +gulp.task(NPM_PREPARE_MODULES, (done) => { const modulesIndex = fs.readFileSync(config.npm.dist + 'esm/index.js', 'utf8'); [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)].forEach(([,modulePath]) => { @@ -118,11 +118,7 @@ gulp.task(NPM_BUILD, gulp.series( NPM_README, NPM_BUILD_ESM, NPM_BUILD_CJS - ), - gulp.parallel( - NPM_PACK_MODULES, - NPM_PACK_FOLDERS, - ), + ) )); gulp.task(NPM_BUILD_WITH_HEADERS, gulp.series( @@ -160,6 +156,10 @@ gulp.task(NPM_BUILD_WITH_HEADERS, gulp.series( gulp.task(NPM_PACK, gulp.series( NPM_BUILD_WITH_HEADERS, + gulp.parallel( + NPM_PREPARE_MODULES, + NPM_PREPARE_FOLDERS, + ), shell.task(['npm pack'], {cwd: config.npm.dist}) )); @@ -189,7 +189,7 @@ function findJsModuleFileNamesInFolder(dir) { .map((filePath) => path.parse(filePath).name); } -function packModuleFolder(targetName, moduleFileNames) { +function makeModuleFolder(targetName, moduleFileNames) { const distFolder = path.join(__dirname, config.npm.dist); const targetFolder = path.join(distFolder, targetName); const baseDir = '../'.repeat(targetName.split('/').length); From f508323e114f96267c119427fb9b0143dc9f8af1 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Tue, 5 Sep 2023 17:05:45 +0400 Subject: [PATCH 13/20] Fix "Invalid value used as weak map key" error (T1186521) + refactor --- packages/devextreme-react/gulpfile.js | 74 +++++++++++++++------------ 1 file changed, 40 insertions(+), 34 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index 965eca97fc9d..3c9fa046e655 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -89,11 +89,11 @@ gulp.task(NPM_BUILD_CJS, gulp.series( )); gulp.task(NPM_PREPARE_FOLDERS, (done) => { - makeModuleFolder('common'); + makeFolder('common'); - makeModuleFolder('core', ['template']); + makeFolder('core', ['template']); - makeModuleFolder('common/data'); + makeFolder('common/data'); done(); }); @@ -171,11 +171,9 @@ function findFilesByMask(dir, mask) { for (const file of files) { const filePath = path.join(dir, file); - const stat = fs.statSync(filePath); - - if (stat.isDirectory()) { - results = results.concat(findFilesByMask(filePath, mask)); - } else if (file.includes(mask)) { + if (!fs.statSync(filePath).isDirectory() + && file.includes(mask) + ) { results.push(filePath); } } @@ -189,45 +187,53 @@ function findJsModuleFileNamesInFolder(dir) { .map((filePath) => path.parse(filePath).name); } -function makeModuleFolder(targetName, moduleFileNames) { +function makeFolder(folderPath, moduleFileNames) { const distFolder = path.join(__dirname, config.npm.dist); - const targetFolder = path.join(distFolder, targetName); - const baseDir = '../'.repeat(targetName.split('/').length); - moduleFileNames = moduleFileNames || findJsModuleFileNamesInFolder(path.join(distFolder, 'esm', targetName)); + moduleFileNames = moduleFileNames || findJsModuleFileNamesInFolder(path.join(distFolder, 'esm', folderPath)); - fs.mkdirSync(targetFolder); + try { + fs.mkdirSync(path.join(distFolder, folderPath)); - if (fs.existsSync(path.join(distFolder, 'esm', targetName, 'index.js'))) { - fs.writeFileSync(path.join(targetFolder , 'package.json'), JSON.stringify({ - sideEffects: false, - main: `${baseDir}cjs/${targetName}/index.js`, - module: `${baseDir}esm/${targetName}/index.js`, - typings: `${baseDir}cjs/${targetName}/index.d.ts`, - },null, 2)); + if (fs.existsSync(path.join(distFolder, 'esm', folderPath, 'index.js'))) { + createPackageJsonFile(folderPath); + } + } catch (error) { + error.message = `Exception while makeFolder(${folderPath}).\n ${error.message}`; + throw(error); } moduleFileNames.forEach((moduleName) => { - createModuleFolder(moduleName, targetName, baseDir); + createModuleFolder(moduleName, folderPath); }) } -function createModuleFolder(moduleName, targetName = null, baseDir = '') { - const moduleFolder = path.join(__dirname, config.npm.dist, targetName || '', moduleName); - const modulePath = (targetName ? targetName + '/' : '') + moduleName; - +function createModuleFolder(moduleName, folder = null) { try { - fs.mkdirSync(moduleFolder); - - fs.writeFileSync(path.join(moduleFolder , 'package.json'), JSON.stringify({ - sideEffects: false, - main: `${baseDir}../cjs/${modulePath}.js`, - module: `${baseDir}../esm/${modulePath}.js`, - typings: `${baseDir}../cjs/${modulePath}.d.ts`, - },null, 2)); + fs.mkdirSync(path.join(__dirname, config.npm.dist, folder || '', moduleName)); + createPackageJsonFile(folder, moduleName); } catch (error) { - error.message = `Exception while createModuleFolder(${targetName}).\n ${error.message}`; + error.message = `Exception while createModuleFolder(${folder}).\n ${error.message}`; throw(error); } } + +function createPackageJsonFile(folder, moduleName) { + moduleName = moduleName || ''; + const absoluteModulePath = path.join(__dirname, config.npm.dist, folder || '', moduleName); + const moduleFilePath = (folder ? folder + '/' : '') + (moduleName || 'index'); + const relativePath = path.relative( + absoluteModulePath, + path.join(__dirname, config.npm.dist, 'esm', moduleFilePath + '.js') + ); + + const relativeBase = '../'.repeat(relativePath.split('..').length - 1); + + fs.writeFileSync(path.join(absoluteModulePath , 'package.json'), JSON.stringify({ + sideEffects: false, + main: `${relativeBase}cjs/${moduleFilePath}.js`, + module: `${relativeBase}esm/${moduleFilePath}.js`, + typings: `${relativeBase}cjs/${moduleFilePath}.d.ts`, + },null, 2)) +} From d5246e0a27775c0af428a9249a99b56f9ffadd36 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Tue, 5 Sep 2023 17:13:28 +0400 Subject: [PATCH 14/20] Fix "Invalid value used as weak map key" error (T1186521) + refactor --- packages/devextreme-react/gulpfile.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index 3c9fa046e655..0a98b4d2f2c1 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -198,25 +198,20 @@ function makeFolder(folderPath, moduleFileNames) { if (fs.existsSync(path.join(distFolder, 'esm', folderPath, 'index.js'))) { createPackageJsonFile(folderPath); } + + moduleFileNames.forEach((moduleName) => { + createModuleFolder(moduleName, folderPath); + }) } catch (error) { error.message = `Exception while makeFolder(${folderPath}).\n ${error.message}`; throw(error); } - - moduleFileNames.forEach((moduleName) => { - createModuleFolder(moduleName, folderPath); - }) } function createModuleFolder(moduleName, folder = null) { - try { - fs.mkdirSync(path.join(__dirname, config.npm.dist, folder || '', moduleName)); + fs.mkdirSync(path.join(__dirname, config.npm.dist, folder || '', moduleName)); - createPackageJsonFile(folder, moduleName); - } catch (error) { - error.message = `Exception while createModuleFolder(${folder}).\n ${error.message}`; - throw(error); - } + createPackageJsonFile(folder, moduleName); } function createPackageJsonFile(folder, moduleName) { From 0af426fb267bf695eb2bcddac463104af969a4ca Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Tue, 5 Sep 2023 21:06:24 +0400 Subject: [PATCH 15/20] Fix "Invalid value used as weak map key" error (T1186521) + refactor --- packages/devextreme-react/gulpfile.js | 58 ++++++++++++--------------- 1 file changed, 26 insertions(+), 32 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index 0a98b4d2f2c1..7d1c51345964 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -89,11 +89,11 @@ gulp.task(NPM_BUILD_CJS, gulp.series( )); gulp.task(NPM_PREPARE_FOLDERS, (done) => { - makeFolder('common'); + createModuleForFolder('common'); - makeFolder('core', ['template']); + createModuleForFolder('core', ['template']); - makeFolder('common/data'); + createModuleForFolder('common/data'); done(); }); @@ -104,7 +104,7 @@ gulp.task(NPM_PREPARE_MODULES, (done) => { [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)].forEach(([,modulePath]) => { const moduleName = modulePath.match(/[^/]+$/)[0]; - createModuleFolder(moduleName); + createModuleForFile(moduleName); }) done(); @@ -163,31 +163,7 @@ gulp.task(NPM_PACK, gulp.series( shell.task(['npm pack'], {cwd: config.npm.dist}) )); -function findFilesByMask(dir, mask) { - let results = []; - - const files = fs.readdirSync(dir); - - for (const file of files) { - const filePath = path.join(dir, file); - - if (!fs.statSync(filePath).isDirectory() - && file.includes(mask) - ) { - results.push(filePath); - } - } - - return results; -} - -function findJsModuleFileNamesInFolder(dir) { - return findFilesByMask(dir, '.js') - .filter((file) => !file.includes('index.js')) - .map((filePath) => path.parse(filePath).name); -} - -function makeFolder(folderPath, moduleFileNames) { +function createModuleForFolder(folderPath, moduleFileNames) { const distFolder = path.join(__dirname, config.npm.dist); moduleFileNames = moduleFileNames || findJsModuleFileNamesInFolder(path.join(distFolder, 'esm', folderPath)); @@ -200,15 +176,15 @@ function makeFolder(folderPath, moduleFileNames) { } moduleFileNames.forEach((moduleName) => { - createModuleFolder(moduleName, folderPath); + createModuleForFile(moduleName, folderPath); }) } catch (error) { - error.message = `Exception while makeFolder(${folderPath}).\n ${error.message}`; + error.message = `Exception while createModuleForFolder(${folderPath}).\n ${error.message}`; throw(error); } } -function createModuleFolder(moduleName, folder = null) { +function createModuleForFile(moduleName, folder = null) { fs.mkdirSync(path.join(__dirname, config.npm.dist, folder || '', moduleName)); createPackageJsonFile(folder, moduleName); @@ -232,3 +208,21 @@ function createPackageJsonFile(folder, moduleName) { typings: `${relativeBase}cjs/${moduleFilePath}.d.ts`, },null, 2)) } + +function findJsModuleFileNamesInFolder(dir) { + let results = []; + const files = fs.readdirSync(dir); + + for (const file of files) { + const filePath = path.join(dir, file); + + if (!fs.statSync(filePath).isDirectory() + && file.includes('.js') + && !file.includes('index.js') + ) { + results.push(filePath); + } + } + + return results.map((filePath) => path.parse(filePath).name); +} From 94b7bee9082a5a69a83b291791a25886a4584061 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Tue, 5 Sep 2023 21:18:51 +0400 Subject: [PATCH 16/20] Fix "Invalid value used as weak map key" error (T1186521) + refactor --- packages/devextreme-react/gulpfile.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index 7d1c51345964..9fead58cb751 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -89,11 +89,11 @@ gulp.task(NPM_BUILD_CJS, gulp.series( )); gulp.task(NPM_PREPARE_FOLDERS, (done) => { - createModuleForFolder('common'); + makeModuleForFolder('common'); - createModuleForFolder('core', ['template']); + makeModuleForFolder('core', ['template']); - createModuleForFolder('common/data'); + makeModuleForFolder('common/data'); done(); }); @@ -104,7 +104,7 @@ gulp.task(NPM_PREPARE_MODULES, (done) => { [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)].forEach(([,modulePath]) => { const moduleName = modulePath.match(/[^/]+$/)[0]; - createModuleForFile(moduleName); + makeModuleForFile(moduleName); }) done(); @@ -163,7 +163,7 @@ gulp.task(NPM_PACK, gulp.series( shell.task(['npm pack'], {cwd: config.npm.dist}) )); -function createModuleForFolder(folderPath, moduleFileNames) { +function makeModuleForFolder(folderPath, moduleFileNames) { const distFolder = path.join(__dirname, config.npm.dist); moduleFileNames = moduleFileNames || findJsModuleFileNamesInFolder(path.join(distFolder, 'esm', folderPath)); @@ -172,25 +172,25 @@ function createModuleForFolder(folderPath, moduleFileNames) { fs.mkdirSync(path.join(distFolder, folderPath)); if (fs.existsSync(path.join(distFolder, 'esm', folderPath, 'index.js'))) { - createPackageJsonFile(folderPath); + generatePackageJsonFile(folderPath); } moduleFileNames.forEach((moduleName) => { - createModuleForFile(moduleName, folderPath); + makeModuleForFile(moduleName, folderPath); }) } catch (error) { - error.message = `Exception while createModuleForFolder(${folderPath}).\n ${error.message}`; + error.message = `Exception while makeModuleForFolder(${folderPath}).\n ${error.message}`; throw(error); } } -function createModuleForFile(moduleName, folder = null) { +function makeModuleForFile(moduleName, folder = null) { fs.mkdirSync(path.join(__dirname, config.npm.dist, folder || '', moduleName)); - createPackageJsonFile(folder, moduleName); + generatePackageJsonFile(folder, moduleName); } -function createPackageJsonFile(folder, moduleName) { +function generatePackageJsonFile(folder, moduleName) { moduleName = moduleName || ''; const absoluteModulePath = path.join(__dirname, config.npm.dist, folder || '', moduleName); const moduleFilePath = (folder ? folder + '/' : '') + (moduleName || 'index'); From adf2115998ea4472f408726ffca80d8ef46d2f56 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Wed, 6 Sep 2023 19:06:22 +0400 Subject: [PATCH 17/20] add ESM building to package + refactor --- packages/devextreme-react/gulpfile.js | 59 ++++++++++++--------------- 1 file changed, 27 insertions(+), 32 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index 9fead58cb751..e6cff5cb29fc 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -89,11 +89,13 @@ gulp.task(NPM_BUILD_CJS, gulp.series( )); gulp.task(NPM_PREPARE_FOLDERS, (done) => { - makeModuleForFolder('common'); - - makeModuleForFolder('core', ['template']); - - makeModuleForFolder('common/data'); + [ + ['common'], + ['core', ['template']], + ['common/data'] + ].forEach( + ([folder, moduleFileName]) => makeModuleForFolder(folder, moduleFileName) + ) done(); }); @@ -102,9 +104,9 @@ gulp.task(NPM_PREPARE_MODULES, (done) => { const modulesIndex = fs.readFileSync(config.npm.dist + 'esm/index.js', 'utf8'); [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)].forEach(([,modulePath]) => { - const moduleName = modulePath.match(/[^/]+$/)[0]; + const moduleFileName = modulePath.match(/[^/]+$/)[0]; - makeModuleForFile(moduleName); + makeModuleForFile(moduleFileName); }) done(); @@ -165,18 +167,18 @@ gulp.task(NPM_PACK, gulp.series( function makeModuleForFolder(folderPath, moduleFileNames) { const distFolder = path.join(__dirname, config.npm.dist); - - moduleFileNames = moduleFileNames || findJsModuleFileNamesInFolder(path.join(distFolder, 'esm', folderPath)); + const distEsmFolder = path.join(distFolder, 'esm', folderPath); + const moduleNames = moduleFileNames || findJsModuleFileNamesInFolder(distEsmFolder); try { fs.mkdirSync(path.join(distFolder, folderPath)); - if (fs.existsSync(path.join(distFolder, 'esm', folderPath, 'index.js'))) { + if (fs.existsSync(path.join(distEsmFolder, 'index.js'))) { generatePackageJsonFile(folderPath); } - moduleFileNames.forEach((moduleName) => { - makeModuleForFile(moduleName, folderPath); + moduleNames.forEach((moduleFileName) => { + makeModuleForFile(moduleFileName, folderPath); }) } catch (error) { error.message = `Exception while makeModuleForFolder(${folderPath}).\n ${error.message}`; @@ -184,15 +186,15 @@ function makeModuleForFolder(folderPath, moduleFileNames) { } } -function makeModuleForFile(moduleName, folder = null) { - fs.mkdirSync(path.join(__dirname, config.npm.dist, folder || '', moduleName)); +function makeModuleForFile(moduleFileName, folder = '') { + fs.mkdirSync(path.join(__dirname, config.npm.dist, folder, moduleFileName)); - generatePackageJsonFile(folder, moduleName); + generatePackageJsonFile(folder, moduleFileName); } -function generatePackageJsonFile(folder, moduleName) { - moduleName = moduleName || ''; - const absoluteModulePath = path.join(__dirname, config.npm.dist, folder || '', moduleName); +function generatePackageJsonFile(folder, moduleFileName) { + const moduleName = moduleFileName || ''; + const absoluteModulePath = path.join(__dirname, config.npm.dist, folder, moduleName); const moduleFilePath = (folder ? folder + '/' : '') + (moduleName || 'index'); const relativePath = path.relative( absoluteModulePath, @@ -206,23 +208,16 @@ function generatePackageJsonFile(folder, moduleName) { main: `${relativeBase}cjs/${moduleFilePath}.js`, module: `${relativeBase}esm/${moduleFilePath}.js`, typings: `${relativeBase}cjs/${moduleFilePath}.d.ts`, - },null, 2)) + }, null, 2)); } function findJsModuleFileNamesInFolder(dir) { - let results = []; - const files = fs.readdirSync(dir); + return fs.readdirSync(dir).filter((file) => { + const filePath = path.join(dir, file); - for (const file of files) { - const filePath = path.join(dir, file); - - if (!fs.statSync(filePath).isDirectory() - && file.includes('.js') - && !file.includes('index.js') - ) { - results.push(filePath); + return !fs.statSync(filePath).isDirectory() + && file.includes('.js') + && !file.includes('index.js') } - } - - return results.map((filePath) => path.parse(filePath).name); + ).map((filePath) => path.parse(filePath).name); } From c12ce61e282764c5690ef7f28320e280cf63b005 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Thu, 7 Sep 2023 09:19:23 +0400 Subject: [PATCH 18/20] add ESM building to devextreme-react package + refactor --- packages/devextreme-react/gulpfile.js | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index e6cff5cb29fc..70ce3f21fd20 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -18,7 +18,6 @@ const NPM_README = 'npm.readme'; const NPM_BUILD = 'npm.build'; const NPM_BUILD_ESM = 'npm.build-esm'; const NPM_BUILD_CJS = 'npm.build-cjs'; -const NPM_PREPARE_FOLDERS = 'npm.prepare-folders'; const NPM_PREPARE_MODULES = 'npm.prepare-modules'; const NPM_PACK = 'npm.pack'; @@ -88,7 +87,7 @@ gulp.task(NPM_BUILD_CJS, gulp.series( .pipe(gulp.dest(config.npm.dist + '/cjs')) )); -gulp.task(NPM_PREPARE_FOLDERS, (done) => { +gulp.task(NPM_PREPARE_MODULES, (done) => { [ ['common'], ['core', ['template']], @@ -97,17 +96,14 @@ gulp.task(NPM_PREPARE_FOLDERS, (done) => { ([folder, moduleFileName]) => makeModuleForFolder(folder, moduleFileName) ) - done(); -}); - -gulp.task(NPM_PREPARE_MODULES, (done) => { const modulesIndex = fs.readFileSync(config.npm.dist + 'esm/index.js', 'utf8'); - [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)].forEach(([,modulePath]) => { - const moduleFileName = modulePath.match(/[^/]+$/)[0]; + [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)] + .forEach(([,modulePath]) => { + const moduleFileName = modulePath.match(/[^/]+$/)[0]; - makeModuleForFile(moduleFileName); - }) + makeModuleForFile(moduleFileName); + }) done(); }); @@ -158,10 +154,7 @@ gulp.task(NPM_BUILD_WITH_HEADERS, gulp.series( gulp.task(NPM_PACK, gulp.series( NPM_BUILD_WITH_HEADERS, - gulp.parallel( - NPM_PREPARE_MODULES, - NPM_PREPARE_FOLDERS, - ), + NPM_PREPARE_MODULES, shell.task(['npm pack'], {cwd: config.npm.dist}) )); From c3c3d8b1c8fb17b5dcfcd94ba8078c6f0ad6fd83 Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Thu, 7 Sep 2023 10:50:24 +0400 Subject: [PATCH 19/20] add ESM building to devextreme-react package + refactor --- packages/devextreme-react/gulpfile.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index 70ce3f21fd20..bb3cb6c54d1e 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -100,9 +100,9 @@ gulp.task(NPM_PREPARE_MODULES, (done) => { [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)] .forEach(([,modulePath]) => { - const moduleFileName = modulePath.match(/[^/]+$/)[0]; + const [,, moduleFilePath, moduleFileName] = modulePath.match(/((.*)\/)?([^/]+$)/); - makeModuleForFile(moduleFileName); + makeModuleForFile(moduleFileName, '', moduleFilePath); }) done(); @@ -179,16 +179,16 @@ function makeModuleForFolder(folderPath, moduleFileNames) { } } -function makeModuleForFile(moduleFileName, folder = '') { +function makeModuleForFile(moduleFileName, folder = '', filePath ) { fs.mkdirSync(path.join(__dirname, config.npm.dist, folder, moduleFileName)); - generatePackageJsonFile(folder, moduleFileName); + generatePackageJsonFile(folder, moduleFileName, filePath); } -function generatePackageJsonFile(folder, moduleFileName) { +function generatePackageJsonFile(folder, moduleFileName, filePath = folder) { const moduleName = moduleFileName || ''; const absoluteModulePath = path.join(__dirname, config.npm.dist, folder, moduleName); - const moduleFilePath = (folder ? folder + '/' : '') + (moduleName || 'index'); + const moduleFilePath = (filePath ? filePath + '/' : '') + (moduleName || 'index'); const relativePath = path.relative( absoluteModulePath, path.join(__dirname, config.npm.dist, 'esm', moduleFilePath + '.js') From 4af729c3c712c617becd5632cbc1377a00c4163a Mon Sep 17 00:00:00 2001 From: Aliullov Vlad Date: Thu, 7 Sep 2023 11:50:59 +0400 Subject: [PATCH 20/20] add ESM building to devextreme-react package + refactor --- packages/devextreme-react/gulpfile.js | 52 ++++++++++++++------------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/packages/devextreme-react/gulpfile.js b/packages/devextreme-react/gulpfile.js index bb3cb6c54d1e..427e878d3c45 100644 --- a/packages/devextreme-react/gulpfile.js +++ b/packages/devextreme-react/gulpfile.js @@ -88,22 +88,27 @@ gulp.task(NPM_BUILD_CJS, gulp.series( )); gulp.task(NPM_PREPARE_MODULES, (done) => { - [ + const packParamsForFolders = [ ['common'], ['core', ['template']], ['common/data'] - ].forEach( - ([folder, moduleFileName]) => makeModuleForFolder(folder, moduleFileName) - ) - - const modulesIndex = fs.readFileSync(config.npm.dist + 'esm/index.js', 'utf8'); - - [...modulesIndex.matchAll(/from "\.\/([^;]+)";/g)] - .forEach(([,modulePath]) => { + ]; + const modulesImportsFromIndex = fs.readFileSync(config.npm.dist + 'esm/index.js', 'utf8'); + const modulesPaths = modulesImportsFromIndex.matchAll(/from "\.\/([^;]+)";/g); + const packParamsForModules = [...modulesPaths].map( + ([, modulePath]) => { const [,, moduleFilePath, moduleFileName] = modulePath.match(/((.*)\/)?([^/]+$)/); - makeModuleForFile(moduleFileName, '', moduleFilePath); - }) + return ['', [moduleFileName], moduleFilePath]; + } + ); + + [ + ...packParamsForFolders, + ...packParamsForModules, + ].forEach( + ([folder, moduleFileNames, moduleFilePath]) => makeModule(folder, moduleFileNames, moduleFilePath) + ) done(); }); @@ -158,33 +163,32 @@ gulp.task(NPM_PACK, gulp.series( shell.task(['npm pack'], {cwd: config.npm.dist}) )); -function makeModuleForFolder(folderPath, moduleFileNames) { +function makeModule(folder, moduleFileNames, moduleFilePath) { const distFolder = path.join(__dirname, config.npm.dist); - const distEsmFolder = path.join(distFolder, 'esm', folderPath); + const distModuleFolder = path.join(distFolder, folder); + const distEsmFolder = path.join(distFolder, 'esm', folder); const moduleNames = moduleFileNames || findJsModuleFileNamesInFolder(distEsmFolder); try { - fs.mkdirSync(path.join(distFolder, folderPath)); + if (!fs.existsSync(distModuleFolder)) { + fs.mkdirSync(distModuleFolder); + } - if (fs.existsSync(path.join(distEsmFolder, 'index.js'))) { - generatePackageJsonFile(folderPath); + if (folder && fs.existsSync(path.join(distEsmFolder, 'index.js'))) { + generatePackageJsonFile(folder); } moduleNames.forEach((moduleFileName) => { - makeModuleForFile(moduleFileName, folderPath); + fs.mkdirSync(path.join(distModuleFolder, moduleFileName)); + + generatePackageJsonFile(folder, moduleFileName, moduleFilePath); }) } catch (error) { - error.message = `Exception while makeModuleForFolder(${folderPath}).\n ${error.message}`; + error.message = `Exception while makeModule(${folder}).\n ${error.message}`; throw(error); } } -function makeModuleForFile(moduleFileName, folder = '', filePath ) { - fs.mkdirSync(path.join(__dirname, config.npm.dist, folder, moduleFileName)); - - generatePackageJsonFile(folder, moduleFileName, filePath); -} - function generatePackageJsonFile(folder, moduleFileName, filePath = folder) { const moduleName = moduleFileName || ''; const absoluteModulePath = path.join(__dirname, config.npm.dist, folder, moduleName);