@dxtmisha/scripts 0.6.3 → 0.7.2

package/src/classes/Library/LibraryList.ts

@@ -0,0 +1,184 @@
+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 creating a file with a list of components.
+ *
+ * Класс для создания файла со списком компонентов.
+ */
+export class LibraryList {
+  protected readonly packageName: string
+
+  /**
+   * Constructor
+   * @param items object for working with the list of components / объект для работы со списком компонентов
+   */
+  constructor(
+    protected readonly items: LibraryItems
+  ) {
+    this.packageName = getPackageJson()?.name
+  }
+
+  /**
+   * Creates files with a list of components.
+   *
+   * Создает файлы со списком компонентов.
+   */
+  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}$`
+    }
+
+    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

@@ -20,7 +20,6 @@ export class LibraryMedia {
    * Constructor
    * @param items object for working with the list of components/ объект для работы со списком компонентов
    */
-
   constructor(
     protected readonly items: LibraryItems
   ) {
@@ -117,7 +116,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,70 @@
+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.
+ *
+ * Класс для создания файла плагина.
+ */
+export class LibraryPlugin {
+  /**
+   * Constructor
+   * @param items object for working with the list of components / объект для работы со списком компонентов
+   */
+  constructor(
+    protected readonly items: LibraryItems
+  ) {
+  }
+
+  /**
+   * Creates a plugin file.
+   *
+   * Создает файл плагина.
+   */
+  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,106 @@
+import { PropertiesConfig } from '../Properties/PropertiesConfig'
+import { LibraryItems } from './LibraryItems'
+
+import type { LibraryData } from '../../types/libraryTypes'
+
+/**
+ * Class for creating a file with type exports.
+ *
+ * Класс для создания файла с экспортом типов.
+ */
+export class LibraryTypes {
+  /**
+   * Constructor
+   * @param items object for working with the list of components / объект для работы со списком компонентов
+   */
+  constructor(
+    protected readonly items: LibraryItems
+  ) {
+  }
+
+  /**
+   * Creates a file with type exports.
+   *
+   * Создает файл с экспортом типов.
+   */
+  make(): void {
+    this.items.write(
+      'types',
+      [
+        ...this.initImports(),
+        '',
+        ...this.initExports(),
+        '',
+        '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(
+          `export const ${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/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'
@@ -92,7 +93,7 @@ export class PackageInitItem {
    * Получает файлы шаблонов, если указан путь к шаблонам.
    */
   protected getTemplates(): PackageInitItemFile[] {
-    if (this.templates) {
+    if (isFilled(this.templates)) {
       return this.getFileByList([this.templates])
     }
 
@@ -191,6 +192,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/PropertiesConfig.ts

@@ -38,6 +38,15 @@ export class PropertiesConfig {
     return this.config.name ?? 'ui'
   }
 
+  /**
+   * Returns alternative design names.
+   *
+   * Возвращает альтернативные названия дизайна.
+   */
+  static getDesignAlternativeName(): string[] | undefined {
+    return this.config?.alternativeName
+  }
+
   /**
    * Returns the separator symbol.
    *

package/src/classes/Properties/PropertiesFile.ts

@@ -7,7 +7,7 @@ import { hasNativeDirname } from '../../functions/hasNativeDirname'
 import { UI_FILE_INDEX, UI_MODULES, UI_PROJECT_NAME } from '../../config'
 
 export type PropertiesFilePath = string | string[]
-export type PropertiesFileValue<T = any> = string | Record<string, T>
+export type PropertiesFileValue<T = any> = string | Record<string, T> | Buffer
 
 const dirnamePath = hasNativeDirname() ? __dirname : requirePath.dirname(fileURLToPath(import.meta.url))
 
@@ -417,16 +417,18 @@ export class PropertiesFile {
    * Записывает по выбранному пути.
    * @param path path to the file/ путь к файлу
    * @param value values for storage/ значения для хранения
+   * @param transform whether to transform the value/ преобразовывать ли значение
    */
   static writeByPath<T extends PropertiesFileValue>(
     path: PropertiesFilePath,
-    value: T
+    value: T,
+    transform: boolean = true
   ): void {
     this.createDir(path)
 
     requireFs.writeFileSync(
       this.joinPath(path),
-      typeof value === 'object' ? JSON.stringify(value) : value
+      transform && typeof value === 'object' ? JSON.stringify(value, undefined, 2) : value as any
     )
   }
 

package/src/classes/Styles/Styles.ts

@@ -188,6 +188,7 @@ export class Styles {
         [
           `@use "./${FILE_BASIC}";`,
           `@use "@dxtmisha/styles/${FILE_PROPERTIES}" as ui;`,
+          `@use "@dxtmisha/media/style.css";`,
           '',
           '@include ui.initGlobal;',
           `@include ui.initDesignBody('${design}.main');`

package/src/config.ts

@@ -21,6 +21,7 @@ export const UI_FLAG_NOT_EXPORT = /\/\/ *export:none/
 
 /** Folder where all the code is stored/ Папка, где хранится весь код */
 export const UI_DIR_IN = 'src'
+export const UI_DIR_AI = 'ai'
 /** Components directory name/ Название директории компонентов */
 export const UI_DIR_COMPONENTS = 'components'
 /** Constructors directory name/ Название директории конструкторов */
@@ -34,6 +35,7 @@ export const UI_DIR_DIST_TEMPORARY = 'dist-temporary'
 export const UI_DIR_PROMPT = 'prompt'
 export const UI_DIR_PACKAGES = 'packages'
 
+export const UI_DIRS_AI_WIKI = [UI_DIR_IN, UI_DIR_WIKI, UI_DIR_AI]
 /** Name of the path to tokens/ Название пути к токенам */
 export const UI_DIRS_TOKENS = [UI_DIR_IN, 'media']
 /** Directory containing the list of icons/ Директория со списком иконок */
@@ -74,6 +76,10 @@ export const UI_FILE_NAME_FLAGS = 'flags'
 /** File name for storing media data and icons/ Название файла для хранения медиа-данных и иконок */
 export const UI_FILE_NAME_MEDIA = 'media'
 
+/** File name for the list of component descriptions/ Название файла для список описаний компонентов */
+export const UI_FILE_NAME_DESIGN = 'design'
+export const UI_FILE_NAME_PLUGIN = 'plugin'
+
 /** File name for the list of component descriptions for the wiki/ Название файла для список описаний компонентов для wiki */
 export const UI_FILE_NAME_WIKI = 'wiki'
 
@@ -84,6 +90,7 @@ export const UI_FILE_NAME_VITE_WORKERS = 'vite-workers.config.ts'
 export const UI_FILE_INDEX = 'index.ts'
 
 export const UI_FILE_AI_TYPES = 'ai-types.txt'
+export const UI_FILE_STYLE_SCSS = 'style.scss'
 
 /** SCSS file extension/ Расширение файлов SCSS */
 export const UI_EXTENSION_STYLE = 'scss'

package/src/library.ts

@@ -10,10 +10,14 @@ export * from './classes/Ai/AiGoogle'
 export * from './classes/Ai/AiGoogleCli'
 export * from './classes/Ai/AiGoogleCliLite'
 export * from './classes/Ai/AiGoogleLite'
+export * from './classes/Build/buildFunctional'
 export * from './classes/BuildItem'
 export * from './classes/Design/DesignTypes'
 export * from './classes/Design/DesignTypescript'
 export * from './classes/Git/GitRead'
+export * from './classes/Library/LibraryExport'
+export * from './classes/Library/LibraryList'
+export * from './classes/Library/LibraryPlugin'
 export * from './classes/Properties/PropertiesFile'
 
 // Composables

package/src/media/templates/component/{DesignComponentWikiAi.vue → DesignComponentAiWiki.vue}

@@ -7,14 +7,14 @@
 // :component-import [!] System label / Системная метка
 
 defineOptions({
-  name: 'DesignComponentWikiAi'
+  name: 'DesignComponentAiWiki'
 })
 </script>
 
 <!-- :component.once <template> -->
 <!-- :component.once   <DxtTestWiki -->
 <!-- :component.once     design="Design" -->
-<!-- :component.once     :wiki="ImageWikiStorybook" -->
+<!-- :component.once     :wiki="ComponentWikiStorybook" -->
 <!-- :component.once     :component="DesignComponent" -->
 <!-- :component.once   > -->
     <!-- :component-render [!] System label / Системная метка -->

package/src/media/templates/component/props.ts

@@ -5,7 +5,7 @@ export const propsValues = {
   // :values [!] System label / Системная метка
 }
 
-interface PropsToken {
+type PropsToken = {
   // :type [!] System label / Системная метка
   // :type [!] System label / Системная метка
 }
@@ -13,8 +13,7 @@ interface PropsToken {
 /**
  * Type describing incoming properties/ Тип, описывающий входящие свойства
  */
-export interface ComponentProps extends/* :component.once  ComponentPropsBasic, */ PropsToken {
-}
+export type ComponentProps = /* :component.once  ComponentPropsBasic & */ PropsToken
 
 /**
  * Default value for property/ Значение по умолчанию для свойства

package/src/media/templates/component/styleToken.scss

@@ -1,6 +1,6 @@
 // :component.once @use "../../../styles/[project]/properties";
 @use "@dxtmisha/styles/properties" as ui;
-// :component.once @use "@dxtmisha/constructor/Component/style" as Component;
+// :component.once @use "@dxtmisha/constructor/style.scss" as Component;
 
 @include ui.initDesignBasic('[design].[component]') {
   // Basic styles for a component

package/src/media/templates/constructors/props.ts

@@ -1,9 +1,9 @@
-interface ConstructorsPropsToken {
+type ConstructorsPropsToken = {
   // :type [!] System label / Системная метка
   // :type [!] System label / Системная метка
 }
 
-export interface ConstructorsPropsBasic {
+export type ConstructorsPropsBasic = {
   // TODO: Location for a custom property / Место для пользовательского свойства
 }
 
@@ -12,8 +12,7 @@ export interface ConstructorsPropsBasic {
  *
  * Тип, описывающий входящие свойства.
  */
-export interface ConstructorsProps extends ConstructorsPropsBasic, ConstructorsPropsToken {
-}
+export type ConstructorsProps = ConstructorsPropsBasic & ConstructorsPropsToken
 
 /**
  * Default value for property.

package/src/media/templates/packages/library/src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-import './styles.scss'
+import './style.scss'
 
 createApp(App).mount('#app')

package/src/media/templates/packages/project/design.config.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../design.config.json"
+}

package/src/media/templates/packages/project/index.html

@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>player</title>
+    <title>@packages/library</title>
   </head>
   <body>
     <div id="app"></div>

package/src/media/templates/packages/project/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
-import './style.scss'
 import App from './App.vue'
 
+import './style.scss'
+
 createApp(App).mount('#app')

package/src/media/templates/packages/project/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/types/configTypes.ts

@@ -12,6 +12,9 @@ export type DesignUiConfig = {
   /** Design system name / Название дизайн-системы */
   name: string
 
+  /** Alternative names / Альтернативные названия */
+  alternativeName?: string[]
+
   /**
    * Abbreviation symbol, this key will be used to separate into sub-branches /
    * Символ сокращения, такой ключ будет разделять на под-ветки

package/src/types/designTypes.ts

@@ -1,5 +1,17 @@
 import type { PropertyItem } from './propertyTypes'
 
+/** Item for design flags / Элемент флагов дизайна */
+export type DesignFlagsItem = {
+  /** Flag name / Название флага */
+  name: string
+  /** X coordinate / Координата X */
+  x: number
+  /** Y coordinate / Координата Y */
+  y: number
+}
+/** List of design flags items / Список элементов флагов дизайна */
+export type DesignFlagsList = DesignFlagsItem[]
+
 /** Design structure state with hierarchy and property information / Состояние структуры дизайна с иерархией и информацией о свойствах */
 export type DesignStructureState = {
   /** Element index identifier / Идентификатор индекса элемента */

package/src/types/libraryTypes.ts

@@ -23,7 +23,7 @@ export type LibraryItem = {
 }
 
 /** List of library items / Список элементов библиотеки */
-export type LibraryList = LibraryItem[]
+export type LibraryAll = LibraryItem[]
 
 /** Library files item with name, path and file list / Элемент файлов библиотеки с именем, путём и списком файлов */
 export type LibraryFilesItem = {