@fynixorg/ui 1.0.11 → 1.0.12

package/dist/plugins/vite-plugin-res.js

@@ -1,38 +1,622 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { transform } from "esbuild";
-function fynix() {
-  return {
-    name: "vite-plugin-res",
-    enforce: "pre",
-    async transform(code, id) {
-      if (!id.includes("/src/"))
-        return null;
-      if (!id.endsWith(".ts") && !id.endsWith(".js") && !id.endsWith(".fnx"))
-        return null;
-      this.addWatchFile(id);
-      const result = await transform(code, {
-        loader: "jsx",
-        jsxFactory: "Fynix",
-        jsxFragment: "Fynix.Fragment",
-        sourcemap: true,
-        sourcefile: id
-      });
-      return {
-        code: result.code,
-        map: result.map
-      };
-    },
-    handleHotUpdate({ file, server }) {
-      if (file.endsWith(".ts") || file.endsWith(".js") || file.endsWith(".fnx")) {
-        server.ws.send({ type: "full-reload" });
-        return [];
-      }
-    }
-  };
-}
-__name(fynix, "fynix");
-export {
-  fynix as default
+import { normalizePath } from "vite";
+import * as ts from "typescript";
+const colors = {
+    reset: "\x1b[0m",
+    red: "\x1b[31m",
+    green: "\x1b[32m",
+    yellow: "\x1b[33m",
+    blue: "\x1b[34m",
+    magenta: "\x1b[35m",
+    cyan: "\x1b[36m",
+    gray: "\x1b[90m",
+    bold: "\x1b[1m",
 };
-//# sourceMappingURL=vite-plugin-res.js.map
+function parseSFC(source) {
+    const result = {
+        logic: "",
+        view: "",
+        style: "",
+        logicLang: "ts",
+        hasLogic: false,
+        hasView: false,
+        hasStyle: false,
+        isStyleScoped: false,
+        imports: [],
+        exports: [],
+    };
+    const logicMatch = source.match(/<logic\s+setup\s*=\s*["']?(ts|js)["']?\s*>([\s\S]*?)<\/logic>/i);
+    if (logicMatch && logicMatch[1] && logicMatch[2] !== undefined) {
+        result.hasLogic = true;
+        result.logicLang = logicMatch[1].toLowerCase();
+        const rawLogic = logicMatch[2].trim();
+        const logicLines = rawLogic.split("\n");
+        const imports = [];
+        const exports = [];
+        const otherLogic = [];
+        let inExportBlock = false;
+        let exportBuffer = [];
+        let exportBraceDepth = 0;
+        for (let i = 0; i < logicLines.length; i++) {
+            const line = logicLines[i] ?? "";
+            const trimmed = line.trim();
+            if (inExportBlock) {
+                exportBuffer.push(line);
+                const openBraces = ((line && line.match(/{/g)) || []).length;
+                const closeBraces = ((line && line.match(/}/g)) || []).length;
+                exportBraceDepth += openBraces - closeBraces;
+                if (exportBraceDepth <= 0) {
+                    exports.push(exportBuffer.join("\n"));
+                    exportBuffer = [];
+                    inExportBlock = false;
+                    exportBraceDepth = 0;
+                }
+                continue;
+            }
+            if (trimmed.startsWith("import ")) {
+                imports.push(line ?? "");
+            }
+            else if (trimmed.startsWith("export ")) {
+                if (/export\s+\w+\s*=\s*{/.test(trimmed) || trimmed.endsWith("{")) {
+                    inExportBlock = true;
+                    exportBuffer = [line];
+                    exportBraceDepth =
+                        ((line && line.match(/{/g)) || []).length -
+                            ((line && line.match(/}/g)) || []).length;
+                    if (exportBraceDepth <= 0) {
+                        exports.push(exportBuffer.join("\n"));
+                        exportBuffer = [];
+                        inExportBlock = false;
+                        exportBraceDepth = 0;
+                    }
+                }
+                else {
+                    exports.push(line ?? "");
+                }
+            }
+            else if (trimmed) {
+                otherLogic.push(line ?? "");
+            }
+        }
+        if (exportBuffer.length > 0) {
+            exports.push(exportBuffer.join("\n"));
+        }
+        result.imports = imports;
+        result.exports = exports;
+        result.logic = otherLogic.join("\n");
+    }
+    const viewMatch = source.match(/<view\s*>([\s\S]*?)<\/view>/i);
+    if (viewMatch && viewMatch[1] !== undefined) {
+        result.hasView = true;
+        result.view = viewMatch[1].trim();
+    }
+    const styleMatch = source.match(/<style(\s+scoped)?\s*>([\s\S]*?)<\/style>/i);
+    if (styleMatch && styleMatch[2] !== undefined) {
+        result.hasStyle = true;
+        result.isStyleScoped = !!styleMatch[1];
+        result.style = styleMatch[2].trim();
+    }
+    return result;
+}
+function generateStyleId(filePath) {
+    let hash = 0;
+    for (let i = 0; i < filePath.length; i++) {
+        const char = filePath.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash;
+    }
+    return `fynix-${Math.abs(hash).toString(36)}`;
+}
+function scopeStyles(css, scopeId) {
+    const dataAttr = `[data-${scopeId}]`;
+    const keyframeMap = new Map();
+    const keyframes = [];
+    css = css.replace(/@keyframes\s+([a-zA-Z0-9_-]+)\s*\{[\s\S]*?\}/g, (block, name) => {
+        const scopedName = `${name}-${scopeId}`;
+        keyframeMap.set(name, scopedName);
+        const renamed = block.replace(new RegExp(`@keyframes\\s+${name}`), `@keyframes ${scopedName}`);
+        const index = keyframes.push(renamed) - 1;
+        return `__KEYFRAMES_${index}__`;
+    });
+    keyframeMap.forEach((scoped, original) => {
+        const re = new RegExp(`(animation(?:-name)?\\s*:[^;]*?)\\b${original}\\b`, "g");
+        css = css.replace(re, `$1${scoped}`);
+    });
+    let rootClass = null;
+    try {
+        const viewMatch = css.match(/\.(\w+)[^{]*\{/);
+        if (viewMatch) {
+            rootClass = viewMatch[1];
+        }
+    }
+    catch { }
+    css = css.replace(/([^{}]+)\{([^{}]*)\}/g, (match, selector, rules) => {
+        if (selector.trim().startsWith("@"))
+            return match;
+        const scopedSelectors = selector
+            .split(",")
+            .map((s) => {
+            const sel = s.trim();
+            if (rootClass) {
+                const rootRe = new RegExp(`^\\.${rootClass}((:[\\w-]+)*|(::[\\w-]+)*)?$`);
+                const pseudo = sel.replace(new RegExp(`^\\.${rootClass}`), "");
+                if (rootRe.test(sel)) {
+                    return `${dataAttr}${pseudo}`;
+                }
+            }
+            return `${dataAttr} ${sel}`;
+        })
+            .join(", ");
+        return `${scopedSelectors}{${rules}}`;
+    });
+    keyframes.forEach((kf, i) => {
+        css = css.replace(`__KEYFRAMES_${i}__`, kf);
+    });
+    return css;
+}
+function transformSFC(parsed, filePath, jsxFactory) {
+    const styleId = generateStyleId(filePath);
+    const lines = [];
+    lines.push(`import { ${jsxFactory} } from '@fynixorg/ui';`);
+    if (parsed.imports.length > 0) {
+        parsed.imports.forEach((importLine) => {
+            lines.push(importLine);
+        });
+    }
+    lines.push("");
+    if (parsed.hasStyle) {
+        let processedStyle = parsed.style;
+        if (parsed.isStyleScoped) {
+            processedStyle = scopeStyles(parsed.style, styleId);
+        }
+        lines.push(`// Inject styles`);
+        lines.push(`if (typeof document !== 'undefined') {`);
+        lines.push(`  const styleId = '${styleId}';`);
+        lines.push(`  if (!document.getElementById(styleId)) {`);
+        lines.push(`    const styleEl = document.createElement('style');`);
+        lines.push(`    styleEl.id = styleId;`);
+        lines.push(`    styleEl.textContent = ${JSON.stringify(processedStyle)};`);
+        lines.push(`    document.head.appendChild(styleEl);`);
+        lines.push(`  }`);
+        lines.push(`}`);
+        lines.push("");
+    }
+    if (parsed.exports.length > 0) {
+        parsed.exports.forEach((exportLine) => {
+            lines.push(exportLine);
+        });
+        lines.push("");
+    }
+    let propsType = "any";
+    const propsInterfaceRegex = /interface\s+Props\s*{[\s\S]*?}/m;
+    if (propsInterfaceRegex.test(parsed.logic)) {
+        propsType = "Props";
+    }
+    lines.push(`function FynixComponent(props: ${propsType} = {}) {`);
+    if (parsed.hasLogic && parsed.logic.trim()) {
+        lines.push(`  // Component logic`);
+        const logicLines = parsed.logic.split("\n");
+        logicLines.forEach((line) => {
+            if (line.trim()) {
+                lines.push(`  ${line}`);
+            }
+        });
+        lines.push("");
+    }
+    if (parsed.exports.some((e) => e.trim().startsWith("export const meta"))) {
+        lines.push(`  if (typeof document !== "undefined" && typeof meta !== "undefined") {`);
+        lines.push(`    if (meta.title) document.title = meta.title;`);
+        lines.push(`    const _meta = meta as any;`);
+        lines.push(`    const metaTags = [`);
+        lines.push(`      _meta.description ? { name: "description", content: _meta.description } : null,`);
+        lines.push(`      _meta.keywords ? { name: "keywords", content: _meta.keywords } : null,`);
+        lines.push(`      _meta.ogTitle ? { property: "og:title", content: _meta.ogTitle } : null,`);
+        lines.push(`      _meta.ogDescription ? { property: "og:description", content: _meta.ogDescription } : null,`);
+        lines.push(`      _meta.ogImage ? { property: "og:image", content: _meta.ogImage } : null,`);
+        lines.push(`    ].filter(Boolean);`);
+        lines.push(`    metaTags.forEach((tagObj) => {`);
+        lines.push(`      if (!tagObj) return;`);
+        lines.push(`      const { name, property, content } = tagObj;`);
+        lines.push(`      if (!content) return;`);
+        lines.push(`      let tag;`);
+        lines.push(`      if (name) {`);
+        lines.push("        tag = document.querySelector(`meta[name='${name}']`);");
+        lines.push(`        if (!tag) {`);
+        lines.push(`          tag = document.createElement("meta");`);
+        lines.push(`          tag.setAttribute("name", name);`);
+        lines.push(`          document.head.appendChild(tag);`);
+        lines.push(`        }`);
+        lines.push(`      } else if (property) {`);
+        lines.push("        tag = document.querySelector(`meta[property='${property}']`);");
+        lines.push(`        if (!tag) {`);
+        lines.push(`          tag = document.createElement("meta");`);
+        lines.push(`          tag.setAttribute("property", property);`);
+        lines.push(`          document.head.appendChild(tag);`);
+        lines.push(`        }`);
+        lines.push(`      }`);
+        lines.push(`      if (tag) tag.setAttribute("content", content);`);
+        lines.push(`    });`);
+        lines.push(`  }`);
+        lines.push("");
+    }
+    if (parsed.hasView) {
+        lines.push(`  // Component view`);
+        if (parsed.isStyleScoped) {
+            let viewContent = parsed.view.trim();
+            const showGeneratedCode = typeof globalThis !== "undefined" &&
+                globalThis.fynixShowGeneratedCode !== undefined
+                ? globalThis.fynixShowGeneratedCode
+                : false;
+            if (showGeneratedCode) {
+                console.log(`${colors.magenta}[DEBUG] Original view content:${colors.reset}`);
+                console.log(viewContent.substring(0, 200));
+            }
+            const tagMatch = viewContent.match(/^(<\w+)((?:\s+[^>]*?)?)(\s*>)/s);
+            if (tagMatch) {
+                const openTag = tagMatch[1];
+                const attributes = tagMatch[2];
+                const closingBracket = tagMatch[3];
+                if (showGeneratedCode) {
+                    console.log(`${colors.magenta}[DEBUG] Matched tag:${colors.reset} ${openTag}`);
+                    console.log(`${colors.magenta}[DEBUG] Attributes:${colors.reset} ${attributes}`);
+                }
+                const modifiedStart = `${openTag}${attributes} data-${styleId}=""${closingBracket}`;
+                const restOfView = viewContent.substring(tagMatch[0].length);
+                const modifiedView = modifiedStart + restOfView;
+                if (showGeneratedCode) {
+                    console.log(`${colors.magenta}[DEBUG] Modified first line:${colors.reset}`);
+                    console.log(modifiedView.split("\n")[0]);
+                }
+                lines.push(`  return (`);
+                const viewLines = modifiedView.split("\n");
+                viewLines.forEach((line) => {
+                    lines.push(`    ${line}`);
+                });
+                lines.push(`  );`);
+            }
+            else {
+                lines.push(`  return (`);
+                lines.push(`    <div data-${styleId}="">`);
+                const viewLines = parsed.view.split("\n");
+                viewLines.forEach((line) => {
+                    lines.push(`      ${line}`);
+                });
+                lines.push(`    </div>`);
+                lines.push(`  );`);
+            }
+        }
+        else {
+            lines.push(`  return (`);
+            const viewLines = parsed.view.split("\n");
+            viewLines.forEach((line) => {
+                lines.push(`    ${line}`);
+            });
+            lines.push(`  );`);
+        }
+    }
+    else {
+        lines.push(`  return null;`);
+    }
+    lines.push(`}`);
+    lines.push("");
+    lines.push(`export default FynixComponent;`);
+    return lines.join("\n");
+}
+function validateSFC(parsed, filePath) {
+    if (!parsed.hasView) {
+        throw new Error(`${colors.red}[Fynix SFC]${colors.reset} Missing <view> block in ${colors.cyan}${filePath}${colors.reset}. Every .fnx file must have a <view> section.`);
+    }
+    if (parsed.hasLogic && !["ts", "js"].includes(parsed.logicLang)) {
+        throw new Error(`${colors.red}[Fynix SFC]${colors.reset} Invalid setup attribute in <logic> block in ${colors.cyan}${filePath}${colors.reset}. Must be "ts" or "js".`);
+    }
+    if (parsed.hasLogic && parsed.logicLang === "js") {
+        const tsPatterns = [
+            { pattern: /\binterface\s+\w+/, name: "interface declaration" },
+            { pattern: /\btype\s+\w+\s*=/, name: "type alias" },
+            { pattern: /:\s*\w+(\[\]|<[^>]+>)?\s*[;,=)]/, name: "type annotation" },
+            { pattern: /<\w+>(?!\s*<)/, name: "generic type" },
+            { pattern: /\benum\s+\w+/, name: "enum declaration" },
+            { pattern: /\bas\s+\w+/, name: "type assertion" },
+            { pattern: /\bnamespace\s+\w+/, name: "namespace" },
+            { pattern: /\babstract\s+class/, name: "abstract class" },
+            {
+                pattern: /\bpublic\s+|private\s+|protected\s+/,
+                name: "access modifier",
+            },
+        ];
+        const allCode = parsed.logic + "\n" + parsed.imports.join("\n");
+        for (const { pattern, name } of tsPatterns) {
+            if (pattern.test(allCode)) {
+                throw new Error(`${colors.red}[Fynix SFC]${colors.reset} TypeScript syntax detected ${colors.yellow}(${name})${colors.reset} in ${colors.cyan}${filePath}${colors.reset} with ${colors.yellow}setup="js"${colors.reset}.\n` +
+                    `${colors.gray}Either change to setup="ts" or remove TypeScript-specific syntax.${colors.reset}`);
+            }
+        }
+    }
+}
+class TypeScriptChecker {
+    constructor(customOptions) {
+        this.virtualFiles = new Map();
+        this.program = null;
+        this.compilerOptions = {
+            noEmit: true,
+            strict: true,
+            target: ts.ScriptTarget.ESNext,
+            module: ts.ModuleKind.ESNext,
+            jsx: ts.JsxEmit.Preserve,
+            lib: ["lib.es2023.d.ts", "lib.dom.d.ts"],
+            moduleResolution: ts.ModuleResolutionKind.Bundler,
+            esModuleInterop: true,
+            skipLibCheck: true,
+            allowSyntheticDefaultImports: true,
+            strictNullChecks: true,
+            strictFunctionTypes: true,
+            noImplicitAny: false,
+            allowJs: true,
+            checkJs: false,
+            resolveJsonModule: true,
+            isolatedModules: true,
+            ...customOptions,
+        };
+    }
+    addFile(fileName, content) {
+        this.virtualFiles.set(fileName, content);
+        this.program = null;
+    }
+    createCompilerHost() {
+        const defaultHost = ts.createCompilerHost(this.compilerOptions);
+        return {
+            ...defaultHost,
+            getSourceFile: (fileName, languageVersion) => {
+                if (this.virtualFiles.has(fileName)) {
+                    const content = this.virtualFiles.get(fileName);
+                    if (content === undefined)
+                        return undefined;
+                    return ts.createSourceFile(fileName, content, languageVersion, true);
+                }
+                try {
+                    if (ts.sys.fileExists(fileName)) {
+                        const content = ts.sys.readFile(fileName);
+                        if (content !== undefined) {
+                            return ts.createSourceFile(fileName, content, languageVersion, true);
+                        }
+                    }
+                }
+                catch (err) {
+                }
+                return undefined;
+            },
+            fileExists: (fileName) => {
+                if (this.virtualFiles.has(fileName))
+                    return true;
+                return ts.sys.fileExists(fileName);
+            },
+            readFile: (fileName) => {
+                if (this.virtualFiles.has(fileName)) {
+                    const content = this.virtualFiles.get(fileName);
+                    return content === undefined ? undefined : content;
+                }
+                const sysContent = ts.sys.readFile(fileName);
+                return sysContent === undefined ? undefined : sysContent;
+            },
+            writeFile: () => { },
+        };
+    }
+    checkFile(fileName) {
+        const errors = [];
+        try {
+            if (!this.virtualFiles.has(fileName)) {
+                return ["File not found in virtual file system"];
+            }
+            const compilerHost = this.createCompilerHost();
+            if (!this.program) {
+                this.program = ts.createProgram([fileName], this.compilerOptions, compilerHost);
+            }
+            const sourceFile = this.program.getSourceFile(fileName);
+            if (!sourceFile) {
+                return [`Could not get source file for ${fileName}`];
+            }
+            const diagnostics = [
+                ...this.program.getSyntacticDiagnostics(sourceFile),
+                ...this.program.getSemanticDiagnostics(sourceFile),
+            ];
+            const skipCodes = new Set([
+                2307,
+                2792,
+                7016,
+                7026,
+            ]);
+            diagnostics.forEach((diagnostic) => {
+                if (skipCodes.has(diagnostic.code)) {
+                    return;
+                }
+                if (diagnostic.file && diagnostic.start !== undefined) {
+                    const pos = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start);
+                    const line = pos?.line ?? 0;
+                    const character = pos?.character ?? 0;
+                    const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n");
+                    errors.push(`${colors.yellow}Line ${line + 1}:${character + 1}${colors.reset} - ${message} ${colors.gray}(TS${diagnostic.code})${colors.reset}`);
+                }
+                else {
+                    const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n");
+                    errors.push(`${message} ${colors.gray}(TS${diagnostic.code})${colors.reset}`);
+                }
+            });
+        }
+        catch (error) {
+            errors.push(`${colors.red}Type checking error:${colors.reset} ${error instanceof Error ? error.message : String(error)}`);
+        }
+        return errors;
+    }
+    clear() {
+        this.virtualFiles.clear();
+        this.program = null;
+    }
+}
+export default function fynixPlugin(options = {}) {
+    const { jsxFactory = "Fynix", jsxFragment = "Fynix.Fragment", include = [".ts", ".js", ".jsx", ".tsx", ".fnx"], exclude = ["node_modules"], sourcemap = true, esbuildOptions = {}, enableSFC = true, showGeneratedCode = false, typeCheck = false, tsConfig, } = options;
+    let typeChecker = null;
+    if (typeCheck) {
+        typeChecker = new TypeScriptChecker(tsConfig);
+    }
+    return {
+        name: "vite-plugin-fynix-sfc",
+        enforce: "pre",
+        async transform(code, id) {
+            const normalizedId = normalizePath(id);
+            const shouldExclude = exclude.some((pattern) => normalizedId.includes(pattern));
+            if (shouldExclude)
+                return null;
+            const shouldInclude = include.some((ext) => normalizedId.endsWith(ext));
+            if (!shouldInclude)
+                return null;
+            const ctx = this;
+            if (typeof ctx.addWatchFile === "function") {
+                ctx.addWatchFile(id);
+            }
+            try {
+                let codeToTransform = code;
+                let loader = "tsx";
+                let shouldTypeCheck = false;
+                if (normalizedId.endsWith(".fnx") && enableSFC) {
+                    const parsed = parseSFC(code);
+                    validateSFC(parsed, normalizedId);
+                    codeToTransform = transformSFC(parsed, normalizedId, jsxFactory);
+                    if (showGeneratedCode) {
+                        console.log(`\n${colors.cyan}${"=".repeat(80)}${colors.reset}`);
+                        console.log(`${colors.cyan}[Fynix SFC]${colors.reset} Generated code for: ${colors.gray}${normalizedId}${colors.reset}`);
+                        console.log(`${colors.cyan}${"=".repeat(80)}${colors.reset}`);
+                        console.log(codeToTransform);
+                        console.log(`${colors.cyan}${"=".repeat(80)}${colors.reset}\n`);
+                    }
+                    shouldTypeCheck = typeCheck && parsed.logicLang === "ts";
+                    if (shouldTypeCheck && typeChecker) {
+                        const virtualFileName = normalizedId.replace(/\.fnx$/, ".virtual.tsx");
+                        typeChecker.addFile(virtualFileName, codeToTransform);
+                        const typeErrors = typeChecker.checkFile(virtualFileName);
+                        if (typeErrors.length > 0) {
+                            console.error(`\n${colors.red}${colors.bold}[Fynix SFC] TypeScript Errors${colors.reset} in ${colors.cyan}${normalizedId}${colors.reset}:`);
+                            typeErrors.forEach((error) => console.error(`  ${error}`));
+                            console.error("");
+                            if (process.env.NODE_ENV === "production") {
+                                throw new Error(`TypeScript errors in ${normalizedId}`);
+                            }
+                        }
+                        shouldTypeCheck = false;
+                    }
+                }
+                else {
+                    if (normalizedId.endsWith(".ts")) {
+                        loader = "ts";
+                        shouldTypeCheck = typeCheck;
+                    }
+                    else if (normalizedId.endsWith(".tsx")) {
+                        loader = "tsx";
+                        shouldTypeCheck = typeCheck;
+                    }
+                    else if (normalizedId.endsWith(".jsx")) {
+                        loader = "jsx";
+                    }
+                    else if (normalizedId.endsWith(".js")) {
+                        loader = "js";
+                    }
+                }
+                if (shouldTypeCheck && typeChecker) {
+                    typeChecker.addFile(normalizedId, codeToTransform);
+                    const typeErrors = typeChecker.checkFile(normalizedId);
+                    if (typeErrors.length > 0) {
+                        console.error(`\n${colors.red}${colors.bold}[Fynix SFC] TypeScript Errors${colors.reset} in ${colors.cyan}${normalizedId}${colors.reset}:`);
+                        typeErrors.forEach((error) => console.error(`  ${error}`));
+                        console.error("");
+                        if (process.env.NODE_ENV === "production") {
+                            throw new Error(`TypeScript errors in ${normalizedId}`);
+                        }
+                    }
+                }
+                const result = await transform(codeToTransform, {
+                    loader,
+                    jsxFactory,
+                    jsxFragment,
+                    sourcemap,
+                    sourcefile: id,
+                    target: "esnext",
+                    format: "esm",
+                    ...esbuildOptions,
+                });
+                return {
+                    code: result.code,
+                    map: result.map || null,
+                };
+            }
+            catch (error) {
+                const err = error;
+                console.error(`\n${colors.red}${colors.bold}[Fynix SFC] Transform Error${colors.reset} in ${colors.cyan}${id}${colors.reset}:`);
+                console.error(`  ${colors.red}${err.message}${colors.reset}\n`);
+                const ctx = this;
+                if (typeof ctx.error === "function") {
+                    ctx.error({
+                        message: `Failed to transform ${id}: ${err.message}`,
+                        stack: err.stack,
+                        id,
+                    });
+                }
+                else {
+                    throw err;
+                }
+                return null;
+            }
+        },
+        handleHotUpdate(ctx) {
+            const { file, server } = ctx;
+            const normalizedFile = normalizePath(file);
+            const shouldReload = include.some((ext) => normalizedFile.endsWith(ext));
+            if (shouldReload) {
+                console.log(`${colors.green}[HMR]${colors.reset} ${colors.gray}${normalizedFile}${colors.reset}`);
+                if (typeChecker) {
+                    typeChecker.clear();
+                }
+                server.ws.send({
+                    type: "full-reload",
+                    path: "*",
+                });
+                return [];
+            }
+            return undefined;
+        },
+        config() {
+            const config = {
+                esbuild: {
+                    jsxFactory,
+                    jsxFragment,
+                    jsxInject: `import { ${jsxFactory} } from '@fynixorg/ui'`,
+                },
+                optimizeDeps: {
+                    include: ["@fynixorg/ui"],
+                    esbuildOptions: {
+                        jsx: "transform",
+                        jsxFactory,
+                        jsxFragment,
+                    },
+                },
+                resolve: {
+                    extensions: [".fnx", ".ts", ".tsx", ".js", ".jsx", ".json"],
+                },
+            };
+            return config;
+        },
+        buildStart() {
+            console.log(`${colors.cyan}[vite-plugin-fynix-sfc]${colors.reset} Initialized`);
+            if (enableSFC) {
+                console.log(`${colors.cyan}[vite-plugin-fynix-sfc]${colors.reset} SFC support: ${colors.green}enabled${colors.reset}`);
+            }
+            if (typeCheck) {
+                console.log(`${colors.cyan}[vite-plugin-fynix-sfc]${colors.reset} Type checking: ${colors.green}enabled${colors.reset}`);
+            }
+        },
+        buildEnd() {
+            if (typeChecker) {
+                typeChecker.clear();
+            }
+        },
+    };
+}
+export { fynixPlugin, TypeScriptChecker };