From 6699da2bd67d3b5a82f4cb19ee18a2985d7da0f3 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 18 Sep 2024 17:08:24 +0300 Subject: [PATCH 01/52] connect require fn to registerComponent fn --- build/monic/attach-component-dependencies.js | 19 ++++++++++++++----- src/core/component/init/component.ts | 4 ++++ 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/build/monic/attach-component-dependencies.js b/build/monic/attach-component-dependencies.js index 24e1550f60..992460b7b8 100644 --- a/build/monic/attach-component-dependencies.js +++ b/build/monic/attach-component-dependencies.js @@ -27,6 +27,15 @@ const * @returns {Promise} */ module.exports = async function attachComponentDependencies(str, filePath) { + + function invokeByRegisterEvent(script, componentName) { + return `globalEmitter.on('register', (componentName) => { + if (componentName === '${componentName}') { + ${script} + } + });`; + } + if (webpack.fatHTML()) { return str; } @@ -51,10 +60,10 @@ module.exports = async function attachComponentDependencies(str, filePath) { attachComponentDeps(component); let - imports = ''; + imports = `const {globalEmitter} = require('core/component/event');`; $C([...libs].reverse()).forEach((lib) => { - imports += `require('${lib}');`; + imports += invokeByRegisterEvent(`require('${lib}');`, component.name); }); await $C([...deps].reverse()).async.forEach(forEach); @@ -129,13 +138,13 @@ module.exports = async function attachComponentDependencies(str, filePath) { expr; if (chunk === 'tpl') { - expr = `TPLS['${dep}'] = require('${src}')['${dep}'];`; + expr = `TPLS['${dep}'] = require('${src}')['${dep}'];` } else { - expr = `require('${src}');`; + expr = `require('${src}')` } - decl += `try { ${expr} } catch (err) { stderr(err); }`; + decl += invokeByRegisterEvent(`try { ${expr} } catch (err) { stderr(err); }`, component.name); } } catch {} diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index c4f7a451cf..5aa9f24b98 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -11,6 +11,8 @@ import { isComponent, componentRegInitializers, componentParams, components } fr import type { ComponentMeta } from 'core/component/interface'; import type { ComponentConstructorInfo } from 'core/component/reflect'; +import { globalEmitter } from 'core/component/event'; + /** * Registers parent components for the given one. * The function returns false if all parent components are already registered. @@ -78,6 +80,8 @@ export function registerComponent(name: CanUndef): CanNull reg()); delete componentRegInitializers[name]; + + globalEmitter.emit('registered', name); } return components.get(name) ?? null; From 7b0838ee0eb862323bb3f9a700610adfdcf41886 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Thu, 19 Sep 2024 13:39:04 +0300 Subject: [PATCH 02/52] experiment: set event emitter to dynamic-import loader --- build/monic/attach-component-dependencies.js | 27 +++++++++++-------- build/monic/dynamic-component-import.js | 16 ++++++++++- package.json | 2 ++ src/components/form/b-button/b-button.ts | 2 ++ .../p-v4-components-demo.ss | 3 +++ src/core/component/init/component.ts | 8 ++++-- 6 files changed, 44 insertions(+), 14 deletions(-) diff --git a/build/monic/attach-component-dependencies.js b/build/monic/attach-component-dependencies.js index 992460b7b8..aac52b91f6 100644 --- a/build/monic/attach-component-dependencies.js +++ b/build/monic/attach-component-dependencies.js @@ -10,7 +10,8 @@ const $C = require('collection.js'), - {webpack} = require('@config/config'); + {webpack} = require('@config/config'), + fs = require('node:fs'); const path = require('upath'), @@ -29,10 +30,9 @@ const module.exports = async function attachComponentDependencies(str, filePath) { function invokeByRegisterEvent(script, componentName) { - return `globalEmitter.on('register', (componentName) => { - if (componentName === '${componentName}') { - ${script} - } + return `initEmitter.on('registerComponent.${componentName}', () => { + console.log('1 handle event', '${componentName}'); + (function() {${script}})() });`; } @@ -49,7 +49,8 @@ module.exports = async function attachComponentDependencies(str, filePath) { ext = path.extname(filePath), component = components.get(path.basename(filePath, ext)); - if (component == null) { + + if (component == null || component.name == 'p-v4-components-demo') { return str; } @@ -59,15 +60,19 @@ module.exports = async function attachComponentDependencies(str, filePath) { attachComponentDeps(component); + const importEventEmitter = `const {initEmitter} = require('core/component/event');`; + let - imports = `const {globalEmitter} = require('core/component/event');`; + imports = ''; $C([...libs].reverse()).forEach((lib) => { - imports += invokeByRegisterEvent(`require('${lib}');`, component.name); + imports += `require('${lib}');`; }); await $C([...deps].reverse()).async.forEach(forEach); - return imports + str; + const result = importEventEmitter + invokeByRegisterEvent(imports, component.name) + str; + + return result; async function forEach(dep) { if (dep.startsWith('g-')) { @@ -141,10 +146,10 @@ module.exports = async function attachComponentDependencies(str, filePath) { expr = `TPLS['${dep}'] = require('${src}')['${dep}'];` } else { - expr = `require('${src}')` + expr = `require('${src}');` } - decl += invokeByRegisterEvent(`try { ${expr} } catch (err) { stderr(err); }`, component.name); + decl += `try { ${expr} } catch (err) { stderr(err); }`; } } catch {} diff --git a/build/monic/dynamic-component-import.js b/build/monic/dynamic-component-import.js index 5bc18ae3c8..5ef212e025 100644 --- a/build/monic/dynamic-component-import.js +++ b/build/monic/dynamic-component-import.js @@ -25,6 +25,19 @@ const isESImport = !ssr && typescript().client.compilerOptions.module === 'ES2020', fatHTML = webpack.fatHTML(); + function invokeByRegisterEvent(script, componentName) { + return ` + (function() { + const {initEmitter} = require('core/component/event'); + + console.log('1 handle event', '${componentName}'); + initEmitter.on('registerComponent.${componentName}', () => { + ${script} + }); + })() + `; + } + /** * A Monic replacer is used to enable dynamic imports of components * @@ -127,7 +140,8 @@ module.exports = async function dynamicComponentImportReplacer(str) { imports[0] = `TPLS['${resourceName}'] ? ${imports[0]} : ${imports[0]}.then(${decl}, function (err) { stderr(err); return ${decl}(); })`; } - return `Promise.all([${imports.join(',')}])`; + return invokeByRegisterEvent(`Promise.all([${imports.join(',')}])`, resourceName); + // return `Promise.all([${imports.join(',')}])`; }); }; diff --git a/package.json b/package.json index 3d77728617..721dda9ba2 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,8 @@ "V4Fire" ], "scripts": { + "bbuild": "npx webpack --watch --env public-path=// progress=false", + "sttart": "npx static ./dist/client", "build": "yarn build:tsconfig && webpack", "build:tsconfig": "node node_modules/@v4fire/core/build/build-tsconfig", "build:file": "gulp build:tsconfig && webpack --env public-path", diff --git a/src/components/form/b-button/b-button.ts b/src/components/form/b-button/b-button.ts index 73509f731e..3e73158a65 100644 --- a/src/components/form/b-button/b-button.ts +++ b/src/components/form/b-button/b-button.ts @@ -47,6 +47,8 @@ DataProvider.addToPrototype({getDefaultRequestParams, base, get}); interface bButton extends Trait, Trait {} +console.log('B-BUTTON INVOKED!!!'); + @component({ functional: { wait: undefined, diff --git a/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss b/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss index bbac322bfa..ad6a0ecde7 100644 --- a/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss +++ b/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss @@ -12,5 +12,8 @@ - template index() extends ['i-static-page.component'].index - block body + < b-button + hello + < b-list < template v-if = stage === 'teleports' < b-bottom-slide diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index 5aa9f24b98..f6487c719b 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -11,7 +11,7 @@ import { isComponent, componentRegInitializers, componentParams, components } fr import type { ComponentMeta } from 'core/component/interface'; import type { ComponentConstructorInfo } from 'core/component/reflect'; -import { globalEmitter } from 'core/component/event'; +import { initEmitter } from 'core/component/event'; /** * Registers parent components for the given one. @@ -52,6 +52,9 @@ export function registerParentComponents(component: ComponentConstructorInfo): b if (regParentComponent != null) { regParentComponent.forEach((reg) => reg()); delete componentRegInitializers[parentName]; + + // initEmitter.emit(`registerComponent.${name}`); + return true; } } @@ -79,9 +82,10 @@ export function registerComponent(name: CanUndef): CanNull reg()); + + initEmitter.emit(`registerComponent.${components.get(name)?.componentName || name}`); delete componentRegInitializers[name]; - globalEmitter.emit('registered', name); } return components.get(name) ?? null; From 704ece448fa9e4a082b05edceb19fb0664501248 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Mon, 23 Sep 2024 17:18:52 +0300 Subject: [PATCH 03/52] optimize amount of invokations __webpack_require__ function --- build/graph/graph.js | 45 ++++++++++++++++--- build/helpers/index.js | 3 +- build/helpers/invoke-by-register-component.js | 19 ++++++++ build/monic/attach-component-dependencies.js | 23 +++------- build/monic/dynamic-component-import.js | 18 ++------ package.json | 2 - src/components/form/b-button/b-button.ts | 2 - .../p-v4-components-demo.ss | 3 -- src/core/component/init/component.ts | 11 +++-- src/core/init/create-app.ts | 5 ++- 10 files changed, 80 insertions(+), 51 deletions(-) create mode 100644 build/helpers/invoke-by-register-component.js diff --git a/build/graph/graph.js b/build/graph/graph.js index 805a27b2af..c73402457e 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -18,7 +18,7 @@ const const {src, build, webpack} = config, - {resolve, block, entries} = require('@pzlr/build-core'); + {resolve, block, entries, validators} = require('@pzlr/build-core'); const componentParams = include('build/graph/component-params'); @@ -40,7 +40,8 @@ const { output, cacheDir, isStandalone, - tracer + tracer, + invokeByRegisterEvent } = include('build/helpers'); /** @@ -210,7 +211,8 @@ async function buildProjectGraph() { { const - entrySrc = path.join(tmpEntries, `${name}.js`); + entrySrc = path.join(tmpEntries, `${name}.js`), + componentsRequires = new Map(); let content = await $C(list).async.to('').reduce(async (str, {name}) => { const @@ -221,7 +223,13 @@ async function buildProjectGraph() { $C(component.libs).forEach((el) => { if (!usedLibs.has(el)) { usedLibs.add(el); - str += `require('${el}');\n`; + + if (!componentsRequires.has(el)) { + componentsRequires.set(name, new Set([`require('${el}');\n`])); + } else { + componentsRequires.get(name).add(`require('${el}');\n`); + } + // str += invokeByRegisterEvent(`require('${el}');\n`, name); } }); } @@ -244,12 +252,37 @@ async function buildProjectGraph() { entry = path.resolve(tmpEntries, '../', name); } + let + importScript; + + const + entryPath = getEntryPath(entry), + isComponentPath = new RegExp(`\\/(${validators.blockTypeList.join('|')})-.+?\\/?`); + if (webpack.ssr) { - str += `Object.assign(module.exports, require('${getEntryPath(entry)}'));\n`; + importScript = `Object.assign(module.exports, require('${getEntryPath(entry)}'));\n`; } else { - str += `require('${getEntryPath(entry)}');\n`; + importScript = `require('${getEntryPath(entry)}');\n`; } + + if (!componentsRequires.has(name) && isComponentPath.test(entryPath)) { + componentsRequires.set(name, new Set([importScript])); + + } else if (componentsRequires.has(name) && isComponentPath.test(entryPath)) { + componentsRequires.get(name).add(importScript); + + } else { + str += importScript; + } + // str += isComponentPath.test(entryPath) ? invokeByRegisterEvent(importScript, name) : importScript; + } + + console.log(componentsRequires); + + for (const [componentName, importsSet] of componentsRequires) { + const importsStr = [...importsSet].join(''); + str += invokeByRegisterEvent(importsStr, componentName); } return str; diff --git a/build/helpers/index.js b/build/helpers/index.js index e3786c12cf..0288ffe8aa 100644 --- a/build/helpers/index.js +++ b/build/helpers/index.js @@ -14,5 +14,6 @@ Object.assign( include('build/helpers/webpack'), include('build/helpers/other'), include('build/helpers/i18n'), - include('build/helpers/tracer') + include('build/helpers/tracer'), + include('build/helpers/invoke-by-register-component.js') ); diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js new file mode 100644 index 0000000000..9340abe957 --- /dev/null +++ b/build/helpers/invoke-by-register-component.js @@ -0,0 +1,19 @@ +/** + * Function incapsulates script to event handler that is being triggered when component with + * name `componentName` renders on the page. + * + * @param {String} script + * @param {String} componentName + * @returns {String} + */ +exports.invokeByRegisterEvent = function(script, componentName) { + return `\n + { + const {initEmitter} = require('core/component/event'); + + initEmitter.once('registerComponent.${componentName}', () => { + ${script} + }); + }\n + `; +} \ No newline at end of file diff --git a/build/monic/attach-component-dependencies.js b/build/monic/attach-component-dependencies.js index aac52b91f6..88b666387e 100644 --- a/build/monic/attach-component-dependencies.js +++ b/build/monic/attach-component-dependencies.js @@ -10,12 +10,12 @@ const $C = require('collection.js'), - {webpack} = require('@config/config'), - fs = require('node:fs'); + {webpack} = require('@config/config'); const path = require('upath'), - graph = include('build/graph'); + graph = include('build/graph'), + {invokeByRegisterEvent} = include('build/helpers'); const decls = Object.create(null); @@ -28,14 +28,6 @@ const * @returns {Promise} */ module.exports = async function attachComponentDependencies(str, filePath) { - - function invokeByRegisterEvent(script, componentName) { - return `initEmitter.on('registerComponent.${componentName}', () => { - console.log('1 handle event', '${componentName}'); - (function() {${script}})() - });`; - } - if (webpack.fatHTML()) { return str; } @@ -50,7 +42,7 @@ module.exports = async function attachComponentDependencies(str, filePath) { component = components.get(path.basename(filePath, ext)); - if (component == null || component.name == 'p-v4-components-demo') { + if (component == null) { return str; } @@ -60,8 +52,6 @@ module.exports = async function attachComponentDependencies(str, filePath) { attachComponentDeps(component); - const importEventEmitter = `const {initEmitter} = require('core/component/event');`; - let imports = ''; @@ -70,9 +60,8 @@ module.exports = async function attachComponentDependencies(str, filePath) { }); await $C([...deps].reverse()).async.forEach(forEach); - const result = importEventEmitter + invokeByRegisterEvent(imports, component.name) + str; - - return result; + + return invokeByRegisterEvent(imports, component.name) + str; async function forEach(dep) { if (dep.startsWith('g-')) { diff --git a/build/monic/dynamic-component-import.js b/build/monic/dynamic-component-import.js index 5ef212e025..ff9ff5c21d 100644 --- a/build/monic/dynamic-component-import.js +++ b/build/monic/dynamic-component-import.js @@ -13,7 +13,8 @@ const {commentModuleExpr: commentExpr} = include('build/const'); const - graph = include('build/graph'); + graph = include('build/graph'), + {invokeByRegisterEvent} = include('build/helpers'); const importRgxp = new RegExp( `\\bimport${commentExpr}\\((${commentExpr})(["'])((?:.*?[\\\\/]|)([bp]-[^.\\\\/"')]+)+)\\2${commentExpr}\\)`, @@ -25,19 +26,6 @@ const isESImport = !ssr && typescript().client.compilerOptions.module === 'ES2020', fatHTML = webpack.fatHTML(); - function invokeByRegisterEvent(script, componentName) { - return ` - (function() { - const {initEmitter} = require('core/component/event'); - - console.log('1 handle event', '${componentName}'); - initEmitter.on('registerComponent.${componentName}', () => { - ${script} - }); - })() - `; - } - /** * A Monic replacer is used to enable dynamic imports of components * @@ -137,7 +125,7 @@ module.exports = async function dynamicComponentImportReplacer(str) { } decl = `function () { return ${decl}; }`; - imports[0] = `TPLS['${resourceName}'] ? ${imports[0]} : ${imports[0]}.then(${decl}, function (err) { stderr(err); return ${decl}(); })`; + imports[0] = `TPLS['${resourceName}'] ? ${(imports[0])} : ${imports[0]}.then(${decl}, function (err) { stderr(err); return ${decl}(); })`; } return invokeByRegisterEvent(`Promise.all([${imports.join(',')}])`, resourceName); diff --git a/package.json b/package.json index 721dda9ba2..3d77728617 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,6 @@ "V4Fire" ], "scripts": { - "bbuild": "npx webpack --watch --env public-path=// progress=false", - "sttart": "npx static ./dist/client", "build": "yarn build:tsconfig && webpack", "build:tsconfig": "node node_modules/@v4fire/core/build/build-tsconfig", "build:file": "gulp build:tsconfig && webpack --env public-path", diff --git a/src/components/form/b-button/b-button.ts b/src/components/form/b-button/b-button.ts index 3e73158a65..73509f731e 100644 --- a/src/components/form/b-button/b-button.ts +++ b/src/components/form/b-button/b-button.ts @@ -47,8 +47,6 @@ DataProvider.addToPrototype({getDefaultRequestParams, base, get}); interface bButton extends Trait, Trait {} -console.log('B-BUTTON INVOKED!!!'); - @component({ functional: { wait: undefined, diff --git a/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss b/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss index ad6a0ecde7..bbac322bfa 100644 --- a/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss +++ b/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss @@ -12,8 +12,5 @@ - template index() extends ['i-static-page.component'].index - block body - < b-button - hello - < b-list < template v-if = stage === 'teleports' < b-bottom-slide diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index f6487c719b..8ec38838d6 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -12,6 +12,7 @@ import type { ComponentMeta } from 'core/component/interface'; import type { ComponentConstructorInfo } from 'core/component/reflect'; import { initEmitter } from 'core/component/event'; +import { c } from '../../../../../core/src/core/analytics/engines/appmetrica/helpers'; /** * Registers parent components for the given one. @@ -53,7 +54,7 @@ export function registerParentComponents(component: ComponentConstructorInfo): b regParentComponent.forEach((reg) => reg()); delete componentRegInitializers[parentName]; - // initEmitter.emit(`registerComponent.${name}`); + initEmitter.emit(`registerComponent.${component?.name || parentName}`); return true; } @@ -76,17 +77,19 @@ export function registerComponent(name: CanUndef): CanNull reg()); - - initEmitter.emit(`registerComponent.${components.get(name)?.componentName || name}`); + delete componentRegInitializers[name]; } + + let componentName = (components.get(name)?.componentName || name).replaceAll('-functional', ''); + initEmitter.emit(`registerComponent.${componentName}`); + return components.get(name) ?? null; } diff --git a/src/core/init/create-app.ts b/src/core/init/create-app.ts index 08586eb533..7b5c52fdfb 100644 --- a/src/core/init/create-app.ts +++ b/src/core/init/create-app.ts @@ -16,7 +16,9 @@ import AppClass, { rootComponents, State, - ComponentElement + ComponentElement, + + initEmitter } from 'core/component'; @@ -34,6 +36,7 @@ export async function createApp( opts: CreateAppOptions, state: State ): Promise { + initEmitter.emit(`registerComponent.${rootComponentName}`); const rootComponentParams = await getRootComponentParams(rootComponentName); opts.setup?.(Object.cast(rootComponentParams)); From cc5dfb850c565faa29e09a0abc37c4d90d6a5b0b Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 25 Sep 2024 16:07:33 +0300 Subject: [PATCH 04/52] fixing syntax errors after build --- build/graph/graph.js | 36 +++---------------- build/helpers/invoke-by-register-component.js | 6 ++-- build/monic/dynamic-component-import.js | 4 +-- package.json | 2 ++ src/components/form/b-button/b-button.ts | 4 +++ .../p-v4-components-demo.ss | 2 ++ src/core/component/init/component.ts | 4 +-- 7 files changed, 20 insertions(+), 38 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index c73402457e..ca3cbe13a9 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -198,21 +198,20 @@ async function buildProjectGraph() { if (!isParent && tpl && !componentsToIgnore.test(name)) { const entry = getEntryPath(tpl); - str += `Object.assign(TPLS, require('./${entry}'));\n`; + str += invokeByRegisterEvent(`Object.assign(TPLS, require('./${entry}'));\n`, name); } return str; }); if (tplContent) { - const tplsStore = 'globalThis.TPLS = globalThis.TPLS || Object.create(null)'; + const tplsStore = 'globalThis.TPLS = globalThis.TPLS || Object.create(null);\n'; tplContent = [webpackRuntime, tplsStore, tplContent, ''].join('\n'); } { const - entrySrc = path.join(tmpEntries, `${name}.js`), - componentsRequires = new Map(); + entrySrc = path.join(tmpEntries, `${name}.js`); let content = await $C(list).async.to('').reduce(async (str, {name}) => { const @@ -224,12 +223,7 @@ async function buildProjectGraph() { if (!usedLibs.has(el)) { usedLibs.add(el); - if (!componentsRequires.has(el)) { - componentsRequires.set(name, new Set([`require('${el}');\n`])); - } else { - componentsRequires.get(name).add(`require('${el}');\n`); - } - // str += invokeByRegisterEvent(`require('${el}');\n`, name); + str += invokeByRegisterEvent(`require('${el}');\n`, name); } }); } @@ -255,10 +249,6 @@ async function buildProjectGraph() { let importScript; - const - entryPath = getEntryPath(entry), - isComponentPath = new RegExp(`\\/(${validators.blockTypeList.join('|')})-.+?\\/?`); - if (webpack.ssr) { importScript = `Object.assign(module.exports, require('${getEntryPath(entry)}'));\n`; @@ -266,23 +256,7 @@ async function buildProjectGraph() { importScript = `require('${getEntryPath(entry)}');\n`; } - if (!componentsRequires.has(name) && isComponentPath.test(entryPath)) { - componentsRequires.set(name, new Set([importScript])); - - } else if (componentsRequires.has(name) && isComponentPath.test(entryPath)) { - componentsRequires.get(name).add(importScript); - - } else { - str += importScript; - } - // str += isComponentPath.test(entryPath) ? invokeByRegisterEvent(importScript, name) : importScript; - } - - console.log(componentsRequires); - - for (const [componentName, importsSet] of componentsRequires) { - const importsStr = [...importsSet].join(''); - str += invokeByRegisterEvent(importsStr, componentName); + str += importScript; } return str; diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index 9340abe957..9615f09f6f 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -7,13 +7,13 @@ * @returns {String} */ exports.invokeByRegisterEvent = function(script, componentName) { - return `\n - { + return `\n\n + (function() { const {initEmitter} = require('core/component/event'); initEmitter.once('registerComponent.${componentName}', () => { ${script} }); - }\n + })();\n `; } \ No newline at end of file diff --git a/build/monic/dynamic-component-import.js b/build/monic/dynamic-component-import.js index ff9ff5c21d..b5aac366e5 100644 --- a/build/monic/dynamic-component-import.js +++ b/build/monic/dynamic-component-import.js @@ -128,8 +128,8 @@ module.exports = async function dynamicComponentImportReplacer(str) { imports[0] = `TPLS['${resourceName}'] ? ${(imports[0])} : ${imports[0]}.then(${decl}, function (err) { stderr(err); return ${decl}(); })`; } - return invokeByRegisterEvent(`Promise.all([${imports.join(',')}])`, resourceName); - // return `Promise.all([${imports.join(',')}])`; + // return invokeByRegisterEvent(`Promise.all([${imports.join(',')}])`, resourceName); вызывает синтакс. ошибки, некоторые результаты импортов присваиваются переменным :( + return `Promise.all([${imports.join(',')}])`; }); }; diff --git a/package.json b/package.json index 3d77728617..cb028187f2 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,8 @@ "V4Fire" ], "scripts": { + "bbuild": "npx webpack --watch --env public-path=// progress=false", + "sttart": "npx static ./dist/client", "build": "yarn build:tsconfig && webpack", "build:tsconfig": "node node_modules/@v4fire/core/build/build-tsconfig", "build:file": "gulp build:tsconfig && webpack --env public-path", diff --git a/src/components/form/b-button/b-button.ts b/src/components/form/b-button/b-button.ts index 73509f731e..01494d61fb 100644 --- a/src/components/form/b-button/b-button.ts +++ b/src/components/form/b-button/b-button.ts @@ -47,6 +47,10 @@ DataProvider.addToPrototype({getDefaultRequestParams, base, get}); interface bButton extends Trait, Trait {} +console.group(); +console.log('b-button invoked'); +console.groupEnd(); + @component({ functional: { wait: undefined, diff --git a/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss b/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss index bbac322bfa..32156c1b92 100644 --- a/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss +++ b/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss @@ -12,5 +12,7 @@ - template index() extends ['i-static-page.component'].index - block body + /// < b-button + /// btn < template v-if = stage === 'teleports' < b-bottom-slide diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index 8ec38838d6..1032cdd481 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -54,12 +54,12 @@ export function registerParentComponents(component: ComponentConstructorInfo): b regParentComponent.forEach((reg) => reg()); delete componentRegInitializers[parentName]; - initEmitter.emit(`registerComponent.${component?.name || parentName}`); - return true; } } + initEmitter.emit(`registerComponent.${component?.name || parentName}`); + return false; } From 66f1e0454be9d5fbb05eae62451582ed6149c74d Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 25 Sep 2024 17:38:03 +0300 Subject: [PATCH 05/52] fixed breaked imports and syntax errors --- build/graph/graph.js | 20 +++++++++++++------- src/core/component/init/component.ts | 11 ++++++----- 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index ca3cbe13a9..0d25618547 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -198,7 +198,7 @@ async function buildProjectGraph() { if (!isParent && tpl && !componentsToIgnore.test(name)) { const entry = getEntryPath(tpl); - str += invokeByRegisterEvent(`Object.assign(TPLS, require('./${entry}'));\n`, name); + str += `Object.assign(TPLS, require('./${entry}'));\n`; } return str; @@ -223,7 +223,7 @@ async function buildProjectGraph() { if (!usedLibs.has(el)) { usedLibs.add(el); - str += invokeByRegisterEvent(`require('${el}');\n`, name); + str += invokeByRegisterEvent(`require('${el}');\n`, name); // ok } }); } @@ -232,6 +232,10 @@ async function buildProjectGraph() { logic : /^$|^\.(?:js|ts)(?:\?|$)/.test(path.extname(name)); + const isComponentPath = (path) => + new RegExp(`\\/(${validators.blockTypeList.join('|')})-.+?\\/?`) + .test(path); + if (needRequireAsLogic) { let entry; @@ -246,17 +250,19 @@ async function buildProjectGraph() { entry = path.resolve(tmpEntries, '../', name); } - let - importScript; + const entryPath = getEntryPath(entry); + let importScript; if (webpack.ssr) { - importScript = `Object.assign(module.exports, require('${getEntryPath(entry)}'));\n`; + importScript = `Object.assign(module.exports, require('${entryPath}'));\n`; } else { - importScript = `require('${getEntryPath(entry)}');\n`; + importScript = `require('${entryPath}');\n`; } - str += importScript; + str += !isComponentPath(entryPath) ? + importScript : + invokeByRegisterEvent(importScript, name); } return str; diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index 1032cdd481..8c4ec58f3b 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -12,7 +12,6 @@ import type { ComponentMeta } from 'core/component/interface'; import type { ComponentConstructorInfo } from 'core/component/reflect'; import { initEmitter } from 'core/component/event'; -import { c } from '../../../../../core/src/core/analytics/engines/appmetrica/helpers'; /** * Registers parent components for the given one. @@ -30,6 +29,8 @@ export function registerParentComponents(component: ComponentConstructorInfo): b let parentName = component.parentParams?.name, parentComponent = component.parent; + + initEmitter.emit(`registerComponent.${component?.name || parentName}`); if (!Object.isTruly(parentName) || !componentRegInitializers[parentName]) { return false; @@ -77,6 +78,10 @@ export function registerComponent(name: CanUndef): CanNull): CanNull Date: Wed, 25 Sep 2024 17:50:29 +0300 Subject: [PATCH 06/52] return empty string if component doesn't have deps --- build/helpers/invoke-by-register-component.js | 6 +++++- .../pages/p-v4-components-demo/p-v4-components-demo.ss | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index 9615f09f6f..f9eb826a07 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -7,7 +7,11 @@ * @returns {String} */ exports.invokeByRegisterEvent = function(script, componentName) { - return `\n\n + if (script?.trim()?.length == 0) { + return script; + } + + return `\n (function() { const {initEmitter} = require('core/component/event'); diff --git a/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss b/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss index 32156c1b92..18c3e29d96 100644 --- a/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss +++ b/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss @@ -12,7 +12,7 @@ - template index() extends ['i-static-page.component'].index - block body - /// < b-button - /// btn + < b-button + btn < template v-if = stage === 'teleports' < b-bottom-slide From 16d3e367e86144231ab818bd395d60abc7549025 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Thu, 26 Sep 2024 14:21:43 +0300 Subject: [PATCH 07/52] fixed build errors issued by updated loaders --- build/helpers/invoke-by-register-component.js | 2 +- build/monic/attach-component-dependencies.js | 2 +- build/monic/dynamic-component-import.js | 20 +++++++++++++++---- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index f9eb826a07..aa622d43fa 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -12,7 +12,7 @@ exports.invokeByRegisterEvent = function(script, componentName) { } return `\n - (function() { + (function(){ const {initEmitter} = require('core/component/event'); initEmitter.once('registerComponent.${componentName}', () => { diff --git a/build/monic/attach-component-dependencies.js b/build/monic/attach-component-dependencies.js index 88b666387e..246f873455 100644 --- a/build/monic/attach-component-dependencies.js +++ b/build/monic/attach-component-dependencies.js @@ -138,7 +138,7 @@ module.exports = async function attachComponentDependencies(str, filePath) { expr = `require('${src}');` } - decl += `try { ${expr} } catch (err) { stderr(err); }`; + decl += `try { ${invokeByRegisterEvent(expr, component.name)} } catch (err) { stderr(err); }`; } } catch {} diff --git a/build/monic/dynamic-component-import.js b/build/monic/dynamic-component-import.js index b5aac366e5..cfa5f0340b 100644 --- a/build/monic/dynamic-component-import.js +++ b/build/monic/dynamic-component-import.js @@ -63,10 +63,16 @@ module.exports = async function dynamicComponentImportReplacer(str) { } else { if (isESImport) { - decl = `import(${magicComments} '${fullPath}')`; + // decl = `import(${magicComments} '${fullPath}')`; + decl = `new Promise((resolve) => { + ${invokeByRegisterEvent(`resolve(import(${magicComments} '${fullPath}'))`, resourceName)} + })`; } else { - decl = `new Promise(function (r) { return r(require('${fullPath}')); })`; + // decl = `new Promise(function (r) { return r(require('${fullPath}')); })`; // сделать резолв внутри обработчика!!!!!!! + decl = `new Promise((resolve) => { + ${invokeByRegisterEvent(`resolve(require('${fullPath}'))`, resourceName)} + })`; } decl += '.catch(function (err) { stderr(err) })'; @@ -78,7 +84,7 @@ module.exports = async function dynamicComponentImportReplacer(str) { { const tplPath = `${fullPath}.ss`, - regTpl = `function (module) { TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}']; return module; }`; + regTpl = `function (module) { ${invokeByRegisterEvent(`TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}'];`, resourceName)} return module; }`; let decl; @@ -111,9 +117,15 @@ module.exports = async function dynamicComponentImportReplacer(str) { if (ssr || isESImport) { decl = `import(${magicComments} '${stylPath}')`; + // decl = `new Promise((resolve) => { + // ${invokeByRegisterEvent(`resolve(import(${magicComments} '${stylPath}'))`, resourceName)} + // })`; } else { decl = `new Promise(function (r) { return r(require('${stylPath}')); })`; + // decl = `new Promise((resolve) => { + // ${invokeByRegisterEvent(`resolve(require('${stylPath}'))`, resourceName)} + // })`; } if (ssr) { @@ -128,7 +140,7 @@ module.exports = async function dynamicComponentImportReplacer(str) { imports[0] = `TPLS['${resourceName}'] ? ${(imports[0])} : ${imports[0]}.then(${decl}, function (err) { stderr(err); return ${decl}(); })`; } - // return invokeByRegisterEvent(`Promise.all([${imports.join(',')}])`, resourceName); вызывает синтакс. ошибки, некоторые результаты импортов присваиваются переменным :( + // return invokeByRegisterEvent(`Promise.all([${imports.join(',')}])`, resourceName); //вызывает синтакс. ошибки, некоторые результаты импортов присваиваются переменным :( return `Promise.all([${imports.join(',')}])`; }); }; From f48915325e7a800c5ec085481a6e786906ee9659 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Tue, 1 Oct 2024 22:24:06 +0300 Subject: [PATCH 08/52] fixed syntax errors --- build/helpers/invoke-by-register-component.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index aa622d43fa..dddea1504f 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -12,12 +12,11 @@ exports.invokeByRegisterEvent = function(script, componentName) { } return `\n - (function(){ + { const {initEmitter} = require('core/component/event'); - initEmitter.once('registerComponent.${componentName}', () => { ${script} }); - })();\n + }\n `; } \ No newline at end of file From f05a361b8631833a46b909a768bb81bb0c724b36 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Tue, 1 Oct 2024 22:38:39 +0300 Subject: [PATCH 09/52] removed ununsed handler --- build/graph/graph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index 0d25618547..8d8116ddd1 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -223,7 +223,7 @@ async function buildProjectGraph() { if (!usedLibs.has(el)) { usedLibs.add(el); - str += invokeByRegisterEvent(`require('${el}');\n`, name); // ok + str += `require('${el}');\n`; } }); } From 676b81f9e8e221e270bc221b3b8f8d10129f15e6 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Thu, 3 Oct 2024 13:12:11 +0300 Subject: [PATCH 10/52] applied layer of the components for emitting registration events --- build/graph/graph.js | 5 +- build/helpers/index.js | 3 +- build/helpers/invoke-by-register-component.js | 8 ++- build/helpers/layer-name.js | 22 +++++++ build/monic/attach-component-dependencies.js | 4 +- build/monic/dynamic-component-import.js | 12 ++-- build/ts-transformers/set-component-layer.js | 66 ++++++++++++++++--- src/core/component/init/component.ts | 16 +++-- src/core/init/create-app.ts | 6 +- 9 files changed, 109 insertions(+), 33 deletions(-) create mode 100644 build/helpers/layer-name.js diff --git a/build/graph/graph.js b/build/graph/graph.js index 8d8116ddd1..7236f759b5 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -41,7 +41,8 @@ const { cacheDir, isStandalone, tracer, - invokeByRegisterEvent + invokeByRegisterEvent, + getLayerName } = include('build/helpers'); /** @@ -262,7 +263,7 @@ async function buildProjectGraph() { str += !isComponentPath(entryPath) ? importScript : - invokeByRegisterEvent(importScript, name); + invokeByRegisterEvent(importScript, getLayerName(component.logic), name); } return str; diff --git a/build/helpers/index.js b/build/helpers/index.js index 0288ffe8aa..ef18bc41bb 100644 --- a/build/helpers/index.js +++ b/build/helpers/index.js @@ -15,5 +15,6 @@ Object.assign( include('build/helpers/other'), include('build/helpers/i18n'), include('build/helpers/tracer'), - include('build/helpers/invoke-by-register-component.js') + include('build/helpers/invoke-by-register-component'), + include('build/helpers/layer-name.js') ); diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index dddea1504f..257a451e76 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -1,12 +1,13 @@ /** * Function incapsulates script to event handler that is being triggered when component with - * name `componentName` renders on the page. + * name `componentName` from `layerName` renders on the page. * * @param {String} script + * @param {String} layerName * @param {String} componentName * @returns {String} */ -exports.invokeByRegisterEvent = function(script, componentName) { +exports.invokeByRegisterEvent = function(script, layerName, componentName) { if (script?.trim()?.length == 0) { return script; } @@ -14,7 +15,8 @@ exports.invokeByRegisterEvent = function(script, componentName) { return `\n { const {initEmitter} = require('core/component/event'); - initEmitter.once('registerComponent.${componentName}', () => { + initEmitter.once('registerComponent.${layerName}.${componentName}', () => { + console.log('registerComponent.${layerName}.${componentName}'); ${script} }); }\n diff --git a/build/helpers/layer-name.js b/build/helpers/layer-name.js new file mode 100644 index 0000000000..cdd0754c54 --- /dev/null +++ b/build/helpers/layer-name.js @@ -0,0 +1,22 @@ +/** + * The function determines the package in which the module is defined and + * returns the name of this package from the `package.json` file + * + * @param {string} filePath + * @returns {string} + */ +exports.getLayerName = function(filePath) { + + if (filePath == null) { + console.trace('filepath is null'); + } + + + const + pathToRootRgxp = /(?.+)[/\\]src[/\\]/, + pathToRootDir = filePath.match(pathToRootRgxp)?.groups?.path; + + const res = require(`${pathToRootDir}/package.json`).name; + + return res; +} \ No newline at end of file diff --git a/build/monic/attach-component-dependencies.js b/build/monic/attach-component-dependencies.js index 246f873455..160209e735 100644 --- a/build/monic/attach-component-dependencies.js +++ b/build/monic/attach-component-dependencies.js @@ -15,7 +15,7 @@ const const path = require('upath'), graph = include('build/graph'), - {invokeByRegisterEvent} = include('build/helpers'); + {invokeByRegisterEvent, getLayerName} = include('build/helpers'); const decls = Object.create(null); @@ -61,7 +61,7 @@ module.exports = async function attachComponentDependencies(str, filePath) { await $C([...deps].reverse()).async.forEach(forEach); - return invokeByRegisterEvent(imports, component.name) + str; + return invokeByRegisterEvent(imports, getLayerName(filePath), component.name) + str; async function forEach(dep) { if (dep.startsWith('g-')) { diff --git a/build/monic/dynamic-component-import.js b/build/monic/dynamic-component-import.js index cfa5f0340b..5865e23940 100644 --- a/build/monic/dynamic-component-import.js +++ b/build/monic/dynamic-component-import.js @@ -14,7 +14,7 @@ const const graph = include('build/graph'), - {invokeByRegisterEvent} = include('build/helpers'); + {invokeByRegisterEvent, getLayerName} = include('build/helpers'); const importRgxp = new RegExp( `\\bimport${commentExpr}\\((${commentExpr})(["'])((?:.*?[\\\\/]|)([bp]-[^.\\\\/"')]+)+)\\2${commentExpr}\\)`, @@ -39,8 +39,8 @@ const * }); * ``` */ -module.exports = async function dynamicComponentImportReplacer(str) { - const {entryDeps} = await graph; +module.exports = async function dynamicComponentImportReplacer(str, filePath) { + const { entryDeps } = await graph; return str.replace(importRgxp, (str, magicComments, q, resourcePath, resourceName) => { const @@ -65,13 +65,13 @@ module.exports = async function dynamicComponentImportReplacer(str) { if (isESImport) { // decl = `import(${magicComments} '${fullPath}')`; decl = `new Promise((resolve) => { - ${invokeByRegisterEvent(`resolve(import(${magicComments} '${fullPath}'))`, resourceName)} + ${invokeByRegisterEvent(`resolve(import(${magicComments} '${fullPath}'))`, getLayerName(filePath), resourceName)} })`; } else { // decl = `new Promise(function (r) { return r(require('${fullPath}')); })`; // сделать резолв внутри обработчика!!!!!!! decl = `new Promise((resolve) => { - ${invokeByRegisterEvent(`resolve(require('${fullPath}'))`, resourceName)} + ${invokeByRegisterEvent(`resolve(require('${fullPath}'))`, getLayerName(filePath), resourceName)} })`; } @@ -84,7 +84,7 @@ module.exports = async function dynamicComponentImportReplacer(str) { { const tplPath = `${fullPath}.ss`, - regTpl = `function (module) { ${invokeByRegisterEvent(`TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}'];`, resourceName)} return module; }`; + regTpl = `function (module) { ${invokeByRegisterEvent(`TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}'];`, getLayerName(filePath), resourceName)} return module; }`; let decl; diff --git a/build/ts-transformers/set-component-layer.js b/build/ts-transformers/set-component-layer.js index 31097ca027..e0883c694e 100644 --- a/build/ts-transformers/set-component-layer.js +++ b/build/ts-transformers/set-component-layer.js @@ -12,6 +12,7 @@ const ts = require('typescript'); const {validators} = require('@pzlr/build-core'); +const {getLayerName} = include('build/helpers'); /** * @typedef {import('typescript').TransformationContext} Context @@ -21,7 +22,6 @@ const {validators} = require('@pzlr/build-core'); */ const - pathToRootRgxp = /(?.+)[/\\]src[/\\]/, isComponentPath = new RegExp(`\\/(${validators.blockTypeList.join('|')})-.+?\\/?`); /** @@ -53,11 +53,28 @@ const * ``` */ const setComponentLayerTransformer = (context) => (sourceFile) => { - if (!isInsideComponent(sourceFile.path)) { + const isInitAppFile = sourceFile.path.endsWith('core/init/index.ts'); + + if (!isInsideComponent(sourceFile.path) && !isInitAppFile) { + return sourceFile; + } + + if (isInitAppFile) { + console.log('yes' * 100); + } + + let layer = getLayerName(sourceFile.path); + + if (isInitAppFile) { + const pathToRootPackage = sourceFile.path.match(/(?.+)[/\\]node_modules[/\\]/)?.groups?.path; + + layer = pathToRootPackage != null ? + require(`${pathToRootPackage}/package.json`).name : + getLayerName(sourceFile.path); + } else { return sourceFile; } - const layer = getLayerName(sourceFile.path); const {factory} = context; /** @@ -67,10 +84,29 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { * @returns {Node} */ const visitor = (node) => { - if (ts.isDecorator(node) && isComponentCallExpression(node)) { - const - expr = node.expression; + const + expr = node.expression; + + if (ts.isReturnStatement(node) && isInitAppFile && expr.expression.escapedText === 'createApp') { + const newArgument = factory.createStringLiteral(layer); + + // console.log('arguments', expr.arguments); + + const updatedCallExpression = factory.createReturnStatement( + factory.createCallExpression( + factory.createIdentifier("createApp"), + undefined, + [ + ...expr.arguments, + newArgument + ] + ) + ); + console.log({updatedCallExpression: updatedCallExpression}); + + return updatedCallExpression; + } else if (ts.isDecorator(node) && isComponentCallExpression(node)) { if (!ts.isCallExpression(expr)) { return node; } @@ -117,10 +153,10 @@ module.exports = () => setComponentLayerTransformer; * @param {string} filePath * @returns {string} */ -function getLayerName(filePath) { - const pathToRootDir = filePath.match(pathToRootRgxp).groups.path; - return require(`${pathToRootDir}/package.json`).name; -} +// function getLayerName(filePath) { +// const pathToRootDir = filePath.match(pathToRootRgxp).groups.path; +// return require(`${pathToRootDir}/package.json`).name; +// } /** * Returns true if the specified path is within the context of the component @@ -147,3 +183,13 @@ function isComponentCallExpression(node) { return expr.expression.escapedText === 'component'; } + +function isCreateAppCallExpression(node) { + const expr = node.expression; + + if (Boolean(expr) && ts.isCallExpression(expr) || !ts.isIdentifier(expr?.expression)) { + return false; + } + + return expr.expression.escapedText === 'createApp'; +} diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index 8c4ec58f3b..874ddb4561 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -24,13 +24,13 @@ import { initEmitter } from 'core/component/event'; */ export function registerParentComponents(component: ComponentConstructorInfo): boolean { const - {name} = component; + {name, layer} = component; let parentName = component.parentParams?.name, parentComponent = component.parent; - initEmitter.emit(`registerComponent.${component?.name || parentName}`); + initEmitter.emit(`registerComponent.${layer}.${component?.name || parentName}`); if (!Object.isTruly(parentName) || !componentRegInitializers[parentName]) { return false; @@ -59,8 +59,6 @@ export function registerParentComponents(component: ComponentConstructorInfo): b } } - initEmitter.emit(`registerComponent.${component?.name || parentName}`); - return false; } @@ -78,9 +76,13 @@ export function registerComponent(name: CanUndef): CanNull): CanNull, opts: CreateAppOptions, - state: State + state: State, + layer?: string ): Promise { - initEmitter.emit(`registerComponent.${rootComponentName}`); + initEmitter.emit(`registerComponent.${layer}.${rootComponentName}`); + const rootComponentParams = await getRootComponentParams(rootComponentName); opts.setup?.(Object.cast(rootComponentParams)); From 6361a3fed07aafa8bd982122d01bec57ba77023f Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Thu, 3 Oct 2024 14:20:00 +0300 Subject: [PATCH 11/52] set layer for registerComponent as arg --- build/graph/graph.js | 6 +++++- build/helpers/invoke-by-register-component.js | 2 ++ build/helpers/layer-name.js | 2 ++ build/monic/attach-component-dependencies.js | 2 +- build/ts-transformers/set-component-layer.js | 6 ------ .../b-virtual-scroll-new/modules/factory/index.ts | 2 +- src/core/component/decorators/component/index.ts | 1 + src/core/component/init/component.ts | 12 +++++------- src/core/component/render/wrappers.ts | 8 ++++---- src/core/init/create-app.ts | 1 + src/core/prelude/test-env/components/index.ts | 2 +- 11 files changed, 23 insertions(+), 21 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index 7236f759b5..c5bc8c31d1 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -261,9 +261,13 @@ async function buildProjectGraph() { importScript = `require('${entryPath}');\n`; } + // console.log({entryPath: component?.logic}); + + console.log({entryPath: path.join(__filename, entryPath)}) + str += !isComponentPath(entryPath) ? importScript : - invokeByRegisterEvent(importScript, getLayerName(component.logic), name); + invokeByRegisterEvent(importScript, getLayerName(component?.logic), name); } return str; diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index 257a451e76..1f76efc05f 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -12,6 +12,8 @@ exports.invokeByRegisterEvent = function(script, layerName, componentName) { return script; } + console.log(`registerComponent.${layerName}.${componentName}`); + return `\n { const {initEmitter} = require('core/component/event'); diff --git a/build/helpers/layer-name.js b/build/helpers/layer-name.js index cdd0754c54..ab0f12ba18 100644 --- a/build/helpers/layer-name.js +++ b/build/helpers/layer-name.js @@ -18,5 +18,7 @@ exports.getLayerName = function(filePath) { const res = require(`${pathToRootDir}/package.json`).name; + // console.log('getLayerName', {res, pathToRootDir, file}); + return res; } \ No newline at end of file diff --git a/build/monic/attach-component-dependencies.js b/build/monic/attach-component-dependencies.js index 160209e735..223cbddb1c 100644 --- a/build/monic/attach-component-dependencies.js +++ b/build/monic/attach-component-dependencies.js @@ -138,7 +138,7 @@ module.exports = async function attachComponentDependencies(str, filePath) { expr = `require('${src}');` } - decl += `try { ${invokeByRegisterEvent(expr, component.name)} } catch (err) { stderr(err); }`; + decl += `try { ${invokeByRegisterEvent(expr, getLayerName(filePath), component.name)} } catch (err) { stderr(err); }`; } } catch {} diff --git a/build/ts-transformers/set-component-layer.js b/build/ts-transformers/set-component-layer.js index e0883c694e..bbe55a5d70 100644 --- a/build/ts-transformers/set-component-layer.js +++ b/build/ts-transformers/set-component-layer.js @@ -59,10 +59,6 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { return sourceFile; } - if (isInitAppFile) { - console.log('yes' * 100); - } - let layer = getLayerName(sourceFile.path); if (isInitAppFile) { @@ -90,8 +86,6 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { if (ts.isReturnStatement(node) && isInitAppFile && expr.expression.escapedText === 'createApp') { const newArgument = factory.createStringLiteral(layer); - // console.log('arguments', expr.arguments); - const updatedCallExpression = factory.createReturnStatement( factory.createCallExpression( factory.createIdentifier("createApp"), diff --git a/src/components/base/b-virtual-scroll-new/modules/factory/index.ts b/src/components/base/b-virtual-scroll-new/modules/factory/index.ts index ad2236a0e7..2d593600a9 100644 --- a/src/components/base/b-virtual-scroll-new/modules/factory/index.ts +++ b/src/components/base/b-virtual-scroll-new/modules/factory/index.ts @@ -141,7 +141,7 @@ export class ComponentFactory extends Friend { */ protected normalizeComponentItemProps(componentName: string, props: Dictionary): Dictionary { const - meta = registerComponent(componentName); + meta = registerComponent(componentName, '@v4fire/client'); if (meta == null) { return props; diff --git a/src/core/component/decorators/component/index.ts b/src/core/component/decorators/component/index.ts index c58d47bb52..1c9ee57df5 100644 --- a/src/core/component/decorators/component/index.ts +++ b/src/core/component/decorators/component/index.ts @@ -109,6 +109,7 @@ export function component(opts?: ComponentOptions): Function { components.set(componentName, meta); initEmitter.emit(`constructor.${componentName}`, {meta, parentMeta}); + initEmitter.emit(`registerComponent.${componentInfo.layer}.${componentName}`); const noNeedToRegisterAsComponent = target.hasOwnProperty(OVERRIDDEN) || diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index 874ddb4561..42ae72f6c4 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -30,7 +30,7 @@ export function registerParentComponents(component: ComponentConstructorInfo): b parentName = component.parentParams?.name, parentComponent = component.parent; - initEmitter.emit(`registerComponent.${layer}.${component?.name || parentName}`); + initEmitter.emit(`registerComponent.${layer}.${component?.name}`); if (!Object.isTruly(parentName) || !componentRegInitializers[parentName]) { return false; @@ -72,17 +72,15 @@ export function registerParentComponents(component: ComponentConstructorInfo): b * * @param name - the component name */ -export function registerComponent(name: CanUndef): CanNull { +export function registerComponent(name: CanUndef, layer?: string): CanNull { if (name == null || !isComponent.test(name)) { return null; } const component = components.get(name); - - if (component != null) { - let componentName = (component?.componentName || name).replaceAll('-functional', ''); - initEmitter.emit(`registerComponent.${component.layer}.${componentName}`); - } + + let componentName = (component?.componentName || name).replaceAll('-functional', ''); + initEmitter.emit(`registerComponent.${component?.layer || layer}.${componentName}`); const regComponent = componentRegInitializers[name]; diff --git a/src/core/component/render/wrappers.ts b/src/core/component/render/wrappers.ts index 2f373912ab..ae7f030dea 100644 --- a/src/core/component/render/wrappers.ts +++ b/src/core/component/render/wrappers.ts @@ -96,10 +96,10 @@ export function wrapCreateBlock(original: T): T { patchFlag = normalizePatchFlagUsingProps.call(this, patchFlag, attrs); if (Object.isString(name)) { - component = registerComponent(name); + component = registerComponent(name, '@v4fire/client'); } else if (!Object.isPrimitive(name) && 'name' in name) { - component = registerComponent(name.name); + component = registerComponent(name.name, '@v4fire/client'); } const createVNode: (...args: Parameters) => VNode = ( @@ -266,7 +266,7 @@ export function wrapResolveComponent(this: ComponentInterface, path: st ...args: unknown[] ) => { const - meta = registerComponent(component.name); + meta = registerComponent(component.name, '@v4fire/client'); if (meta != null) { props = normalizeComponentAttrs(props, [], meta); diff --git a/src/core/init/create-app.ts b/src/core/init/create-app.ts index dded69fcbf..3da379e49a 100644 --- a/src/core/init/create-app.ts +++ b/src/core/init/create-app.ts @@ -38,6 +38,7 @@ export async function createApp( layer?: string ): Promise { initEmitter.emit(`registerComponent.${layer}.${rootComponentName}`); + console.log(`registerComponent.${layer}.${rootComponentName}`); const rootComponentParams = await getRootComponentParams(rootComponentName); opts.setup?.(Object.cast(rootComponentParams)); diff --git a/src/core/prelude/test-env/components/index.ts b/src/core/prelude/test-env/components/index.ts index b69d5f1af3..3195e70368 100644 --- a/src/core/prelude/test-env/components/index.ts +++ b/src/core/prelude/test-env/components/index.ts @@ -46,7 +46,7 @@ globalThis.renderComponents = ( const ids = scheme.map(() => Math.random().toString(16).slice(2)); - const componentMeta = registerComponent(componentName); + const componentMeta = registerComponent(componentName, '@v4fire/client'); const vnodes = create.call(ctx.vdom, scheme.map(({attrs, children}, i) => ({ type: componentName, From 9d13e83b76958dc3e297b01efcc9c8c62cc54e8a Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Thu, 3 Oct 2024 14:30:30 +0300 Subject: [PATCH 12/52] removed debug logs --- build/graph/graph.js | 4 ---- build/helpers/invoke-by-register-component.js | 2 -- build/ts-transformers/set-component-layer.js | 2 -- src/core/init/create-app.ts | 1 - 4 files changed, 9 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index c5bc8c31d1..2f426992f8 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -261,10 +261,6 @@ async function buildProjectGraph() { importScript = `require('${entryPath}');\n`; } - // console.log({entryPath: component?.logic}); - - console.log({entryPath: path.join(__filename, entryPath)}) - str += !isComponentPath(entryPath) ? importScript : invokeByRegisterEvent(importScript, getLayerName(component?.logic), name); diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index 1f76efc05f..257a451e76 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -12,8 +12,6 @@ exports.invokeByRegisterEvent = function(script, layerName, componentName) { return script; } - console.log(`registerComponent.${layerName}.${componentName}`); - return `\n { const {initEmitter} = require('core/component/event'); diff --git a/build/ts-transformers/set-component-layer.js b/build/ts-transformers/set-component-layer.js index bbe55a5d70..0f372623c3 100644 --- a/build/ts-transformers/set-component-layer.js +++ b/build/ts-transformers/set-component-layer.js @@ -97,8 +97,6 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { ) ); - console.log({updatedCallExpression: updatedCallExpression}); - return updatedCallExpression; } else if (ts.isDecorator(node) && isComponentCallExpression(node)) { if (!ts.isCallExpression(expr)) { diff --git a/src/core/init/create-app.ts b/src/core/init/create-app.ts index 3da379e49a..dded69fcbf 100644 --- a/src/core/init/create-app.ts +++ b/src/core/init/create-app.ts @@ -38,7 +38,6 @@ export async function createApp( layer?: string ): Promise { initEmitter.emit(`registerComponent.${layer}.${rootComponentName}`); - console.log(`registerComponent.${layer}.${rootComponentName}`); const rootComponentParams = await getRootComponentParams(rootComponentName); opts.setup?.(Object.cast(rootComponentParams)); From 5a0e33a650bf06138e0195540364c6de58c77466 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Thu, 3 Oct 2024 14:36:40 +0300 Subject: [PATCH 13/52] fixed optional chaining if obj is undefined --- build/ts-transformers/set-component-layer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/build/ts-transformers/set-component-layer.js b/build/ts-transformers/set-component-layer.js index 0f372623c3..705c3c8569 100644 --- a/build/ts-transformers/set-component-layer.js +++ b/build/ts-transformers/set-component-layer.js @@ -81,9 +81,9 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { */ const visitor = (node) => { const - expr = node.expression; + expr = node?.expression; - if (ts.isReturnStatement(node) && isInitAppFile && expr.expression.escapedText === 'createApp') { + if (ts.isReturnStatement(node) && isInitAppFile && expr?.expression?.escapedText === 'createApp') { const newArgument = factory.createStringLiteral(layer); const updatedCallExpression = factory.createReturnStatement( From c82d4ea0561e8eac9a63f7883e63583321521a63 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Fri, 4 Oct 2024 12:15:36 +0300 Subject: [PATCH 14/52] updated set-layer ts-transformer --- build/helpers/get-origin-layer.js | 12 ++++ build/helpers/index.js | 3 +- build/helpers/layer-name.js | 7 --- build/ts-transformers/set-component-layer.js | 64 +++++++------------- src/core/init/create-app.ts | 3 + 5 files changed, 38 insertions(+), 51 deletions(-) create mode 100644 build/helpers/get-origin-layer.js diff --git a/build/helpers/get-origin-layer.js b/build/helpers/get-origin-layer.js new file mode 100644 index 0000000000..494ce536bf --- /dev/null +++ b/build/helpers/get-origin-layer.js @@ -0,0 +1,12 @@ +const {getLayerName} = require('./layer-name'); + +exports.getOriginLayerFromPath = function(filePath) { + const + pathToOriginPackage = sourceFile.path.match(/(?.+)[/\\]node_modules[/\\]/)?.groups?.path; + + if (pathToRootPackage == null) { + return getLayerName(filePath); + } + + return require(`${pathToOriginPackage}/package.json`).name; +} \ No newline at end of file diff --git a/build/helpers/index.js b/build/helpers/index.js index ef18bc41bb..cad4695364 100644 --- a/build/helpers/index.js +++ b/build/helpers/index.js @@ -16,5 +16,6 @@ Object.assign( include('build/helpers/i18n'), include('build/helpers/tracer'), include('build/helpers/invoke-by-register-component'), - include('build/helpers/layer-name.js') + include('build/helpers/layer-name'), + include('build/helpers/get-origin-layer') ); diff --git a/build/helpers/layer-name.js b/build/helpers/layer-name.js index ab0f12ba18..072240af26 100644 --- a/build/helpers/layer-name.js +++ b/build/helpers/layer-name.js @@ -7,18 +7,11 @@ */ exports.getLayerName = function(filePath) { - if (filePath == null) { - console.trace('filepath is null'); - } - - const pathToRootRgxp = /(?.+)[/\\]src[/\\]/, pathToRootDir = filePath.match(pathToRootRgxp)?.groups?.path; const res = require(`${pathToRootDir}/package.json`).name; - // console.log('getLayerName', {res, pathToRootDir, file}); - return res; } \ No newline at end of file diff --git a/build/ts-transformers/set-component-layer.js b/build/ts-transformers/set-component-layer.js index 705c3c8569..ef92ec0068 100644 --- a/build/ts-transformers/set-component-layer.js +++ b/build/ts-transformers/set-component-layer.js @@ -12,7 +12,10 @@ const ts = require('typescript'); const {validators} = require('@pzlr/build-core'); -const {getLayerName} = include('build/helpers'); +const { + getLayerName, + getOriginLayerFromPath +} = include('build/helpers'); /** * @typedef {import('typescript').TransformationContext} Context @@ -53,7 +56,9 @@ const * ``` */ const setComponentLayerTransformer = (context) => (sourceFile) => { - const isInitAppFile = sourceFile.path.endsWith('core/init/index.ts'); + const + {factory} = context, + isInitAppFile = sourceFile.path.endsWith('core/init/index.ts'); if (!isInsideComponent(sourceFile.path) && !isInitAppFile) { return sourceFile; @@ -64,15 +69,9 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { if (isInitAppFile) { const pathToRootPackage = sourceFile.path.match(/(?.+)[/\\]node_modules[/\\]/)?.groups?.path; - layer = pathToRootPackage != null ? - require(`${pathToRootPackage}/package.json`).name : - getLayerName(sourceFile.path); - } else { - return sourceFile; + layer = getOriginLayerFromPath(pathToRootPackage); } - const {factory} = context; - /** * A visitor for the AST node * @@ -83,18 +82,19 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { const expr = node?.expression; - if (ts.isReturnStatement(node) && isInitAppFile && expr?.expression?.escapedText === 'createApp') { - const newArgument = factory.createStringLiteral(layer); - - const updatedCallExpression = factory.createReturnStatement( - factory.createCallExpression( - factory.createIdentifier("createApp"), - undefined, - [ - ...expr.arguments, - newArgument - ] - ) + if ( + ts.isCallExpression(node) && + isInitAppFile && + expr.escapedText === 'createApp' + ) { + + const updatedCallExpression = factory.createCallExpression( + factory.createIdentifier(expr.escapedText), + undefined, + [ + ...node.arguments, + factory.createStringLiteral(layer) + ] ); return updatedCallExpression; @@ -138,18 +138,6 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { // eslint-disable-next-line @v4fire/require-jsdoc module.exports = () => setComponentLayerTransformer; -/** - * The function determines the package in which the module is defined and - * returns the name of this package from the `package.json` file - * - * @param {string} filePath - * @returns {string} - */ -// function getLayerName(filePath) { -// const pathToRootDir = filePath.match(pathToRootRgxp).groups.path; -// return require(`${pathToRootDir}/package.json`).name; -// } - /** * Returns true if the specified path is within the context of the component * @@ -175,13 +163,3 @@ function isComponentCallExpression(node) { return expr.expression.escapedText === 'component'; } - -function isCreateAppCallExpression(node) { - const expr = node.expression; - - if (Boolean(expr) && ts.isCallExpression(expr) || !ts.isIdentifier(expr?.expression)) { - return false; - } - - return expr.expression.escapedText === 'createApp'; -} diff --git a/src/core/init/create-app.ts b/src/core/init/create-app.ts index dded69fcbf..2baf8395cf 100644 --- a/src/core/init/create-app.ts +++ b/src/core/init/create-app.ts @@ -37,6 +37,9 @@ export async function createApp( state: State, layer?: string ): Promise { + console.log({ + layer + }) initEmitter.emit(`registerComponent.${layer}.${rootComponentName}`); const rootComponentParams = await getRootComponentParams(rootComponentName); From 60592eb07bfd3f0dea4657a24a7e3ee7363e0fb7 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Fri, 4 Oct 2024 12:30:09 +0300 Subject: [PATCH 15/52] fixed incorrect reference to variable --- build/helpers/get-origin-layer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/helpers/get-origin-layer.js b/build/helpers/get-origin-layer.js index 494ce536bf..e8d5c9c6f5 100644 --- a/build/helpers/get-origin-layer.js +++ b/build/helpers/get-origin-layer.js @@ -2,7 +2,7 @@ const {getLayerName} = require('./layer-name'); exports.getOriginLayerFromPath = function(filePath) { const - pathToOriginPackage = sourceFile.path.match(/(?.+)[/\\]node_modules[/\\]/)?.groups?.path; + pathToOriginPackage = filePath.match(/(?.+)[/\\]node_modules[/\\]/)?.groups?.path; if (pathToRootPackage == null) { return getLayerName(filePath); From 5238f721cf719b026e0f289d028c46420c189748 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Fri, 4 Oct 2024 12:45:54 +0300 Subject: [PATCH 16/52] fix: pass real filePath as arg --- build/helpers/get-origin-layer.js | 2 +- build/ts-transformers/set-component-layer.js | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/build/helpers/get-origin-layer.js b/build/helpers/get-origin-layer.js index e8d5c9c6f5..934ea4aba6 100644 --- a/build/helpers/get-origin-layer.js +++ b/build/helpers/get-origin-layer.js @@ -4,7 +4,7 @@ exports.getOriginLayerFromPath = function(filePath) { const pathToOriginPackage = filePath.match(/(?.+)[/\\]node_modules[/\\]/)?.groups?.path; - if (pathToRootPackage == null) { + if (pathToOriginPackage == null) { return getLayerName(filePath); } diff --git a/build/ts-transformers/set-component-layer.js b/build/ts-transformers/set-component-layer.js index ef92ec0068..bce0ec74b6 100644 --- a/build/ts-transformers/set-component-layer.js +++ b/build/ts-transformers/set-component-layer.js @@ -67,9 +67,7 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { let layer = getLayerName(sourceFile.path); if (isInitAppFile) { - const pathToRootPackage = sourceFile.path.match(/(?.+)[/\\]node_modules[/\\]/)?.groups?.path; - - layer = getOriginLayerFromPath(pathToRootPackage); + layer = getOriginLayerFromPath(sourceFile.path); } /** From 63f0dcbd16ee8b22633905086edc0a7a1b258546 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Mon, 7 Oct 2024 16:25:10 +0300 Subject: [PATCH 17/52] removed unused handlers --- build/graph/graph.js | 2 +- build/helpers/invoke-by-register-component.js | 13 +++++++------ build/monic/attach-component-dependencies.js | 2 +- src/core/component/decorators/component/index.ts | 4 ++-- src/core/component/init/component.ts | 6 ++---- 5 files changed, 13 insertions(+), 14 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index 2f426992f8..3c4b07b6a5 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -261,7 +261,7 @@ async function buildProjectGraph() { importScript = `require('${entryPath}');\n`; } - str += !isComponentPath(entryPath) ? + str += "/** GRAP CO */" + !isComponentPath(entryPath) ? importScript : invokeByRegisterEvent(importScript, getLayerName(component?.logic), name); } diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index 257a451e76..ac8fdc6ae5 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -13,12 +13,13 @@ exports.invokeByRegisterEvent = function(script, layerName, componentName) { } return `\n - { + if (globalThis.initEmitter == null) { const {initEmitter} = require('core/component/event'); - initEmitter.once('registerComponent.${layerName}.${componentName}', () => { - console.log('registerComponent.${layerName}.${componentName}'); - ${script} - }); - }\n + globalThis.initEmitter = initEmitter; + } + globalThis.initEmitter.once('registerComponent.${layerName}.${componentName}', () => { + console.log('invoked from handler', 'registerComponent.${layerName}.${componentName}'); + ${script} + });\n `; } \ No newline at end of file diff --git a/build/monic/attach-component-dependencies.js b/build/monic/attach-component-dependencies.js index 223cbddb1c..a9791371e4 100644 --- a/build/monic/attach-component-dependencies.js +++ b/build/monic/attach-component-dependencies.js @@ -61,7 +61,7 @@ module.exports = async function attachComponentDependencies(str, filePath) { await $C([...deps].reverse()).async.forEach(forEach); - return invokeByRegisterEvent(imports, getLayerName(filePath), component.name) + str; + return imports + str; async function forEach(dep) { if (dep.startsWith('g-')) { diff --git a/src/core/component/decorators/component/index.ts b/src/core/component/decorators/component/index.ts index 291e239ad9..fb01c130a9 100644 --- a/src/core/component/decorators/component/index.ts +++ b/src/core/component/decorators/component/index.ts @@ -120,10 +120,10 @@ export function component(opts?: ComponentOptions): Function { !Object.isTruly(componentFullName); if (needRegisterImmediate) { - registerComponent(componentFullName); + registerComponent(componentFullName, componentInfo.layer); } else { - requestIdleCallback(registerComponent.bind(null, componentFullName)); + requestIdleCallback(registerComponent.bind(null, componentFullName, componentInfo.layer)); } // If we have a smart component, diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index fe84218435..1b6ffa5da3 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -41,6 +41,7 @@ export function registerParentComponents(component: ComponentConstructorInfo): b if (parentComponent) { const p = componentParams.get(parentComponent); + initEmitter.emit('parent', `registerComponent.${p?.layer}.${parentName}`); parentName = p?.name; } } @@ -76,17 +77,14 @@ export function registerComponent(name: CanUndef, layer?: string): CanNu return null; } -<<<<<<< HEAD const component = components.get(name); let componentName = (component?.componentName || name).replaceAll('-functional', ''); + console.log('EMITT:', `registerComponent.${component?.layer || layer}.${componentName}`); initEmitter.emit(`registerComponent.${component?.layer || layer}.${componentName}`); const regComponent = componentRegInitializers[name]; -======= - const regComponent = componentRegInitializers[name]; ->>>>>>> 90b6fe5867f089d0a8e10967bc1eac085f961718 if (regComponent != null) { regComponent.forEach((reg) => reg()); From d25d62ee9ed181d238eeb0d38b83372d9bdeaa6c Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Mon, 7 Oct 2024 22:37:13 +0300 Subject: [PATCH 18/52] updated loader dynamic-component-import --- build/graph/graph.js | 10 +- build/helpers/invoke-by-register-component.js | 17 +- build/monic/attach-component-dependencies.js | 5 +- build/monic/dynamic-component-import.js | 37 ++- build/monic/lazy-component-import.js | 41 ++++ fat-html.components-lock.json | 226 +++++++++++++++++- 6 files changed, 287 insertions(+), 49 deletions(-) create mode 100644 build/monic/lazy-component-import.js diff --git a/build/graph/graph.js b/build/graph/graph.js index 3c4b07b6a5..dfb218599e 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -224,7 +224,7 @@ async function buildProjectGraph() { if (!usedLibs.has(el)) { usedLibs.add(el); - str += `require('${el}');\n`; + str += invokeByRegisterEvent(`require('${el}');\n`, getLayerName(logic), component.name); } }); } @@ -233,10 +233,6 @@ async function buildProjectGraph() { logic : /^$|^\.(?:js|ts)(?:\?|$)/.test(path.extname(name)); - const isComponentPath = (path) => - new RegExp(`\\/(${validators.blockTypeList.join('|')})-.+?\\/?`) - .test(path); - if (needRequireAsLogic) { let entry; @@ -261,9 +257,7 @@ async function buildProjectGraph() { importScript = `require('${entryPath}');\n`; } - str += "/** GRAP CO */" + !isComponentPath(entryPath) ? - importScript : - invokeByRegisterEvent(importScript, getLayerName(component?.logic), name); + str += importScript; } return str; diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index ac8fdc6ae5..f782dbc925 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -13,13 +13,14 @@ exports.invokeByRegisterEvent = function(script, layerName, componentName) { } return `\n - if (globalThis.initEmitter == null) { - const {initEmitter} = require('core/component/event'); - globalThis.initEmitter = initEmitter; - } - globalThis.initEmitter.once('registerComponent.${layerName}.${componentName}', () => { - console.log('invoked from handler', 'registerComponent.${layerName}.${componentName}'); - ${script} - });\n + if (globalThis.initEmitter == null) { + const {initEmitter} = require('core/component/event'); + globalThis.initEmitter = initEmitter; + } + globalThis.initEmitter.once('registerComponent.${layerName}.${componentName}', () => { + console.log('invoked from handler', 'registerComponent.${layerName}.${componentName}'); + ${script} + }); + \n `; } \ No newline at end of file diff --git a/build/monic/attach-component-dependencies.js b/build/monic/attach-component-dependencies.js index a9791371e4..ae4da8530c 100644 --- a/build/monic/attach-component-dependencies.js +++ b/build/monic/attach-component-dependencies.js @@ -14,8 +14,7 @@ const const path = require('upath'), - graph = include('build/graph'), - {invokeByRegisterEvent, getLayerName} = include('build/helpers'); + graph = include('build/graph'); const decls = Object.create(null); @@ -138,7 +137,7 @@ module.exports = async function attachComponentDependencies(str, filePath) { expr = `require('${src}');` } - decl += `try { ${invokeByRegisterEvent(expr, getLayerName(filePath), component.name)} } catch (err) { stderr(err); }`; + decl += `try { ${expr} } catch (err) { stderr(err); }`; } } catch {} diff --git a/build/monic/dynamic-component-import.js b/build/monic/dynamic-component-import.js index 5865e23940..bb9648e1f1 100644 --- a/build/monic/dynamic-component-import.js +++ b/build/monic/dynamic-component-import.js @@ -12,9 +12,13 @@ const {typescript, webpack, webpack: {ssr}} = require('@config/config'), {commentModuleExpr: commentExpr} = include('build/const'); +const { + invokeByRegisterEvent, + getLayerName +} = include('build/helpers'); + const - graph = include('build/graph'), - {invokeByRegisterEvent, getLayerName} = include('build/helpers'); + graph = include('build/graph'); const importRgxp = new RegExp( `\\bimport${commentExpr}\\((${commentExpr})(["'])((?:.*?[\\\\/]|)([bp]-[^.\\\\/"')]+)+)\\2${commentExpr}\\)`, @@ -63,16 +67,11 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { } else { if (isESImport) { - // decl = `import(${magicComments} '${fullPath}')`; - decl = `new Promise((resolve) => { - ${invokeByRegisterEvent(`resolve(import(${magicComments} '${fullPath}'))`, getLayerName(filePath), resourceName)} - })`; + const importExpr = `import(${magicComments} '${fullPath}')`; + decl = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getLayerName(filePath), resourceName)}})`; } else { - // decl = `new Promise(function (r) { return r(require('${fullPath}')); })`; // сделать резолв внутри обработчика!!!!!!! - decl = `new Promise((resolve) => { - ${invokeByRegisterEvent(`resolve(require('${fullPath}'))`, getLayerName(filePath), resourceName)} - })`; + decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${fullPath}'));`, getLayerName(filePath), resourceName)} })`; // сделать резолв внутри обработчика!!!!!!! } decl += '.catch(function (err) { stderr(err) })'; @@ -84,20 +83,23 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { { const tplPath = `${fullPath}.ss`, - regTpl = `function (module) { ${invokeByRegisterEvent(`TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}'];`, getLayerName(filePath), resourceName)} return module; }`; + regTpl = `function (module) { TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}']; return module; }`; let decl; if (ssr) { - decl = `(${regTpl})(require('${tplPath}'))`; + decl = invokeByRegisterEvent(`(${regTpl})(require('${tplPath}'))`, getLayerName(filePath), resourceName); } else { if (isESImport) { - decl = `import(${magicComments} '${tplPath}').then(${regTpl})`; + const + importExpr = `import(${magicComments} '${tplPath}')`, + promise = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getLayerName(filePath), resourceName)}})`; + decl = `${promise}.then(${regTpl})`; } else { - decl = `new Promise(function (r) { return r(require('${tplPath}')); }).then(${regTpl})`; + decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${tplPath}'));`, getLayerName(filePath), resourceName)} }).then(${regTpl})`; } decl += '.catch(function (err) { stderr(err) })'; @@ -117,15 +119,9 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { if (ssr || isESImport) { decl = `import(${magicComments} '${stylPath}')`; - // decl = `new Promise((resolve) => { - // ${invokeByRegisterEvent(`resolve(import(${magicComments} '${stylPath}'))`, resourceName)} - // })`; } else { decl = `new Promise(function (r) { return r(require('${stylPath}')); })`; - // decl = `new Promise((resolve) => { - // ${invokeByRegisterEvent(`resolve(require('${stylPath}'))`, resourceName)} - // })`; } if (ssr) { @@ -140,7 +136,6 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { imports[0] = `TPLS['${resourceName}'] ? ${(imports[0])} : ${imports[0]}.then(${decl}, function (err) { stderr(err); return ${decl}(); })`; } - // return invokeByRegisterEvent(`Promise.all([${imports.join(',')}])`, resourceName); //вызывает синтакс. ошибки, некоторые результаты импортов присваиваются переменным :( return `Promise.all([${imports.join(',')}])`; }); }; diff --git a/build/monic/lazy-component-import.js b/build/monic/lazy-component-import.js new file mode 100644 index 0000000000..aee0082402 --- /dev/null +++ b/build/monic/lazy-component-import.js @@ -0,0 +1,41 @@ +/*! + * V4Fire Client Core + * https://github.com/V4Fire/Client + * + * Released under the MIT license + * https://github.com/V4Fire/Client/blob/master/LICENSE + */ + +'use strict'; + +const {validators} = require('@pzlr/build-core'); +const { + invokeByRegisterEvent, + getLayerName +} = include('build/helpers'); + +const + {commentModuleExpr: commentExpr} = include('build/const'); + +const importRgxp = new RegExp( + `\\bimport${commentExpr}\\((${commentExpr})(["'])((?:.*?[\\\\/]|)([bp]-[^.\\\\/"')]+)+)\\2${commentExpr}\\)`, + 'g' +); + +module.exports = async function lazyComponentImport(str, filePath) { + const + isComponentPath = new RegExp(`\\/(${validators.blockTypeList.join('|')})-.+?\\/?`).test(filePath); + + // if (!isComponentPath) { + // return str; + // } + + // console.log(str); + + return str.replace(importRgxp, (str, magicComments, q, resourcePath, resourceName) => { + // console.log(resourcePath); + + return str; + // return invokeByRegisterEvent(str, getLayerName(filePath), resourceName); + }); +} \ No newline at end of file diff --git a/fat-html.components-lock.json b/fat-html.components-lock.json index a719f7695d..e779cb4219 100644 --- a/fat-html.components-lock.json +++ b/fat-html.components-lock.json @@ -1,5 +1,5 @@ { - "hash": "0e8352ab4d111e324b5806d9e1bd95a6d2ba75751c29d181edb549a58ef79d98", + "hash": "848188ca4409395693c58ff85ada48b70cb4709ad07a56f9cbc9f191c8586a10", "data": { "%data": "%data:Map", "%data:Map": [ @@ -150,16 +150,16 @@ } ], [ - "b-component-directives-emitter-dummy", + "b-component-directives-attrs-dummy", { - "index": "src/core/component/directives/attrs/test/b-component-directives-emitter-dummy/index.js", + "index": "src/core/component/directives/attrs/test/b-component-directives-attrs-dummy/index.js", "declaration": { - "name": "b-component-directives-emitter-dummy", + "name": "b-component-directives-attrs-dummy", "parent": "i-block", "dependencies": [], "libs": [] }, - "name": "b-component-directives-emitter-dummy", + "name": "b-component-directives-attrs-dummy", "parent": "i-block", "dependencies": [], "libs": [], @@ -173,11 +173,11 @@ }, "type": "block", "mixin": false, - "logic": "src/core/component/directives/attrs/test/b-component-directives-emitter-dummy/b-component-directives-emitter-dummy.ts", + "logic": "src/core/component/directives/attrs/test/b-component-directives-attrs-dummy/b-component-directives-attrs-dummy.ts", "styles": [ - "src/core/component/directives/attrs/test/b-component-directives-emitter-dummy/b-component-directives-emitter-dummy.styl" + "src/core/component/directives/attrs/test/b-component-directives-attrs-dummy/b-component-directives-attrs-dummy.styl" ], - "tpl": "src/core/component/directives/attrs/test/b-component-directives-emitter-dummy/b-component-directives-emitter-dummy.ss", + "tpl": "src/core/component/directives/attrs/test/b-component-directives-attrs-dummy/b-component-directives-attrs-dummy.ss", "etpl": null } ], @@ -341,6 +341,76 @@ "etpl": null } ], + [ + "b-effect-prop-dummy", + { + "index": "src/core/component/decorators/prop/test/b-effect-prop-dummy/index.js", + "declaration": { + "name": "b-effect-prop-dummy", + "parent": "b-dummy", + "dependencies": [], + "libs": [] + }, + "name": "b-effect-prop-dummy", + "parent": "b-dummy", + "dependencies": [], + "libs": [], + "resolvedLibs": { + "%data": "%data:Set", + "%data:Set": [] + }, + "resolvedOwnLibs": { + "%data": "%data:Set", + "%data:Set": [] + }, + "type": "block", + "mixin": false, + "logic": "src/core/component/decorators/prop/test/b-effect-prop-dummy/b-effect-prop-dummy.ts", + "styles": [ + "src/core/component/decorators/prop/test/b-effect-prop-dummy/b-effect-prop-dummy.styl" + ], + "tpl": "src/core/component/decorators/prop/test/b-effect-prop-dummy/b-effect-prop-dummy.ss", + "etpl": null + } + ], + [ + "b-effect-prop-wrapper-dummy", + { + "index": "src/core/component/decorators/prop/test/b-effect-prop-wrapper-dummy/index.js", + "declaration": { + "name": "b-effect-prop-wrapper-dummy", + "parent": "b-dummy", + "dependencies": [ + "b-effect-prop-dummy", + "b-non-effect-prop-dummy" + ], + "libs": [] + }, + "name": "b-effect-prop-wrapper-dummy", + "parent": "b-dummy", + "dependencies": [ + "b-effect-prop-dummy", + "b-non-effect-prop-dummy" + ], + "libs": [], + "resolvedLibs": { + "%data": "%data:Set", + "%data:Set": [] + }, + "resolvedOwnLibs": { + "%data": "%data:Set", + "%data:Set": [] + }, + "type": "block", + "mixin": false, + "logic": "src/core/component/decorators/prop/test/b-effect-prop-wrapper-dummy/b-effect-prop-wrapper-dummy.ts", + "styles": [ + "src/core/component/decorators/prop/test/b-effect-prop-wrapper-dummy/b-effect-prop-wrapper-dummy.styl" + ], + "tpl": "src/core/component/decorators/prop/test/b-effect-prop-wrapper-dummy/b-effect-prop-wrapper-dummy.ss", + "etpl": null + } + ], [ "b-form", { @@ -1013,6 +1083,38 @@ "etpl": null } ], + [ + "b-non-effect-prop-dummy", + { + "index": "src/core/component/decorators/prop/test/b-non-effect-prop-dummy/index.js", + "declaration": { + "name": "b-non-effect-prop-dummy", + "parent": "b-dummy", + "dependencies": [], + "libs": [] + }, + "name": "b-non-effect-prop-dummy", + "parent": "b-dummy", + "dependencies": [], + "libs": [], + "resolvedLibs": { + "%data": "%data:Set", + "%data:Set": [] + }, + "resolvedOwnLibs": { + "%data": "%data:Set", + "%data:Set": [] + }, + "type": "block", + "mixin": false, + "logic": "src/core/component/decorators/prop/test/b-non-effect-prop-dummy/b-non-effect-prop-dummy.ts", + "styles": [ + "src/core/component/decorators/prop/test/b-non-effect-prop-dummy/b-non-effect-prop-dummy.styl" + ], + "tpl": "src/core/component/decorators/prop/test/b-non-effect-prop-dummy/b-non-effect-prop-dummy.ss", + "etpl": null + } + ], [ "b-prevent-ssr", { @@ -1387,6 +1489,44 @@ "etpl": null } ], + [ + "b-super-i-block-deactivation-dummy", + { + "index": "src/components/super/i-block/test/b-super-i-block-deactivation-dummy/index.js", + "declaration": { + "name": "b-super-i-block-deactivation-dummy", + "parent": "i-block", + "dependencies": [ + "b-button", + "b-bottom-slide" + ], + "libs": [] + }, + "name": "b-super-i-block-deactivation-dummy", + "parent": "i-block", + "dependencies": [ + "b-button", + "b-bottom-slide" + ], + "libs": [], + "resolvedLibs": { + "%data": "%data:Set", + "%data:Set": [] + }, + "resolvedOwnLibs": { + "%data": "%data:Set", + "%data:Set": [] + }, + "type": "block", + "mixin": false, + "logic": "src/components/super/i-block/test/b-super-i-block-deactivation-dummy/b-super-i-block-deactivation-dummy.ts", + "styles": [ + "src/components/super/i-block/test/b-super-i-block-deactivation-dummy/b-super-i-block-deactivation-dummy.styl" + ], + "tpl": "src/components/super/i-block/test/b-super-i-block-deactivation-dummy/b-super-i-block-deactivation-dummy.ss", + "etpl": null + } + ], [ "b-super-i-block-decorators-dummy", { @@ -1515,6 +1655,74 @@ "etpl": null } ], + [ + "b-super-i-block-mods-dummy", + { + "index": "src/components/super/i-block/test/b-super-i-block-mods-dummy/index.js", + "declaration": { + "name": "b-super-i-block-mods-dummy", + "parent": "b-dummy", + "dependencies": [], + "libs": [] + }, + "name": "b-super-i-block-mods-dummy", + "parent": "b-dummy", + "dependencies": [], + "libs": [], + "resolvedLibs": { + "%data": "%data:Set", + "%data:Set": [] + }, + "resolvedOwnLibs": { + "%data": "%data:Set", + "%data:Set": [] + }, + "type": "block", + "mixin": false, + "logic": "src/components/super/i-block/test/b-super-i-block-mods-dummy/b-super-i-block-mods-dummy.ts", + "styles": [ + "src/components/super/i-block/test/b-super-i-block-mods-dummy/b-super-i-block-mods-dummy.styl" + ], + "tpl": "src/components/super/i-block/test/b-super-i-block-mods-dummy/b-super-i-block-mods-dummy.ss", + "etpl": null + } + ], + [ + "b-super-i-block-teleport-dummy", + { + "index": "src/components/super/i-block/test/b-super-i-block-teleport-dummy/index.js", + "declaration": { + "name": "b-super-i-block-teleport-dummy", + "parent": "i-block", + "dependencies": [ + "b-bottom-slide" + ], + "libs": [] + }, + "name": "b-super-i-block-teleport-dummy", + "parent": "i-block", + "dependencies": [ + "b-bottom-slide" + ], + "libs": [], + "resolvedLibs": { + "%data": "%data:Set", + "%data:Set": [] + }, + "resolvedOwnLibs": { + "%data": "%data:Set", + "%data:Set": [] + }, + "type": "block", + "mixin": false, + "logic": "src/components/super/i-block/test/b-super-i-block-teleport-dummy/b-super-i-block-teleport-dummy.ts", + "styles": [ + "src/components/super/i-block/test/b-super-i-block-teleport-dummy/b-super-i-block-teleport-dummy.styl" + ], + "tpl": "src/components/super/i-block/test/b-super-i-block-teleport-dummy/b-super-i-block-teleport-dummy.ss", + "etpl": null + } + ], [ "b-super-i-block-watch-dummy", { @@ -1907,7 +2115,7 @@ }, "type": "global", "mixin": false, - "logic": null, + "logic": "src/components/global/g-hint/g-hint.ts", "styles": [ "src/components/global/g-hint/g-hint.styl" ], From 9f2db30940faaab867bf5a1625393f2a313be8d1 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Tue, 8 Oct 2024 18:09:36 +0300 Subject: [PATCH 19/52] applied refactor fixes --- build/graph/graph.js | 13 ++++++++++--- build/monic/attach-component-dependencies.js | 6 ++++-- build/monic/dynamic-component-import.js | 16 ++++++++-------- .../p-v4-components-demo/p-v4-components-demo.ss | 2 -- src/core/component/init/component.ts | 5 ++--- src/core/init/create-app.ts | 3 --- 6 files changed, 24 insertions(+), 21 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index dfb218599e..677a7d6385 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -42,7 +42,7 @@ const { isStandalone, tracer, invokeByRegisterEvent, - getLayerName + getOriginLayerFromPath } = include('build/helpers'); /** @@ -224,7 +224,7 @@ async function buildProjectGraph() { if (!usedLibs.has(el)) { usedLibs.add(el); - str += invokeByRegisterEvent(`require('${el}');\n`, getLayerName(logic), component.name); + str += invokeByRegisterEvent(`require('${el}');\n`, getOriginLayerFromPath(component.index), name); } }); } @@ -249,6 +249,11 @@ async function buildProjectGraph() { const entryPath = getEntryPath(entry); let importScript; + + const + componentName = component?.name ?? name, + isComponent = new RegExp(`\(${validators.blockTypeList.join('|')})-.+?/?`).test(componentName); + if (webpack.ssr) { importScript = `Object.assign(module.exports, require('${entryPath}'));\n`; @@ -257,7 +262,9 @@ async function buildProjectGraph() { importScript = `require('${entryPath}');\n`; } - str += importScript; + str += isComponent ? + invokeByRegisterEvent(importScript, getOriginLayerFromPath(entry), componentName) : + importScript; } return str; diff --git a/build/monic/attach-component-dependencies.js b/build/monic/attach-component-dependencies.js index ae4da8530c..fa580e70b4 100644 --- a/build/monic/attach-component-dependencies.js +++ b/build/monic/attach-component-dependencies.js @@ -14,7 +14,9 @@ const const path = require('upath'), - graph = include('build/graph'); + graph = include('build/graph'), + { invokeByRegisterEvent, getOriginLayerFromPath } = include('build/helpers'); + const decls = Object.create(null); @@ -137,7 +139,7 @@ module.exports = async function attachComponentDependencies(str, filePath) { expr = `require('${src}');` } - decl += `try { ${expr} } catch (err) { stderr(err); }`; + decl += `try { ${invokeByRegisterEvent(expr, getOriginLayerFromPath(filePath), dep)} } catch (err) { stderr(err); }`; } } catch {} diff --git a/build/monic/dynamic-component-import.js b/build/monic/dynamic-component-import.js index bb9648e1f1..8b4335fe35 100644 --- a/build/monic/dynamic-component-import.js +++ b/build/monic/dynamic-component-import.js @@ -14,7 +14,7 @@ const const { invokeByRegisterEvent, - getLayerName + getOriginLayerFromPath } = include('build/helpers'); const @@ -63,15 +63,15 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { decl; if (ssr) { - decl = `require('${fullPath}')`; + decl = invokeByRegisterEvent(`require('${fullPath}')`, getOriginLayerFromPath(filePath), resourceName); } else { if (isESImport) { const importExpr = `import(${magicComments} '${fullPath}')`; - decl = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getLayerName(filePath), resourceName)}})`; + decl = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getOriginLayerFromPath(filePath), resourceName)}})`; } else { - decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${fullPath}'));`, getLayerName(filePath), resourceName)} })`; // сделать резолв внутри обработчика!!!!!!! + decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${fullPath}'));`, getOriginLayerFromPath(filePath), resourceName)} })`; } decl += '.catch(function (err) { stderr(err) })'; @@ -83,23 +83,23 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { { const tplPath = `${fullPath}.ss`, - regTpl = `function (module) { TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}']; return module; }`; + regTpl = `function (module) { ${invokeByRegisterEvent(`TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}'];`, getOriginLayerFromPath(filePath), resourceName)} return module; }`; let decl; if (ssr) { - decl = invokeByRegisterEvent(`(${regTpl})(require('${tplPath}'))`, getLayerName(filePath), resourceName); + decl = invokeByRegisterEvent(`(${regTpl})(require('${tplPath}'))`, getOriginLayerFromPath(filePath), resourceName); } else { if (isESImport) { const importExpr = `import(${magicComments} '${tplPath}')`, - promise = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getLayerName(filePath), resourceName)}})`; + promise = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getOriginLayerFromPath(filePath), resourceName)}})`; decl = `${promise}.then(${regTpl})`; } else { - decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${tplPath}'));`, getLayerName(filePath), resourceName)} }).then(${regTpl})`; + decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${tplPath}'));`, getOriginLayerFromPath(filePath), resourceName)} }).then(${regTpl})`; } decl += '.catch(function (err) { stderr(err) })'; diff --git a/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss b/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss index 18c3e29d96..bbac322bfa 100644 --- a/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss +++ b/src/components/pages/p-v4-components-demo/p-v4-components-demo.ss @@ -12,7 +12,5 @@ - template index() extends ['i-static-page.component'].index - block body - < b-button - btn < template v-if = stage === 'teleports' < b-bottom-slide diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index 1b6ffa5da3..4994ed44b7 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -41,7 +41,7 @@ export function registerParentComponents(component: ComponentConstructorInfo): b if (parentComponent) { const p = componentParams.get(parentComponent); - initEmitter.emit('parent', `registerComponent.${p?.layer}.${parentName}`); + initEmitter.emit(`registerComponent.${p?.layer}.${parentName}`); parentName = p?.name; } } @@ -80,8 +80,7 @@ export function registerComponent(name: CanUndef, layer?: string): CanNu const component = components.get(name); let componentName = (component?.componentName || name).replaceAll('-functional', ''); - console.log('EMITT:', `registerComponent.${component?.layer || layer}.${componentName}`); - initEmitter.emit(`registerComponent.${component?.layer || layer}.${componentName}`); + initEmitter.emit(`registerComponent.${layer}.${componentName}`); const regComponent = componentRegInitializers[name]; diff --git a/src/core/init/create-app.ts b/src/core/init/create-app.ts index b88ff81a9d..959b6db591 100644 --- a/src/core/init/create-app.ts +++ b/src/core/init/create-app.ts @@ -37,9 +37,6 @@ export async function createApp( state: State, layer?: string ): Promise { - console.log({ - layer - }) initEmitter.emit(`registerComponent.${layer}.${rootComponentName}`); const rootComponentParams = await getRootComponentParams(rootComponentName); From d1a0df18e9f228b44f3f2dd204794dcf3c2b306a Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 16 Oct 2024 18:15:56 +0300 Subject: [PATCH 20/52] used getLayerName instead getOriginLayerFromPath --- build/graph/graph.js | 10 ++++----- build/monic/dynamic-component-import.js | 27 ++++++++++++++++--------- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index 677a7d6385..fa51ffa931 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -42,7 +42,7 @@ const { isStandalone, tracer, invokeByRegisterEvent, - getOriginLayerFromPath + getLayerName } = include('build/helpers'); /** @@ -224,7 +224,7 @@ async function buildProjectGraph() { if (!usedLibs.has(el)) { usedLibs.add(el); - str += invokeByRegisterEvent(`require('${el}');\n`, getOriginLayerFromPath(component.index), name); + str += `require('${el}');\n`; } }); } @@ -252,7 +252,7 @@ async function buildProjectGraph() { const componentName = component?.name ?? name, - isComponent = new RegExp(`\(${validators.blockTypeList.join('|')})-.+?/?`).test(componentName); + isPageComponent = new RegExp(`\(p)-.+?/?`).test(componentName); if (webpack.ssr) { @@ -262,8 +262,8 @@ async function buildProjectGraph() { importScript = `require('${entryPath}');\n`; } - str += isComponent ? - invokeByRegisterEvent(importScript, getOriginLayerFromPath(entry), componentName) : + str += isPageComponent ? + invokeByRegisterEvent(importScript, getLayerName(entry), componentName) : importScript; } diff --git a/build/monic/dynamic-component-import.js b/build/monic/dynamic-component-import.js index 8b4335fe35..004ba4c92e 100644 --- a/build/monic/dynamic-component-import.js +++ b/build/monic/dynamic-component-import.js @@ -14,7 +14,7 @@ const const { invokeByRegisterEvent, - getOriginLayerFromPath + getLayerName } = include('build/helpers'); const @@ -30,6 +30,8 @@ const isESImport = !ssr && typescript().client.compilerOptions.module === 'ES2020', fatHTML = webpack.fatHTML(); +const path = require('upath'); + /** * A Monic replacer is used to enable dynamic imports of components * @@ -44,7 +46,14 @@ const * ``` */ module.exports = async function dynamicComponentImportReplacer(str, filePath) { - const { entryDeps } = await graph; + const { + entryDeps, + components + } = await graph; + + const + ext = path.extname(filePath), + component = return str.replace(importRgxp, (str, magicComments, q, resourcePath, resourceName) => { const @@ -63,15 +72,15 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { decl; if (ssr) { - decl = invokeByRegisterEvent(`require('${fullPath}')`, getOriginLayerFromPath(filePath), resourceName); + decl = invokeByRegisterEvent(`require('${fullPath}')`, getLayerName(filePath), resourceName); } else { if (isESImport) { const importExpr = `import(${magicComments} '${fullPath}')`; - decl = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getOriginLayerFromPath(filePath), resourceName)}})`; + decl = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getLayerName(filePath), resourceName)}})`; } else { - decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${fullPath}'));`, getOriginLayerFromPath(filePath), resourceName)} })`; + decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${fullPath}'));`, getLayerName(filePath), resourceName)} })`; } decl += '.catch(function (err) { stderr(err) })'; @@ -83,23 +92,23 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { { const tplPath = `${fullPath}.ss`, - regTpl = `function (module) { ${invokeByRegisterEvent(`TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}'];`, getOriginLayerFromPath(filePath), resourceName)} return module; }`; + regTpl = `function (module) { ${invokeByRegisterEvent(`TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}'];`, getLayerName(filePath), resourceName)} return module; }`; let decl; if (ssr) { - decl = invokeByRegisterEvent(`(${regTpl})(require('${tplPath}'))`, getOriginLayerFromPath(filePath), resourceName); + decl = invokeByRegisterEvent(`(${regTpl})(require('${tplPath}'))`, getLayerName(filePath), resourceName); } else { if (isESImport) { const importExpr = `import(${magicComments} '${tplPath}')`, - promise = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getOriginLayerFromPath(filePath), resourceName)}})`; + promise = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getLayerName(filePath), resourceName)}})`; decl = `${promise}.then(${regTpl})`; } else { - decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${tplPath}'));`, getOriginLayerFromPath(filePath), resourceName)} }).then(${regTpl})`; + decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${tplPath}'));`, getLayerName(filePath), resourceName)} }).then(${regTpl})`; } decl += '.catch(function (err) { stderr(err) })'; From 4cd14f1cca973228f7bc5ab6e67db1824dd1a433 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 16 Oct 2024 18:21:42 +0300 Subject: [PATCH 21/52] fixed syntax error --- build/monic/dynamic-component-import.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/build/monic/dynamic-component-import.js b/build/monic/dynamic-component-import.js index 004ba4c92e..2b41047f9f 100644 --- a/build/monic/dynamic-component-import.js +++ b/build/monic/dynamic-component-import.js @@ -53,7 +53,7 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { const ext = path.extname(filePath), - component = + component = components.get(path.basename(filePath, ext)); return str.replace(importRgxp, (str, magicComments, q, resourcePath, resourceName) => { const @@ -72,15 +72,15 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { decl; if (ssr) { - decl = invokeByRegisterEvent(`require('${fullPath}')`, getLayerName(filePath), resourceName); + decl = invokeByRegisterEvent(`require('${fullPath}')`, getLayerName(filePath), component?.name); } else { if (isESImport) { const importExpr = `import(${magicComments} '${fullPath}')`; - decl = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getLayerName(filePath), resourceName)}})`; + decl = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getLayerName(filePath), component?.name)}})`; } else { - decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${fullPath}'));`, getLayerName(filePath), resourceName)} })`; + decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${fullPath}'));`, getLayerName(filePath), component?.name)} })`; } decl += '.catch(function (err) { stderr(err) })'; @@ -92,7 +92,7 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { { const tplPath = `${fullPath}.ss`, - regTpl = `function (module) { ${invokeByRegisterEvent(`TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}'];`, getLayerName(filePath), resourceName)} return module; }`; + regTpl = `function (module) { ${invokeByRegisterEvent(`TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}'];`, getLayerName(filePath), component?.name)} return module; }`; let decl; @@ -104,11 +104,11 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { if (isESImport) { const importExpr = `import(${magicComments} '${tplPath}')`, - promise = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getLayerName(filePath), resourceName)}})`; + promise = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getLayerName(filePath), component?.name)}})`; decl = `${promise}.then(${regTpl})`; } else { - decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${tplPath}'));`, getLayerName(filePath), resourceName)} }).then(${regTpl})`; + decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${tplPath}'));`, getLayerName(filePath), component?.name)} }).then(${regTpl})`; } decl += '.catch(function (err) { stderr(err) })'; From ac8ee23d3ab0e23a29fe2ea597a5dad500ab7eb4 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Thu, 17 Oct 2024 16:09:25 +0300 Subject: [PATCH 22/52] removed import by event from dynamic-component-import --- build/graph/graph.js | 4 ++-- build/helpers/invoke-by-register-component.js | 3 +-- build/monic/attach-component-dependencies.js | 4 ++-- build/monic/dynamic-component-import.js | 19 +++++++------------ package.json | 2 +- .../modules/factory/index.ts | 2 +- .../component/decorators/component/index.ts | 4 ++-- src/core/component/init/component.ts | 15 +++++++++++++-- 8 files changed, 29 insertions(+), 24 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index fa51ffa931..c397285ca0 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -252,7 +252,7 @@ async function buildProjectGraph() { const componentName = component?.name ?? name, - isPageComponent = new RegExp(`\(p)-.+?/?`).test(componentName); + isComponent = new RegExp(`\(${validators.blockTypeList.join('|')})-.+?/?`).test(componentName); if (webpack.ssr) { @@ -262,7 +262,7 @@ async function buildProjectGraph() { importScript = `require('${entryPath}');\n`; } - str += isPageComponent ? + str += isComponent ? invokeByRegisterEvent(importScript, getLayerName(entry), componentName) : importScript; } diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index f782dbc925..16e3f61c7f 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -8,7 +8,7 @@ * @returns {String} */ exports.invokeByRegisterEvent = function(script, layerName, componentName) { - if (script?.trim()?.length == 0) { + if (script?.trim()?.length == 0 || layerName == null || componentName == null) { return script; } @@ -18,7 +18,6 @@ exports.invokeByRegisterEvent = function(script, layerName, componentName) { globalThis.initEmitter = initEmitter; } globalThis.initEmitter.once('registerComponent.${layerName}.${componentName}', () => { - console.log('invoked from handler', 'registerComponent.${layerName}.${componentName}'); ${script} }); \n diff --git a/build/monic/attach-component-dependencies.js b/build/monic/attach-component-dependencies.js index fa580e70b4..d760fe5560 100644 --- a/build/monic/attach-component-dependencies.js +++ b/build/monic/attach-component-dependencies.js @@ -15,7 +15,7 @@ const const path = require('upath'), graph = include('build/graph'), - { invokeByRegisterEvent, getOriginLayerFromPath } = include('build/helpers'); + { invokeByRegisterEvent, getLayerName } = include('build/helpers'); const @@ -139,7 +139,7 @@ module.exports = async function attachComponentDependencies(str, filePath) { expr = `require('${src}');` } - decl += `try { ${invokeByRegisterEvent(expr, getOriginLayerFromPath(filePath), dep)} } catch (err) { stderr(err); }`; + decl += `try { ${invokeByRegisterEvent(expr, getLayerName(filePath), dep)} } catch (err) { stderr(err); }`; } } catch {} diff --git a/build/monic/dynamic-component-import.js b/build/monic/dynamic-component-import.js index 2b41047f9f..4e085a7cd6 100644 --- a/build/monic/dynamic-component-import.js +++ b/build/monic/dynamic-component-import.js @@ -12,11 +12,6 @@ const {typescript, webpack, webpack: {ssr}} = require('@config/config'), {commentModuleExpr: commentExpr} = include('build/const'); -const { - invokeByRegisterEvent, - getLayerName -} = include('build/helpers'); - const graph = include('build/graph'); @@ -72,15 +67,15 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { decl; if (ssr) { - decl = invokeByRegisterEvent(`require('${fullPath}')`, getLayerName(filePath), component?.name); + decl = `require('${fullPath}')`; } else { if (isESImport) { const importExpr = `import(${magicComments} '${fullPath}')`; - decl = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getLayerName(filePath), component?.name)}})`; + decl = `new Promise(function (r) {${importExpr}})`; } else { - decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${fullPath}'));`, getLayerName(filePath), component?.name)} })`; + decl = `new Promise(function (r) { r(require('${fullPath}')); })`; } decl += '.catch(function (err) { stderr(err) })'; @@ -92,23 +87,23 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { { const tplPath = `${fullPath}.ss`, - regTpl = `function (module) { ${invokeByRegisterEvent(`TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}'];`, getLayerName(filePath), component?.name)} return module; }`; + regTpl = `function (module) { TPLS['${resourceName}'] = module${isESImport ? '.default' : ''}['${resourceName}']; return module; }`; let decl; if (ssr) { - decl = invokeByRegisterEvent(`(${regTpl})(require('${tplPath}'))`, getLayerName(filePath), resourceName); + decl = `(${regTpl})(require('${tplPath}'))`; } else { if (isESImport) { const importExpr = `import(${magicComments} '${tplPath}')`, - promise = `new Promise(function (r) {${invokeByRegisterEvent(`r(${importExpr})`, getLayerName(filePath), component?.name)}})`; + promise = `new Promise(function (r) { r(${importExpr}) })`; decl = `${promise}.then(${regTpl})`; } else { - decl = `new Promise(function (r) { ${invokeByRegisterEvent(`r(require('${tplPath}'));`, getLayerName(filePath), component?.name)} }).then(${regTpl})`; + decl = `new Promise(function (r) { r(require('${tplPath}')); }).then(${regTpl})`; } decl += '.catch(function (err) { stderr(err) })'; diff --git a/package.json b/package.json index bd5edf27ad..8a317558ed 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "V4Fire" ], "scripts": { - "bbuild": "npx webpack --watch --env public-path=// progress=false", + "bbuild": "npx webpack --watch --env public-path=// --env progres=false", "sttart": "npx static ./dist/client", "build": "yarn build:tsconfig && webpack", "build:tsconfig": "node node_modules/@v4fire/core/build/build-tsconfig", diff --git a/src/components/base/b-virtual-scroll-new/modules/factory/index.ts b/src/components/base/b-virtual-scroll-new/modules/factory/index.ts index aeef0ac588..c185d86098 100644 --- a/src/components/base/b-virtual-scroll-new/modules/factory/index.ts +++ b/src/components/base/b-virtual-scroll-new/modules/factory/index.ts @@ -143,7 +143,7 @@ export class ComponentFactory extends Friend { */ protected normalizeComponentItemProps(componentName: string, props: Dictionary): Dictionary { const - meta = registerComponent(componentName, '@v4fire/client'); + meta = registerComponent(componentName); if (meta == null) { return props; diff --git a/src/core/component/decorators/component/index.ts b/src/core/component/decorators/component/index.ts index fb01c130a9..785bcd1038 100644 --- a/src/core/component/decorators/component/index.ts +++ b/src/core/component/decorators/component/index.ts @@ -120,10 +120,10 @@ export function component(opts?: ComponentOptions): Function { !Object.isTruly(componentFullName); if (needRegisterImmediate) { - registerComponent(componentFullName, componentInfo.layer); + registerComponent(componentFullName, componentParams.layer); } else { - requestIdleCallback(registerComponent.bind(null, componentFullName, componentInfo.layer)); + requestIdleCallback(registerComponent.bind(null, componentFullName, componentParams.layer)); } // If we have a smart component, diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index 4994ed44b7..d4b7d150c7 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -79,8 +79,19 @@ export function registerComponent(name: CanUndef, layer?: string): CanNu const component = components.get(name); - let componentName = (component?.componentName || name).replaceAll('-functional', ''); - initEmitter.emit(`registerComponent.${layer}.${componentName}`); + let + componentName = component?.componentName || name, + componentNormolizedName = componentName.match(/(?.*)-functional$/)?.groups?.name || componentName; + + + const event = `registerComponent.${layer}.${componentNormolizedName}`; + if (layer == null) { + initEmitter.emit(`registerComponent.@v4fire/client.${componentNormolizedName}`); + initEmitter.emit(`registerComponent.@edadeal/core.${componentNormolizedName}`); + initEmitter.emit(`registerComponent.@edadeal/cb.${componentNormolizedName}`); + } else { + initEmitter.emit(event); + } const regComponent = componentRegInitializers[name]; From c2fbe0e37ee1f0fbda0be099728d0a142b253450 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Sun, 20 Oct 2024 21:48:09 +0300 Subject: [PATCH 23/52] limit imports only for page components --- build/graph/graph.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index c397285ca0..fa51ffa931 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -252,7 +252,7 @@ async function buildProjectGraph() { const componentName = component?.name ?? name, - isComponent = new RegExp(`\(${validators.blockTypeList.join('|')})-.+?/?`).test(componentName); + isPageComponent = new RegExp(`\(p)-.+?/?`).test(componentName); if (webpack.ssr) { @@ -262,7 +262,7 @@ async function buildProjectGraph() { importScript = `require('${entryPath}');\n`; } - str += isComponent ? + str += isPageComponent ? invokeByRegisterEvent(importScript, getLayerName(entry), componentName) : importScript; } From 113411a70d0c91bbd4769c4bd2fa501fa1f1cde8 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 23 Oct 2024 16:16:02 +0300 Subject: [PATCH 24/52] applied fixes of build and undefined layers --- build/helpers/invoke-by-register-component.js | 22 ++++++---- build/monic/dynamic-component-import.js | 23 +++-------- build/monic/lazy-component-import.js | 41 ------------------- src/components/form/b-button/b-button.ts | 4 -- src/core/component/init/component.ts | 14 +++---- src/core/component/render/wrappers.ts | 6 +-- src/core/prelude/test-env/components/index.ts | 2 +- 7 files changed, 28 insertions(+), 84 deletions(-) delete mode 100644 build/monic/lazy-component-import.js diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index 16e3f61c7f..564ed0540a 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -8,18 +8,24 @@ * @returns {String} */ exports.invokeByRegisterEvent = function(script, layerName, componentName) { - if (script?.trim()?.length == 0 || layerName == null || componentName == null) { + if (script?.trim()?.length == 0) { return script; } return `\n - if (globalThis.initEmitter == null) { - const {initEmitter} = require('core/component/event'); - globalThis.initEmitter = initEmitter; - } - globalThis.initEmitter.once('registerComponent.${layerName}.${componentName}', () => { - ${script} - }); + if (globalThis.initEmitter == null) { + const {initEmitter} = require('core/component/event'); + globalThis.initEmitter = initEmitter; + } + if (globalThis.layersList == null) { + globalThis.layersList = new Set(); + } + if (!globalThis.layersList.has('${layerName}')) { + globalThis.layersList.add('${layerName}'); + } + globalThis.initEmitter.once('registerComponent.${layerName}.${componentName}', () => { + ${script} + }); \n `; } \ No newline at end of file diff --git a/build/monic/dynamic-component-import.js b/build/monic/dynamic-component-import.js index 4e085a7cd6..a095c19be5 100644 --- a/build/monic/dynamic-component-import.js +++ b/build/monic/dynamic-component-import.js @@ -25,8 +25,6 @@ const isESImport = !ssr && typescript().client.compilerOptions.module === 'ES2020', fatHTML = webpack.fatHTML(); -const path = require('upath'); - /** * A Monic replacer is used to enable dynamic imports of components * @@ -41,14 +39,7 @@ const path = require('upath'); * ``` */ module.exports = async function dynamicComponentImportReplacer(str, filePath) { - const { - entryDeps, - components - } = await graph; - - const - ext = path.extname(filePath), - component = components.get(path.basename(filePath, ext)); + const { entryDeps } = await graph; return str.replace(importRgxp, (str, magicComments, q, resourcePath, resourceName) => { const @@ -71,8 +62,7 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { } else { if (isESImport) { - const importExpr = `import(${magicComments} '${fullPath}')`; - decl = `new Promise(function (r) {${importExpr}})`; + decl = `import(${magicComments} '${fullPath}')`; } else { decl = `new Promise(function (r) { r(require('${fullPath}')); })`; @@ -97,13 +87,10 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { } else { if (isESImport) { - const - importExpr = `import(${magicComments} '${tplPath}')`, - promise = `new Promise(function (r) { r(${importExpr}) })`; - decl = `${promise}.then(${regTpl})`; + decl = `import(${magicComments} '${tplPath}').then(${regTpl})`; } else { - decl = `new Promise(function (r) { r(require('${tplPath}')); }).then(${regTpl})`; + decl = `new Promise(function (r) { return r(require('${tplPath}')); }).then(${regTpl})`; } decl += '.catch(function (err) { stderr(err) })'; @@ -137,7 +124,7 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { } decl = `function () { return ${decl}; }`; - imports[0] = `TPLS['${resourceName}'] ? ${(imports[0])} : ${imports[0]}.then(${decl}, function (err) { stderr(err); return ${decl}(); })`; + imports[0] = `TPLS['${resourceName}'] ? ${imports[0]} : ${imports[0]}.then(${decl}, function (err) { stderr(err); return ${decl}(); })`; } return `Promise.all([${imports.join(',')}])`; diff --git a/build/monic/lazy-component-import.js b/build/monic/lazy-component-import.js deleted file mode 100644 index aee0082402..0000000000 --- a/build/monic/lazy-component-import.js +++ /dev/null @@ -1,41 +0,0 @@ -/*! - * V4Fire Client Core - * https://github.com/V4Fire/Client - * - * Released under the MIT license - * https://github.com/V4Fire/Client/blob/master/LICENSE - */ - -'use strict'; - -const {validators} = require('@pzlr/build-core'); -const { - invokeByRegisterEvent, - getLayerName -} = include('build/helpers'); - -const - {commentModuleExpr: commentExpr} = include('build/const'); - -const importRgxp = new RegExp( - `\\bimport${commentExpr}\\((${commentExpr})(["'])((?:.*?[\\\\/]|)([bp]-[^.\\\\/"')]+)+)\\2${commentExpr}\\)`, - 'g' -); - -module.exports = async function lazyComponentImport(str, filePath) { - const - isComponentPath = new RegExp(`\\/(${validators.blockTypeList.join('|')})-.+?\\/?`).test(filePath); - - // if (!isComponentPath) { - // return str; - // } - - // console.log(str); - - return str.replace(importRgxp, (str, magicComments, q, resourcePath, resourceName) => { - // console.log(resourcePath); - - return str; - // return invokeByRegisterEvent(str, getLayerName(filePath), resourceName); - }); -} \ No newline at end of file diff --git a/src/components/form/b-button/b-button.ts b/src/components/form/b-button/b-button.ts index 1a0d6aa161..3773f437af 100644 --- a/src/components/form/b-button/b-button.ts +++ b/src/components/form/b-button/b-button.ts @@ -47,10 +47,6 @@ DataProvider.addToPrototype({getDefaultRequestParams, base, get}); interface bButton extends Trait, Trait {} -console.group(); -console.log('b-button invoked'); -console.groupEnd(); - @component({ functional: { wait: undefined, diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index d4b7d150c7..427d10eca6 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -23,15 +23,12 @@ import { initEmitter } from 'core/component/event'; * @param component - the component information object */ export function registerParentComponents(component: ComponentConstructorInfo): boolean { - const - {name, layer} = component; + const { name } = component; let parentName = component.parentParams?.name, parentComponent = component.parent; - initEmitter.emit(`registerComponent.${layer}.${component?.name}`); - if (!Object.isTruly(parentName) || !componentRegInitializers[parentName]) { return false; } @@ -41,7 +38,6 @@ export function registerParentComponents(component: ComponentConstructorInfo): b if (parentComponent) { const p = componentParams.get(parentComponent); - initEmitter.emit(`registerComponent.${p?.layer}.${parentName}`); parentName = p?.name; } } @@ -83,12 +79,12 @@ export function registerComponent(name: CanUndef, layer?: string): CanNu componentName = component?.componentName || name, componentNormolizedName = componentName.match(/(?.*)-functional$/)?.groups?.name || componentName; - const event = `registerComponent.${layer}.${componentNormolizedName}`; if (layer == null) { - initEmitter.emit(`registerComponent.@v4fire/client.${componentNormolizedName}`); - initEmitter.emit(`registerComponent.@edadeal/core.${componentNormolizedName}`); - initEmitter.emit(`registerComponent.@edadeal/cb.${componentNormolizedName}`); + // TO MAKE UP BETTER SOLUTION AND REMOVE IT + for (const l of globalThis.layersList) { + initEmitter.emit(`registerComponent.${l}.${componentNormolizedName}`); + } } else { initEmitter.emit(event); } diff --git a/src/core/component/render/wrappers.ts b/src/core/component/render/wrappers.ts index bb973e8231..3ce48c80c5 100644 --- a/src/core/component/render/wrappers.ts +++ b/src/core/component/render/wrappers.ts @@ -91,10 +91,10 @@ export function wrapCreateBlock(original: T): T { patchFlag = normalizePatchFlagUsingProps.call(this, patchFlag, attrs); if (Object.isString(name)) { - component = registerComponent(name, '@v4fire/client'); + component = registerComponent(name); } else if (!Object.isPrimitive(name) && 'name' in name) { - component = registerComponent(name.name, '@v4fire/client'); + component = registerComponent(name.name); } const createVNode: (...args: Parameters) => VNode = ( @@ -482,7 +482,7 @@ export function wrapAPI(this: ComponentInterface, path: st ...args: unknown[] ) => { const - meta = registerComponent(component.name, '@v4fire/client'); + meta = registerComponent(component.name); if (meta != null) { props = normalizeComponentAttrs(props, [], meta); diff --git a/src/core/prelude/test-env/components/index.ts b/src/core/prelude/test-env/components/index.ts index 3195e70368..b69d5f1af3 100644 --- a/src/core/prelude/test-env/components/index.ts +++ b/src/core/prelude/test-env/components/index.ts @@ -46,7 +46,7 @@ globalThis.renderComponents = ( const ids = scheme.map(() => Math.random().toString(16).slice(2)); - const componentMeta = registerComponent(componentName, '@v4fire/client'); + const componentMeta = registerComponent(componentName); const vnodes = create.call(ctx.vdom, scheme.map(({attrs, children}, i) => ({ type: componentName, From 597d12960d26bd702e79666fa4e49f8598501320 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Sun, 27 Oct 2024 23:45:33 +0300 Subject: [PATCH 25/52] fixed layer=undefined problem --- build/globals.webpack.js | 13 ++++++++-- build/graph/graph.js | 2 +- build/helpers/invoke-by-register-component.js | 7 +---- index.d.ts | 2 +- .../component/decorators/component/index.ts | 4 +-- src/core/component/init/component.ts | 26 +++++++------------ 6 files changed, 25 insertions(+), 29 deletions(-) diff --git a/build/globals.webpack.js b/build/globals.webpack.js index 902e0a1d58..2bb0fd87af 100644 --- a/build/globals.webpack.js +++ b/build/globals.webpack.js @@ -15,7 +15,7 @@ const const {csp, build, webpack, i18n} = config, {config: pzlr} = require('@pzlr/build-core'), - {collectI18NKeysets} = include('build/helpers'), + {collectI18NKeysets, getLayerName} = include('build/helpers'), {getDSComponentMods, getThemes, getDS} = include('build/ds'); const @@ -56,9 +56,18 @@ module.exports = { COMPONENTS: projectGraph.then(({components}) => { if (Object.isMap(components)) { return $C(components).to({}).reduce((res, el, key) => { + let layer; + + if (el.logic != null) { + layer = JSON.stringify(getLayerName(el.logic)); + } else { + layer = JSON.stringify(getLayerName(el.index)) + } + res[key] = { parent: JSON.stringify(el.parent), - dependencies: JSON.stringify(el.dependencies) + dependencies: JSON.stringify(el.dependencies), + layer }; return res; diff --git a/build/graph/graph.js b/build/graph/graph.js index fa51ffa931..3a19c8364f 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -252,7 +252,7 @@ async function buildProjectGraph() { const componentName = component?.name ?? name, - isPageComponent = new RegExp(`\(p)-.+?/?`).test(componentName); + isPageComponent = new RegExp(`\p-.+?/?`).test(componentName); if (webpack.ssr) { diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index 564ed0540a..7b77a88a91 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -17,12 +17,7 @@ exports.invokeByRegisterEvent = function(script, layerName, componentName) { const {initEmitter} = require('core/component/event'); globalThis.initEmitter = initEmitter; } - if (globalThis.layersList == null) { - globalThis.layersList = new Set(); - } - if (!globalThis.layersList.has('${layerName}')) { - globalThis.layersList.add('${layerName}'); - } + globalThis.initEmitter.once('registerComponent.${layerName}.${componentName}', () => { ${script} }); diff --git a/index.d.ts b/index.d.ts index e4a72652f9..6dd3a829df 100644 --- a/index.d.ts +++ b/index.d.ts @@ -34,7 +34,7 @@ declare const MODULE: string; declare const PATH: Dictionary>; declare const PUBLIC_PATH: CanUndef; -declare const COMPONENTS: Dictionary<{parent: string; dependencies: string[]}>; +declare const COMPONENTS: Dictionary<{parent: string; dependencies: string[], layer: string}>; declare const TPLS: Dictionary>; declare const BLOCK_NAMES: CanUndef; diff --git a/src/core/component/decorators/component/index.ts b/src/core/component/decorators/component/index.ts index faff989464..e73884a95d 100644 --- a/src/core/component/decorators/component/index.ts +++ b/src/core/component/decorators/component/index.ts @@ -120,10 +120,10 @@ export function component(opts?: ComponentOptions): Function { !Object.isTruly(componentFullName); if (needRegisterImmediate) { - registerComponent(componentFullName, componentParams.layer); + registerComponent(componentFullName); } else { - requestIdleCallback(registerComponent.bind(null, componentFullName, componentParams.layer)); + requestIdleCallback(registerComponent.bind(null, componentFullName)); } // If we have a smart component, diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index 427d10eca6..f4eed22990 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -5,7 +5,7 @@ * Released under the MIT license * https://github.com/V4Fire/Client/blob/master/LICENSE */ - +import config from 'config'; import { isComponent, componentRegInitializers, componentParams, components } from 'core/component/const'; import type { ComponentMeta } from 'core/component/interface'; @@ -68,29 +68,21 @@ export function registerParentComponents(component: ComponentConstructorInfo): b * * @param name - the component name */ -export function registerComponent(name: CanUndef, layer?: string): CanNull { +export function registerComponent(name: CanUndef): CanNull { if (name == null || !isComponent.test(name)) { return null; } - const component = components.get(name); - - let + const + component = components.get(name), componentName = component?.componentName || name, - componentNormolizedName = componentName.match(/(?.*)-functional$/)?.groups?.name || componentName; - + componentNormolizedName = componentName.match(/(?.*)-functional$/)?.groups?.name || componentName, + layer = config.components[componentNormolizedName]?.layer; + const event = `registerComponent.${layer}.${componentNormolizedName}`; - if (layer == null) { - // TO MAKE UP BETTER SOLUTION AND REMOVE IT - for (const l of globalThis.layersList) { - initEmitter.emit(`registerComponent.${l}.${componentNormolizedName}`); - } - } else { - initEmitter.emit(event); - } + initEmitter.emit(event); - const - regComponent = componentRegInitializers[name]; + const regComponent = componentRegInitializers[name]; if (regComponent != null) { regComponent.forEach((reg) => reg()); From d01c6a673e768fb7084b0644e1d4b008849f4bfa Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Mon, 28 Oct 2024 14:22:46 +0300 Subject: [PATCH 26/52] fixed regexp for isComponent --- build/graph/graph.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index 3a19c8364f..3c2a6ee788 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -252,7 +252,7 @@ async function buildProjectGraph() { const componentName = component?.name ?? name, - isPageComponent = new RegExp(`\p-.+?/?`).test(componentName); + isComponent = new RegExp(`^[bpgi]-[\\w-]+`).test(componentName); if (webpack.ssr) { @@ -262,7 +262,7 @@ async function buildProjectGraph() { importScript = `require('${entryPath}');\n`; } - str += isPageComponent ? + str += isComponent ? invokeByRegisterEvent(importScript, getLayerName(entry), componentName) : importScript; } From c132014ecd132937d46feaafa82101710ef2f17e Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Mon, 28 Oct 2024 14:53:08 +0300 Subject: [PATCH 27/52] added async-render to i-static-page --- src/components/super/i-static-page/i-static-page.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/super/i-static-page/i-static-page.ts b/src/components/super/i-static-page/i-static-page.ts index c94652c447..23997751c9 100644 --- a/src/components/super/i-static-page/i-static-page.ts +++ b/src/components/super/i-static-page/i-static-page.ts @@ -27,6 +27,7 @@ import type bRouter from 'components/base/b-router/b-router'; import type iBlock from 'components/super/i-block/i-block'; import iPage, { component, field, system, computed, hook, watch } from 'components/super/i-page/i-page'; +import AsyncRender, { iterate } from 'components/friends/async-render'; import createProviderDataStore, { ProviderDataStore } from 'components/super/i-static-page/modules/provider-data-store'; @@ -39,6 +40,8 @@ export * from 'components/super/i-static-page/modules/provider-data-store'; export * from 'components/super/i-static-page/interface'; +AsyncRender.addToPrototype({iterate}); + const $$ = symbolGenerator(); From 9cbb09ed1977dee9cf51cfcaeb211a6518a76888 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Tue, 29 Oct 2024 11:49:09 +0300 Subject: [PATCH 28/52] remove lazy invocations for interfaces --- build/graph/graph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index 3c2a6ee788..d0cff745b5 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -252,7 +252,7 @@ async function buildProjectGraph() { const componentName = component?.name ?? name, - isComponent = new RegExp(`^[bpgi]-[\\w-]+`).test(componentName); + isComponent = new RegExp(`^[bpg]-[\\w-]+`).test(componentName); if (webpack.ssr) { From 64fa0dc987cfccf53ca34e237b3c3e171ee5e790 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Tue, 29 Oct 2024 17:52:35 +0300 Subject: [PATCH 29/52] use literal reg exp --- build/graph/graph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index d0cff745b5..4d094cee9f 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -252,7 +252,7 @@ async function buildProjectGraph() { const componentName = component?.name ?? name, - isComponent = new RegExp(`^[bpg]-[\\w-]+`).test(componentName); + isComponent = /^[bpg]-[\\w-]+/.test(componentName); if (webpack.ssr) { From 140963fe9c073d8f538d902029bc2010fdc3819c Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 30 Oct 2024 15:00:31 +0300 Subject: [PATCH 30/52] polish code, fixed tabs and empty lines --- build/graph/graph.js | 5 ++--- build/monic/attach-component-dependencies.js | 9 +++------ build/monic/dynamic-component-import.js | 6 +++--- build/ts-transformers/set-component-layer.js | 14 ++++++-------- index.d.ts | 2 +- package.json | 2 -- src/core/component/init/component.ts | 13 +++++-------- 7 files changed, 20 insertions(+), 31 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index 4d094cee9f..8e99a67913 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -223,7 +223,7 @@ async function buildProjectGraph() { $C(component.libs).forEach((el) => { if (!usedLibs.has(el)) { usedLibs.add(el); - + str += `require('${el}');\n`; } }); @@ -254,7 +254,6 @@ async function buildProjectGraph() { componentName = component?.name ?? name, isComponent = /^[bpg]-[\\w-]+/.test(componentName); - if (webpack.ssr) { importScript = `Object.assign(module.exports, require('${entryPath}'));\n`; @@ -262,7 +261,7 @@ async function buildProjectGraph() { importScript = `require('${entryPath}');\n`; } - str += isComponent ? + str += isComponent ? invokeByRegisterEvent(importScript, getLayerName(entry), componentName) : importScript; } diff --git a/build/monic/attach-component-dependencies.js b/build/monic/attach-component-dependencies.js index d760fe5560..5f4d61925d 100644 --- a/build/monic/attach-component-dependencies.js +++ b/build/monic/attach-component-dependencies.js @@ -15,8 +15,7 @@ const const path = require('upath'), graph = include('build/graph'), - { invokeByRegisterEvent, getLayerName } = include('build/helpers'); - + {invokeByRegisterEvent, getLayerName} = include('build/helpers'); const decls = Object.create(null); @@ -42,7 +41,6 @@ module.exports = async function attachComponentDependencies(str, filePath) { ext = path.extname(filePath), component = components.get(path.basename(filePath, ext)); - if (component == null) { return str; } @@ -61,7 +59,6 @@ module.exports = async function attachComponentDependencies(str, filePath) { }); await $C([...deps].reverse()).async.forEach(forEach); - return imports + str; async function forEach(dep) { @@ -133,10 +130,10 @@ module.exports = async function attachComponentDependencies(str, filePath) { expr; if (chunk === 'tpl') { - expr = `TPLS['${dep}'] = require('${src}')['${dep}'];` + expr = `TPLS['${dep}'] = require('${src}')['${dep}'];`; } else { - expr = `require('${src}');` + expr = `require('${src}');`; } decl += `try { ${invokeByRegisterEvent(expr, getLayerName(filePath), dep)} } catch (err) { stderr(err); }`; diff --git a/build/monic/dynamic-component-import.js b/build/monic/dynamic-component-import.js index a095c19be5..5bc18ae3c8 100644 --- a/build/monic/dynamic-component-import.js +++ b/build/monic/dynamic-component-import.js @@ -38,8 +38,8 @@ const * }); * ``` */ -module.exports = async function dynamicComponentImportReplacer(str, filePath) { - const { entryDeps } = await graph; +module.exports = async function dynamicComponentImportReplacer(str) { + const {entryDeps} = await graph; return str.replace(importRgxp, (str, magicComments, q, resourcePath, resourceName) => { const @@ -65,7 +65,7 @@ module.exports = async function dynamicComponentImportReplacer(str, filePath) { decl = `import(${magicComments} '${fullPath}')`; } else { - decl = `new Promise(function (r) { r(require('${fullPath}')); })`; + decl = `new Promise(function (r) { return r(require('${fullPath}')); })`; } decl += '.catch(function (err) { stderr(err) })'; diff --git a/build/ts-transformers/set-component-layer.js b/build/ts-transformers/set-component-layer.js index bce0ec74b6..98407e7362 100644 --- a/build/ts-transformers/set-component-layer.js +++ b/build/ts-transformers/set-component-layer.js @@ -12,10 +12,8 @@ const ts = require('typescript'); const {validators} = require('@pzlr/build-core'); -const { - getLayerName, - getOriginLayerFromPath -} = include('build/helpers'); + +const {getLayerName, getOriginLayerFromPath} = include('build/helpers'); /** * @typedef {import('typescript').TransformationContext} Context @@ -81,10 +79,10 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { expr = node?.expression; if ( - ts.isCallExpression(node) && - isInitAppFile && - expr.escapedText === 'createApp' - ) { + ts.isCallExpression(node) && + isInitAppFile && + expr.escapedText === 'createApp' + ) { const updatedCallExpression = factory.createCallExpression( factory.createIdentifier(expr.escapedText), diff --git a/index.d.ts b/index.d.ts index 6dd3a829df..966e20c84e 100644 --- a/index.d.ts +++ b/index.d.ts @@ -34,7 +34,7 @@ declare const MODULE: string; declare const PATH: Dictionary>; declare const PUBLIC_PATH: CanUndef; -declare const COMPONENTS: Dictionary<{parent: string; dependencies: string[], layer: string}>; +declare const COMPONENTS: Dictionary<{parent: string; dependencies: string[]; layer: string}>; declare const TPLS: Dictionary>; declare const BLOCK_NAMES: CanUndef; diff --git a/package.json b/package.json index 993dde774e..5a1ffea54a 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,6 @@ "V4Fire" ], "scripts": { - "bbuild": "npx webpack --watch --env public-path=// --env progres=false", - "sttart": "npx static ./dist/client", "build": "yarn build:tsconfig && webpack", "build:tsconfig": "node node_modules/@v4fire/core/build/build-tsconfig", "build:file": "gulp build:tsconfig && webpack --env public-path", diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index f4eed22990..a549db5ba5 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -23,12 +23,12 @@ import { initEmitter } from 'core/component/event'; * @param component - the component information object */ export function registerParentComponents(component: ComponentConstructorInfo): boolean { - const { name } = component; + const {name} = component; let parentName = component.parentParams?.name, parentComponent = component.parent; - + if (!Object.isTruly(parentName) || !componentRegInitializers[parentName]) { return false; } @@ -50,7 +50,6 @@ export function registerParentComponents(component: ComponentConstructorInfo): b if (regParentComponent != null) { regParentComponent.forEach((reg) => reg()); delete componentRegInitializers[parentName]; - return true; } } @@ -77,18 +76,16 @@ export function registerComponent(name: CanUndef): CanNull.*)-functional$/)?.groups?.name || componentName, - layer = config.components[componentNormolizedName]?.layer; - - const event = `registerComponent.${layer}.${componentNormolizedName}`; + layer = config.components[componentNormolizedName]?.layer, + event = `registerComponent.${layer}.${componentNormolizedName}`; + initEmitter.emit(event); const regComponent = componentRegInitializers[name]; if (regComponent != null) { regComponent.forEach((reg) => reg()); - delete componentRegInitializers[name]; - } return component ?? null; From 56cfc0885708b1652da7625fe1ca954def0044ec Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 30 Oct 2024 15:01:47 +0300 Subject: [PATCH 31/52] removed unused \n --- build/graph/graph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index 8e99a67913..6e5de89fe1 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -206,7 +206,7 @@ async function buildProjectGraph() { }); if (tplContent) { - const tplsStore = 'globalThis.TPLS = globalThis.TPLS || Object.create(null);\n'; + const tplsStore = 'globalThis.TPLS = globalThis.TPLS || Object.create(null);'; tplContent = [webpackRuntime, tplsStore, tplContent, ''].join('\n'); } From b9d919f4657af329b1e190fdc40e4eecfbfdf4a6 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 30 Oct 2024 15:03:55 +0300 Subject: [PATCH 32/52] jsdoc for get-origin-layer helper --- build/helpers/get-origin-layer.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/build/helpers/get-origin-layer.js b/build/helpers/get-origin-layer.js index 934ea4aba6..62c130f501 100644 --- a/build/helpers/get-origin-layer.js +++ b/build/helpers/get-origin-layer.js @@ -1,5 +1,11 @@ const {getLayerName} = require('./layer-name'); +/** + * The function returns a layer name of the root package. + * + * @param {string} filePath + * @returns {string} + */ exports.getOriginLayerFromPath = function(filePath) { const pathToOriginPackage = filePath.match(/(?.+)[/\\]node_modules[/\\]/)?.groups?.path; From 396622cb15001d62a61cf4221acaabd412572ca3 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 30 Oct 2024 15:06:40 +0300 Subject: [PATCH 33/52] removed unused semicolon --- build/graph/graph.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index 6e5de89fe1..0689bc251c 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -206,7 +206,7 @@ async function buildProjectGraph() { }); if (tplContent) { - const tplsStore = 'globalThis.TPLS = globalThis.TPLS || Object.create(null);'; + const tplsStore = 'globalThis.TPLS = globalThis.TPLS || Object.create(null)'; tplContent = [webpackRuntime, tplsStore, tplContent, ''].join('\n'); } From bfd818bd879725b8213720ce657af27a1b583aea Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 30 Oct 2024 15:09:40 +0300 Subject: [PATCH 34/52] removed empty lines --- build/graph/graph.js | 1 - build/helpers/layer-name.js | 1 - 2 files changed, 2 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index 0689bc251c..7f63f18dd5 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -223,7 +223,6 @@ async function buildProjectGraph() { $C(component.libs).forEach((el) => { if (!usedLibs.has(el)) { usedLibs.add(el); - str += `require('${el}');\n`; } }); diff --git a/build/helpers/layer-name.js b/build/helpers/layer-name.js index 072240af26..afe1ad8330 100644 --- a/build/helpers/layer-name.js +++ b/build/helpers/layer-name.js @@ -6,7 +6,6 @@ * @returns {string} */ exports.getLayerName = function(filePath) { - const pathToRootRgxp = /(?.+)[/\\]src[/\\]/, pathToRootDir = filePath.match(pathToRootRgxp)?.groups?.path; From b9bba725d151fbe9f8309d997b32d75557334c87 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 30 Oct 2024 15:26:07 +0300 Subject: [PATCH 35/52] fixed lint issues --- build/globals.webpack.js | 2 +- build/graph/graph.js | 2 +- build/helpers/get-origin-layer.js | 16 ++++++++++-- build/helpers/invoke-by-register-component.js | 26 ++++++++++++++----- build/helpers/layer-name.js | 16 ++++++++++-- build/ts-transformers/set-component-layer.js | 4 ++- src/core/component/init/component.ts | 6 ++--- 7 files changed, 55 insertions(+), 17 deletions(-) diff --git a/build/globals.webpack.js b/build/globals.webpack.js index 2bb0fd87af..e42e8e9178 100644 --- a/build/globals.webpack.js +++ b/build/globals.webpack.js @@ -61,7 +61,7 @@ module.exports = { if (el.logic != null) { layer = JSON.stringify(getLayerName(el.logic)); } else { - layer = JSON.stringify(getLayerName(el.index)) + layer = JSON.stringify(getLayerName(el.index)); } res[key] = { diff --git a/build/graph/graph.js b/build/graph/graph.js index 7f63f18dd5..3428427a2a 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -18,7 +18,7 @@ const const {src, build, webpack} = config, - {resolve, block, entries, validators} = require('@pzlr/build-core'); + {resolve, block, entries} = require('@pzlr/build-core'); const componentParams = include('build/graph/component-params'); diff --git a/build/helpers/get-origin-layer.js b/build/helpers/get-origin-layer.js index 62c130f501..626fdd6406 100644 --- a/build/helpers/get-origin-layer.js +++ b/build/helpers/get-origin-layer.js @@ -1,3 +1,13 @@ +/*! + * V4Fire Client Core + * https://github.com/V4Fire/Client + * + * Released under the MIT license + * https://github.com/V4Fire/Client/blob/master/LICENSE + */ + +'use strict'; + const {getLayerName} = require('./layer-name'); /** @@ -6,7 +16,7 @@ const {getLayerName} = require('./layer-name'); * @param {string} filePath * @returns {string} */ -exports.getOriginLayerFromPath = function(filePath) { +function getOriginLayerFromPath(filePath) { const pathToOriginPackage = filePath.match(/(?.+)[/\\]node_modules[/\\]/)?.groups?.path; @@ -15,4 +25,6 @@ exports.getOriginLayerFromPath = function(filePath) { } return require(`${pathToOriginPackage}/package.json`).name; -} \ No newline at end of file +} + +exports.getOriginLayerFromPath = getOriginLayerFromPath; diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index 7b77a88a91..38b66d2444 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -1,14 +1,24 @@ +/*! + * V4Fire Client Core + * https://github.com/V4Fire/Client + * + * Released under the MIT license + * https://github.com/V4Fire/Client/blob/master/LICENSE + */ + +'use strict'; + /** * Function incapsulates script to event handler that is being triggered when component with * name `componentName` from `layerName` renders on the page. * - * @param {String} script - * @param {String} layerName - * @param {String} componentName - * @returns {String} + * @param {string} script + * @param {string} layerName + * @param {string} componentName + * @returns {string} */ -exports.invokeByRegisterEvent = function(script, layerName, componentName) { - if (script?.trim()?.length == 0) { +function invokeByRegisterEvent(script, layerName, componentName) { + if (script?.trim()?.length === 0) { return script; } @@ -23,4 +33,6 @@ exports.invokeByRegisterEvent = function(script, layerName, componentName) { }); \n `; -} \ No newline at end of file +} + +exports.invokeByRegisterEvent = invokeByRegisterEvent; diff --git a/build/helpers/layer-name.js b/build/helpers/layer-name.js index afe1ad8330..6795007cbc 100644 --- a/build/helpers/layer-name.js +++ b/build/helpers/layer-name.js @@ -1,3 +1,13 @@ +/*! + * V4Fire Client Core + * https://github.com/V4Fire/Client + * + * Released under the MIT license + * https://github.com/V4Fire/Client/blob/master/LICENSE + */ + +'use strict'; + /** * The function determines the package in which the module is defined and * returns the name of this package from the `package.json` file @@ -5,7 +15,7 @@ * @param {string} filePath * @returns {string} */ -exports.getLayerName = function(filePath) { +function getLayerName(filePath) { const pathToRootRgxp = /(?.+)[/\\]src[/\\]/, pathToRootDir = filePath.match(pathToRootRgxp)?.groups?.path; @@ -13,4 +23,6 @@ exports.getLayerName = function(filePath) { const res = require(`${pathToRootDir}/package.json`).name; return res; -} \ No newline at end of file +} + +exports.getLayerName = getLayerName; diff --git a/build/ts-transformers/set-component-layer.js b/build/ts-transformers/set-component-layer.js index 98407e7362..ba9b1bd2db 100644 --- a/build/ts-transformers/set-component-layer.js +++ b/build/ts-transformers/set-component-layer.js @@ -94,7 +94,9 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { ); return updatedCallExpression; - } else if (ts.isDecorator(node) && isComponentCallExpression(node)) { + } + + if (ts.isDecorator(node) && isComponentCallExpression(node)) { if (!ts.isCallExpression(expr)) { return node; } diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index a549db5ba5..0ec0d32a80 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -72,10 +72,10 @@ export function registerComponent(name: CanUndef): CanNull.*)-functional$/)?.groups?.name || componentName, + componentName = component?.componentName ?? name, + componentNormolizedName = componentName.match(/(?.*)-functional$/)?.groups?.name ?? componentName, layer = config.components[componentNormolizedName]?.layer, event = `registerComponent.${layer}.${componentNormolizedName}`; From aa0fe4ff8f3a452ede265d2c62a222b851a78259 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 30 Oct 2024 16:46:41 +0300 Subject: [PATCH 36/52] debug playwright tests --- build/helpers/invoke-by-register-component.js | 1 + 1 file changed, 1 insertion(+) diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index 38b66d2444..904770b7e1 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -18,6 +18,7 @@ * @returns {string} */ function invokeByRegisterEvent(script, layerName, componentName) { + return script; if (script?.trim()?.length === 0) { return script; } From 565d932509a5bb030e352792e88ec6bb5c806e48 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Wed, 30 Oct 2024 17:10:50 +0300 Subject: [PATCH 37/52] removed debug for tests --- build/helpers/invoke-by-register-component.js | 1 - 1 file changed, 1 deletion(-) diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index 904770b7e1..38b66d2444 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -18,7 +18,6 @@ * @returns {string} */ function invokeByRegisterEvent(script, layerName, componentName) { - return script; if (script?.trim()?.length === 0) { return script; } From a0a9c20efda49399aec925c150a98101c49341e3 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Thu, 31 Oct 2024 13:27:40 +0300 Subject: [PATCH 38/52] debug: try to run tests without waiting for template --- src/core/component/functional/test/unit/getters.ts | 11 ++++++----- src/core/component/functional/test/unit/main.ts | 8 ++++---- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/core/component/functional/test/unit/getters.ts b/src/core/component/functional/test/unit/getters.ts index 0fe8f2a221..92570bd0c7 100644 --- a/src/core/component/functional/test/unit/getters.ts +++ b/src/core/component/functional/test/unit/getters.ts @@ -21,12 +21,13 @@ test.describe('functional component getters', () => { test.beforeEach(async ({demoPage, page}) => { await demoPage.goto(); - await Promise.all([ - Component.waitForComponentTemplate(page, 'b-functional-dummy'), - Component.waitForComponentTemplate(page, 'b-functional-button-dummy') - ]); - target = await Component.createComponent(page, 'b-functional-dummy', {stage: 'getters'}); + + // await Promise.all([ + // Component.waitForComponentTemplate(page, 'b-functional-dummy'), + // Component.waitForComponentTemplate(page, 'b-functional-button-dummy') + // ]); + text = page.getByText(/Value/); }); diff --git a/src/core/component/functional/test/unit/main.ts b/src/core/component/functional/test/unit/main.ts index b457a0bed1..61dd2097e8 100644 --- a/src/core/component/functional/test/unit/main.ts +++ b/src/core/component/functional/test/unit/main.ts @@ -22,10 +22,10 @@ test.describe('functional component', () => { test.beforeEach(async ({demoPage, page}) => { await demoPage.goto(); - await Promise.all([ - Component.waitForComponentTemplate(page, 'b-functional-dummy'), - Component.waitForComponentTemplate(page, 'b-functional-button-dummy') - ]); + // await Promise.all([ + // Component.waitForComponentTemplate(page, 'b-functional-dummy'), + // Component.waitForComponentTemplate(page, 'b-functional-button-dummy') + // ]); target = await Component.createComponent(page, 'b-functional-dummy', {stage: 'main'}); text = page.getByText(/Counter/); From fbeb68ee2d3ffbdd6dd29c23c84a6352c5faf49d Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Thu, 31 Oct 2024 14:28:39 +0300 Subject: [PATCH 39/52] debug: removed comments --- src/core/component/functional/test/unit/getters.ts | 6 ------ src/core/component/functional/test/unit/main.ts | 5 ----- 2 files changed, 11 deletions(-) diff --git a/src/core/component/functional/test/unit/getters.ts b/src/core/component/functional/test/unit/getters.ts index 92570bd0c7..db9f563511 100644 --- a/src/core/component/functional/test/unit/getters.ts +++ b/src/core/component/functional/test/unit/getters.ts @@ -22,12 +22,6 @@ test.describe('functional component getters', () => { await demoPage.goto(); target = await Component.createComponent(page, 'b-functional-dummy', {stage: 'getters'}); - - // await Promise.all([ - // Component.waitForComponentTemplate(page, 'b-functional-dummy'), - // Component.waitForComponentTemplate(page, 'b-functional-button-dummy') - // ]); - text = page.getByText(/Value/); }); diff --git a/src/core/component/functional/test/unit/main.ts b/src/core/component/functional/test/unit/main.ts index 61dd2097e8..859add385a 100644 --- a/src/core/component/functional/test/unit/main.ts +++ b/src/core/component/functional/test/unit/main.ts @@ -22,11 +22,6 @@ test.describe('functional component', () => { test.beforeEach(async ({demoPage, page}) => { await demoPage.goto(); - // await Promise.all([ - // Component.waitForComponentTemplate(page, 'b-functional-dummy'), - // Component.waitForComponentTemplate(page, 'b-functional-button-dummy') - // ]); - target = await Component.createComponent(page, 'b-functional-dummy', {stage: 'main'}); text = page.getByText(/Counter/); button = page.getByRole('button'); From f51207e0a526c63b5de92d8ab8609d488316ed93 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Thu, 31 Oct 2024 15:54:47 +0300 Subject: [PATCH 40/52] fixed a typo in variable name --- src/core/component/init/component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index 0ec0d32a80..458bf557af 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -75,9 +75,9 @@ export function registerComponent(name: CanUndef): CanNull.*)-functional$/)?.groups?.name ?? componentName, - layer = config.components[componentNormolizedName]?.layer, - event = `registerComponent.${layer}.${componentNormolizedName}`; + componentNormalizedName = componentName.match(/(?.*)-functional$/)?.groups?.name ?? componentName, + layer = config.components[componentNormalizedName]?.layer, + event = `registerComponent.${layer}.${componentNormalizedName}`; initEmitter.emit(event); From dc86f4fcca729aeb0757f967d90dbb1a12a99b2c Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Thu, 31 Oct 2024 16:00:25 +0300 Subject: [PATCH 41/52] added comments to ts-transformer updates --- build/ts-transformers/set-component-layer.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/build/ts-transformers/set-component-layer.js b/build/ts-transformers/set-component-layer.js index ba9b1bd2db..0654a14562 100644 --- a/build/ts-transformers/set-component-layer.js +++ b/build/ts-transformers/set-component-layer.js @@ -78,6 +78,8 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { const expr = node?.expression; + // Passing the value of the original layer as an argument to + // the createApp function for initializing the root component. if ( ts.isCallExpression(node) && isInitAppFile && @@ -96,6 +98,8 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { return updatedCallExpression; } + // Passing the value of the package layer in which the component + // is defined to the @component decorator. if (ts.isDecorator(node) && isComponentCallExpression(node)) { if (!ts.isCallExpression(expr)) { return node; From 5ba983b91a971c7a5acf7dc2f6a5692034c690e0 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Tue, 5 Nov 2024 13:42:14 +0300 Subject: [PATCH 42/52] refactor code; debug using config.projectName instead of getLayerName fn --- build/globals.webpack.js | 10 +--------- build/helpers/invoke-by-register-component.js | 11 +++++------ build/helpers/layer-name.js | 13 ++++++++----- src/core/component/init/component.ts | 4 ++-- 4 files changed, 16 insertions(+), 22 deletions(-) diff --git a/build/globals.webpack.js b/build/globals.webpack.js index e42e8e9178..b84ce960f0 100644 --- a/build/globals.webpack.js +++ b/build/globals.webpack.js @@ -56,18 +56,10 @@ module.exports = { COMPONENTS: projectGraph.then(({components}) => { if (Object.isMap(components)) { return $C(components).to({}).reduce((res, el, key) => { - let layer; - - if (el.logic != null) { - layer = JSON.stringify(getLayerName(el.logic)); - } else { - layer = JSON.stringify(getLayerName(el.index)); - } - res[key] = { parent: JSON.stringify(el.parent), dependencies: JSON.stringify(el.dependencies), - layer + layer: JSON.stringify(getLayerName(el.logic ?? el.index)) }; return res; diff --git a/build/helpers/invoke-by-register-component.js b/build/helpers/invoke-by-register-component.js index 38b66d2444..bf0f89cdf9 100644 --- a/build/helpers/invoke-by-register-component.js +++ b/build/helpers/invoke-by-register-component.js @@ -23,14 +23,13 @@ function invokeByRegisterEvent(script, layerName, componentName) { } return `\n - if (globalThis.initEmitter == null) { + (function () { const {initEmitter} = require('core/component/event'); - globalThis.initEmitter = initEmitter; - } - globalThis.initEmitter.once('registerComponent.${layerName}.${componentName}', () => { - ${script} - }); + initEmitter.once('registerComponent.${layerName}.${componentName}', () => { + ${script} + }); + })(); \n `; } diff --git a/build/helpers/layer-name.js b/build/helpers/layer-name.js index 6795007cbc..cd02626087 100644 --- a/build/helpers/layer-name.js +++ b/build/helpers/layer-name.js @@ -8,6 +8,8 @@ 'use strict'; +const {config} = require('@pzlr/build-core') + /** * The function determines the package in which the module is defined and * returns the name of this package from the `package.json` file @@ -16,13 +18,14 @@ * @returns {string} */ function getLayerName(filePath) { - const - pathToRootRgxp = /(?.+)[/\\]src[/\\]/, - pathToRootDir = filePath.match(pathToRootRgxp)?.groups?.path; + // const + // pathToRootRgxp = new RegExp(`(?.+)[/\\\\]${config.sourceDir}[/\\\\]`), + // pathToRootDir = filePath.match(pathToRootRgxp)?.groups?.path; - const res = require(`${pathToRootDir}/package.json`).name; + // const res = require(`${pathToRootDir}/package.json`).name; - return res; + // return res; + return config.projectName; } exports.getLayerName = getLayerName; diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index 458bf557af..7b0ef7c154 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -9,7 +9,7 @@ import config from 'config'; import { isComponent, componentRegInitializers, componentParams, components } from 'core/component/const'; import type { ComponentMeta } from 'core/component/interface'; -import type { ComponentConstructorInfo } from 'core/component/reflect'; +import { ComponentConstructorInfo, isSmartComponent } from 'core/component/reflect'; import { initEmitter } from 'core/component/event'; @@ -75,7 +75,7 @@ export function registerComponent(name: CanUndef): CanNull.*)-functional$/)?.groups?.name ?? componentName, + componentNormalizedName = isSmartComponent.test(componentName) ? isSmartComponent.replace(componentName) : componentName, layer = config.components[componentNormalizedName]?.layer, event = `registerComponent.${layer}.${componentNormalizedName}`; From 1532035aa2410ee2c9178d02841083957200deb0 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Tue, 5 Nov 2024 14:16:36 +0300 Subject: [PATCH 43/52] removed unused helpers and apply code review suggestions --- build/helpers/get-origin-layer.js | 30 -------------------- build/helpers/index.js | 3 +- build/helpers/layer-name.js | 11 ++++--- build/ts-transformers/set-component-layer.js | 6 ++-- src/core/component/init/component.ts | 1 + 5 files changed, 10 insertions(+), 41 deletions(-) delete mode 100644 build/helpers/get-origin-layer.js diff --git a/build/helpers/get-origin-layer.js b/build/helpers/get-origin-layer.js deleted file mode 100644 index 626fdd6406..0000000000 --- a/build/helpers/get-origin-layer.js +++ /dev/null @@ -1,30 +0,0 @@ -/*! - * V4Fire Client Core - * https://github.com/V4Fire/Client - * - * Released under the MIT license - * https://github.com/V4Fire/Client/blob/master/LICENSE - */ - -'use strict'; - -const {getLayerName} = require('./layer-name'); - -/** - * The function returns a layer name of the root package. - * - * @param {string} filePath - * @returns {string} - */ -function getOriginLayerFromPath(filePath) { - const - pathToOriginPackage = filePath.match(/(?.+)[/\\]node_modules[/\\]/)?.groups?.path; - - if (pathToOriginPackage == null) { - return getLayerName(filePath); - } - - return require(`${pathToOriginPackage}/package.json`).name; -} - -exports.getOriginLayerFromPath = getOriginLayerFromPath; diff --git a/build/helpers/index.js b/build/helpers/index.js index cad4695364..4e7717a8bd 100644 --- a/build/helpers/index.js +++ b/build/helpers/index.js @@ -16,6 +16,5 @@ Object.assign( include('build/helpers/i18n'), include('build/helpers/tracer'), include('build/helpers/invoke-by-register-component'), - include('build/helpers/layer-name'), - include('build/helpers/get-origin-layer') + include('build/helpers/layer-name') ); diff --git a/build/helpers/layer-name.js b/build/helpers/layer-name.js index cd02626087..0504c3e6c0 100644 --- a/build/helpers/layer-name.js +++ b/build/helpers/layer-name.js @@ -18,14 +18,13 @@ const {config} = require('@pzlr/build-core') * @returns {string} */ function getLayerName(filePath) { - // const - // pathToRootRgxp = new RegExp(`(?.+)[/\\\\]${config.sourceDir}[/\\\\]`), - // pathToRootDir = filePath.match(pathToRootRgxp)?.groups?.path; + const + pathToRootRgxp = new RegExp(`(?.+)[/\\\\]${config.sourceDir}[/\\\\]`), + pathToRootDir = filePath.match(pathToRootRgxp)?.groups?.path; - // const res = require(`${pathToRootDir}/package.json`).name; + const res = require(`${pathToRootDir}/package.json`).name; - // return res; - return config.projectName; + return res; } exports.getLayerName = getLayerName; diff --git a/build/ts-transformers/set-component-layer.js b/build/ts-transformers/set-component-layer.js index 0654a14562..735751d228 100644 --- a/build/ts-transformers/set-component-layer.js +++ b/build/ts-transformers/set-component-layer.js @@ -11,9 +11,9 @@ 'use strict'; const ts = require('typescript'); -const {validators} = require('@pzlr/build-core'); +const {validators, config} = require('@pzlr/build-core'); -const {getLayerName, getOriginLayerFromPath} = include('build/helpers'); +const {getLayerName} = include('build/helpers'); /** * @typedef {import('typescript').TransformationContext} Context @@ -65,7 +65,7 @@ const setComponentLayerTransformer = (context) => (sourceFile) => { let layer = getLayerName(sourceFile.path); if (isInitAppFile) { - layer = getOriginLayerFromPath(sourceFile.path); + layer = config.projectName; } /** diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index 7b0ef7c154..5fe6468c72 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -6,6 +6,7 @@ * https://github.com/V4Fire/Client/blob/master/LICENSE */ import config from 'config'; + import { isComponent, componentRegInitializers, componentParams, components } from 'core/component/const'; import type { ComponentMeta } from 'core/component/interface'; From 087705f00d6e04b7340485d5b25ea5e303394c64 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Tue, 5 Nov 2024 14:33:42 +0300 Subject: [PATCH 44/52] refactor: use @pzlr for getting layerName of component --- build/helpers/layer-name.js | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/build/helpers/layer-name.js b/build/helpers/layer-name.js index 0504c3e6c0..16876814ae 100644 --- a/build/helpers/layer-name.js +++ b/build/helpers/layer-name.js @@ -8,7 +8,14 @@ 'use strict'; -const {config} = require('@pzlr/build-core') +const { + config, + resolve: {rootDependencies} +} = require('@pzlr/build-core'); + +const + isPathInside = require('is-path-inside'), + fs = require('fs'); /** * The function determines the package in which the module is defined and @@ -18,13 +25,16 @@ const {config} = require('@pzlr/build-core') * @returns {string} */ function getLayerName(filePath) { - const - pathToRootRgxp = new RegExp(`(?.+)[/\\\\]${config.sourceDir}[/\\\\]`), - pathToRootDir = filePath.match(pathToRootRgxp)?.groups?.path; + let layer = config.projectName; - const res = require(`${pathToRootDir}/package.json`).name; + for (let i = 0; i < rootDependencies.length; i++) { + if (isPathInside(fs.realpathSync(filePath), fs.realpathSync(rootDependencies[i]))) { + layer = rootDependencies[i]; + break; + } + } - return res; + return layer; } exports.getLayerName = getLayerName; From 107e50f6c4ea99eac3eb2b935ce31f10db2f5c61 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Tue, 5 Nov 2024 17:19:41 +0300 Subject: [PATCH 45/52] fixed dynamic loading of components --- build/monic/attach-component-dependencies.js | 4 ++-- src/core/component/functional/test/unit/getters.ts | 5 +++++ src/core/component/functional/test/unit/main.ts | 6 ++++++ 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/build/monic/attach-component-dependencies.js b/build/monic/attach-component-dependencies.js index 5f4d61925d..d3ab6313fe 100644 --- a/build/monic/attach-component-dependencies.js +++ b/build/monic/attach-component-dependencies.js @@ -133,10 +133,10 @@ module.exports = async function attachComponentDependencies(str, filePath) { expr = `TPLS['${dep}'] = require('${src}')['${dep}'];`; } else { - expr = `require('${src}');`; + expr = invokeByRegisterEvent(`require('${src}');`, getLayerName(filePath), dep); } - decl += `try { ${invokeByRegisterEvent(expr, getLayerName(filePath), dep)} } catch (err) { stderr(err); }`; + decl += `try { ${expr} } catch (err) { stderr(err); }`; } } catch {} diff --git a/src/core/component/functional/test/unit/getters.ts b/src/core/component/functional/test/unit/getters.ts index db9f563511..29979af438 100644 --- a/src/core/component/functional/test/unit/getters.ts +++ b/src/core/component/functional/test/unit/getters.ts @@ -20,6 +20,11 @@ test.describe('functional component getters', () => { test.beforeEach(async ({demoPage, page}) => { await demoPage.goto(); + + await Promise.all([ + Component.waitForComponentTemplate(page, 'b-functional-dummy'), + Component.waitForComponentTemplate(page, 'b-functional-button-dummy') + ]); target = await Component.createComponent(page, 'b-functional-dummy', {stage: 'getters'}); text = page.getByText(/Value/); diff --git a/src/core/component/functional/test/unit/main.ts b/src/core/component/functional/test/unit/main.ts index 859add385a..8554a39326 100644 --- a/src/core/component/functional/test/unit/main.ts +++ b/src/core/component/functional/test/unit/main.ts @@ -22,7 +22,13 @@ test.describe('functional component', () => { test.beforeEach(async ({demoPage, page}) => { await demoPage.goto(); + await Promise.all([ + Component.waitForComponentTemplate(page, 'b-functional-dummy'), + Component.waitForComponentTemplate(page, 'b-functional-button-dummy') + ]); + target = await Component.createComponent(page, 'b-functional-dummy', {stage: 'main'}); + text = page.getByText(/Counter/); button = page.getByRole('button'); }); From c4cde01a1ec3f39d4d721b6e402b30cef46f14ba Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Tue, 5 Nov 2024 23:22:55 +0300 Subject: [PATCH 46/52] fixed incorrect layer calculation and regexp for name of component --- build/graph/graph.js | 2 +- build/helpers/layer-name.js | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/build/graph/graph.js b/build/graph/graph.js index 3428427a2a..b72126b9ec 100644 --- a/build/graph/graph.js +++ b/build/graph/graph.js @@ -251,7 +251,7 @@ async function buildProjectGraph() { const componentName = component?.name ?? name, - isComponent = /^[bpg]-[\\w-]+/.test(componentName); + isComponent = /^[bpg]-[\w-]+/.test(componentName); if (webpack.ssr) { importScript = `Object.assign(module.exports, require('${entryPath}'));\n`; diff --git a/build/helpers/layer-name.js b/build/helpers/layer-name.js index 16876814ae..104c4e1d4e 100644 --- a/build/helpers/layer-name.js +++ b/build/helpers/layer-name.js @@ -15,7 +15,8 @@ const { const isPathInside = require('is-path-inside'), - fs = require('fs'); + fs = require('fs'), + path = require('path'); /** * The function determines the package in which the module is defined and @@ -29,7 +30,8 @@ function getLayerName(filePath) { for (let i = 0; i < rootDependencies.length; i++) { if (isPathInside(fs.realpathSync(filePath), fs.realpathSync(rootDependencies[i]))) { - layer = rootDependencies[i]; + const pathPackageJson = path.resolve(fs.realpathSync(rootDependencies[i]), '..', 'package.json'); + layer = require(pathPackageJson).name; break; } } From 7fbb5096d39509845b32b0c826cf06437ad3a1e2 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau <48996979+DmitryYegorov@users.noreply.github.com> Date: Tue, 5 Nov 2024 23:55:53 +0300 Subject: [PATCH 47/52] Update src/core/component/functional/test/unit/getters.ts Co-authored-by: Andrey Kobets --- src/core/component/functional/test/unit/getters.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/core/component/functional/test/unit/getters.ts b/src/core/component/functional/test/unit/getters.ts index 29979af438..5d3fbfbf50 100644 --- a/src/core/component/functional/test/unit/getters.ts +++ b/src/core/component/functional/test/unit/getters.ts @@ -20,7 +20,6 @@ test.describe('functional component getters', () => { test.beforeEach(async ({demoPage, page}) => { await demoPage.goto(); - await Promise.all([ Component.waitForComponentTemplate(page, 'b-functional-dummy'), Component.waitForComponentTemplate(page, 'b-functional-button-dummy') From 150b947977a6a6adb6c7690dffc34a96ddd3f961 Mon Sep 17 00:00:00 2001 From: Dzmitry Yahorau Date: Thu, 7 Nov 2024 11:54:52 +0300 Subject: [PATCH 48/52] added registration of DataProvider and Daemons methods --- src/components/super/i-static-page/i-static-page.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/super/i-static-page/i-static-page.ts b/src/components/super/i-static-page/i-static-page.ts index 23997751c9..264337fd81 100644 --- a/src/components/super/i-static-page/i-static-page.ts +++ b/src/components/super/i-static-page/i-static-page.ts @@ -28,6 +28,8 @@ import type iBlock from 'components/super/i-block/i-block'; import iPage, { component, field, system, computed, hook, watch } from 'components/super/i-page/i-page'; import AsyncRender, { iterate } from 'components/friends/async-render'; +import DataProvider, { getDefaultRequestParams } from 'components/friends/data-provider'; +import Daemons, { init } from 'components/friends/daemons'; import createProviderDataStore, { ProviderDataStore } from 'components/super/i-static-page/modules/provider-data-store'; @@ -41,6 +43,8 @@ export * from 'components/super/i-static-page/modules/provider-data-store'; export * from 'components/super/i-static-page/interface'; AsyncRender.addToPrototype({iterate}); +DataProvider.addToPrototype({getDefaultRequestParams}); +Daemons.addToPrototype({init}); const $$ = symbolGenerator(); From 7228c244cc3cf3123ee48c0fa1a94376b8c3c12e Mon Sep 17 00:00:00 2001 From: bonkalol Date: Fri, 8 Nov 2024 11:41:43 +0300 Subject: [PATCH 49/52] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B8=D0=BB=20?= =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D1=83=D0=B6=D0=BD=D0=BE=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/super/i-static-page/i-static-page.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/super/i-static-page/i-static-page.ts b/src/components/super/i-static-page/i-static-page.ts index 264337fd81..23997751c9 100644 --- a/src/components/super/i-static-page/i-static-page.ts +++ b/src/components/super/i-static-page/i-static-page.ts @@ -28,8 +28,6 @@ import type iBlock from 'components/super/i-block/i-block'; import iPage, { component, field, system, computed, hook, watch } from 'components/super/i-page/i-page'; import AsyncRender, { iterate } from 'components/friends/async-render'; -import DataProvider, { getDefaultRequestParams } from 'components/friends/data-provider'; -import Daemons, { init } from 'components/friends/daemons'; import createProviderDataStore, { ProviderDataStore } from 'components/super/i-static-page/modules/provider-data-store'; @@ -43,8 +41,6 @@ export * from 'components/super/i-static-page/modules/provider-data-store'; export * from 'components/super/i-static-page/interface'; AsyncRender.addToPrototype({iterate}); -DataProvider.addToPrototype({getDefaultRequestParams}); -Daemons.addToPrototype({init}); const $$ = symbolGenerator(); From cbf568618e21235a2cb7615c7f74a2b70cce8e08 Mon Sep 17 00:00:00 2001 From: bonkalol Date: Fri, 8 Nov 2024 11:44:27 +0300 Subject: [PATCH 50/52] :art: eslint --- src/core/component/init/component.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/core/component/init/component.ts b/src/core/component/init/component.ts index 5fe6468c72..b3e699732f 100644 --- a/src/core/component/init/component.ts +++ b/src/core/component/init/component.ts @@ -75,8 +75,13 @@ export function registerComponent(name: CanUndef): CanNull Date: Fri, 8 Nov 2024 12:45:18 +0300 Subject: [PATCH 51/52] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=B8=D0=BB=20=D1=82=D0=B5=D1=81=D1=82=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components-lock.json | 4 +++- src/components/pages/p-v4-components-demo/index.js | 2 ++ .../pages/p-v4-components-demo/p-v4-components-demo.ts | 2 ++ .../b-super-i-input-text-dummy/b-super-i-input-text-dummy.ts | 4 ++++ 4 files changed, 11 insertions(+), 1 deletion(-) diff --git a/components-lock.json b/components-lock.json index 84b207e0fe..48ef91fc6e 100644 --- a/components-lock.json +++ b/components-lock.json @@ -1,5 +1,5 @@ { - "hash": "7b16e904c8d6785034161f61a4a4b42111ccf767585d6f643478eec974899aa8", + "hash": "9608b1e90d91053ae7e5f9db2002b150f358069aff02d61e172e1061eed9f959", "data": { "%data": "%data:Map", "%data:Map": [ @@ -2889,6 +2889,7 @@ "b-textarea", "b-select", "b-select-date", + "b-traits-i-observe-dom-dummy", "p-v4-dynamic-page1", "p-v4-dynamic-page2", "p-v4-dynamic-page3" @@ -2938,6 +2939,7 @@ "b-textarea", "b-select", "b-select-date", + "b-traits-i-observe-dom-dummy", "p-v4-dynamic-page1", "p-v4-dynamic-page2", "p-v4-dynamic-page3" diff --git a/src/components/pages/p-v4-components-demo/index.js b/src/components/pages/p-v4-components-demo/index.js index 040bd7186d..e7005a68cd 100644 --- a/src/components/pages/p-v4-components-demo/index.js +++ b/src/components/pages/p-v4-components-demo/index.js @@ -38,6 +38,8 @@ package('p-v4-components-demo') 'b-select', 'b-select-date', + 'b-traits-i-observe-dom-dummy', + 'p-v4-dynamic-page1', 'p-v4-dynamic-page2', 'p-v4-dynamic-page3' diff --git a/src/components/pages/p-v4-components-demo/p-v4-components-demo.ts b/src/components/pages/p-v4-components-demo/p-v4-components-demo.ts index 1f7884f7b6..f8e85a801d 100644 --- a/src/components/pages/p-v4-components-demo/p-v4-components-demo.ts +++ b/src/components/pages/p-v4-components-demo/p-v4-components-demo.ts @@ -13,10 +13,12 @@ import iStaticPage, { component, prop, field, system, hook } from 'components/super/i-static-page/i-static-page'; import VDOM, * as VDOMAPI from 'components/friends/vdom'; +import DataProvider, * as DataProviderAPI from 'components/friends/data-provider'; export * from 'components/super/i-static-page/i-static-page'; VDOM.addToPrototype(VDOMAPI); +DataProvider.addToPrototype(DataProviderAPI); /** * Page with component demos. diff --git a/src/components/super/i-input-text/test/b-super-i-input-text-dummy/b-super-i-input-text-dummy.ts b/src/components/super/i-input-text/test/b-super-i-input-text-dummy/b-super-i-input-text-dummy.ts index 52d99547ba..29c323bf7c 100644 --- a/src/components/super/i-input-text/test/b-super-i-input-text-dummy/b-super-i-input-text-dummy.ts +++ b/src/components/super/i-input-text/test/b-super-i-input-text-dummy/b-super-i-input-text-dummy.ts @@ -8,8 +8,12 @@ import iInputText, { component } from 'components/super/i-input-text/i-input-text'; +import Mask, * as MaskAPI from 'components/super/i-input-text/mask'; + export * from 'components/super/i-input-text/i-input-text'; +Mask.addToPrototype(MaskAPI); + @component({ functional: { functional: true, From 91b5f1059ec4b8bcf1157a2d34de18631efd4c70 Mon Sep 17 00:00:00 2001 From: bonkalol Date: Fri, 8 Nov 2024 13:07:22 +0300 Subject: [PATCH 52/52] :wrench: appendChild to DOM proto --- .../base/b-virtual-scroll-new/b-virtual-scroll-new.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/base/b-virtual-scroll-new/b-virtual-scroll-new.ts b/src/components/base/b-virtual-scroll-new/b-virtual-scroll-new.ts index cd3dca7998..040a5e0487 100644 --- a/src/components/base/b-virtual-scroll-new/b-virtual-scroll-new.ts +++ b/src/components/base/b-virtual-scroll-new/b-virtual-scroll-new.ts @@ -18,7 +18,7 @@ import type { AsyncOptions } from 'core/async'; import SyncPromise from 'core/promise/sync'; import type iItems from 'components/traits/i-items/i-items'; -import DOM, { watchForIntersection } from 'components/friends/dom'; +import DOM, { watchForIntersection, appendChild } from 'components/friends/dom'; import VDOM, { create, render } from 'components/friends/vdom'; import iVirtualScrollProps from 'components/base/b-virtual-scroll-new/props'; @@ -75,7 +75,7 @@ export * from 'components/super/i-data/i-data'; const $$ = symbolGenerator(); -DOM.addToPrototype({watchForIntersection}); +DOM.addToPrototype({watchForIntersection, appendChild}); VDOM.addToPrototype({create, render}); interface bVirtualScrollNew extends Trait {}