vectify 2.0.0

package/dist/templates/template-engine.ts

@@ -0,0 +1,107 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import Handlebars from 'handlebars'
+
+/**
+ * Template data interface
+ */
+export interface TemplateData {
+  typescript: boolean
+  componentName?: string
+  formattedNodes?: string
+  [key: string]: any
+}
+
+/**
+ * Get the templates directory path
+ * When bundled by tsup:
+ * - CJS: code is in dist/index.js, __dirname = dist/
+ * - ESM: code is in dist/chunk-*.mjs or dist/index.mjs, __dirname = dist/
+ * Templates are copied to dist/templates/
+ */
+function getTemplatesDir(): string {
+  // Check if __dirname is defined (CJS or bundled code)
+  if (typeof __dirname !== 'undefined') {
+    return path.join(__dirname, 'templates')
+  }
+
+  // ESM fallback: use import.meta.url
+  // import.meta is only available in ESM
+  const currentFile = fileURLToPath(import.meta.url)
+  return path.join(path.dirname(currentFile), 'templates')
+}
+
+/**
+ * Load and compile a Handlebars template
+ */
+function loadTemplate(templatePath: string): HandlebarsTemplateDelegate {
+  const templatesDir = getTemplatesDir()
+  const fullPath = path.join(templatesDir, templatePath)
+  const templateContent = fs.readFileSync(fullPath, 'utf-8')
+  return Handlebars.compile(templateContent, { noEscape: true })
+}
+
+/**
+ * Render a template with data
+ */
+export function renderTemplate(templatePath: string, data: TemplateData): string {
+  const template = loadTemplate(templatePath)
+  return template(data)
+}
+
+/**
+ * Get template path for React components
+ */
+export function getReactTemplatePath(typescript: boolean, type: 'component' | 'createIcon'): string {
+  const ext = typescript ? 'tsx' : 'jsx'
+  return `react/${type}.${ext}.hbs`
+}
+
+/**
+ * Get template path for Vue components
+ */
+export function getVueTemplatePath(typescript: boolean, type: 'component' | 'icon'): string {
+  const suffix = typescript ? 'ts' : 'js'
+  return `vue/${type}.${suffix}.vue.hbs`
+}
+
+/**
+ * Get template path for Svelte components
+ */
+export function getSvelteTemplatePath(typescript: boolean, type: 'component' | 'icon'): string {
+  const suffix = typescript ? 'ts' : 'js'
+  return `svelte/${type}.${suffix}.svelte.hbs`
+}
+
+/**
+ * Get template path for Solid components
+ */
+export function getSolidTemplatePath(typescript: boolean, type: 'component' | 'createIcon'): string {
+  const ext = typescript ? 'tsx' : 'jsx'
+  return `solid/${type}.${ext}.hbs`
+}
+
+/**
+ * Get template path for Preact components
+ */
+export function getPreactTemplatePath(typescript: boolean, type: 'component' | 'createIcon'): string {
+  const ext = typescript ? 'tsx' : 'jsx'
+  return `preact/${type}.${ext}.hbs`
+}
+
+/**
+ * Get template path for Vanilla JS components
+ */
+export function getVanillaTemplatePath(typescript: boolean, type: 'component' | 'createIcon'): string {
+  const ext = typescript ? 'ts' : 'js'
+  return `vanilla/${type}.${ext}.hbs`
+}
+
+/**
+ * Get template path for Qwik components
+ */
+export function getQwikTemplatePath(typescript: boolean, type: 'component' | 'createIcon'): string {
+  const ext = typescript ? 'tsx' : 'jsx'
+  return `qwik/${type}.${ext}.hbs`
+}

package/dist/templates/vanilla/component.ts.hbs

@@ -0,0 +1,8 @@
+import { createIcon } from './createIcon'
+import type { IconNode } from 'vectify'
+
+export const iconNode: IconNode[] = [
+{{{formattedNodes}}}
+]
+
+export const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}})

