@hywax/cms 0.0.2 → 0.0.4

package/.nuxt/cms/http-codes.ts

@@ -0,0 +1,8 @@
+export const HTTP_CODE_BAD_REQUEST = '400: Неверный запрос'
+export const HTTP_CODE_UNAUTHORIZED = '401: Не авторизован'
+export const HTTP_CODE_FORBIDDEN = '403: Доступ запрещен'
+export const HTTP_CODE_NOT_FOUND = '404: Не найдено'
+export const HTTP_CODE_REQUEST_TIMEOUT = '408: Время ожидания запроса истекло'
+export const HTTP_CODE_INTERNAL_SERVER_ERROR = '500: Внутренняя ошибка сервера'
+export const HTTP_CODE_BAD_GATEWAY = '502: Ошибка шлюза'
+export const HTTP_CODE_SERVICE_UNAVAILABLE = '503: Сервис недоступен'

package/.nuxt/cms/index.ts

@@ -1 +1,2 @@
-export { default as buttonClear } from './button-clear'
+export { default as buttonClear } from './button-clear'
+export { default as uploraImage } from './uplora-image'

package/.nuxt/cms/uplora-image.ts

@@ -0,0 +1,8 @@
+export default {
+  "slots": {
+    "root": "relative grid grid-cols-[100%] grid-rows-[100%] overflow-hidden",
+    "lqip": "bg-cover bg-no-repeat bg-center col-[1] row-[1]",
+    "picture": "aspect-3/2 col-[1] row-[1]",
+    "img": "w-full h-full block object-cover"
+  }
+}

package/cli/commands/make/component.mjs

@@ -0,0 +1,75 @@
+import { existsSync, promises as fsp } from 'node:fs'
+import process from 'node:process'
+import { defineCommand } from 'citty'
+import { consola } from 'consola'
+import { resolve } from 'pathe'
+import { camelCase, kebabCase, splitByCase, upperFirst } from 'scule'
+import templates from '../../templates.mjs'
+import { appendFile, sortFile } from '../../utils.mjs'
+
+export default defineCommand({
+  meta: {
+    name: 'component',
+    description: 'Создать новый компонент',
+  },
+  args: {
+    name: {
+      type: 'positional',
+      required: true,
+      description: 'Имя компонента',
+    },
+    prose: {
+      type: 'boolean',
+      description: 'Создать компонент для контента',
+    },
+    template: {
+      type: 'string',
+      description: 'Сгенерировать только шаблон',
+    },
+  },
+  async setup({ args }) {
+    const name = args.name
+    if (!name) {
+      consola.error('`name` argument is missing!')
+      process.exit(1)
+    }
+
+    const path = resolve('.')
+
+    for (const template of Object.keys(templates)) {
+      if (args.template && template !== args.template) {
+        continue
+      }
+
+      const { filename, contents } = templates[template](args)
+      if (!contents) {
+        continue
+      }
+
+      const filePath = resolve(path, filename)
+
+      if (existsSync(filePath)) {
+        consola.error(`🚨 ${filePath} уже существует!`)
+        continue
+      }
+
+      await fsp.writeFile(filePath, `${contents.trim()}\n`)
+
+      consola.success(`🪄 ${filePath} создан!`)
+    }
+
+    if (args.template) {
+      return
+    }
+
+    const themePath = resolve(path, `src/theme/${args.prose ? 'prose/' : ''}index.ts`)
+    await appendFile(themePath, `export { default as ${camelCase(name)} } from './${kebabCase(name)}'`)
+    await sortFile(themePath)
+
+    if (!args.prose) {
+      const typesPath = resolve(path, 'src/runtime/types/index.ts')
+      await appendFile(typesPath, `export * from '../components/${splitByCase(name).map((p) => upperFirst(p)).join('')}.vue'`)
+      await sortFile(typesPath)
+    }
+  },
+})

package/cli/commands/make/index.mjs

@@ -0,0 +1,12 @@
+import { defineCommand } from 'citty'
+import component from './component.mjs'
+
+export default defineCommand({
+  meta: {
+    name: 'make',
+    description: 'Команды для создания новых сущностей Hywax CMS',
+  },
+  subCommands: {
+    component,
+  },
+})

