@morev/bem-vue 0.1.0

package/LICENSE.md

@@ -0,0 +1,14 @@
+# The MIT License (MIT)
+
+Copyright © 2026+ [Maxim Morev](https://github.com/MorevM)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"),
+to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
+OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,172 @@
+# @morev/bem-vue
+
+Compile-time BEM directive and helpers for Vue, powered by
+[`@morev/bem-classnames`](../bem-classnames).
+
+The adapters replace `v-bem` with an ordinary `:class` expression while Vue
+compiles the template. There is no runtime directive or global mixin to
+register, and components that do not use `v-bem` or `useBem` do not load the
+helper runtime.
+
+## Installation
+
+```sh
+pnpm add @morev/bem-vue
+```
+
+Add the client declarations to `tsconfig.json` so Vue and `vue-tsc` recognize
+the directive and the `block` component option:
+
+```json
+{
+  "compilerOptions": {
+    "types": ["@morev/bem-vue/client"]
+  }
+}
+```
+
+## Vite
+
+Place the BEM adapter after the Vue plugin:
+
+```ts
+import vue from '@vitejs/plugin-vue';
+import bemVue from '@morev/bem-vue/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [vue(), bemVue()],
+});
+```
+
+The adapter supports Vue 3.5 VDOM compilation and Vue 3.6 Vapor through the
+Vue plugin's Vapor mode:
+
+```ts
+vue({
+  features: { vapor: true },
+});
+```
+
+Vapor support includes client builds and SSR. A Vapor SFC may use a string
+literal or a top-level/imported identifier for `defineOptions({ block, name })`;
+expressions with repeated evaluation or side effects are rejected.
+
+## Webpack
+
+Place `bemVue()` before `VueLoaderPlugin`. The adapter must update the static
+`vue-loader` rule before `VueLoaderPlugin` normalizes it:
+
+```ts
+import { VueLoaderPlugin } from 'vue-loader';
+import bemVue from '@morev/bem-vue/webpack';
+
+export default {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/u,
+        loader: 'vue-loader',
+      },
+    ],
+  },
+  plugins: [bemVue(), new VueLoaderPlugin()],
+};
+```
+
+Webpack supports the Vue 3 VDOM pipeline. Vapor is intentionally limited to
+Vite because `vue-loader` does not expose the corresponding compiler pipeline.
+
+## Directive syntax
+
+Use `v-bem` for the block and an argument for an element:
+
+```vue
+<script setup lang="ts">
+const active = true;
+const element = 'title';
+const mix = 'layout__item';
+</script>
+
+<template>
+  <article v-bem>
+    <h2 v-bem:title="{ active }">Title</h2>
+    <div v-bem:[element]="[{ active }, mix, 'static-mix']" />
+  </article>
+</template>
+```
+
+Values follow the recursive `BemArgument` contract: modifier objects, mixin
+strings, nullish values, or nested arrays of those values. A nullish dynamic
+element means the block itself.
+
+Directive modifiers are not supported. Replace the legacy modifier syntax with
+ordinary values:
+
+```vue
+<!-- Invalid -->
+<div v-bem.static.[mix] />
+
+<!-- Valid -->
+<div v-bem="['static', mix]" />
+```
+
+The transform keeps the directive's original position among `class`, `:class`,
+and `v-bind` props, leaving Vue responsible for its normal class merging and
+component fallthrough behavior.
+
+## Block names and `useBem`
+
+The default block is the `.vue` filename without its extension. Use the fixed
+`block` component option when the Vue component name and BEM block differ:
+
+```vue
+<script setup lang="ts">
+import { useBem } from 'virtual:@morev/bem-vue';
+
+defineOptions({
+  name: 'the-component-item',
+  block: 'the-component',
+});
+
+const b = useBem();
+const foreign = useBem('foreign-block');
+</script>
+```
+
+The lookup order is an explicit `useBem(name)` argument, `block`, the explicit
+Vue component name, the filename resolver, and Vue's generated `__name` as a
+last fallback. An explicit name works outside a component. Calling `useBem()`
+without any available name throws a descriptive runtime error.
+
+Calls imported directly into an SFC receive the filename fallback at compile
+time. A call in an external composable should pass a block explicitly when it
+cannot rely on the current component's `block` or `name`.
+
+## Options
+
+Both adapters accept the same options:
+
+```ts
+bemVue({
+  factoryOptions: {
+    namespace: 'ui-',
+  },
+  resolveBlockName: ({ filename, root }) => resolveProjectName({ filename, root }),
+});
+```
+
+`factoryOptions` is passed to `bemClassnames()` and must be safely serializable
+as JSON. `resolveBlockName` changes the project-wide filename fallback.
+
+For custom integrations, `@morev/bem-vue/compiler` exports the stateful compiler
+core with SFC transform, Vue template transform, and virtual-module hooks.
+
+## Boundaries
+
+- Vue 3 only; there is no Vue 2 or Nuxt-specific module.
+- VDOM works with Vite and Webpack 5; Vapor works with Vite.
+- Rollup and esbuild adapters are not provided because they do not own a Vue
+  template compiler pipeline.
+- `v-bem` is rejected on `<template>` and `<slot>`, and an element may contain
+  only one `v-bem` directive.

package/dist/client.d.ts

@@ -0,0 +1,22 @@
+import './virtual-client.js';
+
+declare module 'vue' {
+	interface ComponentCustomOptions {
+		/**
+		 * BEM block name independent from the Vue component name.
+		 */
+		block?: string;
+	}
+
+	interface GlobalDirectives {
+		/**
+		 * Compile-time BEM class directive.
+		 */
+		vBem: import('vue').Directive<
+			Element,
+			import('@morev/bem-vue/compiler').BemDirectiveValue | true,
+			'__bem_modifiers_are_not_supported__',
+			string | undefined
+		>;
+	}
+}

package/dist/compiler-xDNnc6-k.js

@@ -0,0 +1,466 @@
+import { basename, extname, isAbsolute, normalize, resolve } from "node:path";
+import { parse } from "@vue/compiler-sfc";
+import { parse as parse$1, parseExpression } from "@babel/parser";
+import traverseModule from "@babel/traverse";
+import { NodeTypes, createCompoundExpression, createSimpleExpression } from "@vue/compiler-core";
+import { baseParse } from "@vue/compiler-dom";
+import MagicString from "magic-string";
+//#region src/diagnostics.ts
+/**
+* Compile-time error tied to a Vue template or script location.
+*/
+var BemVueTransformError = class extends Error {
+	/**
+	* Creates a diagnostic that bundlers can display without additional context.
+	*
+	* @param   filename   Component filename.
+	* @param   location   Vue compiler source location.
+	* @param   message    Concise explanation of the invalid syntax.
+	* @param   hint       Optional migration or recovery hint.
+	*/
+	constructor(filename, location, message, hint) {
+		const diagnostic = `${filename}:${location.start.line}:${location.start.column}: ${message}`;
+		super(hint ? `${diagnostic}\n${hint}` : diagnostic);
+		this.name = "BemVueTransformError";
+	}
+};
+//#endregion
+//#region src/virtual-module.ts
+const VIRTUAL_MODULE_ID = "virtual:@morev/bem-vue";
+const WEBPACK_VIRTUAL_MODULE_ID = "@morev/bem-vue/__virtual__";
+const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
+const resolveBemVueOptions = (options) => ({
+	...options.factoryOptions !== void 0 && { factoryOptions: options.factoryOptions },
+	root: options.root,
+	resolveBlockName: options.resolveBlockName ?? (({ filename }) => basename(filename, extname(filename)))
+});
+const serializeFactoryOptions = (factoryOptions) => {
+	try {
+		const serialized = JSON.stringify(factoryOptions, (_key, value) => {
+			if (typeof value === "number" && !Number.isFinite(value)) throw new TypeError("non-finite numbers are not supported");
+			if ([
+				"bigint",
+				"function",
+				"symbol",
+				"undefined"
+			].includes(typeof value)) throw new TypeError(`${typeof value} values are not supported`);
+			return value;
+		});
+		if (!serialized) throw new TypeError("the value cannot be represented as JSON");
+		return serialized.replaceAll("\u2028", "\\u2028").replaceAll("\u2029", "\\u2029");
+	} catch (error) {
+		const reason = error instanceof Error ? error.message : String(error);
+		throw new TypeError(`@morev/bem-vue: factoryOptions cannot be serialized: ${reason}.`, { cause: error });
+	}
+};
+const createVirtualModule = (options) => {
+	return `import { bemClassnames } from '@morev/bem-classnames';
+import { getCurrentInstance } from 'vue';
+
+const __bemVueFactory = bemClassnames(${options.factoryOptions === void 0 ? "" : serializeFactoryOptions(options.factoryOptions)});
+const __bemVueCache = new Map();
+
+const __bemVueGetBlock = (name, fallback) => {
+\tif (name !== undefined) return name;
+
+\tconst instance = getCurrentInstance();
+\tconst component = instance?.type;
+\tconst block = component && typeof component === 'object' ? component.block : undefined;
+\tif (typeof block === 'string') return block;
+
+\tconst componentName = component && (typeof component === 'object' || typeof component === 'function')
+\t\t? component.name
+\t\t: undefined;
+\tif (typeof componentName === 'string' && componentName) return componentName;
+\tif (fallback !== undefined) return fallback;
+
+\tconst generatedName = component && typeof component === 'object' ? component.__name : undefined;
+\tif (typeof generatedName === 'string' && generatedName) return generatedName;
+
+\tthrow new Error('@morev/bem-vue: useBem() cannot resolve a block outside a named Vue component. Pass a block name explicitly.');
+};
+
+const __bemVueGetHelper = (block) => {
+\tlet helper = __bemVueCache.get(block);
+\tif (!helper) {
+\t\thelper = __bemVueFactory(block);
+\t\t__bemVueCache.set(block, helper);
+\t}
+\treturn helper;
+};
+
+const useBem = (name, __filenameFallback) => __bemVueGetHelper(__bemVueGetBlock(name, __filenameFallback));
+const __bemVueClass = (element, value, fallback, staticBlock) => (
+\t__bemVueGetHelper(staticBlock ?? __bemVueGetBlock(undefined, fallback))(element, value)
+);
+
+export { __bemVueClass, useBem };
+`;
+};
+//#endregion
+//#region src/compiler.ts
+const traverse = typeof traverseModule === "function" ? traverseModule : traverseModule.default;
+const VAPOR_HELPER_IDENTIFIER = "__bemVueClass";
+const VAPOR_BLOCK_DIRECTIVE = "bem-block";
+const VAPOR_HELPER_DIRECTIVE = "bem-helper";
+const getNormalizedFilename = (filename, root) => {
+	const cleanFilename = filename.split("?", 1)[0];
+	return normalize(isAbsolute(cleanFilename) ? cleanFilename : resolve(root, cleanFilename));
+};
+const getSourceLocation = (source, start, end = start) => {
+	let line = 1;
+	let column = 1;
+	for (let index = 0; index < start; index += 1) if (source[index] === "\n") {
+		line += 1;
+		column = 1;
+	} else column += 1;
+	return {
+		start: {
+			column,
+			line,
+			offset: start
+		},
+		end: {
+			column: column + Math.max(0, end - start),
+			line,
+			offset: end
+		},
+		source: source.slice(start, end)
+	};
+};
+const getParserPlugins = (block) => {
+	const language = block.lang?.toLowerCase();
+	const plugins = [];
+	if (language === "ts" || language === "tsx") plugins.push("typescript");
+	if (language === "jsx" || language === "tsx") plugins.push("jsx");
+	return plugins;
+};
+const analyzeScript = (block, filename) => ({
+	ast: parse$1(block.content, {
+		plugins: getParserPlugins(block),
+		sourceFilename: filename,
+		sourceType: "module"
+	}),
+	block,
+	contentOffset: block.loc.start.offset
+});
+const visitTemplate = (node, visitor) => {
+	if (node.type === NodeTypes.ELEMENT) visitor(node);
+	if (node.type === NodeTypes.ROOT || node.type === NodeTypes.ELEMENT) node.children.forEach((child) => visitTemplate(child, visitor));
+};
+const getBemDirectiveOffsets = (descriptor) => {
+	if (!descriptor.template) return [];
+	const template = baseParse(descriptor.template.content);
+	const offsets = [];
+	visitTemplate(template, (element) => {
+		const directive = element.props.find((prop) => prop.type === NodeTypes.DIRECTIVE && prop.name === "bem");
+		if (directive) offsets.push(directive.loc.end.offset);
+	});
+	return offsets;
+};
+const collectIdentifiers = (analyses) => {
+	const identifiers = /* @__PURE__ */ new Set();
+	analyses.forEach(({ ast }) => {
+		traverse(ast, { Identifier(path) {
+			identifiers.add(path.node.name);
+		} });
+	});
+	return identifiers;
+};
+const getAvailableIdentifier = (base, identifiers) => {
+	if (!identifiers.has(base)) return base;
+	let suffix = 2;
+	while (identifiers.has(`${base}${suffix}`)) suffix += 1;
+	return `${base}${suffix}`;
+};
+const getPropertyName = (property) => {
+	if (property.computed) return void 0;
+	if (property.key.type === "Identifier") return property.key.name;
+	if (property.key.type === "StringLiteral") return property.key.value;
+};
+const getStaticOption = (propertyPath, source, filename, contentOffset) => {
+	const valuePath = propertyPath.get("value");
+	if (valuePath.isStringLiteral()) return { expression: JSON.stringify(valuePath.node.value) };
+	if (valuePath.isIdentifier()) {
+		if (valuePath.scope.getBinding(valuePath.node.name)?.scope.path.isProgram()) return { expression: valuePath.node.name };
+	}
+	const start = contentOffset + (valuePath.node.start ?? propertyPath.node.start ?? 0);
+	const end = contentOffset + (valuePath.node.end ?? propertyPath.node.end ?? start);
+	throw new BemVueTransformError(filename, getSourceLocation(source, start, end), "Vapor requires defineOptions({ block, name }) values to be string literals or top-level/imported identifiers.", "Reuse a stable binding instead of an expression such as getName().");
+};
+const analyzeVaporOptions = (analysis, source, filename) => {
+	if (!analysis) return {};
+	const options = {};
+	traverse(analysis.ast, { CallExpression(path) {
+		if (!path.get("callee").isIdentifier({ name: "defineOptions" })) return;
+		const argumentPath = path.get("arguments")[0];
+		if (!argumentPath?.isObjectExpression()) return;
+		argumentPath.get("properties").forEach((propertyPath) => {
+			if (!propertyPath.isObjectProperty()) return;
+			const propertyName = getPropertyName(propertyPath.node);
+			if (propertyName !== "block" && propertyName !== "name") return;
+			options[propertyName] = getStaticOption(propertyPath, source, filename, analysis.contentOffset);
+		});
+	} });
+	return options;
+};
+const getVaporBlockExpression = (options, fallback) => {
+	const expressions = [
+		options.block?.expression,
+		options.name?.expression,
+		JSON.stringify(fallback)
+	].filter((value) => value !== void 0);
+	return expressions.length === 1 ? expressions[0] : `(${expressions.join(" ?? ")})`;
+};
+const getUseBemBindings = (analysis) => {
+	const bindings = /* @__PURE__ */ new Set();
+	traverse(analysis.ast, { ImportDeclaration(path) {
+		if (path.node.source.value !== "virtual:@morev/bem-vue") return;
+		path.get("specifiers").forEach((specifierPath) => {
+			if (!specifierPath.isImportSpecifier()) return;
+			const { imported } = specifierPath.node;
+			if (imported.type === "Identifier" && imported.name === "useBem" || imported.type === "StringLiteral" && imported.value === "useBem") bindings.add(specifierPath.node);
+		});
+	} });
+	return bindings;
+};
+const isImportedUseBem = (path, bindings) => {
+	const calleePath = path.get("callee");
+	if (!calleePath.isIdentifier()) return false;
+	return bindings.has(calleePath.scope.getBinding(calleePath.node.name)?.path.node);
+};
+const hasUseBemFallbackEdits = (magicString, analysis, fallbackExpression) => {
+	const bindings = getUseBemBindings(analysis);
+	if (bindings.size === 0) return false;
+	let hasEdits = false;
+	const visitCall = (path) => {
+		if (path.node.arguments.length !== 0 || !isImportedUseBem(path, bindings)) return;
+		if (typeof path.node.end !== "number") return;
+		magicString.appendLeft(analysis.contentOffset + path.node.end - 1, `undefined, ${fallbackExpression}`);
+		hasEdits = true;
+	};
+	traverse(analysis.ast, {
+		CallExpression(path) {
+			visitCall(path);
+		},
+		OptionalCallExpression(path) {
+			visitCall(path);
+		}
+	});
+	return hasEdits;
+};
+const addVaporHelperImport = (magicString, descriptor, helperIdentifier, importIdentifier) => {
+	const importStatement = [
+		`import { __bemVueClass as ${importIdentifier} } from '${VIRTUAL_MODULE_ID}';`,
+		`const ${helperIdentifier} = ${importIdentifier};`,
+		""
+	].join("\n");
+	if (descriptor.scriptSetup) {
+		magicString.appendLeft(descriptor.scriptSetup.loc.start.offset, importStatement);
+		return;
+	}
+	magicString.prepend(`<script setup>\n${importStatement}<\/script>\n\n`);
+};
+const getCompilerHelperIdentifier = (context) => {
+	const base = "__bemVueClass";
+	const isUnavailable = (identifier) => identifier in context.bindingMetadata || Boolean(context.identifiers[identifier]);
+	let identifier = base;
+	let suffix = 2;
+	while (isUnavailable(identifier)) {
+		identifier = `${base}${suffix}`;
+		suffix += 1;
+	}
+	context.imports.push({
+		exp: `{ __bemVueClass as ${identifier} }`,
+		path: VIRTUAL_MODULE_ID
+	});
+	return identifier;
+};
+const getBemDirectives = (node) => node.props.filter((prop) => prop.type === NodeTypes.DIRECTIVE && prop.name === "bem");
+const getInternalDirective = (node, name) => node.props.find((prop) => prop.type === NodeTypes.DIRECTIVE && prop.name === name);
+const expressionToString = (expression) => {
+	if (typeof expression === "string") return expression;
+	if (expression.type === NodeTypes.SIMPLE_EXPRESSION) return expression.content;
+	return expression.children.map((child) => {
+		if (typeof child === "string") return child;
+		if (typeof child === "symbol") throw new TypeError("@morev/bem-vue: unexpected helper symbol in Vapor expression.");
+		if (child.type === NodeTypes.INTERPOLATION) return expressionToString(child.content);
+		if (child.type === NodeTypes.TEXT) return child.content;
+		return expressionToString(child);
+	}).join("");
+};
+const getSfcLocation = (location, templateStart) => {
+	if (!templateStart) return location;
+	const resolvePosition = (position) => ({
+		column: position.line === 1 ? templateStart.column + position.column - 1 : position.column,
+		line: templateStart.line + position.line - 1,
+		offset: templateStart.offset + position.offset
+	});
+	return {
+		...location,
+		end: resolvePosition(location.end),
+		start: resolvePosition(location.start)
+	};
+};
+const createClassExpression = (helper, directive, fallback, staticBlock, useVaporCompiler = false) => {
+	const argumentsList = [
+		helper,
+		"(",
+		directive.arg ? directive.arg.type === NodeTypes.SIMPLE_EXPRESSION && directive.arg.isStatic ? JSON.stringify(directive.arg.content) : directive.arg : "null",
+		", ",
+		directive.exp ?? "undefined",
+		", ",
+		JSON.stringify(fallback)
+	];
+	if (staticBlock) argumentsList.push(", ", staticBlock);
+	argumentsList.push(")");
+	if (useVaporCompiler) {
+		const expression = createSimpleExpression(argumentsList.map((argument) => expressionToString(argument)).join(""), false, directive.loc);
+		expression.ast = parseExpression(`(${expression.content})`, { plugins: ["typescript"] });
+		return expression;
+	}
+	return createCompoundExpression(argumentsList, directive.loc);
+};
+const createTemplateTransform = (root, metadata, metadataByToken, resolveBlockName) => {
+	const helperIdentifiers = /* @__PURE__ */ new WeakMap();
+	return (templateNode, context) => {
+		if (templateNode.type !== NodeTypes.ELEMENT) return;
+		const directives = getBemDirectives(templateNode);
+		if (directives.length === 0) return;
+		const vaporHelperDirective = getInternalDirective(templateNode, VAPOR_HELPER_DIRECTIVE);
+		const metadataToken = vaporHelperDirective?.arg?.type === NodeTypes.SIMPLE_EXPRESSION && vaporHelperDirective.arg.isStatic ? vaporHelperDirective.arg.content : void 0;
+		const tokenMetadata = metadataToken ? metadataByToken.get(metadataToken) : void 0;
+		const contextFilename = typeof context.filename === "string" && context.filename ? getNormalizedFilename(context.filename, root) : void 0;
+		const componentMetadata = contextFilename ? metadata.get(contextFilename) : tokenMetadata;
+		const filename = componentMetadata?.filename ?? contextFilename;
+		if (!filename) throw new Error("@morev/bem-vue: Vue compiler context did not expose an SFC filename.");
+		const directive = directives[0];
+		if (directives.length > 1) throw new BemVueTransformError(filename, getSfcLocation(directives[1].loc, componentMetadata?.templateStart), "An element can only have one v-bem directive.");
+		const directiveLocation = getSfcLocation(directive.loc, componentMetadata?.templateStart);
+		if (templateNode.tag === "template" || templateNode.tag === "slot") throw new BemVueTransformError(filename, directiveLocation, `v-bem cannot be used on <${templateNode.tag}>.`);
+		if (directive.modifiers.length > 0) throw new BemVueTransformError(filename, directiveLocation, "v-bem directive modifiers are not supported.", "Replace v-bem.static.[mix] with v-bem=\"['static', mix]\".");
+		const fallback = componentMetadata?.blockName ?? resolveBlockName({
+			filename,
+			root
+		});
+		if (!fallback) throw new BemVueTransformError(filename, directiveLocation, "resolveBlockName() returned an empty block name.");
+		const isVapor = componentMetadata?.vapor ?? false;
+		const isVaporCompiler = isVapor && "options" in context;
+		const compilerContextKey = context.root;
+		const vaporHelper = isVapor ? vaporHelperDirective : void 0;
+		const vaporBlockDirective = isVapor ? getInternalDirective(templateNode, VAPOR_BLOCK_DIRECTIVE) : void 0;
+		const helper = isVapor ? componentMetadata?.helperIdentifier && (isVaporCompiler ? componentMetadata.helperIdentifier : `$setup.${componentMetadata.helperIdentifier}`) : helperIdentifiers.get(compilerContextKey) ?? getCompilerHelperIdentifier(context);
+		if (!helper) throw new BemVueTransformError(filename, directiveLocation, "Vapor helper metadata is unavailable. Run transformSfc() before compiling the template.");
+		if (typeof helper === "string") helperIdentifiers.set(compilerContextKey, helper);
+		if (vaporHelper) templateNode.props.splice(templateNode.props.indexOf(vaporHelper), 1);
+		if (vaporBlockDirective) templateNode.props.splice(templateNode.props.indexOf(vaporBlockDirective), 1);
+		const directiveIndex = templateNode.props.indexOf(directive);
+		templateNode.props[directiveIndex] = {
+			...directive,
+			arg: createSimpleExpression("class", true, directive.loc),
+			exp: createClassExpression(helper, directive, fallback, vaporBlockDirective?.exp ?? componentMetadata?.staticBlockExpression, isVaporCompiler),
+			modifiers: [],
+			name: "bind",
+			rawName: void 0
+		};
+	};
+};
+/**
+* Creates the compiler core shared by Vite, Webpack, and future adapters.
+*
+* @param   compilerOptions   Project paths and public BEM options.
+*
+* @returns                   Stateful compiler with SFC, template, and virtual-module hooks.
+*/
+const createBemVueCompiler = (compilerOptions) => {
+	const options = resolveBemVueOptions({
+		...compilerOptions,
+		root: resolve(compilerOptions.root)
+	});
+	const metadata = /* @__PURE__ */ new Map();
+	const metadataByToken = /* @__PURE__ */ new Map();
+	let metadataTokenCounter = 0;
+	const virtualModuleSource = createVirtualModule(options);
+	const templateTransform = createTemplateTransform(options.root, metadata, metadataByToken, options.resolveBlockName);
+	return {
+		getTemplateCompilerOptions: () => ({ nodeTransforms: [templateTransform] }),
+		load: (id) => id === RESOLVED_VIRTUAL_MODULE_ID ? virtualModuleSource : null,
+		resolveId: (id) => id === "virtual:@morev/bem-vue" || id === "@morev/bem-vue/__virtual__" ? RESOLVED_VIRTUAL_MODULE_ID : null,
+		transformSfc(source, context) {
+			const filename = getNormalizedFilename(context.filename, options.root);
+			const previousMetadata = metadata.get(filename);
+			const { descriptor, errors } = parse(source, {
+				filename,
+				sourceMap: true
+			});
+			if (errors.length > 0) {
+				const error = errors[0];
+				throw error instanceof Error ? error : /* @__PURE__ */ new Error(`${filename}: ${String(error)}`);
+			}
+			const blockName = options.resolveBlockName({
+				filename,
+				root: options.root
+			});
+			if (!blockName) throw new TypeError(`@morev/bem-vue: resolveBlockName() returned an empty block for ${filename}.`);
+			const scriptBlocks = [];
+			if (descriptor.script) scriptBlocks.push(descriptor.script);
+			if (descriptor.scriptSetup) scriptBlocks.push(descriptor.scriptSetup);
+			const analyses = scriptBlocks.map((block) => analyzeScript(block, filename));
+			const magicString = new MagicString(source);
+			const bemDirectiveOffsets = getBemDirectiveOffsets(descriptor);
+			const hasDirective = bemDirectiveOffsets.length > 0;
+			let helperIdentifier;
+			let metadataToken;
+			const setupAnalysis = analyses.find(({ block }) => block === descriptor.scriptSetup);
+			const vaporOptions = context.vapor ? analyzeVaporOptions(setupAnalysis, source, filename) : {};
+			const staticBlockExpression = context.vapor ? getVaporBlockExpression(vaporOptions, blockName) : void 0;
+			const fallbackExpression = staticBlockExpression ?? JSON.stringify(blockName);
+			let hasEdits = analyses.some((analysis) => hasUseBemFallbackEdits(magicString, analysis, fallbackExpression));
+			if (context.vapor && hasDirective) {
+				const identifiers = collectIdentifiers(analyses);
+				const currentHelperIdentifier = getAvailableIdentifier(VAPOR_HELPER_IDENTIFIER, identifiers);
+				helperIdentifier = currentHelperIdentifier;
+				identifiers.add(currentHelperIdentifier);
+				const importIdentifier = getAvailableIdentifier(`${VAPOR_HELPER_IDENTIFIER}Import`, identifiers);
+				addVaporHelperImport(magicString, descriptor, currentHelperIdentifier, importIdentifier);
+				let currentMetadataToken;
+				if (previousMetadata?.token) currentMetadataToken = previousMetadata.token;
+				else {
+					metadataTokenCounter += 1;
+					currentMetadataToken = `m${metadataTokenCounter}`;
+				}
+				metadataToken = currentMetadataToken;
+				const templateOffset = descriptor.template?.loc.start.offset ?? 0;
+				const escapedBlockExpression = fallbackExpression.replaceAll("&", "&amp;").replaceAll("\"", "&quot;");
+				bemDirectiveOffsets.forEach((offset) => {
+					magicString.appendLeft(templateOffset + offset, ` v-${VAPOR_HELPER_DIRECTIVE}:${currentMetadataToken}="${currentHelperIdentifier}" v-${VAPOR_BLOCK_DIRECTIVE}="${escapedBlockExpression}"`);
+				});
+				hasEdits = true;
+			}
+			const componentMetadata = {
+				blockName,
+				filename,
+				...helperIdentifier && { helperIdentifier },
+				...metadataToken && { token: metadataToken },
+				...staticBlockExpression && { staticBlockExpression },
+				...descriptor.template && { templateStart: descriptor.template.loc.start },
+				vapor: context.vapor
+			};
+			metadata.set(filename, componentMetadata);
+			if (previousMetadata?.token && previousMetadata.token !== metadataToken) metadataByToken.delete(previousMetadata.token);
+			if (metadataToken) metadataByToken.set(metadataToken, componentMetadata);
+			if (!hasEdits) return null;
+			return {
+				code: magicString.toString(),
+				map: magicString.generateMap({
+					file: filename,
+					hires: true,
+					includeContent: true,
+					source: filename
+				})
+			};
+		}
+	};
+};
+//#endregion
+export { VIRTUAL_MODULE_ID as n, WEBPACK_VIRTUAL_MODULE_ID as r, createBemVueCompiler as t };

package/dist/compiler.d.ts

@@ -0,0 +1,37 @@
+import { a as CreateBemVueCompilerOptions, c as UseBem, i as BemVueTransformResult, n as BemDirectiveValue, o as ResolveBlockNameContext, r as BemVueOptions, s as TransformSfcContext, t as BemClassnamesOptions } from "./types-BHwq8e5H.js";
+import { NodeTransform } from "@vue/compiler-core";
+import { BemArgument, BemFunction, BemModifiers } from "@morev/bem-classnames";
+//#region src/compiler.d.ts
+/**
+ * Public compiler core used by bundler adapters and future integrations.
+ */
+type BemVueCompiler = {
+  /**
+   * Returns Vue compiler options containing the `v-bem` node transform.
+   */
+  getTemplateCompilerOptions: () => {
+    nodeTransforms: NodeTransform[];
+  };
+  /**
+   * Loads the configured virtual helper module.
+   */
+  load: (id: string) => string | null;
+  /**
+   * Resolves the public virtual helper module.
+   */
+  resolveId: (id: string) => string | null;
+  /**
+   * Transforms script calls and Vapor helper imports in one Vue SFC.
+   */
+  transformSfc: (source: string, context: TransformSfcContext) => BemVueTransformResult | null;
+};
+/**
+ * Creates the compiler core shared by Vite, Webpack, and future adapters.
+ *
+ * @param   compilerOptions   Project paths and public BEM options.
+ *
+ * @returns                   Stateful compiler with SFC, template, and virtual-module hooks.
+ */
+declare const createBemVueCompiler: (compilerOptions: CreateBemVueCompilerOptions) => BemVueCompiler;
+//#endregion
+export { type BemArgument, type BemClassnamesOptions, type BemDirectiveValue, type BemFunction, type BemModifiers, type BemVueCompiler, type BemVueOptions, type BemVueTransformResult, type CreateBemVueCompilerOptions, type ResolveBlockNameContext, type TransformSfcContext, type UseBem, createBemVueCompiler };

package/dist/compiler.js

@@ -0,0 +1,2 @@
+import { t as createBemVueCompiler } from "./compiler-xDNnc6-k.js";
+export { createBemVueCompiler };

package/dist/types-BHwq8e5H.d.ts

@@ -0,0 +1,79 @@
+import { BemArgument, BemFunction, ModuleOptions } from "@morev/bem-classnames";
+//#region src/types.d.ts
+/**
+ * Value accepted by the compile-time `v-bem` directive.
+ */
+type BemDirectiveValue = BemArgument;
+/**
+ * Returns a BEM helper for an explicit or component-derived block.
+ *
+ * @param   name   Optional explicit block name.
+ */
+type UseBem = (name?: string) => BemFunction;
+/**
+ * Options accepted by the underlying BEM class names factory.
+ */
+type BemClassnamesOptions = Partial<ModuleOptions>;
+/**
+ * Context used to resolve the default BEM block name of a Vue component.
+ */
+type ResolveBlockNameContext = {
+  /**
+   * Absolute component filename.
+   */
+  filename: string;
+  /**
+   * Absolute project root.
+   */
+  root: string;
+};
+/**
+ * Shared configuration for the Vue BEM compiler and its bundler adapters.
+ */
+type BemVueOptions = {
+  /**
+   * Options passed to `bemClassnames()`.
+   */
+  factoryOptions?: BemClassnamesOptions;
+  /**
+   * Resolves the filename fallback used after explicit component options.
+   */
+  resolveBlockName?: (context: ResolveBlockNameContext) => string;
+};
+/**
+ * Options required to create a project-bound Vue BEM compiler.
+ */
+type CreateBemVueCompilerOptions = BemVueOptions & {
+  /**
+   * Absolute project root used by the block-name resolver.
+   */
+  root: string;
+};
+/**
+ * Context for transforming one Vue single-file component.
+ */
+type TransformSfcContext = {
+  /**
+   * Absolute component filename.
+   */
+  filename: string;
+  /**
+   * Whether the component is compiled by Vue Vapor.
+   */
+  vapor: boolean;
+};
+/**
+ * Result returned after changing a Vue single-file component.
+ */
+type BemVueTransformResult = {
+  /**
+   * Transformed component source.
+   */
+  code: string;
+  /**
+   * High-resolution source map generated by MagicString.
+   */
+  map: ReturnType<import('magic-string').default['generateMap']>;
+};
+//#endregion
+export { CreateBemVueCompilerOptions as a, UseBem as c, BemVueTransformResult as i, BemDirectiveValue as n, ResolveBlockNameContext as o, BemVueOptions as r, TransformSfcContext as s, BemClassnamesOptions as t };

package/dist/unplugin-DAY_Kbnw.js

@@ -0,0 +1,24 @@
+import { createUnplugin } from "unplugin";
+//#region src/unplugin.ts
+const bemVueUnplugin = createUnplugin((state) => ({
+	name: "@morev/bem-vue",
+	enforce: "pre",
+	resolveId(id) {
+		return state.getCompiler().resolveId(id);
+	},
+	load(id) {
+		return state.getCompiler().load(id);
+	},
+	transformInclude(id) {
+		return !id.includes("?") && id.endsWith(".vue");
+	},
+	transform(source, id) {
+		const filename = id.split("?", 1)[0];
+		return state.getCompiler().transformSfc(source, {
+			filename,
+			vapor: state.isVapor(source, filename)
+		});
+	}
+}));
+//#endregion
+export { bemVueUnplugin as t };

package/dist/virtual-client.d.ts

@@ -0,0 +1,3 @@
+declare module 'virtual:@morev/bem-vue' {
+	const useBem: import('@morev/bem-vue/compiler').UseBem;
+}

package/dist/vite.d.ts

@@ -0,0 +1,13 @@
+import { r as BemVueOptions } from "./types-BHwq8e5H.js";
+import { PluginOption } from "vite";
+//#region src/vite.d.ts
+/**
+ * Creates the Vite adapter for the compile-time `v-bem` directive.
+ *
+ * @param   options   Shared compiler and BEM factory options.
+ *
+ * @returns           Vite plugins for the SFC source and template pipelines.
+ */
+declare const createBemVueVitePlugin: (options?: BemVueOptions) => PluginOption;
+//#endregion
+export { type BemVueOptions, createBemVueVitePlugin as default };

package/dist/vite.js

@@ -0,0 +1,78 @@
+import { t as createBemVueCompiler } from "./compiler-xDNnc6-k.js";
+import { t as bemVueUnplugin } from "./unplugin-DAY_Kbnw.js";
+import { resolve } from "node:path";
+import { parse } from "@vue/compiler-sfc";
+//#region src/vite.ts
+const getVuePlugins = (config) => config.plugins.filter((plugin) => plugin.name === "vite:vue" && "api" in plugin);
+const isVaporSfc = (source, filename, forceVapor) => {
+	const { descriptor } = parse(source, { filename });
+	if (descriptor.vapor) return true;
+	if (!forceVapor) return false;
+	if (filename.endsWith(".vue") && descriptor.script && !descriptor.scriptSetup) return false;
+	return true;
+};
+/**
+* Creates the Vite adapter for the compile-time `v-bem` directive.
+*
+* @param   options   Shared compiler and BEM factory options.
+*
+* @returns           Vite plugins for the SFC source and template pipelines.
+*/
+const createBemVueVitePlugin = (options = {}) => {
+	let compiler;
+	let forceVapor = false;
+	const getCompiler = () => {
+		if (!compiler) throw new Error("@morev/bem-vue: Vite configuration has not been resolved yet.");
+		return compiler;
+	};
+	return [
+		bemVueUnplugin.vite({
+			getCompiler,
+			isVapor: (source, filename) => isVaporSfc(source, filename, forceVapor)
+		}),
+		{
+			name: "@morev/bem-vue:vite-hmr",
+			enforce: "pre",
+			handleHotUpdate(context) {
+				if (!context.file.endsWith(".vue")) return;
+				const readSource = context.read;
+				let transformedSource;
+				context.read = () => {
+					transformedSource ??= Promise.resolve(readSource()).then((source) => getCompiler().transformSfc(source, {
+						filename: context.file,
+						vapor: isVaporSfc(source, context.file, forceVapor)
+					})?.code ?? source);
+					return transformedSource;
+				};
+			}
+		},
+		{
+			name: "@morev/bem-vue:vite-adapter",
+			enforce: "post",
+			configResolved(config) {
+				const vuePlugins = getVuePlugins(config);
+				if (vuePlugins.length !== 1) throw new Error(`@morev/bem-vue: expected exactly one vite:vue plugin, found ${vuePlugins.length}.`);
+				const vuePlugin = vuePlugins[0];
+				compiler = createBemVueCompiler({
+					...options,
+					root: resolve(config.root)
+				});
+				const compilerOptions = compiler.getTemplateCompilerOptions();
+				const vueOptions = vuePlugin.api.options;
+				forceVapor = vueOptions.features?.vapor === true;
+				vuePlugin.api.options = {
+					...vueOptions,
+					template: {
+						...vueOptions.template,
+						compilerOptions: {
+							...vueOptions.template?.compilerOptions,
+							nodeTransforms: [...vueOptions.template?.compilerOptions?.nodeTransforms ?? [], ...compilerOptions.nodeTransforms]
+						}
+					}
+				};
+			}
+		}
+	];
+};
+//#endregion
+export { createBemVueVitePlugin as default };

package/dist/webpack.d.ts

@@ -0,0 +1,16 @@
+import { r as BemVueOptions } from "./types-BHwq8e5H.js";
+import { WebpackPluginInstance } from "webpack";
+//#region src/webpack.d.ts
+/**
+ * Creates the Webpack 5 adapter for the compile-time `v-bem` directive.
+ *
+ * Place this plugin before `VueLoaderPlugin` so the latter observes the merged
+ * `compilerOptions` while normalizing loader rules.
+ *
+ * @param   options   Shared compiler and BEM factory options.
+ *
+ * @returns           Webpack plugin that transforms SFC source and configures vue-loader.
+ */
+declare const createBemVueWebpackPlugin: (options?: BemVueOptions) => WebpackPluginInstance;
+//#endregion
+export { type BemVueOptions, createBemVueWebpackPlugin as default };

package/dist/webpack.js

@@ -0,0 +1,110 @@
+import { n as VIRTUAL_MODULE_ID, r as WEBPACK_VIRTUAL_MODULE_ID, t as createBemVueCompiler } from "./compiler-xDNnc6-k.js";
+import { t as bemVueUnplugin } from "./unplugin-DAY_Kbnw.js";
+import { createRequire } from "node:module";
+import { normalize, resolve } from "node:path";
+import { parse } from "@vue/compiler-sfc";
+//#region src/webpack.ts
+const isStaticRule = (value) => typeof value === "object" && value !== null;
+const doesRuleTargetVue = (rule) => {
+	if (typeof rule.test === "string") return rule.test.includes(".vue");
+	if (!(rule.test instanceof RegExp)) return false;
+	rule.test.lastIndex = 0;
+	return rule.test.test("component.vue");
+};
+const getLoaderName = (loader) => typeof loader === "string" ? loader : loader.loader;
+const getVueLoaderFilename = (context) => {
+	const require = createRequire(import.meta.url);
+	return normalize(require.resolve("vue-loader", { paths: [context] }));
+};
+const isVueLoader = (loader, context, vueLoaderFilename) => {
+	const loaderName = getLoaderName(loader);
+	if (loaderName === "vue-loader") return true;
+	try {
+		const require = createRequire(import.meta.url);
+		return normalize(require.resolve(loaderName, { paths: [context] })) === vueLoaderFilename;
+	} catch {
+		return false;
+	}
+};
+const withCompilerOptions = (descriptor, nodeTransforms) => {
+	const options = descriptor.options ?? {};
+	const compilerOptionsValue = options.compilerOptions;
+	const compilerOptions = typeof compilerOptionsValue === "object" && compilerOptionsValue !== null ? compilerOptionsValue : {};
+	const previousTransforms = Array.isArray(compilerOptions.nodeTransforms) ? compilerOptions.nodeTransforms : [];
+	return {
+		...descriptor,
+		options: {
+			...options,
+			compilerOptions: {
+				...compilerOptions,
+				nodeTransforms: [...previousTransforms, ...nodeTransforms]
+			}
+		}
+	};
+};
+const findVueLoaderMatches = (rules, context, vueLoaderFilename) => {
+	const matches = [];
+	rules.forEach((unknownRule) => {
+		if (!isStaticRule(unknownRule)) return;
+		const rule = unknownRule;
+		const doesTargetVue = doesRuleTargetVue(rule);
+		if (typeof rule.use === "function" && doesRuleTargetVue(rule)) throw new Error("@morev/bem-vue: function-based Webpack loader rules for .vue files are not supported.");
+		if (doesTargetVue && rule.loader && isVueLoader(rule.loader, context, vueLoaderFilename)) matches.push({ setCompilerOptions(nodeTransforms) {
+			const updated = withCompilerOptions({
+				loader: rule.loader,
+				options: rule.options
+			}, nodeTransforms);
+			rule.loader = updated.loader;
+			rule.options = updated.options;
+		} });
+		if (doesTargetVue && typeof rule.use === "string" && isVueLoader(rule.use, context, vueLoaderFilename)) matches.push({ setCompilerOptions(nodeTransforms) {
+			rule.use = withCompilerOptions({ loader: rule.use }, nodeTransforms);
+		} });
+		else if (doesTargetVue && isStaticRule(rule.use) && "loader" in rule.use && isVueLoader(rule.use, context, vueLoaderFilename)) matches.push({ setCompilerOptions(nodeTransforms) {
+			rule.use = withCompilerOptions(rule.use, nodeTransforms);
+		} });
+		else if (doesTargetVue && Array.isArray(rule.use)) rule.use.forEach((loader, index) => {
+			if (typeof loader !== "string" && !isStaticRule(loader) || !isVueLoader(loader, context, vueLoaderFilename)) return;
+			matches.push({ setCompilerOptions(nodeTransforms) {
+				const currentLoader = rule.use[index];
+				const descriptor = typeof currentLoader === "string" ? { loader: currentLoader } : currentLoader;
+				rule.use[index] = withCompilerOptions(descriptor, nodeTransforms);
+			} });
+		});
+		if (Array.isArray(rule.rules)) matches.push(...findVueLoaderMatches(rule.rules, context, vueLoaderFilename));
+		if (Array.isArray(rule.oneOf)) matches.push(...findVueLoaderMatches(rule.oneOf, context, vueLoaderFilename));
+	});
+	return matches;
+};
+/**
+* Creates the Webpack 5 adapter for the compile-time `v-bem` directive.
+*
+* Place this plugin before `VueLoaderPlugin` so the latter observes the merged
+* `compilerOptions` while normalizing loader rules.
+*
+* @param   options   Shared compiler and BEM factory options.
+*
+* @returns           Webpack plugin that transforms SFC source and configures vue-loader.
+*/
+const createBemVueWebpackPlugin = (options = {}) => ({ apply(webpackCompiler) {
+	const root = resolve(webpackCompiler.context);
+	const compiler = createBemVueCompiler({
+		...options,
+		root
+	});
+	const rules = webpackCompiler.options.module?.rules ?? [];
+	const matches = findVueLoaderMatches(rules, root, getVueLoaderFilename(root));
+	if (matches.length !== 1) throw new Error(`@morev/bem-vue: expected exactly one static vue-loader rule, found ${matches.length}.`);
+	matches[0].setCompilerOptions(compiler.getTemplateCompilerOptions().nodeTransforms);
+	new webpackCompiler.webpack.NormalModuleReplacementPlugin(new RegExp(`^${VIRTUAL_MODULE_ID.replaceAll("/", "\\/")}$`, "u"), WEBPACK_VIRTUAL_MODULE_ID).apply(webpackCompiler);
+	bemVueUnplugin.webpack({
+		getCompiler: () => compiler,
+		isVapor: (source, filename) => {
+			const { descriptor } = parse(source, { filename });
+			if (descriptor.vapor) throw new Error("@morev/bem-vue: Vue Vapor SFCs are only supported by the Vite adapter.");
+			return false;
+		}
+	}).apply(webpackCompiler);
+} });
+//#endregion
+export { createBemVueWebpackPlugin as default };

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@morev/bem-vue",
+  "description": "Compile-time BEM directive and helpers for Vue components.",
+  "type": "module",
+  "private": false,
+  "sideEffects": false,
+  "version": "0.1.0",
+  "engines": {
+    "node": ">=22.12"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": {
+    "name": "Maxim Morev",
+    "email": "max.seainside@gmail.com"
+  },
+  "homepage": "https://github.com/MorevM/bem/tree/master/packages/bem-vue#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MorevM/bem",
+    "directory": "packages/bem-vue"
+  },
+  "keywords": [
+    "bem",
+    "classnames",
+    "vue"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js"
+    },
+    "./webpack": {
+      "types": "./dist/webpack.d.ts",
+      "import": "./dist/webpack.js"
+    },
+    "./compiler": {
+      "types": "./dist/compiler.d.ts",
+      "import": "./dist/compiler.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+    "vue": "^3.5.0 || >=3.6.0-rc.4 <4",
+    "vue-loader": "^17.4.0",
+    "webpack": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vitejs/plugin-vue": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    },
+    "vue-loader": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@babel/parser": "^7.29.8",
+    "@babel/traverse": "^7.29.0",
+    "@babel/types": "^7.29.8",
+    "@vue/compiler-core": "^3.5.41",
+    "@vue/compiler-dom": "^3.5.41",
+    "@vue/compiler-sfc": "^3.5.41",
+    "magic-string": "^1.1.0",
+    "unplugin": "^3.3.0",
+    "@morev/bem-classnames": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/babel__traverse": "^7.28.0",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/compiler-vapor": "3.6.0-rc.4",
+    "happy-dom": "^20.8.4",
+    "typescript": "^6.0.2",
+    "vite": "^8.2.1",
+    "vue": "^3.5.41",
+    "vue-loader": "^17.4.2",
+    "webpack": "^5.101.3"
+  }
+}