package/dist/templates/vanilla/createIcon.js.hbs

@@ -0,0 +1,111 @@
+export function createIcon(name, iconNode, keepColors = false) {
+  return (options = {}) => {
+    const {
+      size = 24,
+      color = 'currentColor',
+      strokeWidth = 2,
+      className = '',
+      title,
+      ariaLabel,
+      ariaHidden,
+      ...attrs
+    } = options
+
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.setAttribute('width', String(size))
+    svg.setAttribute('height', String(size))
+    svg.setAttribute('viewBox', '0 0 24 24')
+    svg.setAttribute('class', className ? `vectify-icon ${className}` : 'vectify-icon')
+
+    // Accessibility
+    const shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
+    if (shouldHide) {
+      svg.setAttribute('aria-hidden', 'true')
+    }
+    if (ariaLabel) {
+      svg.setAttribute('aria-label', ariaLabel)
+    }
+    if (title || ariaLabel) {
+      svg.setAttribute('role', 'img')
+    }
+
+    // Set additional attributes
+    Object.entries(attrs).forEach(([key, value]) => {
+      svg.setAttribute(key, String(value))
+    })
+
+    // Add title if provided
+    if (title) {
+      const titleEl = document.createElementNS('http://www.w3.org/2000/svg', 'title')
+      titleEl.textContent = title
+      svg.appendChild(titleEl)
+    }
+
+    // Render icon nodes
+    function renderNode(node) {
+      const [type, nodeAttrs, children] = node
+      const element = document.createElementNS('http://www.w3.org/2000/svg', type)
+
+      let cleanedAttrs
+
+      if (keepColors) {
+        cleanedAttrs = nodeAttrs
+      } else {
+        // Track color attributes
+        let hasFill = false
+        let hasStroke = false
+        let originalStrokeWidth
+
+        Object.entries(nodeAttrs).forEach(([key, value]) => {
+          if (key === 'fill' && value !== 'none') {
+            hasFill = true
+          }
+          if (key === 'stroke') {
+            hasStroke = true
+          }
+          if (key === 'strokeWidth' || key === 'stroke-width') {
+            originalStrokeWidth = value
+          }
+        })
+
+        // Keep non-color attributes
+        cleanedAttrs = Object.fromEntries(
+          Object.entries(nodeAttrs).filter(([key]) =>
+            !['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)
+          )
+        )
+
+        // Apply color
+        if (hasFill) {
+          cleanedAttrs.fill = color
+        } else if (hasStroke) {
+          cleanedAttrs.fill = 'none'
+          cleanedAttrs.stroke = color
+          cleanedAttrs['stroke-width'] = originalStrokeWidth ?? strokeWidth
+          cleanedAttrs['stroke-linecap'] = 'round'
+          cleanedAttrs['stroke-linejoin'] = 'round'
+        }
+      }
+
+      // Set attributes
+      Object.entries(cleanedAttrs).forEach(([key, value]) => {
+        element.setAttribute(key, String(value))
+      })
+
+      // Render children
+      if (children && children.length > 0) {
+        children.forEach(child => {
+          element.appendChild(renderNode(child))
+        })
+      }
+
+      return element
+    }
+
+    iconNode.forEach(node => {
+      svg.appendChild(renderNode(node))
+    })
+
+    return svg
+  }
+}

package/dist/templates/vanilla/createIcon.ts.hbs

@@ -0,0 +1,124 @@
+export interface IconOptions {
+  size?: number | string
+  color?: string
+  strokeWidth?: number | string
+  className?: string
+  title?: string
+  ariaLabel?: string
+  ariaHidden?: boolean
+  [key: string]: any
+}
+
+export type IconNode = [string, Record<string, any>, IconNode[]?]
+
+export function createIcon(name: string, iconNode: IconNode[], keepColors = false) {
+  return (options: IconOptions = {}): SVGSVGElement => {
+    const {
+      size = 24,
+      color = 'currentColor',
+      strokeWidth = 2,
+      className = '',
+      title,
+      ariaLabel,
+      ariaHidden,
+      ...attrs
+    } = options
+
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.setAttribute('width', String(size))
+    svg.setAttribute('height', String(size))
+    svg.setAttribute('viewBox', '0 0 24 24')
+    svg.setAttribute('class', className ? `vectify-icon ${className}` : 'vectify-icon')
+
+    // Accessibility
+    const shouldHide = ariaHidden !== undefined ? ariaHidden : (!title && !ariaLabel)
+    if (shouldHide) {
+      svg.setAttribute('aria-hidden', 'true')
+    }
+    if (ariaLabel) {
+      svg.setAttribute('aria-label', ariaLabel)
+    }
+    if (title || ariaLabel) {
+      svg.setAttribute('role', 'img')
+    }
+
+    // Set additional attributes
+    Object.entries(attrs).forEach(([key, value]) => {
+      svg.setAttribute(key, String(value))
+    })
+
+    // Add title if provided
+    if (title) {
+      const titleEl = document.createElementNS('http://www.w3.org/2000/svg', 'title')
+      titleEl.textContent = title
+      svg.appendChild(titleEl)
+    }
+
+    // Render icon nodes
+    function renderNode(node: IconNode): SVGElement {
+      const [type, nodeAttrs, children] = node
+      const element = document.createElementNS('http://www.w3.org/2000/svg', type)
+
+      let cleanedAttrs: Record<string, any>
+
+      if (keepColors) {
+        cleanedAttrs = nodeAttrs
+      } else {
+        // Track color attributes
+        let hasFill = false
+        let hasStroke = false
+        let originalStrokeWidth: number | string | undefined
+
+        Object.entries(nodeAttrs).forEach(([key, value]) => {
+          if (key === 'fill' && value !== 'none') {
+            hasFill = true
+          }
+          if (key === 'stroke') {
+            hasStroke = true
+          }
+          if (key === 'strokeWidth' || key === 'stroke-width') {
+            originalStrokeWidth = value
+          }
+        })
+
+        // Keep non-color attributes
+        cleanedAttrs = Object.fromEntries(
+          Object.entries(nodeAttrs).filter(([key]) =>
+            !['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)
+          )
+        )
+
+        // Apply color
+        if (hasFill) {
+          cleanedAttrs.fill = color
+        } else if (hasStroke) {
+          cleanedAttrs.fill = 'none'
+          cleanedAttrs.stroke = color
+          cleanedAttrs['stroke-width'] = originalStrokeWidth ?? strokeWidth
+          cleanedAttrs['stroke-linecap'] = 'round'
+          cleanedAttrs['stroke-linejoin'] = 'round'
+        }
+      }
+
+      // Set attributes
+      Object.entries(cleanedAttrs).forEach(([key, value]) => {
+        element.setAttribute(key, String(value))
+      })
+
+      // Render children
+      if (children && children.length > 0) {
+        children.forEach(child => {
+          element.appendChild(renderNode(child))
+        })
+      }
+
+      return element
+    }
+
+    iconNode.forEach(node => {
+      svg.appendChild(renderNode(node))
+    })
+
+    return svg
+  }
+}

package/dist/templates/vue/component.js.vue.hbs

@@ -0,0 +1,21 @@
+<template>
+  <Icon :iconNode="iconNode" v-bind="$attrs" />
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import Icon from './Icon.vue'
+
+export default defineComponent({
+  name: '{{componentName}}',
+  components: { Icon },
+  inheritAttrs: false,
+  setup() {
+    const iconNode = [
+{{{formattedNodes}}}
+    ]
+
+    return { iconNode }
+  }
+})
+</script>

package/dist/templates/vue/component.ts.vue.hbs

@@ -0,0 +1,22 @@
+<template>
+  <Icon :iconNode="iconNode" v-bind="$attrs" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Icon from './Icon.vue'
+import type { IconNode } from 'vectify'
+
+export default defineComponent({
+  name: '{{componentName}}',
+  components: { Icon },
+  inheritAttrs: false,
+  setup() {
+    const iconNode: IconNode[] = [
+{{{formattedNodes}}}
+    ]
+
+    return { iconNode }
+  }
+})
+</script>

package/dist/templates/vue/icon.js.vue.hbs

@@ -0,0 +1,155 @@
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    :aria-hidden="shouldHide"
+    :aria-label="ariaLabel"
+    :role="title || ariaLabel ? 'img' : undefined"
+    v-bind="$attrs"
+    :class="mergedClass"
+  >
+    <title v-if="title">{{ title }}</title>
+    <component
+      v-for="(node, index) in cleanedIconNode"
+      :key="index"
+      :is="renderNode(node)"
+    />
+  </svg>
+</template>
+
+<script>
+import { computed, defineComponent, h } from 'vue'
+
+export default defineComponent({
+  name: 'Icon',
+  inheritAttrs: false,
+  props: {
+    iconNode: {
+      type: Array,
+      required: true
+    },
+    size: {
+      type: [Number, String],
+      default: 24
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    },
+    strokeWidth: {
+      type: [Number, String],
+      default: 2
+    },
+    className: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    ariaLabel: {
+      type: String,
+      default: ''
+    },
+    ariaHidden: {
+      type: [Boolean, String],
+      default: undefined
+    },
+    keepColors: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    // Merge className with default class
+    const mergedClass = computed(() => {
+      return props.className ? `vectify-icon ${props.className}` : 'vectify-icon'
+    })
+
+    // Determine if icon should be hidden from screen readers
+    const shouldHide = computed(() => {
+      return props.ariaHidden !== undefined ? props.ariaHidden : (!props.title && !props.ariaLabel)
+    })
+
+    // Clean icon node to apply color
+    const cleanedIconNode = computed(() => {
+      if (props.keepColors) {
+        return props.iconNode
+      }
+
+      return cleanIconNodes(props.iconNode, props.color, props.strokeWidth)
+    })
+
+    function cleanIconNodes(nodes, color, strokeWidth) {
+      return nodes.map(node => {
+        const [type, attrs, children] = node
+
+        // Keep non-color attributes and determine if we need fill or stroke
+        const cleanedAttrs = {}
+        let hasFill = false
+        let hasStroke = false
+        let originalStrokeWidth
+
+        Object.entries(attrs).forEach(([key, value]) => {
+          // Track color attributes
+          if (key === 'fill') {
+            if (value !== 'none') {
+              hasFill = true
+            }
+          }
+          if (key === 'stroke') {
+            hasStroke = true
+          }
+          if (key === 'strokeWidth' || key === 'stroke-width') {
+            originalStrokeWidth = value
+          }
+
+          // Keep non-color attributes
+          if (!['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)) {
+            cleanedAttrs[key] = value
+          }
+        })
+
+        // Apply color based on original attributes
+        if (hasFill) {
+          cleanedAttrs.fill = color
+        } else if (hasStroke) {
+          // Stroke-based icon: set fill to none to prevent default black fill
+          cleanedAttrs.fill = 'none'
+          cleanedAttrs.stroke = color
+          cleanedAttrs.strokeWidth = originalStrokeWidth ?? strokeWidth
+          cleanedAttrs.strokeLinecap = 'round'
+          cleanedAttrs.strokeLinejoin = 'round'
+        }
+
+        const cleanedChildren = children ? cleanIconNodes(children, color, strokeWidth) : undefined
+
+        return [type, cleanedAttrs, cleanedChildren]
+      })
+    }
+
+    function renderNode(node) {
+      const [type, attrs, children] = node
+
+      if (children && children.length > 0) {
+        return h(
+          type,
+          attrs,
+          children.map(child => renderNode(child))
+        )
+      }
+
+      return h(type, attrs)
+    }
+
+    return {
+      renderNode,
+      mergedClass,
+      shouldHide,
+      cleanedIconNode
+    }
+  }
+})
+</script>

package/dist/templates/vue/icon.ts.vue.hbs

@@ -0,0 +1,157 @@
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    :aria-hidden="shouldHide"
+    :aria-label="ariaLabel"
+    :role="title || ariaLabel ? 'img' : undefined"
+    v-bind="$attrs"
+    :class="mergedClass"
+  >
+    <title v-if="title">{{ title }}</title>
+    <component
+      v-for="(node, index) in cleanedIconNode"
+      :key="index"
+      :is="renderNode(node)"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, h } from 'vue'
+import type { PropType, VNode } from 'vue'
+import type { IconNode } from 'vectify'
+
+export default defineComponent({
+  name: 'Icon',
+  inheritAttrs: false,
+  props: {
+    iconNode: {
+      type: Array as PropType<IconNode[]>,
+      required: true
+    },
+    size: {
+      type: [Number, String],
+      default: 24
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    },
+    strokeWidth: {
+      type: [Number, String],
+      default: 2
+    },
+    className: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    ariaLabel: {
+      type: String,
+      default: ''
+    },
+    ariaHidden: {
+      type: [Boolean, String] as PropType<boolean | 'true' | 'false'>,
+      default: undefined
+    },
+    keepColors: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    // Merge className with default class
+    const mergedClass = computed(() => {
+      return props.className ? `vectify-icon ${props.className}` : 'vectify-icon'
+    })
+
+    // Determine if icon should be hidden from screen readers
+    const shouldHide = computed(() => {
+      return props.ariaHidden !== undefined ? props.ariaHidden : (!props.title && !props.ariaLabel)
+    })
+
+    // Clean icon node to apply color
+    const cleanedIconNode = computed(() => {
+      if (props.keepColors) {
+        return props.iconNode
+      }
+
+      return cleanIconNodes(props.iconNode, props.color, props.strokeWidth)
+    })
+
+    function cleanIconNodes(nodes: IconNode[], color: string, strokeWidth: number | string): IconNode[] {
+      return nodes.map(node => {
+        const [type, attrs, children] = node
+
+        // Keep non-color attributes and determine if we need fill or stroke
+        const cleanedAttrs: Record<string, any> = {}
+        let hasFill = false
+        let hasStroke = false
+        let originalStrokeWidth: number | string | undefined
+
+        Object.entries(attrs).forEach(([key, value]) => {
+          // Track color attributes
+          if (key === 'fill') {
+            if (value !== 'none') {
+              hasFill = true
+            }
+          }
+          if (key === 'stroke') {
+            hasStroke = true
+          }
+          if (key === 'strokeWidth' || key === 'stroke-width') {
+            originalStrokeWidth = value
+          }
+
+          // Keep non-color attributes
+          if (!['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)) {
+            cleanedAttrs[key] = value
+          }
+        })
+
+        // Apply color based on original attributes
+        if (hasFill) {
+          cleanedAttrs.fill = color
+        } else if (hasStroke) {
+          // Stroke-based icon: set fill to none to prevent default black fill
+          cleanedAttrs.fill = 'none'
+          cleanedAttrs.stroke = color
+          cleanedAttrs.strokeWidth = originalStrokeWidth ?? strokeWidth
+          cleanedAttrs.strokeLinecap = 'round'
+          cleanedAttrs.strokeLinejoin = 'round'
+        }
+
+        const cleanedChildren = children ? cleanIconNodes(children, color, strokeWidth) : undefined
+
+        return [type, cleanedAttrs, cleanedChildren] as IconNode
+      })
+    }
+
+    function renderNode(node: IconNode): VNode {
+      const [type, attrs, children] = node
+
+      if (children && children.length > 0) {
+        return h(
+          type,
+          attrs,
+          children.map(child => renderNode(child))
+        )
+      }
+
+      return h(type, attrs)
+    }
+
+    return {
+      renderNode,
+      mergedClass,
+      shouldHide,
+      cleanedIconNode
+    }
+  }
+})
+</script>