package/cli/index.mjs

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+import { defineCommand, runMain } from 'citty'
+import make from './commands/make/index.mjs'
+
+const main = defineCommand({
+  meta: {
+    name: 'cms',
+    description: 'Hywax CMS CLI',
+  },
+  subCommands: {
+    make,
+  },
+})
+
+runMain(main)

package/cli/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@hywax/cms-cli",
+  "type": "module",
+  "exports": {
+    ".": "./index.mjs"
+  },
+  "dependencies": {
+    "citty": "^0.1.6",
+    "consola": "^3.4.2",
+    "pathe": "^2.0.3",
+    "scule": "^1.3.0"
+  }
+}

package/cli/templates.mjs

@@ -0,0 +1,101 @@
+import { camelCase, kebabCase, splitByCase, upperFirst } from 'scule'
+
+function component({ name, prose }) {
+  const upperName = splitByCase(name).map((p) => upperFirst(p)).join('')
+  const camelName = camelCase(name)
+  const kebabName = kebabCase(name)
+  const path = 'cms'
+
+  return {
+    filename: `src/runtime/components/${prose ? 'prose/' : ''}${upperName}.vue`,
+    contents: `
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import type { ComponentConfig } from '${prose ? '../../types' : '../types'}'
+import theme from '#build/${path}/${prose ? 'prose/' : ''}${kebabName}'
+import { computed, useAppConfig } from '#imports'
+import { Primitive } from 'reka-ui'
+import { tv } from '${prose ? '../../utils/tv' : '../utils/tv'}'
+
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}>
+
+export interface ${upperName}Props {
+  as?: any
+  class?: any
+  ui?: ${upperName}['slots']
+}
+
+export interface ${upperName}Emits {
+  // 'update:modelValue': [string]
+}
+
+export interface ${upperName}Slots {
+  default?: () => any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<${upperName}Props>()
+const emit = defineEmits<${upperName}Emits>()
+defineSlots<${upperName}Slots>()
+
+const appConfig = useAppConfig() as ${upperName}['AppConfig']
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.cms?.${camelName} || {}) })())
+</script>
+`,
+  }
+}
+
+function test({ name, prose }) {
+  const upperName = splitByCase(name).map((p) => upperFirst(p)).join('')
+
+  return {
+    filename: `test/runtime/components/${upperName}.spec.ts`,
+    contents: prose
+      ? undefined
+      : `
+import type { ${upperName}Props, ${upperName}Slots } from '../../../src/runtime/components/${upperName}.vue'
+import { describe, it, expect } from 'vitest'
+import ${upperName} from '../../../src/runtime/components/${upperName}.vue'
+import ComponentRender from '../../component-render'
+
+describe('${upperName}', () => {
+  it.each([
+    // Props
+    ['с алиасом', { props: { as: 'section' } }],
+    ['с class', { props: { class: '' } }],
+    ['с ui', { props: { ui: {} } }],
+    // Slots
+    ['с дефолтным слотом', { slots: { default: () => 'Default slot' } }]
+  ])('рендерит %s корректно', async (nameOrHtml: string, options: { props?: ${upperName}Props, slots?: Partial<${upperName}Slots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, ${upperName})
+    expect(html).toMatchSnapshot()
+  })
+})
+`,
+  }
+}
+
+function theme({ name, prose }) {
+  const kebabName = kebabCase(name)
+
+  return {
+    filename: `src/theme/${prose ? 'prose/' : ''}${kebabName}.ts`,
+    contents: `
+export default {
+  slots: {
+    root: '',
+  },
+}
+`,
+  }
+}
+
+export default { component, test, theme }

package/cli/utils.mjs

@@ -0,0 +1,31 @@
+import { promises as fsp } from 'node:fs'
+
+export async function sortFile(path) {
+  const file = await fsp.readFile(path, 'utf-8')
+
+  const lines = file.trim().split('\n').sort()
+
+  await fsp.writeFile(path, `${lines.join('\n')}\n`)
+}
+
+export async function appendFile(path, contents) {
+  const file = await fsp.readFile(path, 'utf-8')
+
+  if (!file.includes(contents)) {
+    await fsp.writeFile(path, `${file.trim()}\n${contents}\n`)
+  }
+}
+
+export function normalizeLocale(locale) {
+  if (!locale) {
+    return ''
+  }
+
+  if (locale.includes('_')) {
+    return locale.split('_')
+      .map((part, index) => index === 0 ? part.toLowerCase() : part.toUpperCase())
+      .join('-')
+  }
+
+  return locale.toLowerCase()
+}

