@ozdao/martyrs 0.2.571 → 0.2.572

package/src/jit/extractor.js

@@ -0,0 +1,140 @@
+/**
+ * Martyrs JIT CSS Engine - Token Extractor
+ *
+ * Извлекает CSS классы (токены) из исходного кода.
+ * Как Tailwind/UnoCSS: собирает ВСЕ потенциальные токены,
+ * фильтрация через rules происходит в core.js
+ */
+
+// Широкий паттерн для любых токенов (как Tailwind)
+// Матчит: d-flex, pd-medium, w-100, cols-[1fr_3fr], mobile:cols-2
+const TOKEN_REGEX = /[A-Za-z][A-Za-z0-9_:-]*(?:\[[^\]]+\])?/g;
+
+// Паттерн для извлечения классов из HTML/Vue templates
+const CLASS_ATTR_REGEX = /class(?:Name)?=["'`]([^"'`]+)["'`]/g;
+
+// Паттерн для извлечения классов из :class bindings в Vue
+const DYNAMIC_CLASS_REGEX = /:class=["'`{[]([^"'`]+)["'`}\]]/g;
+
+// JS/HTML слова которые точно не классы
+const BLOCKLIST = new Set([
+  // JS keywords
+  'import', 'export', 'from', 'const', 'let', 'var', 'function', 'return',
+  'if', 'else', 'for', 'while', 'switch', 'case', 'break', 'continue',
+  'true', 'false', 'null', 'undefined', 'this', 'new', 'class', 'extends',
+  'async', 'await', 'try', 'catch', 'finally', 'throw', 'typeof', 'instanceof',
+  'default', 'delete', 'do', 'in', 'of', 'void', 'with', 'yield',
+  // HTML tags
+  'div', 'span', 'template', 'script', 'style', 'head', 'body', 'html',
+  'section', 'article', 'header', 'footer', 'nav', 'aside', 'main',
+  'form', 'input', 'button', 'select', 'option', 'textarea', 'label',
+  'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td',
+  'ul', 'ol', 'li', 'dl', 'dt', 'dd',
+  'a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'img', 'video', 'audio', 'canvas', 'svg', 'path',
+  'slot', 'component', 'transition', 'keep-alive',
+  // Vue
+  'ref', 'reactive', 'computed', 'watch', 'onMounted', 'onUnmounted',
+  'defineProps', 'defineEmits', 'defineExpose', 'withDefaults',
+  // Common
+  'props', 'emit', 'attrs', 'slots', 'setup', 'data', 'methods', 'mounted'
+]);
+
+/**
+ * Проверяет валидность токена
+ * Отфильтровывает JS/HTML и явно невалидные токены
+ */
+function isValidToken(token) {
+  // Слишком короткие
+  if (token.length < 2) return false;
+  // В blocklist
+  if (BLOCKLIST.has(token)) return false;
+  // Placeholder'ы из документации
+  if (token.includes('...')) return false;
+  // Пустые скобки
+  if (token.includes('[]')) return false;
+  // Чисто цифровые
+  if (/^\d+$/.test(token)) return false;
+  // Начинается с цифры
+  if (/^\d/.test(token)) return false;
+  // Только буквы без дефиса (скорее всего переменная)
+  if (/^[a-z]+$/i.test(token) && token.length > 10) return false;
+
+  return true;
+}
+
+/**
+ * Извлекает все токены из содержимого файла
+ * @param {string} content - содержимое файла
+ * @param {string} filename - имя файла (для определения типа)
+ * @returns {Set<string>} множество уникальных токенов
+ */
+export function extractTokens(content, filename = '') {
+  const tokens = new Set();
+
+  // 1. Извлекаем из class="..."
+  for (const match of content.matchAll(CLASS_ATTR_REGEX)) {
+    const classString = match[1];
+    const classes = classString.split(/\s+/).filter(Boolean);
+    for (const cls of classes) {
+      if (isValidToken(cls)) {
+        tokens.add(cls);
+      }
+    }
+  }
+
+  // 2. Извлекаем из :class bindings
+  for (const match of content.matchAll(DYNAMIC_CLASS_REGEX)) {
+    const binding = match[1];
+
+    // Ищем все токены внутри binding
+    const bindingTokens = binding.match(TOKEN_REGEX) || [];
+    for (const cls of bindingTokens) {
+      if (isValidToken(cls)) {
+        tokens.add(cls);
+      }
+    }
+
+    // Также ищем строковые литералы внутри binding
+    const stringLiterals = binding.match(/['"]([^'"]+)['"]/g) || [];
+    for (const literal of stringLiterals) {
+      const cleaned = literal.slice(1, -1);
+      const classes = cleaned.split(/\s+/).filter(Boolean);
+      for (const cls of classes) {
+        if (isValidToken(cls)) {
+          tokens.add(cls);
+        }
+      }
+    }
+  }
+
+  // 3. Глобальный поиск токенов во всём контенте
+  for (const match of content.matchAll(TOKEN_REGEX)) {
+    const token = match[0];
+    if (isValidToken(token)) {
+      tokens.add(token);
+    }
+  }
+
+  return tokens;
+}
+
+/**
+ * Извлекает токены из нескольких файлов
+ * @param {Map<string, string>} files - Map<filename, content>
+ * @returns {Set<string>} множество уникальных токенов
+ */
+export function extractFromFiles(files) {
+  const allTokens = new Set();
+
+  for (const [filename, content] of files) {
+    const tokens = extractTokens(content, filename);
+    for (const token of tokens) {
+      allTokens.add(token);
+    }
+  }
+
+  return allTokens;
+}
+
+export default { extractTokens, extractFromFiles };

package/src/jit/index.js

@@ -0,0 +1,19 @@
+/**
+ * Martyrs JIT CSS Engine
+ *
+ * Экспортирует:
+ * - MartyrsJIT: ядро генерации CSS
+ * - MartyrsJitPlugin: rspack плагин
+ * - rules: набор правил для arbitrary values
+ * - variants: модификаторы (mobile:, hover:, etc)
+ * - extractTokens: извлечение токенов из кода
+ */
+
+export { MartyrsJIT } from './core.js';
+export { MartyrsJitPlugin } from './plugin.js';
+export { rules } from './rules.js';
+export { variants } from './variants.js';
+export { extractTokens, extractFromFiles } from './extractor.js';
+
+// Default export - плагин
+export { MartyrsJitPlugin as default } from './plugin.js';

package/src/jit/loader.js

@@ -0,0 +1,46 @@
+/**
+ * Martyrs JIT CSS Engine - Token Extraction Loader
+ *
+ * Этот loader вызывается rspack для каждого .vue/.js/.ts файла.
+ * 1. Извлекает токены для JIT engine
+ * 2. Оборачивает <style> блоки в @layer components для приоритета JIT
+ */
+
+/**
+ * @param {string} source - содержимое файла
+ * @returns {string} - source с обёрнутыми стилями
+ */
+export default function martyrsLoader(source) {
+  // Получаем options и plugin instance
+  const options = this.getOptions() || {};
+  const plugin = options.plugin;
+
+  if (!plugin) {
+    return source;
+  }
+
+  const resourcePath = this.resourcePath;
+
+  // Извлекаем токены через метод плагина
+  try {
+    plugin.extractFromFile(source, resourcePath);
+  } catch (error) {
+    console.warn(`[MartyrsJIT] Error extracting tokens from ${resourcePath}:`, error.message);
+  }
+
+  // Для .vue файлов оборачиваем содержимое <style> в @layer components
+  if (resourcePath.endsWith('.vue')) {
+    source = source.replace(
+      /<style([^>]*)>([\s\S]*?)<\/style>/gi,
+      (match, attrs, css) => {
+        // Пропускаем пустые стили или уже обёрнутые в @layer
+        if (!css.trim() || css.includes('@layer')) {
+          return match;
+        }
+        return `<style${attrs}>@layer components {\n${css}\n}</style>`;
+      }
+    );
+  }
+
+  return source;
+}

package/src/jit/plugin.js

@@ -0,0 +1,209 @@
+/**
+ * Martyrs JIT CSS Engine - Rspack Plugin
+ *
+ * 1. Transform hook (loader) - парсит токены на лету при обработке каждого файла
+ * 2. Virtual module - import 'martyrs-jit.css' через rspack.experiments.VirtualModulesPlugin
+ * 3. processAssets hook - заменяет placeholder на сгенерированный CSS
+ */
+
+import { MartyrsJIT } from './core.js';
+import { rules } from './rules.js';
+import { variants } from './variants.js';
+import { extractTokens } from './extractor.js';
+import path from 'path';
+import { experiments } from '@rspack/core';
+
+const { VirtualModulesPlugin } = experiments;
+
+const PLUGIN_NAME = 'MartyrsJitPlugin';
+
+// Virtual module
+const VIRTUAL_MODULE_ID = 'martyrs-jit.css';
+const VIRTUAL_MODULE_PATH = 'node_modules/.martyrs/__martyrs.css';
+
+// Placeholder
+const LAYER_PLACEHOLDER = '#--martyrs--{layer:__ALL__}';
+const LAYER_PLACEHOLDER_RE = /#--martyrs--\s*\{\s*layer\s*:\s*(.+?)\s*;?\s*\}/g;
+
+export class MartyrsJitPlugin {
+  constructor(options = {}) {
+    this.options = {
+      extensions: options.extensions || ['.vue', '.js', '.jsx', '.ts', '.tsx'],
+      include: options.include || ['src'],
+      exclude: options.exclude || ['node_modules', 'dist', '.git'],
+      verbose: options.verbose || false,
+      ...options
+    };
+
+    // JIT engine
+    this.jit = new MartyrsJIT();
+
+    for (const [pattern, handler] of rules) {
+      this.jit.addRule(pattern, handler);
+    }
+
+    for (const variant of variants) {
+      this.jit.addVariant(variant.name, variant.wrapper);
+    }
+
+    // Токены собранные из всех файлов (по файлам для watch mode)
+    this.tokensByFile = new Map(); // filename → Set<tokens>
+
+    // Virtual modules plugin instance (создаётся в apply)
+    this.virtualModules = null;
+  }
+
+  apply(compiler) {
+    const projectRoot = compiler.context;
+
+    // ========================================
+    // 1. VIRTUAL MODULE через rspack.experiments.VirtualModulesPlugin
+    // ========================================
+
+    // Создаём virtual modules plugin с начальным placeholder
+    this.virtualModules = new VirtualModulesPlugin({
+      [VIRTUAL_MODULE_PATH]: LAYER_PLACEHOLDER
+    });
+
+    // Применяем virtual modules plugin
+    this.virtualModules.apply(compiler);
+
+    // Регистрируем alias для удобного импорта
+    compiler.options.resolve = compiler.options.resolve || {};
+    compiler.options.resolve.alias = compiler.options.resolve.alias || {};
+    compiler.options.resolve.alias[VIRTUAL_MODULE_ID] = path.join(projectRoot, VIRTUAL_MODULE_PATH);
+
+    // ========================================
+    // 2. LOADER для извлечения токенов
+    // ========================================
+
+    const loaderPath = path.resolve(import.meta.dirname, 'loader.js');
+    const extensionsRegex = new RegExp(
+      `\\.(${this.options.extensions.map(e => e.slice(1)).join('|')})$`
+    );
+
+    compiler.options.module = compiler.options.module || {};
+    compiler.options.module.rules = compiler.options.module.rules || [];
+
+    // Loader для извлечения токенов из .vue/.js/.ts
+    compiler.options.module.rules.unshift({
+      test: extensionsRegex,
+      enforce: 'pre',
+      use: [{
+        loader: loaderPath,
+        options: {
+          plugin: this,
+          include: this.options.include,
+          exclude: this.options.exclude,
+        }
+      }],
+    });
+
+    // ========================================
+    // 3. PROCESS ASSETS - заменяем placeholder на CSS
+    // ========================================
+
+    compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          stage: compilation.constructor.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
+        },
+        (assets) => {
+          const startTime = performance.now();
+          const css = this.generateCSS();
+          const duration = performance.now() - startTime;
+
+          for (const [filename, asset] of Object.entries(assets)) {
+            if (!filename.endsWith('.css') && !filename.endsWith('.js')) {
+              continue;
+            }
+
+            let source = asset.source().toString();
+            let replaced = false;
+
+            // Заменяем placeholder
+            source = source.replace(LAYER_PLACEHOLDER_RE, () => {
+              replaced = true;
+              return css;
+            });
+
+            // Для JS бандлов - escaped версия
+            if (source.includes('#--martyrs--')) {
+              source = source.replace(
+                /#--martyrs--[^}]*\{[^}]*layer[^}]*:[^}]*__ALL__[^}]*;?\s*\}/g,
+                css.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
+              );
+              replaced = true;
+            }
+
+            if (replaced) {
+              const { RawSource } = compiler.webpack.sources;
+              compilation.updateAsset(filename, new RawSource(source));
+              console.log(`[MartyrsJIT] ${this.tokens.size} tokens in ${duration.toFixed(2)}ms`);
+            }
+          }
+        }
+      );
+    });
+
+
+    // ========================================
+    // 5. WATCH MODE
+    // ========================================
+
+    compiler.hooks.watchRun.tap(PLUGIN_NAME, (compiler) => {
+      // Удаляем токены только для удалённых файлов
+      if (compiler.removedFiles) {
+        for (const file of compiler.removedFiles) {
+          this.tokensByFile.delete(file);
+        }
+      }
+      // Сбрасываем кэш CSS (токены изменённых файлов обновятся через loader)
+      this.jit.reset();
+    });
+  }
+
+  /**
+   * Извлекает токены из файла (вызывается из loader)
+   */
+  extractFromFile(content, filename) {
+    const isIncluded = this.options.include.some(dir =>
+      filename.includes(`/${dir}/`) || filename.includes(`\\${dir}\\`) || filename.includes(dir)
+    );
+
+    const isExcluded = this.options.exclude.some(dir =>
+      filename.includes(dir)
+    );
+
+    if (!isIncluded || isExcluded) {
+      return;
+    }
+
+    const fileTokens = extractTokens(content, filename);
+    this.tokensByFile.set(filename, new Set(fileTokens));
+  }
+
+  /**
+   * Собирает все токены из всех файлов (дедупликация через Set)
+   */
+  get tokens() {
+    const allTokens = new Set();
+    for (const tokens of this.tokensByFile.values()) {
+      for (const t of tokens) allTokens.add(t);
+    }
+    return allTokens;
+  }
+
+  /**
+   * Генерирует CSS
+   */
+  generateCSS() {
+    const tokens = Array.from(this.tokens);
+    const css = this.jit.generate(tokens);
+    // Порядок: base < components < utilities (последний = высший приоритет)
+    return `/* Martyrs JIT - ${tokens.length} tokens */\n@layer base, components, utilities;\n@layer utilities {\n${css}\n}`;
+  }
+}
+
+export default MartyrsJitPlugin;