@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/functional/en/reactive.mdx

@@ -0,0 +1,40 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/functional/en/Reactive'/>
+
+# Reactive Utilities
+
+A set of functions for working with Vue.js reactivity.
+
+## `computedAsync`
+
+Creates a Vue computed property that can handle asynchronous getters.
+
+**Parameters:**
+- `getter: (() => Promise<R>) | (() => R) | R` — asynchronous function, synchronous function, or direct value to compute the result
+- `debugOptions?: DebuggerOptions` — debug options for reactive computations (supported by Vue.js library)
+
+```javascript
+import { computedAsync } from '@dxtmisha/functional'
+
+// With asynchronous function
+const userData = computedAsync(async () => {
+  const response = await fetch('/api/user')
+  return response.json()
+})
+
+// With synchronous function
+const doubled = computedAsync(() => value.value * 2)
+
+// With direct value
+const staticValue = computedAsync('Hello World')
+
+// With debug options
+const debugged = computedAsync(
+  async () => await fetchData(),
+  {
+    onTrack: (e) => console.log('tracked:', e),
+    onTrigger: (e) => console.log('triggered:', e)
+  }
+)
+```

package/src/media/functional/en/refTypes.mdx

@@ -170,7 +170,7 @@ export function useCounter(initialValue: RefOrNormal<number> = 0) {
 
 ### Component with Flexible Props
 
-```vue
+```html
 <template>
   <div class="flexible-component">
     <h2>{{ resolvedTitle }}</h2>

package/src/media/functional/en/useApiRef.mdx

@@ -35,7 +35,7 @@ const { data, loading, isStarting, reading } = useApiRef('/api/users')
 
 ### Component Usage
 
-```vue
+```html
 <script setup>
 import { useApiRef } from '@dxtmisha/functional'
 
@@ -248,7 +248,7 @@ await reset()
 
 ### List with Filters
 
-```vue
+```html
 <script setup>
 import { ref, computed } from 'vue'
 import { useApiRef } from '@dxtmisha/functional'
@@ -289,7 +289,7 @@ const handleSearch = (query) => {
 
 ### Conditional Loading
 
-```vue
+```html
 <script setup>
 import { ref } from 'vue'
 import { useApiRef } from '@dxtmisha/functional'
@@ -324,7 +324,7 @@ const toggleDetails = () => {
 
 ### POST Request with Transformation
 
-```vue
+```html
 <script setup>
 import { ref } from 'vue'
 import { useApiRef } from '@dxtmisha/functional'
@@ -376,7 +376,7 @@ const handleSubmit = async () => {
 
 ### Multiple Requests
 
-```vue
+```html
 <script setup>
 import { useApiRef } from '@dxtmisha/functional'
 

package/src/media/functional/en/useMeta.mdx

@@ -0,0 +1,431 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/functional/en/Composables/useMeta'/>
+
+# Composable useMeta
+
+Composable for managing page meta tags in Vue 3 applications. Provides reactive interface for working with SEO tags, Open Graph, and Twitter Card with automatic DOM synchronization. Uses singleton pattern — all components share the same meta tags state.
+
+## Key Features
+
+- **Reactive meta tag management** — automatic DOM updates when values change
+- **Singleton pattern** — unified meta tags state for the entire application
+- **SEO support** — manage title, description, keywords, canonical, robots, author
+- **Open Graph** — full Open Graph protocol support for social networks
+- **Twitter Card** — Twitter Card integration for optimal Twitter display
+- **SSR support** — HTML string generation for server-side rendering
+- **TypeScript support** — full typing of all properties and methods
+
+## Basic Usage
+
+### Simple Meta Tags Management
+
+```javascript
+import { useMeta } from '@dxtmisha/functional'
+
+// Get reactive refs for managing meta tags
+const { title, description, keyword } = useMeta()
+
+// Set values
+title.value = 'Home Page'
+description.value = 'Homepage description of the website'
+keyword.value = 'keywords, of, the, website'
+```
+
+### Component Usage
+
+```html
+<script setup>
+import { useMeta } from '@dxtmisha/functional'
+import { onMounted } from 'vue'
+
+const { title, description, image, canonical } = useMeta()
+
+onMounted(() => {
+  title.value = 'About Us'
+  description.value = 'Learn more about our company'
+  image.value = 'https://example.com/about-image.jpg'
+  canonical.value = 'https://example.com/about'
+})
+</script>
+
+<template>
+  <div>
+    <h1>About Us</h1>
+    <p>Page content...</p>
+  </div>
+</template>
+```
+
+## Return Values
+
+### `meta`
+
+Instance of Meta class for advanced operations.
+
+**Type:** `Meta`
+
+```javascript
+const { meta } = useMeta()
+
+// Access to advanced methods
+meta.setLocale('en_US')
+meta.setSuffix('My Site')
+
+// Get child classes for detailed configuration
+const og = meta.getOg()
+const twitter = meta.getTwitter()
+```
+
+### `title`
+
+Reactive page title (without suffix).
+
+**Type:** `Ref<string>`
+
+```javascript
+const { title } = useMeta()
+
+title.value = 'New Title'
+// Automatically updates:
+// - document.title (with suffix if set)
+// - Open Graph og:title
+// - Twitter Card twitter:title
+```
+
+### `keyword`
+
+Reactive keywords meta tag.
+
+**Type:** `Ref<string>`
+
+```javascript
+const { keyword } = useMeta()
+
+keyword.value = 'vue, composable, meta tags, seo'
+// Updates <meta name="keywords" content="...">
+```
+
+### `description`
+
+Reactive description meta tag.
+
+**Type:** `Ref<string>`
+
+```javascript
+const { description } = useMeta()
+
+description.value = 'Complete page description for search engines'
+// Updates <meta name="description" content="...">
+```
+
+### `image`
+
+Reactive image URL for Open Graph and Twitter Card.
+
+**Type:** `Ref<string>`
+
+```javascript
+const { image } = useMeta()
+
+image.value = 'https://example.com/preview.jpg'
+// Automatically updates:
+// - Open Graph og:image
+// - Twitter Card twitter:image
+```
+
+### `canonical`
+
+Reactive canonical URL.
+
+**Type:** `Ref<string>`
+
+```javascript
+const { canonical } = useMeta()
+
+canonical.value = 'https://example.com/page'
+// Automatically updates:
+// - <link rel="canonical" href="...">
+// - Open Graph og:url
+// - Twitter Card twitter:url
+```
+
+### `robots`
+
+Reactive robots meta tag directive.
+
+**Type:** `Ref<MetaRobots>`
+
+```javascript
+const { robots } = useMeta()
+
+robots.value = 'index, follow'
+// Other options: 'noindex', 'nofollow', 'noindex, nofollow'
+// Updates <meta name="robots" content="...">
+```
+
+### `author`
+
+Reactive author meta tag.
+
+**Type:** `Ref<string>`
+
+```javascript
+const { author } = useMeta()
+
+author.value = 'John Doe'
+// Updates <meta name="author" content="...">
+```
+
+### `siteName`
+
+Reactive site name for Open Graph and Twitter Card.
+
+**Type:** `Ref<string>`
+
+```javascript
+const { siteName } = useMeta()
+
+siteName.value = 'My Site'
+// Automatically updates:
+// - Open Graph og:site_name
+// - Twitter Card twitter:site
+```
+
+### `getHtmlMeta`
+
+Function to generate HTML string with all meta tags (for SSR).
+
+**Type:** `() => string`
+
+```javascript
+const { getHtmlMeta } = useMeta()
+
+// Generates HTML string with all meta tags
+const metaHtml = getHtmlMeta()
+// Returns: '<meta name="description" content="..."><meta property="og:title" content="...">...'
+```
+
+## Usage Examples
+
+### Dynamic Meta Tags Based on Data
+
+```html
+<script setup>
+import { ref, watch } from 'vue'
+import { useMeta } from '@dxtmisha/functional'
+import { useApiRef } from '@dxtmisha/functional'
+
+const articleId = ref(1)
+const { data: article } = useApiRef(
+  computed(() => `/api/articles/${articleId.value}`)
+)
+
+const { title, description, image, author, canonical } = useMeta()
+
+watch(article, (newArticle) => {
+  if (newArticle) {
+    title.value = newArticle.title
+    description.value = newArticle.excerpt
+    image.value = newArticle.coverImage
+    author.value = newArticle.authorName
+    canonical.value = `https://example.com/articles/${newArticle.slug}`
+  }
+})
+</script>
+
+<template>
+  <article v-if="article">
+    <h1>{{ article.title }}</h1>
+    <p>{{ article.content }}</p>
+  </article>
+</template>
+```
+
+### Configure Meta Tags for Different Pages
+
+```html
+<script setup>
+import { useMeta } from '@dxtmisha/functional'
+import { useRoute } from 'vue-router'
+import { watch } from 'vue'
+
+const route = useRoute()
+const { title, description, robots } = useMeta()
+
+const pageMetadata = {
+  home: {
+    title: 'Home Page',
+    description: 'Welcome to our website',
+    robots: 'index, follow'
+  },
+  about: {
+    title: 'About Us',
+    description: 'Learn more about our company',
+    robots: 'index, follow'
+  },
+  admin: {
+    title: 'Admin Panel',
+    description: 'Administrator panel',
+    robots: 'noindex, nofollow'
+  }
+}
+
+watch(
+  () => route.name,
+  (routeName) => {
+    const meta = pageMetadata[routeName] || pageMetadata.home
+    title.value = meta.title
+    description.value = meta.description
+    robots.value = meta.robots
+  },
+  { immediate: true }
+)
+</script>
+```
+
+### Advanced Configuration with Open Graph and Twitter Card
+
+```html
+<script setup>
+import { useMeta } from '@dxtmisha/functional'
+import { onMounted } from 'vue'
+
+const { meta, title, description, image, siteName } = useMeta()
+
+onMounted(() => {
+  // Basic meta tags
+  title.value = 'Article Title'
+  description.value = 'Brief article description'
+  image.value = 'https://example.com/article-image.jpg'
+  siteName.value = 'My Blog'
+
+  // Advanced settings
+  meta.setSuffix('My Blog')
+  meta.setLocale('en_US')
+
+  // Detailed Open Graph configuration
+  const og = meta.getOg()
+  og.setType('article')
+
+  // Detailed Twitter Card configuration
+  const twitter = meta.getTwitter()
+  twitter.setCard('summary_large_image')
+})
+</script>
+```
+
+### SSR: Generate Meta Tags on Server
+
+```javascript
+// server.js
+import { useMeta } from '@dxtmisha/functional'
+
+export function renderMetaTags(pageData) {
+  const { title, description, image, canonical, getHtmlMeta } = useMeta()
+
+  // Set values
+  title.value = pageData.title
+  description.value = pageData.description
+  image.value = pageData.image
+  canonical.value = pageData.url
+
+  // Generate HTML string
+  const metaHtml = getHtmlMeta()
+
+  return `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>${pageData.title}</title>
+        ${metaHtml}
+      </head>
+      <body>
+        <!-- content -->
+      </body>
+    </html>
+  `
+}
+```
+
+### Manage Indexing for Different Environments
+
+```html
+<script setup>
+import { useMeta } from '@dxtmisha/functional'
+import { onMounted } from 'vue'
+
+const { robots } = useMeta()
+
+onMounted(() => {
+  // Disable indexing on dev/staging environments
+  const isProduction = import.meta.env.PROD
+  robots.value = isProduction ? 'index, follow' : 'noindex, nofollow'
+})
+</script>
+```
+
+### Integration with Internationalization
+
+```html
+<script setup>
+import { useMeta } from '@dxtmisha/functional'
+import { useI18n } from 'vue-i18n'
+import { watch } from 'vue'
+
+const { locale } = useI18n()
+const { meta, title, description } = useMeta()
+
+watch(locale, (newLocale) => {
+  // Update locale for Open Graph
+  const localeMap = {
+    'ru': 'ru_RU',
+    'en': 'en_US',
+    'de': 'de_DE'
+  }
+  meta.setLocale(localeMap[newLocale] || 'en_US')
+
+  // Update meta tag content
+  title.value = t('meta.title')
+  description.value = t('meta.description')
+}, { immediate: true })
+</script>
+```
+
+## Important Notes
+
+### Singleton Pattern
+
+The `useMeta` composable uses a singleton pattern, which means all components share a single meta tags instance. This is useful for:
+
+- **Consistency** — changes in one component are reflected everywhere
+- **Performance** — no instance duplication
+- **Simplicity** — no need to pass state between components
+
+```javascript
+// In any application component
+const { title } = useMeta()
+title.value = 'New Title'
+
+// In another component, you'll get the same value
+const { title: sameTitle } = useMeta()
+console.log(sameTitle.value) // 'New Title'
+```
+
+### Automatic Synchronization
+
+All reactive property changes are automatically synchronized with the DOM. No need to call additional methods:
+
+```javascript
+const { title, description } = useMeta()
+
+// These changes are immediately applied to the DOM
+title.value = 'New Title'
+description.value = 'New Description'
+```
+
+### Open Graph and Twitter Card
+
+When changing `title`, `image`, and `canonical`, the corresponding Open Graph and Twitter Card tags are automatically updated. For detailed configuration, use `meta.getOg()` and `meta.getTwitter()` methods.
+
+

package/src/media/functional/en/validationUtils.mdx

@@ -69,6 +69,17 @@ isDifferent('hello', 'hello') // false
 isDifferent({a: 1}, {a: 1}) // true (different references)
 ```
 
+## `isDomData`
+
+Checks if the current environment is a data URL.
+
+```javascript
+import { isDomData } from '@dxtmisha/functional'
+
+isDomData() // true if location.href starts with 'data:', otherwise false
+// Useful for detecting if code is running in iframe with data URL
+```
+
 ## `isDomRuntime`
 
 Checks if code is running in browser environment (DOM exists).