package/dist/module.d.mts

@@ -1,7 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 export * from '../dist/runtime/types/index.js';
 
-interface ModuleOptions {
+interface CMSOptions {
     /**
      * Name of the module
      * @defaultValue 'cms'
@@ -12,8 +12,32 @@ interface ModuleOptions {
      * @defaultValue 'C'
      */
     prefix?: string;
+    /**
+     * Fluxor URL
+     * @defaultValue 'https://fluxor.uplora.ru'
+     */
+    fluxorUrl?: string;
+    /**
+     * Prefix for the environment variables
+     * @defaultValue 'APP_'
+     */
+    envPrefix?: string;
+    /**
+     * HTTP codes
+     * @defaultValue {}
+     */
+    httpCodes?: Record<string, string>;
+}
+
+declare module '@nuxt/schema' {
+    interface ConfigSchema {
+        public?: {
+            fluxorUrl: string;
+            version: string;
+        };
+    }
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+declare const _default: _nuxt_schema.NuxtModule<CMSOptions, CMSOptions, false>;
 
 export { _default as default };
-export type { ModuleOptions };

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@hywax/cms",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "configKey": "cms",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -1,10 +1,75 @@
-import { addTypeTemplate, addTemplate, defineNuxtModule, hasNuxtModule, installModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { createResolver, addComponentsDir, addImportsDir, addPlugin, addImports, addServerImports, addServerImportsDir, addTypeTemplate, addTemplate, addServerTemplate, defineNuxtModule, hasNuxtModule, installModule } from '@nuxt/kit';
 import { defu } from 'defu';
-import 'node:url';
-import { kebabCase } from 'scule';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'pathe';
+import { snakeCase, kebabCase } from 'scule';
 
 const name = "@hywax/cms";
-const version = "0.0.2";
+const version = "0.0.4";
+
+function createContext(options, nuxt) {
+  const { resolve } = createResolver(import.meta.url);
+  const distDir = dirname(fileURLToPath(import.meta.url));
+  const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
+  return {
+    options,
+    resolve,
+    distDir,
+    runtimeDir,
+    nuxt
+  };
+}
+
+function getDefaultCMSConfig() {
+  return {};
+}
+const defaultModuleOptions = {
+  name: "cms",
+  prefix: "C",
+  fluxorUrl: "https://fluxor.uplora.ru",
+  envPrefix: "APP_",
+  httpCodes: {
+    badRequest: "400: \u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u0437\u0430\u043F\u0440\u043E\u0441",
+    unauthorized: "401: \u041D\u0435 \u0430\u0432\u0442\u043E\u0440\u0438\u0437\u043E\u0432\u0430\u043D",
+    forbidden: "403: \u0414\u043E\u0441\u0442\u0443\u043F \u0437\u0430\u043F\u0440\u0435\u0449\u0435\u043D",
+    notFound: "404: \u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E",
+    requestTimeout: "408: \u0412\u0440\u0435\u043C\u044F \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u044F \u0437\u0430\u043F\u0440\u043E\u0441\u0430 \u0438\u0441\u0442\u0435\u043A\u043B\u043E",
+    internalServerError: "500: \u0412\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u044F\u044F \u043E\u0448\u0438\u0431\u043A\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430",
+    badGateway: "502: \u041E\u0448\u0438\u0431\u043A\u0430 \u0448\u043B\u044E\u0437\u0430",
+    serviceUnavailable: "503: \u0421\u0435\u0440\u0432\u0438\u0441 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D"
+  }
+};
+
+function transformHttpCodes(httpCodes) {
+  return Object.entries(httpCodes).map(([code, value]) => ({
+    code: `HTTP_CODE_${snakeCase(code).toUpperCase()}`,
+    value
+  }));
+}
+
+function prepareAutoImports({ resolve, options, nuxt }) {
+  const httpCodesPath = resolve(nuxt.options.buildDir, "cms/http-codes.ts");
+  const httpCodesImports = transformHttpCodes(options.httpCodes).map(({ code }) => ({ name: code, from: httpCodesPath }));
+  addComponentsDir({
+    path: resolve("./runtime/components"),
+    pathPrefix: false,
+    prefix: options?.prefix,
+    ignore: ["prose/**"]
+  });
+  addComponentsDir({
+    path: resolve("./runtime/components/prose"),
+    prefix: "Prose",
+    pathPrefix: false,
+    global: true
+  });
+  addImportsDir(resolve("./runtime/composables"));
+  addPlugin(resolve("./runtime/plugins/api.ts"));
+  addImports(httpCodesImports);
+  addServerImports(httpCodesImports);
+  addServerImportsDir(resolve("./runtime/server/utils"));
+  nuxt.options.nitro.alias ||= {};
+  nuxt.options.nitro.alias["#cms/http-codes"] = httpCodesPath;
+}
 
 const buttonClear = {
   slots: {
@@ -12,9 +77,19 @@ const buttonClear = {
   }
 };
 
+const uploraImage$1 = {
+  slots: {
+    root: "relative grid grid-cols-[100%] grid-rows-[100%] overflow-hidden",
+    lqip: "bg-cover bg-no-repeat bg-center col-[1] row-[1]",
+    picture: "aspect-3/2 col-[1] row-[1]",
+    img: "w-full h-full block object-cover"
+  }
+};
+
 const theme = {
   __proto__: null,
-  buttonClear: buttonClear
+  buttonClear: buttonClear,
+  uploraImage: uploraImage$1
 };
 
 const uploraImage = {
@@ -28,7 +103,7 @@ const themeProse = {
   uploraImage: uploraImage
 };
 
-function getTemplates(options) {
+function getAppTemplates({ options }) {
   const templates = [];
   function writeThemeTemplate(theme2, path) {
     for (const component in theme2) {
@@ -87,8 +162,11 @@ function getTemplates(options) {
     filename: "types/cms.d.ts",
     getContents: () => `import * as cms from '#build/cms'
 import type { TVConfig } from '@nuxt/ui'
+import type { RouteLocationRaw } from 'vue-router'
+
+type AppConfigCMS = {
 
-type AppConfigCMS = TVConfig<typeof cms>
+} & TVConfig<typeof cms>
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
@@ -102,17 +180,39 @@ declare module '@nuxt/schema' {
 export {}
 `
   });
+  templates.push({
+    filename: "cms/http-codes.ts",
+    write: true,
+    getContents: () => {
+      const httpCodes = transformHttpCodes(options.httpCodes);
+      const content = httpCodes.map(({ code, value }) => `export const ${code} = '${value}'`).join("\n");
+      return `${content}
+`;
+    }
+  });
+  return templates;
+}
+function getServerTemplates(_context) {
+  const templates = [];
   return templates;
 }
-function addTemplates(options) {
-  const templates = getTemplates(options);
-  for (const template of templates) {
+function prepareTemplates(context) {
+  const appTemplates = getAppTemplates(context);
+  const serverTemplates = getServerTemplates();
+  for (const template of appTemplates) {
     if (template.filename.endsWith(".d.ts")) {
       addTypeTemplate(template);
     } else {
       addTemplate(template);
     }
   }
+  for (const template of serverTemplates) {
+    if (template.filename.endsWith(".d.ts")) {
+      addTypeTemplate(template, { nitro: true, nuxt: false });
+    } else {
+      addServerTemplate(template);
+    }
+  }
 }
 
 const icons = {};
@@ -123,11 +223,15 @@ const module = defineNuxtModule({
     version,
     configKey: "cms"
   },
-  defaults: {
-    name: "cms",
-    prefix: "C"
-  },
+  defaults: defaultModuleOptions,
   async setup(options, nuxt) {
+    const context = createContext(options, nuxt);
+    nuxt.options.runtimeConfig.public = defu(nuxt.options.runtimeConfig.public || {}, {
+      fluxorUrl: options.fluxorUrl,
+      version: ""
+    });
+    nuxt.options.runtimeConfig.nitro ||= {};
+    nuxt.options.runtimeConfig.nitro.envPrefix = options.envPrefix;
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
       icons
     });
@@ -160,23 +264,10 @@ const module = defineNuxtModule({
     if (!hasNuxtModule("nuxt-auth-utils")) {
       await installModule("nuxt-auth-utils");
     }
-    const { resolve } = createResolver(import.meta.url);
-    nuxt.options.alias["#cms"] = resolve("./runtime");
-    nuxt.options.appConfig.cms = defu(nuxt.options.appConfig.cms || {}, {});
-    addComponentsDir({
-      path: resolve("./runtime/components"),
-      pathPrefix: false,
-      prefix: options?.prefix || "C",
-      ignore: ["prose/**"]
-    });
-    addComponentsDir({
-      path: resolve("./runtime/components/prose"),
-      prefix: "Prose",
-      pathPrefix: false,
-      global: true
-    });
-    addImportsDir(resolve("./runtime/composables"));
-    addTemplates(options);
+    nuxt.options.alias["#cms"] = context.resolve("./runtime");
+    nuxt.options.appConfig.cms = defu(nuxt.options.appConfig.cms || {}, getDefaultCMSConfig());
+    prepareAutoImports(context);
+    prepareTemplates(context);
   }
 });
 

package/dist/runtime/components/ButtonClear.vue

@@ -13,8 +13,7 @@
 
 <script>
 import theme from "#build/cms/button-clear";
-import { useAppConfig } from "#imports";
-import { computed } from "vue";
+import { computed, useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
 </script>
 

package/dist/runtime/components/UploraImage.vue

@@ -0,0 +1,108 @@
+<template>
+  <figure :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div
+      v-if="lqip"
+      :class="ui.lqip({ class: props.ui?.lqip })"
+      :style="{
+  backgroundImage: `url(${lqip})`
+}"
+    />
+    <picture :class="ui.picture({ class: props.ui?.picture })">
+      <template v-if="sources.length">
+        <source
+          v-for="(source, key) in sources"
+          :key="key"
+          :srcset="source.srcset"
+          :type="source.type"
+        >
+      </template>
+
+      <img
+        ref="imageRef"
+        v-bind="imageAttrs"
+        :src="image.img"
+        :srcset="image?.srcset"
+        :alt="alt"
+        :loading="loading"
+        :class="ui.img({ class: props.ui?.img })"
+      >
+    </picture>
+  </figure>
+</template>
+
+<script>
+import theme from "#build/cms/uplora-image";
+import { computed, onMounted, useAppConfig, useHead, useNuxtApp, useTemplateRef } from "#imports";
+import { buildUploraImage } from "../utils";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  id: { type: String, required: true },
+  alt: { type: String, required: true },
+  formats: { type: Array, required: false },
+  sizes: { type: Array, required: false },
+  lqip: { type: String, required: false },
+  loading: { type: String, required: false, default: "lazy" },
+  preload: { type: [Boolean, Object], required: false },
+  nonce: { type: String, required: false },
+  imgAttrs: { type: Object, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emit = defineEmits(["load", "error"]);
+const nuxtApp = useNuxtApp();
+const initialLoad = nuxtApp.isHydrating;
+const image = computed(() => buildUploraImage({
+  id: props.id,
+  formats: props.formats,
+  sizes: props.sizes
+}));
+const sources = computed(() => {
+  if (image.value.sources.length > 1) {
+    return image.value.sources.slice(1);
+  }
+  return [];
+});
+if (import.meta.server && props.preload) {
+  useHead({ link: () => {
+    if (!image.value.img) {
+      return [];
+    }
+    const link = {
+      rel: "preload",
+      as: "image",
+      imagesrcset: image.value.srcset,
+      nonce: props.nonce,
+      ...typeof props.preload !== "boolean" && props.preload?.fetchPriority ? { fetchpriority: props.preload.fetchPriority } : {}
+    };
+    return [link];
+  } });
+}
+const imageRef = useTemplateRef("imageRef");
+const imageAttrs = computed(() => ({
+  ...props.imgAttrs || {},
+  ...import.meta.server ? { onerror: "this.setAttribute('data-error', 1)" } : {}
+}));
+onMounted(() => {
+  if (!imageRef.value) {
+    return;
+  }
+  if (imageRef.value.complete && initialLoad) {
+    if (imageRef.value.getAttribute("data-error")) {
+      emit("error", new Event("error"));
+    } else {
+      emit("load", new Event("load"));
+    }
+  }
+  imageRef.value.onload = (event) => {
+    emit("load", event);
+  };
+  imageRef.value.onerror = (event) => {
+    emit("error", event);
+  };
+});
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.uploraImage || {} })());
+</script>