V4 new init

.github/workflows/test.yml

@@ -8,7 +8,7 @@ on:
     branches: [master, v4, v4-rc]
 
 jobs:
-  # Build project
+  # Build the project
   build:
     runs-on: ubuntu-latest
     timeout-minutes: 60

CHANGELOG.md

@@ -11,6 +11,48 @@ Changelog
 
 _Note: Gaps between patch versions are faulty, broken or test releases._
 
+## v4.0.0-beta.?? (2024-??-??)
+
+#### :boom: Breaking Change
+
+* `iStaticPage`:
+  * Removed the `locale` field
+  * Removed the `globalEnv` field
+
+* The modules `core/init` and `core/component/state` have been completely redesigned for the new API
+* The module `core/component/state` has been completely redesigned for the new API
+* Moved the hydration store to a separate module from `core/component/hydration` -> `core/hydration-store`
+* Added a wrapper for middleware with additional parameters `core/data/middlewares/hydration-cache`
+
+#### :rocket: New Feature
+
+* Added a new module `core/html/xss`
+* Added a new module `core/cache/decorators/hydration`
+
+* `iBlock`:
+  * Added Snakeskin constant `SSR` to determine that the template is being assembled for SSR
+  * Added Snakeskin constant `renderSSRAsString` for optimizing component assembly under SSR
+  * Added an optional `componentName` parameter to the `hydrateStyles` method.
+    This parameter allows for specifying the name of the component for which styles should be hydrated.
+  * Added registration of styles for templates in SSR
+
+* `core/hydration-store`:
+  * Added the ability to set the current environment in the hydration store
+  * Added getting and removing the hydration store value by path
+
+#### :bug: Bug Fix
+
+* Attached a handler to ensure the correct lifecycle for pages with keep-alive strategy `bDynamicPage`
+
+#### :house: Internal
+
+* The `hydrateStyles` method has been made public `iBlock`
+* Added a new `response` event upon successful data retrieval `components/friends/data-provider`
+
+* `build`:
+  * Now SSR build is bundled into a single file
+  * Use the forked `lib/server-renderer` everywhere in the SSR build
+
 ## v4.0.0-beta.107 (2024-07-10)
 
 #### :bug: Bug Fix

build/globals.webpack.js

