Issues/1389

CHANGELOG.md

@@ -11,6 +11,13 @@ Changelog
 
 _Note: Gaps between patch versions are faulty, broken or test releases._
 
+## v4.0.0-beta.?? (2024-??-??)
+
+#### :house: Internal
+
+* [The `performance` option in the Vue engine config is set to true by default for the dev build `core/component/engines/vue3/config.ts`](https://github.com/V4Fire/Client/issues/1389)
+* [Now key functions such as `createBlock` and `renderList` are being measured using the Performance API and will be available on the timeline `core/component/render/wrappers`](https://github.com/V4Fire/Client/issues/1389)
+
 ## v4.0.0-beta.125 (2024-08-12)
 
 #### :bug: Bug Fix

src/core/component/engines/vue3/CHANGELOG.md

@@ -9,6 +9,12 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v4.0.0-beta.?? (2024-??-??)
+
+#### :house: Internal
+
+* [The `performance` option in the Vue engine config is set to true by default for the dev build](https://github.com/V4Fire/Client/issues/1389)
+
 ## v4.0.0-beta.112 (2024-07-22)
 
 #### :bug: Bug Fix

src/core/component/engines/vue3/config.ts

@@ -23,6 +23,8 @@ Vue.config.warnHandler = (msg, vm, trace) => {
 	logger.warn('warnHandler', msg, trace, getComponentInfo(vm));
 };
 
+Vue.config.performance = !IS_PROD;
+
 const
 	UNRECOGNIZED_COMPONENT_NAME = 'unrecognized-component',
 	ROOT_COMPONENT_NAME = 'root-component';

src/core/component/render/CHANGELOG.md

@@ -9,6 +9,12 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v4.0.0-beta.?? (2024-??-??)
+
+#### :house: Internal
+
+* [Now key functions such as `createBlock` and `renderList` are being measured using the Performance API and will be available on the timeline](https://github.com/V4Fire/Client/issues/1389)
+
 ## v4.0.0-beta.107 (2024-07-10)
 
 #### :bug: Bug Fix

src/core/component/render/wrappers.ts

@@ -8,6 +8,8 @@
 
 /* eslint-disable prefer-spread */
 
+import { measure } from 'core/performance';
+
 import { app, isComponent, componentRenderFactories, destroyedHooks, ASYNC_RENDER_ID } from 'core/component/const';
 import { attachTemplatesToMeta, ComponentMeta } from 'core/component/meta';
 
@@ -83,6 +85,8 @@ export function wrapCreateElementVNode<T extends typeof createElementVNode>(orig
  */
 export function wrapCreateBlock<T extends typeof createBlock>(original: T): T {
 	return Object.cast(function wrapCreateBlock(this: ComponentInterface, ...args: Parameters<T>) {
+		const start = performance.now();
+
 		let [
 			name,
 			attrs,
@@ -238,6 +242,13 @@ export function wrapCreateBlock<T extends typeof createBlock>(original: T): T {
 		functionalVNode.children = [];
 		functionalVNode.dynamicChildren = [];
 
+		if (!IS_PROD) {
+			measure(`<${componentName.camelize(true)}> create block`, {
+				start,
+				end: performance.now()
+			});
+		}
+
 		return vnode;
 	});
 }
@@ -248,8 +259,19 @@ export function wrapCreateBlock<T extends typeof createBlock>(original: T): T {
  */
 export function wrapCreateElementBlock<T extends typeof createElementBlock>(original: T): T {
 	return Object.cast(function createElementBlock(this: ComponentInterface, ...args: Parameters<T>) {
+		const start = performance.now();
+
 		args[3] = normalizePatchFlagUsingProps.call(this, args[3], args[1]);
-		return resolveAttrs.call(this, original.apply(null, args));
+		const result = resolveAttrs.call(this, original.apply(null, args));
+
+		if (!IS_PROD) {
+			measure(`<${this.componentName.camelize(true)}> create element block`, {
+				start,
+				end: performance.now()
+			});
+		}
+
+		return result;
 	});
 }
 
@@ -324,6 +346,8 @@ export function wrapRenderList<T extends typeof renderList, C extends typeof wit
 		src: Iterable<unknown> | Dictionary | number | undefined | null,
 		cb: AnyFunction
 	) {
+		const start = performance.now();
+
 		const
 			ctx = this.$renderEngine.r.getCurrentInstance(),
 
@@ -345,6 +369,13 @@ export function wrapRenderList<T extends typeof renderList, C extends typeof wit
 			});
 		}
 
+		if (!IS_PROD) {
+			measure(`<${this.componentName.camelize(true)}> render list`, {
+				start,
+				end: performance.now()
+			});
+		}
+
 		return vnodes;
 	});
 }

src/core/performance/CHANGELOG.md

@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## 4.0.0-beta.?? (2024-??-??)
+
+#### :rocket: New Feature
+
+* Initial release

src/core/performance/README.md

@@ -0,0 +1,3 @@
+# core/performance
+
+The module provides an API for monitoring application performance at runtime.

src/core/performance/index.ts

@@ -0,0 +1,9 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+export * from 'core/performance/measure';

src/core/performance/measure/engines/web.ts

@@ -0,0 +1,20 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+/**
+ * {@link Performance.measure}
+ * @param args
+ */
+export function measure(...args: Parameters<Performance['measure']>): CanUndef<ReturnType<Performance['measure']>> {
+	if (
+		'performance' in globalThis &&
+		Object.isFunction(Object.get(globalThis, 'performance.measure'))
+	) {
+		return performance.measure(...args);
+	}
+}

src/core/performance/measure/index.ts

@@ -0,0 +1,22 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+//#unless node_js
+import { measure as webMeasure } from 'core/performance/measure/engines/web';
+//#endunless
+
+/**
+ * The measure method creates a named `PerformanceMeasure` object representing a time measurement between two marks
+ * @param args
+ */
+export function measure(...args: Parameters<Performance['measure']>): CanUndef<ReturnType<Performance['measure']>> {
+	//#unless node_js
+	return webMeasure(...args);
+	//#endif
+}
+