@dxtmisha/scripts 0.6.3 → 0.7.6

package/src/classes/Library/LibraryItems.ts

@@ -5,7 +5,7 @@ import { toCamelCaseFirst, toKebabCase } from '@dxtmisha/functional-basic'
 import { PropertiesConfig } from '../Properties/PropertiesConfig'
 import { PropertiesFile } from '../Properties/PropertiesFile'
 
-import type { LibraryData, LibraryList } from '../../types/libraryTypes'
+import type { LibraryData, LibraryAll } from '../../types/libraryTypes'
 
 import { UI_DIRS_LIBRARY, UI_DIRS_COMPONENTS } from '../../config'
 
@@ -15,7 +15,7 @@ import { UI_DIRS_LIBRARY, UI_DIRS_COMPONENTS } from '../../config'
  * Класс для работы со списком компонентов.
  */
 export class LibraryItems {
-  protected readonly items: LibraryList
+  protected readonly items: LibraryAll
 
   /**
    * Constructor
@@ -29,7 +29,7 @@ export class LibraryItems {
    *
    * Возвращает список компонентов, разделенных по группам дизайна.
    */
-  get(): LibraryList {
+  get(): LibraryAll {
     return this.items
   }
 
@@ -46,6 +46,24 @@ export class LibraryItems {
     return list
   }
 
+  /**
+   * Returns the number of components.
+   *
+   * Возвращает количество компонентов.
+   */
+  getCount(): number {
+    return this.getComponentList().length
+  }
+
+  /**
+   * Returns the path to the design system components directory
+   *
+   * Возвращает путь к директории компонентов дизайн-системы
+   */
+  getComponentsPath(): string[] {
+    return [...UI_DIRS_COMPONENTS, PropertiesConfig.getProjectName()]
+  }
+
   /**
    * Writes data in the file.
    *
@@ -104,21 +122,12 @@ export class LibraryItems {
     return list
   }
 
-  /**
-   * Returns the path to the design system components directory
-   *
-   * Возвращает путь к директории компонентов дизайн-системы
-   */
-  protected getComponentsPath(): string[] {
-    return [...UI_DIRS_COMPONENTS, PropertiesConfig.getProjectName()]
-  }
-
   /**
    * Initializes data about the component.
    *
    * Инициализирует данные о компоненте.
    */
-  protected initItems(): LibraryList {
+  protected initItems(): LibraryAll {
     return [
       {
         name: PropertiesConfig.getDesignName(),

package/src/classes/Library/LibraryList.ts

@@ -0,0 +1,189 @@
+import { LibraryItems } from './LibraryItems'
+
+import { forEach, toCamelCase, toKebabCase, uniqueArray } from '@dxtmisha/functional-basic'
+import { getPackageJson } from '../../functions/getPackageJson'
+
+import { PropertiesConfig } from '../Properties/PropertiesConfig'
+import { PropertiesFile } from '../Properties/PropertiesFile'
+
+import { UI_DIRS_STYLES, UI_FILE_NAME_DESIGN } from '../../config'
+
+/**
+ * Class for generating the design system overview file, including component imports and regular expressions.
+ *
+ * Класс для создания обзорного файла дизайн-системы, включая импорты компонентов и регулярные выражения.
+ */
+export class LibraryList {
+  protected readonly packageName: string
+
+  /**
+   * Constructor for LibraryList.
+   *
+   * Конструктор для LibraryList.
+   * @param items object for working with the list of components / объект для работы со списком компонентов
+   */
+  constructor(
+    protected readonly items: LibraryItems
+  ) {
+    this.packageName = getPackageJson()?.name
+  }
+
+  /**
+   * Creates the design system overview file (`design.ts`) with metadata and component lists.
+   *
+   * Создает обзорный файл дизайн-системы (`design.ts`) с метаданными и списками компонентов.
+   * @returns this
+   */
+  make(): this {
+    const list = this.getComponents()
+    const listReg = this.getComponentsReg()
+
+    this.items.write(
+      UI_FILE_NAME_DESIGN,
+      [
+        'import type { PluginComponentImports } from \'@dxtmisha/constructor/plugin\'',
+        '',
+        `// count: ${this.items.getCount()}`,
+        `export const designName: string = '${PropertiesConfig.getDesignName()}'`,
+        `export const packageName: string = '${this.packageName}'`,
+        `export const componentsReg: RegExp = ${listReg}`,
+        `export const styleVarsReg: RegExp = ${this.getVarsReg()}`,
+        '',
+        'export const componentsList: PluginComponentImports = [',
+        list.join(',\r\n'),
+        ']'
+      ]
+    )
+
+    return this
+  }
+
+  /**
+   * Returns a list of components for the file.
+   *
+   * Возвращает список компонентов для файла.
+   */
+  protected getComponents(): string[] {
+    const list: string[] = []
+
+    if (this.packageName) {
+      forEach(
+        this.items.getComponentList(),
+        (item) => {
+          list.push(`  {
+    name: '${item.codeFull}',
+    reg: ${this.getReg([item.name], true)}
+  }`
+          )
+        })
+    }
+
+    return list
+  }
+
+  /**
+   * Returns a regular expression for all components.
+   *
+   * Возвращает регулярное выражение для всех компонентов.
+   */
+  protected getComponentsReg(): string {
+    const names: string[] = forEach(
+      this.items.getComponentList(),
+      item => item.name
+    )
+
+    return this.getReg(names)
+  }
+
+  /**
+   * Returns a list of design names.
+   *
+   * Возвращает список названий дизайнов.
+   */
+  protected getDesigns(): string[] {
+    return [
+      PropertiesConfig.getDesignName(),
+      ...(PropertiesConfig.getDesignAlternativeName() ?? [])
+    ]
+  }
+
+  /**
+   * Generates a regular expression for the list of names.
+   *
+   * Генерирует регулярное выражение для списка имен.
+   * @param names list of names / список имен
+   * @param only exact match / точное совпадение
+   */
+  protected getReg(
+    names: string[],
+    only: boolean = false
+  ): string {
+    const designs = this.getDesigns().join('|')
+    const namesReg = this.getRegName(names)
+    let code = `((${designs})-?(${namesReg}))`
+
+    if (only) {
+      code = `^${code}$`
+    } else {
+      code = `${code}(?![\\w-])`
+    }
+
+    return `/${code}/ig`
+  }
+
+  /**
+   * Formats names for regular expression.
+   *
+   * Форматирует имена для регулярного выражения.
+   * @param names list of names / список имен
+   */
+  protected getRegName(names: string[]): string {
+    return forEach(
+      names,
+      name => toKebabCase(name)
+        .replace('-', '-?')
+    ).join('|')
+  }
+
+  /**
+   * Returns a list of CSS variables.
+   *
+   * Возвращает список CSS переменных.
+   */
+  protected getVars(): string[] {
+    const design: string = toCamelCase(PropertiesConfig.getDesignName())
+    const path = [...UI_DIRS_STYLES, PropertiesConfig.getProjectName(), 'vars.scss']
+    const context = PropertiesFile.readFileOnly(path)
+    const data: string[] = []
+
+    if (context) {
+      const vars = context.match(/(?<=--)[^: ]+(?=:)/g)
+
+      if (vars) {
+        vars.forEach((varName) => {
+          const value = varName.match(/^([^-]+)-(.*?)$/)
+
+          if (
+            value
+            && value?.[1] === design
+            && value?.[2]
+          ) {
+            const varName = value[2].split('-')
+
+            if (varName.length > 2) {
+              varName.pop()
+            }
+
+            data.push(varName.join('-'))
+          }
+        })
+      }
+    }
+
+    return uniqueArray(data)
+  }
+
+  protected getVarsReg(): string {
+    return `/(?<=var\\(--)(${this.getVars().join('|')})/ig`
+  }
+}

package/src/classes/Library/LibraryMedia.ts

@@ -1,32 +1,39 @@
 // export:none
 
-import { toCamelCase } from '@dxtmisha/functional-basic'
+import { toCamelCase, toCamelCaseFirst } from '@dxtmisha/functional-basic'
 
 import { PropertiesConfig } from '../Properties/PropertiesConfig'
 import { PropertiesFile } from '../Properties/PropertiesFile'
 
 import { LibraryItems } from './LibraryItems'
 
-import { UI_DIRS_ICONS, UI_FILE_NAME_MEDIA } from '../../config'
+import { UI_DIRS_ICONS, UI_FILE_NAME_MEDIA, UI_FILE_NAME_STYLE } from '../../config'
 import type { LibraryIconItem } from '../../types/libraryTypes'
 
 /**
- * Class for generating the media data connection file.
+ * Class for generating connection files for media data (primarily icons) and style entry points.
  *
- * Класс для формирования файла подключения медиа-данных.
+ * Класс для формирования файлов подключения медиа-данных (прежде всего иконок) и точек входа стилей.
  */
 export class LibraryMedia {
   /**
-   * Constructor
-   * @param items object for working with the list of components/ объект для работы со списком компонентов
+   * Constructor for LibraryMedia.
+   *
+   * Конструктор для LibraryMedia.
+   * @param items object for working with the list of components / объект для работы со списком компонентов
    */
-
   constructor(
     protected readonly items: LibraryItems
   ) {
   }
 
+  /**
+   * Generates media connection files and style entries.
+   *
+   * Генерирует файлы подключения медиа и записи стилей.
+   */
   make(): void {
+    const projectName = toCamelCaseFirst(PropertiesConfig.getProjectName())
     const name = toCamelCase(PropertiesConfig.getDesignName())
     const isIcons = this.getIconImport().length > 0
 
@@ -44,6 +51,13 @@ export class LibraryMedia {
         ]
       )
     }
+
+    this.items.write(
+      UI_FILE_NAME_STYLE,
+      [
+        `import '../styles/${projectName}/main.scss'`
+      ]
+    )
   }
 
   /**
@@ -117,7 +131,7 @@ export class LibraryMedia {
     const data: string[] = []
 
     this.getIconImport().forEach((item) => {
-      data.push(`import ${item.name} from '${item.path}'`)
+      data.push(`const ${item.name} = async () => (await import('${item.path}'))?.default`)
     })
 
     return data

package/src/classes/Library/LibraryPlugin.ts

@@ -0,0 +1,73 @@
+import { toCamelCaseFirst, toKebabCase } from '@dxtmisha/functional-basic'
+
+import { PropertiesConfig } from '../Properties/PropertiesConfig'
+import { LibraryItems } from './LibraryItems'
+
+import { UI_FILE_NAME_PLUGIN } from '../../config'
+
+/**
+ * Class for creating a plugin file for the design system.
+ *
+ * Класс для создания файла плагина для дизайн-системы.
+ */
+export class LibraryPlugin {
+  /**
+   * Constructor for LibraryPlugin.
+   *
+   * Конструктор для LibraryPlugin.
+   * @param items object for working with the list of components / объект для работы со списком компонентов
+   */
+  constructor(
+    protected readonly items: LibraryItems
+  ) {
+  }
+
+  /**
+   * Creates a plugin file that initializes the Vite plugin for the library.
+   *
+   * Создает файл плагина, который инициализирует плагин Vite для библиотеки.
+   * @returns this
+   */
+  make(): this {
+    const design = PropertiesConfig.getDesignName()
+
+    this.items.write(
+      UI_FILE_NAME_PLUGIN,
+      [
+        'import type { Plugin as VitePlugin } from \'vite\'',
+        'import { type PluginOptions, Plugin } from \'@dxtmisha/constructor/plugin\'',
+        '',
+        'import {',
+        '  componentsList,',
+        '  componentsReg,',
+        '  designName,',
+        '  packageName,',
+        '  styleVarsReg',
+        '} from \'./design\'',
+        '',
+        '/**',
+        ' * Initializes the Vite plugin for the design system.',
+        ' *',
+        ' * Инициализирует плагин Vite для дизайн-системы.',
+        ' * @param options plugin options / настройки плагина',
+        ' */',
+        `export function ui${toCamelCaseFirst(design)}VitePlugin(`,
+        '  options: PluginOptions = {}',
+        '): VitePlugin {',
+        '  return new Plugin(',
+        '    designName,',
+        '    packageName,',
+        '    componentsReg,',
+        '    styleVarsReg,',
+        '    componentsList,',
+        `    'vite-plugin-${toKebabCase(design)}-ui',`,
+        '    options',
+        '  )',
+        '    .init()',
+        '}'
+      ]
+    )
+
+    return this
+  }
+}

package/src/classes/Library/LibraryTypes.ts

@@ -0,0 +1,130 @@
+import { PropertiesConfig } from '../Properties/PropertiesConfig'
+import { LibraryItems } from './LibraryItems'
+
+import type { LibraryData } from '../../types/libraryTypes'
+
+/**
+ * Class for generating global type definitions for Vue components.
+ *
+ * Класс для создания глобальных определений типов для компонентов Vue.
+ */
+export class LibraryTypes {
+  /**
+   * Constructor for LibraryTypes.
+   *
+   * Конструктор для LibraryTypes.
+   * @param items object for working with the list of components / объект для работы со списком компонентов
+   */
+  constructor(
+    protected readonly items: LibraryItems
+  ) {
+  }
+
+  /**
+   * Creates the type definition file (`types.d.ts`) for global Vue components.
+   *
+   * Создает файл определений типов (`types.d.ts`) для глобальных компонентов Vue.
+   */
+  make(): void {
+    this.items.write(
+      'types',
+      [
+        // 'import { type App } from \'vue\'',
+        ...this.initImports(),
+        // '',
+        // 'export const components = {',
+        // this.initExports(),
+        // '}',
+        // '',
+        // 'export const useVueComponentsPlugin = {',
+        // '  install: async (app: App) => {',
+        // ...this.initIncludeVueComponents(),
+        // '  }',
+        // '}',
+        '',
+        'declare module \'@vue/runtime-core\' {',
+        '  export interface GlobalComponents {',
+        ...this.initGlobalComponentsVue(),
+        '  }',
+        '}'
+      ]
+    )
+  }
+
+  /**
+   * Returns the path to the component.
+   *
+   * Возвращает путь к компоненту.
+   * @param component component data / данные компонента
+   */
+  protected getPathComponent(component: LibraryData): string {
+    return `../components/${PropertiesConfig.getProjectName()}/${component.dir}`
+  }
+
+  /**
+   * Returns a list of imports for the file.
+   *
+   * Возвращает список импортов для файла.
+   */
+  protected initImports(): string[] {
+    const list: string[] = []
+
+    this.items.getComponentList()
+      .forEach((component) => {
+        list.push(
+          `import _${component.codeFull} from '${this.getPathComponent(component)}/${component.codeFull}.vue'`
+        )
+      })
+
+    return list
+  }
+
+  /**
+   * Returns a list of exports for the file.
+   *
+   * Возвращает список экспортов для файла.
+   */
+  protected initExports(): string {
+    const list: string[] = []
+
+    this.items.getComponentList()
+      .forEach((component) => {
+        list.push(
+          `  ${component.codeFull}: _${component.codeFull}`
+        )
+      })
+
+    return list.join(',\r\n')
+  }
+
+  protected initIncludeVueComponents(): string[] {
+    const list: string[] = []
+
+    this.items.getComponentList()
+      .forEach((component) => {
+        list.push(
+          `    app.component('${component.codeFull}', _${component.codeFull})`
+        )
+      })
+
+    return list
+  }
+
+  /**
+   * Returns a list of global components for Vue.
+   *
+   * Возвращает список глобальных компонентов для Vue.
+   */
+  protected initGlobalComponentsVue(): string[] {
+    const list: string[] = []
+
+    this.items.getComponentList()
+      .forEach((component) => {
+        list.push(
+          `    ${component.codeFull}: typeof _${component.codeFull}`
+        )
+      })
+
+    return list
+  }
+}

package/src/classes/Package/PackageInit.ts

@@ -6,11 +6,19 @@ import { PackageInitItem } from './PackageItem'
 import { UI_DIR_PACKAGES } from '../../config'
 
 /**
- * Initializes the package configuration and environment.
+ * Class for initializing the package structure and development environment based on templates.
  *
- * Инициализирует конфигурацию пакета и окружение.
+ * Класс для инициализации структуры пакета и среды разработки на основе шаблонов.
  */
 export class PackageInit {
+  /**
+   * Constructor for PackageInit.
+   *
+   * Конструктор для PackageInit.
+   * @param type package type identifier / идентификатор типа пакета
+   * @param templates optional list of templates to apply / необязательный список шаблонов для применения
+   * @param dir base directory for packages / базовая директория для пакетов
+   */
   constructor(
     protected readonly type: string,
     protected readonly templates?: string,
@@ -19,9 +27,9 @@ export class PackageInit {
   }
 
   /**
-   * Creates the package structure and initializes files.
+   * Triggers the package creation process and initializes required files.
    *
-   * Создает структуру пакета и инициализирует файлы.
+   * Запускает процесс создания пакета и инициализирует необходимые файлы.
    */
   make() {
     console.log(`Initializing package of type: ${this.type} with templates: ${this.templates}`)

package/src/classes/Package/PackageItem.ts

@@ -2,6 +2,7 @@
 
 import requirePath from 'node:path'
 import { fileURLToPath } from 'node:url'
+import { isFilled } from '@dxtmisha/functional-basic'
 import { hasNativeDirname } from '../../functions/hasNativeDirname'
 
 import { PropertiesConfig } from '../Properties/PropertiesConfig'
@@ -28,11 +29,20 @@ type PackageInitItemFile = {
 }
 
 /**
- * Represents a single package item with its metadata and operations.
+ * Class for initializing a single package component, managing its files, dependencies, and integration.
  *
- * Представляет отдельный элемент пакета с его метаданными и операциями.
+ * Класс для инициализации отдельного компонента пакета, управления его файлами, зависимостями и интеграцией.
  */
 export class PackageInitItem {
+  /**
+   * Constructor for PackageInitItem.
+   *
+   * Конструктор для PackageInitItem.
+   * @param name unique name of the component / уникальное имя компонента
+   * @param dir path to the component directory / путь к директории компонента
+   * @param type package type identifier / идентификатор типа пакета
+   * @param templates optional list of templates to apply / необязательный список шаблонов для применения
+   */
   constructor(
     protected readonly name: string,
     protected readonly dir: string[],
@@ -42,9 +52,9 @@ export class PackageInitItem {
   }
 
   /**
-   * Initializes the package item by creating files from samples and templates.
+   * Performs the full initialization cycle for the package item, including file creation and integration updates.
    *
-   * Инициализирует элемент пакета, создавая файлы из образцов и шаблонов.
+   * Выполняет полный цикл инициализации элемента пакета, включая создание файлов и обновление интеграций.
    */
   make() {
     console.log('Package init in:', this.dir)
@@ -92,7 +102,7 @@ export class PackageInitItem {
    * Получает файлы шаблонов, если указан путь к шаблонам.
    */
   protected getTemplates(): PackageInitItemFile[] {
-    if (this.templates) {
+    if (isFilled(this.templates)) {
       return this.getFileByList([this.templates])
     }
 
@@ -191,6 +201,7 @@ export class PackageInitItem {
   protected writeFile(path: string, content: string): void {
     const contentEdit = content
       .replace(/@packages\/library/g, this.getProjectName())
+      .replace(/\[name]/g, this.getName())
 
     PropertiesFile.writeByPath(path, contentEdit)
     PropertiesFile.chmod(path)

package/src/classes/Properties/Properties.ts

@@ -45,22 +45,33 @@ import { type PropertyList } from '../../types/propertyTypes'
 const FILE_CACHE = 'properties'
 
 /**
- * The main class for working with tokens.
+ * Central orchestrator for the design system's token management.
+ * Responsible for loading, merging, and executing a multi-stage transformation pipeline to convert raw property definitions into structured, resolved data for various output formats.
  *
- * Главный класс для работы с токенами.
+ * Центральный оркестратор для управления токенами дизайн-системы.
+ * Отвечает за загрузку, слияние и выполнение многоэтапного конвейера преобразований для конвертации необработанных определений свойств в структурированные, разрешенные данные для различных выходных форматов.
  */
 export class Properties {
   private readonly designs: string[]
   private readonly items: PropertiesItems
 
   /**
-   * Constructor
+   * Constructor for Properties.
+   * Initializes the list of designs and triggers the token processing pipeline.
+   *
+   * Конструктор для Properties.
+   * Инициализирует список дизайнов и запускает конвейер обработки токенов.
    */
   constructor() {
     this.designs = PropertiesTool.getDesigns()
     this.items = new PropertiesItems(this.read())
   }
 
+  /**
+   * Returns the processed collection of design tokens.
+   *
+   * Возвращает обработанную коллекцию токенов дизайна.
+   */
   get() {
     return this.items
   }