@@ -83,8 +83,6 @@ module.exports = {
 		s(getThemes(getDS(), config.theme.include() || [config.theme.default()])) :
 		null,
 
-	DETECT_USER_PREFERENCES: s(config.theme.detectUserPreferences()),
-
 	POST_PROCESS_THEME: s(config.theme.postProcessor),
 
 	DS: runtime.passDesignSystem && pzlr.designSystem ?

build/monic/attach-component-dependencies.js

@@ -94,7 +94,7 @@ module.exports = async function attachComponentDependencies(str, filePath) {
 		if (webpack.ssr) {
 			if (!entryDeps.has(component.name)) {
 				styles.forEach(([key, style]) => {
-					decl += `require('core/component/hydration').styles.set('${key}', ${style});`;
+					decl += `require('core/hydration-store').styles.set('${key}', ${style});`;
 				});
 			}
 

build/monic/dynamic-component-import.js

@@ -117,17 +117,14 @@ module.exports = async function dynamicComponentImportReplacer(str) {
 
 			if (ssr) {
 				if (!entryDeps.has(resourceName)) {
-					imports.unshift(`require('core/component/hydration').styles.set('${resourceName}', (${decl})).get('${resourceName}')`);
+					imports.unshift(`require('core/hydration-store').styles.set('${resourceName}', (${decl})).get('${resourceName}')`);
 				}
 
-			} else {
-				decl = `function () { return ${decl}; }`;
-				imports[0] = `TPLS['${resourceName}'] ? ${imports[0]} : ${imports[0]}.then(${decl}, function (err) { stderr(err); return ${decl}(); })`;
+				return `[${imports.join(',')}]`;
 			}
-		}
 
-		if (ssr) {
-			return `[${imports.join(',')}]`;
+			decl = `function () { return ${decl}; }`;
+			imports[0] = `TPLS['${resourceName}'] ? ${imports[0]} : ${imports[0]}.then(${decl}, function (err) { stderr(err); return ${decl}(); })`;
 		}
 
 		return `Promise.all([${imports.join(',')}])`;

build/snakeskin/default-filters.js

@@ -30,27 +30,42 @@ const
 	TYPE_OF = Symbol('Type of component to create'),
 	SMART_PROPS = Symbol('Smart component props');
 
-const bind = {
+const bemBind = {
 	bind: [
 		(o) => o.getVar('$attrs'),
 		'typeof rootTag !== "undefined" ? rootTag : undefined'
 	]
 };
 
+const tagNameBind = {
+	bind: [
+		...bemBind.bind,
+		'typeof forceRenderAsVNode !== "undefined" ? forceRenderAsVNode : undefined'
+	]
+};
+
+const tagBind = {
+	bind: [
+		...tagNameBind.bind,
+		'TPL_NAME',
+		'$i++'
+	]
+};
+
 Snakeskin.importFilters({
-	tagFilter: Snakeskin.setFilterParams(tagFilter, {bind: ['TPL_NAME', '$i++']}),
-	tagNameFilter: Snakeskin.setFilterParams(tagNameFilter, bind),
-	bemFilter: Snakeskin.setFilterParams(bemFilter, bind),
+	tagFilter: Snakeskin.setFilterParams(tagFilter, tagBind),
+	tagNameFilter: Snakeskin.setFilterParams(tagNameFilter, tagNameBind),
+	bemFilter: Snakeskin.setFilterParams(bemFilter, bemBind),
 	line: Snakeskin.setFilterParams((_, line) => line, {bind: [(o) => o.i]})
 });
 
-function tagFilter({name, attrs = {}}, tplName, cursor) {
-	Object.forEach(tagFilters, (filter) => filter({name, attrs}));
+function tagFilter({name: tag, attrs = {}}, _, rootTag, forceRenderAsVNode, tplName, cursor) {
+	Object.forEach(tagFilters, (filter) => filter({tplName, tag, attrs, rootTag, forceRenderAsVNode}));
 
 	const isSimpleTag =
-		name !== 'component' &&
+		tag !== 'component' &&
 		!attrs[TYPE_OF] &&
-		!validators.blockName(name);
+		!validators.blockName(tag);
 
 	if (isSimpleTag) {
 		return;
@@ -63,7 +78,7 @@ function tagFilter({name, attrs = {}}, tplName, cursor) {
 		componentName = attrs[TYPE_OF];
 
 	} else {
-		componentName = name === 'component' ? 'iBlock' : name.camelize(false);
+		componentName = tag === 'component' ? 'iBlock' : tag.camelize(false);
 	}
 
 	const
@@ -133,21 +148,21 @@ function tagFilter({name, attrs = {}}, tplName, cursor) {
 		isSmartFunctional = attrs[SMART_PROPS] && (isFunctional || funcDir);
 
 	if (isFunctional && webpack.ssr) {
-		attrs[':renderComponentId'] = [false];
+		attrs[':canFunctional'] = [true];
 	}
 
 	if (isSmartFunctional) {
 		if (funcDir == null || funcDir === 'true') {
 			if (webpack.ssr) {
-				attrs[':renderComponentId'] = [false];
+				attrs[':canFunctional'] = [true];
 
 			} else {
 				attrs['is'] = [`${attrs['is'][0]}-functional`];
 			}
 
 		} else if (funcDir !== 'false') {
 			if (webpack.ssr) {
-				attrs[':renderComponentId'] = [!funcDir];
+				attrs[':canFunctional'] = [funcDir];
 
 			} else {
 				attrs[':is'] = [`'${attrs['is'][0]}' + (${funcDir} ? '-functional' : '')`];
@@ -157,12 +172,12 @@ function tagFilter({name, attrs = {}}, tplName, cursor) {
 	}
 }
 
-function tagNameFilter(tag, attrs, rootTag) {
+function tagNameFilter(tag, attrs, rootTag, forceRenderAsVNode) {
 	attrs ??= {};
 
 	tag = $C(tagNameFilters)
 		.to(tag)
-		.reduce((tag, filter) => filter(tag, attrs, rootTag));
+		.reduce((tag, filter) => filter({tag, attrs, rootTag, forceRenderAsVNode}));
 
 	const
 		componentName = tag.camelize(false),

build/snakeskin/filters/bem.js

@@ -11,6 +11,9 @@
 const
 	{webpack} = require('@config/config');
 
+const
+	visited = Symbol('visited');
+
 module.exports = [
 	/**
 	 * Integrates BEM classes to components: attaches identifiers, provides runtime transformers, etc.
@@ -23,18 +26,62 @@ module.exports = [
 	 */
 	function bem2Component(block, attrs, rootTag, element) {
 		const
-			elId = 'data-cached-class-component-id',
 			elName = element.replace(/^_+/, '');
 
+		// We add a class with componentId to each BEM element of our component.
+		// This is necessary for quickly locating such elements in the markup and avoiding problems with
+		// recursive components (where the class name of the element alone is not sufficient).
+		//
+		// Also, we have special props for passing classes and
+		// styles to specific component elements from an external component.
+		// For example,
+		//
+		// ```
+		// <b-example :classes="provide.classes({button: 'example'})" :styles="{button: 'color: red'}">
+		// ```
+		//
+		// Here, we have passed a new external CSS class and external styles to the button element.
+
+		// Explicitly set the necessary attributes for the most efficient template compilation under SSR
 		if (webpack.ssr) {
-			attrs[`:${elId}`] = ['String(renderComponentId)'];
+			const
+				provideClasses = `('classes' in self && classes?.['${elName}']) ?? []`,
+				provideStyles = `('styles' in self && styles?.['${elName}']) ?? []`;
+
+			if (attrs[visited]) {
+				attrs[':class'] = [`${attrs[':class'][0]}.concat(${provideClasses})`];
+				attrs[':style'] = [`${attrs[':style'][0]}.concat(${provideStyles})`];
+
+			} else {
+				attrs[visited] = true;
+
+				if (attrs[':class']) {
+					attrs[':class'] = [`[].concat((${attrs[':class'][0]}), !canFunctional ? componentId : "", ${provideClasses})`];
 
+				} else {
+					attrs[':class'] = [`[].concat(!canFunctional ? componentId : [], ${provideClasses})`];
+				}
+
+				if (attrs[':style']) {
+					attrs[':style'] = [`[].concat((${attrs[':style'][0]}), ${provideStyles})`];
+
+				} else {
+					attrs[':style'] = [`[].concat(${provideStyles})`];
+				}
+			}
+
+		// For client-side rendering, we set these values through a static data attribute,
+		// which will be expanded in the module `core/component/render/helpers/attrs.ts`.
+		// The issue is that if we simply insert the values explicitly,
+		// the template compilation won't be able to cache nodes with these parameters,
+		// even though the componentId and external classes/styles cannot change.
+		// Therefore, we use a special static attribute and later expand it in the transformer.
 		} else {
-			attrs[elId] = [true];
-		}
+			attrs['data-cached-class-component-id'] = [true];
 
-		const provide = 'data-cached-class-provided-classes-styles';
-		attrs[provide] = Array.concat([], attrs[provide], elName);
+			const provide = 'data-cached-class-provided-classes-styles';
+			attrs[provide] = Array.concat([], attrs[provide], elName);
+		}
 
 		return block + element;
 	}

build/snakeskin/filters/tag-name.js

@@ -19,9 +19,11 @@ module.exports = [
 	/**
 	 * Expands the `_` snippet as `<div v-tag=${rootTag}>`
 	 *
-	 * @param {string} tag
-	 * @param {object} attrs
-	 * @param {string} rootTag
+	 * @param {object} params
+	 * @param {string} params.tag
+	 * @param {object} params.attrs
+	 * @param {string} params.rootTag
+	 * @param {boolean} params.forceRenderAsVNode
 	 * @returns {string}
 	 *
 	 * @example
@@ -33,16 +35,18 @@ module.exports = [
 	 *   < _.bar
 	 * ```
 	 */
-	function expandRootTag(tag, attrs, rootTag) {
+	function expandRootTag({tag, attrs, rootTag, forceRenderAsVNode}) {
 		if (tag === '_') {
-			const tag = rootTag ? [JSON.stringify(rootTag)] : ["rootTag || 'div'"];
-			attrs['v-tag'] = tag;
+			const
+				def = JSON.stringify(rootTag ?? 'div'),
+				tag = [`'rootTag' in self ? (rootTag || ${def}) : ${def}`];
 
-			if (webpack.ssr) {
+			if (webpack.ssr && forceRenderAsVNode) {
 				attrs[':is'] = tag;
 				return 'component';
 			}
 
+			attrs['v-tag'] = tag;
 			return 'div';
 		}
 
@@ -53,7 +57,8 @@ module.exports = [
 	 * Expands the `:section` and `:/section` snippets.
 	 * These snippets help to use semantics HTML tags, like `article` or `section` and don't care about the `h` levels.
 	 *
-	 * @param {string} tag
+	 * @param {object} params
+	 * @param {string} params.tag
 	 * @returns {string}
 	 *
 	 * @example
@@ -65,7 +70,7 @@ module.exports = [
 	 * < :/section
 	 * ```
 	 */
-	function expandSection(tag) {
+	function expandSection({tag}) {
 		Vars.h = Vars.h ?? 0;
 
 		if (/^(.*):section$/.test(tag)) {
@@ -95,8 +100,9 @@ module.exports = [
 	/**
 	 * Expands the `a:void` snippet as `<a href="javascript:void(0)">`
 	 *
-	 * @param {string} tag
-	 * @param {object} attrs
+	 * @param {object} params
+	 * @param {string} params.tag
+	 * @param {object} params.attrs
 	 * @returns {string}
 	 *
 	 * @example
@@ -105,7 +111,7 @@ module.exports = [
 	 * < a:void.bar
 	 * ```
 	 */
-	function expandVoidLink(tag, attrs) {
+	function expandVoidLink({tag, attrs}) {
 		if (/^a:void$/.test(tag)) {
 			attrs.href = ['javascript:void(0)'];
 			return 'a';
@@ -117,8 +123,9 @@ module.exports = [
 	/**
 	 * Expands the `button:link` snippet as `<button class="a">`
 	 *
-	 * @param {string} tag
-	 * @param {object} attrs
+	 * @param {object} params
+	 * @param {string} params.tag
+	 * @param {object} params.attrs
 	 * @returns {string}
 	 *
 	 * @example
@@ -127,7 +134,7 @@ module.exports = [
 	 * < button:link.bar
 	 * ```
 	 */
-	function expandButtonLink(tag, attrs) {
+	function expandButtonLink({tag, attrs}) {
 		if (/^button:a$/.test(tag)) {
 			attrs.type = ['button'];
 			attrs.class = Array.concat([], attrs.class, 'a');